Hugging Face's logo

Buckets:
hf-doc-build
/
doc-dev

Files
xet
hf-doc-build/doc-dev / course /pr_1095 /my /chapter9 /6.html
rtrm's picture
rtrm
download
raw
35.3 kB
<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Advanced Interface Features များ&quot;,&quot;local&quot;:&quot;advanced-interface-features&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Data ကို ဆက်လက်တည်ရှိစေရန် State ကို အသုံးပြုခြင်း&quot;,&quot;local&quot;:&quot;using-state-to-persist-data&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Predictions များကို နားလည်ရန် Interpretation ကို အသုံးပြုခြင်း&quot;,&quot;local&quot;:&quot;using-interpretation-to-understand-predictions&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&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/99.d21a8722.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;Advanced Interface Features များ&quot;,&quot;local&quot;:&quot;advanced-interface-features&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Data ကို ဆက်လက်တည်ရှိစေရန် State ကို အသုံးပြုခြင်း&quot;,&quot;local&quot;:&quot;using-state-to-persist-data&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Predictions များကို နားလည်ရန် Interpretation ကို အသုံးပြုခြင်း&quot;,&quot;local&quot;:&quot;using-interpretation-to-understand-predictions&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&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="advanced-interface-features" 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="#advanced-interface-features"><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>Advanced Interface Features များ</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/section6.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/section6.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-1p21fr3">အခု ကျွန်တော်တို့ အခြေခံ interface တစ်ခုကို တည်ဆောက်ပြီး မျှဝေနိုင်ပြီဆိုတော့၊ state နဲ့ interpretation လိုမျိုး ပိုပြီး အဆင့်မြင့်တဲ့ features တွေကို လေ့လာကြည့်ကြရအောင်။</p> <h3 class="relative group"><a id="using-state-to-persist-data" 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="#using-state-to-persist-data"><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>Data ကို ဆက်လက်တည်ရှိစေရန် State ကို အသုံးပြုခြင်း</span></h3> <p data-svelte-h="svelte-9j36hp">Gradio က session state ကို ထောက်ပံ့ပေးပါတယ်၊ ဒါက page load တစ်ခုအတွင်း multiple submits တွေမှာ data ကို ဆက်လက်တည်ရှိစေပါတယ်။ Session state က chatbot တွေလို demos တွေ တည်ဆောက်တဲ့အခါ အသုံးဝင်ပါတယ်၊ အဲဒီမှာ user က model နဲ့ အပြန်အလှန်တုံ့ပြန်နေချိန်မှာ data ကို ဆက်လက်တည်ရှိစေချင်ပါတယ်။ session state က သင့် model ရဲ့ မတူညီတဲ့ users တွေကြား data ကို မျှဝေခြင်း မရှိဘူးဆိုတာ သတိပြုပါ။</p> <p data-svelte-h="svelte-cxhhln">data ကို session state မှာ သိမ်းဆည်းဖို့အတွက်၊ အချက်သုံးခုကို လုပ်ဖို့ လိုအပ်ပါတယ်။</p> <p data-svelte-h="svelte-jhjje8">၁။ သင့် function ထဲမှာ interface ရဲ့ state ကို ကိုယ်စားပြုတဲ့ <em>extra parameter</em> တစ်ခုကို ထည့်ပါ။
၂။ function ရဲ့ အဆုံးမှာ၊ state ရဲ့ update လုပ်ထားတဲ့ value ကို <em>extra return value</em> အဖြစ် ပြန်ပေးပါ။
၃။ သင့် <code>Interface</code> ကို ဖန်တီးတဲ့အခါ ‘state’ input နဲ့ ‘state’ output components တွေကို ထည့်ပါ။</p> <p data-svelte-h="svelte-2egue2">အောက်ပါ chatbot ဥပမာကို ကြည့်ပါ။</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> random
<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_">chat</span>(<span class="hljs-params">message, history</span>):
 history = history <span class="hljs-keyword">or</span> []
 <span class="hljs-keyword">if</span> message.startswith(<span class="hljs-string">&quot;How many&quot;</span>):
 response = random.randint(<span class="hljs-number">1</span>, <span class="hljs-number">10</span>)
 <span class="hljs-keyword">elif</span> message.startswith(<span class="hljs-string">&quot;How&quot;</span>):
 response = random.choice([<span class="hljs-string">&quot;Great&quot;</span>, <span class="hljs-string">&quot;Good&quot;</span>, <span class="hljs-string">&quot;Okay&quot;</span>, <span class="hljs-string">&quot;Bad&quot;</span>])
 <span class="hljs-keyword">elif</span> message.startswith(<span class="hljs-string">&quot;Where&quot;</span>):
 response = random.choice([<span class="hljs-string">&quot;Here&quot;</span>, <span class="hljs-string">&quot;There&quot;</span>, <span class="hljs-string">&quot;Somewhere&quot;</span>])
 <span class="hljs-keyword">else</span>:
 response = <span class="hljs-string">&quot;I don&#x27;t know&quot;</span>
 history.append((message, response))
 <span class="hljs-keyword">return</span> history, history
iface = gr.Interface(
 chat,
 [<span class="hljs-string">&quot;text&quot;</span>, <span class="hljs-string">&quot;state&quot;</span>],
 [<span class="hljs-string">&quot;chatbot&quot;</span>, <span class="hljs-string">&quot;state&quot;</span>],
 allow_screenshot=<span class="hljs-literal">False</span>,
 allow_flagging=<span class="hljs-string">&quot;never&quot;</span>,
)
iface.launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-Chatbot-Demo.hf.space" frameborder="0" height="350" 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-17fj15u">output component ရဲ့ state က submits တွေအကြား ဘယ်လို ဆက်လက်တည်ရှိနေလဲဆိုတာ သတိပြုပါ။
မှတ်ချက်- state parameter ကို default value တစ်ခု ပေးနိုင်ပါတယ်။ ဒါကို state ရဲ့ initial value အဖြစ် အသုံးပြုပါတယ်။</p> <h3 class="relative group"><a id="using-interpretation-to-understand-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="#using-interpretation-to-understand-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>Predictions များကို နားလည်ရန် Interpretation ကို အသုံးပြုခြင်း</span></h3> <p data-svelte-h="svelte-1if8sag">machine learning models အများစုဟာ black boxes တွေဖြစ်ပြီး function ရဲ့ အတွင်းပိုင်း logic ကို end user ကနေ ဖုံးကွယ်ထားပါတယ်။ ပွင့်လင်းမြင်သာမှုကို မြှင့်တင်ဖို့အတွက်၊ Interface class ထဲက interpretation keyword ကို default အဖြစ် သတ်မှတ်ခြင်းဖြင့် သင့် model မှာ interpretation ကို ထည့်သွင်းဖို့ အလွန်လွယ်ကူအောင် ကျွန်တော်တို့ လုပ်ခဲ့ပါတယ်။ ဒါက သင့် users တွေကို input ရဲ့ ဘယ်အပိုင်းတွေက output အတွက် တာဝန်ရှိလဲဆိုတာ နားလည်စေပါတယ်။ အောက်ပါ ရိုးရှင်းတဲ့ interface ကို ကြည့်ပါ။ ဒါက image classifier တစ်ခုကို interpretation နဲ့အတူ ပြသထားပါတယ်။</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> requests
<span class="hljs-keyword">import</span> tensorflow <span class="hljs-keyword">as</span> tf
<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
inception_net = tf.keras.applications.MobileNetV2() <span class="hljs-comment"># load the model</span>
<span class="hljs-comment"># Download human-readable labels for ImageNet.</span>
response = requests.get(<span class="hljs-string">&quot;https://git.io/JJkYN&quot;</span>)
labels = response.text.split(<span class="hljs-string">&quot;\n&quot;</span>)
<span class="hljs-keyword">def</span> <span class="hljs-title function_">classify_image</span>(<span class="hljs-params">inp</span>):
 inp = inp.reshape((-<span class="hljs-number">1</span>, <span class="hljs-number">224</span>, <span class="hljs-number">224</span>, <span class="hljs-number">3</span>))
 inp = tf.keras.applications.mobilenet_v2.preprocess_input(inp)
 prediction = inception_net.predict(inp).flatten()
 <span class="hljs-keyword">return</span> {labels[i]: <span class="hljs-built_in">float</span>(prediction[i]) <span class="hljs-keyword">for</span> i <span class="hljs-keyword">in</span> <span class="hljs-built_in">range</span>(<span class="hljs-number">1000</span>)}
image = gr.Image(shape=(<span class="hljs-number">224</span>, <span class="hljs-number">224</span>))
label = gr.Label(num_top_classes=<span class="hljs-number">3</span>)
title = <span class="hljs-string">&quot;Gradio Image Classifiction + Interpretation Example&quot;</span>
gr.Interface(
 fn=classify_image, inputs=image, outputs=label, interpretation=<span class="hljs-string">&quot;default&quot;</span>, title=title
).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-1yd9n0v">input တစ်ခုကို submit လုပ်ပြီး output component အောက်က Interpret ကို နှိပ်ခြင်းဖြင့် interpretation function ကို စမ်းသပ်ပါ။</p> <iframe src="https://course-demos-gradio-image-interpretation.hf.space" frameborder="0" height="570" 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-xo0tk2">Gradio က ပံ့ပိုးပေးတဲ့ default interpretation method အပြင်၊ <code>interpretation</code> parameter အတွက် <code>shap</code> ကိုလည်း သတ်မှတ်နိုင်ပြီး <code>num_shap</code> parameter ကို သတ်မှတ်နိုင်ပါတယ်။ ဒါက Shapley-based interpretation ကို အသုံးပြုပါတယ်။ ဒီအကြောင်းကို <a href="https://christophm.github.io/interpretable-ml-book/shap.html" rel="nofollow">ဒီနေရာမှာ</a> ပိုပြီး ဖတ်ရှုနိုင်ပါတယ်။
နောက်ဆုံးအနေနဲ့၊ သင်ကိုယ်ပိုင် interpretation function ကို <code>interpretation</code> parameter ထဲမှာလည်း ထည့်သွင်းနိုင်ပါတယ်။ Gradio ရဲ့ getting started page <a href="https://gradio.app/getting_started/" rel="nofollow">ဒီနေရာမှာ</a> ဥပမာတစ်ခုကို ကြည့်ပါ။</p> <p data-svelte-h="svelte-6zntls">ဒါက Gradio ရဲ့ <code>Interface</code> class ကို ကျွန်တော်တို့ နက်နက်နဲနဲ လေ့လာတာကို အဆုံးသတ်လိုက်ပါပြီ။ ကျွန်တော်တို့ တွေ့ခဲ့ရတဲ့အတိုင်း၊ ဒီ class က Python code လိုင်းအနည်းငယ်နဲ့ machine learning demos တွေကို ရိုးရှင်းစွာ ဖန်တီးနိုင်စေပါတယ်။ သို့သော်လည်း၊ တစ်ခါတစ်ရံမှာ layout ပြောင်းလဲခြင်း ဒါမှမဟုတ် multiple prediction functions တွေကို ဆက်စပ်ခြင်းဖြင့် သင့် demo ကို စိတ်ကြိုက်ပြင်ဆင်ချင်ပါလိမ့်မယ်။ <code>Interface</code> ကို စိတ်ကြိုက်ပြင်ဆင်နိုင်တဲ့ “blocks” တွေအဖြစ် ခွဲထုတ်နိုင်ရင် ကောင်းမှာပဲနော်။ ကံကောင်းစွာနဲ့ပဲ အဲဒီလို လုပ်လို့ရပါတယ်! ဒါက နောက်ဆုံးအပိုင်းရဲ့ ခေါင်းစဉ်ပါပဲ။</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-87w3so"><li><strong>Advanced Features</strong>: ဆော့ဖ်ဝဲလ်တစ်ခု၏ ပုံမှန်လုပ်ဆောင်နိုင်စွမ်းများထက် ပိုမိုရှုပ်ထွေးသော သို့မဟုတ် သီးခြားလုပ်ဆောင်ချက်များ။</li> <li><strong>State (Session State)</strong>: Gradio demo ၏ page load တစ်ခုအတွင်း ဖြတ်သန်းသွားသော multiple submits များတစ်လျှောက် ဒေတာများ ဆက်လက်တည်ရှိနေခြင်း။ ၎င်းသည် chatbot များကဲ့သို့ အပြန်အလှန်တုံ့ပြန်မှုများတွင် အသုံးဝင်သည်။</li> <li><strong>Interpretation</strong>: Machine Learning model တစ်ခု၏ prediction များကို မည်သည့် input အစိတ်အပိုင်းများက လွှမ်းမိုးသည်ကို နားလည်စေရန် ကူညီပေးသော နည်းလမ်း။</li> <li><strong>Chatbots</strong>: လူသားများနှင့် စကားပြောဆိုနိုင်အောင် ဒီဇိုင်းထုတ်ထားသော ကွန်ပျူတာပရိုဂရမ်များ။</li> <li><strong>Default Value</strong>: parameter သို့မဟုတ် variable တစ်ခုအတွက် မည်သည့်တန်ဖိုးမျှ သတ်မှတ်မထားပါက အလိုအလျောက် အသုံးပြုသော တန်ဖိုး။</li> <li><strong>Black Boxes</strong>: အတွင်းပိုင်းလုပ်ဆောင်ချက်များ သို့မဟုတ် ဆုံးဖြတ်ချက်ချမှတ်ခြင်းများကို အလွယ်တကူ နားလည်ရန် မဖြစ်နိုင်သော စနစ်များ (Machine Learning Models များကဲ့သို့)။</li> <li><strong>Transparency</strong>: စနစ်တစ်ခု၏ လုပ်ဆောင်ပုံကို ရှင်းရှင်းလင်းလင်း မြင်သာပြီး နားလည်နိုင်ခြင်း။</li> <li><strong><code>interpretation</code> Keyword</strong>: <code>Interface</code> class တွင် interpretation method ကို သတ်မှတ်ရန် အသုံးပြုသော parameter (ဥပမာ- <code>&quot;default&quot;</code>, <code>&quot;shap&quot;</code>)။</li> <li><strong>Image Classifier</strong>: ပုံရိပ်များကို သတ်မှတ်ထားသော အမျိုးအစားများထဲသို့ ခွဲခြားသတ်မှတ်ပေးသော model။</li> <li><strong><code>requests</code> Library</strong>: Python တွင် HTTP requests များကို ပေးပို့ရန် အသုံးပြုသော library။</li> <li><strong><code>tensorflow</code> (TF)</strong>: Google မှ ထုတ်လုပ်သော open-source machine learning framework။</li> <li><strong><code>tf.keras.applications.MobileNetV2()</code></strong>: TensorFlow Keras library မှ MobileNetV2 architecture ကို load လုပ်ခြင်း။ Image classification အတွက် pre-trained model။</li> <li><strong><code>tf.keras.applications.mobilenet_v2.preprocess_input()</code></strong>: MobileNetV2 model အတွက် input image များကို သင့်လျော်သော format သို့ ပြင်ဆင်ခြင်း။</li> <li><strong><code>reshape()</code></strong>: NumPy array သို့မဟုတ် TensorFlow tensor ၏ shape ကို ပြောင်းလဲခြင်း။</li> <li><strong><code>flatten()</code></strong>: multi-dimensional array သို့မဟုတ် tensor ကို 1D array အဖြစ် ပြောင်းလဲခြင်း။</li> <li><strong><code>prediction</code></strong>: Model ၏ output ခန့်မှန်းချက်များ။</li> <li><strong><code>labels</code></strong>: ImageNet ကဲ့သို့သော dataset တွင် class အမျိုးအစားများ၏ လူသားဖတ်ရှုနိုင်သော နာမည်များ။</li> <li><strong><code>gr.Image</code> Component</strong>: Gradio ၏ input component တစ်မျိုးဖြစ်ပြီး အသုံးပြုသူအား ပုံရိပ်များကို upload လုပ်ရန် သို့မဟုတ် ပြသရန် ခွင့်ပြုသည်။</li> <li><strong><code>shape</code> Parameter (for <code>gr.Image</code>)</strong>: input image ၏ အလိုရှိသော width နှင့် height ကို သတ်မှတ်သည်။</li> <li><strong><code>gr.Label</code> Component</strong>: Gradio ၏ output component တစ်မျိုးဖြစ်ပြီး အမျိုးအစားခွဲခြားမှု ရလဒ်များကို percentage သို့မဟုတ် score များဖြင့် ပြသသည်။</li> <li><strong><code>num_top_classes</code> Parameter</strong>: <code>gr.Label</code> တွင် ထိပ်တန်း classes မည်မျှကို ပြသမည်ကို သတ်မှတ်သည်။</li> <li><strong><code>title</code> Parameter</strong>: Gradio demo အတွက် ခေါင်းစဉ်ကို သတ်မှတ်သည်။</li> <li><strong><code>interpret</code> Button</strong>: Gradio UI တွင် interpretation function ကို လုပ်ဆောင်ရန် ခလုတ်။</li> <li><strong><code>shap</code> (Shapley-based Interpretation)</strong>: Shapley values ကို အသုံးပြု၍ model ၏ prediction များတွင် input features များ၏ ပါဝင်ပံ့ပိုးမှုကို ရှင်းပြသော interpretation နည်းလမ်း။</li> <li><strong><code>num_shap</code> Parameter</strong>: Shapley-based interpretation အတွက် sample အရေအတွက်ကို သတ်မှတ်သည်။</li> <li><strong><code>Blocks</code></strong>: Gradio ၏ အဆင့်မြင့် component တစ်ခုဖြစ်ပြီး demos များကို ပိုမိုစိတ်ကြိုက်ပြင်ဆင်နိုင်သော layout များဖြင့် တည်ဆောက်ရန် ခွင့်ပြုသည်။ multiple components များကို တစ်ခုနှင့်တစ်ခု ဆက်စပ်၍ သို့မဟုတ် အပြိုင်တွဲ၍ အလုပ်လုပ်စေနိုင်သည်။</li> <li><strong>Layout</strong>: UI components များကို မျက်နှာပြင်ပေါ်တွင် မည်သို့ နေရာချထားသည်ကို ဖော်ပြသော ဒီဇိုင်း။</li> <li><strong>Chaining Multiple Prediction Functions</strong>: prediction functions များစွာကို အစဉ်အတိုင်း ဆက်စပ်ပြီး အလုပ်လုပ်စေခြင်း။</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/6.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, 99],
 data,
 form: null,
 error: null
 });
 });
 }
 </script>

Xet Storage Details

Size:
35.3 kB
·
Xet hash:
52a758d366a06bc86929a0cbc89b6a1235dcc3460417992ab8dfa5af05cf0329

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