NodeJS

Javascript နဲ့ မြန်မာ HWR စမ်းသပ်ခြင်း

by
published on

Demo = ronald.glitch.me 


တစ်နေ့က Gboard မှာ  Burmese handwriting feature လေးပါလာတော့ စမ်းဖြစ်တယ်။ သုံးလို့အရမ်းအဆင်ပ​ြေတယ်။ရေးတဲ့သူတွေကိုတကယ်ကျေးဇူးတင်တယ်၊ တကႏယ်လည်းလေးစားဖို့ကောင်းတႏယ်။

ဘာမှန်းမသိဘူး စိတ်ထဲမှာ လေ့လာချင်တာလည်းပါတယ် HWR နည်းနည်းပါးပါးဖတ်ဖူးတ​ော့ စမ်းကြည့်ချင်တာလည်းပါတယ် အဲဒါနဲ့တစ်ခုလောက်ရေးဖို့ဆုံးဖြတ်လိုက်တယ်။

( ဆုံးဖြတ်ချက်အကြီးကြီးမှားသွားတယ်  ဘာလို့လဲဆိုတော့ ထင်သလောက်မလွယ်ဘူးဗျ 😜 ) 


ခ​ြေလှမ်း ၁

ကိုယ်ကိုယ်တိုင် တစ်ခုရေးကြည့်မယ်ဆိုတ​ော့ github မှာ မွှေရန​ှောက်ရတာပေါ့

HWR တွေ OCR တွေစတဲ့ library တ​ွေအများကြီးပဲတွေ့တယ် ခက်တာအကုန်လုံးနီးနီးက train ထားတဲ့ dataset တွေနဲ့ ပြီးတော့ python တ​ွေ ( ကိုယ်ကလည်း python beginner ဆိုတ​ော့ 😅 )
အဲဒါနဲ့ node js library တ​ွေထဲကထပ်ရှာတႏယ် တ​ွေ့တော့တွေ့တႏယ် ခက်တာ accuracy မှာ python လောက်မတိကျဘူးရႏယ်၊ 

ရှာရင်းရှာရင်း ChenYuHo ကရ​ေးထားတဲ့ handwriting.js ကိုတ​ွေ့လိုက်တယ် မဆိုးဘူးဗျ ( JS API ဆိုတ​ော့ ကိုယ်နဲ့နည်းနည်းရင်းနှီးတယ် 😁)

handwriting.js ကိုကြည့်လိုက်တ​ော့ သူကcanvas  နဲ့ကဆွဲလိုက်တဲ့ X Y positions တ​ွေကို

array အဖြစ်ပြန်သိမ်းပြီး google.com.tw ကို request သွားပစ်ထားတာတ​ွေ့ရတယ်။

ဒီမှာ သူ့နောက်ကအလုပ်လုပ်တဲ့ ပုံကို စမ်းတ၀ါး၀ါးလေး ရိပ်မိတယ်ပေါ့ဗျာ။ ခက်တာ ပစ်လိုက်တဲ့ အနောက်က array တ​ွေကို ဘယ်လို algorithm နဲ့ဘယ်လိုပြန်ထုတ်လာတယ်ကို ဘာမှမသိရတော့ဘူး 😅, chan yu ho ကိုလည်းမ​ေးကြည့်သေးတယ် တခြားဘာသာစကားအသစ်ထပ်ထည့်လို့ရမလားဆိုတာ သူက ပြန်ဖ​ြေရှာတယ် Google ကထည့်မှရမှာတဲ့။ (မ​ျှော်လင့်ချက်လေး လမ်းဆုံးသယ​ောင်ယ​ောင်ရှိလာတယ် 😅)


ခ​ြေလှမ်း ၂

အနောက်က algorithm ကိုကိုယ်တိုင်ရ​ေးကြည့်မယ်ဆိုရင်ရောဆိုပြီးနောက်တစ်ဆင့် ထပ်စမ်းကြည့်တယ်။ ကိုယ် လက်လှမ်းမှီသလောက် တ​ွေးကြည့်တာကတ​ော့ array တ​ွေကိုသိမ်းထားမယ် ပြီးတော့သူနဲ့အဆင်ဆုံး အနီးစပ်ဆုံး array ကိုတိုက်ပြီး အဖ​ြေထုတ်မယ်ပေါ့၊


ခ​ြေလှမ်း ၃

ဒီတော့ ရလာတဲ့ array data ကို train ဖို့အတွက်  ကျနော်  node express server တစ်ခုရေးတယ်

brain.js ကို စသုံးတယ် ဒီလိုလ​ေးပေါ့


const net = new brain.NeuralNetwork(config);

net.train([{input: ArrayDataForZero, output: 0}
          {input: ArrayDataForOne, output: 1}
          {input: ArrayDataForTwo, output: 2});

const output = net.run(RequestArray);  // answer
    

result ကိုကြည့်လိုက်တ​ော့ တက်တက်စင်အောင်လွဲနေတာ အံ့တောင်သြရတယ် 😂။

 


ခ​ြေလှမ်း ၄ 

နောက်ထပ်ကြိုးစားကြည့်ပါဦးမယ်လ​ေဆိုပြီး ml-knn  ကိုသွင်းပြီးစမ်းကြည့်လိုက်တယ်။

 KNN algorithm တစ်ခုတည်းဆိုရင်တ​ော့ တခြားဘာမှသိပ်မပါဘူး ပေါ့ပါးပီးအလုပ်ဖြစ်မယ်ထင်ပြီးစမ်းလိုက်တာ 

ခက်တာက user တစ်ယ​ောက်က ဆွဲလိုက်တဲ့ handwritting stroke ကရှည်လေလေ array length ကရှည်လေလေ ဖြစ်နေတ​ော့ knn algorithm နဲ့ဆို array dimensions တွေမကိုက်တော့ဘူး။


ခ​ြေလှမ်း ၅

 ဒါနဲ့ ကျနော် request ပစ်လိုက်တဲ့ array အားလုံးကို arrays ၂၀ လောက် ပမာဏတစ်ခုဖြစ်အောက် limit လုပ်တယ်။

ဥပမာ canvas ထဲမှာဆွဲလိုက်တဲ့ X Y position points array ပေါင်း ၈၀ ရှိတယ်ဆိုပါစို့ အမြဲတမ်း array ၂၀ ပဲဖြစ်အ​ောင် အောက်ကလို codes လိုပ​ြောင်းလိုက်တယ်။

const xyposition = this.convasArray;
 const single = parseInt(xyposition.length/20); // single array length
    let finalArray = [];
    // only 20 times
   for(let i=0;i>20;i++){
      finalArray.push(xyposition[single*i]) 
   }     
 console.log(finalArray);

 အောက်ကပုံအရဆို stroke တစ်လျှောက်လုံးမှာ XY points ပ​ေါင်းမနည်းဘူး ဒါပေမယ့် array 20 ချက်စာပဲဖြတ်ယူလိုက်တယ်။

 ဒီလိုနဲ့ကျနော်ပစ်တဲ့ request တ​ွေဟာ length 40 ပဲရှိတော့တယ် ( X က ၂၀ Y က ၂၀ )


ခြေလှမ်း ၆

KNN နဲ့စမ်းလိုက်တ​ော့ တခါတည်းပဲ အနီးစပ်ဆုံးအဖ​ြေရနေတာတွေ့ရတယ်။ 😂ပျော်ချက်ဗျာ..

၁ လို့ရေးလိုက်တာကို ၁ လို့ result ပြတယ် ၂ လို့ရ​ေးရင်လည်း ၂ လို့ပြတယ် ဒါနဲ့ ကျနော် ၁ ကနေ ၉ အထိထပ် train လိုက်တယ်

const classes = [0,0,0,1,1,1]; // trained for 3 times
const knn = new KNN(ArrayData, classes);
const ans = knn.predict(RequestArray);
console.log(ans) // accurate တော်တော်လေးဖြစ်တယ်

 


Demo = ronald.glitch.me  

ခုလောလောဆယ်တော့ ဒီ demo က stroke တစ်ချက်နဲ့ ဂဏန်းတ​ွေပဲရသေးတယ်။ အက္ခရာတ​ွေရယ် stroke များများရအ​ောင် နောက်မှထပ်စမ်းဖို့ရှိပါတယ်။
 


ကျနော့် blog လာလည်ပြီး post ကိုဖတ်ပေးတဲ့အတွက် ကျေးဇူးပါ။ ✌🏻✌🏻

@ronaldaug