Add "Confirmation Dialogue" before leaving the Gradio Playground

[apolinario]

• [x] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
If someone is deep into using the playground to prototype/play with possibilities for a gradio design, can be frustrating that a misclick closes a tab or returns to a previous page.

Describe the solution you'd like
As this handles inputs that can be edited for a bit, I'd suggest to add a Leave site? confirmation to the Playground ge

Additional context
Obviously this happened to me after spending some time in the playground playing with building the layout of an app 😅

[light-and-ray]

You can do it using this pattern:

def onIfaceLoadedJS():
    return '''(...args) => {
        window.addEventListener('beforeunload', (event) => {
            event.returnValue = 'Are you sure you want to close?';
        });
        return [...args];
    }'''
iface.load(fn=lambda: None, inputs=[], outputs=[], js=onIfaceLoadedJS())
iface.launch(...)

[apolinario]

That's cool @light-and-ray, but ideally this is a feature of the playground site itself (vs. the app being developed) imo

[delonleo]

Hi there. getting this error Error TypeError: Cannot convert undefined or null to object Would you know how to fix this.

import gradio as gr

def onIfaceLoadedJS():
    return '''() => {
        console.log('JavaScript function loaded');
        window.addEventListener('beforeunload', (event) => {
            event.returnValue = 'Are you sure you want to close?';
        });
    }'''

def hello_world():
    return 'This is a warning message.'

with gr.Blocks() as demo:
    md = gr.Markdown()
    demo.load(fn=hello_world, inputs=[], outputs=[md], js=onIfaceLoadedJS())
demo.queue().launch()

[light-and-ray]

You have forgotten ...args in js code