Gradio使用案例

简介
Gradio 是一个非常方便的 Python 库，用于快速构建用户友好的机器学习模型和其他应用程序的 Web 界面。通过 Gradio，你可以轻松地将机器学习模型转换成一个交互式的 Web 应用，而无需复杂的前端开发技能。

主要用法

1. 快速搭建用户界面：Gradio 提供了多种输入输出组件（如文本框、按钮、图像、音频等），可以帮助开发者为模型创建丰富的交互界面。你只需编写几行代码，就可以将这些组件连接到你的 Python 函数上，自动生成一个简单易用的 Web 界面。
2. 即开即用：Gradio 应用可以直接通过浏览器访问，开发过程中它会为你启动一个本地的 Web 服务器，并且还支持快速生成一个临时的公网链接（通过 Gradio 提供的 share 参数），便于共享给他人测试或演示。
3. 兼容各种模型：无论是基于 TensorFlow、PyTorch 还是其他框架的模型，Gradio 都可以轻松集成。此外，Gradio 也非常适合用来演示自然语言处理（NLP）、计算机视觉等领域的应用。
4. 自动部署：通过集成服务如 Hugging Face Spaces，Gradio 应用可以快速部署到云端，无需考虑复杂的后端设置。

使用案例

import gradio as gr

def model_inference(input_wav, language):

        # text = inference_pipeline(input_wav, language=language)  # 这里调用你的模型进行推理，由于是示例，这里直接返回一个固定的文本
        text = '你好，这是一个测试文本。'
        return text

html_content = """
<div>
    <h2 style="font-size: 22px;margin-left: 0px;">Gradio Demo</h2>
    <p style="font-size: 18px;margin-left: 20px;">这是一个测试的gradio demo。</p>
    <h2 style="font-size: 22px;margin-left: 0px;">Usage</h2> 
    <p style="font-size: 18px;margin-left: 20px;">上传音频文件或通过麦克风输入，音频将转录为相应的文本。</p>
    <p style="font-size: 18px;margin-left: 20px;">建议音频输入持续时间不超过 30 秒。对于超过 30 秒的音频，建议进行本地部署。</p>
</div>
"""
audio_examples = [
    ["FEAT.mp3", "zh"],
]

def launch():
        with gr.Blocks(theme=gr.themes.Soft()) as demo:
                gr.HTML(html_content)
                with gr.Row():
                        with gr.Column():
                                audio_inputs = gr.Audio(label="Upload audio or use the microphone")

                                with gr.Accordion("Configuration"):
                                        language_inputs = gr.Dropdown(choices=["zh"], value="zh", label="Language")
                                        # dB = gr.Slider(minimum=-80, maximum=0, step=1, label="dB", value=-20)  # 滑动条组件，用于在指定的范围内选择一个数值。
                                fn_button = gr.Button("Start", variant="primary")
                                text_outputs = gr.Textbox(label="Results")
                        gr.Examples(examples=audio_examples, inputs=[audio_inputs, language_inputs], examples_per_page=20)

                fn_button.click(model_inference, inputs=[audio_inputs, language_inputs], outputs=text_outputs)

        demo.launch(share=True)

if __name__ == "__main__":
        launch()


# 下面是另一个使用示例，输入和输出都是音频，本篇文章将不对下面的代码进行详解，只当做一个参考的例子
"""
import gradio as gr

from denoiser import pretrained
from denoiser.dsp import convert_audio
import torch
import torchaudio

model = pretrained.dns64().cuda()

def _fn(path):
    wav, sr = torchaudio.load(path)
    wav = convert_audio(wav.cuda(), sr, model.sample_rate, model.chin)
    with torch.no_grad():
        denoised = model(wav[None])[0]

    # 输出的音频是一个元组的形式，音频数据需要是一维的，这点前期踩坑了；然后将tensor转换为numpy数组
    denoised_np = denoised.squeeze(0).cpu().numpy()

    return (model.sample_rate, denoised_np)  # 返回的是一个元组，第一个元素是采样率，第二个元素是音频数据

def main():
    inputs: list = [
        gr.Audio(type="filepath", label="Input Audio"),
    ]

    outputs: list = [
        gr.Audio(label="Output Enhanced Audio"),
    ]

    interface = gr.Interface(
        fn=_fn,
        title="语音增强Demo",
        description="AI-driven audio enhancement for your audio files, powered by AI.",
        inputs=inputs,
        outputs=outputs,
    )

    interface.launch(share=True)

if __name__ == "__main__":
    main()
"""

界面展示

代码详解

1. 导入库

import gradio as gr

gradio 是用于构建 Web 界面的库，能够快速将 Python 函数变为带有用户交互界面的应用程序。在这个示例中，它被用于构建音频转文本的界面。

2. 定义推理函数

def model_inference(input_wav, language):
    # 模拟推理，返回固定文本
    text = '你好，这是一个测试文本。'
    return text

• 该函数 model_inference 是音频推理的核心处理函数。它接收两个输入：input_wav（上传的音频）和 language（语言选项）。
• 在实际应用中，这里会调用你的推理模型处理音频文件（在注释部分提到的 inference_pipeline ）。为了简化，此示例中直接返回固定文本 “你好，这是一个测试文本”。

3. 创建 HTML 内容

html_content = """
<div>
    <h2 style="font-size: 22px;margin-left: 0px;">Gradio Demo</h2>
    <p style="font-size: 18px;margin-left: 20px;">这是一个测试的gradio demo。</p>
    <h2 style="font-size: 22px;margin-left: 0px;">Usage</h2> 
    <p style="font-size: 18px;margin-left: 20px;">上传音频文件或通过麦克风输入，音频将转录为相应的文本。</p>
    <p style="font-size: 18px;margin-left: 20px;">建议音频输入持续时间不超过 30 秒。对于超过 30 秒的音频，建议进行本地部署。</p>
</div>
"""

• html_content 定义了一段简单的 HTML，用于展示在 Gradio 界面中的说明文字。它介绍了 Demo 的功能和使用方法，比如音频文件上传和语言选择等。
• 这是通过 gr.HTML() 组件加载到界面中的，增强了界面信息的丰富性。

4. 定义示例音频数据

audio_examples = [
    ["FEAT.mp3", "zh"],
]

• audio_examples 定义了示例音频数据。它是一个二维列表，包含音频文件及对应的语言。
• 这些音频示例可以帮助用户快速测试功能，而无需自己上传音频文件。

5. launch 函数：搭建 Gradio 界面

def launch():
    with gr.Blocks(theme=gr.themes.Soft()) as demo:

• 这里使用了 Gradio 的 Blocks 模型来创建一个复杂的、多组件的用户界面。theme=gr.themes.Soft() 表示界面将使用 Gradio 提供的 “Soft” 主题。
• with 语句保证所有 UI 组件都在 Blocks 的上下文中被创建，整体界面存储在变量 demo 中。

6. 加载 HTML 模块

        gr.HTML(html_content)

• 使用 gr.HTML() 方法将之前定义的 html_content 加载到界面中。用户在启动应用时，会首先看到这个自定义的 HTML 介绍页面。

7. 界面布局：使用行和列

        with gr.Row():
            with gr.Column():

• gr.Row() 和 gr.Column() 用于控制界面的布局。Row 是横向排列的一行，Column 是在这一行内部的纵向排列组件。
• 通过这种布局方式，可以将不同的输入框、按钮、结果区域有条理地放置在页面上。

8. 音频输入组件

                audio_inputs = gr.Audio(label="Upload audio or use the microphone")

• gr.Audio() 创建了一个音频输入组件，用户可以通过上传音频文件或使用麦克风录制音频。
• label ：为这个组件添加了提示文字，此外还有下列的参数；
• type：默认是输入为numpy类型的数据，也可以设置type=‘filepath’，这样输入的就是音频的地址，这点尤其有用；
• streaming：如果在“实时”界面中用作输入时设置为 True，将自动流式传输网络摄像头信息。当用作输出时，将从后端获取音频块并将其组合成一个流式音频输出；
• min_length、max_length：设置最小和最大的长度；
• 该组件将作为模型的输入音频，并会传递给推理函数。

9. 配置选项（可折叠的语言选择）

在这里插入代码片

10. 按钮组件

                fn_button = gr.Button("Start", variant="primary")

• gr.Button() 创建了一个按钮，用户可以点击它来触发推理操作。variant=“primary” 是按钮的样式，表示这是一个主要操作按钮。

11. 输出组件

                text_outputs = gr.Textbox(label="Results")

• gr.Textbox() 是一个文本框组件，用于展示推理的结果。模型转录的文本将会显示在这里。

12. 示例音频展示

        gr.Examples(examples=audio_examples, inputs=[audio_inputs, language_inputs], examples_per_page=20)

• gr.Examples() 用于展示之前定义的音频示例数据，用户可以点击这些示例直接填充输入区域，而无需手动上传音频。注意，示例中的音频文件需要按照指定的路径存放在本地。
• inputs=[audio_inputs, language_inputs] 表示示例音频会自动填充到对应的输入组件中。

13. 绑定按钮和推理函数

        fn_button.click(model_inference, inputs=[audio_inputs, language_inputs], outputs=text_outputs)

• fn_button.click() 用于绑定按钮点击事件。当用户点击按钮时，会调用 model_inference 函数，函数的输入是音频文件和语言选项，输出结果会显示在 text_outputs（文本框）中。

14. 启动应用

        demo.launch(share=True)

• demo.launch() 启动整个 Gradio 应用。share=True 表示会生成一个可共享的公网链接，用户可以通过这个链接访问该 Web 应用并测试功能。

总结
这个程序创建了一个 Web 应用，用户可以上传音频并选择语言，推理结果显示在文本框中。Gradio 提供了简洁易用的界面，允许快速构建并分享应用，适合测试、演示和模型部署。