9-Building_and_sharing_demos-2-Understanding_the_Interface_class

中英文对照学习，效果更佳！
原课程链接：https://huggingface.co/course/chapter9/3?fw=pt

Understanding the Interface class

了解接口类

In this section, we will take a closer look at the Interface class, and understand the
main parameters used to create one.

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

How to create an Interface

如何创建接口

You’ll notice that the Interface class has 3 required parameters:

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

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

`接口(fn，输入，输出，…)`

These parameters are:

这些参数是：

• fn: the prediction function that is wrapped by the Gradio interface. This function can take one or more parameters and return one or more values
• inputs: the input component type(s). Gradio provides many pre-built components such as"image" or "mic".
• outputs: the output component type(s). Again, Gradio provides many pre-built components e.g. "image" or "label".

For a complete list of components, see the Gradio docs . Each pre-built component can be customized by instantiating the class corresponding to the component.

`fn：GRadio接口封装的预测函数。此函数可以接受一个或多个参数，并返回一个或多个值inputs：输入组件类型。GRadio提供了许多预置组件，如“镜像”或“麦克风”。outputs：输出组件类型。同样，GRadio提供了许多预构建的组件，如“镜像”或“标签”`。有关组件的完整列表，请参阅GRadio文档。可以通过实例化与组件对应的类来自定义每个预构建的组件。

For example, as we saw in the previous section,
instead of passing in "textbox" to the inputs parameter, you can pass in a Textbox(lines=7, label="Prompt") component to create a textbox with 7 lines and a label.

例如，正如我们在上一节中看到的，您可以不将“TextBox”传递给inputs参数，而是传入一个Textbox(Line=7，Label=“Prompt”)组件来创建一个7行的TextBox和一个标签。

Let’s take a look at another example, this time with an Audio component.

让我们看看另一个例子，这一次使用了一个Audio组件。

A simple example with audio

一个简单的音频示例

As mentioned earlier, Gradio provides many different inputs and outputs.
So let’s build an Interface that works with audio.

如前所述，GRadio提供了许多不同的输入和输出。因此，让我们构建一个可以处理音频的`接口‘。

In this example, we’ll build an audio-to-audio function that takes an
audio file and simply reverses it.

在本例中，我们将构建一个音频到音频的函数，该函数获取音频文件并简单地将其反转。

We will use for the input the Audio component. When using the Audio component,
you can specify whether you want the source of the audio to be a file that the user
uploads or a microphone that the user records their voice with. In this case, let’s
set it to a "microphone". Just for fun, we’ll add a label to our Audio that says
“Speak here…“.

我们将使用Audio组件作为输入。在使用Audio组件时，您可以指定音频的源是用户上传的文件，还是用户录制语音的麦克风。在本例中，我们将其设置为麦克风‘。只是为了好玩，我们会在我们的`Audio‘中添加一个标签，上面写着“Stop Here…“。

In addition, we’d like to receive the audio as a numpy array so that we can easily
“reverse” it. So we’ll set the "type" to be "numpy", which passes the input
data as a tuple of (sample_rate, data) into our function.

此外，我们希望以NumPy数组的形式接收音频，这样我们就可以轻松地“反转”它。因此，我们将“type”设置为“NumPy”，它将输入数据作为(Sample_rate，data)的元组传递给我们的函数。

We will also use the Audio output component which can automatically
render a tuple with a sample rate and numpy array of data as a playable audio file.
In this case, we do not need to do any customization, so we will use the string
shortcut "audio".

我们还将使用Audio‘输出组件，它可以自动将具有采样率和NumPy数组的元组呈现为可播放的音频文件。在这种情况下，我们不需要做任何定制，所以我们将使用字符串快捷方式“音频”`。

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()

The code above will produce an interface like the one below (if your browser doesn’t
ask you for microphone permissions, open the demo in a separate tab.)

上面的代码将产生如下所示的界面(如果您的浏览器没有要求您提供麦克风权限，请在单独的选项卡中打开演示)。

You should now be able to record your voice and hear yourself speaking in reverse - spooky 👻!

你现在应该能够录制你的声音，并听到你自己在反转-幽灵👻！

Handling multiple inputs and outputs

处理多个输入和输出

Let’s say we had a more complicated function, with multiple inputs and outputs.
In the example below, we have a function that takes a dropdown index, a slider value, and number,
and returns an audio sample of a musical tone.

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

Take a look how we pass a list of input and output components,
and see if you can follow along what’s happening.

看一看我们如何传递输入和输出组件的列表，并看看您是否可以跟踪正在发生的事情。

The key here is that when you pass:

这里的关键是当你通过的时候：

• a list of input components, each component corresponds to a parameter in order.
• a list of output coponents, each component corresponds to a returned value.

The code snippet below shows how three input components line up with the three arguments of the generate_tone() function:

输入组件列表，每个组件按顺序对应一个参数。输出组件列表，每个组件对应一个返回值。下面的代码片段显示了三个输入组件如何与Generate_Tone()函数的三个参数对齐：

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()

The launch() method

`Launch()`方法

So far, we have used the launch() method to launch the interface, but we
haven’t really discussed what it does.

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

By default, the launch() method will launch the demo in a web server that
is running locally. If you are running your code in a Jupyter or Colab notebook, then
Gradio will embed the demo GUI in the notebook so you can easily use it.

默认情况下，Launch()方法会在本地运行的Web服务器上启动demo。如果你在Jupyter或Colab笔记本上运行你的代码，那么GRadio会将演示图形用户界面嵌入到笔记本中，这样你就可以轻松地使用它了。

You can customize the behavior of launch() through different parameters:

您可以通过不同的参数自定义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!

We’ll cover the share parameter in a lot more detail in the next section!

`inline-是否在Python笔记本上以内联方式显示界面。inBrowser-是否在默认浏览器的新选项卡中自动启动界面。Shar-是否从您的计算机为该界面创建可公开共享的链接。有点像Google Drive链接！我们将在下一节中更详细地介绍share‘参数！

✏️ Let’s apply it!

✏️让我们来应用它吧！

Let’s build an interface that allows you to demo a speech-recognition model.
To make it interesting, we will accept either a mic input or an uploaded file.

让我们构建一个允许您演示语音识别模型的界面。为了让它更有趣，我们将接受麦克风输入或上传的文件。

As usual, we’ll load our speech recognition model using the pipeline() function from 🤗 Transformers.
If you need a quick refresher, you can go back to that section in Chapter 1. Next, we’ll implement a transcribe_audio() function that processes the audio and returns the transcription. Finally, we’ll wrap this function in an Interface with the Audio components for the inputs and just text for the output. Altogether, the code for this application is the following:

像往常一样，我们将使用🤗Transformers中的Pipeline()函数加载我们的语音识别模型。如果您需要快速刷新，可以返回到第1章中的那一节。接下来，我们将实现一个处理音频并返回转录的转录_音频()函数。最后，我们将该函数包装在一个Interface中，其中Audio组件用于输入，而文本用于输出。总的来说，此应用程序的代码如下所示：

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()

If your browser doesn’t ask you for microphone permissions, open the demo in a separate tab.

如果您的浏览器没有要求您提供麦克风权限，请在单独的选项卡中打开演示。

That’s it! You can now use this interface to transcribe audio. Notice here that
by passing in the optional parameter as True, we allow the user to either
provide a microphone or an audio file (or neither, but that will return an error message).

就这样!您现在可以使用此接口转录音频。注意，通过将optional参数作为True传入，我们允许用户提供麦克风或音频文件(或者两者都不提供，但这将返回错误消息)。

Keep going to see how to share your interface with others!

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