course/pr_1213/my/chapter9/6.md

Advanced Interface Features များ[[advanced-interface-features]]

အခု ကျွန်တော်တို့ အခြေခံ interface တစ်ခုကို တည်ဆောက်ပြီး မျှဝေနိုင်ပြီဆိုတော့၊ state နဲ့ interpretation လိုမျိုး ပိုပြီး အဆင့်မြင့်တဲ့ features တွေကို လေ့လာကြည့်ကြရအောင်။

Data ကို ဆက်လက်တည်ရှိစေရန် State ကို အသုံးပြုခြင်း[[using-state-to-persist-data]]

Gradio က session state ကို ထောက်ပံ့ပေးပါတယ်၊ ဒါက page load တစ်ခုအတွင်း multiple submits တွေမှာ data ကို ဆက်လက်တည်ရှိစေပါတယ်။ Session state က chatbot တွေလို demos တွေ တည်ဆောက်တဲ့အခါ အသုံးဝင်ပါတယ်၊ အဲဒီမှာ user က model နဲ့ အပြန်အလှန်တုံ့ပြန်နေချိန်မှာ data ကို ဆက်လက်တည်ရှိစေချင်ပါတယ်။ session state က သင့် model ရဲ့ မတူညီတဲ့ users တွေကြား data ကို မျှဝေခြင်း မရှိဘူးဆိုတာ သတိပြုပါ။

data ကို session state မှာ သိမ်းဆည်းဖို့အတွက်၊ အချက်သုံးခုကို လုပ်ဖို့ လိုအပ်ပါတယ်။

၁။ သင့် function ထဲမှာ interface ရဲ့ state ကို ကိုယ်စားပြုတဲ့ extra parameter တစ်ခုကို ထည့်ပါ။ ၂။ function ရဲ့ အဆုံးမှာ၊ state ရဲ့ update လုပ်ထားတဲ့ value ကို extra return value အဖြစ် ပြန်ပေးပါ။ ၃။ သင့် Interface ကို ဖန်တီးတဲ့အခါ 'state' input နဲ့ 'state' output components တွေကို ထည့်ပါ။

အောက်ပါ chatbot ဥပမာကို ကြည့်ပါ။

import random

import gradio as gr

def chat(message, history):
    history = history or []
    if message.startswith("How many"):
        response = random.randint(1, 10)
    elif message.startswith("How"):
        response = random.choice(["Great", "Good", "Okay", "Bad"])
    elif message.startswith("Where"):
        response = random.choice(["Here", "There", "Somewhere"])
    else:
        response = "I don't know"
    history.append((message, response))
    return history, history

iface = gr.Interface(
    chat,
    ["text", "state"],
    ["chatbot", "state"],
    allow_screenshot=False,
    allow_flagging="never",
)
iface.launch()

output component ရဲ့ state က submits တွေအကြား ဘယ်လို ဆက်လက်တည်ရှိနေလဲဆိုတာ သတိပြုပါ။ မှတ်ချက်- state parameter ကို default value တစ်ခု ပေးနိုင်ပါတယ်။ ဒါကို state ရဲ့ initial value အဖြစ် အသုံးပြုပါတယ်။

Predictions များကို နားလည်ရန် Interpretation ကို အသုံးပြုခြင်း[[using-interpretation-to-understand-predictions]]

machine learning models အများစုဟာ black boxes တွေဖြစ်ပြီး function ရဲ့ အတွင်းပိုင်း logic ကို end user ကနေ ဖုံးကွယ်ထားပါတယ်။ ပွင့်လင်းမြင်သာမှုကို မြှင့်တင်ဖို့အတွက်၊ Interface class ထဲက interpretation keyword ကို default အဖြစ် သတ်မှတ်ခြင်းဖြင့် သင့် model မှာ interpretation ကို ထည့်သွင်းဖို့ အလွန်လွယ်ကူအောင် ကျွန်တော်တို့ လုပ်ခဲ့ပါတယ်။ ဒါက သင့် users တွေကို input ရဲ့ ဘယ်အပိုင်းတွေက output အတွက် တာဝန်ရှိလဲဆိုတာ နားလည်စေပါတယ်။ အောက်ပါ ရိုးရှင်းတဲ့ interface ကို ကြည့်ပါ။ ဒါက image classifier တစ်ခုကို interpretation နဲ့အတူ ပြသထားပါတယ်။

import requests
import tensorflow as tf

import gradio as gr

inception_net = tf.keras.applications.MobileNetV2()  # load the model

# Download human-readable labels for ImageNet.
response = requests.get("https://git.io/JJkYN")
labels = response.text.split("\n")

def classify_image(inp):
    inp = inp.reshape((-1, 224, 224, 3))
    inp = tf.keras.applications.mobilenet_v2.preprocess_input(inp)
    prediction = inception_net.predict(inp).flatten()
    return {labels[i]: float(prediction[i]) for i in range(1000)}

image = gr.Image(shape=(224, 224))
label = gr.Label(num_top_classes=3)

title = "Gradio Image Classifiction + Interpretation Example"
gr.Interface(
    fn=classify_image, inputs=image, outputs=label, interpretation="default", title=title
).launch()

input တစ်ခုကို submit လုပ်ပြီး output component အောက်က Interpret ကို နှိပ်ခြင်းဖြင့် interpretation function ကို စမ်းသပ်ပါ။

Gradio က ပံ့ပိုးပေးတဲ့ default interpretation method အပြင်၊ interpretation parameter အတွက် shap ကိုလည်း သတ်မှတ်နိုင်ပြီး num_shap parameter ကို သတ်မှတ်နိုင်ပါတယ်။ ဒါက Shapley-based interpretation ကို အသုံးပြုပါတယ်။ ဒီအကြောင်းကို ဒီနေရာမှာ ပိုပြီး ဖတ်ရှုနိုင်ပါတယ်။ နောက်ဆုံးအနေနဲ့၊ သင်ကိုယ်ပိုင် interpretation function ကို interpretation parameter ထဲမှာလည်း ထည့်သွင်းနိုင်ပါတယ်။ Gradio ရဲ့ getting started page ဒီနေရာမှာ ဥပမာတစ်ခုကို ကြည့်ပါ။

ဒါက Gradio ရဲ့ Interface class ကို ကျွန်တော်တို့ နက်နက်နဲနဲ လေ့လာတာကို အဆုံးသတ်လိုက်ပါပြီ။ ကျွန်တော်တို့ တွေ့ခဲ့ရတဲ့အတိုင်း၊ ဒီ class က Python code လိုင်းအနည်းငယ်နဲ့ machine learning demos တွေကို ရိုးရှင်းစွာ ဖန်တီးနိုင်စေပါတယ်။ သို့သော်လည်း၊ တစ်ခါတစ်ရံမှာ layout ပြောင်းလဲခြင်း ဒါမှမဟုတ် multiple prediction functions တွေကို ဆက်စပ်ခြင်းဖြင့် သင့် demo ကို စိတ်ကြိုက်ပြင်ဆင်ချင်ပါလိမ့်မယ်။ Interface ကို စိတ်ကြိုက်ပြင်ဆင်နိုင်တဲ့ "blocks" တွေအဖြစ် ခွဲထုတ်နိုင်ရင် ကောင်းမှာပဲနော်။ ကံကောင်းစွာနဲ့ပဲ အဲဒီလို လုပ်လို့ရပါတယ်! ဒါက နောက်ဆုံးအပိုင်းရဲ့ ခေါင်းစဉ်ပါပဲ။

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

• Advanced Features: ဆော့ဖ်ဝဲလ်တစ်ခု၏ ပုံမှန်လုပ်ဆောင်နိုင်စွမ်းများထက် ပိုမိုရှုပ်ထွေးသော သို့မဟုတ် သီးခြားလုပ်ဆောင်ချက်များ။
• State (Session State): Gradio demo ၏ page load တစ်ခုအတွင်း ဖြတ်သန်းသွားသော multiple submits များတစ်လျှောက် ဒေတာများ ဆက်လက်တည်ရှိနေခြင်း။ ၎င်းသည် chatbot များကဲ့သို့ အပြန်အလှန်တုံ့ပြန်မှုများတွင် အသုံးဝင်သည်။
• Interpretation: Machine Learning model တစ်ခု၏ prediction များကို မည်သည့် input အစိတ်အပိုင်းများက လွှမ်းမိုးသည်ကို နားလည်စေရန် ကူညီပေးသော နည်းလမ်း။
• Chatbots: လူသားများနှင့် စကားပြောဆိုနိုင်အောင် ဒီဇိုင်းထုတ်ထားသော ကွန်ပျူတာပရိုဂရမ်များ။
• Default Value: parameter သို့မဟုတ် variable တစ်ခုအတွက် မည်သည့်တန်ဖိုးမျှ သတ်မှတ်မထားပါက အလိုအလျောက် အသုံးပြုသော တန်ဖိုး။
• Black Boxes: အတွင်းပိုင်းလုပ်ဆောင်ချက်များ သို့မဟုတ် ဆုံးဖြတ်ချက်ချမှတ်ခြင်းများကို အလွယ်တကူ နားလည်ရန် မဖြစ်နိုင်သော စနစ်များ (Machine Learning Models များကဲ့သို့)။
• Transparency: စနစ်တစ်ခု၏ လုပ်ဆောင်ပုံကို ရှင်းရှင်းလင်းလင်း မြင်သာပြီး နားလည်နိုင်ခြင်း။
• interpretation Keyword: Interface class တွင် interpretation method ကို သတ်မှတ်ရန် အသုံးပြုသော parameter (ဥပမာ- "default", "shap")။
• Image Classifier: ပုံရိပ်များကို သတ်မှတ်ထားသော အမျိုးအစားများထဲသို့ ခွဲခြားသတ်မှတ်ပေးသော model။
• requests Library: Python တွင် HTTP requests များကို ပေးပို့ရန် အသုံးပြုသော library။
• tensorflow (TF): Google မှ ထုတ်လုပ်သော open-source machine learning framework။
• tf.keras.applications.MobileNetV2(): TensorFlow Keras library မှ MobileNetV2 architecture ကို load လုပ်ခြင်း။ Image classification အတွက် pre-trained model။
• tf.keras.applications.mobilenet_v2.preprocess_input(): MobileNetV2 model အတွက် input image များကို သင့်လျော်သော format သို့ ပြင်ဆင်ခြင်း။
• reshape(): NumPy array သို့မဟုတ် TensorFlow tensor ၏ shape ကို ပြောင်းလဲခြင်း။
• flatten(): multi-dimensional array သို့မဟုတ် tensor ကို 1D array အဖြစ် ပြောင်းလဲခြင်း။
• prediction: Model ၏ output ခန့်မှန်းချက်များ။
• labels: ImageNet ကဲ့သို့သော dataset တွင် class အမျိုးအစားများ၏ လူသားဖတ်ရှုနိုင်သော နာမည်များ။
• gr.Image Component: Gradio ၏ input component တစ်မျိုးဖြစ်ပြီး အသုံးပြုသူအား ပုံရိပ်များကို upload လုပ်ရန် သို့မဟုတ် ပြသရန် ခွင့်ပြုသည်။
• shape Parameter (for gr.Image): input image ၏ အလိုရှိသော width နှင့် height ကို သတ်မှတ်သည်။
• gr.Label Component: Gradio ၏ output component တစ်မျိုးဖြစ်ပြီး အမျိုးအစားခွဲခြားမှု ရလဒ်များကို percentage သို့မဟုတ် score များဖြင့် ပြသသည်။
• num_top_classes Parameter: gr.Label တွင် ထိပ်တန်း classes မည်မျှကို ပြသမည်ကို သတ်မှတ်သည်။
• title Parameter: Gradio demo အတွက် ခေါင်းစဉ်ကို သတ်မှတ်သည်။
• interpret Button: Gradio UI တွင် interpretation function ကို လုပ်ဆောင်ရန် ခလုတ်။
• shap (Shapley-based Interpretation): Shapley values ကို အသုံးပြု၍ model ၏ prediction များတွင် input features များ၏ ပါဝင်ပံ့ပိုးမှုကို ရှင်းပြသော interpretation နည်းလမ်း။
• num_shap Parameter: Shapley-based interpretation အတွက် sample အရေအတွက်ကို သတ်မှတ်သည်။
• Blocks: Gradio ၏ အဆင့်မြင့် component တစ်ခုဖြစ်ပြီး demos များကို ပိုမိုစိတ်ကြိုက်ပြင်ဆင်နိုင်သော layout များဖြင့် တည်ဆောက်ရန် ခွင့်ပြုသည်။ multiple components များကို တစ်ခုနှင့်တစ်ခု ဆက်စပ်၍ သို့မဟုတ် အပြိုင်တွဲ၍ အလုပ်လုပ်စေနိုင်သည်။
• Layout: UI components များကို မျက်နှာပြင်ပေါ်တွင် မည်သို့ နေရာချထားသည်ကို ဖော်ပြသော ဒီဇိုင်း။
• Chaining Multiple Prediction Functions: prediction functions များစွာကို အစဉ်အတိုင်း ဆက်စပ်ပြီး အလုပ်လုပ်စေခြင်း။