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?