用 Gradio 快速搭建完整的 AI 交互界面

用 Gradio 快速搭建完整的 AI 交互界面

【免费下载链接】llm-cookbook面向开发者的 LLM 入门教程，吴恩达大模型系列课程中文版项目地址: https://gitcode.com/GitHub_Trending/ll/llm-cookbook

Gradio 只需几行代码就能给一个 Python 函数套上完整的网页界面，不用碰前端代码。本文面向会一点 Python 但没有前端经验的读者，从环境准备到真实案例，走完整套 Gradio 教程。

适用场景

• 📊 工作中的演示：模型训练好了，想让同事直接点开点效果，不用等前端排期
• 📄 课程或面试展示：把一段 AI 能力包装成可打开的页面，三分钟内讲清楚
• 🤖 日常工具：把模型 API 包进小界面，别人不用读文档也能用

环境准备与启动

四行命令完成环境准备：前两条克隆教程仓库并进入目录，第三条安装 Gradio 库，最后一条起一个最基础的界面验证。

git clone https://gitcode.com/GitHub_Trending/ll/llm-cookbook cd llm-cookbook pip install gradio python -c "import gradio as gr; gr.Interface(fn=lambda n: 'Hello ' + n, inputs=gr.Textbox(), outputs=gr.Textbox()).launch()"

仓库是吴恩达 LLM 系列课程的中文讲义，本文所有案例都在 content/选修-Building Generative AI Applications with Gradio 目录下。最后一条命令跑完后，终端会打印一个本地地址，浏览器打开即可确认 Gradio 可用。

最小可用界面

上一段的内联命令压成了一行，展开成可读的代码是这样的：

import gradio as gr def greet(name): return f"欢迎 {name}，这个界面由 Gradio 生成。" gr.Interface(fn=greet, inputs=gr.Textbox(label="姓名"), outputs=gr.Textbox(label="返回消息")).launch()

逐段看：greet是唯一的处理函数，接收用户输入的姓名并返回字符串；fn把这个函数挂进界面；inputs和outputs各声明一个gr.Textbox文本框，Gradio 按声明生成输入输出区，不需要任何样式；launch()启动内置服务器并打印访问地址。整段代码没有写一行前端代码，一个完整的 Web 界面就出来了，AI 交互界面搭建到这一步已经可用。

用仓库案例练手

仓库的 Gradio 章节里有五个例子，挑三个最容易跑起来的。

图片总结应用。这个案例让模型描述一张上传图片的内容：输入是一张本地图片，输出是一段描述文字。文件位置：2. 图片总结应用 Image captioning app.ipynb

用一个简单的界面完成 NLP 任务。这个案例把文本分类、情感分析包进同一页：输入一段文字，输出分析结果。文件位置：3. 用一个简单的界面完成NLP任务 NLP tasks with a simple interface.ipynb

与任意 LLM 交流。这个案例搭一个通用的 Gradio 聊天机器人，顶部有下拉框切换底层大模型，输入是你打的问题，输出是模型回复。文件位置：6. 与任意LLM交流 Chat_with_any_LLM.ipynb

下面两张截图来自同一个聊天界面、不同的系统提示词：


用同一个 Gradio 聊天界面做出的数学问答，仅系统提示词改为数学导师


系统提示词换成法律顾问后，同一界面变成法律咨询窗口

布局与会话状态技巧

组件一多，以下三个机制最直接影响使用体验：

• gr.Tabs：把不同功能放进独立页签，避免所有功能挤在一长页里
• gr.Row/gr.Column：控制组件的横向与纵向排布，例如图片输入和结果并排放置
• gr.State：存放多轮对话历史，让模型回答当前问题时能接上前文

新手容易踩的坑

• 地址只能在本地打开：launch 后同网络的人访问不了 127.0.0.1——给launch()加share=True，Gradio 会生成一个公网链接供他人打开
• 多轮对话忘掉上一句：第二个问题接不上第一个，因为函数本身没有记忆——把对话历史存进gr.State，作为参数传入函数并返回更新后的历史
• API key 直接写在代码里：密钥会随仓库或截图外泄——把 key 放进环境变量，代码里从os.environ读取

把上面三个案例跑完后，同目录下还有两个 notebook 值得接着做：4. 图像生成应用程序 Image Generation APP.ipynb 完成文本生成图片的完整链路，5. 描述与生成游戏 Descirbe and Generate Game.ipynb 把文本理解与图片生成组合成一个小游戏，适合参考多组件界面如何组装。

【免费下载链接】llm-cookbook面向开发者的 LLM 入门教程，吴恩达大模型系列课程中文版项目地址: https://gitcode.com/GitHub_Trending/ll/llm-cookbook