前言

之前内部用 swagger + flask（flasgger） 来演示模型功能，感觉 flasgger 做出来太丑了，而且配置起来麻烦，所以寻找替代方案。最终，比较中意的有两款：streamlit 和 gradio。gradio 跟 huggingface 仿佛有某种交易，两边官方文档商业互吹，所以感觉部署到 huggingface 时适配起来应该更顺滑。于是学习一下 gradio，并把要演示的几个模型使用 gradio 做成 app 的形式。

Gradio 安装与使用

安装：执行命令 pip install gradio 即可安装。
Gradio 提供了两个类来创建 app，分别是 Interface 和 Blocks。前者可快速搭建，后者可自由定制。

1. 快速入门

1.1 使用 Interface 类构建 app

新建 app.py，输入以下代码：generate_mutimodal 是负责业务处理的函数，server是 Interface 对象。

import gradio as gr

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

server = gr.Interface(
    fn=generate_mutimodal, 
    inputs=[
        gr.Textbox(lines=1, placeholder="请输入标题"),
        gr.Textbox(lines=2, placeholder="请输入正文"),
        gr.Image(shape=(200, 200),  label="请上传图片(可选)")
    ], 
    outputs="text"
)

server.launch()

运行上述py文件后，打开浏览器，长这样：

1.2 使用 Blocks 类构建 app

Blocks类不像上面 Interface类的封装程度那么高，Blocks类具有多个数据流和样式，可以控制组件在页面上出现的位置，处理复杂的数据流（例如，输出可以用作其他函数的输入），以及根据用户交互更新组件的属性或者组件可见性。代码如下：

import gradio as gr

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

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

with gr.Blocks() as demo:
    # 顶部文字
    gr.Markdown("# 多模态可控XX生成")

    # 多个tab
    with gr.Tabs():

        with gr.TabItem("新闻输入"):
            title = gr.Textbox(label="标题", lines=1, placeholder="请输入标题")
            context = gr.Textbox(label="正文", lines=2, placeholder="请输入正文")
            text_button = gr.Button("生成")
            
            text_output = gr.Textbox(label="生成内容", lines=5, placeholder="生成列表")


        with gr.TabItem("图文输入"):
            title = gr.Textbox(label="标题", lines=1, placeholder="请输入标题")
            context = gr.Textbox(label="正文", lines=2, placeholder="请输入正文")
            img = gr.Image(shape=(200, 200),  label="请上传图片")
            img_button = gr.Button("生成")

            img_output = gr.Textbox(label="生成内容", lines=5, placeholder="生成列表")


    text_button.click(fn=generate_text, inputs=[title,context], outputs=text_output)
    img_button.click(fn=generate_mutimodal, inputs=[title,context,img], outputs=img_output)

demo.launch()

运行上述py文件后，打开浏览器，长这样：

学到这里，想了一下自己即将用的场景，还有以下几个问题要解决：

• blocks 如何像 Interface 那样左右排版？答：gr.Row() 和 gr.Column()
• 如何新增单选框、float/int 值的滑轮数值选择？答：gr.Slider()
• 如何定义按钮功能、颜色（比如像 Interface 那样有 clear 和 submit）？答：style 或者 css 配置
• 如何输入tag，比如输入多个实体或者多个选项？答：暂无
• 如何用选项控制组件隐藏（比如选择一个选项，就出现可选参数列表）？答：使用 .change 方法设置组件的可见性

2. gradio 进阶学习

针对具体场景，分别探索了使用Interface和blocks的具体实现。

2.1 Interface

包含要素： Textbox、Radio、Number、Image、添加样例、css、用flagging控制是否让用户反馈结果、用户认证。
代码如下：

import gradio as gr

def generate_mutimodal(title, context, senti, num, img):
    return f"Title:{
      
      title}\nContext:{
      
      context}\nSenti:{
      
      senti}\nNum:{
      
      num}...{
      
      img}"
    
server = gr.Interface(
    fn=generate_mutimodal, 
    inputs=[
        gr.Textbox(lines=1, placeholder="请输入标题", label="标题", interactive=True),  # interactive指定该组件是否允许用户输入或者交互
        gr.Textbox(lines=2, placeholder="请输入正文", label="正文"),
        gr.Radio(["0", "1", "随机"], label="倾向"),
        gr.Number(label='条数'),
        gr.Image(shape=(200, 200),  label="请上传图片(可选)").style(height='24', rounded=True)
    ], 
    outputs="text",
    examples=[
        ["标题1", "正文1", "0", None],
        ["标题2", "正文2", "随机"],
    ],
    title="可控文本生成",
    description="标题和正文至少一个非空，图片可选是否上传",
    article="""
        ### 这里是底部的article
        #### article 1
        This is article 1
    """,
    css="body {background-color: red; font-size: large}",
    allow_flagging="never",     # 输出侧是否开启flag功能 比如让用户去标记输出结果是否正确 写到日志
    live=False,                 # live: 用户输入改变时是否自动计算结果
    cache_examples=False,       # cache_examples: 是否将example里的结果提前算好存到缓存里
)

server.launch(
    enable_queue=False,         # enable_queue: 如果app流量很大，需设置参数以防止超时。这将使用长轮询对调用进行排队，一次仅处理一个调用。长轮询还可以防止网络超时，因此，如果函数的推理时间很长（> 1 分钟），则应使用队列。
    auth=("admin", "admin"),    # auth: 参数值可以是 (user, pwd) 的元组，也可以是一个函数名（用户名和密码是参数, 并返回 True/False）。enable_queue=True 时，auth不能传元组。
    share=False                 # share: 可生成 72h 的公网访问地址，原理相当于 gradio 提供了一个内网穿透的代理，并没有把代码+环境上传到他们服务器
)

效果如下：

登陆并点击底部example后：

2.2 Blocks

代码如下：

#!/usr/bin/env python
# -*- encoding: utf-8 -*-

import gradio as gr

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="生成列表")

    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()

效果如下：

huggingface 端

创建 space 后，按步骤简单几步即可启动一个应用。

参考配置：https://huggingface.co/docs/hub/spaces-config-reference
参考文档：https://huggingface.co/docs/hub/spaces-sdks-gradio
Debian依赖：https://huggingface.co/docs/hub/spaces-dependencies
完整文档：https://huggingface.co/docs/hub/spaces