course/pr_1095/my/chapter9/2.html

<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;သင်၏ ပထမဆုံး Demo ကို တည်ဆောက်ခြင်း&quot;,&quot;local&quot;:&quot;building-your-first-demo&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;🤖 Model Predictions များကို ထည့်သွင်းခြင်း&quot;,&quot;local&quot;:&quot;including-model-predictions&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;ဝေါဟာရ ရှင်းလင်းချက် (Glossary)&quot;,&quot;local&quot;:&quot;ဝဟရ-ရငလငခက-glossary&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;:1}">
		<link href="/docs/course/pr_1095/my/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/entry/start.8e25cab6.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/chunks/scheduler.893fe8c9.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/chunks/singletons.ba455c5c.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/chunks/index.bce52c8a.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/chunks/paths.9a7be869.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/entry/app.b12ce275.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/chunks/preload-helper.b5ee8f74.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/chunks/index.b1df2166.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/nodes/0.77c840e7.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/chunks/each.e59479a4.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/nodes/95.7f34418e.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.e6d31e72.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/chunks/CodeBlock.abb4f40e.js">
		<link rel="modulepreload" href="/docs/course/pr_1095/my/_app/immutable/chunks/CourseFloatingBanner.c1c08878.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;သင်၏ ပထမဆုံး Demo ကို တည်ဆောက်ခြင်း&quot;,&quot;local&quot;:&quot;building-your-first-demo&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;🤖 Model Predictions များကို ထည့်သွင်းခြင်း&quot;,&quot;local&quot;:&quot;including-model-predictions&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;ဝေါဟာရ ရှင်းလင်းချက် (Glossary)&quot;,&quot;local&quot;:&quot;ဝဟရ-ရငလငခက-glossary&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;:1}"><!-- HEAD_svelte-u9bgzb_END -->      <p></p>  <div class="items-center shrink-0 min-w-[100px] max-sm:min-w-[50px] justify-end ml-auto flex" style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"><div class="inline-flex rounded-md max-sm:rounded-sm"><button class="inline-flex items-center gap-1 max-sm:gap-0.5 h-6 max-sm:h-5 px-2 max-sm:px-1.5 text-[11px] max-sm:text-[9px] font-medium text-gray-800 border border-r-0 rounded-l-md max-sm:rounded-l-sm border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-live="polite"><span class="inline-flex items-center justify-center rounded-md p-0.5 max-sm:p-0"><svg class="w-3 h-3 max-sm:w-2.5 max-sm:h-2.5" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg></span> <span>Copy page</span></button> <button class="inline-flex items-center justify-center w-6 max-sm:w-5 h-6 max-sm:h-5 disabled:pointer-events-none text-sm text-gray-500 hover:text-gray-700 dark:hover:text-white rounded-r-md max-sm:rounded-r-sm border border-l transition border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-haspopup="menu" aria-expanded="false" aria-label="Open copy menu"><svg class="transition-transform text-gray-400 overflow-visible w-3 h-3 max-sm:w-2.5 max-sm:h-2.5 rotate-0" width="1em" height="1em" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="currentColor"></path></svg></button></div> </div>  <h1 class="relative group"><a id="building-your-first-demo" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#building-your-first-demo"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>သင်၏ ပထမဆုံး Demo ကို တည်ဆောက်ခြင်း</span></h1> <div class="flex space-x-1 absolute z-10 right-0 top-0" style=""><a href="https://discuss.huggingface.co/t/chapter-9-questions" target="_blank"><img alt="Ask a Question" class="!m-0" src="https://img.shields.io/badge/Ask%20a%20question-ffcb4c.svg?logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgLTEgMTA0IDEwNiI+PGRlZnM+PHN0eWxlPi5jbHMtMXtmaWxsOiMyMzFmMjA7fS5jbHMtMntmaWxsOiNmZmY5YWU7fS5jbHMtM3tmaWxsOiMwMGFlZWY7fS5jbHMtNHtmaWxsOiMwMGE5NGY7fS5jbHMtNXtmaWxsOiNmMTVkMjI7fS5jbHMtNntmaWxsOiNlMzFiMjM7fTwvc3R5bGU+PC9kZWZzPjx0aXRsZT5EaXNjb3Vyc2VfbG9nbzwvdGl0bGU+PGcgaWQ9IkxheWVyXzIiPjxnIGlkPSJMYXllcl8zIj48cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik01MS44NywwQzIzLjcxLDAsMCwyMi44MywwLDUxYzAsLjkxLDAsNTIuODEsMCw1Mi44MWw1MS44Ni0uMDVjMjguMTYsMCw1MS0yMy43MSw1MS01MS44N1M4MCwwLDUxLjg3LDBaIi8+PHBhdGggY2xhc3M9ImNscy0yIiBkPSJNNTIuMzcsMTkuNzRBMzEuNjIsMzEuNjIsMCwwLDAsMjQuNTgsNjYuNDFsLTUuNzIsMTguNEwzOS40LDgwLjE3YTMxLjYxLDMxLjYxLDAsMSwwLDEzLTYwLjQzWiIvPjxwYXRoIGNsYXNzPSJjbHMtMyIgZD0iTTc3LjQ1LDMyLjEyYTMxLjYsMzEuNiwwLDAsMS0zOC4wNSw0OEwxOC44Niw4NC44MmwyMC45MS0yLjQ3QTMxLjYsMzEuNiwwLDAsMCw3Ny40NSwzMi4xMloiLz48cGF0aCBjbGFzcz0iY2xzLTQiIGQ9Ik03MS42MywyNi4yOUEzMS42LDMxLjYsMCwwLDEsMzguOCw3OEwxOC44Niw4NC44MiwzOS40LDgwLjE3QTMxLjYsMzEuNiwwLDAsMCw3MS42MywyNi4yOVoiLz48cGF0aCBjbGFzcz0iY2xzLTUiIGQ9Ik0yNi40Nyw2Ny4xMWEzMS42MSwzMS42MSwwLDAsMSw1MS0zNUEzMS42MSwzMS42MSwwLDAsMCwyNC41OCw2Ni40MWwtNS43MiwxOC40WiIvPjxwYXRoIGNsYXNzPSJjbHMtNiIgZD0iTTI0LjU4LDY2LjQxQTMxLjYxLDMxLjYxLDAsMCwxLDcxLjYzLDI2LjI5YTMxLjYxLDMxLjYxLDAsMCwwLTQ5LDM5LjYzbC0zLjc2LDE4LjlaIi8+PC9nPjwvZz48L3N2Zz4="></a> <a href="https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/en/chapter9/section2.ipynb" target="_blank"><img alt="Open In Colab" class="!m-0" src="https://colab.research.google.com/assets/colab-badge.svg"></a> <a href="https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/en/chapter9/section2.ipynb" target="_blank"><img alt="Open In Studio Lab" class="!m-0" src="https://studiolab.sagemaker.aws/studiolab.svg"></a></div> <p data-svelte-h="svelte-1jmx5ao">Gradio ကို install လုပ်ခြင်းဖြင့် စတင်ကြရအောင်။ ဒါက Python package တစ်ခုဖြစ်တာကြောင့်၊ ရိုးရှင်းစွာ အောက်ပါ command ကို run လိုက်ပါ။</p> <p data-svelte-h="svelte-sv8g3f"><code>$ pip install gradio</code></p> <p data-svelte-h="svelte-1xycu1y">သင် Gradio ကို ဘယ်နေရာကနေမဆို run နိုင်ပါတယ်၊ သင်အကြိုက်ဆုံး Python IDE ကနေ၊ Jupyter notebooks တွေအထိ ဒါမှမဟုတ် Google Colab မှာပါ run နိုင်ပါတယ် 🤯!
ဒါကြောင့် Gradio ကို Python run တဲ့ ဘယ်နေရာမှာမဆို install လုပ်ပါ။</p> <p data-svelte-h="svelte-11g9ry4">Gradio syntax နဲ့ ရင်းနှီးစေဖို့ ရိုးရှင်းတဲ့ “Hello World” ဥပမာတစ်ခုနဲ့ စတင်ကြရအောင်။</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5   text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr


<span class="hljs-keyword">def</span> <span class="hljs-title function_">greet</span>(<span class="hljs-params">name</span>):
    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Hello &quot;</span> + name


demo = gr.Interface(fn=greet, inputs=<span class="hljs-string">&quot;text&quot;</span>, outputs=<span class="hljs-string">&quot;text&quot;</span>)

demo.launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-k574k6">အပေါ်က code ကို တစ်ဆင့်ချင်းစီ ရှင်းပြပါမယ်။</p> <ul data-svelte-h="svelte-1fabllj"><li>ပထမဆုံး၊ ကျွန်တော်တို့ <code>greet()</code> လို့ခေါ်တဲ့ function တစ်ခုကို define လုပ်ပါတယ်။ ဒီကိစ္စမှာ၊ ဒါက သင့်နာမည်ရှေ့မှာ “Hello” ထည့်ပေးတဲ့ ရိုးရှင်းတဲ့ function တစ်ခုဖြစ်ပေမယ့်၊ ယေဘုယျအားဖြင့် <strong>မည်သည့်</strong> Python function မဆို ဖြစ်နိုင်ပါတယ်။ ဥပမာ၊ machine learning applications တွေမှာ၊ ဒီ function က input တစ်ခုပေါ်မှာ <strong>prediction လုပ်ဖို့ model ကို ခေါ်ပြီး</strong> output ကို ပြန်ပေးပါလိမ့်မယ်။</li> <li>ပြီးရင်၊ <code>fn</code>, <code>inputs</code>, နဲ့ <code>outputs</code> ဆိုတဲ့ arguments သုံးခုနဲ့ Gradio <code>Interface</code> တစ်ခုကို ကျွန်တော်တို့ ဖန်တီးပါတယ်။ ဒီ arguments တွေက prediction function ကို define လုပ်ပြီး၊ ကျွန်တော်တို့ လိုချင်တဲ့ input နဲ့ output components တွေရဲ့ <strong>type</strong> ကိုပါ သတ်မှတ်ပေးပါတယ်။ ကျွန်တော်တို့ရဲ့ ကိစ္စမှာတော့ components နှစ်ခုလုံးက ရိုးရှင်းတဲ့ text boxes တွေပါ။</li> <li>ပြီးတော့ ကျွန်တော်တို့ ဖန်တီးထားတဲ့ <code>Interface</code> ပေါ်မှာ <code>launch()</code> method ကို ခေါ်ပါတယ်။</li></ul> <p data-svelte-h="svelte-pdphey">ဒီ code ကို run မယ်ဆိုရင်၊ အောက်က interface ဟာ Jupyter/Colab notebook ထဲမှာ အလိုအလျောက် ပေါ်လာပါလိမ့်မယ်၊ ဒါမှမဟုတ် script ကနေ run တယ်ဆိုရင် <strong><a href="http://localhost:7860/" rel="nofollow">http://localhost:7860</a></strong> မှာ browser ထဲမှာ ပေါ်လာပါလိမ့်မယ်။</p> <iframe src="https://course-demos-hello-world.hf.space" frameborder="0" height="250" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <p data-svelte-h="svelte-p4wxdo">သင့်နာမည် ဒါမှမဟုတ် အခြား input အချို့နဲ့ ဒီ GUI ကို အခုပဲ စမ်းသုံးကြည့်ပါ။</p> <p data-svelte-h="svelte-11anasd">ဒီ GUI မှာ Gradio က input parameter (<code>name</code>) ရဲ့ နာမည်ကို အလိုအလျောက် ခန့်မှန်းပြီး textbox ရဲ့ အပေါ်မှာ label အဖြစ် အသုံးပြုထားတာကို သင်သတိထားမိပါလိမ့်မယ်။ အဲဒါကို ပြောင်းလဲချင်ရင် ဘယ်လိုလုပ်မလဲ။
ဒါမှမဟုတ် textbox ကို အခြားနည်းလမ်းနဲ့ စိတ်ကြိုက်ပြင်ဆင်ချင်ရင်ရော။ ဒီလိုအခြေအနေမှာတော့ input component ကို ကိုယ်စားပြုတဲ့ class object တစ်ခုကို instantiate လုပ်နိုင်ပါတယ်။</p> <p data-svelte-h="svelte-1p6gepv">အောက်က ဥပမာကို ကြည့်လိုက်ပါ။</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5   text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr


<span class="hljs-keyword">def</span> <span class="hljs-title function_">greet</span>(<span class="hljs-params">name</span>):
    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Hello &quot;</span> + name


<span class="hljs-comment"># ကျွန်တော်တို့ Textbox class ကို instantiate လုပ်ပါတယ်</span>
textbox = gr.Textbox(label=<span class="hljs-string">&quot;Type your name here:&quot;</span>, placeholder=<span class="hljs-string">&quot;John Doe&quot;</span>, lines=<span class="hljs-number">2</span>)

gr.Interface(fn=greet, inputs=textbox, outputs=<span class="hljs-string">&quot;text&quot;</span>).launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-hello-world-custom.hf.space" frameborder="0" height="300" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <p data-svelte-h="svelte-1etcqg3">ဒီနေရာမှာ၊ ကျွန်တော်တို့ဟာ label တစ်ခု၊ placeholder တစ်ခုနဲ့ သတ်မှတ်ထားတဲ့ lines အရေအတွက်ပါဝင်တဲ့ input textbox တစ်ခုကို ဖန်တီးခဲ့ပါတယ်။
output textbox အတွက်လည်း အလားတူ လုပ်ဆောင်နိုင်ပေမယ့်၊ အခုတော့ ဒါကို ချန်ထားခဲ့ပါမယ်။</p> <p data-svelte-h="svelte-8b2489">code လိုင်းအနည်းငယ်နဲ့ Gradio က မည်သည့် function မဆိုအတွက် မည်သည့် inputs သို့မဟုတ် outputs အမျိုးအစားမဆိုနဲ့ ရိုးရှင်းတဲ့ interface တစ်ခုကို ဖန်တီးနိုင်စေတယ်ဆိုတာ ကျွန်တော်တို့ တွေ့ခဲ့ရပါတယ်။ ဒီအပိုင်းမှာ၊ ကျွန်တော်တို့ဟာ ရိုးရှင်းတဲ့ textbox နဲ့ စတင်ခဲ့ပေမယ့်၊ နောက်အပိုင်းတွေမှာတော့ အခြား inputs နဲ့ outputs အမျိုးအစားတွေကို ဖော်ပြသွားမှာပါ။ Gradio application တစ်ခုထဲမှာ NLP အချို့ကို ထည့်သွင်းတာကို အခု ကြည့်ရအောင်။</p>  <h2 class="relative group"><a id="including-model-predictions" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#including-model-predictions"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>🤖 Model Predictions များကို ထည့်သွင်းခြင်း</span></h2> <p data-svelte-h="svelte-14ydxa5">အခု <strong>text-generation</strong> model တစ်ခုဖြစ်တဲ့ GPT-2 လိုမျိုး model ကို demo ပြသနိုင်မယ့် ရိုးရှင်းတဲ့ interface တစ်ခုကို တည်ဆောက်ကြရအောင်။</p> <p data-svelte-h="svelte-o1c6v7">ကျွန်တော်တို့ရဲ့ model ကို 🤗 Transformers က <code>pipeline()</code> function ကို အသုံးပြုပြီး load လုပ်ပါမယ်။
လျင်မြန်စွာ ပြန်လည်လေ့လာဖို့ လိုအပ်ရင် <a href="/course/chapter1/3#text-generation">Chapter 1 မှာပါတဲ့ အဲဒီအပိုင်းကို</a> ပြန်သွားနိုင်ပါတယ်။</p> <p data-svelte-h="svelte-1l4g17o">ပထမဆုံး၊ text prompt တစ်ခုကို input အဖြစ်ယူပြီး text completion ကို ပြန်ပေးတဲ့ prediction function တစ်ခုကို ကျွန်တော်တို့ define လုပ်ပါတယ်။</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5   text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> pipeline

model = pipeline(<span class="hljs-string">&quot;text-generation&quot;</span>)


<span class="hljs-keyword">def</span> <span class="hljs-title function_">predict</span>(<span class="hljs-params">prompt</span>):
    completion = model(prompt)[<span class="hljs-number">0</span>][<span class="hljs-string">&quot;generated_text&quot;</span>]
    <span class="hljs-keyword">return</span> completion<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-jw71ta">ဒီ function က သင်ပေးတဲ့ prompts တွေကို ဖြည့်စွက်ပေးပြီး၊ ဒါဘယ်လိုအလုပ်လုပ်လဲဆိုတာကို ကြည့်ဖို့ သင့်ကိုယ်ပိုင် input prompts တွေနဲ့ run နိုင်ပါတယ်။ ဒီနေရာမှာ ဥပမာတစ်ခု (သင်ကွဲပြားတဲ့ completion တစ်ခု ရနိုင်ပါတယ်)-</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5   text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-function"><span class="hljs-title">predict</span><span class="hljs-params">(<span class="hljs-string">&quot;My favorite programming language is&quot;</span>)</span></span><!-- HTML_TAG_END --></pre></div> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5   text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START -->&gt;&gt; My favorite programming language <span class="hljs-keyword">is</span> Haskell. I really enjoyed <span class="hljs-keyword">the</span> Haskell language, <span class="hljs-keyword">but</span> <span class="hljs-keyword">it</span> doesn&#x27;t have all <span class="hljs-keyword">the</span> features <span class="hljs-keyword">that</span> can be applied <span class="hljs-keyword">to</span> any other language. For example, all <span class="hljs-keyword">it</span> <span class="hljs-keyword">does</span> <span class="hljs-keyword">is</span> compile <span class="hljs-keyword">to</span> a byte array.<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-8z528j">အခု ကျွန်တော်တို့ predictions တွေ ထုတ်လုပ်ဖို့ function တစ်ခု ရှိပြီဆိုတော့၊ အရင်က လုပ်ခဲ့တဲ့အတိုင်း <code>Interface</code> တစ်ခုကို ဖန်တီးပြီး launch လုပ်နိုင်ပါပြီ-</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5   text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

gr.Interface(fn=predict, inputs=<span class="hljs-string">&quot;text&quot;</span>, outputs=<span class="hljs-string">&quot;text&quot;</span>).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-7or03d">ဒါပါပဲ! အခု သင်ဟာ အောက်မှာ ပြသထားတဲ့အတိုင်း GPT-2 model ကို အသုံးပြုပြီး text တွေကို generate လုပ်ဖို့ ဒီ interface ကို အသုံးပြုနိုင်ပါပြီ 🤯။</p> <iframe src="https://course-demos-gpt-2.hf.space" frameborder="0" height="300" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <p data-svelte-h="svelte-13q8igw">Gradio နဲ့ အခြား demos အမျိုးအစားတွေကို ဘယ်လိုတည်ဆောက်ရမယ်ဆိုတာကို ဆက်ဖတ်ပါ။</p>  <h2 class="relative group"><a id="ဝဟရ-ရငလငခက-glossary" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#ဝဟရ-ရငလငခက-glossary"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>ဝေါဟာရ ရှင်းလင်းချက် (Glossary)</span></h2> <ul data-svelte-h="svelte-12pgf27"><li><strong>Gradio</strong>: Python library တစ်ခုဖြစ်ပြီး machine learning မော်ဒယ်တွေအတွက် အသုံးပြုရလွယ်ကူတဲ့ web interface တွေ ဒါမှမဟုတ် demo တွေကို အလွယ်တကူ ဖန်တီးနိုင်စေပါတယ်။</li> <li><strong>Python Package</strong>: Python programming language တွင် အသုံးပြုရန်အတွက် စုစည်းထားသော modules နှင့် code များ။</li> <li><strong><code>pip install gradio</code></strong>: Gradio library ကို install လုပ်ရန်အတွက် command line command။</li> <li><strong>Python IDE (Integrated Development Environment)</strong>: Python code ရေးရန်၊ run ရန်နှင့် debug လုပ်ရန်အတွက် ကိရိယာများပါဝင်သော software application။</li> <li><strong>Jupyter Notebooks</strong>: code, text, images, နှင့် mathematical equations တို့ကို ပေါင်းစပ်နိုင်သော interactive computing environment။</li> <li><strong>Google Colab</strong>: Google မှ ပံ့ပိုးပေးထားသော cloud-based Jupyter Notebook environment တစ်ခုဖြစ်ပြီး Python code များကို web browser မှတစ်ဆင့် run နိုင်စေသည်။</li> <li><strong>“Hello World” Example</strong>: ပရိုဂရမ်းမင်းဘာသာစကားတစ်ခုကို စတင်လေ့လာရာတွင် အခြေခံအကျဆုံးနှင့် အရိုးရှင်းဆုံး ပရိုဂရမ် (မျက်နှာပြင်ပေါ်တွင် “Hello World” ဟု ပြသခြင်း)။</li> <li><strong>Gradio Syntax</strong>: Gradio library ကို အသုံးပြုရန်အတွက် code ရေးသားပုံ စည်းမျဉ်းများ။</li> <li><strong><code>import gradio as gr</code></strong>: Gradio library ကို <code>gr</code> ဟူသော အတိုကောက်ဖြင့် import လုပ်ခြင်း။</li> <li><strong><code>greet()</code> Function</strong>: ဥပမာတွင် အသုံးပြုသော Python function တစ်ခု။</li> <li><strong>Prediction Function</strong>: Machine Learning မော်ဒယ်တစ်ခုက input data ကို အခြေခံပြီး ခန့်မှန်းချက်များ ပြုလုပ်ရန် ဒီဇိုင်းထုတ်ထားသော function။</li> <li><strong><code>gr.Interface</code></strong>: Gradio တွင် web-based UI (User Interface) ကို ဖန်တီးရန်အတွက် class။</li> <li><strong><code>fn</code> Argument</strong>: <code>gr.Interface</code> တွင် prediction function ကို သတ်မှတ်ရန် အသုံးပြုသော argument။</li> <li><strong><code>inputs</code> Argument</strong>: <code>gr.Interface</code> တွင် input component ၏ အမျိုးအစား သို့မဟုတ် object ကို သတ်မှတ်ရန် အသုံးပြုသော argument။</li> <li><strong><code>outputs</code> Argument</strong>: <code>gr.Interface</code> တွင် output component ၏ အမျိုးအစား သို့မဟုတ် object ကို သတ်မှတ်ရန် အသုံးပြုသော argument။</li> <li><strong>Input Components</strong>: အသုံးပြုသူက data များကို ထည့်သွင်းနိုင်သော UI အစိတ်အပိုင်းများ (ဥပမာ- textbox, image uploader)။</li> <li><strong>Output Components</strong>: Model ၏ ရလဒ်များကို ပြသနိုင်သော UI အစိတ်အပိုင်းများ (ဥပမာ- textbox, image display)။</li> <li><strong>Text Boxes</strong>: စာသားထည့်သွင်းရန် သို့မဟုတ် ပြသရန်အတွက် UI component။</li> <li><strong><code>launch()</code> Method</strong>: Gradio Interface ကို စတင်ပြီး web browser တွင် ပြသရန်အတွက် method။</li> <li><strong>Jupyter/Colab Notebook</strong>: interactive code execution environment။</li> <li><strong>GUI (Graphical User Interface)</strong>: အသုံးပြုသူများနှင့် ဂရပ်ဖစ်ပုံစံဖြင့် အပြန်အလှန်တုံ့ပြန်နိုင်သော ဆော့ဖ်ဝဲလ် interface။</li> <li><strong>Input Parameter</strong>: Function တစ်ခုသို့ ပေးပို့သော data (အချက်အလက်)။</li> <li><strong>Label</strong>: UI component တစ်ခု၏ အပေါ်တွင် ပြသထားသော ဖော်ပြချက်။</li> <li><strong>Textbox Class (<code>gr.Textbox</code>)</strong>: Gradio တွင် စိတ်ကြိုက်ပြင်ဆင်နိုင်သော textbox input/output component ကို ဖန်တီးရန် class။</li> <li><strong><code>label</code> (Textbox argument)</strong>: textbox အတွက် label ကို သတ်မှတ်ရန်။</li> <li><strong><code>placeholder</code> (Textbox argument)</strong>: textbox တွင် input မထည့်မီ ပြသထားသော ဥပမာစာသား။</li> <li><strong><code>lines</code> (Textbox argument)</strong>: textbox ၏ မြင်နိုင်သော lines အရေအတွက်။</li> <li><strong>NLP (Natural Language Processing)</strong>: ကွန်ပျူတာတွေ လူသားဘာသာစကားကို နားလည်၊ အဓိပ္ပာယ်ဖော်ပြီး၊ ဖန်တီးနိုင်အောင် လုပ်ဆောင်ပေးတဲ့ Artificial Intelligence (AI) ရဲ့ နယ်ပယ်ခွဲတစ်ခုပါ။</li> <li><strong>Text Generation Model</strong>: input text ကို အခြေခံပြီး ဆက်စပ်နေသော စာသားအသစ်များကို ထုတ်လုပ်နိုင်သော model။</li> <li><strong>GPT-2</strong>: OpenAI မှ ဖန်တီးထားသော ထင်ရှားသည့် text generation model တစ်ခု။</li> <li><strong><code>pipeline()</code> Function</strong>: Hugging Face Transformers library မှာ ပါဝင်တဲ့ လုပ်ဆောင်ချက်တစ်ခုဖြစ်ပြီး မော်ဒယ်တွေကို သီးခြားလုပ်ငန်းတာဝန်များ (ဥပမာ- စာသားခွဲခြားသတ်မှတ်ခြင်း၊ စာသားထုတ်လုပ်ခြင်း) အတွက် အသုံးပြုရလွယ်ကူအောင် ပြုလုပ်ပေးပါတယ်။</li> <li><strong>🤗 Transformers</strong>: Hugging Face က ထုတ်လုပ်ထားတဲ့ library တစ်ခုဖြစ်ပြီး Transformer မော်ဒယ်တွေကို အသုံးပြုပြီး Natural Language Processing (NLP), computer vision, audio processing စတဲ့ နယ်ပယ်တွေမှာ အဆင့်မြင့် AI မော်ဒယ်တွေကို တည်ဆောက်ပြီး အသုံးပြုနိုင်စေပါတယ်။</li> <li><strong>Text Prompt</strong>: text generation model သို့ ထည့်သွင်းသော စတင်စာသား။</li> <li><strong>Text Completion</strong>: text generation model မှ ထုတ်လုပ်သော နောက်ဆက်တွဲစာသား။</li> <li><strong><code>generated_text</code></strong>: <code>pipeline()</code> function မှ text generation output တွင် ပါဝင်သော generated text field။</li></ul> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/course/blob/main/chapters/my/chapter9/2.mdx" target="_blank"><svg class="mr-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M31,16l-7,7l-1.41-1.41L28.17,16l-5.58-5.59L24,9l7,7z"></path><path d="M1,16l7-7l1.41,1.41L3.83,16l5.58,5.59L8,23l-7-7z"></path><path d="M12.419,25.484L17.639,6.552l1.932,0.518L14.351,26.002z"></path></svg> <span data-svelte-h="svelte-zjs2n5"><span class="underline">Update</span> on GitHub</span></a>  <p></p> 
			
			<script>
				{
					__sveltekit_5q47hu = {
						assets: "/docs/course/pr_1095/my",
						base: "/docs/course/pr_1095/my",
						env: {}
					};

					const element = document.currentScript.parentElement;

					const data = [null,null];

					Promise.all([
						import("/docs/course/pr_1095/my/_app/immutable/entry/start.8e25cab6.js"),
						import("/docs/course/pr_1095/my/_app/immutable/entry/app.b12ce275.js")
					]).then(([kit, app]) => {
						kit.start(app, element, {
							node_ids: [0, 95],
							data,
							form: null,
							error: null
						});
					});
				}
			</script>