Gradio Agents & MCP 黑客马拉松

获奖者
Gradio logo
  1. 入门
  2. 快速入门

快速入门

Gradio 是一个开源 Python 包,允许你快速为你的机器学习模型、API 或任何任意 Python 函数构建一个演示或 Web 应用程序。然后,你可以使用 Gradio 内置的共享功能,在几秒钟内分享你的演示或 Web 应用程序的链接。无需 JavaScript、CSS 或 Web 托管经验!

只需几行 Python 代码即可创建你自己的演示,让我们开始吧💫

安装

先决条件:Gradio 需要 Python 3.10 或更高版本

我们建议使用 pip 安装 Gradio,pip 默认包含在 Python 中。在你的终端或命令提示符中运行此命令:

pip install --upgrade gradio

提示: 最好在虚拟环境中安装 Gradio。所有常用操作系统的详细安装说明在此提供

构建你的第一个演示

你可以在你喜欢的代码编辑器、Jupyter Notebook、Google Colab 或任何你编写 Python 的地方运行 Gradio。让我们编写你的第一个 Gradio 应用程序:

import gradio as gr

def greet(name, intensity):
    return "Hello, " + name + "!" * int(intensity)

demo = gr.Interface(
    fn=greet,
    inputs=["text", "slider"],
    outputs=["text"],
)

demo.launch()

提示: 我们将导入的名称从 gradio 缩写为 gr。这是一种广泛采用的惯例,旨在提高代码的可读性。

现在,运行你的代码。如果你已将 Python 代码写入名为 app.py 的文件,则将在终端中运行 python app.py

如果从文件运行,下面的演示将在浏览器中打开,地址为 https://:7860。如果你在笔记本中运行,演示将嵌入在笔记本中显示。

在左侧的文本框中输入你的姓名,拖动滑块,然后按下提交按钮。你会在右侧看到友好的问候语。

提示: 在本地开发时,你可以通过热重载模式运行 Gradio 应用程序,该模式会在你更改文件时自动重新加载 Gradio 应用程序。为此,只需在文件名前输入 gradio 而不是 python。在上面的示例中,你将在终端中输入:`gradio app.py`。在热重载指南中了解更多信息。

理解 Interface

你会注意到,为了创建你的第一个演示,你创建了一个 gr.Interface 类的实例。Interface 类旨在为机器学习模型构建演示,这些模型接受一个或多个输入,并返回一个或多个输出。

Interface 类有三个核心参数:

  • fn:要围绕其包装用户界面 (UI) 的函数
  • inputs:用于输入的 Gradio 组件。组件数量应与函数中的参数数量匹配。
  • outputs:用于输出的 Gradio 组件。组件数量应与函数返回值的数量匹配。

fn 参数非常灵活——你可以传递任何你想要用 UI 包装的 Python 函数。在上面的示例中,我们看到了一个相对简单的函数,但该函数可以是任何东西,从音乐生成器到税务计算器,再到预训练机器学习模型的预测函数。

inputsoutputs 参数接受一个或多个 Gradio 组件。我们将看到,Gradio 包含超过 30 个内置组件(例如 gr.Textbox()gr.Image()gr.HTML() 组件),它们专为机器学习应用设计。

提示: 对于 `inputs` 和 `outputs` 参数,你可以传入这些组件的名称作为字符串 (`"textbox"`) 或类的实例 (`gr.Textbox()`)。

如果你的函数接受多个参数(如上例所示),请将输入组件列表传递给 inputs,每个输入组件按顺序对应函数的一个参数。如果你的函数返回多个值,情况也相同:只需将组件列表传递给 outputs。这种灵活性使 Interface 类成为创建演示的强大方式。

我们将在关于构建界面的系列文章中深入探讨 gr.Interface

分享你的演示

如果你的演示不能分享,那么再漂亮的演示又有什么用呢?Gradio 让你轻松分享机器学习演示,无需担心 Web 服务器托管的麻烦。只需在 launch() 中设置 share=True,就会为你的演示创建一个公开可访问的 URL。让我们回顾一下我们的示例演示,但将最后一行更改如下:

import gradio as gr

def greet(name):
    return "Hello " + name + "!"

demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
    
demo.launch(share=True)  # Share your demo with just 1 extra parameter 🚀

当你运行此代码时,你的演示将在几秒钟内生成一个公共 URL,例如:

👉   https://a23dsf231adb.gradio.live

现在,世界各地的任何人都可以从他们的浏览器尝试你的 Gradio 演示,而机器学习模型和所有计算将继续在你的计算机本地运行。

要了解有关分享演示的更多信息,请阅读我们关于分享 Gradio 应用程序的专用指南。

Gradio 概览

到目前为止,我们一直在讨论 Interface 类,这是一个高级类,可让你快速构建 Gradio 演示。但 Gradio 还包含什么呢?

使用 gr.Blocks 自定义演示

Gradio 提供了一种低级方法,使用 gr.Blocks 类设计具有更可定制布局和数据流的 Web 应用程序。Blocks 支持控制组件在页面上的显示位置、处理多个数据流和更复杂的交互(例如,输出可以作为其他函数的输入),以及根据用户交互更新组件的属性/可见性——所有这些都仍然在 Python 中实现。

你可以使用 gr.Blocks() 构建非常自定义和复杂的应用程序。例如,流行的图像生成器 Automatic1111 Web UI 就是使用 Gradio Blocks 构建的。我们将在关于使用 Blocks 构建的系列文章中深入探讨 gr.Blocks

使用 gr.ChatInterface 构建聊天机器人

Gradio 还包含另一个高级类 gr.ChatInterface,它专门用于创建聊天机器人 UI。与 Interface 类似,你提供一个函数,Gradio 就会创建一个功能齐全的聊天机器人 UI。如果你有兴趣创建聊天机器人,可以直接跳转到我们关于 gr.ChatInterface 的专用指南

Gradio Python & JavaScript 生态系统

这就是核心 gradio Python 库的要旨,但 Gradio 实际上远不止于此!它是一个由 Python 和 JavaScript 库组成的完整生态系统,允许你用 Python 或 JavaScript 构建机器学习应用程序,或以编程方式查询它们。以下是 Gradio 生态系统的其他相关部分:

  • Gradio Python 客户端 (gradio_client):以编程方式在 Python 中查询任何 Gradio 应用程序。
  • Gradio JavaScript 客户端 (@gradio/client):以编程方式在 JavaScript 中查询任何 Gradio 应用程序。
  • Gradio-Lite (@gradio/lite):使用 Pyodide 在浏览器中完全运行 Gradio 应用程序(无需服务器!)。
  • Hugging Face Spaces:托管 Gradio 应用程序最受欢迎的地方——免费!

下一步是什么?

通过 Gradio 指南按顺序学习 Gradio,其中包含解释以及示例代码和嵌入式交互式演示。接下来:让我们深入探讨 Interface 类

或者,如果你已经了解了基础知识并正在寻找特定内容,你可以搜索更技术性的 API 文档

Gradio Sketch

你也可以不写任何代码来构建 Gradio 应用程序。只需在终端中输入 gradio sketch,即可打开一个编辑器,让你通过 Web 编辑器定义和修改 Gradio 组件、调整其布局、添加事件等。或者使用托管在 Hugging Face Spaces 上的 Gradio Sketch 版本