Hugging Face's logo

Buckets:
hf-doc-build
/
doc-dev

Files
xet
hf-doc-build/doc-dev / course /pr_1095 /my /chapter9 /4.html
rtrm's picture
rtrm
download
raw
55 kB
<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Demos များကို တခြားသူများနှင့် မျှဝေခြင်း&quot;,&quot;local&quot;:&quot;sharing-demos-with-others&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;သင့် Gradio Demo ကို ပိုမိုကောင်းမွန်အောင် ပြင်ဆင်ခြင်း:&quot;,&quot;local&quot;:&quot;polishing-your-gradio-demo&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;သင့် Demo ကို ယာယီ Links ဖြင့် မျှဝေခြင်း&quot;,&quot;local&quot;:&quot;sharing-your-demo-with-temporary-links&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Hugging Face Spaces မှာ သင့် Demo ကို Hosting လုပ်ခြင်း&quot;,&quot;local&quot;:&quot;hosting-your-demo-on-hugging-face-spaces&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;✏️ စတင်အသုံးပြုကြစို့!&quot;,&quot;local&quot;:&quot;lets-apply-it&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/97.26e9b696.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/Youtube.ec5d7916.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;Demos များကို တခြားသူများနှင့် မျှဝေခြင်း&quot;,&quot;local&quot;:&quot;sharing-demos-with-others&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;သင့် Gradio Demo ကို ပိုမိုကောင်းမွန်အောင် ပြင်ဆင်ခြင်း:&quot;,&quot;local&quot;:&quot;polishing-your-gradio-demo&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;သင့် Demo ကို ယာယီ Links ဖြင့် မျှဝေခြင်း&quot;,&quot;local&quot;:&quot;sharing-your-demo-with-temporary-links&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Hugging Face Spaces မှာ သင့် Demo ကို Hosting လုပ်ခြင်း&quot;,&quot;local&quot;:&quot;hosting-your-demo-on-hugging-face-spaces&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;✏️ စတင်အသုံးပြုကြစို့!&quot;,&quot;local&quot;:&quot;lets-apply-it&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="sharing-demos-with-others" 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="#sharing-demos-with-others"><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>Demos များကို တခြားသူများနှင့် မျှဝေခြင်း</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/section4.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/section4.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-1p5zqci">အခု သင် demo တစ်ခု တည်ဆောက်ပြီးပြီဆိုတော့၊ ဒါကို တခြားသူတွေနဲ့ မျှဝေချင်ပါလိမ့်မယ်။ Gradio demos တွေကို နည်းလမ်းနှစ်မျိုးနဲ့ မျှဝေနိုင်ပါတယ်၊ <strong>ယာယီ share link</strong> ကို အသုံးပြုခြင်း ဒါမှမဟုတ် <strong>Spaces ပေါ်မှာ အမြဲတမ်း hosting လုပ်ခြင်း</strong>တို့ ဖြစ်ပါတယ်။</p> <p data-svelte-h="svelte-rls2zj">ဒီနည်းလမ်းနှစ်ခုလုံးကို မကြာမီ ကျွန်တော်တို့ ဖော်ပြပေးပါမယ်။ ဒါပေမယ့် သင့် demo ကို မမျှဝေခင်၊ အဲဒါကို ပိုပြီး ကောင်းအောင် ပြင်ဆင်ချင်ပါလိမ့်မယ် 💅။</p> <h3 class="relative group"><a id="polishing-your-gradio-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="#polishing-your-gradio-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>သင့် Gradio Demo ကို ပိုမိုကောင်းမွန်အောင် ပြင်ဆင်ခြင်း:</span></h3> <div class="flex justify-center" data-svelte-h="svelte-nclpfp"><img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface-course/documentation-images/resolve/main/en/chapter9/gradio-demo-overview.png" alt="Overview of a gradio interface"> <img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface-course/documentation-images/resolve/main/en/chapter9/gradio-demo-overview-dark.png" alt="Overview of a gradio interface"></div> <p data-svelte-h="svelte-1q0g8kk">သင့် demo မှာ ထပ်ဆောင်းအကြောင်းအရာတွေ ထည့်ဖို့အတွက်၊ <code>Interface</code> class က optional parameters အချို့ကို ထောက်ပံ့ပေးပါတယ်။</p> <ul data-svelte-h="svelte-130yo2n"><li><code>title</code>: သင့် demo အတွက် title တစ်ခု ပေးနိုင်ပါတယ်။ ဒါက input နဲ့ output components တွေရဲ့ <em>အပေါ်မှာ</em> ပေါ်လာပါလိမ့်မယ်။</li> <li><code>description</code>: interface အတွက် description တစ်ခု (text, Markdown, သို့မဟုတ် HTML နဲ့) ပေးနိုင်ပါတယ်။ ဒါက input နဲ့ output components တွေရဲ့ အပေါ်ဘက်၊ title အောက်မှာ ပေါ်လာပါလိမ့်မယ်။</li> <li><code>article</code>: interface ကို ရှင်းပြတဲ့ (text, Markdown, သို့မဟုတ် HTML နဲ့) ပိုမိုကျယ်ပြန့်တဲ့ article တစ်ခုကိုလည်း ရေးနိုင်ပါတယ်။ ဒါကို ပေးထားရင် input နဲ့ output components တွေရဲ့ <em>အောက်မှာ</em> ပေါ်လာပါလိမ့်မယ်။</li> <li><code>theme</code>: default colors တွေကို မကြိုက်ဘူးလား။ <code>default</code>, <code>huggingface</code>, <code>grass</code>, <code>peach</code> တို့ထဲက တစ်ခုကို အသုံးပြုဖို့ theme ကို သတ်မှတ်နိုင်ပါတယ်။ <code>dark-</code> prefix ကိုလည်း ထည့်နိုင်ပါတယ် (ဥပမာ- <code>dark-peach</code> က dark theme အတွက် ဒါမှမဟုတ် default dark theme အတွက် <code>dark</code> ကိုပဲ အသုံးပြုနိုင်ပါတယ်)။</li> <li><code>examples</code>: သင့် demo ကို <em>အသုံးပြုရ ပိုမိုလွယ်ကူအောင်</em> function အတွက် ဥပမာ input အချို့ကို ပေးနိုင်ပါတယ်။ ဒါတွေက UI components တွေရဲ့ အောက်မှာ ပေါ်လာပြီး interface ကို ဖြည့်စွက်ဖို့ အသုံးပြုနိုင်ပါတယ်။ ဒါတွေကို nested list အဖြစ် ပေးသင့်ပါတယ်။ အပြင်ဘက် list က samples တွေ ပါဝင်ပြီး၊ အတွင်းဘက် list တစ်ခုစီမှာ input component တစ်ခုစီနဲ့ ကိုက်ညီတဲ့ input တစ်ခုစီ ပါဝင်ပါတယ်။</li> <li><code>live</code>: သင့် demo ကို “live” ဖြစ်စေချင်တယ်ဆိုရင်၊ ဆိုလိုတာက input ပြောင်းလဲတိုင်း သင့် model က ပြန် run စေချင်တယ်ဆိုရင်၊ <code>live=True</code> လို့ သတ်မှတ်နိုင်ပါတယ်။ ဒါက မြန်ဆန်တဲ့ models တွေနဲ့ အသုံးပြုဖို့ သင့်လျော်ပါတယ် (ဒီအပိုင်းရဲ့ အဆုံးမှာ ဥပမာတစ်ခုကို ကျွန်တော်တို့ တွေ့ရပါလိမ့်မယ်)
အထက်ပါ options တွေကို အသုံးပြုပြီး၊ ကျွန်တော်တို့ဟာ ပိုပြီး ပြည့်စုံတဲ့ interface တစ်ခုကို ရရှိပါပြီ။ Rick နဲ့ Morty နဲ့ စကားပြောနိုင်အောင် အောက်ပါ code ကို run ပါ။</li></ul> <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 -->title = <span class="hljs-string">&quot;Rick ကို မေးခွန်းမေးပါ&quot;</span>
description = <span class="hljs-string">&quot;&quot;&quot;
ဒီ bot ကို Rick နဲ့ Morty ၏ dialogues များအပေါ် အခြေခံပြီး မေးခွန်းများဖြေဆိုရန် လေ့ကျင့်ထားပါသည်။ Rick ကို ဘာမဆို မေးမြန်းလိုက်ပါ။
&lt;img src=&quot;https://huggingface.co/spaces/course-demos/Rick_and_Morty_QA/resolve/main/rick.png&quot; width=200px&gt;
&quot;&quot;&quot;</span>
article = <span class="hljs-string">&quot;ဒီ demo က အခြေခံထားတဲ့ [မူရင်း Rick and Morty Bot](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) ကို ကြည့်ရှုပါ။&quot;</span>
gr.Interface(
 fn=predict,
 inputs=<span class="hljs-string">&quot;textbox&quot;</span>,
 outputs=<span class="hljs-string">&quot;text&quot;</span>,
 title=title,
 description=description,
 article=article,
 examples=[[<span class="hljs-string">&quot;What are you doing?&quot;</span>], [<span class="hljs-string">&quot;Where should we time travel to?&quot;</span>]],
).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-xw22ak">အထက်ပါ options တွေကို အသုံးပြုပြီး၊ ကျွန်တော်တို့ဟာ ပိုပြီး ပြည့်စုံတဲ့ interface တစ်ခုကို ရရှိပါပြီ။ အောက်ပါ interface ကို စမ်းသပ်ကြည့်ပါ။</p> <iframe src="https://course-demos-Rick-and-Morty-QA.hf.space" frameborder="0" height="800" 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> <h3 class="relative group"><a id="sharing-your-demo-with-temporary-links" 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="#sharing-your-demo-with-temporary-links"><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 ကို ယာယီ Links ဖြင့် မျှဝေခြင်း</span></h3> <p data-svelte-h="svelte-lgm698">အခု ကျွန်တော်တို့ machine learning model ရဲ့ demo တစ်ခုကို တည်ဆောက်ပြီးပြီဆိုတော့၊ ကျွန်တော်တို့ interface ရဲ့ link ကို ဘယ်လို လွယ်ကူစွာ မျှဝေရမလဲဆိုတာ လေ့လာကြရအောင်။
<code>launch()</code> method မှာ <code>share=True</code> လို့ သတ်မှတ်ခြင်းဖြင့် Interfaces တွေကို အလွယ်တကူ အများပြည်သူသိအောင် မျှဝေနိုင်ပါတယ်-</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 -->gr.Interface(classify_image, <span class="hljs-string">&quot;image&quot;</span>, <span class="hljs-string">&quot;label&quot;</span>).launch(share=<span class="hljs-literal">True</span>)<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-dxcjyq">ဒါက သင်ဘယ်သူ့ကိုမဆို ပေးပို့နိုင်တဲ့ public, shareable link တစ်ခုကို ထုတ်ပေးပါတယ်။ ဒီ link ကို သင်ပေးပို့တဲ့အခါ၊ တစ်ဖက်က user က သူတို့ရဲ့ browser ထဲမှာ model ကို ၇၂ နာရီအထိ စမ်းသပ်နိုင်ပါတယ်။ processing က သင့် device ပေါ်မှာ ဖြစ်ပျက်နေတဲ့အတွက် (သင့် device on နေသရွေ့ပေါ့!)၊ ဘယ် dependencies ကိုမှ package လုပ်ဖို့ စိုးရိမ်စရာ မလိုပါဘူး။ သင် Google Colab notebook ကနေ အလုပ်လုပ်နေတယ်ဆိုရင်၊ share link တစ်ခုကို အမြဲတမ်း အလိုအလျောက် ဖန်တီးပေးပါတယ်။ ဒါက များသောအားဖြင့် <strong>XXXXX.gradio.app</strong> လိုမျိုး ပုံစံရှိပါတယ်။ link က Gradio link မှတစ်ဆင့် ဝန်ဆောင်မှုပေးတာဖြစ်ပေမယ့်၊ ကျွန်တော်တို့က သင့် local server အတွက် proxy သာ ဖြစ်ပြီး၊ interfaces မှတစ်ဆင့် ပေးပို့တဲ့ data တွေကို သိမ်းဆည်းထားခြင်း မရှိပါဘူး။</p> <p data-svelte-h="svelte-1lflq8q">သို့သော်လည်း၊ ဒီ links တွေက အများပြည်သူ ဝင်ရောက်ကြည့်ရှုနိုင်တယ်ဆိုတာကို မှတ်သားထားပါ။ ဆိုလိုတာက ဘယ်သူမဆို သင့် model ကို prediction အတွက် အသုံးပြုနိုင်ပါတယ်။ ဒါကြောင့်၊ သင်ရေးတဲ့ functions တွေကနေတစ်ဆင့် ထိခိုက်လွယ်တဲ့ အချက်အလက်တွေကို မဖော်ထုတ်မိဖို့ ဒါမှမဟုတ် သင့် device ပေါ်မှာ အရေးကြီးတဲ့ ပြောင်းလဲမှုတွေ မဖြစ်အောင် သေချာဂရုစိုက်ပါ။ သင် <code>share=False</code> လို့ သတ်မှတ်ရင် (default အနေအထား)၊ local link တစ်ခုသာ ဖန်တီးပါလိမ့်မယ်။</p> <h3 class="relative group"><a id="hosting-your-demo-on-hugging-face-spaces" 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="#hosting-your-demo-on-hugging-face-spaces"><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>Hugging Face Spaces မှာ သင့် Demo ကို Hosting လုပ်ခြင်း</span></h3> <p data-svelte-h="svelte-103s4mr">လုပ်ဖော်ကိုင်ဖက်တွေကို မျှဝေနိုင်တဲ့ share link တစ်ခုက ကောင်းပေမယ့်၊ သင့် demo ကို အင်တာနက်ပေါ်မှာ သူ့ရဲ့ကိုယ်ပိုင် “space” တစ်ခုအဖြစ် အမြဲတမ်း ဘယ်လို hosting လုပ်မလဲ။</p> <p data-svelte-h="svelte-1dbnv2v">Hugging Face Spaces က သင့် Gradio model ကို အင်တာနက်ပေါ်မှာ အမြဲတမ်း hosting လုပ်ဖို့အတွက် infrastructure ကို <strong>အခမဲ့</strong> ပံ့ပိုးပေးပါတယ်။ Spaces က သင့်ကို (public ဒါမှမဟုတ် private) repo တစ်ခုကို ဖန်တီးပြီး push လုပ်ခွင့်ပေးပါတယ်။
အဲဒီမှာ သင်ရဲ့ Gradio interface code က <code>app.py</code> file ထဲမှာ ရှိနေပါလိမ့်မယ်။ စတင်ဖို့အတွက် <a href="https://huggingface.co/blog/gradio-spaces" rel="nofollow">step-by-step tutorial ကို ဖတ်ပါ</a> ဒါမှမဟုတ် အောက်ပါ ဥပမာဗီဒီယိုကို ကြည့်ပါ။</p> <iframe class="w-full xl:w-4/6 h-80" src="https://www.youtube-nocookie.com/embed/LS9Y2wDVI0k" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> <h2 class="relative group"><a id="lets-apply-it" 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="#lets-apply-it"><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>✏️ စတင်အသုံးပြုကြစို့!</span></h2> <p data-svelte-h="svelte-1xdjw7m">ဒီအပိုင်းတွေမှာ ကျွန်တော်တို့ သင်ယူခဲ့တာတွေကို အသုံးပြုပြီး၊ <a href="/course/chapter9/1">ဒီအခန်းရဲ့ ပထမအပိုင်း</a> မှာ တွေ့ခဲ့ရတဲ့ sketch recognition demo ကို ဖန်တီးကြရအောင်။ ကျွန်တော်တို့ interface မှာ customization အချို့ ထပ်ထည့်ပြီး၊ မျှဝေနိုင်တဲ့ public link တစ်ခု ဖန်တီးဖို့ <code>share=True</code> လို့ သတ်မှတ်ပါမယ်။</p> <p data-svelte-h="svelte-1xaj3cd"><a href="https://huggingface.co/spaces/dawood/Sketch-Recognition/blob/main/class_names.txt" rel="nofollow">class_names.txt</a> ကနေ labels တွေကို load လုပ်ပြီး၊ <a href="https://huggingface.co/spaces/dawood/Sketch-Recognition/blob/main/pytorch_model.bin" rel="nofollow">pytorch_model.bin</a> ကနေ pre-trained pytorch model ကို load လုပ်နိုင်ပါတယ်။ ဒီ files တွေကို download လုပ်ဖို့ link ကို နှိပ်ပြီး file preview ရဲ့ ထိပ်ဘယ်ဘက်ထောင့်မှာရှိတဲ့ download ကို နှိပ်ပါ။ ဒီ files တွေကို အသုံးပြုပြီး ကျွန်တော်တို့ model ကို ဘယ်လို load လုပ်ပြီး <code>predict()</code> function ကို ဖန်တီးရမလဲဆိုတာ အောက်ပါ code ကို ကြည့်ရအောင်။</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> pathlib <span class="hljs-keyword">import</span> Path
<span class="hljs-keyword">import</span> torch
<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
<span class="hljs-keyword">from</span> torch <span class="hljs-keyword">import</span> nn
LABELS = Path(<span class="hljs-string">&quot;class_names.txt&quot;</span>).read_text().splitlines()
model = nn.Sequential(
 nn.Conv2d(<span class="hljs-number">1</span>, <span class="hljs-number">32</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">&quot;same&quot;</span>),
 nn.ReLU(),
 nn.MaxPool2d(<span class="hljs-number">2</span>),
 nn.Conv2d(<span class="hljs-number">32</span>, <span class="hljs-number">64</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">&quot;same&quot;</span>),
 nn.ReLU(),
 nn.MaxPool2d(<span class="hljs-number">2</span>),
 nn.Conv2d(<span class="hljs-number">64</span>, <span class="hljs-number">128</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">&quot;same&quot;</span>),
 nn.ReLU(),
 nn.MaxPool2d(<span class="hljs-number">2</span>),
 nn.Flatten(),
 nn.Linear(<span class="hljs-number">1152</span>, <span class="hljs-number">256</span>),
 nn.ReLU(),
 nn.Linear(<span class="hljs-number">256</span>, <span class="hljs-built_in">len</span>(LABELS)),
)
state_dict = torch.load(<span class="hljs-string">&quot;pytorch_model.bin&quot;</span>, map_location=<span class="hljs-string">&quot;cpu&quot;</span>)
model.load_state_dict(state_dict, strict=<span class="hljs-literal">False</span>)
model.<span class="hljs-built_in">eval</span>()
<span class="hljs-keyword">def</span> <span class="hljs-title function_">predict</span>(<span class="hljs-params">im</span>):
 x = torch.tensor(im, dtype=torch.float32).unsqueeze(<span class="hljs-number">0</span>).unsqueeze(<span class="hljs-number">0</span>) / <span class="hljs-number">255.0</span>
 <span class="hljs-keyword">with</span> torch.no_grad():
 out = model(x)
 probabilities = torch.nn.functional.softmax(out[<span class="hljs-number">0</span>], dim=<span class="hljs-number">0</span>)
 values, indices = torch.topk(probabilities, <span class="hljs-number">5</span>)
 <span class="hljs-keyword">return</span> {LABELS[i]: v.item() <span class="hljs-keyword">for</span> i, v <span class="hljs-keyword">in</span> <span class="hljs-built_in">zip</span>(indices, values)}<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-r9rlkc">အခု ကျွန်တော်တို့မှာ <code>predict()</code> function ရှိပြီဆိုတော့၊ နောက်တစ်ဆင့်ကတော့ ကျွန်တော်တို့ရဲ့ gradio interface ကို သတ်မှတ်ပြီး 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 -->interface = gr.Interface(
 predict,
 inputs=<span class="hljs-string">&quot;sketchpad&quot;</span>,
 outputs=<span class="hljs-string">&quot;label&quot;</span>,
 theme=<span class="hljs-string">&quot;huggingface&quot;</span>,
 title=<span class="hljs-string">&quot;ပုံဆွဲခြင်းကို အသိအမှတ်ပြုခြင်း&quot;</span>,
 description=<span class="hljs-string">&quot;Pictionary ကစားချင်သူများ ရှိပါသလား။ ဂေါ်ပြား ဒါမှမဟုတ် laptop လိုမျိုး အရာဝတ္ထုတစ်ခုကို ဆွဲကြည့်ပါ။ algorithm က အချိန်နှင့်တစ်ပြေးညီ ခန့်မှန်းပေးပါလိမ့်မယ်။&quot;</span>,
 article=<span class="hljs-string">&quot;&lt;p style=&#x27;text-align: center&#x27;&gt;Sketch Recognition | Demo Model&lt;/p&gt;&quot;</span>,
 live=<span class="hljs-literal">True</span>,
)
interface.launch(share=<span class="hljs-literal">True</span>)<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-Sketch-Recognition.hf.space" frameborder="0" height="650" 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-1gbkwjf"><code>Interface</code> ထဲမှာ <code>live=True</code> parameter ကို သတိပြုပါ။ ဒါက sketch demo က sketchpad ပေါ်မှာ တစ်စုံတစ်ယောက် ဆွဲတိုင်း (submit button မပါဘဲ) prediction လုပ်တယ်လို့ ဆိုလိုပါတယ်။</p> <p data-svelte-h="svelte-1vxhvcb">ဒါ့အပြင်၊ <code>launch()</code> method မှာ <code>share=True</code> argument ကိုလည်း ကျွန်တော်တို့ သတ်မှတ်ခဲ့ပါတယ်။
ဒါက သင်ဘယ်သူ့ကိုမဆို ပေးပို့နိုင်တဲ့ public link တစ်ခုကို ဖန်တီးပေးပါလိမ့်မယ်! ဒီ link ကို သင်ပေးပို့တဲ့အခါ၊ တစ်ဖက်က user က sketch recognition model ကို စမ်းသပ်နိုင်ပါတယ်။ ထပ်မံပြောရရင်၊ model ကို Hugging Face Spaces မှာလည်း host လုပ်နိုင်ပါတယ်။ အပေါ်က demo ကို ကျွန်တော်တို့ embed လုပ်နိုင်တာ ဒီနည်းလမ်းနဲ့ပါပဲ။</p> <p data-svelte-h="svelte-lptteq">နောက်တစ်ခုကတော့ Hugging Face ecosystem နဲ့ Gradio ကို အသုံးပြုနိုင်တဲ့ တခြားနည်းလမ်းတွေကို ကျွန်တော်တို့ ဖော်ပြပေးပါမယ်။</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-1cvnpu9"><li><strong>Temporary Share Link</strong>: Gradio demo ကို အချိန်အကန့်အသတ်တစ်ခု (ဥပမာ- ၇၂ နာရီ) အတွက် အများပြည်သူ ဝင်ရောက်ကြည့်ရှုနိုင်အောင် ဖန်တီးပေးသော link။</li> <li><strong>Permanent Hosting on Spaces</strong>: Hugging Face Spaces ပေါ်တွင် Gradio demo ကို အမြဲတမ်း hosting လုပ်ခြင်း။</li> <li><strong><code>Interface</code> Class</strong>: Gradio library ၏ အဓိက class ဖြစ်ပြီး Machine Learning model များအတွက် web-based demo များကို ဖန်တီးရန် အသုံးပြုသည်။</li> <li><strong>Optional Parameters</strong>: Function သို့မဟုတ် class တစ်ခု၏ လုပ်ဆောင်ချက်ကို ပြောင်းလဲနိုင်သော်လည်း မဖြစ်မနေ ထည့်သွင်းရန် မလိုအပ်သော inputs များ။</li> <li><strong><code>title</code> Parameter</strong>: Gradio demo အတွက် ခေါင်းစဉ်ကို သတ်မှတ်သည်။</li> <li><strong><code>description</code> Parameter</strong>: Gradio interface အတွက် ဖော်ပြချက် (text, Markdown, သို့မဟုတ် HTML) ကို သတ်မှတ်သည်။</li> <li><strong><code>article</code> Parameter</strong>: Gradio interface အကြောင်း ပိုမိုကျယ်ပြန့်သော ဖော်ပြချက် (text, Markdown, သို့မဟုတ် HTML) ကို သတ်မှတ်သည်။</li> <li><strong><code>theme</code> Parameter</strong>: Gradio interface ၏ အသွင်အပြင် (color scheme) ကို သတ်မှတ်သည်။</li> <li><strong><code>examples</code> Parameter</strong>: Gradio function အတွက် ဥပမာ input များကို ပံ့ပိုးပေးသည်။</li> <li><strong>Nested List</strong>: list အတွင်း၌ အခြား list များ ပါဝင်သော list။</li> <li><strong>UI Components (User Interface Components)</strong>: အသုံးပြုသူများနှင့် အပြန်အလှန်တုံ့ပြန်နိုင်သော ဂရပ်ဖစ်ပုံစံ ဆော့ဖ်ဝဲလ် အစိတ်အပိုင်းများ (ဥပမာ- buttons, textboxes)။</li> <li><strong><code>live=True</code> Parameter</strong>: Gradio demo ကို input ပြောင်းလဲတိုင်း model ကို ပြန်လည် run စေသည်။ Real-time interactions များအတွက် အသုံးပြုသည်။</li> <li><strong><code>predict</code> Function</strong>: Gradio Interface မှ wrap လုပ်ထားသော Python function ဖြစ်ပြီး input ကိုယူကာ output ကို ပြန်ပေးသည်။</li> <li><strong><code>textbox</code></strong>: Gradio ၏ input component တစ်မျိုးဖြစ်ပြီး အသုံးပြုသူအား စာသားများ ရိုက်ထည့်ရန် ခွင့်ပြုသည်။</li> <li><strong><code>text</code></strong>: Gradio ၏ output component တစ်မျိုးဖြစ်ပြီး စာသား output ကို ပြသသည်။</li> <li><strong><code>launch()</code> Method</strong>: Gradio Interface ကို web server တစ်ခုအဖြစ် စတင်လုပ်ဆောင်သည်။</li> <li><strong><code>share=True</code> Parameter</strong>: <code>launch()</code> method တွင် Gradio Interface အတွက် public, shareable link တစ်ခုကို ဖန်တီးရန် သတ်မှတ်သည်။</li> <li><strong>Google Colab Notebook</strong>: Google မှ ပံ့ပိုးပေးထားသော cloud-based Jupyter Notebook environment တစ်ခု။</li> <li><strong>Proxy</strong>: ကွန်ပျူတာကွန်ရက်တွင် client နှင့် server အကြား ကြားခံအဖြစ် ဆောင်ရွက်သော ဆာဗာ။</li> <li><strong>Local Server</strong>: သင့်ကွန်ပျူတာပေါ်တွင်သာ လုပ်ဆောင်သော web server။</li> <li><strong>Sensitive Information</strong>: လျှို့ဝှက်ထားသင့်သော သို့မဟုတ် အကာအကွယ်ပေးထားသင့်သော အချက်အလက်များ။</li> <li><strong>Hugging Face Spaces</strong>: Hugging Face Hub ၏ အစိတ်အပိုင်းတစ်ခုဖြစ်ပြီး Gradio ကဲ့သို့သော library များကို အသုံးပြု၍ Machine Learning demos များကို host လုပ်ပြီး မျှဝေနိုင်သည်။</li> <li><strong>Infrastructure</strong>: စနစ်တစ်ခု သို့မဟုတ် ဝန်ဆောင်မှုတစ်ခု လုပ်ဆောင်နိုင်ရန် လိုအပ်သော အခြေခံစနစ်များနှင့် အရင်းအမြစ်များ။</li> <li><strong>Public/Private Repo</strong>: အများပြည်သူ ဝင်ရောက်ကြည့်ရှုနိုင်သော (public) သို့မဟုတ် သတ်မှတ်ထားသူများသာ ဝင်ရောက်ကြည့်ရှုနိုင်သော (private) Git repository။</li> <li><strong><code>app.py</code> File</strong>: Hugging Face Spaces တွင် Gradio application ၏ code ကို သိမ်းဆည်းထားသော အဓိက Python file။</li> <li><strong>Sketch Recognition Demo</strong>: လက်ဆွဲပုံများကို AI က အသိအမှတ်ပြုခြင်းကို ပြသသော demo။</li> <li><strong><code>class_names.txt</code></strong>: ပုံဆွဲခြင်းကို အသိအမှတ်ပြုမည့် labels များ ပါဝင်သော text file။</li> <li><strong><code>pytorch_model.bin</code></strong>: PyTorch format ဖြင့် သိမ်းဆည်းထားသော pretrained model ၏ binary file။</li> <li><strong>PyTorch Model</strong>: PyTorch framework ဖြင့် တည်ဆောက်ထားသော Machine Learning model။</li> <li><strong><code>Pathlib</code></strong>: Python standard library မှ module တစ်ခုဖြစ်ပြီး file system paths များကို object-oriented ပုံစံဖြင့် ကိုင်တွယ်ရန်။</li> <li><strong><code>torch</code></strong>: PyTorch framework ကို ကိုယ်စားပြုသော Python library။</li> <li><strong><code>torch.nn</code> (Neural Networks Module)</strong>: PyTorch တွင် Neural Network layers များနှင့် modules များကို တည်ဆောက်ရန်။</li> <li><strong><code>nn.Sequential</code></strong>: PyTorch တွင် layers များကို အစဉ်အတိုင်း စုစည်းရန်။</li> <li><strong><code>nn.Conv2d</code> (Convolutional Layer)</strong>: Convolutional Neural Network (CNN) တွင် ပုံရိပ်များမှ feature များကို ထုတ်ယူရန်။</li> <li><strong><code>nn.ReLU</code> (Rectified Linear Unit)</strong>: Neural Network တွင် အသုံးပြုသော activation function။</li> <li><strong><code>nn.MaxPool2d</code> (Max Pooling Layer)</strong>: CNN တွင် feature maps ၏ အရွယ်အစားကို လျှော့ချရန်။</li> <li><strong><code>nn.Flatten</code></strong>: multi-dimensional tensor ကို 1D tensor အဖြစ် ပြောင်းလဲရန်။</li> <li><strong><code>nn.Linear</code> (Linear Layer/Dense Layer)</strong>: Neural Network တွင် input နှင့် output ကြား linear transformation ကို လုပ်ဆောင်ရန်။</li> <li><strong><code>state_dict</code></strong>: PyTorch model ၏ parameters (weights and biases) များကို သိမ်းဆည်းထားသော dictionary။</li> <li><strong><code>torch.load()</code></strong>: PyTorch object များကို file မှ load လုပ်ရန်။</li> <li><strong><code>map_location=&quot;cpu&quot;</code></strong>: GPU ရှိ model ကို CPU သို့ load လုပ်ရန်။</li> <li><strong><code>model.load_state_dict()</code></strong>: model ၏ parameters များကို <code>state_dict</code> မှ load လုပ်ရန်။</li> <li><strong><code>strict=False</code></strong>: <code>state_dict</code> တွင် model ၌ မရှိသော keys များ ပါဝင်နေလျှင်ပင် load လုပ်ခွင့်ပြုရန်။</li> <li><strong><code>model.eval()</code></strong>: model ကို evaluation mode သို့ ပြောင်းလဲရန်။ training-specific behaviors များကို ပိတ်ထားသည်။</li> <li><strong><code>torch.tensor()</code></strong>: Python list သို့မဟုတ် NumPy array မှ PyTorch tensor ကို ဖန်တီးရန်။</li> <li><strong><code>dtype=torch.float32</code></strong>: tensor ၏ data type ကို float32 အဖြစ် သတ်မှတ်ရန်။</li> <li><strong><code>.unsqueeze(0)</code></strong>: tensor ၏ dimension ကို ထပ်ထည့်ရန်။ ဥပမာ- (H, W) ကို (1, H, W) သို့။</li> <li><strong><code>/ 255.0</code></strong>: pixel values များကို 0-1 အတိုင်းအတာသို့ scale ချရန် (normalization)။</li> <li><strong><code>torch.no_grad()</code></strong>: gradient တွက်ချက်မှုများကို ပိတ်ထားသော context manager။ Inference အတွက် memory သုံးစွဲမှုကို လျှော့ချသည်။</li> <li><strong><code>torch.nn.functional.softmax()</code></strong>: output logits များကို probabilities အဖြစ် ပြောင်းလဲရန် softmax function ကို အသုံးပြုသည်။</li> <li><strong><code>dim=0</code></strong>: softmax ကို မည်သည့် dimension ပေါ်တွင် အသုံးပြုမည်ကို သတ်မှတ်သည်။</li> <li><strong><code>torch.topk()</code></strong>: tensor တစ်ခု၏ ထိပ်ဆုံး <code>k</code> တန်ဖိုးများနှင့် ၎င်းတို့၏ indices များကို ပြန်ပေးသည်။</li> <li><strong><code>sketchpad</code></strong>: Gradio ၏ input component တစ်မျိုးဖြစ်ပြီး အသုံးပြုသူအား ပုံဆွဲရန် ခွင့်ပြုသည်။</li> <li><strong><code>label</code> (Gradio output component)</strong>: Gradio ၏ output component တစ်မျိုးဖြစ်ပြီး အမျိုးအစားခွဲခြားမှု ရလဒ်များကို ပြသသည်။</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/4.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, 97],
 data,
 form: null,
 error: null
 });
 });
 }
 </script>

Xet Storage Details

Size:
55 kB
·
Xet hash:
2ae9a1b05920122c3e5e285c234943ee74df9cc0b5991a0e1b7ef7345066f28a

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.