Gradio App Initialization hook/event

🔒 Gradio
1

Is there a method to trigger an event immediately after the app component loads but before it becomes visible? This would serve as an ideal location for executing certain initialization tasks. For instance, if I wish to initiate my app in “dark” mode, this would be the opportune moment to apply JavaScript code that adds the “dark” class to the body element. This ensures that the app is displayed in dark mode from the outset.

Currently, I have a “Dark Mode” checkbox that activates the JavaScript code when a user checks it, thereby switching the app to dark mode. However, my goal is to have this process occur automatically upon app startup.

App URL

Is there anyway to do it?

2

hi @sssingh ,

Yes there is a .load event that works like any other event listeners on Gradio, and you could attach js code on it

import gradio as gr
import datetime

on_load="""
async()=>{
    console.log("HELLO");
}
"""
with gr.Blocks() as demo:
    def get_time():
        return datetime.datetime.now().time()
    dt = gr.Textbox(label="Current time")
    demo.load(get_time, inputs=None, outputs=dt, _js=on_load)
demo.launch()

blocks#blocks-load

2 Likes
3

Thank you, @radames! It successfully resolved my issue.

However, I observed something a bit unusual, unrelated to my problem though…
Now when the app loads up darkmode is enabled, to indicate this I set the checkbox’s ‘value’ property to True so that it would initially appear checked, and it did.
However, I noticed that the checkbox became non-interactive; I couldn’t uncheck it anymore.
To make it functional, I had to set ‘interactive’ to True (along with ‘value’ set as True), now I can uncheck it.
Interestingly, when the checkbox’s ‘value’ is False, it remains interactive by default, without the need to set ‘interactive’ to True.
Is this behavior expected? It seems somewhat counterintuitive, and I couldn’t find any documentation related to this issue.

Thx.

4

Interesting, afaik, when you create a component without attaching it as an input component on any event listener, it won’t be interactive unless you set interactive=True.
If you think it’s a bug, could you please make a minimum reproducible code snippet and submit an issue? GitHub - gradio-app/gradio: Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work! Thanks!

5

yup seems behavior is not consistent, will raise an issue.

none of the checkboxes are attached to any i/p, o/p or event listener.
chkbox1 and chkbox2 remains “interactive” but chkbox3 becomes non-interactive (where value is passed as True)

import gradio as gr


def greet(name):
    return "Hello " + name + ", how r u today?"


if __name__ == "__main__":
    with gr.Blocks() as demo:
        # value and interactive properties not provided ==> Checkbox is interactive in app
        chkbox1 = gr.Checkbox(
            label="Checkbox-1 - value and 'interactive' properties not provided:",
        )
        # value = False and interactive properties not provided ==> Checkbox is interactive in app
        chkbox2 = gr.Checkbox(
            label="Checkbox-3 - 'value' = False and 'interactive' property not provided:",
            value=False,
        )
        # value provided as True and interactive property not provided ==> Checkbox is non-interactive in app
        chkbox3 = gr.Checkbox(
            label="Checkbox-2 - 'value' = True and 'interactive' property not provided:",
            value=True,
        )

        input_text = gr.Textbox(label="Enter you name:")
        output_text = gr.Textbox(label="Greetings")
        button = gr.Button(value="Greet")
        button.click(fn=greet, inputs=[input_text], outputs=[output_text])

    demo.launch()
1 Like