如何在挂载于FastAPI的Gradio应用中实现保存成功弹窗？

你可以通过以下两种方式实现需求：

方法一：使用Gradio内置通知弹窗（推荐） #

直接在按钮点击的success回调中调用Gradio的JS通知API，无需额外组件：

import gradio as gr
from fastapi import FastAPI
from starlette.responses import RedirectResponse
from starlette.requests import Request

app = FastAPI()

def submit(message):
    print(f"Saving message: {message}")

@app.get('/')
async def homepage(request: Request):
    return RedirectResponse(url='/home')

with gr.Blocks(title="TEST") as demo:
    gr.Markdown("TEST APP NAME")
    with gr.Row():
        with gr.Column():
            message = gr.components.Textbox(label="Message", interactive=True)
    btn3 = gr.Button("Save")
    btn3.click(
        submit,
        inputs=[message],
        outputs=None
    ).success(
        None, 
        _js="() => {gr.showNotification('Submit Successful', 'success'); window.location.reload();}"
    )

gradio_app = gr.mount_gradio_app(app, demo, "/home")

改动说明： #

• 把原有的_js="window.location.reload()"替换为调用gr.showNotification的JS代码，第一个参数是提示文本，第二个参数指定弹窗类型（可选success/info/warning/error）
• 弹窗后保留了页面刷新逻辑，若不需要刷新可直接移除window.location.reload()部分

方法二：使用Gradio的Alert组件显示弹窗 #

通过新增Alert组件，在提交成功后触发显示提示：

import gradio as gr
from fastapi import FastAPI
from starlette.responses import RedirectResponse
from starlette.requests import Request

app = FastAPI()

def submit(message):
    print(f"Saving message: {message}")
    return "Submit Successful"

@app.get('/')
async def homepage(request: Request):
    return RedirectResponse(url='/home')

with gr.Blocks(title="TEST") as demo:
    gr.Markdown("TEST APP NAME")
    with gr.Row():
        with gr.Column():
            message = gr.components.Textbox(label="Message", interactive=True)
            # 添加Alert组件，初始设为不可见
            success_alert = gr.Alert(visible=False)
    btn3 = gr.Button("Save")
    btn3.click(
        submit,
        inputs=[message],
        outputs=[success_alert]
    ).success(None, _js="window.location.reload()")

gradio_app = gr.mount_gradio_app(app, demo, "/home")

改动说明： #

• 新增gr.Alert组件，默认隐藏
• 修改submit函数返回成功提示文本
• 将click回调的输出指向Alert组件，提交成功后自动显示弹窗
• 同样保留了页面刷新逻辑，可根据需求移除

内容的提问来源于stack exchange，提问作者Shubhank Gupta