Trying to add some buttons, need help understanding Gradio's function value passing

[TheHorscht]

I'm trying to modify the code to add some buttons to optimize my workflow and I've spent the past 3 days trying to figure this out but nothing makes sense! The main issue is that I don't understand how the values get passed from the elements specified in the click handler's inputs=[...] through a javascript function specified in _js=my_func to the python function specified in fn=my_py_func.

To experiment, I created a minimal example script:

import gradio as gr

def boop(a):
  print(type(a)) # <----- <class 'list'>
  return "testy"

with gr.Blocks() as demo:
  slider = gr.Slider(0)
  textfield = gr.Textbox()
  button = gr.Button("Click me")
  button.click(
    fn=boop,
    _js='x => {\
      const arr = [["a", "c", 55], -2];\
      return arr;\
    }',
    inputs=[slider],
    outputs=[textfield]
  )

demo.launch()

This returns an array from the JS function and correctly passes that on to the python function as a list.
However, if I do the (to my eyes) exact same thing in the WebUI, it's suddenly a serialized STRING!

def testytest(a):
    print(type(a)) # <------- <class 'str'>
    return "testy"
button.click(
    fn=testytest,
    _js='gen_info => {\
    let index = selected_gallery_index();\
    const a = ["a", index];\
    console.log(a);\
    return a;\
}', inputs=[generation_info], outputs=[txt2img_prompt])

Why?!

Could someone please shed some light on the inner workings at play here? I just don't get it and have unsuccessfully tried to figure it out myself.

[ghost]

idk why but it seems that way
why not parse the string yourself, or even eval like
aa=eval(a)

btw, a tip, just in case: click reload ui button after you change your script

[TheHorscht]

I made some progress now, I'm not sure what I changed because there's been so many iterations, but the arguments are now properly arriving in the python function and I got a basic version of my desired button working!

I think involving the submit function was a key point that got it working. Idk maybe you have to make a copy of the array otherwise it serializes it as a string or something... If anyone knows let me know.

For anyone who wants to see the final mess:

# right after txt2img_prompt.submit(**txt2img_args)
txt2img_args_copy = txt2img_args.copy()
txt2img_args_copy['inputs'][20] = denoise_strength_slider # denoising_strength
txt2img_args_copy['inputs'][21] = scale_slider # hr_scale

def get_seed(task_id, gen_info_string, selected_gallery_index, *args):
    selected_gallery_index = max(0, selected_gallery_index - 1)
    res = -1
    try:
        gen_info = json.loads(gen_info_string)
        index = gen_info.get('index_of_first_image', 0)
        index -= 1
        index += selected_gallery_index
        all_seeds = gen_info.get('all_seeds', [-1])
        res = all_seeds[index if 0 <= index < len(all_seeds) else 0]
    except json.decoder.JSONDecodeError as e:
        if gen_info_string != '':
            print("Error parsing JSON generation info:", file=sys.stderr)
            print(gen_info_string, file=sys.stderr)
    args = list(args)
    args[7] = 1 # batch_count
    args[8] = 1 # batch_size
    args[10] = res # seed
    args[18] = True # enable_hr
    # args[19] = 0.2 # denoising_strength
    return tuple(modules.txt2img.txt2img(task_id, *args))

generate_hi_res_button.click(
    fn=wrap_gradio_gpu_call(get_seed, extra_outputs=[None, '', '']),
    _js='(unused1, gen_info) => {\
    console.log("arguments:", arguments);\
    const a = submit(...arguments[0]);\
    a[1] = gen_info;\
    a[2] = selected_gallery_index();\
    console.log(a);\
    return a;\
}', inputs=[dummy_batch_count, generation_info] + txt2img_args_copy['inputs'], outputs=[txt2img_gallery, generation_info, html_info, html_log])

(This whole "input/output count has to match" stuff is a pain in the ass when you want to add more outputs from the JS function...)