import gradio as gr

def predict(text, url_params):
    print(url_params)
    return ["Hello " + text + "!!", url_params]


get_window_url_params = """
    function(text_input, url_params) {
        console.log(text_input, url_params);
        const params = new URLSearchParams(window.location.search);
        url_params = Object.fromEntries(params);
        return [text_input, url_params];
        }
    """

get_window_url_params_s = """
    function(url_params) {
        console.log(url_params);
        const params = new URLSearchParams(window.location.search);
        url_params = Object.fromEntries(params);
        return [url_params];
        }
    """
set_window_url_params = """
    function(text_input, url_params) {
            const state = {text_input:text_input}
    	    const queryString = '?' + new URLSearchParams(state).toString();
            window.parent.postMessage({ queryString: queryString }, "*")
            return [text_input, state];
        }
    """
with gr.Blocks() as block:
    url_params = gr.JSON({}, visible=True, label="URL Params")
    text_input = gr.Text(label="Input")
    text_output = gr.Text(label="Output")

    btn = gr.Button("Get Params")
    btn.click(fn=predict, inputs=[text_input, url_params],
              outputs=[text_output, url_params], _js=get_window_url_params)

    btn2 = gr.Button("Set Params")
    btn2.click(fn=predict, inputs=[text_input, url_params],
              outputs=[text_output, url_params], _js=set_window_url_params)
    
    block.load(
        fn=lambda x:x,
        inputs=[url_params],
        outputs=[url_params],
        _js=get_window_url_params_s
    )   
block.launch(debug=True)