Accordion in settings tab

[BlafKing]

Hi all!
I'm trying to add a gradio accordion component to the settings tab of my extension, does anyone perhaps know if this is possible?
I've not been able to figure out a way to achieve this by using the shared.opts.add_option(shared.OptionInfo(...))

The furthest I got is by using:
shared.opts.add_option("accordion", shared.OptionInfo(label="Placeholder", component=gr.Accordion, section=section))
But this breaks when you load the web UI, since it tries to pass a value to a gradio accordion which is not possible:

Traceback (most recent call last):
  File "F:\AI\Programs\Automatic1111 SD\system\python\lib\site-packages\gradio\routes.py", line 488, in run_predict    output = await app.get_blocks().process_api(
  File "F:\AI\Programs\Automatic1111 SD\system\python\lib\site-packages\gradio\blocks.py", line 1434, in process_api
    data = self.postprocess_data(fn_index, result["prediction"], state)
  File "F:\AI\Programs\Automatic1111 SD\system\python\lib\site-packages\gradio\blocks.py", line 1326, in postprocess_data
    prediction_value = postprocess_update_dict(
  File "F:\AI\Programs\Automatic1111 SD\system\python\lib\site-packages\gradio\blocks.py", line 449, in postprocess_update_dict
    update_dict = block.get_specific_update(update_dict)
  File "F:\AI\Programs\Automatic1111 SD\system\python\lib\site-packages\gradio\blocks.py", line 326, in get_specific_update
    specific_update = cls.update(**generic_update)
TypeError: Accordion.update() got an unexpected keyword argument 'value'

[BlafKing]

I'm getting closer, Managed to add an accordion to the settings without issues, it now fails to save the settings though since it does not expect an accordion.
AssertionError: <class 'gradio.layouts.Accordion'> Component with id 2010 not a valid input component.

I'll describe here how I managed to add the accordion:

Turns out the get_value_for_setting function from the ui_settings.py file inside the modules causes the error in the original post.
File located here: (webui/modules/ui_settings.py)

The function attempts to update the gradio component of every setting with it's value, here is the original function:

def patched_get_value_for_setting(key):
    value = getattr(opts, key)

    info = opts.data_labels[key]
    args = info.component_args() if callable(info.component_args) else info.component_args or {}
    args = {k: v for k, v in args.items() if k not in {'precision'}}
    
    return gr.update(value=value, **args)

By modifying the function, we can detect when an accordion is attempted to be used by looking for a certain value which we can set whilst creating the accordion, here is the modified function:

from modules import ui_settings # import for applying the modified function.

def patched_function(key):
    value = getattr(opts, key)

    info = opts.data_labels[key]
    args = info.component_args() if callable(info.component_args) else info.component_args or {}
    args = {k: v for k, v in args.items() if k not in {'precision'}}
    
    if value == "gradio_accordion":  # Added if statement here that checks the value
        return gr.update(**args)     # Removed the value=value
    
    return gr.update(value=value, **args)

ui_settings.get_value_for_setting = patched_function # Apply modification to the function inside the ui_settings.py file

In the code above, I patch the function that causes the error by adding an if statement that checks if the value is "gradio_accordion".

We can set the value of our accordion to "gradio_accordion" like so:

from modules import script_callbacks, shared

def on_ui_settings():
    section = ("internal_name_here", "visual_name_here")
    shared.opts.add_option("setting_name", shared.OptionInfo("gradio_accordion", "Accordion name", gr.Accordion, section=section))
    
script_callbacks.on_ui_settings(on_ui_settings)

The modified function will now detect "gradio_accordion" as the value, and then no longer attempt to update a value to the accordion component!

I'm not sure if this will break anything else, but it seems to work well for me, so I thought I'd share it in case someone else is looking into this! :)