• 使用 Gradio 在 huggingface 创建应用 Space

    前言

    之前内部用 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()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    运行上述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()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36

    运行上述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 提供了一个内网穿透的代理，并没有把代码+环境上传到他们服务器
)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37

    效果如下：
    在这里插入图片描述
    登陆并点击底部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()

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96

    效果如下：
    在这里插入图片描述

    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

  • 相关阅读:
    做好供应商关系管理，让企业采购交易更简单
    CSS_背景属性
    Android 交叉编译openssl 、libxml2静态库
    强化记忆的七种武器
    如何记录分析你的炼丹流程—可视化神器Wandb使用笔记【1】
    性能指标都不了解，如何做性能测试？
    java的实体类注解校验
    Maven插件之 maven-dependency-plugin 分析依赖复制文件
    Java记录1：Sublime Text写HelloWrold的常见报错
    如果一定要在C++和JAVA中选择，是C++还是java？
  • 原文地址：https://blog.csdn.net/muyao987/article/details/126144610