course/pr_1095/my/chapter9/3.html

<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Interface class ကို နားလည်ခြင်း&quot;,&quot;local&quot;:&quot;understanding-the-interface-class&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Interface တစ်ခုကို ဘယ်လို ဖန်တီးမလဲ&quot;,&quot;local&quot;:&quot;how-to-create-an-interface&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Audio နဲ့ ရိုးရှင်းတဲ့ ဥပမာတစ်ခု&quot;,&quot;local&quot;:&quot;a-simple-example-with-audio&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Multiple Inputs နှင့် Outputs များကို ကိုင်တွယ်ခြင်း&quot;,&quot;local&quot;:&quot;handling-multiple-inputs-and-outputs&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;launch() method&quot;,&quot;local&quot;:&quot;the-launch-method&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&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/96.4a258c6e.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;Interface class ကို နားလည်ခြင်း&quot;,&quot;local&quot;:&quot;understanding-the-interface-class&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Interface တစ်ခုကို ဘယ်လို ဖန်တီးမလဲ&quot;,&quot;local&quot;:&quot;how-to-create-an-interface&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Audio နဲ့ ရိုးရှင်းတဲ့ ဥပမာတစ်ခု&quot;,&quot;local&quot;:&quot;a-simple-example-with-audio&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Multiple Inputs နှင့် Outputs များကို ကိုင်တွယ်ခြင်း&quot;,&quot;local&quot;:&quot;handling-multiple-inputs-and-outputs&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;launch() method&quot;,&quot;local&quot;:&quot;the-launch-method&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&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="understanding-the-interface-class" 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="#understanding-the-interface-class"><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>Interface class ကို နားလည်ခြင်း</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/section3.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/section3.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-1x7a0vn">ဒီအပိုင်းမှာ၊ ကျွန်တော်တို့ဟာ <code>Interface</code> class ကို ပိုပြီး နက်နက်နဲနဲ လေ့လာကြည့်ပြီး၊ အဲဒါကို ဖန်တီးရာမှာ အသုံးပြုတဲ့ အဓိက parameters တွေကို နားလည်အောင် ကြိုးစားပါမယ်။</p>  <h2 class="relative group"><a id="how-to-create-an-interface" 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="#how-to-create-an-interface"><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>Interface တစ်ခုကို ဘယ်လို ဖန်တီးမလဲ</span></h2> <p data-svelte-h="svelte-yj8m39"><code>Interface</code> class မှာ လိုအပ်တဲ့ parameters ၃ ခု ပါဝင်တာကို သင်သတိထားမိပါလိမ့်မယ်။</p> <p data-svelte-h="svelte-5xxju6"><code>Interface(fn, inputs, outputs, ...)</code></p> <p data-svelte-h="svelte-1mcmekj">ဒီ parameters တွေကတော့-</p> <ul data-svelte-h="svelte-lcvap1"><li><code>fn</code>: Gradio interface က wrap လုပ်ထားတဲ့ prediction function ပါ။ ဒီ function က parameters တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုတာကို ယူနိုင်ပြီး value တစ်ခု သို့မဟုတ် တစ်ခုထက်ပိုတာကို ပြန်ပေးနိုင်ပါတယ်။</li> <li><code>inputs</code>: input component အမျိုးအစား (များ) ပါ။ Gradio က <code>&quot;image&quot;</code> ဒါမှမဟုတ် <code>&quot;mic&quot;</code> လိုမျိုး ကြိုတင်တည်ဆောက်ထားတဲ့ components များစွာကို ပံ့ပိုးပေးပါတယ်။</li> <li><code>outputs</code>: output component အမျိုးအစား (များ) ပါ။ ဒီနေရာမှာလည်း Gradio က <code>&quot;image&quot;</code> ဒါမှမဟုတ် <code>&quot;label&quot;</code> လိုမျိုး ကြိုတင်တည်ဆောက်ထားတဲ့ components များစွာကို ပံ့ပိုးပေးပါတယ်။</li></ul> <p data-svelte-h="svelte-1niqv4l">components တွေရဲ့ အပြည့်အစုံစာရင်းအတွက် <a href="https://gradio.app/docs" rel="nofollow">Gradio docs ကို ကြည့်ပါ</a>။ ကြိုတင်တည်ဆောက်ထားတဲ့ component တစ်ခုစီကို component နဲ့ သက်ဆိုင်တဲ့ class ကို instantiate လုပ်ခြင်းဖြင့် စိတ်ကြိုက်ပြင်ဆင်နိုင်ပါတယ်။</p> <p data-svelte-h="svelte-1sd9sku">ဥပမာ၊ <a href="/course/chapter9/2">ယခင်အပိုင်း</a> မှာ ကျွန်တော်တို့ တွေ့ခဲ့ရတဲ့အတိုင်း၊ <code>inputs</code> parameter ကို <code>&quot;textbox&quot;</code> အဖြစ် ပေးမယ့်အစား၊ 7 lines နဲ့ label ပါတဲ့ textbox တစ်ခု ဖန်တီးဖို့ <code>Textbox(lines=7, label=&quot;Prompt&quot;)</code> component ကို ပေးနိုင်ပါတယ်။</p> <p data-svelte-h="svelte-pjkfv7">အခြားဥပမာတစ်ခုကို ကြည့်ရအောင်၊ ဒီတစ်ခါတော့ <code>Audio</code> component နဲ့ပါ။</p>  <h2 class="relative group"><a id="a-simple-example-with-audio" 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="#a-simple-example-with-audio"><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>Audio နဲ့ ရိုးရှင်းတဲ့ ဥပမာတစ်ခု</span></h2> <p data-svelte-h="svelte-16ln1re">အရင်က ပြောခဲ့သလိုပဲ၊ Gradio က input နဲ့ output အမျိုးအစားများစွာကို ပံ့ပိုးပေးပါတယ်။
ဒါကြောင့် audio နဲ့ အလုပ်လုပ်တဲ့ <code>Interface</code> တစ်ခုကို တည်ဆောက်ကြရအောင်။</p> <p data-svelte-h="svelte-1onqhkt">ဒီဥပမာမှာ၊ audio file တစ်ခုကို ယူပြီး ရိုးရှင်းစွာ ပြောင်းပြန်လှန်ပေးတဲ့ audio-to-audio function တစ်ခုကို ကျွန်တော်တို့ တည်ဆောက်ပါမယ်။</p> <p data-svelte-h="svelte-lmzx9e">input အတွက် <code>Audio</code> component ကို အသုံးပြုပါမယ်။ <code>Audio</code> component ကို အသုံးပြုတဲ့အခါ၊ audio ရဲ့ <code>source</code> ကို user က upload လုပ်တဲ့ file ဒါမှမဟုတ် user က အသံသွင်းတဲ့ microphone ဖြစ်မလားဆိုတာ သတ်မှတ်နိုင်ပါတယ်။ ဒီအခြေအနေမှာ၊ <code>microphone</code> ကို သတ်မှတ်ကြရအောင်။ ပျော်စရာအနေနဲ့၊ ကျွန်တော်တို့ရဲ့ <code>Audio</code> မှာ “Speak here…” လို့ ပြောတဲ့ label တစ်ခု ထည့်ပါမယ်။</p> <p data-svelte-h="svelte-1ghke8i">ဒါ့အပြင်၊ ကျွန်တော်တို့ အသံကို numpy array အဖြစ် လက်ခံချင်ပါတယ်။ ဒါမှ အဲဒါကို အလွယ်တကူ “reverse” လုပ်နိုင်မှာပါ။ ဒါကြောင့် input data ကို (<code>sample_rate</code>, <code>data</code>) tuple အဖြစ် ကျွန်တော်တို့ function ထဲကို ထည့်ပေးမယ့် <code>&quot;type&quot;</code> ကို <code>&quot;numpy&quot;</code> အဖြစ် သတ်မှတ်ပါမယ်။</p> <p data-svelte-h="svelte-usnoq0">sample rate နဲ့ data ရဲ့ numpy array ပါတဲ့ tuple တစ်ခုကို အလိုအလျောက်ဖွင့်နိုင်တဲ့ audio file အဖြစ် render လုပ်ပေးနိုင်တဲ့ <code>Audio</code> output component ကိုလည်း အသုံးပြုပါမယ်။ ဒီအခြေအနေမှာ၊ စိတ်ကြိုက်ပြင်ဆင်မှု (customization) လုပ်ဖို့ မလိုအပ်တဲ့အတွက် <code>&quot;audio&quot;</code> string shortcut ကို အသုံးပြုပါမယ်။</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> numpy <span class="hljs-keyword">as</span> np
<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_">reverse_audio</span>(<span class="hljs-params">audio</span>):
    sr, data = audio
    reversed_audio = (sr, np.flipud(data))
    <span class="hljs-keyword">return</span> reversed_audio


mic = gr.Audio(source=<span class="hljs-string">&quot;microphone&quot;</span>, <span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;numpy&quot;</span>, label=<span class="hljs-string">&quot;Speak here...&quot;</span>)
gr.Interface(reverse_audio, mic, <span class="hljs-string">&quot;audio&quot;</span>).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-6xifma">အထက်ပါ code က အောက်ပါအတိုင်း interface တစ်ခုကို ထုတ်ပေးပါလိမ့်မယ် (သင့် browser က microphone permissions အတွက် မမေးရင်၊ <a href="https://huggingface.co/spaces/course-demos/audio-reverse" target="_blank">demo ကို သီးခြား tab တစ်ခုမှာ ဖွင့်ပါ</a>)။</p> <iframe src="https://course-demos-audio-reverse.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-1cm0kaa">အခုဆိုရင် သင်ဟာ သင့်အသံကို မှတ်တမ်းတင်ပြီး ပြောင်းပြန်ပြောနေတာကို ကြားနိုင်ပါပြီ — ကြောက်စရာကောင်းလိုက်တာ 👻!</p>  <h2 class="relative group"><a id="handling-multiple-inputs-and-outputs" 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="#handling-multiple-inputs-and-outputs"><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>Multiple Inputs နှင့် Outputs များကို ကိုင်တွယ်ခြင်း</span></h2> <p data-svelte-h="svelte-1urimvd">ကျွန်တော်တို့မှာ multiple inputs နဲ့ outputs တွေပါတဲ့ ပိုရှုပ်ထွေးတဲ့ function တစ်ခုရှိတယ်လို့ ဆိုကြပါစို့။
အောက်ပါဥပမာမှာ၊ dropdown index တစ်ခု၊ slider value တစ်ခုနဲ့ number တစ်ခုကို ယူပြီး musical tone ရဲ့ audio sample ကို ပြန်ပေးတဲ့ function တစ်ခု ကျွန်တော်တို့မှာ ရှိပါတယ်။</p> <p data-svelte-h="svelte-14yvcmg">input နဲ့ output components တွေရဲ့ list ကို ဘယ်လိုပေးရလဲဆိုတာ ကြည့်ပြီး ဘာတွေဖြစ်နေလဲဆိုတာကို နားလည်အောင် ကြိုးစားကြည့်ပါ။</p> <p data-svelte-h="svelte-18d8vk8">ဒီနေရာမှာ အဓိကအချက်ကတော့ သင်ပေးတဲ့အခါ-</p> <ul data-svelte-h="svelte-1utn88v"><li>input components တွေရဲ့ list တစ်ခုစီဟာ parameter တစ်ခုစီနဲ့ အစီအစဉ်အတိုင်း ကိုက်ညီပါတယ်။</li> <li>output components တွေရဲ့ list တစ်ခုစီဟာ ပြန်ပေးတဲ့ value တစ်ခုစီနဲ့ ကိုက်ညီပါတယ်။</li></ul> <p data-svelte-h="svelte-2338xp">အောက်ပါ code snippet က input components သုံးခုဟာ <code>generate_tone()</code> function ရဲ့ arguments သုံးခုနဲ့ ဘယ်လို တန်းစီနေလဲဆိုတာကို ပြသထားပါတယ်။</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> numpy <span class="hljs-keyword">as</span> np
<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

notes = [<span class="hljs-string">&quot;C&quot;</span>, <span class="hljs-string">&quot;C#&quot;</span>, <span class="hljs-string">&quot;D&quot;</span>, <span class="hljs-string">&quot;D#&quot;</span>, <span class="hljs-string">&quot;E&quot;</span>, <span class="hljs-string">&quot;F&quot;</span>, <span class="hljs-string">&quot;F#&quot;</span>, <span class="hljs-string">&quot;G&quot;</span>, <span class="hljs-string">&quot;G#&quot;</span>, <span class="hljs-string">&quot;A&quot;</span>, <span class="hljs-string">&quot;A#&quot;</span>, <span class="hljs-string">&quot;B&quot;</span>]


<span class="hljs-keyword">def</span> <span class="hljs-title function_">generate_tone</span>(<span class="hljs-params">note, octave, duration</span>):
    sr = <span class="hljs-number">48000</span>
    a4_freq, tones_from_a4 = <span class="hljs-number">440</span>, <span class="hljs-number">12</span> * (octave - <span class="hljs-number">4</span>) + (note - <span class="hljs-number">9</span>)
    frequency = a4_freq * <span class="hljs-number">2</span> ** (tones_from_a4 / <span class="hljs-number">12</span>)
    duration = <span class="hljs-built_in">int</span>(duration)
    audio = np.linspace(<span class="hljs-number">0</span>, duration, duration * sr)
    audio = (<span class="hljs-number">20000</span> * np.sin(audio * (<span class="hljs-number">2</span> * np.pi * frequency))).astype(np.int16)
    <span class="hljs-keyword">return</span> (sr, audio)


gr.Interface(
    generate_tone,
    [
        gr.Dropdown(notes, <span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;index&quot;</span>),
        gr.Slider(minimum=<span class="hljs-number">4</span>, maximum=<span class="hljs-number">6</span>, step=<span class="hljs-number">1</span>),
        gr.Number(value=<span class="hljs-number">1</span>, label=<span class="hljs-string">&quot;Duration in seconds&quot;</span>),
    ],
    <span class="hljs-string">&quot;audio&quot;</span>,
).launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-generate-tone.hf.space" frameborder="0" height="450" 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="the-launch-method" 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="#the-launch-method"><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>launch() method</span></h3> <p data-svelte-h="svelte-1uuz63e">ဒီအထိတော့ ကျွန်တော်တို့ <code>launch()</code> method ကို interface ကို launch လုပ်ဖို့ အသုံးပြုခဲ့ကြပေမယ့်၊ ဒါက ဘာလုပ်လဲဆိုတာကို သေချာမဆွေးနွေးရသေးပါဘူး။</p> <p data-svelte-h="svelte-1ay5soc">default အားဖြင့်၊ <code>launch()</code> method က demo ကို local မှာ run နေတဲ့ web server တစ်ခုထဲမှာ launch လုပ်ပါလိမ့်မယ်။ သင် Jupyter ဒါမှမဟုတ် Colab notebook ထဲမှာ code ကို run နေတယ်ဆိုရင်၊ Gradio က demo GUI ကို notebook ထဲမှာ embed လုပ်ပါလိမ့်မယ်။ ဒါမှ သင်အလွယ်တကူ အသုံးပြုနိုင်မှာပါ။</p> <p data-svelte-h="svelte-qyi70t"><code>launch()</code> ရဲ့ behavior ကို parameters အမျိုးမျိုးကနေတစ်ဆင့် စိတ်ကြိုက်ပြင်ဆင်နိုင်ပါတယ်။</p> <ul data-svelte-h="svelte-1yv603e"><li><code>inline</code> - Python notebooks တွေမှာ interface ကို inline ပြသမလား။</li> <li><code>inbrowser</code> - default browser မှာ interface ကို tab အသစ်တစ်ခုနဲ့ အလိုအလျောက် launch လုပ်မလား။</li> <li><code>share</code> - သင့်ကွန်ပျူတာကနေ interface အတွက် လူသိရှင်ကြားမျှဝေနိုင်တဲ့ link တစ်ခုကို ဖန်တီးမလား။ Google Drive link နဲ့ ဆင်တူပါတယ်။</li></ul> <p data-svelte-h="svelte-hw7bqq"><code>share</code> parameter အကြောင်းကို နောက်အပိုင်းမှာ ပိုပြီး အသေးစိတ် ဆွေးနွေးသွားပါမယ်။</p>  <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-42xkil"><strong>speech-recognition</strong> model တစ်ခုကို demo လုပ်ခွင့်ပေးမယ့် interface တစ်ခုကို တည်ဆောက်ကြရအောင်။
စိတ်ဝင်စားဖို့ကောင်းအောင်၊ ကျွန်တော်တို့ mic input ဒါမှမဟုတ် upload လုပ်ထားတဲ့ file တစ်ခုခုကို လက်ခံပါမယ်။</p> <p data-svelte-h="svelte-15hrji8">ပုံမှန်အတိုင်းပဲ၊ ကျွန်တော်တို့ speech recognition model ကို 🤗 Transformers က <code>pipeline()</code> function ကို အသုံးပြုပြီး load လုပ်ပါမယ်။
လျင်မြန်စွာ ပြန်လည်လေ့လာချင်တယ်ဆိုရင် <a href="/course/chapter1/3">Chapter 1 ရဲ့ အဲဒီအပိုင်း</a> ကို ပြန်သွားနိုင်ပါတယ်။ နောက်တစ်ခုကတော့၊ audio ကို process လုပ်ပြီး transcription ကို ပြန်ပေးမယ့် <code>transcribe_audio()</code> function ကို ကျွန်တော်တို့ implement လုပ်ပါမယ်။ နောက်ဆုံးအနေနဲ့၊ ဒီ function ကို <code>Audio</code> components တွေနဲ့ input အတွက်၊ text ကို output အတွက် အသုံးပြုပြီး <code>Interface</code> တစ်ခုထဲမှာ wrap လုပ်ပါမယ်။ စုစုပေါင်းအားဖြင့်၊ ဒီ application အတွက် 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> transformers <span class="hljs-keyword">import</span> pipeline
<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

model = pipeline(<span class="hljs-string">&quot;automatic-speech-recognition&quot;</span>)


<span class="hljs-keyword">def</span> <span class="hljs-title function_">transcribe_audio</span>(<span class="hljs-params">audio</span>):
    transcription = model(audio)[<span class="hljs-string">&quot;text&quot;</span>]
    <span class="hljs-keyword">return</span> transcription


gr.Interface(
    fn=transcribe_audio,
    inputs=gr.Audio(<span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;filepath&quot;</span>),
    outputs=<span class="hljs-string">&quot;text&quot;</span>,
).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-a3bkgt">သင့် browser က microphone permissions အတွက် မမေးရင်၊ <a href="https://huggingface.co/spaces/course-demos/audio-reverse" target="_blank">demo ကို သီးခြား tab တစ်ခုမှာ ဖွင့်ပါ</a>။</p> <iframe src="https://course-demos-asr.hf.space" frameborder="0" height="550" 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-1h2eu8o">ဒါပါပဲ! ဒီ interface ကို အသုံးပြုပြီး audio ကို transcribe လုပ်နိုင်ပါပြီ။ ဒီနေရာမှာ <code>optional</code> parameter ကို <code>True</code> အဖြစ် ပေးခြင်းဖြင့်၊ user ကို microphone ဒါမှမဟုတ် audio file (ဒါမှမဟုတ် နှစ်ခုလုံးမဟုတ်ဘဲ၊ ဒါက error message ပြပါလိမ့်မယ်) တစ်ခုခုကို ပေးခွင့်ပြုတာကို သတိပြုပါ။</p> <p data-svelte-h="svelte-6tz6l2">သင့် interface ကို တခြားသူတွေနဲ့ ဘယ်လိုမျှဝေမလဲဆိုတာ ကြည့်ဖို့ ဆက်လုပ်ပါ။</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-1rji9ct"><li><strong><code>Interface</code> Class</strong>: Gradio library ၏ အဓိက class ဖြစ်ပြီး Machine Learning model များအတွက် web-based demo များကို ဖန်တီးရန် အသုံးပြုသည်။</li> <li><strong>Parameters</strong>: Function သို့မဟုတ် class တစ်ခု၏ လုပ်ဆောင်ချက်ကို ပြောင်းလဲနိုင်သော inputs များ။</li> <li><strong>Prediction Function (<code>fn</code>)</strong>: Gradio Interface မှ wrap လုပ်ထားသော Python function ဖြစ်ပြီး input ကိုယူကာ output ကို ပြန်ပေးသည်။ ၎င်းသည် ML model ၏ core logic ကို ကိုယ်စားပြုသည်။</li> <li><strong>Input Component Type(s)</strong>: Gradio Interface တွင် အသုံးပြုသူထံမှ input များကို ရယူရန် အသုံးပြုသော UI elements အမျိုးအစားများ (ဥပမာ- <code>gr.Image</code>, <code>gr.Mic</code>, <code>gr.Textbox</code>)။</li> <li><strong>Output Component Type(s)</strong>: Gradio Interface တွင် model ၏ output များကို အသုံးပြုသူအား ပြသရန် အသုံးပြုသော UI elements အမျိုးအစားများ (ဥပမာ- <code>gr.Image</code>, <code>gr.Label</code>, <code>gr.Audio</code>)။</li> <li><strong>Pre-built Components</strong>: Gradio library မှ ကြိုတင်ထောက်ပံ့ပေးထားသော UI components များ။</li> <li><strong>Instantiate</strong>: class တစ်ခုမှ object တစ်ခုကို ဖန်တီးခြင်း။</li> <li><strong><code>Textbox</code> Component</strong>: Gradio ၏ input component တစ်မျိုးဖြစ်ပြီး အသုံးပြုသူအား စာသားများ ရိုက်ထည့်ရန် ခွင့်ပြုသည်။</li> <li><strong><code>lines</code> Parameter</strong>: <code>Textbox</code> component တွင် ပြသနိုင်သော စာကြောင်းအရေအတွက်ကို သတ်မှတ်သည်။</li> <li><strong><code>label</code> Parameter</strong>: component ၏ ဘေးတွင် ပြသရန် စာသား label ကို သတ်မှတ်သည်။</li> <li><strong><code>Audio</code> Component</strong>: Gradio ၏ input သို့မဟုတ် output component တစ်မျိုးဖြစ်ပြီး အသံဖိုင်များ သို့မဟုတ် microphone input များနှင့် အလုပ်လုပ်ရန် အသုံးပြုသည်။</li> <li><strong><code>source</code> Parameter</strong>: <code>Audio</code> component ၏ input source ကို သတ်မှတ်သည်။ <code>&quot;file&quot;</code> (ဖိုင် upload) သို့မဟုတ် <code>&quot;microphone&quot;</code> (မိုက်ခရိုဖုန်းမှ မှတ်တမ်းတင်ခြင်း) ဖြစ်နိုင်သည်။</li> <li><strong>Numpy Array</strong>: Python ၏ NumPy library မှ multi-dimensional array object ဖြစ်ပြီး သိပ္ပံနည်းကျ တွက်ချက်မှုများအတွက် အသုံးများသည်။</li> <li><strong><code>type</code> Parameter</strong>: input သို့မဟုတ် output component ၏ ဒေတာအမျိုးအစားကို သတ်မှတ်သည်။ ဥပမာ- <code>&quot;numpy&quot;</code> သည် အသံဒေတာကို (<code>sample_rate</code>, <code>data</code>) tuple အဖြစ် လက်ခံရန် သတ်မှတ်သည်။</li> <li><strong><code>sample_rate</code></strong>: တစ်စက္ကန့်လျှင် အသံနမူနာ မည်မျှယူသည်ကို ဖော်ပြသော အကြိမ်ရေ (ဥပမာ- 48000 Hz)။</li> <li><strong><code>data</code></strong>: အသံဒေတာ၏ NumPy array။</li> <li><strong><code>np.flipud()</code></strong>: NumPy function တစ်ခုဖြစ်ပြီး array ၏ အတန်းများကို ပြောင်းပြန်လှန်ပေးသည်။</li> <li><strong>String Shortcut</strong>: component class ကို တိုက်ရိုက် instantiate မလုပ်ဘဲ string တစ်ခုတည်းဖြင့် component အမျိုးအစားကို သတ်မှတ်ခြင်း (ဥပမာ- <code>&quot;audio&quot;</code>)။</li> <li><strong><code>launch()</code> Method</strong>: Gradio Interface ကို web server တစ်ခုအဖြစ် စတင်လုပ်ဆောင်သည်။</li> <li><strong>Jupyter Notebook</strong>: code, text, images, နှင့် mathematical equations တို့ကို ပေါင်းစပ်နိုင်သော interactive computing environment။</li> <li><strong>Colab Notebook (Google Colab)</strong>: Google မှ ပံ့ပိုးပေးထားသော cloud-based Jupyter Notebook environment တစ်ခု။</li> <li><strong><code>inline</code> Parameter (for <code>launch()</code>)</strong>: Gradio Interface ကို notebook ထဲတွင် တိုက်ရိုက်ပြသမလား မပြသဘူးလား ထိန်းချုပ်သည်။</li> <li><strong><code>inbrowser</code> Parameter (for <code>launch()</code>)</strong>: Interface ကို default web browser တွင် tab အသစ်တစ်ခုဖြင့် အလိုအလျောက်ဖွင့်မလား မဖွင့်ဘူးလား ထိန်းချုပ်သည်။</li> <li><strong><code>share</code> Parameter (for <code>launch()</code>)</strong>: Interface အတွက် အများပြည်သူ ဝင်ရောက်ကြည့်ရှုနိုင်သော shareable link တစ်ခု ဖန်တီးမလား မဖန်တီးဘူးလား ထိန်းချုပ်သည်။</li> <li><strong>Speech Recognition Model</strong>: အသံပြောဆိုမှုများကို စာသားအဖြစ် ပြောင်းလဲပေးသော Machine Learning model။</li> <li><strong><code>pipeline()</code> Function (🤗 Transformers)</strong>: Hugging Face Transformers library မှာ ပါဝင်တဲ့ လုပ်ဆောင်ချက်တစ်ခုဖြစ်ပြီး မော်ဒယ်တွေကို သီးခြားလုပ်ငန်းတာဝန်များအတွက် အသုံးပြုရလွယ်ကူအောင် ပြုလုပ်ပေးပါတယ်။</li> <li><strong><code>automatic-speech-recognition</code> (ASR) Pipeline</strong>: အသံပြောဆိုမှုကို စာသားအဖြစ် ပြောင်းလဲပေးသော pipeline အမျိုးအစား။</li> <li><strong><code>transcribe_audio()</code> Function</strong>: အသံကို စီမံဆောင်ရွက်ပြီး စာသားကူးယူမှုကို ပြန်ပေးသော function။</li> <li><strong>Transcription</strong>: အသံပြောဆိုမှု၏ စာသားကူးယူမှု။</li> <li><strong><code>filepath</code></strong>: ဖိုင်တစ်ခု၏ လမ်းကြောင်း (path) ကို ရည်ညွှန်းသည်။</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/3.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, 96],
							data,
							form: null,
							error: null
						});
					});
				}
			</script>