I need a few ideas, building some themes

[Gerschel]

Currently we have a few themes, some sheets need updating. I just added a way to handle special affects.
Here are some examples. Thanks to each contributor, and a special thanks to @Nacurutu for working on the css side of it.
And if the colors don't suit, some have support for adjusting with colorpickers and sliders. Right now the app lives in a tab, I might move it to settings.
Adjusters view, they are dynamic, if you write your css in a certain way, the app will generate the pickers and sliders.

[cibernicola]

Speaking of templates.
I think it would be interesting if there were several types of templates, some more focused on content, others more focused on the different inputs, etc... That is to say, not only templates that change the color of things but templates that change the structure of the graphical environment.
For example somthing like this, by vladmandic

[Gerschel]

Thanks. This is good information. Layout wasn't something I had fully considered, I did write a script the other day that makes things draggable, this was for another extension I am working on. The issue that popped up for me once I enabled draggable on txt2img and img2img, it could grab the hidden fields from the other tab, or drop behind into the other tab. So I stopped progress at that point.

Then I had another script, where you can specify which element should be located at which position, it wasn't user friendly. I used it to test pushing presets manager into quicksettings.

Then, there's the sliders, we built it in a way where the css can specify for range sliders to be created. The javascript updates the page live. The css handles which elements that slider affects, and python saves it as a file.

I think with the combination of these, we can force different layouts and make them configurable.
I'm not a desinger though, so I can't come up with something that looks cool, I can just work on the thing that helps others make it look cool. But at least now, I got a better goal for my part of the job.

[cibernicola]

I'm just thinking about how to manage one of the parts that I believe are more problematic and that will be worse over time: Models, Hypernetworks, Embeddings, Aesthetics, VAE's, and probably yaml configs...

To start at the beginning I think that, conceptually, what is important in each of them is the following:

I sincerely believe that, in some way, that information must:

(a) be in the WebUI environment.
b) allow editing
c) potentially automate some parts of point b.

I'm still thinking... and doing some testing.

[cibernicola]

Also, don't forget this setting:

It may help so much "moving" things:

[Gerschel]

There were two ways to grab the quicksettings list, and be able to adjust it using presets. One method I did, but didn't release, was to grab the quicksettings list from shared.opts. Use the same stuff option info used, to create the components.
I was going to include it in preset manager, so presets can change those settings. I didn't like the look, I could make them invisible, and they serve as a link to the header.

The second method, was coding different handlers for the different types of components using javascript. This one works as is. I coded it in a way where I can get and send from withing gradio, this way I can link the preset manager to any component regardless of tab.

I have indecisiveness, too many choices dilemma, that makes my progress lock up.
I'm going to chain it in this example, but these object methods wouldn't be chained like this.
Paste this in your console.

class PresetManagerDropdownComponent{
    constructor(component){
        this.component = gradioApp().getElementById(component)
    }
    updateDropdown(selection){
        //getElementById("preset-util_preset_ds_dd").querySelector("select").querySelectorAll("option")[1].selected = true;
        //Array.from(this.component.querySelector("select").querySelectorAll("option")).find( e => e.value.includes(selection)).selected = true;
        this.getDropDownOptions().find( e => e.value.includes(selection)).selected = true;
        this.component.querySelector("select").dispatchEvent(new Event("change"));
    }
    getDropDownOptions(asValues=false){
        if (asValues){
            let temp = new Array;
            Array.from(this.component.querySelector("select").querySelectorAll("option")).forEach( opt => temp.push(opt.value))
            return temp
        }
        else{
            return Array.from(this.component.querySelector("select").querySelectorAll("option"))
        }
    }
    getCurrentSelection(){
        return this.component.querySelector("select").value
    }
}

Then to execute it, paste this:

let sd_checkpoint = new PresetManagerDropdownComponent("setting_sd_model_checkpoint")//Put elem id of dropdown
sd_checkpoint.updateDropdown(sd_checkpoint.getDropDownOptions(true)[1])//getDDoptions returns array, true = as values, default is false as array of object
//sd_checkpoint.updateDropdown("partial name") works too.

This code below is outdated, so it won't work as is, it would need updating, but this is how I did it.
It is also part of my class, so some adjustments to single it out or migrate it into another class would be needed.

    def hijack_quick_settings(self):
        qs_names = [qs.strip() for qs in opts.quicksettings.split(",") if qs != "quicksettings"]
        print(qs_names)
        qs_list = [(i,k,v) for i, (k, v) in enumerate(opts.data_labels.items()) if k in qs_names and not shared.cmd_opts.freeze_settings and v.section is not None]
        self.qs_mimic_c = {}

        def create_refresh_button(refresh_component, refresh_method, refreshed_args, elem_id):
            def refresh():
                refresh_method()
                args = refreshed_args() if callable(refreshed_args) else refreshed_args
                for k,v in args.items():
                    setattr(refresh_component, k, v)
                return gr.update(**(args or {}))
            refresh_button = gr.Button(value=ui.refresh_symbol, elem_id=elem_id)
            refresh_button.click(
                fn=refresh,
                inputs = [],
                outputs = [refresh_component]
            )
            return refresh_button

        def create_component_from_settings(k):
            info = opts.data_labels[k]
            info_type = type(info.default)
            args = info.component_args() if callable(info.component_args) else info.component_args
            
            if info.component is not None:
                comp = info.component
            elif info_type == str:
                comp = gr.Textbox
            elif info_type == int:
                comp = gr.Number
            elif info_type == bool:
                comp = gr.Checkbox
            else:
                raise Exception(f"Bad item type {str(info_type)} for {k}")
            
            element_id = "setting" + f"_{k}"
            if info.refresh is not None:
                result = comp(label=info.label, value=opts.data[k] if k in opts.data else opts.data[k].default, elem_id=element_id, **(args or {}), render=False)
                create_refresh_button(result, info.refresh, info.component_args, "refresh" + k)
            else:
                result = comp(label=info.label, value=opts.data[k] if k in opts.data else opts.data[k].default, elem_id=element_id, **(args or {}), render=False)
            
            return result

        #1483
        def run_single_setting(v,k):
            if not opts.same_type(v, opts.data_labels[k].default):
                return gr.update(visible=True), opts.dumpjson()
            if not opts.set(k,v):
                return gr.update(v=getattr(opts,k)), opts.dumpjson()
            
            opts.save(shared.config_filename)
            return gr.update(value=v), opts.dumpjson()
        #1635
        text_settings = gr.Textbox(elem_id="settings_json", value=lambda: opts.dumpjson(), visible=False)
        #1642
        for i,k,v in qs_list:
            component =  create_component_from_settings(k)
            print(component)
            self.qs_mimic_c.update({k:component})
            component.change(fn=lambda value, k=k: run_single_setting(value, k=k),
                inputs = [component],
                outputs = [component, text_settings]
            )

[cibernicola]

What if we join ideas? #6527

[Nacurutu]

great inicitive @Gerschel lets see what the community has in mind...

also, I still havent finished the css, right now im strugling with the webui

I was able to update the wubui to torch==1.13.1+cu117 and torchvision==0.14.1+cu117

But I have literally 7 hours trying to update Xformers to 0.0.16 and Im not able to do it, I have searched all github, reedit, google.. followed 21374628746 tutorials, steps... and nothing... I just cant... and I need Xformers because i just have an 1660ti 6gb vram, so Xformers helps me a lot.