网站导航
> 技术文档 > Gradio全解1（上）——Gradio简介：大模型WebUI框架

Gradio全解1（上）——Gradio简介：大模型WebUI框架

网友: 技术文档 2025-07-30 11:24:09

Gradio全解1（上）——Gradio简介：大模型WebUI简易框架

  • 前言
  • 第1章 Gradio简介：大模型WebUI框架
    • 1.1 Gradio介绍
      • 1.1.1 Gradio概念及技术框架
      • 1.1.2 Gradio的历史
      • 1.1.3 Gradio的特性
      • 1.1.4 Gradio的用途
    • 1.2 Gradio与NiceGui、StreamLit、Dash及PyWebIO的比较
      • 1.2.1 各个框架区别
      • 1.2.2 框架选择建议
    • 1.3 新版Gradio 5特性
      • 1.3.1 Gradio 5：面向生产环境的机器学习应用构建工具
        • 1. 改进：性能、界面及流式传输
        • 2. 新增：Gradio Playground
        • 3. 新增：Gradio Sketch
      • 1.3.2 Gradio 5其它说明
        • 1. Breaking changes——不兼容的更改
        • 2. Gradio的下一步计划
        • 3. 立即试用Gradio 5
    • 1.4 关于Gradio网站访问
      • 1.4.1 Gradio官网代码的运行方式
      • 1.4.2 访问Hugging Face Spaces上的Demos

前言

本书主要介绍WEB界面工具Gradio。Gradio是Hugging Face发布的简易WebUI开发框架，它基于FastAPI和Svelte，可以使用机器学习模型、Python函数或各类API开发多功能界面，并可部署人工智能模型，是当前非常热门且易于展示机器学习大语言模型LLM及扩散模型DM的WebUI框架。

本书分为四部分：Gradio介绍、Gradio基础功能实战、Gradio高级功能实战、Gradio与其它应用结合。分别介绍如下：
第一部分Gradio介绍，方便读者对Gradio整体把握，包括三章内容：

  • 第一章——《Gradio简介：大模型WebUI框架》，先介绍Gradio的概念，技术框架、历史、应用场景、与其他框架Gradio/NiceGui/StreamLit/Dash/PyWebIO的区别，新版Gradio 5特性，然后详细讲述Gradio的安装与运行，安装包括Linux/Windows/Mac三类系统安装，运行包括普通方式、命令行式热重载及NoteBook式热重载三种方式。
  • 第二章——《Gradio的四种部署方式》，介绍Gradio的4种部署方式，包括本地部署Launch()、Huggingface托管、FastAPI挂载和Gradio-Lite浏览器集成。本地部署Launch()包括局域网分享、互联网分享及密码保护验证。Huggingface托管和FastAPI挂载主要讲述操作步骤，而Gradio-Lite浏览器集成则包括多种构建例程、与Transformer.js结合构建无服务器Apps及如何定制化Model、Pipeline和UI。
  • 第三章——《Gradio三种客户端：Python、JavaScript与Curl》，介绍Gradio的三种客户端Client，包括Python Client、JavaScript Client和Curl Client。包含以下内容：多种客户端安装方式，通过URL或SpaceID连接Gradio应用程序，账密与HF_TOKEN验证，查看可用API的两种方式：view_api()和页面查看，使用API的两种方式：直接调用.predict()和异步调用job，Curl客户端的POST请求预测和GET获取结果的使用，还有在线Python环境Colab NoteBook和在线JavaScript环境PLAYCODE的使用演示。

第二部分实战Gradio基础功能。进入本系列文章的核心，包括四章内容：

  • 第四章——《Gradio库的模块架构和环境变量》，本章以Gradio库当前版本（5.35.0）为参考，介绍Gradio的各个模块和环境变量，不同版本的模块组件及环境变量会稍微有所不同。先详细介绍Gradio库的模块架构，依次讲解Demos构建模块、Blocks布局模块、Components组件模块、Helpers帮助模块、Modals情景模块、Routers路由模块和其它模块；然后通过列表的方式介绍构成模块的各个类，将粗略讲解类的作用概述、API参数和成员函数等；最后探究下各个环境变量的设置、默认值和作用描述。
  • 第五章——《Interface：高级抽象界面类》，本章介绍Gradio的高级抽象类界面类：Interfaces，它非常简单易用，是整个Gradio的最基础最常用的类。先详细介绍Interface类的作用、各种API参数和成员函数，然后进行实践。实践分为基础类演示和高级类演示，基础类演示包括不同数量输入输出组件的演示、组件属性、描述性内容和使用Accordion折叠式的附加输入；高级类演示包括多媒体输入输出、Flag标记数据、Examples示例和States状态。
  • 第六章——《Blocks：底层区块类》，本章介绍Gradio的底层区块类Blocks，它实现了多种界面的定制化功能，但仍完全基于Python，相比Interface类，Blocks提供了更大的灵活性和可控性。先进行Blocks类详解，包括示例讲解、API参数和成员函数；然后进行实践，实践内容较多，主要包括Blocks基础特性、高级特性、控制布局、动态渲染、定制CSS和JS及将Blocks用作函数。
  • 第七章——《Additional Features：补充特性》，介绍Gradio的补充特性功能，这些功能辅助Interface/Blocks实现更绚丽效果和更多功能。主要内容包括队列、输入输出流、提示及进度条、批处理函数、嵌入托管Spaces、访问网络请求和Analytics应用分析、授权OAuth、安全访问文件和资源清理等。每部分都包含大量内容和细节，需仔细学习体会。

第三部分讲解并实战Gradio的高级功能，包括三章内容：

  • 第八章——《Chatbot：融合大模型的多模态聊天机器人》，介绍如何使用Gradio创建聊天机器人。聊天机器人是大型语言模型的一个流行应用，通过Gradio，我们可以轻松构建LLM演示并与其它用户分享，或者自己使用直观的聊天机器人界面进行开发尝试。本章主要内容包括gr.ChatInterface快速创建Chatbot、与流行LLM库及API结合、使用Blocks创建Chatbot、Chatbot的特殊Events、使用显示思考和引用Citations构建UI。
  • 第九章——《Data Science And Plots：数据科学与绘图》，首先，讲解组件的API参数，包括Plot API参数和Event Listeners API参数；然后，讲解如何利用各种组件进行常规绘图和高级绘图，包括gr.LinePlot、gr.ScatterPlot和gr.BarPlot等组件；第三，讲解时间类绘图，包括Datatime组件和Realtime数据展示；最后，讲解如何展示表格、过滤和统计数据、与数据库连接并获取和使用数据等。
  • 第十章——《Streaming：流式传输的多模态应用》，讲述当前大模型热门技术Streaming流式传输，它可以显著提升用户体验，包括音频、图像和视频格式的流式传输。音频应用包括Mistral实现流式传输音频的魔力8号球、基于Mini-Omni模型构建对话式聊天机器人、实时语音识别技术（ASR）及基于Groq的带自动语音检测功能的多模态Gradio应用。图像应用包括基于YOLO与WebRTC的摄像头实时目标检测。视频应用包括RT-DETR模型构建视频流目标检测系统。

第四部分讲解Gradio与其它应用结合，包括三章内容：

  • 第十一章——《Gradio Tools：工具库》，Gradio Tools用于将各种各样的LLM封装为GradioTool，然后通过被Agent集成调用以实现更强大的功能。首先介绍gradio_tools库，包括集成过程及预购建的工具集，然后详细讲解gradio_tools的端到端示例，包括代码及视频分步演示，最后介绍如何创建自定义Gradio Tools。
  • 第十二章——《由Gradio App创建Discord Bot/Slack Bot/Website Widget》，本章是为了拓展Gradio App的应用范围。由Gradio App创建Discord Bot，包括工作原理与前置条件、如何创建Discord App、编写Discord机器人代码、将机器人安装到服务器并操作。由Gradio App创建Slack Bot，包括运作原理及前置条件、创建Slack App、编写Slack Bot代码、将机器人添加到Slack工作区并操作。由Gradio App创建Website Widget内容有工作原理与前置条件、创建并定制聊天小部件、嵌入JavaScript代码及操作网站小部件。
  • 第十三章——《使用Gradio构建MCP服务器与客户端》，MCP在当前人工智能领域大热，它是LLM打通最后一公里的工具连接标准，本章将使用Gradio构建多种形式的MCP客户端与服务器。首先，基于MCP最新方案修订版：2025-06-18，详细讲解MCP协议细节，内容包括MCP协议介绍与架构组件、MCP能力协商与通信机制。为了方便后续实践，介绍了当前热门的Python包命令：UV和UVX。然后，构建MCP服务器与客户端，包括使用FastMCP构建服务器和使用ChatBot构建MCP客户端。第三，讲解生成MCP服务器的其他方案，包括：利用Gradio参数直接生成MCP服务器、转换现有Space项目以及自定义MCP服务器方案。最后，讲解如何配置一个文档式MCP服务器。

本书内容由浅入深、讲解细致、案例丰富、条理清晰，代码可运行并附有大量运行截图，手把手教读者上机操作。同时，本书涵盖Gradio框架相关的大部分组件和功能，并对所有组件和功能详细拆解举例，在有广度同时兼顾深度，方便读者理解并应用到实践中。本书是前端开发和大模型应用的必备书籍，Gradio也一定会成为每个技术人员实现各种奇思妙想的称手工具。

本系列文章目录如下：

  1. 《Gradio全解1——Gradio简介：大模型WebUI框架（上）》
  2. 《Gradio全解1——Gradio简介：大模型WebUI框架（下）》
  3. 《Gradio全解2——Gradio的四种部署方式（上）》
  4. 《Gradio全解2——Gradio的四种部署方式（下）》
  5. 《Gradio全解3——Gradio三种客户端：Python、JavaScript与Curl（一）——python》
  6. 《Gradio全解3——Gradio三种客户端：Python、JavaScript与Curl（二）——javascript》
  7. 《Gradio全解3——Gradio三种客户端：Python、JavaScript与Curl（三）——curl》
  8. 《Gradio全解4——Gradio库的模块架构和环境变量》
  9. 《Gradio全解5——Interface：高级抽象界面类（上）》
  10. 《Gradio全解5——Interface：高级抽象界面类（下）》
  11. 《Gradio全解6——Blocks：底层区块类（上）》
  12. 《Gradio全解6——Blocks：底层区块类（下）》
  13. 《Gradio全解7——Additional Features：补充特性（上）》
  14. 《Gradio全解7——Additional Features：补充特性（下）》
  15. 《Gradio全解8——Chatbot：融合大模型的多模态聊天机器人》
  16. 《Gradio全解9——Data Science And Plots：数据科学与绘图》
  17. 《Gradio全解10——Streaming：流式传输的多模态应用》
  18. 《Gradio全解11——Gradio Tools：工具库》
  19. 《Gradio全解12——由Gradio App创建Discord Bot/Slack Bot/Website Widget》
  20. 《Gradio全解13——使用Gradio构建MCP的客户端与服务器》

第1章 Gradio简介：大模型WebUI框架

Gradio是专为大模型界面开发Web简易框架，本章内容包括：第一节介绍Gradio概念、技术框架、历史、特性及用途；第二节讲述了Gradio与NiceGui、StreamLit、Dash及PyWebIO的比较，并给出了选择建议；第三节对新版Gradio5的特性作了详解；第四节讲述了关于Gradio的网站访问及运行问题；第五节讲述Gradio的安装，第六节讲述Gradio的运行。

1.1 Gradio介绍

本节介绍Gradio概念、技术框架、历史、特性及用途。

1.1.1 Gradio概念及技术框架

Gradio是一个Hugging Face发布的开源Python包，可以为机器学习模型、API接口或任意Python函数快速构建demo或web应用，并且通过Gradio的内置共享功能可以快速生成对应的链接，而无需任何JavaScript、CSS或网络托管经验。Gradio的设计理念是“无代码”，它的自封装组件的功能也相对比较完整，因此可以让开发者专注于编写基于Python代码的业务处理逻辑，而无需关注Web前端页面的代码实现细节，这意味着你不需要编写复杂的代码就可以创建一个交互式的界面。Gradio官网地址🖇️链接1-1，官网界面如图1-1所示：
Gradio全解1（上）——Gradio简介：大模型WebUI框架

图1-1

Gradio框架前端基于Svelte。Svelte（官网🖇️链接1-2）是一个组件框架，构建在HTML之上，是一种全新的构建用户界面的方法，就像React或Vue一样，但有一个重要的区别：传统React或Vue框架支持声明性状态驱动的代码，但缺点是浏览器必须额外将这些声明性结构转换为DOM操作，这会占用框架和垃圾收集器的运行资源。而Svelte将组件转换为高效的命令式代码以精确更新DOM，并通过构建应用程序的编译阶段来处理，这有助于编写大型且高性能的应用程序。

Gradio框架后端基于FastAPI。FastAPI是一个基于Python 3.6+的现代Web框架，专用于构建高性能Web API。FastAPI定位为轻量级框架，采用RESTful架构设计，通过URL资源映射不同操作（如GET/POST/DELETE），支持异步编程模式，能高效处理高并发请求。 ‌FastAPI技术架构基于Starlette（轻量级ASGI框架）和Pydantic（数据验证/序列化库）构建，利用Python类型提示实现自动API文档生成和数据校验功能。 ‌FastAPI核心优势是高性能和开发效率：通过异步处理提升响应速度，性能接近Node.js/Go；同时可自动生成交互式API文档（如Swagger UI），减少手动编写文档工作量；利用Python类型系统简化数据验证和接口设计，降低开发门槛。 ‌

结合两者优势的Gradio框架，更注重性能优化和现代Web开发规范，同时结合大语言模型，非常适合快速搭建人工智能领域的用户级和企业级Web应用。 ‌

1.1.2 Gradio的历史

Gradio的发展历史可以追溯到2019年，其创始人是Abubakar Abid和Ali Abdalla，他们都是斯坦福大学的研究生。他们发现，尽管机器学习模型的复杂性在不断增加，但是这些模型的可解释性和可访问性却并没有得到相应的提高。因此，他们决定创建一个工具，使得任何人都可以轻松地与机器学习模型进行交互。

自从发布以来，Gradio已经得到了广泛的应用。它被用于创建各种各样的模型界面，包括图像分类器、语音识别系统、文本生成器等等。Gradio的用户群体也非常广泛，从研究人员和数据科学家，到教师和学生，甚至包括艺术家和记者。

Gradio的发展也得到了社区的大力支持。它的GitHub仓库已经收到了数万个星标，这表明了开发者对这个项目的热情。此外，Gradio也得到了一些重要的更新，比如增加了新的界面元素model3D、audio、video以及流式传输Streaming，改进了性能、提高了兼容性和用户体验。截至发稿前，其最新版本已更新到5.35.0。Gradio的GitHub仓库地址：🖇️链接1-3，如图1-2：
Gradio全解1（上）——Gradio简介：大模型WebUI框架

图1-2

通过简介中的demo演示，我们可以先目睹下Gradio的风采。

1.1.3 Gradio的特性

Gradio的主要目标是使模型的测试和调试变得更加简单，同时也让非技术用户能够理解和使用这些模型。以下是Gradio的一些主要特性和关键技术：

  1. 易于使用：Gradio的一个主要优点是它的易用性。开发者只需要几行代码就可以为他们的模型创建一个交互式的预览界面。这个界面可以包含各种输入和输出类型，包括文本、图像、音频及视频等。
  2. 灵活性：Gradio不仅可以用于各种类型的模型，包括强化学习模型、深度学习模型、传统的机器学习模型，甚至是简单的函数或API接口，而且它也可以在各种环境中运行，包括Jupyter notebook、Python脚本、Colab notebooks等。
  3. 共享和部署：Gradio还提供了一个共享功能，开发者可以通过一个链接将他们的模型界面分享给其他人。此外，Gradio也支持模型的部署，开发者可以将他们的模型和界面部署到云端，使其可以在网页上访问。
  4. 可解释性：Gradio还提供了一些工具来帮助用户理解模型的预测。例如，它可以显示模型的预测分布，或者使用类似于LIME和SHAP（链接1-4）的技术来解释模型的预测。
  5. 多模型比较：Gradio可以同时显示多个模型的预测结果，这使得模型的比较和选择变得更加简单。

1.1.4 Gradio的用途

Gradio的主要优势在于其易用性和灵活性，主要用于快速搭建和分享机器学习模型的交互式演示界面，使得非技术用户也能轻松理解并测试模型的功能，广泛应用于模型展示、教育及协作场景。以下是Gradio的一些主要使用场景：

  1. 模型演示和测试：数据科学家和机器学习工程师经常需要向同事、管理层或潜在客户展示他们的模型。Gradio提供了一种快速创建交互式演示的方式，用户可以通过Web界面上传数据、调整参数，并实时查看模型的输出结果。这种方式有助于更好地解释模型的工作原理和性能。
  2. 模型验证和调优：在模型开发过程中，开发者需要不断验证模型的性能并进行调优。Gradio可以快速搭建一个模型验证界面，允许用户输入不同的参数或数据，实时查看模型的预测结果和性能指标。这有助于开发者快速迭代和优化模型。
  3. 数据收集和标注：在机器学习项目中，收集和标注数据是一个耗时且关键的步骤。Gradio可以用来创建一个数据标注界面，让非技术用户（如标注员）能够上传数据、进行标注，并将结果直接保存到模型的训练数据集中。这不仅提高了数据收集的效率，还有助于提高数据质量。
  4. 教育和培训：Gradio可以用于创建交互式的教育工具，帮助学生和初学者理解复杂的机器学习概念。通过可视化的界面和实时反馈，学习者可以更直观地看到模型是如何工作的，以及不同参数是如何影响模型输出的。
  5. 商业应用和产品开发：对于希望将机器学习技术商业化的公司来说，Gradio提供了一种快速将模型转化为产品原型的方式。通过Gradio创建的Web应用可以作为产品的前端，让用户直接与模型交互，从而验证市场需求和用户体验。
  6. 研究和开发：在研究环境中，Gradio可以帮助研究人员创建交互式的实验平台，以便快速测试新算法或模型。研究人员可以通过Gradio界面收集实验数据，实时观察实验结果，并据此调整研究方向。
  7. 社区和开源项目：对于开源项目，Gradio可以用来创建一个社区驱动的模型测试和改进平台。开发者可以邀请社区成员通过Web界面测试模型、提供反馈，并共同参与模型的优化过程。

Gradio的使用场景非常广泛，它降低了机器学习模型部署的门槛，使得更多的人能够参与到模型的开发、测试和应用中来。通过Gradio，开发者可以专注于模型的核心算法，而不必担心前端开发的复杂性。这种工具的普及，无疑将推动机器学习技术的快速发展和广泛应用。

1.2 Gradio与NiceGui、StreamLit、Dash及PyWebIO的比较

随着机器学习的发展，便于展示模型训练效果的可视化框架也逐渐兴盛。当前比较流行的框架包括Gradio、NiceGui、StreamLit、Dash及PyWebIO等，它们是轻量级的Python前端框架，而传统的遵循MVC设计模式的Python Web框架如Flash、Django更适合大型复杂的项目。下面对5个轻量级框架进行简单比较和说明。

1.2.1 各个框架区别

先看表1-1，表格对Gradio、NiceGui、StreamLit、Dash及PyWebIO五个框架的使用场景、MD/HTML/CSS支持、Jupyter Notebook内支持、上手难度、组件丰富度、综合扩展性、是否开源、基础框架及github starts进行了比较，从中对比可以看出Gradio简单易用、灵活便捷和发展迅速的特点：

表1-1

– Gradio NiceGui StreamLit Dash PyWebIO 主要使用场景 可交互Demo，模型及算法 小型Web Apps 、DashBoard、机器学习算法及机器人工程 生成报告、DashBoard及AI/MI Apps 机器学习、数据科学及Web Apps 可交互简单Web和基于浏览器的GUI MD/HTML/CSS支持 是 是 是 是 是 Jupyter Notebook内支持 是 是 否 是 是 上手难度 简单 简单 中等 中等 中等 组件丰富度 低 中 高 高 中 综合扩展性 低 中 中 高 中 是否完全开源 是 是 是 部分企业级功能未开源 是 基础框架 前端Svelte后端FastAPI 前端Vue和Qursar，后端FastAPI React和Tornado Plotly.js，React和Flask Python源码 GitHub Starred变化（2024/06-2025/07） 30.1k-38.9k 7.9k-12.8k 32.7k-40.3k 20.7k-23.3k 4.4k-4.7k

总结：Gradio、NiceGui、StreamLit和Dash都是创建机器学习应用的优秀工具，但它们各有优劣。如果你需要快速创建一个简单应用或原型设计，Gradio、NiceGui和StreamLit都是比较好的选择，StreamLit提供较高的自由度，默认组件库更为精细和多样化，并且支持自定义组件及异步加载，支持更多的可视化展示，例如Matplotlib、Vega Lite (2D charts) 和deck.gl (maps and 3D charts)，但因此无法支持Jupyter Notebook。Gradio相对而言更专注于深度学习模型的部署，对于模型的输入输出有一定要求，但在这个框架下，用户可以更专注于模型本身的迭代，随着大模型的流行，其GitHub Starred增长最快，有逐渐赶超StreamLit成为第一的趋势。NiceGui基于Vue，在复杂性和易用性之间取得了平衡。如果你需要创建一个复杂的应用，或者你需要更多的控制权，Dash更合适，但它使用python编写前端+后端，代码会比较冗长。对于熟悉Python的开发者，PyWebIO适合简单Web或基于浏览器的GUI，另外它并没有针对机器学习的开发功能。如果你的项目更加复杂，需要更多的功能、定制性和可扩展性，可能需要考虑使用更强大的框架，比如PyQt、Tkinter（Python自带的GUI库）、wxPython或Kivy 等。

1.2.2 框架选择建议

前端框架复杂多样，没有包治百病的灵丹妙药，同样也没有适合所有场景的框架，所以在选择具体框架之前，作者建议根据具体项目决定，通常需要考虑以下几个因素：

  1. 功能性：该框架是否具备你需要的所有功能？它是否支持你需要的所有控件和功能？
  2. 社区支持：如果你遇到问题或需要帮助，该框架的社区是否足够大和活跃，能够提供足够的支持和资源？
  3. 文档和学习资源：该框架的文档是否详尽？是否有足够的教程和学习资源？
  4. 兼容性和可移植性：该框架是否能在你需要支持的所有平台上运行？
  5. 长期维护：该框架的开发和维护是否足够活跃，能够持续提供新的功能和修复bug？

当开发具体项目时，需结合项目需求和上述因素来决定所用框架。

1.3 新版Gradio 5特性

不得不感慨，Gradio更新是真的快，彰显了Gradio强大的生命力和广阔的应用前景。在读者看到本系列文章时，Gradio一定会快速迭代到更新的版本，但不影响本系列文章所梳理的整体脉络和某些基本组件的使用方法。对于读者来说，无论您是人工智能领域大模型开发的技术人员，还是其它行业从业者，掌握这门WebUI开发框架，都可以利用掌握的数据和自研的工具（哪怕只是一个功能函数），快速开发出属于自己的网站界面，从而只需一个URL便可向客户或老板做专业演示，而无须求助于专业的前端技术人员。所以作者认为，从今往后，掌握Gradio可能是每个有志向的IT从业者和企业技术人员的必备技能，所以赶紧学起来吧。

使用Gradio 5，开发者可以构建生产级的机器学习Web应用程序，这些应用不仅性能优越、可扩展、设计精美、易于访问，而且还遵循了最佳的Web安全实践。更重要的是，只需几行Python代码即可实现。想要体验Gradio 5，只需在终端中输入以下命令：

pip install --upgrade gradio

下面让我们了解下Gradio 5稳定版的新特性。

1.3.1 Gradio 5：面向生产环境的机器学习应用构建工具

如果读者之前使用过Gradio，可能会想知道Gradio 5有什么不同。下面看看Gradio改进了哪些方面以及新增功能。

1. 改进：性能、界面及流式传输

Gradio 5的目标是听取和解决Gradio开发者在构建生产级应用时遇到的常见问题，并针对槽点进行改进，例如：

  1. “Gradio应用加载太慢” → Gradio 5带来了重大的性能改进，其中包括通过服务端渲染 (SSR) 提供Gradio应用，几乎可以在浏览器中瞬间加载应用，告别加载时的转圈圈！ 在官网对比视频gradio-4-vs-5-load中，通过视频截图对比Gradio4与Gradio5的速度差异：
    第一步，点击load开始同时加载，当Gradio5已加载完毕时，Gradio4仍在加载，如图1-3：
    在这里插入图片描述

图1-3

第二步，等待Gradio4加载完毕，两者界面观感对比如图1-4：在这里插入图片描述

图1-4

对比视频的加载时间可以看到，即使简单的应用，Gradio5对比Gradio4也有明显的提升，当界面复杂时速度提升会更明显。

  1. “这个Gradio应用看起来有点过时”→Gradio 5对许多核心组件进行了现代化设计改进，包括按钮、标签页、滑块以及高级聊天界面。同时Gradio5还发布了一组全新的内置主题，让开发者可以轻松创建外观时尚的Gradio应用（两者界面对比可参考上面截图）。

  2. “无法在Gradio中构建实时应用”→Gradio 5实现了低延迟的流式处理！它使用base64编码和websockets自动加速，还通过自定义组件支持WebRTC。此外，还增加了大量文档和示例演示，涵盖了常见的流式处理用例，如基于摄像头的物体检测、视频流处理、实时语音转录与生成以及对话型聊天机器人。

2. 新增：Gradio Playground

对于所谓的“LLM不了解Gradio”，Gradio 5推出了一个实验性的AI Playground，你可以在其中使用AI来生成或修改Gradio应用，并立即在浏览器中预览，AI Playground地址：🖇️链接1-5。这个平台也可以作为在线运行平台，以检验用户代码，作者也会在后续文章中反复用到这个在线运行工具。Gradio playground左侧有一些例程，如图1-5：
Gradio全解1（上）——Gradio简介：大模型WebUI框架

图1-5

程序正确无误时，会在右侧绘制网页界面，限于篇幅，请读者自行访问并观察效果。

3. 新增：Gradio Sketch

Gradio Sketch可实现界面编程。Gradio无需编写任何代码也能构建Gradio应用，只需在终端输入gradio sketch即可打开编辑器，通过网页界面自由定义或修改Gradio组件、调整布局、添加功能函数和事件交互，命令运行如下：

(mcp-venv) D:\\mcp>gradio sketch* Sketch will be saved to: D:\\mcp\\app.py* Running on local URL: http://127.0.0.1:7860* To create a public link, set `share=True` in `launch()`.

简单添加组件Textbox、Number、State和Button后，效果如图1-6：
Gradio全解1（上）——Gradio简介：大模型WebUI框架

图1-6

添加函数请单击“+Add Function”，保存并重定向渲染清单击“Save&Render”。对于本地运行不便的读者，可直接使用Hugging Face Spaces上托管的在线版Gradio Sketch：aliabid94/Sketch🖇️链接1-6。

Gradio 5在保留简单直观的开发者API的同时，提供了所有这些新功能。作为面向各种机器学习应用的生产级Web框架，Gradio 5还在Web安全性方面做了重大改进（包括第三方审计）——更多详情请关注Hugging Face的官方博客，地址：🖇️链接1-7。

1.3.2 Gradio 5其它说明

Gradio 5其它需要说明的包括不兼容的更改、下一步计划及可立即试用Gradio 5应用。

1. Breaking changes——不兼容的更改

在Gradio 4.x中没有出现弃用警告的Gradio应用应该可以继续在Gradio 5中正常运行，鉴于这部分参考性较低，因此作者建议有需要的读者参考《Gradio 5中的不兼容更改列表》：🖇️链接1-8。

2. Gradio的下一步计划

在Gradio 5中的许多更改是为了支持即将发布的新功能，比如以下内容：

  1. 支持多页面的Gradio应用，以及原生的导航栏和侧边栏；
  2. 支持通过PWA在移动设备上运行Gradio应用，甚至可能支持原生应用；
  3. 更多媒体组件，以支持新兴的图像和视频处理模式；
  4. 更丰富的DataFrame组件，支持常见的电子表格操作；
  5. 与机器学习模型和API提供商的一键集成；
  6. 进一步减少Gradio应用的内存消耗。

当然还有更多功能。有了Gradio 5提供的稳固基础，可以让开发者使用Gradio构建各种机器学习应用。

3. 立即试用Gradio 5

以下是一些运行Gradio 5的Hugging Face Spaces：

  1. DepthPro：DepthPro是一种快速深度预测模型。只需上传一张图像即可预测其逆深度图和焦距，大图像将自动调整为1536x1536像素，网址：🖇️链接1-9。
  2. Whisper Large V3 Turbo：转录音频，只需点击按钮，即可转录长格式麦克风或音频输入！演示使用检查点openai/whilsper-large-v3-turbo和Transformers库来转录任意长度的音频文件，网址：🖇️链接1-10。
  3. chatbot_streaming_main：使用组件类chatbot实现流式传输的聊天，但回复内容随机，制作演示用，网址：🖇️链接1-11。
  4. scatter_plot_demo_main：绘制点状图演示，网址：🖇️链接1-12。

1.4 关于Gradio网站访问

虽然国内可以访问Gradio官网，但由于国内已禁止访问国外大部分AI资源网站，那么Gradio托管在HF的Spaces上的Demos怎么办呢？

1.4.1 Gradio官网代码的运行方式

Gradio是Hugging Face发布的Python库，其官网地址正常情况下可以在国内访问。但由于Gradio线上Demos大部分托管在Hugging Face的Spaces中，而Hugging Face的官网架设在国外，在国内已经被禁止，因此经常会出现Gradio中的Demos无法加载而不能显示的问题。Gradio中的Demos在可加载时如图1-7所示：
在这里插入图片描述

图1-7

注意右下角的字样\"托管在spaces\"。当不能显示时，我们可以将代码复制到Gradio Playground中，便可观察其运行情况。

再者，Gradio也会将代码嵌入到网页中展示Demos，如图1-8：
在这里插入图片描述

图1-8

这里列举了两种Gradio平台代码的运行方式，方便读者知悉其区别。

1.4.2 访问Hugging Face Spaces上的Demos

如果仍想访问Gradio托管在Hugging Face的Spaces上的Demos，比如上一节立即试用Gradio5中的Demos，该怎么办呢？Hugging Face在国内有一个镜像网站：🖇️链接1-13，但它只镜像了HF中的模型和数据库，如图1-9：
Gradio全解1（上）——Gradio简介：大模型WebUI框架

图1-9

如需下载HF中的模型或数据库，只需用镜像网站的地址替换掉链接中的HuggingFace地址即可，当然仍会用到hf_token。

为了访问Hugging Face Spaces上的Demo，可使用代理工具，不过在国内是不支持使用或者禁止传播的，请读者知悉，根据自己实际情况选择。作者使用的代理工具是仪表盘，它便宜又好用。此外还有较贵的搬瓦工、西部世界等，适合企业级用户，读者可参考各自官网教程自行设置。除了作者的办法，读者也可自行解决，比如请国外朋友帮忙申请hf_token，或去机场候机厅蹭网……有了网址代理，无论是申请HF账户及HF_TOKEN，还是访问Gradio的在线Demos，或者使用本书介绍的其它国外站点，各种资源都可信手拈来；但如果没有网址代理，使用本书介绍的资源时会受到极大限制，请读者知悉！

了解完Gradio的基本情况，下面开始讲述Gradio的安装、运行和部署。

PHP学习教程

网络标签：

相关问题