多页面应用

你的 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 文件作为完整多页面应用的入口点。