gradio 关于tab展示内容演示代码

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Time : 2023/3/3 9:51
# @Author : sparkle_code_guy
import gradio as gr
import pandas as pd


def generate_text(title, context, senti, entities, num, min_length, max_length, temperature, top_p, top_k):
    print(title, context, senti, entities, num, min_length, max_length, temperature, top_p, top_k)
    return f"Title:{title}\nContext:{context}\n..."


def generate_mutimodal(title, context, img):
    return f"Title:{title}\nContext:{context}\n...{img}"


def change_textbox(choice):
    # 事件侦听器函数的返回值通常是相应输出组件的更新值。
    # 有时我们也希望更新组件的配置，例如可见性。
    # 在本例中，我们返回一个对象，而不仅仅是更新组件值。
    if choice == "默认":
        return gr.update(visible=False)
    elif choice == "自定义":
        return gr.update(visible=True)


with gr.Blocks() as demo:
    # 顶部文字
    gr.Markdown("""
    # 多模态可控文本生成
    ### 1. 模态一：文本
    文本模态仅支持文本信息输入
    ### 2. 模态二：图文
    图文模态即可输入文本，又可上传图像
    """)

    # 多个tab
    with gr.Tabs():
        with gr.TabItem("文本模态"):
            # 一行 两列 左边一列是输入 右边一列是输出
            with gr.Row():
                with gr.Column():  # 左边一列是输入

                    title = gr.Text(label="标题", placeholder="请输入标题", interactive=True)
                    context = gr.Textbox(label="正文", lines=3, placeholder="请输入正文", interactive=True, value=None)
                    entities = gr.Textbox(label="实体", lines=1, placeholder="请输入实体，用英文逗号分割",
                                          interactive=True, value=None)

                    with gr.Row():
                        senti = gr.Radio(["0", "1", "随机"], label="倾向", value="随机", interactive=True)
                        num = gr.Number(label='条数', value=5, interactive=True)

                    with gr.Row():
                        min_length = gr.Slider(minimum=1, maximum=50, value=5, step=1, label="最小长度",
                                               interactive=True)
                        max_length = gr.Slider(minimum=1, maximum=100, value=64, step=1, label="最大长度",
                                               interactive=True)

                    # 通过以下几行 控制 temperature 等组件的是否显示
                    radio = gr.Radio(["默认", "自定义"], label="模型参数", value="默认")
                    with gr.Row():
                        temperature = gr.Slider(minimum=0.0, maximum=1.0, value=0.93, step=0.1, label="temperature",
                                                visible=False, interactive=True)
                        top_p = gr.Slider(minimum=0.0, maximum=1.0, value=0.98, step=0.1, label="top_p", visible=False,
                                          interactive=True)
                        top_k = gr.Slider(minimum=0, maximum=200, value=200, step=10, label="top_k", visible=False,
                                          interactive=True)

                    radio.change(fn=change_textbox, inputs=radio, outputs=temperature)
                    radio.change(fn=change_textbox, inputs=radio, outputs=top_k)
                    radio.change(fn=change_textbox, inputs=radio, outputs=top_p)

                    # 生成、重置按钮（row：行）
                    with gr.Row():
                        text_button = gr.Button("生成")
                        clear_button = gr.Button("重置")

                with gr.Column():  # 右边一列是输出
                    # 输出框
                    text_output = gr.Textbox(label="生成内容", lines=10, placeholder="生成列表")

                    # 样例框
                    gr.Examples(
                        examples=[
                            ["标题1", "正文1", "实体1"],
                            ["标题2", "正文2", "实体2"]
                        ],
                        inputs=[title, context, entities]
                    )

        with gr.TabItem("图文模态"):
            with gr.Row():
                with gr.Column():  # 左边一列是输入
                    title_tw = gr.Textbox(label="标题", lines=1, placeholder="请输入标题")
                    context_tw = gr.Textbox(label="正文", lines=2, placeholder="请输入正文")
                    img = gr.Image(shape=(200, 200), label="请上传图片")
                    img_button = gr.Button("生成")
                with gr.Column():  # 右边一列是输出
                    img_output = gr.Textbox(label="生成内容", lines=5, placeholder="生成列表")

        with gr.TabItem("plot message"):
            my_data_frame =  pd.DataFrame( {"x":[1,2,3],"y":[4,5,6]})
            output=gr.ScatterPlot(my_data_frame,x="x",y="y")

    text_button.click(fn=generate_text,
                      inputs=[title, context, senti, entities, num, min_length, max_length, temperature, top_p, top_k],
                      outputs=text_output)
    img_button.click(fn=generate_mutimodal, inputs=[title_tw, context_tw, img], outputs=img_output,
                     queue=True)  # 仅对 generate_mutimodal 加 queue 轮询

demo.launch()

 技巧一：组件联动，

component1.change(func,[arg1,arg2],[component2,component3])

def can_preview(arg1: str, arg2: list) -> Dict[str, Any]:

    return gr.update(value="", interactive=False,visible=True)

说明，根据component1组件值得变化，动态设置component2,component3相关的组件属性