构建AI智能体：十、开箱即见 Gradio：大模型的“魔法画布”，让每一个想法清晰可见-阿里云开发者社区

一、简单粗暴，为什么要用Gradio

以往我们在训练一个模型后，需要写大量的前端代码（HTML, CSS, JavaScript）、搭建后端服务器、处理API请求等，才能做一个演示Demo。这个过程可能需要几天时间。现在Gradio只需几分钟，用几行 Python 代码定义好输入输出和处理函数，Gradio 会自动生成一个完整的、带UI的Web应用。让你能立即看到模型效果，快速验证想法是否可行。Gradio 将需要数天前端后端开发工作的模型演示搭建过程，缩短成了只需几分钟的Python脚本编写过程。

Gradio不是为了取代复杂的Web应用开发，而是为了填补从模型训练到用户可用的演示之间的巨大鸿沟。极大的简化了将大模型转换为交互式界面的过程，不需要深入的前端开发知识和复杂的用户界面设计技能，使用者只需几行代码就可以快速的为自己的模型创建一个美观且功能齐全的操作界面，能快速地展示模型效果，方便地收集测试反馈，简单地提供一个AI功能给非技术人员使用，高效、实用，让开发者能专注于更重要的模型本身，而不是繁琐的演示工程。

回顾前篇文章《构建AI智能体：六、体验Trae指定Qwen-Turbo模型自动生成问答系统》中我们也通过AI编辑器自动生成了大模型调用的前端界面，但如果缺乏前端基础想要配置调试还是会遇到让人焦头烂额的问题，也需要一定的基础，现在我们指定Gradio来展示Turbo模型的自动问答系统示例，具体参考文中示例详细说明。

二、Gradio基础详解

1. 核心优势

简单易用：界面简单、设计友好，几行代码即可创建功能完整的Web界面
多样化组件：支持文本、图像、音频、视频等多种输入输出格式
即时分享：一键生成可公开访问的链接
框架无关：可与TensorFlow、PyTorch、Scikit-learn等任何机器学习框架配合使用
高度可定制：提供灵活的自定义选项满足不同需求和应用场景

2. 应用场景

模型展示：开发者可以快速的为他们的模型创建一个演示界面，以便于在研讨会直接线上演示
教学应用：教师利用gradio创建交互式教程，帮助学生更好地理解学习模型的基础原理
原型测试：在模型开发早期阶段，可以使用gradio快速构建用户界面原型，以便收集用户反馈并进行更新迭代

3. 基础语法

3.1 基础示例语法详解

# 导入gradio库
import gradio as gr
# 定义一个简单的问候函数
# 这个函数接收一个参数name（名字）
# 返回一个拼接的问候字符串
def greet(name):
    return f"Hello {name}!"
# 创建一个Gradio界面实例
# Interface是Gradio的核心类，用于快速创建标准模型界面
demo = gr.Interface(
    fn=greet,  # 指定要封装的函数，这里是上面定义的greet函数
    # 定义输入组件：这里使用文本输入框
    inputs=gr.Textbox(
        label="Your name",  # 输入框的标签文本
        placeholder="Enter your name here..."  # 输入框内的提示占位符文本
    ),
    # 定义输出组件：同样使用文本输入框显示结果
    outputs=gr.Textbox(label="Greeting")  # 输出框的标签文本
    # 注意：还可以添加其他可选参数，如：
    # title="问候应用",  # 界面标题
    # description="这是一个简单的问候应用示例"  # 界面描述
)
# 启动Gradio应用
# launch()方法会启动一个本地Web服务器并在浏览器中打开界面
demo.launch()
# 可选参数示例：
# demo.launch(share=True)  # 生成一个可公开访问的临时链接
# demo.launch(server_name="0.0.0.0", server_port=7860)  # 指定服务器地址和端口

运行如下图：

3.2 核心类和方法

Interface 是Gradio最核心的类，用于创建标准模型界面。fn（处理函数）如何连接UI与模型。

gr.Interface(
    fn,            # 处理函数：接收输入并返回输出
    inputs,        # 输入组件：可以是单个组件或列表
    outputs,       # 输出组件：可以是单个组件或列表
    title,         # 界面标题
    description,   # 界面描述
    examples,      # 示例输入
    live=False,    # 是否实时更新（输入变化时自动运行）
    cache_examples=False,  # 是否缓存示例结果
    theme="default"        # 界面主题
)

launch部署选项：

启动一个Web服务器并在浏览器中打开界面。

demo.launch(
    server_name="0.0.0.0",    # 允许外部访问
    server_port=7860,         # 指定端口
    share=True,               # 创建公共链接（有效期72小时）
    auth=("username", "password"),  # 添加基本认证
    debug=True                # 调试模式
)

工作流程：

用户在前端界面（网页）输入内容（如一段文本）。
输入内容被传递到你定义的 fn 处理函数。
fn 函数调用大模型API或本地模型进行计算。
模型返回的结果再由 fn 函数返回。
Gradio将结果展示在前端界面的输出组件中。

3.3 输入输出组件

Gradio提供了丰富的输入输出组件：

3.3.1 文本组件

# 文本输入
gr.Textbox(label="输入文本", lines=3, placeholder="请输入...")
# 数字输入
gr.Number(label="数字输入", value=0)
# 滑动条
gr.Slider(minimum=0, maximum=100, value=50, label="阈值")
简单的文本示例：
import gradio as gr
def text_analysis(text):
    # 简单的文本分析
    char_count = len(text)
    word_count = len(text.split())
    return f"字符数: {char_count}, 单词数: {word_count}", text.upper()
demo = gr.Interface(
    fn=text_analysis,
    inputs=gr.Textbox(label="输入文本", lines=5),
    outputs=[
        gr.Label(label="统计结果"),
        gr.Textbox(label="大写转换")
    ],
    title="文本分析工具",
    description="输入文本，获取字符数、单词数和大写转换结果",
    examples=[
        ["Hello world!"],
        ["这是一个测试文本。"],
        ["Python programming is fun!"]
    ]
)
demo.launch()

运行结果：

3.3.2 媒体组件

import gradio as gr
from PIL import Image, ImageFilter
defprocess_image(image, filter_type, brightness):
# 图像处理函数
if image isNone:
returnNone
    img = Image.fromarray(image)
# 应用滤镜
if filter_type == "模糊":
        img = img.filter(ImageFilter.BLUR)
elif filter_type == "轮廓":
        img = img.filter(ImageFilter.CONTOUR)
elif filter_type == "细节增强":
        img = img.filter(ImageFilter.DETAIL)
# 调整亮度
from PIL import ImageEnhance
    enhancer = ImageEnhance.Brightness(img)
    img = enhancer.enhance(brightness)
return img
demo = gr.Interface(
    fn=process_image,
    inputs=[
        gr.Image(label="上传图片", type="numpy"),
        gr.Dropdown(choices=["模糊", "轮廓", "细节增强"], label="选择滤镜", value="模糊"),
        gr.Slider(0.5, 2.0, value=1.0, label="亮度调整")
    ],
    outputs=gr.Image(label="处理结果"),
    title="图像处理工具",
    examples=[
        ["image.jpg", "模糊", 1.2],
        ["image.png", "轮廓", 0.8]
    ]
)
demo.launch()

简单图片处理示例：

import gradio as gr
from PIL import Image, ImageFilter
defprocess_image(image, filter_type, brightness):
# 图像处理函数
if image isNone:
returnNone
    img = Image.fromarray(image)
# 应用滤镜
if filter_type == "模糊":
        img = img.filter(ImageFilter.BLUR)
elif filter_type == "轮廓":
        img = img.filter(ImageFilter.CONTOUR)
elif filter_type == "细节增强":
        img = img.filter(ImageFilter.DETAIL)
# 调整亮度
from PIL import ImageEnhance
    enhancer = ImageEnhance.Brightness(img)
    img = enhancer.enhance(brightness)
return img
demo = gr.Interface(
    fn=process_image,
    inputs=[
        gr.Image(label="上传图片", type="numpy"),
        gr.Dropdown(choices=["模糊", "轮廓", "细节增强"], label="选择滤镜", value="模糊"),
        gr.Slider(0.5, 2.0, value=1.0, label="亮度调整")
    ],
    outputs=gr.Image(label="处理结果"),
    title="图像处理工具",
    examples=[
        ["image.jpg", "模糊", 1.2],
        ["image.png", "轮廓", 0.8]
    ]
)
demo.launch()

运行结果：

3.3.3 选择组件

# 下拉选择
gr.Dropdown(choices=["选项1", "选项2", "选项3"], label="选择")
# 单选按钮
gr.Radio(choices=["是", "否"], label="选择")
# 复选框
gr.CheckboxGroup(choices=["A", "B", "C"], label="多选")
# 单复选框
gr.Checkbox(label="我同意")

选择组件代码示例：

# 导入gradio库
import gradio as gr
# 定义一个函数sentence_builder，该函数接受六个参数，并返回一个格式化的字符串
def sentence_builder(quantity, animal, countries, place, activity_list, morning):
    return f"""The {quantity} {animal}s from {" and ".join(countries)} went to the {place} where they {" and ".join(activity_list)} until the {"morning" if morning else "night"}"""
# 创建一个gradio应用界面，该界面会调用上面定义的sentence_builder函数
app = gr.Interface(
    # 指定要调用的函数
    fn=sentence_builder,
    # 指定函数的输入参数，每个输入参数都对应一个gradio的组件
    inputs=[
        # 一个滑动条，用户可以在2到20之间选择一个数字，初始值为4，标签为"Count"
        gr.Slider(2, 20, value=4, label="Count", info="Choose between 2 and 20"),
        # 一个下拉菜单，用户可以在"cat", "dog", "bird"中选择一个，标签为"Animal"
        gr.Dropdown(["cat", "dog", "bird"], label="Animal", info="Will add more animals later!"),
        # 一个复选框组，用户可以选择"USA", "Japan", "Pakistan"中的一个或多个，标签为"Countries"
        gr.CheckboxGroup(["USA", "Japan", "Pakistan"], label="Countries", info="Where are they from?"),
        # 一个单选按钮组，用户可以在"park", "zoo", "road"中选择一个，标签为"Location"
        gr.Radio(["park", "zoo", "road"], label="Location", info="Where did they go?"),
        # 一个下拉菜单，但允许用户选择多个选项，初始选项为"swam"和"slept"，标签为"Activity"
        gr.Dropdown(["ran", "swam", "ate", "slept"], value=["swam", "slept"], multiselect=True, label="Activity",
                    info="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed auctor, nisl eget ultricies aliquam, nunc nisl aliquet nunc, eget aliquam nisl nunc vel nisl."
                    ),
        # 一个复选框，标签为"Morning"，用来表示活动是否在早上进行
        gr.Checkbox(label="Morning", info="Did they do it in the morning?"),
    ],
    # 指定函数的输出，这里使用一个文本框来显示生成的句子
    outputs=gr.Textbox()
)
# 启动应用
app.launch()

运行结果：

3.3.4 布局组件

使用gr.Blocks()可以创建更复杂的布局：

with gr.Blocks(title="自定义布局") as demo:
    gr.Markdown("# 这是我的应用")
    with gr.Row():
        with gr.Column(scale=1):
            input1 = gr.Textbox(label="输入1")
            input2 = gr.Slider(0, 100, label="输入2")
        with gr.Column(scale=2):
            output = gr.Textbox(label="输出")
            btn = gr.Button("运行")
    btn.click(fn=process, inputs=[input1, input2], outputs=output)

三、综合范例

1. 通过deepseek-v3模型判断语义正/负向

本示例结合第一篇文章《构建AI智能体：一、初识AI大模型与API调用》中的示例，采用gradio组件开放调用，可以了解前后方式的差别；

import os
import dashscope
import gradio as gr
from dashscope.api_entities.dashscope_response import Role
# 从环境变量中，获取 DASHSCOPE_API_KEY
api_key = os.environ.get('DASHSCOPE_API_KEY')
dashscope.api_key = api_key
# 封装模型响应函数
def get_response(messages):
    response = dashscope.Generation.call(
        model='deepseek-v3',
        messages=messages,
        result_format='message'  # 将输出设置为message形式
    )
    return response
# 情感分析函数
def analyze_sentiment(review):
    if not review.strip():
        return "请输入评论内容"
    messages=[
        {"role": "system", "content": "帮我判断产品表达的意思是正向还是负向，回复请用一个词语：正向 或者 负向"},
        {"role": "user", "content": review}
    ]
    try:
        response = get_response(messages)
        result = response.output.choices[0].message.content
        return result
    except Exception as e:
        return f"分析出错: {str(e)}"
# 创建Gradio界面
with gr.Blocks(title="情感分析工具") as demo:
    gr.Markdown("# 产品评论情感分析")
    gr.Markdown("输入产品评论，系统会分析其情感倾向（正向/负向）")
    with gr.Row():
        with gr.Column(scale=1):
            review_input = gr.Textbox(
                label="评论内容",
                placeholder="请输入产品评论...",
                lines=5
            )
            analyze_button = gr.Button("分析情感")
        with gr.Column(scale=1):
            result_output = gr.Textbox(
                label="分析结果",
                interactive=False
            )
    # 设置按钮点击事件
    analyze_button.click(
        fn=analyze_sentiment,
        inputs=review_input,
        outputs=result_output
    )
    # 示例
    gr.Examples(
        examples=[
            "特别喜欢这款产品，使用起来很方便。",
            "这个产品质量太差了，很不满意。",
            "产品一般般，没有特别的亮点。"
        ],
        inputs=review_input,
        outputs=result_output,
        fn=analyze_sentiment
    )
# 运行界面
if __name__ == "__main__":
    demo.launch()

界面展示：

2. 通过qwen-turbo模型生成聊天机器人演示

import gradio as gr
import dashscope
import os
from dashscope import Generation
from dashscope.api_entities.dashscope_response import Role
# 设置您的DashScope API Key (请从https://dashscope.aliyun.com获取)
dashscope.api_key =  os.environ.get('DASHSCOPE_API_KEY')
# 定义一个处理函数，调用Qwen-Turbo模型
def call_qwen_turbo(message, history):
    """
    调用Qwen-Turbo模型生成回复
    message: 当前用户输入
    history: 对话历史，格式为列表的列表 [[用户输入1, 模型回复1], [用户输入2, 模型回复2], ...]
    """
    # 构建对话历史
    messages = []
    # 添加历史对话
    if history:
        for user_msg, assistant_msg in history:
            messages.append({"role": Role.USER, "content": user_msg})
            messages.append({"role": Role.ASSISTANT, "content": assistant_msg})
    # 添加当前用户消息
    messages.append({"role": Role.USER, "content": message})
    try:
        # 调用Qwen-Turbo模型
        response = Generation.call(
            model="qwen-turbo",
            messages=messages,
            result_format='message',  # 设置输出为message格式
            stream=False  # 非流式输出
        )
        # 提取模型回复
        if response.status_code == 200:
            return response.output.choices[0].message.content
        else:
            return f"请求失败，错误码: {response.status_code}, 错误信息: {response.message}"
    except Exception as e:
        return f"发生异常: {str(e)}"
# 创建Gradio聊天界面
demo = gr.ChatInterface(
    fn=call_qwen_turbo,
    title="通义千问聊天机器人 (Qwen-Turbo)",
    description="基于阿里云通义千问大模型的聊天机器人演示",
    examples=[
        ["你好，请介绍一下你自己"],
        ["写一首关于春天的诗"],
        ["用Python写一个快速排序算法"]
    ],
    theme="soft"
)
# 启动应用
if __name__ == "__main__":
    demo.launch(share=True)

界面展示：

注意：此示例运行时最后的提示

这是由于部署时增加了share=True的分享属性，需要获取一个插件，按提示去下载后放到指定位置即可，杀毒软件会提示木马，注意甄别，谨慎使用！

四、总结

Gradio是一个强大而灵活的工具，极大简化了机器学习模型的展示和分享过程。通过了解，我们也可以快速开始构建自己的AI应用界面。无论是简单的演示还是复杂的生产应用，都唾手可得。然而越是信手拈来的越是要警惕，在我们觉得简单、豁然开朗的同时，还是要清楚底层原理，因为真正的技术革命，不仅是革技术，同时也在广大信息工作者群体，我们不仅要让机器变得更聪明，更要在享受到智能带来的便利的同时厚积薄发。

下次有机会集成一些图片处理的模型库，做一个有趣图片专业处理示例！

构建AI智能体：十、开箱即见 Gradio：大模型的“魔法画布”，让每一个想法清晰可见

一、简单粗暴，为什么要用Gradio

二、Gradio基础详解

1. 核心优势

2. 应用场景

3. 基础语法

3.1 基础示例语法详解

3.2 核心类和方法

3.3 输入输出组件

3.3.1 文本组件

3.3.2 媒体组件

3.3.3 选择组件

3.3.4 布局组件

三、综合范例

1. 通过deepseek-v3模型判断语义正/负向

2. 通过qwen-turbo模型生成聊天机器人演示

四、总结

阿里云百炼

热门文章

最新文章

相关电子书