Demos များကို တခြားသူများနှင့် မျှဝေခြင်း

အခု သင် demo တစ်ခု တည်ဆောက်ပြီးပြီဆိုတော့၊ ဒါကို တခြားသူတွေနဲ့ မျှဝေချင်ပါလိမ့်မယ်။ Gradio demos တွေကို နည်းလမ်းနှစ်မျိုးနဲ့ မျှဝေနိုင်ပါတယ်၊ ယာယီ share link ကို အသုံးပြုခြင်း ဒါမှမဟုတ် Spaces ပေါ်မှာ အမြဲတမ်း hosting လုပ်ခြင်းတို့ ဖြစ်ပါတယ်။

ဒီနည်းလမ်းနှစ်ခုလုံးကို မကြာမီ ကျွန်တော်တို့ ဖော်ပြပေးပါမယ်။ ဒါပေမယ့် သင့် demo ကို မမျှဝေခင်၊ အဲဒါကို ပိုပြီး ကောင်းအောင် ပြင်ဆင်ချင်ပါလိမ့်မယ် 💅။

သင့် Gradio Demo ကို ပိုမိုကောင်းမွန်အောင် ပြင်ဆင်ခြင်း:

သင့် demo မှာ ထပ်ဆောင်းအကြောင်းအရာတွေ ထည့်ဖို့အတွက်၊ Interface class က optional parameters အချို့ကို ထောက်ပံ့ပေးပါတယ်။

• title: သင့် demo အတွက် title တစ်ခု ပေးနိုင်ပါတယ်။ ဒါက input နဲ့ output components တွေရဲ့ အပေါ်မှာ ပေါ်လာပါလိမ့်မယ်။
• description: interface အတွက် description တစ်ခု (text, Markdown, သို့မဟုတ် HTML နဲ့) ပေးနိုင်ပါတယ်။ ဒါက input နဲ့ output components တွေရဲ့ အပေါ်ဘက်၊ title အောက်မှာ ပေါ်လာပါလိမ့်မယ်။
• article: interface ကို ရှင်းပြတဲ့ (text, Markdown, သို့မဟုတ် HTML နဲ့) ပိုမိုကျယ်ပြန့်တဲ့ article တစ်ခုကိုလည်း ရေးနိုင်ပါတယ်။ ဒါကို ပေးထားရင် input နဲ့ output components တွေရဲ့ အောက်မှာ ပေါ်လာပါလိမ့်မယ်။
• theme: default colors တွေကို မကြိုက်ဘူးလား။ default, huggingface, grass, peach တို့ထဲက တစ်ခုကို အသုံးပြုဖို့ theme ကို သတ်မှတ်နိုင်ပါတယ်။ dark- prefix ကိုလည်း ထည့်နိုင်ပါတယ် (ဥပမာ- dark-peach က dark theme အတွက် ဒါမှမဟုတ် default dark theme အတွက် dark ကိုပဲ အသုံးပြုနိုင်ပါတယ်)။
• examples: သင့် demo ကို အသုံးပြုရ ပိုမိုလွယ်ကူအောင် function အတွက် ဥပမာ input အချို့ကို ပေးနိုင်ပါတယ်။ ဒါတွေက UI components တွေရဲ့ အောက်မှာ ပေါ်လာပြီး interface ကို ဖြည့်စွက်ဖို့ အသုံးပြုနိုင်ပါတယ်။ ဒါတွေကို nested list အဖြစ် ပေးသင့်ပါတယ်။ အပြင်ဘက် list က samples တွေ ပါဝင်ပြီး၊ အတွင်းဘက် list တစ်ခုစီမှာ input component တစ်ခုစီနဲ့ ကိုက်ညီတဲ့ input တစ်ခုစီ ပါဝင်ပါတယ်။
• live: သင့် demo ကို “live” ဖြစ်စေချင်တယ်ဆိုရင်၊ ဆိုလိုတာက input ပြောင်းလဲတိုင်း သင့် model က ပြန် run စေချင်တယ်ဆိုရင်၊ live=True လို့ သတ်မှတ်နိုင်ပါတယ်။ ဒါက မြန်ဆန်တဲ့ models တွေနဲ့ အသုံးပြုဖို့ သင့်လျော်ပါတယ် (ဒီအပိုင်းရဲ့ အဆုံးမှာ ဥပမာတစ်ခုကို ကျွန်တော်တို့ တွေ့ရပါလိမ့်မယ်) အထက်ပါ options တွေကို အသုံးပြုပြီး၊ ကျွန်တော်တို့ဟာ ပိုပြီး ပြည့်စုံတဲ့ interface တစ်ခုကို ရရှိပါပြီ။ Rick နဲ့ Morty နဲ့ စကားပြောနိုင်အောင် အောက်ပါ code ကို run ပါ။

title = "Rick ကို မေးခွန်းမေးပါ"
description = """
ဒီ bot ကို Rick နဲ့ Morty ၏ dialogues များအပေါ် အခြေခံပြီး မေးခွန်းများဖြေဆိုရန် လေ့ကျင့်ထားပါသည်။ Rick ကို ဘာမဆို မေးမြန်းလိုက်ပါ။
<img src="https://huggingface.co/spaces/course-demos/Rick_and_Morty_QA/resolve/main/rick.png" width=200px>
"""

article = "ဒီ demo က အခြေခံထားတဲ့ [မူရင်း Rick and Morty Bot](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) ကို ကြည့်ရှုပါ။"

gr.Interface(
    fn=predict,
    inputs="textbox",
    outputs="text",
    title=title,
    description=description,
    article=article,
    examples=[["What are you doing?"], ["Where should we time travel to?"]],
).launch()

အထက်ပါ options တွေကို အသုံးပြုပြီး၊ ကျွန်တော်တို့ဟာ ပိုပြီး ပြည့်စုံတဲ့ interface တစ်ခုကို ရရှိပါပြီ။ အောက်ပါ interface ကို စမ်းသပ်ကြည့်ပါ။

သင့် Demo ကို ယာယီ Links ဖြင့် မျှဝေခြင်း

အခု ကျွန်တော်တို့ machine learning model ရဲ့ demo တစ်ခုကို တည်ဆောက်ပြီးပြီဆိုတော့၊ ကျွန်တော်တို့ interface ရဲ့ link ကို ဘယ်လို လွယ်ကူစွာ မျှဝေရမလဲဆိုတာ လေ့လာကြရအောင်။ launch() method မှာ share=True လို့ သတ်မှတ်ခြင်းဖြင့် Interfaces တွေကို အလွယ်တကူ အများပြည်သူသိအောင် မျှဝေနိုင်ပါတယ်-

gr.Interface(classify_image, "image", "label").launch(share=True)

ဒါက သင်ဘယ်သူ့ကိုမဆို ပေးပို့နိုင်တဲ့ public, shareable link တစ်ခုကို ထုတ်ပေးပါတယ်။ ဒီ link ကို သင်ပေးပို့တဲ့အခါ၊ တစ်ဖက်က user က သူတို့ရဲ့ browser ထဲမှာ model ကို ၇၂ နာရီအထိ စမ်းသပ်နိုင်ပါတယ်။ processing က သင့် device ပေါ်မှာ ဖြစ်ပျက်နေတဲ့အတွက် (သင့် device on နေသရွေ့ပေါ့!)၊ ဘယ် dependencies ကိုမှ package လုပ်ဖို့ စိုးရိမ်စရာ မလိုပါဘူး။ သင် Google Colab notebook ကနေ အလုပ်လုပ်နေတယ်ဆိုရင်၊ share link တစ်ခုကို အမြဲတမ်း အလိုအလျောက် ဖန်တီးပေးပါတယ်။ ဒါက များသောအားဖြင့် XXXXX.gradio.app လိုမျိုး ပုံစံရှိပါတယ်။ link က Gradio link မှတစ်ဆင့် ဝန်ဆောင်မှုပေးတာဖြစ်ပေမယ့်၊ ကျွန်တော်တို့က သင့် local server အတွက် proxy သာ ဖြစ်ပြီး၊ interfaces မှတစ်ဆင့် ပေးပို့တဲ့ data တွေကို သိမ်းဆည်းထားခြင်း မရှိပါဘူး။

သို့သော်လည်း၊ ဒီ links တွေက အများပြည်သူ ဝင်ရောက်ကြည့်ရှုနိုင်တယ်ဆိုတာကို မှတ်သားထားပါ။ ဆိုလိုတာက ဘယ်သူမဆို သင့် model ကို prediction အတွက် အသုံးပြုနိုင်ပါတယ်။ ဒါကြောင့်၊ သင်ရေးတဲ့ functions တွေကနေတစ်ဆင့် ထိခိုက်လွယ်တဲ့ အချက်အလက်တွေကို မဖော်ထုတ်မိဖို့ ဒါမှမဟုတ် သင့် device ပေါ်မှာ အရေးကြီးတဲ့ ပြောင်းလဲမှုတွေ မဖြစ်အောင် သေချာဂရုစိုက်ပါ။ သင် share=False လို့ သတ်မှတ်ရင် (default အနေအထား)၊ local link တစ်ခုသာ ဖန်တီးပါလိမ့်မယ်။

Hugging Face Spaces မှာ သင့် Demo ကို Hosting လုပ်ခြင်း

လုပ်ဖော်ကိုင်ဖက်တွေကို မျှဝေနိုင်တဲ့ share link တစ်ခုက ကောင်းပေမယ့်၊ သင့် demo ကို အင်တာနက်ပေါ်မှာ သူ့ရဲ့ကိုယ်ပိုင် “space” တစ်ခုအဖြစ် အမြဲတမ်း ဘယ်လို hosting လုပ်မလဲ။

Hugging Face Spaces က သင့် Gradio model ကို အင်တာနက်ပေါ်မှာ အမြဲတမ်း hosting လုပ်ဖို့အတွက် infrastructure ကို အခမဲ့ ပံ့ပိုးပေးပါတယ်။ Spaces က သင့်ကို (public ဒါမှမဟုတ် private) repo တစ်ခုကို ဖန်တီးပြီး push လုပ်ခွင့်ပေးပါတယ်။ အဲဒီမှာ သင်ရဲ့ Gradio interface code က app.py file ထဲမှာ ရှိနေပါလိမ့်မယ်။ စတင်ဖို့အတွက် step-by-step tutorial ကို ဖတ်ပါ ဒါမှမဟုတ် အောက်ပါ ဥပမာဗီဒီယိုကို ကြည့်ပါ။

✏️ စတင်အသုံးပြုကြစို့!

ဒီအပိုင်းတွေမှာ ကျွန်တော်တို့ သင်ယူခဲ့တာတွေကို အသုံးပြုပြီး၊ ဒီအခန်းရဲ့ ပထမအပိုင်း မှာ တွေ့ခဲ့ရတဲ့ sketch recognition demo ကို ဖန်တီးကြရအောင်။ ကျွန်တော်တို့ interface မှာ customization အချို့ ထပ်ထည့်ပြီး၊ မျှဝေနိုင်တဲ့ public link တစ်ခု ဖန်တီးဖို့ share=True လို့ သတ်မှတ်ပါမယ်။

class_names.txt ကနေ labels တွေကို load လုပ်ပြီး၊ pytorch_model.bin ကနေ pre-trained pytorch model ကို load လုပ်နိုင်ပါတယ်။ ဒီ files တွေကို download လုပ်ဖို့ link ကို နှိပ်ပြီး file preview ရဲ့ ထိပ်ဘယ်ဘက်ထောင့်မှာရှိတဲ့ download ကို နှိပ်ပါ။ ဒီ files တွေကို အသုံးပြုပြီး ကျွန်တော်တို့ model ကို ဘယ်လို load လုပ်ပြီး predict() function ကို ဖန်တီးရမလဲဆိုတာ အောက်ပါ code ကို ကြည့်ရအောင်။

from pathlib import Path
import torch
import gradio as gr
from torch import nn

LABELS = Path("class_names.txt").read_text().splitlines()

model = nn.Sequential(
    nn.Conv2d(1, 32, 3, padding="same"),
    nn.ReLU(),
    nn.MaxPool2d(2),
    nn.Conv2d(32, 64, 3, padding="same"),
    nn.ReLU(),
    nn.MaxPool2d(2),
    nn.Conv2d(64, 128, 3, padding="same"),
    nn.ReLU(),
    nn.MaxPool2d(2),
    nn.Flatten(),
    nn.Linear(1152, 256),
    nn.ReLU(),
    nn.Linear(256, len(LABELS)),
)
state_dict = torch.load("pytorch_model.bin", map_location="cpu")
model.load_state_dict(state_dict, strict=False)
model.eval()


def predict(im):
    x = torch.tensor(im, dtype=torch.float32).unsqueeze(0).unsqueeze(0) / 255.0
    with torch.no_grad():
        out = model(x)
    probabilities = torch.nn.functional.softmax(out[0], dim=0)
    values, indices = torch.topk(probabilities, 5)
    return {LABELS[i]: v.item() for i, v in zip(indices, values)}

အခု ကျွန်တော်တို့မှာ predict() function ရှိပြီဆိုတော့၊ နောက်တစ်ဆင့်ကတော့ ကျွန်တော်တို့ရဲ့ gradio interface ကို သတ်မှတ်ပြီး launch လုပ်ဖို့ပါပဲ။

interface = gr.Interface(
    predict,
    inputs="sketchpad",
    outputs="label",
    theme="huggingface",
    title="ပုံဆွဲခြင်းကို အသိအမှတ်ပြုခြင်း",
    description="Pictionary ကစားချင်သူများ ရှိပါသလား။ ဂေါ်ပြား ဒါမှမဟုတ် laptop လိုမျိုး အရာဝတ္ထုတစ်ခုကို ဆွဲကြည့်ပါ။ algorithm က အချိန်နှင့်တစ်ပြေးညီ ခန့်မှန်းပေးပါလိမ့်မယ်။",
    article="<p style='text-align: center'>Sketch Recognition | Demo Model</p>",
    live=True,
)
interface.launch(share=True)

Interface ထဲမှာ live=True parameter ကို သတိပြုပါ။ ဒါက sketch demo က sketchpad ပေါ်မှာ တစ်စုံတစ်ယောက် ဆွဲတိုင်း (submit button မပါဘဲ) prediction လုပ်တယ်လို့ ဆိုလိုပါတယ်။

ဒါ့အပြင်၊ launch() method မှာ share=True argument ကိုလည်း ကျွန်တော်တို့ သတ်မှတ်ခဲ့ပါတယ်။ ဒါက သင်ဘယ်သူ့ကိုမဆို ပေးပို့နိုင်တဲ့ public link တစ်ခုကို ဖန်တီးပေးပါလိမ့်မယ်! ဒီ link ကို သင်ပေးပို့တဲ့အခါ၊ တစ်ဖက်က user က sketch recognition model ကို စမ်းသပ်နိုင်ပါတယ်။ ထပ်မံပြောရရင်၊ model ကို Hugging Face Spaces မှာလည်း host လုပ်နိုင်ပါတယ်။ အပေါ်က demo ကို ကျွန်တော်တို့ embed လုပ်နိုင်တာ ဒီနည်းလမ်းနဲ့ပါပဲ။

နောက်တစ်ခုကတော့ Hugging Face ecosystem နဲ့ Gradio ကို အသုံးပြုနိုင်တဲ့ တခြားနည်းလမ်းတွေကို ကျွန်တော်တို့ ဖော်ပြပေးပါမယ်။

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

• Temporary Share Link: Gradio demo ကို အချိန်အကန့်အသတ်တစ်ခု (ဥပမာ- ၇၂ နာရီ) အတွက် အများပြည်သူ ဝင်ရောက်ကြည့်ရှုနိုင်အောင် ဖန်တီးပေးသော link။
• Permanent Hosting on Spaces: Hugging Face Spaces ပေါ်တွင် Gradio demo ကို အမြဲတမ်း hosting လုပ်ခြင်း။
• Interface Class: Gradio library ၏ အဓိက class ဖြစ်ပြီး Machine Learning model များအတွက် web-based demo များကို ဖန်တီးရန် အသုံးပြုသည်။
• Optional Parameters: Function သို့မဟုတ် class တစ်ခု၏ လုပ်ဆောင်ချက်ကို ပြောင်းလဲနိုင်သော်လည်း မဖြစ်မနေ ထည့်သွင်းရန် မလိုအပ်သော inputs များ။
• title Parameter: Gradio demo အတွက် ခေါင်းစဉ်ကို သတ်မှတ်သည်။
• description Parameter: Gradio interface အတွက် ဖော်ပြချက် (text, Markdown, သို့မဟုတ် HTML) ကို သတ်မှတ်သည်။
• article Parameter: Gradio interface အကြောင်း ပိုမိုကျယ်ပြန့်သော ဖော်ပြချက် (text, Markdown, သို့မဟုတ် HTML) ကို သတ်မှတ်သည်။
• theme Parameter: Gradio interface ၏ အသွင်အပြင် (color scheme) ကို သတ်မှတ်သည်။
• examples Parameter: Gradio function အတွက် ဥပမာ input များကို ပံ့ပိုးပေးသည်။
• Nested List: list အတွင်း၌ အခြား list များ ပါဝင်သော list။
• UI Components (User Interface Components): အသုံးပြုသူများနှင့် အပြန်အလှန်တုံ့ပြန်နိုင်သော ဂရပ်ဖစ်ပုံစံ ဆော့ဖ်ဝဲလ် အစိတ်အပိုင်းများ (ဥပမာ- buttons, textboxes)။
• live=True Parameter: Gradio demo ကို input ပြောင်းလဲတိုင်း model ကို ပြန်လည် run စေသည်။ Real-time interactions များအတွက် အသုံးပြုသည်။
• predict Function: Gradio Interface မှ wrap လုပ်ထားသော Python function ဖြစ်ပြီး input ကိုယူကာ output ကို ပြန်ပေးသည်။
• textbox: Gradio ၏ input component တစ်မျိုးဖြစ်ပြီး အသုံးပြုသူအား စာသားများ ရိုက်ထည့်ရန် ခွင့်ပြုသည်။
• text: Gradio ၏ output component တစ်မျိုးဖြစ်ပြီး စာသား output ကို ပြသသည်။
• launch() Method: Gradio Interface ကို web server တစ်ခုအဖြစ် စတင်လုပ်ဆောင်သည်။
• share=True Parameter: launch() method တွင် Gradio Interface အတွက် public, shareable link တစ်ခုကို ဖန်တီးရန် သတ်မှတ်သည်။
• Google Colab Notebook: Google မှ ပံ့ပိုးပေးထားသော cloud-based Jupyter Notebook environment တစ်ခု။
• Proxy: ကွန်ပျူတာကွန်ရက်တွင် client နှင့် server အကြား ကြားခံအဖြစ် ဆောင်ရွက်သော ဆာဗာ။
• Local Server: သင့်ကွန်ပျူတာပေါ်တွင်သာ လုပ်ဆောင်သော web server။
• Sensitive Information: လျှို့ဝှက်ထားသင့်သော သို့မဟုတ် အကာအကွယ်ပေးထားသင့်သော အချက်အလက်များ။
• Hugging Face Spaces: Hugging Face Hub ၏ အစိတ်အပိုင်းတစ်ခုဖြစ်ပြီး Gradio ကဲ့သို့သော library များကို အသုံးပြု၍ Machine Learning demos များကို host လုပ်ပြီး မျှဝေနိုင်သည်။
• Infrastructure: စနစ်တစ်ခု သို့မဟုတ် ဝန်ဆောင်မှုတစ်ခု လုပ်ဆောင်နိုင်ရန် လိုအပ်သော အခြေခံစနစ်များနှင့် အရင်းအမြစ်များ။
• Public/Private Repo: အများပြည်သူ ဝင်ရောက်ကြည့်ရှုနိုင်သော (public) သို့မဟုတ် သတ်မှတ်ထားသူများသာ ဝင်ရောက်ကြည့်ရှုနိုင်သော (private) Git repository။
• app.py File: Hugging Face Spaces တွင် Gradio application ၏ code ကို သိမ်းဆည်းထားသော အဓိက Python file။
• Sketch Recognition Demo: လက်ဆွဲပုံများကို AI က အသိအမှတ်ပြုခြင်းကို ပြသသော demo။
• class_names.txt: ပုံဆွဲခြင်းကို အသိအမှတ်ပြုမည့် labels များ ပါဝင်သော text file။
• pytorch_model.bin: PyTorch format ဖြင့် သိမ်းဆည်းထားသော pretrained model ၏ binary file။
• PyTorch Model: PyTorch framework ဖြင့် တည်ဆောက်ထားသော Machine Learning model။
• Pathlib: Python standard library မှ module တစ်ခုဖြစ်ပြီး file system paths များကို object-oriented ပုံစံဖြင့် ကိုင်တွယ်ရန်။
• torch: PyTorch framework ကို ကိုယ်စားပြုသော Python library။
• torch.nn (Neural Networks Module): PyTorch တွင် Neural Network layers များနှင့် modules များကို တည်ဆောက်ရန်။
• nn.Sequential: PyTorch တွင် layers များကို အစဉ်အတိုင်း စုစည်းရန်။
• nn.Conv2d (Convolutional Layer): Convolutional Neural Network (CNN) တွင် ပုံရိပ်များမှ feature များကို ထုတ်ယူရန်။
• nn.ReLU (Rectified Linear Unit): Neural Network တွင် အသုံးပြုသော activation function။
• nn.MaxPool2d (Max Pooling Layer): CNN တွင် feature maps ၏ အရွယ်အစားကို လျှော့ချရန်။
• nn.Flatten: multi-dimensional tensor ကို 1D tensor အဖြစ် ပြောင်းလဲရန်။
• nn.Linear (Linear Layer/Dense Layer): Neural Network တွင် input နှင့် output ကြား linear transformation ကို လုပ်ဆောင်ရန်။
• state_dict: PyTorch model ၏ parameters (weights and biases) များကို သိမ်းဆည်းထားသော dictionary။
• torch.load(): PyTorch object များကို file မှ load လုပ်ရန်။
• map_location="cpu": GPU ရှိ model ကို CPU သို့ load လုပ်ရန်။
• model.load_state_dict(): model ၏ parameters များကို state_dict မှ load လုပ်ရန်။
• strict=False: state_dict တွင် model ၌ မရှိသော keys များ ပါဝင်နေလျှင်ပင် load လုပ်ခွင့်ပြုရန်။
• model.eval(): model ကို evaluation mode သို့ ပြောင်းလဲရန်။ training-specific behaviors များကို ပိတ်ထားသည်။
• torch.tensor(): Python list သို့မဟုတ် NumPy array မှ PyTorch tensor ကို ဖန်တီးရန်။
• dtype=torch.float32: tensor ၏ data type ကို float32 အဖြစ် သတ်မှတ်ရန်။
• .unsqueeze(0): tensor ၏ dimension ကို ထပ်ထည့်ရန်။ ဥပမာ- (H, W) ကို (1, H, W) သို့။
• / 255.0: pixel values များကို 0-1 အတိုင်းအတာသို့ scale ချရန် (normalization)။
• torch.no_grad(): gradient တွက်ချက်မှုများကို ပိတ်ထားသော context manager။ Inference အတွက် memory သုံးစွဲမှုကို လျှော့ချသည်။
• torch.nn.functional.softmax(): output logits များကို probabilities အဖြစ် ပြောင်းလဲရန် softmax function ကို အသုံးပြုသည်။
• dim=0: softmax ကို မည်သည့် dimension ပေါ်တွင် အသုံးပြုမည်ကို သတ်မှတ်သည်။
• torch.topk(): tensor တစ်ခု၏ ထိပ်ဆုံး k တန်ဖိုးများနှင့် ၎င်းတို့၏ indices များကို ပြန်ပေးသည်။
• sketchpad: Gradio ၏ input component တစ်မျိုးဖြစ်ပြီး အသုံးပြုသူအား ပုံဆွဲရန် ခွင့်ပြုသည်။
• label (Gradio output component): Gradio ၏ output component တစ်မျိုးဖြစ်ပြီး အမျိုးအစားခွဲခြားမှု ရလဒ်များကို ပြသသည်။