多页面应用

你的 Gradio 应用可以使用 Blocks.route() 方法支持多页面。以下是一个多页面 Gradio 应用的大致样子

with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    ...
with demo.route("Test", "/test"):
    num = gr.Number()
    ...

demo.launch()

这允许你定义指向不同页面的链接，每个页面都有一个单独的 URL，这些链接在 Gradio 应用的顶部自动生成的导航栏中链接在一起。

这是一个完整的示例

import gradio as gr
import random
import time

with gr.Blocks() as demo:
    name = gr.Textbox(label="Name")
    output = gr.Textbox(label="Output Box")
    greet_btn = gr.Button("Greet")
    @gr.on([greet_btn.click, name.submit], inputs=name, outputs=output)
    def greet(name):
        return "Hello " + name + "!"
    
    @gr.render(inputs=name, triggers=[output.change])
    def spell_out(name):
        with gr.Row():
            for letter in name:
                gr.Textbox(letter)

with demo.route("Up") as incrementer_demo:
    num = gr.Number()
    incrementer_demo.load(lambda: time.sleep(1) or random.randint(10, 40), None, num)

    with gr.Row():
        inc_btn = gr.Button("Increase")
        dec_btn = gr.Button("Decrease")
    inc_btn.click(fn=lambda x: x + 1, inputs=num, outputs=num, api_name="increment")
    dec_btn.click(fn=lambda x: x - 1, inputs=num, outputs=num, api_name="decrement")
    for i in range(100):
        gr.Textbox()

def wait(x):
    time.sleep(2)
    return x

identity_iface = gr.Interface(wait, "image", "image")

with demo.route("Interface") as incrementer_demo:
    identity_iface.render()
    gr.Interface(lambda x, y: x * y, ["number", "number"], "number")

demo.launch()

所有这些页面将共享相同的后端，包括相同的队列。

注意：多页面应用不支持页面之间的交互，例如，一个页面上的事件监听器不能输出到另一个页面上的组件。对于这种类型的功能，请使用 gr.Tabs() 而不是页面。

分离文件

为了可维护性，你可能希望在不同的文件中编写不同页面的代码。由于任何 Gradio Blocks 都可以使用 .render() 方法导入并在另一个 Blocks 内部渲染，你可以按如下方式操作。

创建一个主文件，例如 app.py，并为每个页面创建单独的 Python 文件

- app.py
- main_page.py
- second_page.py

每个页面对应的 Python 文件应包含一个常规的 Gradio Blocks、Interface 或 ChatInterface 应用，例如：

main_page.py

import gradio as gr

with gr.Blocks() as demo:
    gr.Image()

if __name__ == "__main__":
    demo.launch()

second_page.py

import gradio as gr

with gr.Blocks() as demo:
    t = gr.Textbox()
    demo.load(lambda : "Loaded", None, t)

if __name__ == "__main__":
    demo.launch()

在你的主 app.py 文件中，只需从页面文件导入 Gradio 演示并 .render() 它们

app.py

import gradio as gr

import main_page, second_page

with gr.Blocks() as demo:
    main_page.demo.render()
with demo.route("Second Page"):
    second_page.demo.render()

if __name__ == "__main__":
    demo.launch()

这允许你将每个页面作为独立的 Gradio 应用运行以进行测试，同时还创建一个名为 app.py 的单个文件，作为完整多页面应用的入口点。