#
瞭解接口類

在本節中，我們將仔細研究 `Interface` 類，並瞭解用於創建其的主要參數。

##
如何創建接口

您會注意到 `Interface` 類有 3 個必需參數：

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

這些參數是：

- `fn`: 由 Gradio 接口包裝的預測函數。 該函數可以接受一個或多個參數並返回一個或多個值
- `inputs`: 輸入組件類型。 Gradio 提供了許多預構建的組件，例如`"image"` 或`"mic"`。
- `outputs`: 輸出組件類型。 同樣，Gradio 提供了許多預構建的組件，例如 `“圖像”`或“標籤”`。

有關組件的完整列表，請參閱 Gradio 文檔。 每個預構建的組件都可以通過實例化該組件對應的類來定製。

例如，正如我們在 上一節 中看到的，您可以傳入一個 `Textbox(lines=7, label="Prompt")` 組件來創建一個包含 7 行和一個標籤的文本框，而不是將 `"textbox"` 傳遞給 `inputs` 參數。 讓我們看另一個例子，這次是一個 `Audio` 組件。

##
一個帶音頻的簡單示例

如前所述，Gradio 提供了許多不同的輸入和輸出。 因此，讓我們構建一個適用於音頻的“接口”。

在這個例子中，我們將構建一個音頻到音頻的函數，它需要一個音頻文件並簡單地反轉它。

我們將使用 `Audio` 組件作為輸入。 使用 `Audio` 組件時，您可以指定希望音頻的 `source` 是用戶上傳的文件還是用戶錄製聲音的麥克風。 在這種情況下，讓我們將其設置為“麥克風”。 只是為了好玩，我們會在我們的“音頻”中添加一個標籤，上面寫著“在這裡說話……”。

此外，我們希望將音頻作為 numpy 數組接收，以便我們可以輕鬆地“反轉”它。 所以我們將 `"type"` 設置為 `"numpy"`，它會傳遞輸入data 作為 (`sample_rate`, `data`) 的元組進入我們的函數。

我們還將使用 `Audio` 輸出組件，它可以自動將具有采樣率和 numpy 數據數組的元組渲染為可播放的音頻文件。 在這種情況下，我們不需要進行任何自定義，因此我們將使用字符串快捷方式“audio”。

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

上面的代碼會產生一個類似下面的界面（如果你的瀏覽器沒有 詢問您的麥克風權限， open the demo in a separate tab.)

您現在應該能夠錄製自己的聲音並聽到自己在反向說話 - 聽起來好怪👻!

##
處理多個輸入和輸出

假設我們有一個更復雜的函數，有多個輸入和輸出。在下面的示例中，我們有一個接受下拉索引、滑塊值和數字的函數，並返回一個音調的音頻樣本。

看看我們如何傳遞輸入和輸出組件列表，看看你能不能跟上正在發生的事情。

這裡的關鍵是當你通過時：

- 輸入組件列表，每個組件依次對應一個參數。
- 輸出組件列表，每個組件對應一個返回值。

下面的代碼片段顯示了三個輸入組件如何與 `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()

###
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 章中的那個部分。 接下來，我們將實現一個 `transcribe_audio()` 函數來處理音頻並返回轉錄。 最後，我們將把這個函數包裝在一個 `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()

如果您的瀏覽器沒有要求您提供麥克風權限，open the demo in a separate tab.

就是這樣！ 您現在可以使用此界面來轉錄音頻。 注意這裡 通過將 `optional` 參數作為 `True` 傳遞，我們允許用戶 提供麥克風或音頻文件（或兩者都不提供，但這會返回錯誤消息）。

繼續看看如何與他人分享您的界面！

< > Update on GitHub