# Refresh UI post change in URL parameters

**URL:** <https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654>\
**Category:** 🔒 Gradio\
**Created:** [August 29, 2023, 11:58am UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654 "2023-08-29T11:58:30Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![xerxes01](https://avatars.discourse-cdn.com/v4/letter/x/73ab20/32.png) [@xerxes01](https://discuss.huggingface.co/u/xerxes01)\
**Post date:** [August 29, 2023, 11:58am UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/1 "2023-08-29T11:58:30Z")

</div>

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:

```auto
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?

---

<div class="post-metadata">

**Author:** ![blackmarkt](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/blackmarkt/32/20357_2.png) [@blackmarkt](https://discuss.huggingface.co/u/blackmarkt)\
**Post date:** [October 14, 2023, 7:43pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/2 "2023-10-14T19:43:26Z")

</div>

Hi, this example doesn’t work. Not sure why it worked before…

The `extracted_url_params ` is 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 the [codebase](https://github.com/gradio-app/gradio/blob/f0e76a082ebe0930952231c22c56b019882dbef9/gradio/blocks.py#L1748C13-L1748C16) and it appears that the output is the `Dependency`. 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!

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [October 20, 2023, 3:46am UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/3 "2023-10-20T03:46:19Z")

</div>

Since few weeks ago you can get the url param from `gr.Request`, here is an example

```python
import 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()

```

more [here](https://www.gradio.app/guides/sharing-your-app#accessing-the-network-request-directly)

---

<div class="post-metadata">

**Author:** ![blackmarkt](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/blackmarkt/32/20357_2.png) [@blackmarkt](https://discuss.huggingface.co/u/blackmarkt)\
**Post date:** [October 20, 2023, 3:59am UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/4 "2023-10-20T03:59:49Z")

</div>

Thank you for responding @radames but 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?

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [October 20, 2023, 4:22am UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/5 "2023-10-20T04:22:11Z")

</div>

hi @blackmarkt,

You can have it on a `gr.State` and load it on load

```auto
import 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)

```

---

<div class="post-metadata">

**Author:** ![blackmarkt](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/blackmarkt/32/20357_2.png) [@blackmarkt](https://discuss.huggingface.co/u/blackmarkt)\
**Post date:** [October 20, 2023, 1:36pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/6 "2023-10-20T13:36:27Z")

</div>

@radames Hmmm this didn’t work either. When I print out the `url_params` it shows `state` and is of type `<class 'gradio.components.state.State'>` which is consistent with the [codebase](https://github.com/gradio-app/gradio/blob/6119d29a6a2323c6247497d3efc685ae778ee1fe/gradio/components/state.py#L17). Also the `btn.click(echo, inputs=[url_params], outputs=[text_out])` doesn’t output the `params` so 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?

---

<div class="post-metadata">

**Author:** ![blackmarkt](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/blackmarkt/32/20357_2.png) [@blackmarkt](https://discuss.huggingface.co/u/blackmarkt)\
**Post date:** [October 20, 2023, 1:53pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/7 "2023-10-20T13:53:36Z")

</div>

Thanks @radames but this again didn’t work for me. I can see the printed `params` but can’t access them. When I print the `url_params` I get `state` and type `<class 'gradio.components.state.State'>`.

I can see the URL parameters outputted in the `gr.JSON` but 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

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [October 20, 2023, 3:53pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/8 "2023-10-20T15:53:38Z")

</div>

what’s your Gradio version?

---

<div class="post-metadata">

**Author:** ![blackmarkt](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/blackmarkt/32/20357_2.png) [@blackmarkt](https://discuss.huggingface.co/u/blackmarkt)\
**Post date:** [October 20, 2023, 3:54pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/9 "2023-10-20T15:54:49Z")

</div>

My gradio version is 3.45.2

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [October 20, 2023, 4:03pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/10 "2023-10-20T16:03:03Z")

</div>

sorry but code snippet above works for me

[https://huggingface.co/spaces/radames/gradio-url-params-request?test=hello](https://huggingface.co/spaces/radames/gradio-url-params-request?test=hello)

---

<div class="post-metadata">

**Author:** ![blackmarkt](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/blackmarkt/32/20357_2.png) [@blackmarkt](https://discuss.huggingface.co/u/blackmarkt)\
**Post date:** [October 20, 2023, 4:05pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/11 "2023-10-20T16:05:44Z")

</div>

@radames I think there is a miscommunication/misunderstanding here. I want to use the URL parameters in my code as global variables _not_ in a gradio UI component. This code displays the `params` but are not returned in the python code so I can use in another function (i.e. to access a database).

Did that make sense?

---

<div class="post-metadata">

**Author:** ![blackmarkt](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/blackmarkt/32/20357_2.png) [@blackmarkt](https://discuss.huggingface.co/u/blackmarkt)\
**Post date:** [October 20, 2023, 4:46pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/12 "2023-10-20T16:46:31Z")

</div>

@radames Oh hey BTW I am also in Berkeley 🐻

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [October 20, 2023, 4:50pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/13 "2023-10-20T16:50:27Z")

</div>

Sorry, yes, I’m not sure if I understand your need. With Gradio, you need the app context, i.e. `with gr.Blocks() as block` or `gr.Interface` to be able to read URL parameters from `gr.Request`. You also need `gr.State` since every user session is different; every URL parameter will be different for each user request, so a global state here won’t work.

---

<div class="post-metadata">

**Author:** ![blackmarkt](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/blackmarkt/32/20357_2.png) [@blackmarkt](https://discuss.huggingface.co/u/blackmarkt)\
**Post date:** [October 20, 2023, 5:04pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/14 "2023-10-20T17:04:34Z")

</div>

@radames sorry 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 gradio `context` to request the URL parameters? Is there a `component` that returns the `params` so I can use in my python code?

Thank you

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [October 20, 2023, 5:17pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/15 "2023-10-20T17:17:10Z")

</div>

yes, that’s correct, under the hood Gradio use Fast API [Query Parameters - FastAPI](https://fastapi.tiangolo.com/tutorial/query-params/)

---

<div class="post-metadata">

**Author:** ![blackmarkt](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/blackmarkt/32/20357_2.png) [@blackmarkt](https://discuss.huggingface.co/u/blackmarkt)\
**Post date:** [October 20, 2023, 5:32pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/16 "2023-10-20T17:32:17Z")

</div>

Thank you @radames

Do 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

---

<div class="post-metadata">

**Author:** ![derek-pyne](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/derek-pyne/32/20884_2.png) [@derek-pyne](https://discuss.huggingface.co/u/derek-pyne)\
**Post date:** [November 3, 2023, 2:05pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/17 "2023-11-03T14:05:24Z")

</div>

@radames Thanks 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 AM](https://us1.discourse-cdn.com/hellohellohello/original/3X/e/6/e6fc1614e7bd8dc27564e21f18abe39f1b922257.png)

Ever seen anything like this?

---

<div class="post-metadata">

**Author:** ![radames](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/radames/32/28246_2.png) [@radames](https://discuss.huggingface.co/u/radames)\
**Post date:** [November 3, 2023, 5:10pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/18 "2023-11-03T17:10:38Z")

</div>

hi @derek-pyne , thanks for reporting, I think it’s bug on the newer version `Gradio==4.0.2` the workaround for now is to disable the queue [app.py · radames/gradio-url-params-request at main](https://huggingface.co/spaces/radames/gradio-url-params-request/blob/main/app.py#L20) I created an issue [here](https://github.com/gradio-app/gradio/issues/6283)

---

<div class="post-metadata">

**Author:** ![derek-pyne](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/derek-pyne/32/20884_2.png) [@derek-pyne](https://discuss.huggingface.co/u/derek-pyne)\
**Post date:** [November 3, 2023, 5:30pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/19 "2023-11-03T17:30:11Z")

</div>

Ahhhhhh, got it. Disabling the queue works. Thanks for the fast reply!

---

<div class="post-metadata">

**Author:** ![blackmarkt](https://sea2.discourse-cdn.com/hellohellohello/user_avatar/discuss.huggingface.co/blackmarkt/32/20357_2.png) [@blackmarkt](https://discuss.huggingface.co/u/blackmarkt)\
**Post date:** [November 8, 2023, 6:00pm UTC](https://discuss.huggingface.co/t/refresh-ui-post-change-in-url-parameters/52654/20 "2023-11-08T18:00:23Z")

</div>

Thanks @radames for the solution and @derek-pyne for reporting. Hopefully an updated version doesn’t re-trigger this issue again.