Refresh UI post change in URL parameters
I have a gradio app where I wish to hide certain text boxes in normal model and only display them when in debug mode. For this, I’m capturing query params from the url (url:/?debug=true) and setting visibility of these boxes basis that. However, the app once instantiated remains in the same state - UI doesn’t change while switching between the urls.Here’s my code:get_window_url_params = """
function() {
    const params = new URLSearchParams(window.location.search);
    const url_params = Object.fromEntries(params);
    console.log(url_params);  // Debugging line

    return [url_params];
}
"""

def init_ui_components(url_params):
    print(url_params)
    debug_mode = url_params.get('debug', 'false') == 'True'
    print("Debug Mode:", debug_mode)
    visibility = debug_mode  # True means boxes will be visible, False means they will be hidden
    contextbox = gr.Textbox(label='Context', visible=visibility)
    qeroutputbox = gr.Textbox(label='QER String', visible=visibility)
    intentoutputbox = gr.Textbox(label='Intent', visible=visibility)
    return contextbox, qeroutputbox, intentoutputbox

with gr.Blocks(css='style.css') as demo:
  ### Other components defined 

  url_params = gr.JSON({}, visible=False, label="URL Params")
  
  
  # Read the URL parameters when the Gradio app starts
  init_values = demo.load(fn=lambda x: x, inputs=url_params, outputs=url_params, _js=get_window_url_params)
  print("init values", init_values)
  # Check the structure of the outputs
  outputs = init_values.get('outputs', [])
  if outputs and isinstance(outputs[0], dict):
      extracted_url_params = outputs[0]
  else:
      extracted_url_params = {}
  print("extracted_url_params", extracted_url_params)
  # Use the debug value from the extracted url_params to initialize our UI components
  contextbox, qeroutputbox, intentoutputbox = init_ui_components(extracted_url_params)

### rest of the code ####
demo.queue(max_size=20).launch(share=False, server_name="10.10.76.98", server_port=7861)The init_values gets printed only once - how can I force a UI reload/refresh upon change in url params?
2023-10-14T19:43:26Z
Hi, this example doesn’t work. Not sure why it worked before…Theextracted_url_paramsis an empty{}This is the output I get:init values {'targets': [(None, 'load')], 'inputs': [1], 'outputs': [1], 'backend_fn': True, 'js': '\n                            function() {\n                                const params = new URLSearchParams(window.location.search);\n                                const url_params = Object.fromEntries(params);\n                                console.log(url_params);  // Debugging line\n\n                                return [url_params];\n                            }\n                        ', 'queue': None, 'api_name': None, 'scroll_to_output': False, 'show_progress': 'full', 'every': None, 'batch': False, 'max_batch_size': 4, 'cancels': [], 'types': {'continuous': False, 'generator': False}, 'collects_event_data': False, 'trigger_after': None, 'trigger_only_on_success': False} OUTPUTS:  [1] 1 extracted_url_params {}I have inspected thecodebaseand it appears that the output is theDependency. I am using 3.45.2 version of gradio & 0.5.3 gradio client. What version of Gradio are you using?Any tips? Suggestions?Thank you!
2023-10-20T03:46:19Z
Since few weeks ago you can get the url param fromgr.Request, here is an exampleimport gradio as gr

def echo(text, request: gr.Request):
    if request:
        print("Request headers dictionary:", request.headers)
        print("IP address:", request.client.host)
        print("Query parameters:", dict(request.query_params))
    return text

io = gr.Interface(echo, "textbox", "textbox").launch()morehere
2023-10-20T03:59:49Z
Thank you for responding@radamesbut this does not return the query parameters to be used as a variable but returns to the text to the Component. Did that make sense?
2023-10-20T04:22:11Z
hi@blackmarkt,You can have it on agr.Stateand load it on loadimport gradio as gr

def echo(params):
    print(params)
    return params

def get_params(request: gr.Request):
  params = request.query_params
  ip = request.client.host
  return {"params": params, 
          "ip": ip}

  
with gr.Blocks() as demo:
  url_params = gr.State()
  text_in = gr.Textbox()
  text_out = gr.JSON()
  btn = gr.Button()
  btn.click(echo, inputs=[url_params], outputs=[text_out])
  demo.load(get_params, None, url_params)

demo.queue()
demo.launch()
#demo.launch(debug=True, share=True)
2023-10-20T13:36:27Z
@radamesHmmm this didn’t work either. When I print out theurl_paramsit showsstateand is of type<class 'gradio.components.state.State'>which is consistent with thecodebase. Also thebtn.click(echo, inputs=[url_params], outputs=[text_out])doesn’t output theparamsso I am again not able to capture the actual URL parameters and store them in global variables.Not sure why if you’re seeing something else. Suggestions?
2023-10-20T13:53:36Z
Thanks@radamesbut this again didn’t work for me. I can see the printedparamsbut can’t access them. When I print theurl_paramsI getstateand type<class 'gradio.components.state.State'>.I can see the URL parameters outputted in thegr.JSONbut can’t store the actual parameters as global variables.Did that make sense? I feel like there is a not understanding of what I am trying to achieve as every suggested solution doesn’t actually output the URL parameter(s).Any suggestions? Feedback?Thank you
2023-10-20T15:53:38Z
what’s your Gradio version?
2023-10-20T15:54:49Z
My gradio version is 3.45.2
2023-10-20T16:03:03Z
sorry but code snippet above works for mehttps://huggingface.co/spaces/radames/gradio-url-params-request?test=hello
2023-10-20T16:05:44Z
@radamesI think there is a miscommunication/misunderstanding here. I want to use the URL parameters in my code as global variablesnotin a gradio UI component. This code displays theparamsbut are not returned in the python code so I can use in another function (i.e. to access a database).Did that make sense?
2023-10-20T16:46:31Z
@radamesOh hey BTW I am also in Berkeley
2023-10-20T16:50:27Z
Sorry, yes, I’m not sure if I understand your need. With Gradio, you need the app context, i.e.with gr.Blocks() as blockorgr.Interfaceto be able to read URL parameters fromgr.Request. You also needgr.Statesince every user session is different; every URL parameter will be different for each user request, so a global state here won’t work.
2023-10-20T17:04:34Z
@radamessorry the sentences were a bit confusing to understand but correct me if I am wrong but what you are saying is that  I need to use gradiocontextto request the URL parameters? Is there acomponentthat returns theparamsso I can use in my python code?Thank you
2023-10-20T17:17:10Z
yes, that’s correct, under the hood Gradio use Fast APIQuery Parameters - FastAPI
2023-10-20T17:32:17Z
Thank you@radamesDo you know of another solution using Python I can use to query the parameters when the embedded iFrame loads?I appreciate you rubber ducking this with me
2023-11-03T14:05:24Z
@radamesThanks for the help!I see you’re working demo on Hugging Face, but that exact code locally (Gradio==4.0.2) just shows these hash and function variables.Screenshot 2023-11-03 at 9.55.25 AM1064×754 22.9 KBEver seen anything like this?
2023-11-03T17:10:38Z
hi@derek-pyne, thanks for reporting, I think it’s bug on the newer versionGradio==4.0.2the workaround for now is to disable the queueapp.py · radames/gradio-url-params-request at mainI created an issuehere
2023-11-03T17:30:11Z
Ahhhhhh, got it. Disabling the queue works. Thanks for the fast reply!
2023-11-08T18:00:23Z
Thanks@radamesfor the solution and@derek-pynefor reporting. Hopefully an updated version doesn’t re-trigger this issue again.