Hugging Face's logo

Buckets:
hf-doc-build
/
doc-dev

Files
xet
hf-doc-build/doc-dev / course /pr_1095 /my /chapter9 /7.html
rtrm's picture
rtrm
download
raw
68.1 kB
<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Gradio Blocks နိဒါန်း&quot;,&quot;local&quot;:&quot;introduction-to-gradio-blocks&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;ဘာကြောင့် Blocks 🧱?&quot;,&quot;local&quot;:&quot;why-blocks-&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Blocks ကို အသုံးပြုပြီး ရိုးရှင်းတဲ့ Demo တစ်ခု ဖန်တီးခြင်း&quot;,&quot;local&quot;:&quot;creating-a-simple-demo-using-blocks&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;သင့် Demo ရဲ့ Layout ကို စိတ်ကြိုက်ပြင်ဆင်ခြင်း&quot;,&quot;local&quot;:&quot;customizing-the-layout-of-your-demo&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Events များနှင့် State များကို လေ့လာခြင်း&quot;,&quot;local&quot;:&quot;exploring-events-and-state&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Multi-step Demos များကို ဖန်တီးခြင်း&quot;,&quot;local&quot;:&quot;creating-multi-step-demos&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Component Properties များကို Update လုပ်ခြင်း&quot;,&quot;local&quot;:&quot;updating-component-properties&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/100.e7da16f8.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;Gradio Blocks နိဒါန်း&quot;,&quot;local&quot;:&quot;introduction-to-gradio-blocks&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;ဘာကြောင့် Blocks 🧱?&quot;,&quot;local&quot;:&quot;why-blocks-&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Blocks ကို အသုံးပြုပြီး ရိုးရှင်းတဲ့ Demo တစ်ခု ဖန်တီးခြင်း&quot;,&quot;local&quot;:&quot;creating-a-simple-demo-using-blocks&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;သင့် Demo ရဲ့ Layout ကို စိတ်ကြိုက်ပြင်ဆင်ခြင်း&quot;,&quot;local&quot;:&quot;customizing-the-layout-of-your-demo&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Events များနှင့် State များကို လေ့လာခြင်း&quot;,&quot;local&quot;:&quot;exploring-events-and-state&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Multi-step Demos များကို ဖန်တီးခြင်း&quot;,&quot;local&quot;:&quot;creating-multi-step-demos&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3},{&quot;title&quot;:&quot;Component Properties များကို Update လုပ်ခြင်း&quot;,&quot;local&quot;:&quot;updating-component-properties&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="introduction-to-gradio-blocks" 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="#introduction-to-gradio-blocks"><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 Blocks နိဒါန်း</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/section7.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/section7.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-1da61rc">ယခင်အပိုင်းတွေမှာ <code>Interface</code> class ကို အသုံးပြုပြီး demos တွေကို လေ့လာပြီး ဖန်တီးခဲ့ကြပါတယ်။ ဒီအပိုင်းမှာ ကျွန်တော်တို့ <strong>အသစ်တီထွင်ထားတဲ့</strong> <code>gradio.Blocks</code> လို့ခေါ်တဲ့ low-level API ကို မိတ်ဆက်ပေးပါမယ်။</p> <p data-svelte-h="svelte-1s29gs6"><code>Interface</code> နဲ့ <code>Blocks</code> ဘာကွာလဲ။</p> <ul data-svelte-h="svelte-1jxgv6z"><li><p>⚡ <code>Interface</code>: input နဲ့ output list ကို ရိုးရှင်းစွာ ပေးခြင်းဖြင့် အပြည့်အစုံသော machine learning demo တစ်ခုကို ဖန်တီးနိုင်တဲ့ high-level API။</p></li> <li><p>🧱 <code>Blocks</code>: သင်ရဲ့ application ရဲ့ data flows နဲ့ layout အပေါ် အပြည့်အဝ ထိန်းချုပ်နိုင်တဲ့ low-level API။ <code>Blocks</code> (building blocks လိုမျိုး) ကို အသုံးပြုပြီး အလွန်ရှုပ်ထွေးတဲ့၊ multi-step applications တွေကို တည်ဆောက်နိုင်ပါတယ်။</p></li></ul> <h3 class="relative group"><a id="why-blocks-" 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="#why-blocks-"><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>ဘာကြောင့် Blocks 🧱?</span></h3> <p data-svelte-h="svelte-4eo0bh">ယခင်အပိုင်းတွေမှာ ကျွန်တော်တို့ တွေ့ခဲ့ရတဲ့အတိုင်း၊ <code>Interface</code> class က code လိုင်းအနည်းငယ်နဲ့ အပြည့်အစုံသော machine learning demos တွေကို အလွယ်တကူ ဖန်တီးနိုင်စေပါတယ်။ <code>Interface</code> API က အသုံးပြုရတာ အလွန်လွယ်ကူပေမယ့် <code>Blocks</code> API က ပံ့ပိုးပေးတဲ့ flexibility ကိုတော့ အားနည်းပါတယ်။ ဥပမာ၊ သင်က အောက်ပါတို့ကို လုပ်ချင်နိုင်ပါတယ်။</p> <ul data-svelte-h="svelte-y00ec"><li>web application တစ်ခုတည်းမှာ ဆက်စပ် demos တွေကို multiple tabs အဖြစ် အုပ်စုဖွဲ့ချင်တာမျိုး။</li> <li>သင့် demo ရဲ့ layout ကို ပြောင်းချင်တာမျိုး (ဥပမာ- inputs နဲ့ outputs တွေ ဘယ်နေရာမှာ ရှိမယ်ဆိုတာ သတ်မှတ်တာမျိုး)။</li> <li>multi-step interfaces တွေ ရှိချင်တာမျိုး (model တစ်ခုရဲ့ output က နောက် model တစ်ခုရဲ့ input ဖြစ်လာတာမျိုး ဒါမှမဟုတ် ပိုမိုပြောင်းလွယ်ပြင်လွယ်ရှိတဲ့ data flows တွေ ရှိတာမျိုး)။</li> <li>component တစ်ခုရဲ့ properties တွေကို ပြောင်းလဲချင်တာမျိုး (ဥပမာ- dropdown ထဲက choices တွေ) ဒါမှမဟုတ် user input ပေါ်မူတည်ပြီး ၎င်းရဲ့ visibility ကို ပြောင်းလဲချင်တာမျိုး။</li></ul> <p data-svelte-h="svelte-1mwq7e0">ဒီ concept တွေအားလုံးကို အောက်မှာ ကျွန်တော်တို့ လေ့လာသွားပါမယ်။</p> <h3 class="relative group"><a id="creating-a-simple-demo-using-blocks" 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="#creating-a-simple-demo-using-blocks"><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>Blocks ကို အသုံးပြုပြီး ရိုးရှင်းတဲ့ Demo တစ်ခု ဖန်တီးခြင်း</span></h3> <p data-svelte-h="svelte-9se6mm">Gradio ကို install လုပ်ပြီးနောက်၊ အောက်ပါ code ကို Python script၊ Jupyter notebook ဒါမှမဟုတ် Colab notebook အဖြစ် run ပါ။</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
<span class="hljs-keyword">def</span> <span class="hljs-title function_">flip_text</span>(<span class="hljs-params">x</span>):
 <span class="hljs-keyword">return</span> x[::-<span class="hljs-number">1</span>]
demo = gr.Blocks()
<span class="hljs-keyword">with</span> demo:
 gr.Markdown(
 <span class="hljs-string">&quot;&quot;&quot;
 # စာသားကို ပြောင်းပြန်လှန်ပါ။
 အောက်မှာ စတင်ရိုက်ထည့်ပြီး output ကို ကြည့်ပါ။
 &quot;&quot;&quot;</span>
 )
 <span class="hljs-built_in">input</span> = gr.Textbox(placeholder=<span class="hljs-string">&quot;ဒီစာသားကို ပြောင်းပြန်လှန်ပါ&quot;</span>)
 output = gr.Textbox()
<span class="hljs-built_in">input</span>.change(fn=flip_text, inputs=<span class="hljs-built_in">input</span>, outputs=output)
demo.launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-flip-text.hf.space" frameborder="0" height="400" 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-10ies84">အထက်ပါ ရိုးရှင်းတဲ့ ဥပမာက Blocks ရဲ့ အခြေခံ concept ၄ ခုကို မိတ်ဆက်ပေးထားပါတယ်။</p> <p data-svelte-h="svelte-g0un2b">၁။ Blocks တွေက markdown, HTML, buttons တွေနဲ့ interactive components တွေကို <code>with gradio.Blocks</code> context အတွင်းမှာ Python object တွေကို instantiate လုပ်ရုံနဲ့ ပေါင်းစပ်ထားတဲ့ web applications တွေကို တည်ဆောက်နိုင်စေပါတယ်။</p> <blockquote class="tip" data-svelte-h="svelte-11y0bgc"><p>🙋 Python မှာ <code>with</code> statement နဲ့ သင်မရင်းနှီးသေးဘူးဆိုရင် Real Python က အလွန်ကောင်းမွန်တဲ့ <a href="https://realpython.com/python-with-statement/" rel="nofollow">tutorial</a> ကို ကြည့်ရှုဖို့ ကျွန်တော်တို့ အကြံပြုပါတယ်။ အဲဒါကို ဖတ်ပြီးမှ ဒီကို ပြန်လာပါ။ 🤗
သင် components တွေကို instantiate လုပ်တဲ့ အစီအစဉ်က အရေးကြီးပါတယ်။ ဘာလို့လဲဆိုတော့ element တစ်ခုစီကို web app ထဲမှာ ဖန်တီးခဲ့တဲ့ အစီအစဉ်အတိုင်း render လုပ်တာကြောင့်ပါ။ (ပိုမိုရှုပ်ထွေးတဲ့ layouts တွေအကြောင်းကို အောက်မှာ ဆွေးနွေးထားပါတယ်)။</p></blockquote> <p data-svelte-h="svelte-8rvzmd">၂။ သင် ပုံမှန် Python functions တွေကို သင့် code ထဲက ဘယ်နေရာမှာမဆို သတ်မှတ်နိုင်ပြီး <code>Blocks</code> ကို အသုံးပြုပြီး user input နဲ့ run နိုင်ပါတယ်။ ကျွန်တော်တို့ရဲ့ ဥပမာမှာ၊ input text ကို “flips” လုပ်တဲ့ ရိုးရှင်းတဲ့ function တစ်ခုရှိပေမယ့်၊ သင်ဟာ ရိုးရှင်းတဲ့ တွက်ချက်မှုကနေ machine learning model က predictions တွေကို process လုပ်တာအထိ ဘယ် Python function ကိုမဆို ရေးနိုင်ပါတယ်။</p> <p data-svelte-h="svelte-nv8355">၃။ သင်ဟာ <code>Blocks</code> component တိုင်းကို events တွေ assign လုပ်နိုင်ပါတယ်။ ဒါက component ကို click လုပ်တာ၊ change လုပ်တာ စတဲ့အခါ သင့် function ကို run စေပါလိမ့်မယ်။ event တစ်ခု assign လုပ်တဲ့အခါ၊ parameters သုံးခုကို သင်ပေးရပါတယ်- <code>fn</code>: ခေါ်ဆိုသင့်တဲ့ function၊ <code>inputs</code>: input component(s) ရဲ့ (list)၊ နဲ့ <code>outputs</code>: ခေါ်ဆိုသင့်တဲ့ output components တွေရဲ့ (list)။</p> <p data-svelte-h="svelte-ln6568">အထက်ပါ ဥပမာမှာ၊ input လို့ နာမည်ပေးထားတဲ့ <code>Textbox</code> ထဲက value ပြောင်းတဲ့အခါ <code>flip_text()</code> function ကို ကျွန်တော်တို့ run ပါတယ်။ event က <code>input</code> ထဲက value ကို ဖတ်ပြီး <code>flip_text()</code> ရဲ့ name parameter အဖြစ် ပေးပို့ပါတယ်။ အဲဒီနောက် value ကို ပြန်ပေးပြီး ကျွန်တော်တို့ရဲ့ ဒုတိယ <code>Textbox</code> ဖြစ်တဲ့ <code>output</code> ကို assign လုပ်ပါတယ်။</p> <p data-svelte-h="svelte-zzvhqt">component တစ်ခုစီက ထောက်ပံ့ပေးတဲ့ events တွေရဲ့ list ကို Gradio <a href="https://www.gradio.app/docs/" rel="nofollow">documentation</a> မှာ ကြည့်နိုင်ပါတယ်။</p> <p data-svelte-h="svelte-16gf30o">၄။ Blocks က component တစ်ခုဟာ interactive ဖြစ်သင့်မဖြစ်သင့် (user input ကို လက်ခံမလား) ကို သင်သတ်မှတ်ထားတဲ့ event triggers တွေအပေါ် အခြေခံပြီး အလိုအလျောက် ဆုံးဖြတ်ပါတယ်။ ကျွန်တော်တို့ရဲ့ ဥပမာမှာ၊ ပထမ textbox က interactive ဖြစ်ပါတယ်၊ ဘာလို့လဲဆိုတော့ ၎င်းရဲ့ value ကို <code>flip_text()</code> function က အသုံးပြုလို့ပါ။ ဒုတိယ textbox က interactive မဟုတ်ပါဘူး၊ ဘာလို့လဲဆိုတော့ ၎င်းရဲ့ value ကို input အဖြစ် ဘယ်တော့မှ အသုံးပြုတာ မရှိလို့ပါ။ တချို့အခြေအနေတွေမှာ သင်ဒီလို override လုပ်ချင်နိုင်ပါတယ်၊ အဲဒါကို component ရဲ့ <code>interactive</code> parameter ကို boolean တစ်ခု ပေးခြင်းဖြင့် လုပ်ဆောင်နိုင်ပါတယ် (ဥပမာ- <code>gr.Textbox(placeholder=&quot;Flip this text&quot;, interactive=True)</code>)။</p> <h3 class="relative group"><a id="customizing-the-layout-of-your-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="#customizing-the-layout-of-your-demo"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>သင့် Demo ရဲ့ Layout ကို စိတ်ကြိုက်ပြင်ဆင်ခြင်း</span></h3> <p data-svelte-h="svelte-6aqt6x">ကျွန်တော်တို့ရဲ့ demo ရဲ့ layout ကို စိတ်ကြိုက်ပြင်ဆင်ဖို့ <code>Blocks</code> ကို ဘယ်လိုအသုံးပြုရမလဲ။ default အားဖြင့်၊ <code>Blocks</code> က သင်ဖန်တီးတဲ့ components တွေကို column တစ်ခုတည်းမှာ ဒေါင်လိုက် render လုပ်ပါတယ်။ <code>with gradio.Column():</code> ဒါမှမဟုတ် <code>with gradio.Row():</code> လို additional columns ဒါမှမဟုတ် rows တွေကို ဖန်တီးပြီး၊ အဲဒီ contexts တွေထဲမှာ components တွေကို ဖန်တီးခြင်းဖြင့် အဲဒါကို ပြောင်းလဲနိုင်ပါတယ်။</p> <p data-svelte-h="svelte-1uryenp">သင်မှတ်သားထားသင့်တဲ့အရာတွေကတော့- <code>Column</code> အောက်မှာ ဖန်တီးတဲ့ component တိုင်းကို ဒေါင်လိုက်စီစဉ်ပါလိမ့်မယ် (ဒါက default လည်းဖြစ်ပါတယ်)။ <code>Row</code> အောက်မှာ ဖန်တီးတဲ့ component တိုင်းကို အလျားလိုက် စီစဉ်ပါလိမ့်မယ်၊ <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" rel="nofollow">web development က flexbox model</a> နဲ့ ဆင်တူပါတယ်။</p> <p data-svelte-h="svelte-pz39i5">နောက်ဆုံးအနေနဲ့၊ <code>with gradio.Tabs()</code> context manager ကို အသုံးပြုပြီး သင့် demo အတွက် tabs တွေကိုလည်း ဖန်တီးနိုင်ပါတယ်။ ဒီ context ထဲမှာ၊ <code>with gradio.TabItem(name_of_tab):</code> children တွေကို သတ်မှတ်ခြင်းဖြင့် multiple tabs တွေ ဖန်တီးနိုင်ပါတယ်။ <code>with gradio.TabItem(name_of_tab):</code> context အတွင်းမှာ ဖန်တီးတဲ့ component တိုင်းက အဲဒီ tab ထဲမှာ ပေါ်လာပါလိမ့်မယ်။</p> <p data-svelte-h="svelte-8wpbii">အခု ကျွန်တော်တို့ရဲ့ demo မှာ <code>flip_image()</code> function တစ်ခု ထည့်ပြီး images တွေကို flip လုပ်တဲ့ tab အသစ်တစ်ခု ထည့်ကြရအောင်။ အောက်မှာ tabs ၂ ခု ပါဝင်ပြီး Row ကိုလည်း အသုံးပြုထားတဲ့ ဥပမာတစ်ခုပါ။</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
demo = gr.Blocks()
<span class="hljs-keyword">def</span> <span class="hljs-title function_">flip_text</span>(<span class="hljs-params">x</span>):
 <span class="hljs-keyword">return</span> x[::-<span class="hljs-number">1</span>]
<span class="hljs-keyword">def</span> <span class="hljs-title function_">flip_image</span>(<span class="hljs-params">x</span>):
 <span class="hljs-keyword">return</span> np.fliplr(x)
<span class="hljs-keyword">with</span> demo:
 gr.Markdown(<span class="hljs-string">&quot;ဒီ demo ကို အသုံးပြုပြီး စာသား ဒါမှမဟုတ် ပုံများကို ပြောင်းပြန်လှန်ပါ။&quot;</span>)
 <span class="hljs-keyword">with</span> gr.Tabs():
 <span class="hljs-keyword">with</span> gr.TabItem(<span class="hljs-string">&quot;စာသား ပြောင်းပြန်လှန်ခြင်း&quot;</span>):
 <span class="hljs-keyword">with</span> gr.Row():
 text_input = gr.Textbox()
 text_output = gr.Textbox()
 text_button = gr.Button(<span class="hljs-string">&quot;ပြောင်းပြန်လှန်ပါ&quot;</span>)
 <span class="hljs-keyword">with</span> gr.TabItem(<span class="hljs-string">&quot;ပုံ ပြောင်းပြန်လှန်ခြင်း&quot;</span>):
 <span class="hljs-keyword">with</span> gr.Row():
 image_input = gr.Image()
 image_output = gr.Image()
 image_button = gr.Button(<span class="hljs-string">&quot;ပြောင်းပြန်လှန်ပါ&quot;</span>)
text_button.click(flip_text, inputs=text_input, outputs=text_output)
 image_button.click(flip_image, inputs=image_input, outputs=image_output)
demo.launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-flip-text-image.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> <p data-svelte-h="svelte-16nnzpi">ဒီဥပမာမှာ၊ tab တစ်ခုစီမှာ <code>Button</code> component တစ်ခုစီကိုလည်း ဖန်တီးခဲ့တာကို သင်သတိထားမိပါလိမ့်မယ်။ ပြီးတော့ function ကို တကယ် run စေတဲ့ click event တစ်ခုစီကို button တစ်ခုစီကို assign လုပ်ခဲ့ပါတယ်။</p> <h3 class="relative group"><a id="exploring-events-and-state" 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="#exploring-events-and-state"><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>Events များနှင့် State များကို လေ့လာခြင်း</span></h3> <p data-svelte-h="svelte-vdquf0">layout ကို ထိန်းချုပ်နိုင်သလိုပဲ၊ <code>Blocks</code> က function calls တွေကို trigger လုပ်တဲ့ events တွေအပေါ်မှာ fine-grained control ကို ပေးပါတယ်။ component တိုင်းနဲ့ layout အများအပြားမှာ ၎င်းတို့ ထောက်ပံ့ပေးတဲ့ သီးခြား events တွေ ရှိပါတယ်။</p> <p data-svelte-h="svelte-aqym2e">ဥပမာ၊ <code>Textbox</code> component မှာ events ၂ ခု ရှိပါတယ်- <code>change()</code> (textbox ထဲက value ပြောင်းတဲ့အခါ) နဲ့ <code>submit()</code> (user က textbox ပေါ်မှာ focus လုပ်နေစဉ် enter key ကို နှိပ်တဲ့အခါ)။ ပိုမိုရှုပ်ထွေးတဲ့ components တွေမှာ ပိုပြီးတော့ events တွေ ရှိနိုင်ပါတယ်- ဥပမာ၊ <code>Audio</code> component မှာ audio file ကို play လုပ်တဲ့အခါ၊ clear လုပ်တဲ့အခါ၊ pause လုပ်တဲ့အခါ စတဲ့ သီးခြား events တွေလည်း ရှိပါတယ်။ component တစ်ခုစီက ထောက်ပံ့ပေးတဲ့ events တွေအတွက် documentation ကို ကြည့်ပါ။</p> <p data-svelte-h="svelte-jybnax">သင်ဟာ ဒီ events တွေထဲက ဘယ်တစ်ခု၊ တစ်ခု၊ ဒါမှမဟုတ် တစ်ခုထက်ပိုတာတွေကို event trigger attach လုပ်နိုင်ပါတယ်။ event trigger တစ်ခုကို component instance ပေါ်မှာ event ရဲ့ နာမည်ကို function တစ်ခုအဖြစ် ခေါ်ခြင်းဖြင့် ဖန်တီးပါတယ် — ဥပမာ- <code>textbox.change(...)</code> ဒါမှမဟုတ် <code>btn.click(...)</code>။ function က အပေါ်မှာ ဆွေးနွေးခဲ့တဲ့ parameters သုံးခုကို ယူပါတယ်-</p> <ul data-svelte-h="svelte-wvew7u"><li><code>fn</code>: run ရမယ့် function။</li> <li><code>inputs</code>: function ရဲ့ input parameters အဖြစ် ထောက်ပံ့သင့်တဲ့ component(s) ရဲ့ (list)။ component တစ်ခုစီရဲ့ value က သက်ဆိုင်ရာ function parameter နဲ့ အစီအစဉ်အတိုင်း ကိုက်ညီပါတယ်။ function က parameters တွေ မယူဘူးဆိုရင် ဒီ parameter က <code>None</code> ဖြစ်နိုင်ပါတယ်။</li> <li><code>outputs</code>: function က ပြန်ပေးတဲ့ values တွေအပေါ် အခြေခံပြီး update လုပ်သင့်တဲ့ component(s) ရဲ့ (list)။ return value တစ်ခုစီက သက်ဆိုင်ရာ component ရဲ့ value ကို အစီအစဉ်အတိုင်း သတ်မှတ်ပါတယ်။ function က ဘာမှ ပြန်မပေးဘူးဆိုရင် ဒီ parameter က <code>None</code> ဖြစ်နိုင်ပါတယ်။</li></ul> <p data-svelte-h="svelte-dpc8gl">input နဲ့ output component ကို တူညီတဲ့ component ဖြစ်အောင်တောင် လုပ်နိုင်ပါတယ်၊ text completion လုပ်ဖို့ GPT model ကို အသုံးပြုတဲ့ ဒီဥပမာမှာ ကျွန်တော်တို့ လုပ်ခဲ့သလိုပေါ့-</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
api = gr.Interface.load(<span class="hljs-string">&quot;huggingface/EleutherAI/gpt-j-6B&quot;</span>)
<span class="hljs-keyword">def</span> <span class="hljs-title function_">complete_with_gpt</span>(<span class="hljs-params">text</span>):
 <span class="hljs-comment"># စာသားရဲ့ နောက်ဆုံး စာလုံး ၅၀ ကို context အဖြစ် အသုံးပြုပါ</span>
 <span class="hljs-keyword">return</span> text[:-<span class="hljs-number">50</span>] + api(text[-<span class="hljs-number">50</span>:])
<span class="hljs-keyword">with</span> gr.Blocks() <span class="hljs-keyword">as</span> demo:
 textbox = gr.Textbox(placeholder=<span class="hljs-string">&quot;ဒီနေရာမှာ ရိုက်ပြီး enter နှိပ်ပါ...&quot;</span>, lines=<span class="hljs-number">4</span>)
 btn = gr.Button(<span class="hljs-string">&quot;Generate&quot;</span>)
btn.click(complete_with_gpt, textbox, textbox)
demo.launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-blocks-gpt.hf.space" frameborder="0" height="300" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <h3 class="relative group"><a id="creating-multi-step-demos" 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="#creating-multi-step-demos"><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>Multi-step Demos များကို ဖန်တီးခြင်း</span></h3> <p data-svelte-h="svelte-zmhlaj">တချို့အခြေအနေတွေမှာ၊ သင်က <em>multi-step demo</em> တစ်ခုကို လိုချင်နိုင်ပါတယ်။ အဲဒီမှာ function တစ်ခုရဲ့ output ကို နောက်တစ်ခုရဲ့ input အဖြစ် ပြန်လည်အသုံးပြုတာမျိုးပါ။ ဒါက <code>Blocks</code> နဲ့ လုပ်ရတာ အလွန်လွယ်ကူပါတယ်၊ ဘာလို့လဲဆိုတော့ component တစ်ခုကို event trigger တစ်ခုရဲ့ input အဖြစ် ဒါပေမယ့် နောက်တစ်ခုရဲ့ output အဖြစ် အသုံးပြုနိုင်လို့ပါပဲ။ အောက်ပါဥပမာမှာရှိတဲ့ text component ကို ကြည့်ပါ၊ ၎င်းရဲ့ value က speech-to-text model ရဲ့ ရလဒ်ဖြစ်ပေမယ့် sentiment analysis model ထဲကိုလည်း ပေးပို့လိုက်ပါတယ်။</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
asr = pipeline(<span class="hljs-string">&quot;automatic-speech-recognition&quot;</span>, <span class="hljs-string">&quot;facebook/wav2vec2-base-960h&quot;</span>)
classifier = pipeline(<span class="hljs-string">&quot;text-classification&quot;</span>)
<span class="hljs-keyword">def</span> <span class="hljs-title function_">speech_to_text</span>(<span class="hljs-params">speech</span>):
 text = asr(speech)[<span class="hljs-string">&quot;text&quot;</span>]
 <span class="hljs-keyword">return</span> text
<span class="hljs-keyword">def</span> <span class="hljs-title function_">text_to_sentiment</span>(<span class="hljs-params">text</span>):
 <span class="hljs-keyword">return</span> classifier(text)[<span class="hljs-number">0</span>][<span class="hljs-string">&quot;label&quot;</span>]
demo = gr.Blocks()
<span class="hljs-keyword">with</span> demo:
 audio_file = gr.Audio(<span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;filepath&quot;</span>)
 text = gr.Textbox()
 label = gr.Label()
b1 = gr.Button(<span class="hljs-string">&quot;စကားကို အသိအမှတ်ပြုပါ&quot;</span>)
 b2 = gr.Button(<span class="hljs-string">&quot;စိတ်ခံစားမှုကို ခွဲခြားပါ&quot;</span>)
b1.click(speech_to_text, inputs=audio_file, outputs=text)
 b2.click(text_to_sentiment, inputs=text, outputs=label)
demo.launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-blocks-multi-step.hf.space" frameborder="0" height="600" 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="updating-component-properties" 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="#updating-component-properties"><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>Component Properties များကို Update လုပ်ခြင်း</span></h3> <p data-svelte-h="svelte-1u1okyr">ဒီအထိတော့ ကျွန်တော်တို့ component တစ်ခုရဲ့ value ကို update လုပ်ဖို့ events တွေကို ဘယ်လိုဖန်တီးရမယ်ဆိုတာ တွေ့ခဲ့ရပါတယ်။ ဒါပေမယ့် textbox ရဲ့ visibility ဒါမှမဟုတ် radio button group ထဲက choices တွေလိုမျိုး component တစ်ခုရဲ့ တခြား properties တွေကို ပြောင်းချင်ရင် ဘာလုပ်ရမလဲ။ သင့် function ကနေ ပုံမှန် return value ကို ပြန်ပေးမယ့်အစား component class ရဲ့ <code>update()</code> method ကို ပြန်ပေးခြင်းဖြင့် ဒါကို လုပ်ဆောင်နိုင်ပါတယ်။</p> <p data-svelte-h="svelte-1g9pkju">ဒါကို ဥပမာတစ်ခုနဲ့ အလွယ်တကူ သရုပ်ဖော်ပြနိုင်ပါတယ်။</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
<span class="hljs-keyword">def</span> <span class="hljs-title function_">change_textbox</span>(<span class="hljs-params">choice</span>):
 <span class="hljs-keyword">if</span> choice == <span class="hljs-string">&quot;short&quot;</span>:
 <span class="hljs-keyword">return</span> gr.Textbox.update(lines=<span class="hljs-number">2</span>, visible=<span class="hljs-literal">True</span>)
 <span class="hljs-keyword">elif</span> choice == <span class="hljs-string">&quot;long&quot;</span>:
 <span class="hljs-keyword">return</span> gr.Textbox.update(lines=<span class="hljs-number">8</span>, visible=<span class="hljs-literal">True</span>)
 <span class="hljs-keyword">else</span>:
 <span class="hljs-keyword">return</span> gr.Textbox.update(visible=<span class="hljs-literal">False</span>)
<span class="hljs-keyword">with</span> gr.Blocks() <span class="hljs-keyword">as</span> block:
 radio = gr.Radio([<span class="hljs-string">&quot;short&quot;</span>, <span class="hljs-string">&quot;long&quot;</span>, <span class="hljs-string">&quot;none&quot;</span>], label=<span class="hljs-string">&quot;ဘယ်လို စာစီစာကုံးမျိုး ရေးချင်ပါသလဲ။&quot;</span>)
 text = gr.Textbox(lines=<span class="hljs-number">2</span>, interactive=<span class="hljs-literal">True</span>)
radio.change(fn=change_textbox, inputs=radio, outputs=text)
 block.launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-blocks-update-component-properties.hf.space" frameborder="0" height="300" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <p data-svelte-h="svelte-bdp3jy">ကျွန်တော်တို့ <code>Blocks</code> ရဲ့ core concepts အားလုံးကို လေ့လာခဲ့ပြီးပါပြီ! <code>Interfaces</code> တွေနဲ့ တူတူပါပဲ၊ <code>launch()</code> method မှာ <code>share=True</code> ကို အသုံးပြုပြီး မျှဝေနိုင်တဲ့ ဒါမှမဟုတ် <a href="https://huggingface.co/spaces" rel="nofollow">Hugging Face Spaces</a> မှာ deploy လုပ်နိုင်တဲ့ ခေတ်မီ demos တွေကို ဖန်တီးနိုင်ပါတယ်။</p> <h2 class="relative group"><a id="ဝဟရ-ရငလငခက-glossary" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#ဝဟရ-ရငလငခက-glossary"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>ဝေါဟာရ ရှင်းလင်းချက် (Glossary)</span></h2> <ul data-svelte-h="svelte-uqxmjb"><li><strong><code>gradio.Blocks</code></strong>: Gradio library ၏ low-level API ဖြစ်ပြီး အသုံးပြုသူအား demo ၏ layout, data flows, နှင့် events များကို ပိုမိုပြည့်စုံစွာ ထိန်းချုပ်နိုင်စေသည်။</li> <li><strong>Low-level API</strong>: ဆော့ဖ်ဝဲလ်တစ်ခု၏ အခြေခံလုပ်ဆောင်ချက်များကို တိုက်ရိုက်ထိန်းချုပ်နိုင်သော programming interface။</li> <li><strong><code>Interface</code> Class</strong>: Gradio library ၏ high-level API ဖြစ်ပြီး Machine Learning model များအတွက် web-based demo များကို လွယ်ကူလျင်မြန်စွာ ဖန်တီးရန် အသုံးပြုသည်။</li> <li><strong>High-level API</strong>: အသေးစိတ်အချက်အလက်များကို ဝှက်ထားပြီး အသုံးပြုရလွယ်ကူသော programming interface။</li> <li><strong>Data Flows</strong>: application တစ်ခုအတွင်း ဒေတာများ မည်သို့ စီးဆင်းပြီး ပြောင်းလဲပုံ။</li> <li><strong>Layout</strong>: application ၏ UI elements များ စီစဉ်ထားပုံ။</li> <li><strong>Multi-step Applications</strong>: လုပ်ငန်းစဉ်အဆင့်များစွာ ပါဝင်သော application များ။</li> <li><strong>Tabs</strong>: web application တစ်ခုတွင် မတူညီသော content များကို ပြောင်းလဲပြသနိုင်သော UI element များ။</li> <li><strong>Visibility</strong>: component တစ်ခုကို ပြသမည်လား သို့မဟုတ် ဝှက်ထားမည်လား။</li> <li><strong>User Input</strong>: အသုံးပြုသူမှ ထည့်သွင်းသော အချက်အလက်များ။</li> <li><strong>Python Script</strong>: Python programming language ဖြင့် ရေးသားထားသော executable code file။</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>gr.Blocks()</code></strong>: <code>Blocks</code> object တစ်ခုကို ဖန်တီးခြင်း။</li> <li><strong><code>with demo:</code> (Context Manager)</strong>: Python ၏ <code>with</code> statement ကို အသုံးပြု၍ <code>Blocks</code> object အတွင်း UI components များကို ဖန်တီးရန် context ကို သတ်မှတ်သည်။</li> <li><strong><code>gr.Markdown()</code></strong>: Markdown format ဖြင့် စာသားကို ပြသရန် Gradio component။</li> <li><strong><code>gr.Textbox()</code></strong>: Gradio ၏ input သို့မဟုတ် output component တစ်မျိုးဖြစ်ပြီး စာသားများ ရိုက်ထည့်ရန် သို့မဟုတ် ပြသရန် အသုံးပြုသည်။</li> <li><strong><code>placeholder</code> Parameter</strong>: input field တွင် အသုံးပြုသူ ရိုက်ထည့်ခြင်းမပြုမီ ပြသထားသော ဥပမာစာသား။</li> <li><strong><code>input.change()</code></strong>: <code>input</code> Textbox ၏ value ပြောင်းလဲသည့်အခါ အစပျိုးသော event trigger။</li> <li><strong><code>fn</code> Parameter</strong>: event trigger မှ ခေါ်ဆိုမည့် function။</li> <li><strong><code>inputs</code> Parameter</strong>: function သို့ input အဖြစ် ပေးမည့် Gradio components များ၏ list။</li> <li><strong><code>outputs</code> Parameter</strong>: function ၏ return value ဖြင့် update လုပ်မည့် Gradio components များ၏ list။</li> <li><strong><code>demo.launch()</code></strong>: Gradio demo ကို web server တစ်ခုအဖြစ် စတင်လုပ်ဆောင်သည်။</li> <li><strong><code>x[::-1]</code></strong>: Python slice syntax ဖြစ်ပြီး string သို့မဟုတ် list တစ်ခုကို ပြောင်းပြန်လှန်ရန်။</li> <li><strong>Real Python</strong>: Python tutorial များနှင့် resources များ ပံ့ပိုးပေးသော website။</li> <li><strong>Render</strong>: code မှ UI elements များကို ဖန်တီးပြီး ပြသခြင်း။</li> <li><strong>Interactive</strong>: အသုံးပြုသူ၏ လုပ်ဆောင်မှုများ (ဥပမာ- click, type) ကို တုံ့ပြန်နိုင်ခြင်း။</li> <li><strong><code>interactive</code> Parameter</strong>: component တစ်ခု interactive ဖြစ်သင့် မဖြစ်သင့်ကို boolean value ဖြင့် သတ်မှတ်သည်။</li> <li><strong><code>gradio.Column()</code></strong>: Components များကို ဒေါင်လိုက်စီစဉ်ရန် context manager။</li> <li><strong><code>gradio.Row()</code></strong>: Components များကို အလျားလိုက်စီစဉ်ရန် context manager။</li> <li><strong>Flexbox Model</strong>: CSS ၏ layout model တစ်ခုဖြစ်ပြီး UI elements များကို နေရာချထားရန်။</li> <li><strong><code>gradio.Tabs()</code></strong>: Tabs များပါဝင်သော UI element ကို ဖန်တီးရန် context manager။</li> <li><strong><code>gradio.TabItem(name_of_tab)</code></strong>: Tabs container အတွင်းရှိ သီးခြား tab တစ်ခုကို ဖန်တီးရန် context manager။</li> <li><strong><code>flip_image()</code> Function</strong>: ပုံရိပ်တစ်ခုကို အလျားလိုက် ပြောင်းပြန်လှန်ပေးသော function။</li> <li><strong><code>np.fliplr()</code></strong>: NumPy function တစ်ခုဖြစ်ပြီး array တစ်ခုကို အလျားလိုက် ပြောင်းပြန်လှန်ပေးသည်။</li> <li><strong><code>gr.Image()</code></strong>: Gradio ၏ input သို့မဟုတ် output component တစ်မျိုးဖြစ်ပြီး ပုံရိပ်များကို ကိုင်တွယ်ရန်။</li> <li><strong><code>gr.Button()</code></strong>: Gradio ၏ button component။</li> <li><strong><code>button.click()</code></strong>: <code>button</code> ကို click လုပ်သည့်အခါ အစပျိုးသော event trigger။</li> <li><strong>State</strong>: application ၏ အခြေအနေ သို့မဟုတ် ဒေတာများ။</li> <li><strong><code>Textbox.change()</code></strong>: Textbox ၏ value ပြောင်းလဲသည့်အခါ အစပျိုးသော event။</li> <li><strong><code>Textbox.submit()</code></strong>: Textbox ပေါ်တွင် focus လုပ်ထားစဉ် Enter key နှိပ်သည့်အခါ အစပျိုးသော event။</li> <li><strong><code>Audio</code> Component Events</strong>: Audio file ကို play, clear, pause စသည်တို့ လုပ်သည့်အခါ အစပျိုးသော events များ။</li> <li><strong>Component Instance</strong>: class မှ ဖန်တီးထားသော သီးခြား object။</li> <li><strong>GPT Model (Generative Pre-trained Transformer)</strong>: Google မှ ထုတ်လုပ်ထားသော Large Language Model တစ်မျိုး။</li> <li><strong>Text Completion</strong>: ပေးထားသော စာသားကို ဆက်လက်ဖြည့်စွက်ပေးခြင်း။</li> <li><strong>Context</strong>: စာသားတစ်ခု၏ ပတ်ဝန်းကျင်အကြောင်းအရာ။</li> <li><strong>Multi-step Demo</strong>: အဆင့်များစွာပါဝင်သော demo ဖြစ်ပြီး function တစ်ခု၏ output က နောက် function ၏ input ဖြစ်လာနိုင်သည်။</li> <li><strong>Speech-to-text Model</strong>: အသံကို စာသားအဖြစ် ပြောင်းလဲပေးသော model။</li> <li><strong>Sentiment Analysis Model</strong>: စာသား၏ စိတ်ခံစားမှု (အပြုသဘော၊ အနုတ်သဘော) ကို ခွဲခြားသတ်မှတ်ပေးသော model။</li> <li><strong><code>asr</code> Pipeline (Automatic Speech Recognition)</strong>: Speech-to-text အတွက် Hugging Face pipeline။</li> <li><strong><code>classifier</code> Pipeline (Text Classification)</strong>: Sentiment analysis အတွက် Hugging Face pipeline။</li> <li><strong><code>gr.Audio()</code></strong>: Gradio ၏ input/output component တစ်မျိုးဖြစ်ပြီး အသံဖိုင်များ သို့မဟုတ် microphone input များနှင့် အလုပ်လုပ်ရန်။</li> <li><strong><code>gr.Label()</code></strong>: Gradio ၏ output component တစ်မျိုးဖြစ်ပြီး categorical label များကို ပြသရန်။</li> <li><strong><code>gr.Textbox.update()</code></strong>: Textbox component ၏ properties များကို dynamicly update လုပ်ရန် method။</li> <li><strong><code>lines</code> (for <code>Textbox.update()</code>)</strong>: update လုပ်မည့် Textbox ၏ <code>lines</code> property။</li> <li><strong><code>visible</code> (for <code>Textbox.update()</code>)</strong>: update လုပ်မည့် Textbox ၏ <code>visible</code> property။</li> <li><strong><code>gr.Radio()</code></strong>: Gradio ၏ input component တစ်မျိုးဖြစ်ပြီး အသုံးပြုသူအား ရွေးချယ်စရာများထဲမှ တစ်ခုကို ရွေးချယ်စေသည်။</li> <li><strong>Deploy</strong>: application တစ်ခုကို server ပေါ်တွင် run နိုင်အောင် ပြင်ဆင်ပြီး အသုံးပြုနိုင်အောင် လုပ်ဆောင်ခြင်း။</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/7.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, 100],
 data,
 form: null,
 error: null
 });
 });
 }
 </script>

Xet Storage Details

Size:
68.1 kB
·
Xet hash:
3a2d14cc594420a663c4ba80ad118a0c7d2dc30ad6d31338750a695f1e5e0448

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