course/pr_1114/it/chapter9/1.html

<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Introduzione a Gradio&quot;,&quot;local&quot;:&quot;introduzione-a-gradio&quot;,&quot;sections&quot;:[],&quot;depth&quot;:1}">
		<link href="/docs/course/pr_1114/it/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/entry/start.3bbcab86.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/chunks/scheduler.505acc25.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/chunks/singletons.803ed01f.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/chunks/index.001f95d5.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/chunks/paths.6d74035b.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/entry/app.e9337b7f.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/chunks/preload-helper.9980ecba.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/chunks/index.1238bded.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/nodes/0.759f9c92.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/chunks/each.e59479a4.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/nodes/49.848363d7.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.cccc31f8.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/chunks/CourseFloatingBanner.0b6e065b.js">
		<link rel="modulepreload" href="/docs/course/pr_1114/it/_app/immutable/chunks/DocNotebookDropdown.446f7d35.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Introduzione a Gradio&quot;,&quot;local&quot;:&quot;introduzione-a-gradio&quot;,&quot;sections&quot;:[],&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="introduzione-a-gradio" 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="#introduzione-a-gradio"><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>Introduzione a Gradio</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>  </div> <p data-svelte-h="svelte-1d6qdbc">In questo capitolo scopriremo come creare delle <strong>demo interattive</strong> per i tuoi modelli di machine learning.</p> <p data-svelte-h="svelte-1e06ois">Perché costruire una demo o una GUI per il tuo modello di machine learning? Le demo permettono:</p> <ul data-svelte-h="svelte-2gk84a"><li>agli <strong>sviluppatori di machine learning</strong> di presentare facilmente il proprio lavoro ad un pubblico più ampio, tra cui i team non tecnici o i clienti</li> <li>ai <strong>ricercatori</strong> di riprodurre più facilmente i modelli di machine learning e i loro comportamenti</li> <li>ai <strong>quality tester</strong> o <strong>utenti finali</strong>  per individuare e fare il debug dei difetti dei modelli con maggiore facilità</li> <li>a <strong>utenti vari</strong> per scoprire i bias degli algoritmi nei modelli</li></ul> <p data-svelte-h="svelte-15dvg1h">Utilizzeremo la libreria Gradio per costruire le demo dei nostri modelli. Gradio consente di creare, personalizzare e condividere demo sul web per qualsiasi modello di machine learning, interamente in Python.</p> <p data-svelte-h="svelte-4qzdgh">Ecco alcuni esempi di demo di machine learning costruite con Gradio:</p> <ul data-svelte-h="svelte-1q3utja"><li>Un modello di <strong>riconoscimento di disegni</strong> che riceve uno schizzo di un disegno e restituisce il nome di ciò che pensa sia stato disegnato:</li></ul> <iframe src="https://course-demos-draw2.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> <ul data-svelte-h="svelte-uyqaju"><li>Un modello che estrae <strong>risposte alle domande</strong> che prende in considerazione un contesto e una domanda e produce una risposta e la sua probabilità (abbiamo discusso questo tipo di modello <a href="/course/chapter7/7">nel capitolo 7</a>):</li></ul> <iframe src="https://course-demos-question-answering-simple.hf.space" frameborder="0" height="640" 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> <ul data-svelte-h="svelte-39fsr8"><li>Un modello di <strong>rimozione dello sfondo</strong> che riceve un’immagine e la restituisce con lo sfondo rimosso:</li></ul> <iframe src="https://course-demos-remove-bg-original.hf.space" frameborder="0" height="640" 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-9m8q4">Questo capitolo è suddiviso in sezioni che comprendono sia <em>concetti</em> che <em>applicazioni</em>. Dopo aver appreso il concetto in ogni sezione, lo applicherai per creare un particolare tipo di demo, dalla classificazione delle immagini al riconoscimento vocale. Al termine di questo capitolo, sarete in grado di creare queste demo (e molte altre!) con poche righe di Python.</p> <blockquote class="tip" data-svelte-h="svelte-wv4ipt"><p>👀 Dai un’occhiata a <a href="https://huggingface.co/spaces" target="_blank">Hugging Face Spaces</a> per vedere molti esempi recenti di demo di machine learning costruite dalla community!</p></blockquote> <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/it/chapter9/1.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_48uqgk = {
						assets: "/docs/course/pr_1114/it",
						base: "/docs/course/pr_1114/it",
						env: {}
					};

					const element = document.currentScript.parentElement;

					const data = [null,null];

					Promise.all([
						import("/docs/course/pr_1114/it/_app/immutable/entry/start.3bbcab86.js"),
						import("/docs/course/pr_1114/it/_app/immutable/entry/app.e9337b7f.js")
					]).then(([kit, app]) => {
						kit.start(app, element, {
							node_ids: [0, 49],
							data,
							form: null,
							error: null
						});
					});
				}
			</script>