Skip to content

refactor: decouple python from js and css#297

Merged
hlky merged 6 commits into
Sygil-Dev:masterfrom
codedealer:ui-refactoring
Aug 30, 2022
Merged

refactor: decouple python from js and css#297
hlky merged 6 commits into
Sygil-Dev:masterfrom
codedealer:ui-refactoring

Conversation

@codedealer
Copy link
Copy Markdown
Collaborator

This is a large change that concerns frontend folder.
In short css_and_js.py was refactored to be a facade for frontend files which are stored in their respective folders: css and js.

Currently the implementation is very simple. It bundles together css files based on ops and js is just one big file that exposes SD object to the global space. At a later date it can be expanded as needed while maintaining a simple interface with python scripts via css_and_js.py.

I tested it to my ability but the changes are vast so I might have missed a few things.

IMPORTANT NOTES

  1. To load the js on load event I currently use a hack with invisible element. This is only temporary until the next gradio version is released. My PR has already been merged into master there: Allow frontend method execution on Block.load event gradio-app/gradio#2108
  2. Calls to js functions depend on ids of the relevant components. Those should be made into dictionary or something like that instead of just string literals.
  3. I had to remove the changes made in 7ddbd65 in order to push. I will try to incorporate them later.

@hlky
Copy link
Copy Markdown
Contributor

hlky commented Aug 30, 2022

As this is such a large change I'll wait for you to resolve the conflicts, we'll get a few people to test then coordinate the sync to master because it's a big change of frontend again that will 💯% require a pull from main repo

@hlky
Copy link
Copy Markdown
Contributor

hlky commented Aug 30, 2022

Well nothing seems broken, tested txt2img and img2img 🤞

Comment thread frontend/css_and_js.py
input[type=number]:disabled { -moz-appearance: textfield;+ }
def js(opt):
data = readTextFile("js", "index.js")
data = "(z) => {" + data + "; return z ?? [] }"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What's this part?

Comment thread frontend/css_and_js.py
def js_move_image(from_id, to_id):
return w(f"moveImageFromGallery('{from_id}', '{to_id}')")

def js_copy_to_clipboard(from_id):
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Python bindings for every JS function?

Comment thread frontend/frontend.py
""")
# Hack: Detect the load event on the frontend
# Won't be needed in the next version of gradio
# See the relevant PR: https://github.com/gradio-app/gradio/pull/2108
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👏

@codedealer codedealer deleted the ui-refactoring branch September 7, 2022 10:22
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants