在Python中使用Gradio的AI应用程序构建用户界面

>当今AI模型的有用性大大降低了，而无需访问用户界面。使用开源Python Web UI库Gradio，您可以在LLMS和非技术最终用户之间弥合这一差距。它使您可以为您的AI项目创建快速的原型，并简化其部署到更广泛的受众。

>本教程针对的是机器学习工程师，他们通常没有任何网络开发经验。它涵盖了Gradio基础知识和核心概念，各种AI模型类型的接口创建，UX和交互性的高级功能以及部署和共享最佳实践。

让我们开始。

开始使用Gradio

>

>安装

我们将通过创建虚拟环境（最好是conda）开始：

然后，您可以使用pip安装gradio及其依赖项：>

>我们还安装了iPykernel软件包，以便可以在Jupyter笔记本中直接显示Gradio接口。此过程要求您将创建的虚拟环境添加到Jupyter实验室中。这是这样做的命令：

$ conda create -n gradio_tutorial python=3.9 -y
$ conda activate gradio_tutorial

>这应该允许您使用已安装Gradio的内核创建笔记本。要验证，以标准别名导入并打印其版本：

$ pip install gradio ipykernel

基本概念和术语

$ ipython kernel install --user --name=gradio_tutorial
$ jupyter lab  # Start the lab

我们将通过“ Hello World”示例来学习其关键概念和术语：

：

import gradio as gr
print(gr.__version__)
4.37.1

>在单元格中运行上述代码时，输​​出将是一个返回自定义问候消息的小型交互式界面：

def greet(name):
   return f"Hello, {name}!"
demo = gr.Interface(
   fn=greet,
   inputs=['text'],
   outputs="text",
)
demo.launch()

Gradio围绕一些关键概念旋转：

接口

：创建UIS的核心类。

组件
1. ：输入和输出元素，例如文本框，图像和音频。到目前为止，有30多个内置组件。 >函数
：python函数从输入组件处理信息，并返回结果以输出组件显示。>
2. 启动：启动您的Gradio应用的方法。
>
3. 上面的，我们创建了一个迎接文本输入并返回文本输入的问候功能。因此，输入和输出组件在接口类中指定为文本。 最后，我们调用启动本地服务器的启动方法。为了使任何人使用UI，您可以将共享参数设置为true。这将启动SSH隧道并将Gradio应用程序部署到可公开共享的网页：>
gradio组件
4. >您将花费大部分时间在不同的组件上修补不同的组件，以及如何在构建Gradio应用程序时将它们放在页面上。因此，让我们仔细看看您可以使用的东西。>

   >输入和输出组件

   Gradio提供了各种各样的组件，用于构建交互式接口。这些组件通常分为两类：输入和输出。>>

   >输入组件允许用户向基础处理器提供数据（这可以是任何Python函数）。一些常见的输入是：

   textbox
   • 图像
   • 音频
   • 滑块
   • >下拉
   这是一个虚拟界面，使用上述某些组件：>
   在此示例中，process_inputs函数需要五个参数。因此，我们需要创建五个输入组件并将其传递给输入。虽然输入组件的数量应匹配所需功能参数的数量，但这不是严格的规则。为避免错误和警告，请为不需要UI输入的参数设置默认值。

   $ conda create -n gradio_tutorial python=3.9 -y
   $ conda activate gradio_tutorial

   >注意我们如何使用文本框类来指定输入组件，而不是像第一个示例那样的普通字符串文本。始终建议使用专用类指定输入和输出组件以使其可自定义。例如，所有组件类都有一个有用的标签属性，而滑块和下拉列表都有指定范围和可用选项的参数。

   > >许多输入组件也可用于显示输出。以下是一些常见的情况：

   标签：用于显示文本或分类结果
   图像：用于显示已处理或生成的图像
   • >音频：用于播放处理或生成的音频
   • 绘图：用于显示图形或图表
   >
   喜欢输入，输出组件的数量必须匹配从处理函数中返回值的数量。
   >自定义组件外观

   Gradio允许您自定义组件的外观以适应您的需求。这是一个使用自定义文本框的示例：

   >

   $ pip install gradio ipykernel

   在此示例中，我们通过指定行数，添加占位符和信息文本，并包括输出的副本按钮来自定义文本框组件。>

   >实验不同的组件及其属性，以创建最适合您AI应用程序要求的接口。要了解可以更改组件的哪种属性，您可以访问其文档，或者更好的是使用？ jupyter实验室的班级名称之后：

   > llms

   的构建界面

   >让我们通过创建由LLMS供电的两个现实世界文本和基于图像的界面来将所有学到的一切放在一起。。

   首先，我们将构建从英语到土耳其语，西班牙语或中文的语言翻译：

   $ conda create -n gradio_tutorial python=3.9 -y
   $ conda activate gradio_tutorial

   最初，我们定义一个translate_text函数。在其体内，我们设置了OpenAI API键并创建语言图。然后，我们构建了翻译的提示。然后，在一个try-except块中，我们使用系统提示符将请求发送到聊天的端点。最后，我们返回首选。
   现在，我们可以构建接口：>
   代码很简单，就像早期接口的代码一样，但是我们介绍了几个新属性：

   $ pip install gradio ipykernel

   >文本框的类型参数将普通文本输入字段更改为密码输入，隐藏文本。
   • >标题和描述界面类的参数在页面的顶部中心添加了H1标题和字幕。
   这是结果：

   >您可能想知道为什么我们要询问用户的API密钥作为应用程序的一部分，而不是自己提供。原因与Gradio如何部署UI有关。

   如果我们提供了自己的API密钥作为环境变量（这是标准实践），则公开共享的应用程序版本将无法使用，因为它无法访问我们的环境变量。在部署部分中，我们将通过将应用程序部署到拥抱面空间来查看如何解决此问题。
   >让我们构建另一个用户界面以生成图像：

   我们创建一个名为generate_surrealist_art的函数，该函数将请求发送到dall-e-3，并使用超现实主义提示返回生成的图像URL。然后，我们将再次将此函数馈送到接口类中：

   >

   $ ipython kernel install --user --name=gradio_tutorial
   $ jupyter lab  # Start the lab

   >我们为API密钥指定了两个输入，以及要在超现实主义图像中捕获的概念。然后，我们使用图像类创建一个生成图像的输出组件。如果将其值参数设置为str，则组件可以从URL下载和显示图像，这正是我们需要的。

   import gradio as gr
   print(gr.__version__)
   4.37.1

   ，这是结果：

   >构建经典ML模型的界面 现在，让我们为经典表格回归模型构建一个接口。我们将使用钻石数据集，该数据集可在Seaborn中使用。

   首先创建一个新的工作目录和一个名为app.py的新脚本。然后，将加载数据加载的GitHub Gist的代码粘贴，使用Scikit-Learn管道处理并训练RandomForestRegress模型。
   下一步是创建一个处理功能，该功能接受与钻石数据集中有功能相同数量的输入：

   $ conda create -n gradio_tutorial python=3.9 -y
   $ conda activate gradio_tutorial

   >该函数将这些输入转换为数据框，并将其传递到训练有素的模型管道的.predict（）方法。最后，它返回一个带有预测价格的字符串。

   现在，接口类必须匹配此函数的签名：用于处理功能的九个输入组件和一个用于显示预测价格的输出：

   $ pip install gradio ipykernel

   在班级内，我们为分类功能创建了三个下拉列表。每个功能中的唯一类别都填充了这些选项。我们还创建了六个滑块组件以接受数字功能。滑块的范围取决于每个特征的最小值和最大值。

   >我们现在要做的就是执行脚本以运行和部署应用程序：>
   这是结果：

   $ ipython kernel install --user --name=gradio_tutorial
   $ jupyter lab  # Start the lab

   >有关最佳实践和优化提示，请跳至下面的最佳实践部分。

   >部署Gradio应用
   >我们已经看到通过启用一个参数来部署Gradio应用程序的容易。当然，这种方法的缺点是演示可以在72小时内到期。因此，推荐的部署Gradio的方法是通过拥抱面空间。 Huggingface于2021年获得了Gradio，使两个平台之间的集成无缝。 因此，对于本教程或您使用Gradio创建的任何未来应用程序，请在huggingface.co上注册一个免费帐户，然后导航到设置＆gt;代币生成访问令牌：

   >

   令牌仅显示一次，因此请确保将其存储在安全的地方。

   >使用此令牌，您可以在空间上永久托管时尽可能多地部署想要的级别应用程序。例如，我们将从上一节中部署钻石价格预测模型，您会发现它非常容易。

   > 您所要做的就是使用UI脚本导航到目录，并在终端上调用Gradio部署：>

   >终端使您通过将脚本转换为功能正常的拥抱面空间。它要求诸如：

   之类的详细信息
   您生成的访问令牌

   >空间标题：这将是部署后空间URL的一部分

   包含gradio ui代码（app.py默认值）的脚本的名称

   >
   >空间的硬件；空白以使用CPU（免费）
   任何脚本使用的任何环境变量（这是您安全存储API密钥和用户秘密的位置）
   • >
   依赖项 - 通过按Enter 一个一个一个接一个地输入
   >终端为您提供了部署的空间链接。这是它的外观：
   关于这种部署方法的另一个好处是，Gradio会自动将演示转换为工作的REST API。访问和查询的说明始终位于底部：

   >

   

   因此，一口气，您既有用于非技术用户申请的永久UI托管，又有为同事和开发人员朋友的REST API。

   >有关更多部署和共享选项，例如将演示嵌入网页中，将Google Authentication添加到应用程序等，请访问Gradio文档的“共享您的应用程序”部分。

   gradio最佳实践和技巧

   >

   在使用Gradio开发用户界面时，遵循最佳实践可以显着提高应用程序的用户体验和可维护性。以下是一些关键建议：
   1。将脚本用于组织和可维护性

   >

   >在Python脚本中组织Gradio应用程序，以进行更好的版本控制，协作和部署。

   >

   2。优化组件的空间分配
   >使用适当的尺寸和布局工具（例如，gr.column（），gr.row（））来确保平衡，响应式接口。

   3。提供全面的信息

   >利用“信息”和“标签”属性为每个组件提供清晰的说明和上下文。

   4。有效地处理大型功能集

   对于具有多个功能的模型，请使用文件输入（CSV，JSON）启用批处理预测并简化接口。

   5。正确管理环境变量

   >使用python-dotenv进行本地开发，并将变量设置在拥抱面部空间以进行部署。

   6。实施错误处理和验证
   >验证输入，提供明确的错误消息，并使用Try-Except块进行正式错误处理。
   7。优化性能
   >实现缓存，大型型号的懒惰加载，并使用Gr.LoadingStatus（）进行长期运行的任务。
   8。可访问性的设计

   确保高对比度，为图像提供ALT文本，并为所有交互式元素启用键盘导航。

   9。实施渐进披露

   >使用手风琴或选项卡来组织复杂的接口，根据需要揭示高级选项。>

   10。定期更新并维护
   >保持依赖关系更新，监视错误并根据用户反馈不断改进。
   11。利用拥抱面资源
   >利用拥抱面工具和资源与Gradio无缝集成，包括模型存储库和数据集。
   12。在拥抱面枢纽

   上托管大型型号

   >对于大型表格模型，上传到拥抱面式集线器并直接在Gradio脚本中加载，以提高性能并减少本地存储要求。

   13。利用拥抱面数据集

   对于大型数据集，上传到HuggingFace Hub，然后直接在您的Gradio应用程序中访问它们以简化数据管理并改善加载时间。

   结论和进一步的资源

   在本文中，我们了解了使用Gradio为AI应用程序构建用户界面的基础知识。我们刚刚在表面下方倾斜，因为Gradio为构建复杂界面提供了更多功能。例如，接口状态允许您的应用程序记住从一个函数调用到另一个函数的输出。用户输入更改后，反应性接口会动态更改UI。使用块，您可以构建具有自定义布局和设计的应用程序。

   同样，请查看这些相关资源以获取更多内容：

   10个python软件包添加到您的数据科学堆栈
   • 7个基本的生成AI工具，用于构建出色的AI应用程序
   5个项目，您可以使用Gen AI模型
   • 构建
   CI/CD用于机器学习课程

以上是在Python中使用Gradio的AI应用程序构建用户界面的详细内容。更多信息请关注PHP中文网其他相关文章！