使用Gradio构建交互式机器学习应用程序|迈向数据科学

作为使用机器学习模型的开发人员，您可能会花费数小时编写脚本并调整超参数。但是，在分享您的工作或让其他人与模型互动时，Python脚本和可用的Web应用程序之间的差距会感到巨大。Gradio是一个开源Python库，可让您将Python脚本转换为交互式Web应用程序，而无需前端专业知识。

在此博客中，我们将采取一种有趣的动手方法来通过构建一个文本到语音（TTS）您可以在一个上运行的Web应用程序AI PC或者英特尔®tiber¢ai云并与他人分享。（全面披露：作者隶属于英特尔。）

我们项目的概述：TTS Python脚本

我们将使用Coqui TTS库及其ITS开发一个基本的Python脚本XTTS_V2多语言模型。要继续这个项目，请做一个需求.txt提交以下内容：

Gradiocoqui-tts火炬

然后创建一个虚拟环境，并使用

pip install -r要求.txt

另外，如果您使用Intel Tiber AI云，或者是否有UV软件包管理器安装在系统上，创建虚拟环境，然后将库安装

紫外线启动 - 巴尔UV add -r要求.txt

然后，您可以使用

UV Run <filename.py>

Gotcha警报为了与最近的依赖版本兼容，我们正在使用``coqui-tts`这是原始coqui的叉子'TTS`因此，请勿尝试使用PIP安装TTS。

接下来，我们可以为我们的脚本进行必要的导入：

导入火炬从tts.api导入tts

当前，`tts'可让您访问94个模型，您可以通过运行来列出这些型号

打印（tts（）。list_models（））

对于此博客，我们将使用XTTS-V2模型，支持17种语言和58个说话者的声音。您可以加载模型并通过

tts = tts（“ tts_models/multiandual/multi-dataset/xtts_v2”）打印（tts.speakers）

这是一个最小的python脚本，该脚本从文本中生成语音，

导入火炬从tts.api导入ttstts = tts（“ tts_models/multiandual/multi-dataset/xtts_v2”）tts.tts_to_file（text =“每个错误曾经是一个绝妙的主意 - 直到现实就开始了。”，扬声器=“ Craig Gutsy”，语言=“ en”，file_path =“ bug.wav”，）

该脚本有效，但这不是交互式。如果您想让用户输入自己的文本，选择扬声器并获得即时音频输出怎么办？那是Gradio闪耀的地方。

Gradio应用的解剖学

一个典型的Gradio应用程序包括以下组件：

• 界面用于定义输入和输出
• 成分例如文本框，，，，下拉， 和声音的
• 功能用于链接后端逻辑
• 。发射（）旋转并可选地与该选项共享应用程序共享= true。

这界面班级有三个核心论点：fn，，，，输入， 和输出。分配（或设置）fn请参阅要使用用户界面（UI）包装的任何Python函数。输入和输出采用一个或多个Gradio组件。您可以将这些组件的名称作为字符串传递，例如“ Textbox”或者“文本”，或为了获得更多可自定义性，类似类的实例textbox（）。

导入Gradio作为GR＃一个简单的Gradio应用程序，该应用使用滑块乘以两个数字def倍数（x，y）：返回f“ {x} x {y} = {x * y}”demo = gr.interface（fn =倍数，输入= [Gr.Slider（1，20，步骤= 1，label =“数字1”），，Gr.Slider（1，20，步骤= 1，label =“数字2”），，]，，outputs =“ textbox”，＃或outputs = gr.textbox（））demo.launch（）

这旗帜默认情况下，按钮显示在接口中，因此用户可以标记任何有趣的组合。在我们的示例中，如果我们按标志按钮，gradio将在下面生成一个CSV日志文件.gradio \标记具有以下内容：

数字1，数字2，输出，时间戳12,9,12 x 9 = 108,2025-06-02 00：47：33.864511

您可以通过设置关闭此标记选项标记_mode =“从不”在接口中。

另请注意，我们可以删除提交按钮并自动触发乘通过设置功能live = true在接口中。

将我们的TTS脚本转换为Gradio应用程序

如前所述，Gradio的核心概念很简单：您使用UI使用UI包装Python功能界面班级。在这里，如何将TTS脚本变成网络应用程序：

导入Gradio作为GR从tts.api导入ttstts = tts（“ tts_models/multiandual/multi-dataset/xtts_v2”）def tts_fn（文本，扬声器）：wav_path =“ output.wav”tts.tts_to_file（text = text，speaker =扬声器，语言=“ en”，file_path = wav_path）返回wav_pathdemo = gr.interface（fn = tts_fn，输入= [gr.Textbox（label =“ text”），gr.Dropdown（选择= tts.speakers，label =“扬声器”），]，，输出= gr.audio（label =“生成的音频”），title =“文本到语音演示”，description =“输入文本并选择扬声器来生成语音。”，，）demo.launch（）

只需几行，您就可以拥有一个Web应用程序，用户可以在其中输入文本，选择扬声器，然后收听本地运行的生成的音频。共享此应用就像用替换最后一行一样简单demo.launch（share = true），这立即为您提供公共网址。对于生产或持续托管，您可以免费部署Gradio应用程序拥抱面孔空间，或在您自己的服务器上运行它们。

超越接口：电力用户的块

虽然界面适用于大多数用例，但Gradio也提供块，用于构建具有自定义布局，多个函数和动态交互性的复杂的多步骤应用程序的低级API。使用块，您可以：

• 在行，列或选项卡中排列组件
• 链输出作为其他功能的输入
• 动态更新组件属性（例如，隐藏/显示，启用/禁用）
• 构建仪表板，多模式应用程序，甚至是功能齐全的Web UIS

这是一个简单的应用程序可能会算出一种可能的味道，该应用在用户完成输入后立即计算单词数量，并让用户使用一个按钮清除输入和输出。该示例说明了如何控制应用程序的布局排并展示两个关键事件类型：。改变（）和。点击（）。导入Gradio作为GR

def word_count（文本）：返回f“ {len（text.split（））} word（s）” if text.strip（）else”def clear_text（）：返回 ””， ””用gr.blocks（）作为演示：Gr.markDown（“ ## Word Counter”）与Gr.Row（）：input_box = gr.textbox（占位符=“ type tosing shots ...”，label =“ input”）count_box = gr.textbox（label =“ Word Count”，Interactive = false）与Gr.Row（）：clear_btn = gr.button（“ clear”）input_box.change（fn = word_count，inputs = input_box，outputs = count_box）clear_btn.Click（fn = clear_text，outputs = [input_box，count_box]）＃clear_text不需要输入demo.launch（）

如果您对这些组件的类型感到好奇，请尝试

print（type（input_box））＃<class'gradio.components.textbox.textbox'>

请注意，在运行时，您无法直接阅读文本框像变量。gradio组件并不是python变量的实物，它们只是定义了UI和行为。一个的实际值文本框存在于客户端（在浏览器中），并且仅在发生用户互动时传递给您的python功能（例如。点击（）或者。改变（））。如果您重新探索高级流（例如保持或同步状态），则状态可以方便。

更新Gradio组件

在更新组件时，Gradio为您提供了一些灵活性。考虑以下两个代码片段，尽管它们看起来有些不同，但是它们会做同样的事情：更新文本文本框单击按钮时。

选项1：直接返回新值

导入Gradio作为GRdef update_text（框）：返回“文本成功启动！”用gr.blocks（）作为演示：textbox = gr.textbox（value =“等待启动序列”，label =“ mission log”）button = gr.button（“启动启动”）button.click（fn = update_text，inputs = textbox，outputs = textbox）demo.launch（）

选项2：使用gr.update（）

导入Gradio作为GRdef update_text（）：返回gr.update（value =“文本成功启动！”）用gr.blocks（）作为演示：textbox = gr.textbox（value =“等待启动序列”，label =“ mission log”）button = gr.button（“启动启动”）button.click（fn = update_text，inputs = []，outputs = textbox）demo.launch（）

那你应该使用哪个？如果您只是更新价值组件，返回普通字符串（或数字或组件期望的任何内容）是完全可以的。但是，如果您想更新其他属性（例如隐藏组件，更改其标签或禁用），然后gr.update（）是要走的路。

了解什么样的对象也很有帮助gr.update（）返回，以消除周围的一些奥秘。例如，在引擎盖下，gr.update（可见= false）只是词典：

{'__Type__'：'update'，'visible'：false}

这是一个小细节，但是知道何时以及如何使用gr.update（）可以使您的Gradio应用程序更具动态和响应速度。

如果您发现这篇文章有价值，请考虑与您的网络共享。有关更多AI开发操作内容的内容，请访问英特尔®AI开发资源。

确保退房拥抱面孔空间对于广泛的机器学习应用程序，您可以通过检查他人的代码并与社区分享您的工作来向他人学习。

致谢

作者感谢杰克·埃里克森（Jack Erickson）提供有关此作品早期草案的反馈。

资源

• Gradio Quickstart
• coqui tts github页面
• 引入Intel®Tiber¢AI云：创新的门户
• gradio-lite：无服务器Gradio完全在浏览器中运行