import gradio as gr

get_local_storage = """
    function() {
      globalThis.setStorage = (key, value)=>{
        localStorage.setItem(key, JSON.stringify(value))
      }
       globalThis.getStorage = (key, value)=>{
        return JSON.parse(localStorage.getItem(key))
      }
       const text_input =  getStorage('text_input')
       const dropdown =  getStorage('dropdown')
       const local_data =  getStorage('local_data')
       return [text_input, dropdown, local_data];
      }
    """


def predict(text_input, dropdown):
    return {
        "text": text_input,
        "dropdown": dropdown,
        "something_else": [text_input] * 3 + [dropdown],
    }


with gr.Blocks() as block:
    text_input = gr.Text(label="Input")
    dropdown = gr.Dropdown(["first", "second", "third"], type="index")
    local_data = gr.JSON({}, label="Local Storage")

    dropdown.change(None, dropdown, None, _js="(v)=>{ setStorage('dropdown',v) }")
    text_input.change(None, text_input, None, _js="(v)=>{ setStorage('text_input',v) }")
    local_data.change(None, local_data, None, _js="(v)=>{ setStorage('local_data',v) }")
    btn = gr.Button("Set New Data")
    btn.click(fn=predict, inputs=[text_input, dropdown], outputs=[local_data])
    block.load(
        None,
        inputs=None,
        outputs=[text_input, dropdown, local_data],
        _js=get_local_storage,
    )
block.launch(debug=True)