——小菜“大胖老师上回我用 Gradio 给王大姐做了个图片翻转小工具她高兴坏了。但那个工具太简单了就是纯 Python 函数套了个壳。咱们文渊慧典不是集成了 AI 模型吗Gradio 能不能也接上 AI 模型做个真正‘有脑子’的应用”——二黑推了推眼镜从抽屉里掏出一张写满 Gradio 组件名称的纸“早就等着你问这句话了。Gradio 最初就是为 AI 模型演示而生的。你上回学的gr.Interface三要素今天可以升级了——我们把 Hugging Face 的预训练模型接进去让你体会一下什么叫‘一行代码加载 AI三行代码做成产品’。”——大胖老师端起保温杯吹了吹热气“今天咱们搞两个实战项目。第一个图像分类器——王大姐传一张古籍扫描件的局部图AI 自动告诉她这是‘文字区’还是‘插图区’还是‘印章区’。第二个翻译助手——把王大姐整理的文言文提要翻译成英文方便海外读者检索。学完这两个你就明白文渊慧典的 Web 界面是怎么把深度学习模型包装成王大姐能看懂的东西了。”一、环境准备比泡面快但这次要加点“料”大胖老师在白板上写下一行命令“上回你只装了gradio这次需要多装一个transformers这是 Hugging Face 的模型库。我们用它来加载 AI 模型。”pip install gradio transformers torch pillow小菜在终端里敲完屏幕上闪过一串进度条。二黑探头看了一眼“transformers库里面集成了成百上千个预训练模型从图像分类到文本翻译从语音识别到文档问答全都有。今天我们只用两个图像分类的 ViT 模型和翻译的 OPUS 模型。你不用懂模型内部结构只要会调用pipeline就行——一行代码加载一行代码推理。”大胖老师补充“记住pipeline是transformers里的最高层 API。它像一个‘模型微波炉’——你把任务名称和模型名字告诉它它自动帮你下载模型、配置预处理、执行推理、解析结果。你不需要自己写图像缩放、归一化、softmax 计算全被封装好了。这就是为什么我们今天能把 AI 应用写得这么短。”二、项目一智能图像分类器——给王大姐的古籍扫描件“辨辨身份”2.1 小菜的疑惑为什么古籍也要图像分类小菜举手“大胖老师咱们文渊慧典不是有版面分析吗为什么还要单独做一个图像分类器”大胖老师从抽屉里拿出一张复杂的古籍扫描件——上面有正文、有夹注、有插图、有印章还有墨渍和虫蛀。“版面分析是整页的结构化理解但有些场景下王大姐只需要快速判断一张局部图是什么。比如她拍了一张书页角落的模糊图片想确认那是印章还是污渍或者她想知道某块区域是不是插图以便决定要不要单独扫描。这时一个快速、轻量的图像分类器就比整套流水线更方便。Gradio 搭一个分类器几分钟搞定王大姐在手机上就能用。”2.2 加载模型一行代码召唤“AI 大脑”二黑打开编辑器开始敲第一段代码“图像分类我们用 Vision Transformer简称 ViT。它在 ImageNet 上训练过能认 1000 种常见物体——猫、狗、汽车、飞机……也包括书籍、文字、印章这类。我们用pipeline加载。”from transformers import pipeline ​ # 加载图像分类 pipeline classifier pipeline(image-classification, modelgoogle/vit-base-patch16-224) print(✅ 模型加载完成)小菜问“google/vit-base-patch16-224这串名字是什么意思”二黑解释“这是 Hugging Face 上的模型标识。google是发布者vit是 Vision Transformer 的缩写base是规模不是最大也不是最小patch16意思是把图片切成 16x16 的小块来理解224是输入图片的尺寸。你不需要记只要知道这个模型在速度和精度之间取得了很好的平衡适合我们这种不需要 GPU 的场景。”大胖老师补充“首次运行时会自动下载模型文件大概几百 MB之后就是离线推理完全符合我们‘数据不出馆’的原则。”2.3 定义分类函数从图片到结果“模型加载好了现在写分类函数。”二黑继续敲代码“函数接收一张 PIL 图片返回分类结果。pipeline返回的是一个列表我们把它转成 Gradio 的gr.Label组件需要的字典格式——标签名映射到置信度。”def classify_image(image, top_k5): if image is None: return {错误: 1.0} results classifier(image, top_ktop_k) # 转换为 {标签: 置信度} 字典 return {item[label]: item[score] for item in results}小菜注意到top_k5“这是不是跟咱们 OCR 里返回 top-5 候选字一样”大胖老师点头“对。top_k控制返回前几个最可能的类别5 个足够了。如果王大姐想知道一张图是不是‘文字’她会看 top-1 的结果是不是包含 ‘book’、‘document’、‘text’ 这类词。不过 ViT 原生类别里没有专门的‘古籍文字’但我们可以后面微调。现在先用通用模型演示。”2.4 搭建 Interface三要素一步到位“接下来就是 Gradio 的Interface。”二黑把屏幕转向小菜“你上回已经熟悉了三要素——fn、inputs、outputs。这次输入是图片输出是标签。”import gradio as gr ​ demo gr.Interface( fnclassify_image, inputsgr.Image(typepil, label上传古籍局部图), outputsgr.Label(label分类结果, num_top_classes5), title 古籍图像分类器, description上传古籍扫描件的局部图片AI 判断它可能是哪类物体。, examples[ [example_text.jpg], [example_seal.jpg], [example_illustration.jpg] ] ) ​ demo.launch(shareTrue)“examples我们准备了三种典型的古籍局部图文字区、印章区、插图区。王大姐点击示例就能看到效果。”大胖老师补充“shareTrue会生成一个公网链接你可以马上发给王大姐试用有效期 72 小时。”小菜立刻运行浏览器里出现了熟悉的 Gradio 界面。他上传了一张印章图片输出显示“seal”置信度 89%其次是“book_jacket” 6%。王大姐在群里回复“这个好我以后拍印章不用再找二黑鉴定了。”小菜成就感爆棚。2.5 图像分类器的核心要点大胖老师总结“这个项目让你掌握了 Gradio 怎么集成 AI 模型。关键点pipeline加载模型gr.Image(typepil)接收图片gr.Label显示分类结果。整个应用不到 30 行代码。这就是 Gradio 的威力。”三、项目二多语言翻译助手——让王大姐的古籍提要被世界看懂3.1 场景需求为什么王大姐需要翻译第二天王大姐在微信群里提了个新需求“胖老师咱们图书馆有个国际交流项目要把馆藏古籍的提要翻译成英文。我英文不好能不能做个翻译工具输入中文提要选英语就出英文”大胖老师一笑“这个用 Gradio 搭一个翻译助手正合适。我们教小菜用Blocks来做还能加上按钮和状态显示。”二黑翻出 Hugging Face 的模型列表“翻译模型我们用 Helsinki-NLP 的 OPUS 系列专门做多语言翻译。比如 ‘opus-mt-zh-en’ 就是中文到英文。我们用pipeline加载跟图像分类类似。”3.2 加载翻译模型from transformers import pipeline ​ # 尝试加载真实翻译模型需要联网下载 try: translator pipeline(translation, modelHelsinki-NLP/opus-mt-zh-en) print(✅ 翻译模型加载完成) except: translator None print(⚠️ 模型下载失败将使用模拟翻译)小菜问“为什么用try-except”大胖老师解释“因为翻译模型有好几百 MB王大姐的电脑可能网速慢或者空间不够。我们先尝试加载真实模型如果失败就降级为模拟翻译——至少界面和逻辑能跑通不影响学习。这种‘优雅降级’的思路也是工程中常用的。”3.3 翻译函数真实与模拟的双轨“翻译函数要处理中文到多语言。我们支持英语、法语、德语、日语等。”二黑写了两个版本。LANGUAGE_MAP { 英语: en, 法语: fr, 德语: de, 日语: ja, } ​ def translate_text(text, target_lang): if not text.strip(): return ⚠️ 请输入文本 lang_code LANGUAGE_MAP.get(target_lang, en) if translator: # 真实翻译 result translator(text, target_languagelang_code) return result[0][translation_text] else: # 模拟翻译演示用 return f[{target_lang}翻译] {text}大胖老师点头“真实模型返回的是高质量翻译模拟函数只是在前面加了标签。等网络条件好了把try-except去掉就行。”3.4 用 Blocks 搭建更复杂的界面“图像分类器我们用Interface翻译助手我们要升级一下用Blocks来自定义布局。”二黑打开一个新的脚本“Blocks可以让你自由排列组件比如左边输入、右边输出下面加按钮。我们用gr.Row和gr.Column来控制。”with gr.Blocks(title翻译助手) as demo: gr.Markdown(# 古籍提要翻译助手) with gr.Row(): with gr.Column(): input_text gr.Textbox(label输入中文提要, lines6, placeholder请粘贴古籍提要...) target_lang gr.Dropdown(choiceslist(LANGUAGE_MAP.keys()), label目标语言, value英语) translate_btn gr.Button(翻译, variantprimary) clear_btn gr.Button(清空) with gr.Column(): output_text gr.Textbox(label翻译结果, lines6, interactiveFalse) status gr.Textbox(label状态, value就绪, interactiveFalse)“然后我们绑定事件——点击翻译按钮、按 Enter 键、甚至切换语言时都可以触发翻译。”def translate_wrapper(text, lang): if not text.strip(): return , ⚠️ 请输入文本 result translate_text(text, lang) return result, ✅ 翻译完成 translate_btn.click(fntranslate_wrapper, inputs[input_text, target_lang], outputs[output_text, status]) input_text.submit(fntranslate_wrapper, inputs[input_text, target_lang], outputs[output_text, status]) target_lang.change(fntranslate_wrapper, inputs[input_text, target_lang], outputs[output_text, status]) clear_btn.click(fnlambda: (, , ️ 已清空), inputs[], outputs[input_text, output_text, status])小菜边看边感叹“Blocks比Interface灵活多了我可以任意加按钮、状态栏还能同时更新多个输出组件。”大胖老师说“对我们文渊慧典现在的界面就是用Blocks搭的——拖拽上传区、进度条、预览区、下载按钮、日志窗口全是Blocks的组件和事件绑定。你今天学的这个翻译助手的结构放大就是文渊慧典的界面。”3.5 运行与分享小菜运行python translator.py公网链接生成。他把链接发给王大姐王大姐试着输入一段古籍提要“《康熙字典》四十二卷清张玉书等奉敕编收字四万七千余。”选择英语点击翻译输出 “Kangxi Dictionary, 42 volumes, compiled by Zhang Yushu et al. under imperial order, containing over 47,000 characters.” 王大姐连发三个大拇指。3.6 翻译助手的核心要点大胖老师总结“这个项目让你掌握了Blocks自定义布局、多组件绑定、事件驱动。核心是gr.Row/gr.Column布局gr.Button点击事件gr.Textbox的submit事件以及gr.Dropdown的change事件。这些组件的组合能搭出任何你想要的交互逻辑。”四、双项目对比Interface vs Blocks大胖老师在小黑板上画了一张表维度图像分类器翻译助手Gradio APIInterfaceBlocks输入组件ImageTextbox Dropdown输出组件LabelTextbox Textbox事件触发自动输入改变即运行手动绑定按钮点击、回车、下拉改变布局自动自定义 Row/Column复杂度⭐ 简单⭐⭐⭐ 中等适合场景单输入→单输出快速原型多输入多输出精细控制“Interface是自动挡Blocks是手动挡。你以后做项目先想清楚是否需要复杂交互——如果只是一张图进去一个标签出来Interface十行搞定如果需要状态提示、清空按钮、多个输入输出联动就用Blocks。”大胖老师端起保温杯“文渊慧典的流水线界面就是用Blocks把十几个函数串起来的。”五、进阶小技巧如何把应用分享给王大姐二黑补充了几个实用技巧局域网分享demo.launch(server_name0.0.0.0)王大姐在同一个 WiFi 下用浏览器打开http://你的IP:7860就能用。公网临时链接shareTrue生成 72 小时有效的链接适合演示。永久部署可以把代码上传到 Hugging Face Spaces免费永久在线。以后王大姐就不用每次都问你链接了。小菜试了试 Hugging Face Spaces把翻译助手部署上去获得了一个https://huggingface.co/spaces/你的用户名/translator的永久地址兴奋地说“这就像给王大姐做了一个永远在线的工具网站”六、总结小菜现在会什么大胖老师在白板上写下今天的收获✅ 使用transformers.pipeline加载 AI 模型✅ 用 Gradio 的Interface快速搭建图像分类器✅ 用Blocks搭建多组件、多事件的翻译助手✅ 掌握gr.Image、gr.Label、gr.Textbox、gr.Dropdown、gr.Button等组件✅ 理解事件绑定.click()、.submit()、.change()✅ 学会分享局域网、公网临时链接、永久部署“最重要的是”大胖老师加重语气“你知道了文渊慧典的熊猫图标背后就是这些 Gradio 组件在运转。拖拽上传是gr.File进度条是gr.Progress识别结果是gr.Textbox双层 PDF 下载是gr.File输出。我们花了三年打磨的古籍 OCR 算法最后用 Gradio 包装成了王大姐双击就能用的工具。技术就应该这样——把复杂的留给代码把简单的留给用户。”小菜看着电脑屏幕上自己刚搭好的翻译助手心想或许有一天他也能为王大姐造一个专属的“古籍数字化工具箱”。窗外王大姐正在用图像分类器辨别一张模糊的藏书印。进度条在走她的茶还没凉。