What is the correct event to hook into if you want to use JS to modify the UI?

[Kadigan]

Hey.

I've noticed that the size (e.g. for Hires.fix) depend not on resolution limits, but rather on the megapixel count (for example, my GTX 1080 can handle up to 2.3 MP before CUDA runs out of vram).

I would like to add a MP indicator directly following the text (so that it says for ex. from 640x360 to 1920x1080 (~2.07 MP)).

However, in order to do that I need to modify the UI. The DOM Ready fires when the loading animation starts, and obviously that's not the moment the UI is ready. I would like to avoid indexing mutations on the DOM, obviously.

What's the event I should "hang onto" to know when the UI is fully loaded and ready for actual manipulation? If there's a better way - like, maybe, a Python call to inject my JS after core UI loading is done - then I have no clue about that, and would love to know about it. I'm a PHP/web developer by trade, this is all new ground for me.

I thank you in advance for educating me.

[ThereforeGames]

You can use onUiLoaded() in your Javascript file to delay your HTML modifications until the WebUI is ready. Check my sd-webui-breadcrumbs extension for a working example:

https://github.com/ThereforeGames/sd-webui-breadcrumbs/blob/main/javascript/sd-webui-breadcrumbs.js

This extension was made specifically for UI customizations, so you may find other useful things in the codebase.

[Kadigan]

Thank you very much! That's exactly what I needed.

Is there a Wiki for such things?

[ThereforeGames]

Not really - the WebUI is fantastic but documentation is not one of its strong suits.

The official wiki is here:

https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Developing-custom-scripts

Between that and various Civitai guides, there's enough information to get started on developing your own extensions... but sooner or later you may have to dive into the source code of other extensions to see how certain things are done.