# 了解接口类 [[了解接口类]]

<DocNotebookDropdown
  classNames="absolute z-10 right-0 top-0"
  options={[
    {label: "Google Colab", value: "https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/chapter9/section3.ipynb"},
    {label: "Aws Studio", value: "https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/chapter9/section3.ipynb"},
]} />

在本节中，我们将仔细研究 `Interface` 类，并了解用于创建其的主要参数。

## 如何创建接口 [[如何创建接口]]

您会注意到 `Interface` 类有 3 个必需参数：

`Interface(fn, inputs, outputs, ...)`

这些参数是：

  - `fn`: 由 Gradio 接口包装的预测函数。 该函数可以接受一个或多个参数并返回一个或多个值
  - `inputs`: 输入组件类型。 Gradio 提供了许多预构建的组件，例如`"image"` 或`"mic"`。
  - `outputs`: 输出组件类型。 同样，Gradio 提供了许多预构建的组件，例如 `“图像”`或“标签”`。

有关组件的完整列表，[请参阅 Gradio 文档](https://gradio.app/docs)。 每个预构建的组件都可以通过实例化该组件对应的类来定制。

例如，正如我们在 [上一节](/course/chapter9/2) 中看到的，您可以传入一个 `Textbox(lines=7, label="Prompt")` 组件来创建一个包含 7 行和一个标签的文本框，而不是将 `"textbox"` 传递给 `inputs` 参数。
让我们看另一个例子，这次是一个 `Audio` 组件。

## 一个带音频的简单示例 [[一个带音频的简单示例]]

如前所述，Gradio 提供了许多不同的输入和输出。
因此，让我们构建一个适用于音频的“接口”。

在这个例子中，我们将构建一个音频到音频的函数，它需要一个音频文件并简单地反转它。

我们将使用 `Audio` 组件作为输入。 使用 `Audio` 组件时，您可以指定希望音频的 `source` 是用户上传的文件还是用户录制声音的麦克风。 在这种情况下，让我们将其设置为“麦克风”。 只是为了好玩，我们会在我们的“音频”中添加一个标签，上面写着“在这里说话……”。

此外，我们希望将音频作为 numpy 数组接收，以便我们可以轻松地“反转”它。 所以我们将 `"type"` 设置为 `"numpy"`，它会传递输入data 作为 (`sample_rate`, `data`) 的元组进入我们的函数。

我们还将使用 `Audio` 输出组件，它可以自动将具有采样率和 numpy 数据数组的元组渲染为可播放的音频文件。 在这种情况下，我们不需要进行任何自定义，因此我们将使用字符串快捷方式“audio”。


```py
import numpy as np
import gradio as gr


def reverse_audio(audio):
    sr, data = audio
    reversed_audio = (sr, np.flipud(data))
    return reversed_audio


mic = gr.Audio(source="microphone", type="numpy", label="Speak here...")
gr.Interface(reverse_audio, mic, "audio").launch()
```

上面的代码会产生一个类似下面的界面（如果你的浏览器没有
询问您的麦克风权限， <a href="https://huggingface.co/spaces/course-demos/audio-reverse" target="_blank">open the demo in  a separate tab</a>.)

<iframe src="https://course-demos-audio-reverse.hf.space" frameBorder="0" height="250" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>

您现在应该能够录制自己的声音并听到自己在反向说话 - 怪异 👻!

## 处理多个输入和输出 [[处理多个输入和输出]]

假设我们有一个更复杂的函数，有多个输入和输出。在下面的示例中，我们有一个接受下拉索引、滑块值和数字的函数，并返回一个音调的音频样本。

看看我们如何传递输入和输出组件列表，看看你能不能跟上正在发生的事情。

这里的关键是当你通过时：
* 输入组件列表，每个组件依次对应一个参数。
* 输出组件列表，每个组件对应一个返回值。

下面的代码片段显示了三个输入组件如何与 `generate_tone()` 函数的三个参数对齐：

```py
import numpy as np
import gradio as gr

notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]


def generate_tone(note, octave, duration):
    sr = 48000
    a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
    frequency = a4_freq * 2 ** (tones_from_a4 / 12)
    duration = int(duration)
    audio = np.linspace(0, duration, duration * sr)
    audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
    return (sr, audio)


gr.Interface(
    generate_tone,
    [
        gr.Dropdown(notes, type="index"),
        gr.Slider(minimum=4, maximum=6, step=1),
        gr.Textbox(type="number", value=1, label="Duration in seconds"),
    ],
    "audio",
).launch()
```

<iframe src="https://course-demos-generate-tone.hf.space" frameBorder="0" height="450" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>


### `launch()` 方法 [[`launch()` 方法]]

到目前为止，我们已经使用了`launch()`方法来启动界面，但是我们
还没有真正讨论过它的作用。

默认情况下，`launch()` 方法将在 Web 服务器中启动演示正在本地运行。 如果您在 Jupyter 或 Colab 笔记本中运行代码，那么Gradio 会将演示 GUI 嵌入到笔记本中，以便您轻松使用它。

您可以通过不同的参数自定义 `launch()` 的行为：

  - `inline` - whether to display the interface inline on Python notebooks.
  - `inbrowser` - whether to automatically launch the interface in a new tab on the default browser.
  - `share` - whether to create a publicly shareable link from your computer for the interface. Kind of like a Google Drive link!

我们将在下一节中更详细地介绍 `share` 参数！

## ✏️ 让我们应用它！ [[✏️ 让我们应用它！]]

让我们构建一个界面，让您演示 **speech-recognition** 模型。
为了让它变得有趣，我们将接受 *or* 麦克风输入或上传的文件。

像往常一样，我们将使用 🤗 Transformers 中的 `pipeline()` 函数加载我们的语音识别模型。如果您需要快速复习，您可以返回 [第 1 章中的那个部分](/course/chapter1/3)。 接下来，我们将实现一个 `transcribe_audio()` 函数来处理音频并返回转录。 最后，我们将把这个函数包装在一个 `Interface` 中，其中 `Audio` 组件用于输入，只有文本用于输出。 总而言之，此应用程序的代码如下：

```py
from transformers import pipeline
import gradio as gr

model = pipeline("automatic-speech-recognition")


def transcribe_audio(mic=None, file=None):
    if mic is not None:
        audio = mic
    elif file is not None:
        audio = file
    else:
        return "You must either provide a mic recording or a file"
    transcription = model(audio)["text"]
    return transcription


gr.Interface(
    fn=transcribe_audio,
    inputs=[
        gr.Audio(source="microphone", type="filepath", optional=True),
        gr.Audio(source="upload", type="filepath", optional=True),
    ],
    outputs="text",
).launch()
```

如果您的浏览器没有要求您提供麦克风权限，<a href="https://huggingface.co/spaces/course-demos/audio-reverse" target="_blank">open the demo in a separate tab</a>.

<iframe src="https://course-demos-asr.hf.space" frameBorder="0" height="550" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe>


就是这样！ 您现在可以使用此界面来转录音频。 注意这里
通过将 `optional` 参数作为 `True` 传递，我们允许用户
提供麦克风或音频文件（或两者都不提供，但这会返回错误消息）。

继续看看如何与他人分享您的界面！