course/pr_1213/my/chapter9/3.md

# Interface class ကို နားလည်ခြင်း[[understanding-the-interface-class]]

ဒီအပိုင်းမှာ၊ ကျွန်တော်တို့ဟာ `Interface` class ကို ပိုပြီး နက်နက်နဲနဲ လေ့လာကြည့်ပြီး၊ အဲဒါကို ဖန်တီးရာမှာ အသုံးပြုတဲ့ အဓိက parameters တွေကို နားလည်အောင် ကြိုးစားပါမယ်။

## Interface တစ်ခုကို ဘယ်လို ဖန်တီးမလဲ[[how-to-create-an-interface]]

`Interface` class မှာ လိုအပ်တဲ့ parameters ၃ ခု ပါဝင်တာကို သင်သတိထားမိပါလိမ့်မယ်။

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

ဒီ parameters တွေကတော့-

-   `fn`: Gradio interface က wrap လုပ်ထားတဲ့ prediction function ပါ။ ဒီ function က parameters တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုတာကို ယူနိုင်ပြီး value တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုတာကို ပြန်ပေးနိုင်ပါတယ်။
-   `inputs`: input component အမျိုးအစား (များ) ပါ။ Gradio က `"image"` ဒါမှမဟုတ် `"mic"` လိုမျိုး ကြိုတင်တည်ဆောက်ထားတဲ့ components များစွာကို ပံ့ပိုးပေးပါတယ်။
-   `outputs`: output component အမျိုးအစား (များ) ပါ။ ဒီနေရာမှာလည်း Gradio က `"image"` ဒါမှမဟုတ် `"label"` လိုမျိုး ကြိုတင်တည်ဆောက်ထားတဲ့ components များစွာကို ပံ့ပိုးပေးပါတယ်။

components တွေရဲ့ အပြည့်အစုံစာရင်းအတွက် [Gradio docs ကို ကြည့်ပါ](https://gradio.app/docs)။ ကြိုတင်တည်ဆောက်ထားတဲ့ component တစ်ခုစီကို component နဲ့ သက်ဆိုင်တဲ့ class ကို instantiate လုပ်ခြင်းဖြင့် စိတ်ကြိုက်ပြင်ဆင်နိုင်ပါတယ်။

ဥပမာ၊ [ယခင်အပိုင်း](/course/chapter9/2) မှာ ကျွန်တော်တို့ တွေ့ခဲ့ရတဲ့အတိုင်း၊ `inputs` parameter ကို `"textbox"` အဖြစ် ပေးမယ့်အစား၊ 7 lines နဲ့ label ပါတဲ့ textbox တစ်ခု ဖန်တီးဖို့ `Textbox(lines=7, label="Prompt")` component ကို ပေးနိုင်ပါတယ်။

အခြားဥပမာတစ်ခုကို ကြည့်ရအောင်၊ ဒီတစ်ခါတော့ `Audio` component နဲ့ပါ။

## Audio နဲ့ ရိုးရှင်းတဲ့ ဥပမာတစ်ခု[[a-simple-example-with-audio]]

အရင်က ပြောခဲ့သလိုပဲ၊ Gradio က input နဲ့ output အမျိုးအစားများစွာကို ပံ့ပိုးပေးပါတယ်။
ဒါကြောင့် audio နဲ့ အလုပ်လုပ်တဲ့ `Interface` တစ်ခုကို တည်ဆောက်ကြရအောင်။

ဒီဥပမာမှာ၊ audio file တစ်ခုကို ယူပြီး ရိုးရှင်းစွာ ပြောင်းပြန်လှန်ပေးတဲ့ audio-to-audio function တစ်ခုကို ကျွန်တော်တို့ တည်ဆောက်ပါမယ်။

input အတွက် `Audio` component ကို အသုံးပြုပါမယ်။ `Audio` component ကို အသုံးပြုတဲ့အခါ၊ audio ရဲ့ `source` ကို user က upload လုပ်တဲ့ file ဒါမှမဟုတ် user က အသံသွင်းတဲ့ microphone ဖြစ်မလားဆိုတာ သတ်မှတ်နိုင်ပါတယ်။ ဒီအခြေအနေမှာ၊ `microphone` ကို သတ်မှတ်ကြရအောင်။ ပျော်စရာအနေနဲ့၊ ကျွန်တော်တို့ရဲ့ `Audio` မှာ "Speak here..." လို့ ပြောတဲ့ label တစ်ခု ထည့်ပါမယ်။

ဒါ့အပြင်၊ ကျွန်တော်တို့ အသံကို numpy array အဖြစ် လက်ခံချင်ပါတယ်။ ဒါမှ အဲဒါကို အလွယ်တကူ "reverse" လုပ်နိုင်မှာပါ။ ဒါကြောင့် input data ကို (`sample_rate`, `data`) tuple အဖြစ် ကျွန်တော်တို့ function ထဲကို ထည့်ပေးမယ့် `"type"` ကို `"numpy"` အဖြစ် သတ်မှတ်ပါမယ်။

sample rate နဲ့ data ရဲ့ numpy array ပါတဲ့ tuple တစ်ခုကို အလိုအလျောက်ဖွင့်နိုင်တဲ့ audio file အဖြစ် render လုပ်ပေးနိုင်တဲ့ `Audio` output component ကိုလည်း အသုံးပြုပါမယ်။ ဒီအခြေအနေမှာ၊ စိတ်ကြိုက်ပြင်ဆင်မှု (customization) လုပ်ဖို့ မလိုအပ်တဲ့အတွက် `"audio"` string shortcut ကို အသုံးပြုပါမယ်။

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

အထက်ပါ code က အောက်ပါအတိုင်း interface တစ်ခုကို ထုတ်ပေးပါလိမ့်မယ် (သင့် browser က microphone permissions အတွက် မမေးရင်၊ demo ကို သီးခြား tab တစ်ခုမှာ ဖွင့်ပါ)။

အခုဆိုရင် သင်ဟာ သင့်အသံကို မှတ်တမ်းတင်ပြီး ပြောင်းပြန်ပြောနေတာကို ကြားနိုင်ပါပြီ — ကြောက်စရာကောင်းလိုက်တာ 👻!

## Multiple Inputs နှင့် Outputs များကို ကိုင်တွယ်ခြင်း[[handling-multiple-inputs-and-outputs]]

ကျွန်တော်တို့မှာ multiple inputs နဲ့ outputs တွေပါတဲ့ ပိုရှုပ်ထွေးတဲ့ function တစ်ခုရှိတယ်လို့ ဆိုကြပါစို့။
အောက်ပါဥပမာမှာ၊ dropdown index တစ်ခု၊ slider value တစ်ခုနဲ့ number တစ်ခုကို ယူပြီး musical tone ရဲ့ audio sample ကို ပြန်ပေးတဲ့ function တစ်ခု ကျွန်တော်တို့မှာ ရှိပါတယ်။

input နဲ့ output components တွေရဲ့ list ကို ဘယ်လိုပေးရလဲဆိုတာ ကြည့်ပြီး ဘာတွေဖြစ်နေလဲဆိုတာကို နားလည်အောင် ကြိုးစားကြည့်ပါ။

ဒီနေရာမှာ အဓိကအချက်ကတော့ သင်ပေးတဲ့အခါ-
* input components တွေရဲ့ list တစ်ခုစီဟာ parameter တစ်ခုစီနဲ့ အစီအစဉ်အတိုင်း ကိုက်ညီပါတယ်။
* output components တွေရဲ့ list တစ်ခုစီဟာ ပြန်ပေးတဲ့ value တစ်ခုစီနဲ့ ကိုက်ညီပါတယ်။

အောက်ပါ code snippet က input components သုံးခုဟာ `generate_tone()` function ရဲ့ arguments သုံးခုနဲ့ ဘယ်လို တန်းစီနေလဲဆိုတာကို ပြသထားပါတယ်။

```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.Number(value=1, label="Duration in seconds"),
    ],
    "audio",
).launch()
```

### `launch()` method[[the-launch-method]]

ဒီအထိတော့ ကျွန်တော်တို့ `launch()` method ကို interface ကို launch လုပ်ဖို့ အသုံးပြုခဲ့ကြပေမယ့်၊ ဒါက ဘာလုပ်လဲဆိုတာကို သေချာမဆွေးနွေးရသေးပါဘူး။

default အားဖြင့်၊ `launch()` method က demo ကို local မှာ run နေတဲ့ web server တစ်ခုထဲမှာ launch လုပ်ပါလိမ့်မယ်။ သင် Jupyter ဒါမှမဟုတ် Colab notebook ထဲမှာ code ကို run နေတယ်ဆိုရင်၊ Gradio က demo GUI ကို notebook ထဲမှာ embed လုပ်ပါလိမ့်မယ်။ ဒါမှ သင်အလွယ်တကူ အသုံးပြုနိုင်မှာပါ။

`launch()` ရဲ့ behavior ကို parameters အမျိုးမျိုးကနေတစ်ဆင့် စိတ်ကြိုက်ပြင်ဆင်နိုင်ပါတယ်။

-   `inline` - Python notebooks တွေမှာ interface ကို inline ပြသမလား။
-   `inbrowser` - default browser မှာ interface ကို tab အသစ်တစ်ခုနဲ့ အလိုအလျောက် launch လုပ်မလား။
-   `share` - သင့်ကွန်ပျူတာကနေ interface အတွက် လူသိရှင်ကြားမျှဝေနိုင်တဲ့ link တစ်ခုကို ဖန်တီးမလား။ Google Drive link နဲ့ ဆင်တူပါတယ်။

`share` parameter အကြောင်းကို နောက်အပိုင်းမှာ ပိုပြီး အသေးစိတ် ဆွေးနွေးသွားပါမယ်။

## ✏️ စတင်အသုံးပြုကြစို့![[lets-apply-it]]

**speech-recognition** model တစ်ခုကို demo လုပ်ခွင့်ပေးမယ့် interface တစ်ခုကို တည်ဆောက်ကြရအောင်။
စိတ်ဝင်စားဖို့ကောင်းအောင်၊ ကျွန်တော်တို့ mic input ဒါမှမဟုတ် upload လုပ်ထားတဲ့ file တစ်ခုခုကို လက်ခံပါမယ်။

ပုံမှန်အတိုင်းပဲ၊ ကျွန်တော်တို့ speech recognition model ကို 🤗 Transformers က `pipeline()` function ကို အသုံးပြုပြီး load လုပ်ပါမယ်။
လျင်မြန်စွာ ပြန်လည်လေ့လာချင်တယ်ဆိုရင် [Chapter 1 ရဲ့ အဲဒီအပိုင်း](/course/chapter1/3) ကို ပြန်သွားနိုင်ပါတယ်။ နောက်တစ်ခုကတော့၊ audio ကို process လုပ်ပြီး transcription ကို ပြန်ပေးမယ့် `transcribe_audio()` function ကို ကျွန်တော်တို့ implement လုပ်ပါမယ်။ နောက်ဆုံးအနေနဲ့၊ ဒီ function ကို `Audio` components တွေနဲ့ input အတွက်၊ text ကို output အတွက် အသုံးပြုပြီး `Interface` တစ်ခုထဲမှာ wrap လုပ်ပါမယ်။ စုစုပေါင်းအားဖြင့်၊ ဒီ application အတွက် code က အောက်ပါအတိုင်းပါ-

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

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

def transcribe_audio(audio):
    transcription = model(audio)["text"]
    return transcription

gr.Interface(
    fn=transcribe_audio,
    inputs=gr.Audio(type="filepath"),
    outputs="text",
).launch()
```

သင့် browser က microphone permissions အတွက် မမေးရင်၊ demo ကို သီးခြား tab တစ်ခုမှာ ဖွင့်ပါ။

ဒါပါပဲ! ဒီ interface ကို အသုံးပြုပြီး audio ကို transcribe လုပ်နိုင်ပါပြီ။ ဒီနေရာမှာ `optional` parameter ကို `True` အဖြစ် ပေးခြင်းဖြင့်၊ user ကို microphone ဒါမှမဟုတ် audio file (ဒါမှမဟုတ် နှစ်ခုလုံးမဟုတ်ဘဲ၊ ဒါက error message ပြပါလိမ့်မယ်) တစ်ခုခုကို ပေးခွင့်ပြုတာကို သတိပြုပါ။

သင့် interface ကို တခြားသူတွေနဲ့ ဘယ်လိုမျှဝေမလဲဆိုတာ ကြည့်ဖို့ ဆက်လုပ်ပါ။

## ဝေါဟာရ ရှင်းလင်းချက် (Glossary)

*   **`Interface` Class**: Gradio library ၏ အဓိက class ဖြစ်ပြီး Machine Learning model များအတွက် web-based demo များကို ဖန်တီးရန် အသုံးပြုသည်။
*   **Parameters**: Function သို့မဟုတ် class တစ်ခု၏ လုပ်ဆောင်ချက်ကို ပြောင်းလဲနိုင်သော inputs များ။
*   **Prediction Function (`fn`)**: Gradio Interface မှ wrap လုပ်ထားသော Python function ဖြစ်ပြီး input ကိုယူကာ output ကို ပြန်ပေးသည်။ ၎င်းသည် ML model ၏ core logic ကို ကိုယ်စားပြုသည်။
*   **Input Component Type(s)**: Gradio Interface တွင် အသုံးပြုသူထံမှ input များကို ရယူရန် အသုံးပြုသော UI elements အမျိုးအစားများ (ဥပမာ- `gr.Image`, `gr.Mic`, `gr.Textbox`)။
*   **Output Component Type(s)**: Gradio Interface တွင် model ၏ output များကို အသုံးပြုသူအား ပြသရန် အသုံးပြုသော UI elements အမျိုးအစားများ (ဥပမာ- `gr.Image`, `gr.Label`, `gr.Audio`)။
*   **Pre-built Components**: Gradio library မှ ကြိုတင်ထောက်ပံ့ပေးထားသော UI components များ။
*   **Instantiate**: class တစ်ခုမှ object တစ်ခုကို ဖန်တီးခြင်း။
*   **`Textbox` Component**: Gradio ၏ input component တစ်မျိုးဖြစ်ပြီး အသုံးပြုသူအား စာသားများ ရိုက်ထည့်ရန် ခွင့်ပြုသည်။
*   **`lines` Parameter**: `Textbox` component တွင် ပြသနိုင်သော စာကြောင်းအရေအတွက်ကို သတ်မှတ်သည်။
*   **`label` Parameter**: component ၏ ဘေးတွင် ပြသရန် စာသား label ကို သတ်မှတ်သည်။
*   **`Audio` Component**: Gradio ၏ input သို့မဟုတ် output component တစ်မျိုးဖြစ်ပြီး အသံဖိုင်များ သို့မဟုတ် microphone input များနှင့် အလုပ်လုပ်ရန် အသုံးပြုသည်။
*   **`source` Parameter**: `Audio` component ၏ input source ကို သတ်မှတ်သည်။ `"file"` (ဖိုင် upload) သို့မဟုတ် `"microphone"` (မိုက်ခရိုဖုန်းမှ မှတ်တမ်းတင်ခြင်း) ဖြစ်နိုင်သည်။
*   **Numpy Array**: Python ၏ NumPy library မှ multi-dimensional array object ဖြစ်ပြီး သိပ္ပံနည်းကျ တွက်ချက်မှုများအတွက် အသုံးများသည်။
*   **`type` Parameter**: input သို့မဟုတ် output component ၏ ဒေတာအမျိုးအစားကို သတ်မှတ်သည်။ ဥပမာ- `"numpy"` သည် အသံဒေတာကို (`sample_rate`, `data`) tuple အဖြစ် လက်ခံရန် သတ်မှတ်သည်။
*   **`sample_rate`**: တစ်စက္ကန့်လျှင် အသံနမူနာ မည်မျှယူသည်ကို ဖော်ပြသော အကြိမ်ရေ (ဥပမာ- 48000 Hz)။
*   **`data`**: အသံဒေတာ၏ NumPy array။
*   **`np.flipud()`**: NumPy function တစ်ခုဖြစ်ပြီး array ၏ အတန်းများကို ပြောင်းပြန်လှန်ပေးသည်။
*   **String Shortcut**: component class ကို တိုက်ရိုက် instantiate မလုပ်ဘဲ string တစ်ခုတည်းဖြင့် component အမျိုးအစားကို သတ်မှတ်ခြင်း (ဥပမာ- `"audio"`)။
*   **`launch()` Method**: Gradio Interface ကို web server တစ်ခုအဖြစ် စတင်လုပ်ဆောင်သည်။
*   **Jupyter Notebook**: code, text, images, နှင့် mathematical equations တို့ကို ပေါင်းစပ်နိုင်သော interactive computing environment။
*   **Colab Notebook (Google Colab)**: Google မှ ပံ့ပိုးပေးထားသော cloud-based Jupyter Notebook environment တစ်ခု။
*   **`inline` Parameter (for `launch()`)**: Gradio Interface ကို notebook ထဲတွင် တိုက်ရိုက်ပြသမလား မပြသဘူးလား ထိန်းချုပ်သည်။
*   **`inbrowser` Parameter (for `launch()`)**: Interface ကို default web browser တွင် tab အသစ်တစ်ခုဖြင့် အလိုအလျောက်ဖွင့်မလား မဖွင့်ဘူးလား ထိန်းချုပ်သည်။
*   **`share` Parameter (for `launch()`)**: Interface အတွက် အများပြည်သူ ဝင်ရောက်ကြည့်ရှုနိုင်သော shareable link တစ်ခု ဖန်တီးမလား မဖန်တီးဘူးလား ထိန်းချုပ်သည်။
*   **Speech Recognition Model**: အသံပြောဆိုမှုများကို စာသားအဖြစ် ပြောင်းလဲပေးသော Machine Learning model။
*   **`pipeline()` Function (🤗 Transformers)**: Hugging Face Transformers library မှာ ပါဝင်တဲ့ လုပ်ဆောင်ချက်တစ်ခုဖြစ်ပြီး မော်ဒယ်တွေကို သီးခြားလုပ်ငန်းတာဝန်များအတွက် အသုံးပြုရလွယ်ကူအောင် ပြုလုပ်ပေးပါတယ်။
*   **`automatic-speech-recognition` (ASR) Pipeline**: အသံပြောဆိုမှုကို စာသားအဖြစ် ပြောင်းလဲပေးသော pipeline အမျိုးအစား။
*   **`transcribe_audio()` Function**: အသံကို စီမံဆောင်ရွက်ပြီး စာသားကူးယူမှုကို ပြန်ပေးသော function။
*   **Transcription**: အသံပြောဆိုမှု၏ စာသားကူးယူမှု။
*   **`filepath`**: ဖိုင်တစ်ခု၏ လမ်းကြောင်း (path) ကို ရည်ညွှန်းသည်။