refactor: python js interface

[codedealer]

Some changes to the frontend folder following the feedback in #343.

css_and_js.py has been cleaned up. There is only one helper method call_SD that will call any method in js SD object you specify. Additionally it will pass any arguments into the method via object so the names of python arguments are translated to js directly.

• Reliance on a shared property has been removed; every method now gets Gradio input argument as params.x.
• Methods are allowed to return nullish values now (although those are converted to empty arrays internally for compatibility with Gradio frontend code).

[altryne]

I've opened a ticket to allow for global JS execution with Gradio folks, and would really love to wait and see what they come up with.
gradio-app/gradio#2141

[nderscore]

I wonder if there's some JSON formatter we could use here instead to get character escaping automatically? This is probably fine for now though

[nderscore]

Copying this from the other comment chain:

I would do recommend doing it like this:

import json

some_options = {
  "num": 123,
  "bool": True,
  "str": "this is a string"
}

json_str = json.dumps(some_options)

function_name = "some_function"

function_call_str = f"async (x) => {{ return await SD.{function_name}({{ ...{json_str}, x }}) ?? []; }}"

which results in:

async (x) => { return await SD.some_function({ ...{"num": 123, "bool": true, "str": "this is a string"}, x }) ?? [] }

which is essentially the same as this after the object spread is evaluated:

async (x) => { return await SD.some_function({ num: 123, bool: true, str: "this is a string", x }) ?? [] }

And the original types are retained without needing to manually add quotes around strings or convert True to true etc.

[nderscore]

This was resolved by 4da7cb6

[nderscore]

Thanks for taking a look into this and addressing my feedback. This is a much cleaner abstraction 👏 🎉

I left a small comment, but no big concerns here 👍

[codedealer]

I've opened a ticket to allow for global JS execution with Gradio folks, and would really love to wait and see what they come up with. gradio-app/gradio#2141

@altryne my guy, I literally got this merged a few days back gradio-app/gradio#2108
As soon as 3.2 is released we shall have it.

[altryne]

I don't follow all their incoming issues haha so I didn't have any idea this is going to be possible, it's been a little hectic as you might imagine

I've opened a ticket to allow for global JS execution with Gradio folks, and would really love to wait and see what they come up with. gradio-app/gradio#2141

@altryne my guy, I literally got this merged a few days back gradio-app/gradio#2108 As soon as 3.2 is released we shall have it.

In that case, why merfe a refactor now when the above will get released we'll have a much cleaner interface?

[nderscore]

In that case, why merfe a refactor now when the above will get released we'll have a much cleaner interface?

This change in gradio-app/gradio#2108 only impacts how this library code gets initialized - not how method calls work. The changes in this PR should still be relevant.

[codedealer]

Well the interface will stay mostly the same and this refactor was done by me mainly in preparation for the upcoming merge (I started it after my PR in gradio was accepted).

What it will allow us to do is to remove a hack used to instantiate SD global object cleanly and remove that travesty:

load_detector = gr.Number(value=0, label="Load Detector", visible=False)
load_detector.change(None, None, None, _js=js(opt))
demo.load(lambda x: 42, inputs=load_detector, outputs=load_detector)

I understand that it's been very chaotic recently and I don't know how closely you've been paying attention to the dev repo's codebase but we actually write js code in actual js files now. So it's not have been for nothing

[altryne]

write js code in actual js files now

That's an amazing upgrade on it's own, let's do it. the JS parts in python hurt my soul (and my vscode)

I understand that it's been very chaotic recently

Yeah, just a few short days, and tons of people asking for help or collaboration or access etc, good trouble.

[altryne]

@codedealer looks like this it?
#297
I should set up codeowners so I get tag automatically for everything /frontend related 🤔

[codedealer]

Yes, this PR builds on top of that one.

[altryne]

Catching up

[codedealer]

@altryne don't merge it yet :D

[codedealer]

Clipboard api, gave me grief. Should be good now

[nderscore]

updates in 4da7cb6 look great 👏

thanks again for updating 🙏