如何在Gradio中实现多页面界面搭建？

Gradio实现多页面（标签页）界面主要有两种常用方式，以下是具体代码示例和说明：

方法一：使用gr.TabbedInterface（快速实现） #

这是最简便的方式，直接将多个独立的gr.Interface实例整合为标签页布局：

import gradio as gr

# Task 1 逻辑
def task1(input_text):
    return "Task 1 Result: " + input_text

# Task 2 逻辑
def task2(input_image):
    return "Task 2 Result"

# 创建两个独立的Interface实例
task1_iface = gr.Interface(fn=task1, inputs="text", outputs="text", title="文本处理任务")
task2_iface = gr.Interface(fn=task2, inputs="image", outputs="text", title="图片处理任务")

# 整合为多标签页界面
multi_page_iface = gr.TabbedInterface(
    [task1_iface, task2_iface],
    tab_names=["任务1（文本处理）", "任务2（图片处理）"],
    title="多任务界面"
)

multi_page_iface.launch()

方法二：使用gr.Blocks（自定义灵活布局） #

如果需要更个性化的界面布局（比如添加额外按钮、自定义组件排列），推荐使用gr.Blocks手动构建标签页：

import gradio as gr

# Task 1 逻辑
def task1(input_text):
    return "Task 1 Result: " + input_text

# Task 2 逻辑
def task2(input_image):
    return "Task 2 Result"

with gr.Blocks(title="多任务界面") as demo:
    # 创建标签页容器
    with gr.Tab("任务1（文本处理）"):
        # 任务1的输入输出组件
        text_input = gr.Textbox(label="输入文本")
        text_output = gr.Textbox(label="输出结果")
        text_btn = gr.Button("执行任务1")
        text_btn.click(fn=task1, inputs=text_input, outputs=text_output)
    
    with gr.Tab("任务2（图片处理）"):
        # 任务2的输入输出组件
        img_input = gr.Image(label="上传图片")
        img_output = gr.Textbox(label="输出结果")
        img_btn = gr.Button("执行任务2")
        img_btn.click(fn=task2, inputs=img_input, outputs=img_output)

demo.launch()

说明 #

• gr.TabbedInterface适合快速搭建，无需手动管理组件布局，直接复用已有的Interface实例。
• gr.Blocks提供完全自定义的空间，你可以在每个标签页内添加任意Gradio组件，调整布局样式，满足更复杂的界面需求。

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