Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / course /pr_1069 /rum /chapter9 /7.html

rtrm

22 days ago

download

raw

41.3 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Introducere în Gradio Blocks","local":"introduction-to-gradio-blocks","sections":[{"title":"De ce Blocks 🧱?","local":"why-blocks-","sections":[],"depth":3},{"title":"Crearea unui demo simplu folosind Blocks","local":"creating-a-simple-demo-using-blocks","sections":[],"depth":3},{"title":"Personalizarea layout-ului demo-ului dvs.","local":"customizing-the-layout-of-your-demo","sections":[],"depth":3},{"title":"Explorarea evenimentelor și stării","local":"exploring-events-and-state","sections":[],"depth":3},{"title":"Crearea demo-urilor cu mai mulți pași","local":"creating-multi-step-demos","sections":[],"depth":3},{"title":"Actualizarea Proprietăților Componentei","local":"updating-component-properties","sections":[],"depth":3}],"depth":1}">
	<link href="/docs/course/pr_1069/rum/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/entry/start.1de7c3d2.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/chunks/scheduler.37c15a92.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/chunks/singletons.e13b7dfd.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/chunks/index.18351ede.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/chunks/paths.e130b7b0.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/entry/app.1f82014c.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/chunks/index.2bf4358c.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/nodes/0.3c83e1ab.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/chunks/each.e59479a4.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/nodes/99.6a626f51.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/chunks/Tip.363c041f.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/chunks/CodeBlock.4e987730.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/chunks/CourseFloatingBanner.6add7356.js">
	<link rel="modulepreload" href="/docs/course/pr_1069/rum/_app/immutable/chunks/getInferenceSnippets.24b50994.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Introducere în Gradio Blocks","local":"introduction-to-gradio-blocks","sections":[{"title":"De ce Blocks 🧱?","local":"why-blocks-","sections":[],"depth":3},{"title":"Crearea unui demo simplu folosind Blocks","local":"creating-a-simple-demo-using-blocks","sections":[],"depth":3},{"title":"Personalizarea layout-ului demo-ului dvs.","local":"customizing-the-layout-of-your-demo","sections":[],"depth":3},{"title":"Explorarea evenimentelor și stării","local":"exploring-events-and-state","sections":[],"depth":3},{"title":"Crearea demo-urilor cu mai mulți pași","local":"creating-multi-step-demos","sections":[],"depth":3},{"title":"Actualizarea Proprietăților Componentei","local":"updating-component-properties","sections":[],"depth":3}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <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>Introducere în Gradio Blocks</span></h1> <div class="flex space-x-1 absolute z-10 right-0 top-0"><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-1auhrkt">În secțiunile anterioare am explorat și am creat demo-uri folosind clasa <code>Interface</code>. În această secțiune vom introduce API-ul nostru de nivel scăzut <strong>recent dezvoltat</strong> numit <code>gradio.Blocks</code>.</p> <p data-svelte-h="svelte-4kfeg4">Acum, care este diferența între <code>Interface</code> și <code>Blocks</code>?</p> <ul data-svelte-h="svelte-1qrik6r"><li><p>⚡ <code>Interface</code>: un API de nivel înalt care vă permite să creați un demo complet de machine learning simplu prin furnizarea unei liste de intrări și ieșiri.</p></li> <li><p>🧱 <code>Blocks</code>: un API de nivel scăzut care vă permite să aveți control complet asupra fluxurilor de date și layout-ului aplicației dvs. Puteți construi aplicații foarte complexe, cu mai mulți pași folosind <code>Blocks</code> (ca în “piese de construcție”).</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>De ce Blocks 🧱?</span></h3> <p data-svelte-h="svelte-55dilv">Așa cum am văzut în secțiunile anterioare, clasa <code>Interface</code> vă permite să creați cu ușurință demo-uri complete de machine learning cu doar câteva linii de cod. API-ul <code>Interface</code> este extrem de ușor de folosit, dar îi lipsește flexibilitatea pe care o oferă API-ul <code>Blocks</code>. De exemplu, ați putea dori să:</p> <ul data-svelte-h="svelte-1lfzaok"><li>Grupați demo-uri înrudite ca file multiple într-o aplicație web</li> <li>Schimbați layout-ul demo-ului dvs., de ex. să specificați unde sunt localizate intrările și ieșirile</li> <li>Aveți interfețe cu mai mulți pași, în care ieșirea unui model devine intrarea următorului model, sau să aveți fluxuri de date mai flexibile în general</li> <li>Schimbați proprietățile unei componente (de exemplu, opțiunile dintr-un dropdown) sau vizibilitatea sa pe baza intrării utilizatorului</li></ul> <p data-svelte-h="svelte-ed7t17">Vom explora toate aceste concepte mai jos.</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>Crearea unui demo simplu folosind Blocks</span></h3> <p data-svelte-h="svelte-qmkvrc">După ce ați instalat Gradio, rulați codul de mai jos ca script Python, notebook Jupyter sau notebook Colab.</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">"""
	# Flip Text!
	Start typing below to see the output.
	"""</span>
	)
	<span class="hljs-built_in">input</span> = gr.Textbox(placeholder=<span class="hljs-string">"Flip this text"</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-15wjr7m">Acest exemplu simplu de mai sus introduce 4 concepte care stau la baza Blocks:</p> <ol><li><p data-svelte-h="svelte-1rt5zpc">Blocks vă permite să construiți aplicații web care combină markdown, HTML, butoane și componente interactive simplu prin instanțierea obiectelor în Python într-un context <code>with gradio.Blocks</code>.</p> <div class="course-tip bg-gradient-to-br dark:bg-gradient-to-r before:border-green-500 dark:before:border-green-800 from-green-50 dark:from-gray-900 to-white dark:to-gray-950 border border-green-50 text-green-700 dark:text-gray-400">🙋Dacă nu sunteți familiarizați cu declarația `with` în Python, vă recomandăm să consultați excelentul [tutorial](https://realpython.com/python-with-statement/) de la Real Python. Întoarceți-vă aici după citirea acestuia 🤗</div>
	Ordinea în care instanțiați componentele contează deoarece fiecare element este redat în aplicația web în ordinea în care a fost creat. (Layout-uri mai complexe sunt discutate mai jos)</li> <li data-svelte-h="svelte-1wqppjf"><p>Puteți defini funcții Python obișnuite oriunde în codul dvs. și să le rulați cu intrări de la utilizator folosind <code>Blocks</code>. În exemplul nostru, avem o funcție simplă care “inversează” textul de intrare, dar puteți scrie orice funcție Python, de la un calcul simplu la procesarea predicțiilor dintr-un model de machine learning.</p></li> <li data-svelte-h="svelte-37qdto"><p>Puteți atribui evenimente oricărei componente <code>Blocks</code>. Aceasta va rula funcția dvs. când componenta este apăsată, schimbată, etc. Când atribuiți un eveniment, transmiteți trei parametri: <code>fn</code>: funcția care ar trebui apelată, <code>inputs</code>: (lista) componentei(lor) de intrare, și <code>outputs</code>: (lista) componentelor de ieșire care ar trebui apelate.</p> <p>În exemplul de mai sus, rulăm funcția <code>flip_text()</code> când valoarea din <code>Textbox</code>-ul numit intrare <code>input</code> se schimbă. Evenimentul citește valoarea din <code>input</code>, o transmite ca parametru de nume la <code>flip_text()</code>, care apoi returnează o valoare care este atribuită celui de-al doilea <code>Textbox</code> numit <code>output</code>.</p> <p>Pentru a vedea o listă a evenimentelor pe care le suportă fiecare componentă, consultați <a href="https://www.gradio.app/docs/" rel="nofollow">documentația</a> Gradio.</p></li> <li data-svelte-h="svelte-1kyzhqo"><p>Blocks determină automat dacă o componentă ar trebui să fie interactivă (să accepte intrări de la utilizator) sau nu, pe baza declanșatorilor de evenimente pe care îi definiți. În exemplul nostru, prima cutie de text este interactivă, deoarece valoarea sa este folosită de funcția <code>flip_text()</code>. A doua cutie de text nu este interactivă, deoarece valoarea sa nu este niciodată folosită ca intrare. În unele cazuri, ați putea dori să suprascriați acest lucru, ceea ce puteți face prin transmiterea unui boolean la parametrul <code>interactive</code> al componentei (de ex. <code>gr.Textbox(placeholder="Flip this text", interactive=True)</code>).</p></li></ol> <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>Personalizarea layout-ului demo-ului dvs.</span></h3> <p data-svelte-h="svelte-a41359">Cum putem folosi <code>Blocks</code> pentru a personaliza layout-ul demo-ului nostru? În mod implicit, <code>Blocks</code> redă componentele pe care le creați vertical într-o coloană. Puteți schimba asta prin crearea de coloane suplimentare <code>with gradio.Column():</code> sau rânduri <code>with gradio.Row():</code> și crearea componentelor în acele contexte.</p> <p data-svelte-h="svelte-o0tv3h">Iată ce ar trebui să țineți minte: orice componente create sub o <code>Column</code> (aceasta este și setarea implicită) vor fi aranjate vertical. Orice componentă creată sub un <code>Row</code> va fi aranjată orizontal, similar cu <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox" rel="nofollow">modelul flexbox în dezvoltarea web</a>.</p> <p data-svelte-h="svelte-p4ri4p">În final, puteți crea și file pentru demo-ul dvs. folosind managerul de context <code>with gradio.Tabs()</code>. În acest context, puteți crea file multiple prin specificarea <code>with gradio.TabItem(name_of_tab):</code> copii. Orice componentă creată în interiorul unui context <code>with gradio.TabItem(name_of_tab):</code> apare în acea filă.</p> <p data-svelte-h="svelte-e8w45i">Acum să adăugăm o funcție <code>flip_image()</code> la demo-ul nostru și să adăugăm o filă nouă care inversează imaginile. Mai jos este un exemplu cu 2 file și folosește și un 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">"Flip text or image files using this demo."</span>)
	<span class="hljs-keyword">with</span> gr.Tabs():
	<span class="hljs-keyword">with</span> gr.TabItem(<span class="hljs-string">"Flip Text"</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">"Flip"</span>)
	<span class="hljs-keyword">with</span> gr.TabItem(<span class="hljs-string">"Flip Image"</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">"Flip"</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-1lseqzq">Veți observa că în acest exemplu, am creat și o componentă <code>Button</code> în fiecare filă, și am atribuit un eveniment de clic fiecărui buton, care este ceea ce rulează de fapt funcția.</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>Explorarea evenimentelor și stării</span></h3> <p data-svelte-h="svelte-25vqz">La fel cum puteți controla layout-ul, <code>Blocks</code> vă oferă control fin asupra evenimentelor care declanșează apelurile de funcții. Fiecare componentă și multe layout-uri au evenimente specifice pe care le suportă.</p> <p data-svelte-h="svelte-123z0i0">De exemplu, componenta <code>Textbox</code> are 2 evenimente: <code>change()</code> (când valoarea din interiorul cutiei de text se schimbă), și <code>submit()</code> (când un utilizator apasă tasta enter în timp ce este focalizat pe cutia de text). Componentele mai complexe pot avea și mai multe evenimente: de exemplu, componenta <code>Audio</code> are și evenimente separate pentru când fișierul audio este redat, șters, întrerupt, etc. Consultați documentația pentru evenimentele pe care le suportă fiecare componentă.</p> <p data-svelte-h="svelte-8ylujk">Puteți atașa declanșatorul de eveniment la niciunul, unul sau mai multe dintre aceste evenimente. Creați un declanșator de eveniment prin apelarea numelui evenimentului pe instanța componentei ca funcție — de ex. <code>textbox.change(...)</code> sau <code>btn.click(...)</code>. Funcția primește trei parametri, așa cum s-a discutat mai sus:</p> <ul data-svelte-h="svelte-1s3d60y"><li><code>fn</code>: funcția care să ruleze</li> <li><code>inputs</code>: o (listă de) componentă(e) ale căror valori ar trebui furnizate ca parametri de intrare la funcție. Valoarea fiecărei componente este mapată la parametrul funcției corespunzător, în ordine. Acest parametru poate fi None dacă funcția nu primește parametri.</li> <li><code>outputs</code>: o (listă de) componentă(e) ale căror valori ar trebui actualizate pe baza valorilor returnate de funcție. Fiecare valoare returnată setează valoarea componentei corespunzătoare, în ordine. Acest parametru poate fi None dacă funcția nu returnează nimic.</li></ul> <p data-svelte-h="svelte-13znh6h">Puteți face chiar ca componenta de intrare și ieșire să fie aceeași componentă, așa cum facem în acest exemplu care folosește un model GPT pentru completarea textului:</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">"huggingface/EleutherAI/gpt-j-6B"</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"># Use the last 50 characters of the text as 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">"Type here and press enter..."</span>, lines=<span class="hljs-number">4</span>)
	btn = gr.Button(<span class="hljs-string">"Generate"</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>Crearea demo-urilor cu mai mulți pași</span></h3> <p data-svelte-h="svelte-1k68gc5">În unele cazuri, ați putea dori un <em>demo cu mai mulți pași</em>, în care reutilizați ieșirea unei funcții ca intrare la următoarea. Acest lucru este foarte ușor de făcut cu <code>Blocks</code>, deoarece puteți folosi o componentă pentru intrarea unei declanșări de eveniment, dar ieșirea alteia. Priviți componenta text din exemplul de mai jos, valoarea sa este rezultatul unui model speech-to-text, dar este transmisă și într-un model de analiză de sentiment:</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">"automatic-speech-recognition"</span>, <span class="hljs-string">"facebook/wav2vec2-base-960h"</span>)
	classifier = pipeline(<span class="hljs-string">"text-classification"</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">"text"</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">"label"</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">"filepath"</span>)
	text = gr.Textbox()
	label = gr.Label()

	b1 = gr.Button(<span class="hljs-string">"Recognize Speech"</span>)
	b2 = gr.Button(<span class="hljs-string">"Classify Sentiment"</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>Actualizarea Proprietăților Componentei</span></h3> <p data-svelte-h="svelte-94wnfw">Până acum, am văzut cum să creăm evenimente pentru a actualiza valoarea unei alte componente. Dar ce se întâmplă dacă doriți să schimbați alte proprietăți ale unei componente, cum ar fi vizibilitatea unei cutii de text sau opțiunile dintr-un grup de butoane radio? Puteți face acest lucru prin returnarea metodei <code>update()</code> a unei clase de componentă în loc de o valoare de returnare obișnuită din funcția dvs.</p> <p data-svelte-h="svelte-1ab3ykr">Acest lucru este cel mai ușor ilustrat cu un exemplu:</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">"short"</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">"long"</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">"short"</span>, <span class="hljs-string">"long"</span>, <span class="hljs-string">"none"</span>], label=<span class="hljs-string">"What kind of essay would you like to write?"</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-96swd6">Tocmai am explorat toate conceptele de bază ale <code>Blocks</code>! La fel ca în cazul <code>Interface</code>-urilor, puteți crea demo-uri cool care pot fi partajate folosind <code>share=True</code> în metoda <code>launch()</code> sau implementate pe <a href="https://huggingface.co/spaces" rel="nofollow">Hugging Face Spaces</a>.</p> <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/rum/chapter9/7.mdx" target="_blank"><span data-svelte-h="svelte-1kd6by1"><</span> <span data-svelte-h="svelte-x0xyl0">></span> <span data-svelte-h="svelte-1dajgef"><span class="underline ml-1.5">Update</span> on GitHub</span></a> <p></p>

	<script>
	{
	__sveltekit_1ftlxhy = {
	assets: "/docs/course/pr_1069/rum",
	base: "/docs/course/pr_1069/rum",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

	Promise.all([
	import("/docs/course/pr_1069/rum/_app/immutable/entry/start.1de7c3d2.js"),
	import("/docs/course/pr_1069/rum/_app/immutable/entry/app.1f82014c.js")
	]).then(([kit, app]) => {
	kit.start(app, element, {
	node_ids: [0, 99],
	data,
	form: null,
	error: null
	});
	});
	}
	</script>

Xet Storage Details

Size:: 41.3 kB
Xet hash:: 7d4e44063c0db32cfcca61522f134b8087bd0af44dd61ffc3e4e263d75bb5ed9

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