Hugging Face's logo

Buckets:
hf-doc-build
/
doc-dev

Files
xet
hf-doc-build/doc-dev / course /pr_1069 /it /chapter9 /3.html
rtrm's picture
rtrm
download
raw
31.2 kB
<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Capire la classe Interface&quot;,&quot;local&quot;:&quot;capire-la-classe-interface&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Come creare una Interface&quot;,&quot;local&quot;:&quot;come-creare-una-interface&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Un semplice esempio con l’audio&quot;,&quot;local&quot;:&quot;un-semplice-esempio-con-laudio&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Lavorare con più input e output&quot;,&quot;local&quot;:&quot;lavorare-con-più-input-e-output&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Il metodo launch()&quot;,&quot;local&quot;:&quot;il-metodo-launch&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&quot;title&quot;:&quot;✏️ Mettiamolo in pratica!&quot;,&quot;local&quot;:&quot;-mettiamolo-in-pratica&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;:1}">
 <link href="/docs/course/pr_1069/it/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/entry/start.693d748d.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/chunks/scheduler.37c15a92.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/chunks/singletons.60b4c7a2.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/chunks/index.18351ede.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/chunks/paths.43b6516c.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/entry/app.e9cfd099.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/chunks/index.2bf4358c.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/nodes/0.bb8a536c.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/chunks/each.e59479a4.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/nodes/51.6a108da6.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/chunks/CodeBlock.4e987730.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/chunks/CourseFloatingBanner.9ff4c771.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/chunks/DocNotebookDropdown.efc1fb7c.js">
 <link rel="modulepreload" href="/docs/course/pr_1069/it/_app/immutable/chunks/getInferenceSnippets.24b50994.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{&quot;title&quot;:&quot;Capire la classe Interface&quot;,&quot;local&quot;:&quot;capire-la-classe-interface&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Come creare una Interface&quot;,&quot;local&quot;:&quot;come-creare-una-interface&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Un semplice esempio con l’audio&quot;,&quot;local&quot;:&quot;un-semplice-esempio-con-laudio&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2},{&quot;title&quot;:&quot;Lavorare con più input e output&quot;,&quot;local&quot;:&quot;lavorare-con-più-input-e-output&quot;,&quot;sections&quot;:[{&quot;title&quot;:&quot;Il metodo launch()&quot;,&quot;local&quot;:&quot;il-metodo-launch&quot;,&quot;sections&quot;:[],&quot;depth&quot;:3}],&quot;depth&quot;:2},{&quot;title&quot;:&quot;✏️ Mettiamolo in pratica!&quot;,&quot;local&quot;:&quot;-mettiamolo-in-pratica&quot;,&quot;sections&quot;:[],&quot;depth&quot;:2}],&quot;depth&quot;:1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <h1 class="relative group"><a id="capire-la-classe-interface" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#capire-la-classe-interface"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Capire la classe Interface</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/chapter9/section3.ipynb" target="_blank"><img alt="Open In Colab" class="!m-0" src="https://colab.research.google.com/assets/colab-badge.svg"></a> <a href="https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/chapter9/section3.ipynb" target="_blank"><img alt="Open In Studio Lab" class="!m-0" src="https://studiolab.sagemaker.aws/studiolab.svg"></a></div> <p data-svelte-h="svelte-14ztba5">In questa sezione, daremo un’occhiata più da vicino alla classe <code>Interface</code> e scopriremo i
parametri principali che si usano per crearne una.</p> <h2 class="relative group"><a id="come-creare-una-interface" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#come-creare-una-interface"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Come creare una Interface</span></h2> <p data-svelte-h="svelte-mdq459">Si può notare che la classe <code>Interface</code> (<em>interfaccia</em>) ha 3 parametri necessari:</p> <p data-svelte-h="svelte-5xxju6"><code>Interface(fn, inputs, outputs, ...)</code></p> <p data-svelte-h="svelte-6irjuj">Questi parametri sono:</p> <ul data-svelte-h="svelte-1j8hlms"><li><code>fn</code>: la funzione per le predizione chi viene utilizzata dall’interfaccia di Gradio. Questa funzione può accettare uno o più parametri e restituire uno o più valori</li> <li><code>inputs</code>: il/i tipo/i dei componenti in input. Gradio fornisce molti componenti predefiniti, come <code>&quot;image&quot;</code>(<em>immagine</em>) o <code>&quot;mic&quot;</code>(<em>microfono</em>).</li> <li><code>outputs</code>: il/i tipo/i dei componenti in output. Anche in questo caso, Gradio fornisce molti componenti predefiniti, come <code>&quot;image&quot;</code> o <code>&quot;label&quot;</code>.</li></ul> <p data-svelte-h="svelte-1jw46aq">Per un elenco completo dei componenti, <a href="https://gradio.app/docs" rel="nofollow">consultare la documentazione di Gradio</a>. Ogni componente predefinito può essere personalizzato istanziando la classe corrispondente al componente.</p> <p data-svelte-h="svelte-19f2t2g">Ad esempio, come abbiamo visto nella <a href="/course/chapter9/2">sezione precedente</a>,
invece di passare <code>&quot;textbox&quot;</code> al parametro <code>inputs</code>, si può passare un componente <code>Textbox(lines=7, label=&quot;Prompt&quot;)</code> per creare una casella di testo con 7 righe e un’etichetta.</p> <p data-svelte-h="svelte-typm67">Diamo un’occhiata a un altro esempio, questa volta con un componente <code>Audio</code>.</p> <h2 class="relative group"><a id="un-semplice-esempio-con-laudio" 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="#un-semplice-esempio-con-laudio"><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>Un semplice esempio con l’audio</span></h2> <p data-svelte-h="svelte-rpkqe">Come detto in precedenza, Gradio fornisce molti input e output differenti.
Costruiamo perciò una <code>Interface</code> che funziona con l’audio.</p> <p data-svelte-h="svelte-a1nhl0">In questo esempio, svilupperemo una funzione da audio ad audio che prende un
file audio e semplicemente lo inverte.</p> <p data-svelte-h="svelte-bhgks4">Per l’input utilizzeremo il componente <code>Audio</code>. Quando si usa il componente <code>Audio</code>,
si può specificare se si vuole che la <code>source</code> (<em>sorgente</em>) dell’audio sia un file
caricato dall’utente o un microfono con cui l’utente può registrare la propria voce. In questo caso,
impostiamo <code>&quot;microphone&quot;</code>. Per divertimento, aggiungeremo un’etichetta al nostro <code>Audio</code> che dice
“Speak here…” (<em>“Parla qui…”</em>).</p> <p data-svelte-h="svelte-y2m3ta">Inoltre, vorremmo ricevere l’audio come un numpy array, in modo da poterlo facilmente
“invertire”. Impostiamo quindi il <code>&quot;type&quot;</code> come <code>&quot;numpy&quot;</code>, che passa i dati in input
come una tupla di (<code>sample_rate</code>, <code>data</code>) alla nostra funzione.</p> <p data-svelte-h="svelte-1ixtdpr">Utilizzeremo anche il componente di output <code>Audio</code>, il quale può convertire automaticamente
una tupla formata da una frequenza di campionamento e un numpy array di dati in un file audio riproducibile.
In questo caso, non abbiamo bisogno di fare alcuna personalizzazione, quindi useremo la stringa
<code>&quot;audio&quot;</code>.</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> numpy <span class="hljs-keyword">as</span> np
<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
<span class="hljs-keyword">def</span> <span class="hljs-title function_">reverse_audio</span>(<span class="hljs-params">audio</span>):
 sr, data = audio
 reversed_audio = (sr, np.flipud(data))
 <span class="hljs-keyword">return</span> reversed_audio
mic = gr.Audio(source=<span class="hljs-string">&quot;microphone&quot;</span>, <span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;numpy&quot;</span>, label=<span class="hljs-string">&quot;Speak here...&quot;</span>)
gr.Interface(reverse_audio, mic, <span class="hljs-string">&quot;audio&quot;</span>).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-awt8h6">Il codice precedente produrrà un’interfaccia come quella qui sotto (se il tuo browser non
chiede il premesso per usare il microfono, <a href="https://huggingface.co/spaces/course-demos/audio-reverse" target="_blank">apri il demo in una tab diversa</a>.)</p> <iframe src="https://course-demos-audio-reverse.hf.space" frameborder="0" height="250" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <p data-svelte-h="svelte-tpp1gz">A questo punto potresti registrare la tua voce e di sentirti parlare al contrario - spaventoso 👻!</p> <h2 class="relative group"><a id="lavorare-con-più-input-e-output" 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="#lavorare-con-più-input-e-output"><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>Lavorare con più input e output</span></h2> <p data-svelte-h="svelte-1vk6lhf">Supponiamo di avere una funzione più complicata, con più input e output.
Nell’esempio seguente, abbiamo una funzione che richiede un elenco a tendina, il valore di uno slider e un numero,
e restituisce il campione audio di una nota musicale.</p> <p data-svelte-h="svelte-dck3w8">Osserva come si passa un elenco di componenti di input e di output,
e vedi se riesci a seguire quello che succede.</p> <p data-svelte-h="svelte-1nrtmto">La questione fondamentale è che quando si passa:</p> <ul data-svelte-h="svelte-1p8dh6b"><li>un elenco di componenti di input, ogni componente corrisponde in ordine a un parametro.</li> <li>un elenco di componenti di output, ogni componente corrisponde a un valore restituito.</li></ul> <p data-svelte-h="svelte-lpxldx">Lo snippet di codice qui sotto mostra come tre componenti di input si abbinano ai tre argomenti della funzione <code>generate_tone()</code>:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> numpy <span class="hljs-keyword">as</span> np
<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
notes = [<span class="hljs-string">&quot;C&quot;</span>, <span class="hljs-string">&quot;C#&quot;</span>, <span class="hljs-string">&quot;D&quot;</span>, <span class="hljs-string">&quot;D#&quot;</span>, <span class="hljs-string">&quot;E&quot;</span>, <span class="hljs-string">&quot;F&quot;</span>, <span class="hljs-string">&quot;F#&quot;</span>, <span class="hljs-string">&quot;G&quot;</span>, <span class="hljs-string">&quot;G#&quot;</span>, <span class="hljs-string">&quot;A&quot;</span>, <span class="hljs-string">&quot;A#&quot;</span>, <span class="hljs-string">&quot;B&quot;</span>]
<span class="hljs-keyword">def</span> <span class="hljs-title function_">generate_tone</span>(<span class="hljs-params">note, octave, duration</span>):
 sr = <span class="hljs-number">48000</span>
 a4_freq, tones_from_a4 = <span class="hljs-number">440</span>, <span class="hljs-number">12</span> * (octave - <span class="hljs-number">4</span>) + (note - <span class="hljs-number">9</span>)
 frequency = a4_freq * <span class="hljs-number">2</span> ** (tones_from_a4 / <span class="hljs-number">12</span>)
 duration = <span class="hljs-built_in">int</span>(duration)
 audio = np.linspace(<span class="hljs-number">0</span>, duration, duration * sr)
 audio = (<span class="hljs-number">20000</span> * np.sin(audio * (<span class="hljs-number">2</span> * np.pi * frequency))).astype(np.int16)
 <span class="hljs-keyword">return</span> (sr, audio)
gr.Interface(
 generate_tone,
 [
 gr.Dropdown(notes, <span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;index&quot;</span>),
 gr.Slider(minimum=<span class="hljs-number">4</span>, maximum=<span class="hljs-number">6</span>, step=<span class="hljs-number">1</span>),
 gr.Textbox(<span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;number&quot;</span>, value=<span class="hljs-number">1</span>, label=<span class="hljs-string">&quot;Duration in seconds&quot;</span>),
 ],
 <span class="hljs-string">&quot;audio&quot;</span>,
).launch()<!-- HTML_TAG_END --></pre></div> <iframe src="https://course-demos-generate-tone.hf.space" frameborder="0" height="450" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <h3 class="relative group"><a id="il-metodo-launch" 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="#il-metodo-launch"><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>Il metodo launch()</span></h3> <p data-svelte-h="svelte-1m4lcun">Per ora, abbiamo utilizzato il metodo <code>launch()</code> per avviare l’interfaccia, ma
non abbiamo discusso realmente cosa fa.</p> <p data-svelte-h="svelte-1khz6t">Di default, il metodo <code>launch()</code> avvia la demo in un web server che
che viene eseguito in locale. Se si esegue il codice in un Jupyter o Colab notebook,
Gradio incorporerà l’interfaccia grafica della demo nel notebook, così da poterla usare facilmente.</p> <p data-svelte-h="svelte-1m47pf2">È possibile modificare il comportamento di <code>launch()</code> attraverso diversi parametri:</p> <ul data-svelte-h="svelte-1x8aicu"><li><code>inline</code> - per visualizzare l’interfaccia <em>inline</em> sui notebook di Python.</li> <li><code>inbrowser</code> - per avviare automaticamente l’interfaccia in una nuova scheda del browser di default.</li> <li><code>share</code> - per create un link pubblico per l’interfaccia da condividere dal proprio computer. Un po’ come un link di Google Drive!</li></ul> <p data-svelte-h="svelte-ozzr76">Il parametro <code>share</code> sarà trattato in modo molto più dettagliato nella prossima sezione!</p> <h2 class="relative group"><a id="-mettiamolo-in-pratica" 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="#-mettiamolo-in-pratica"><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>✏️ Mettiamolo in pratica!</span></h2> <p data-svelte-h="svelte-24bysq">Costruiamo un’interfaccia che permetta di provare un modello di <strong>riconoscimento vocale</strong>.
Per renderlo interessante, accetteremo un input <em>qualisiasi</em> tra un microfono o un file caricato.</p> <p data-svelte-h="svelte-1o4vjjv">Come al solito, caricheremo il nostro modello di riconoscimento vocale usando la funzione <code>pipeline()</code> da 🤗 Transformers.
Se si ha bisogno di un ripasso veloce, si può tornare a <a href="/course/chapter1/3">quella sezione nel Capitolo 1</a>. Quindi, implementeremo una funzione <code>transcribe_audio()</code> che elabora l’audio e restituisce la sua trascrizione. Infine, avvolgeremo questa funzione in una <code>Interface</code> con i componenti <code>Audio</code> per gli input e solo testo per l’output. Il codice completo per questa applicazione è il seguente:</p> <div class="code-block relative "><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><!-- HTML_TAG_START --><span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> pipeline
<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
model = pipeline(<span class="hljs-string">&quot;automatic-speech-recognition&quot;</span>)
<span class="hljs-keyword">def</span> <span class="hljs-title function_">transcribe_audio</span>(<span class="hljs-params">mic=<span class="hljs-literal">None</span>, file=<span class="hljs-literal">None</span></span>):
 <span class="hljs-keyword">if</span> mic <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> <span class="hljs-literal">None</span>:
 audio = mic
 <span class="hljs-keyword">elif</span> file <span class="hljs-keyword">is</span> <span class="hljs-keyword">not</span> <span class="hljs-literal">None</span>:
 audio = file
 <span class="hljs-keyword">else</span>:
 <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;You must either provide a mic recording or a file&quot;</span>
 transcription = model(audio)[<span class="hljs-string">&quot;text&quot;</span>]
 <span class="hljs-keyword">return</span> transcription
gr.Interface(
 fn=transcribe_audio,
 inputs=[
 gr.Audio(source=<span class="hljs-string">&quot;microphone&quot;</span>, <span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;filepath&quot;</span>, optional=<span class="hljs-literal">True</span>),
 gr.Audio(source=<span class="hljs-string">&quot;upload&quot;</span>, <span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;filepath&quot;</span>, optional=<span class="hljs-literal">True</span>),
 ],
 outputs=<span class="hljs-string">&quot;text&quot;</span>,
).launch()<!-- HTML_TAG_END --></pre></div> <p data-svelte-h="svelte-55fg8a">Se il tuo browser non ti chiede i permessi per il microfono, <a href="https://huggingface.co/spaces/course-demos/audio-reverse" target="_blank">apri la demo in una scheda separata</a>.</p> <iframe src="https://course-demos-asr.hf.space" frameborder="0" height="550" title="Gradio app" class="container p-0 flex-grow space-iframe" allow="accelerometer; ambient-light-sensor; autoplay; battery; camera; document-domain; encrypted-media; fullscreen; geolocation; gyroscope; layout-animations; legacy-image-formats; magnetometer; microphone; midi; oversized-images; payment; picture-in-picture; publickey-credentials-get; sync-xhr; usb; vr ; wake-lock; xr-spatial-tracking" sandbox="allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"></iframe> <p data-svelte-h="svelte-1c0ove0">Ecco fatto! Ora è possibile utilizzare questa interfaccia per trascrivere l’audio. Si osservi che
passando il parametro <code>optional</code> come <code>True</code>, si permette all’utente di
fornire o un microfono o un file audio (o nessuno dei due, ma questo restituirà un messaggio di errore).</p> <p data-svelte-h="svelte-1rwz6wq">Continua a leggere per scoprire come condividere la tua interfaccia con gli altri!</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/it/chapter9/3.mdx" target="_blank"><span data-svelte-h="svelte-1kd6by1">&lt;</span> <span data-svelte-h="svelte-x0xyl0">&gt;</span> <span data-svelte-h="svelte-1dajgef"><span class="underline ml-1.5">Update</span> on GitHub</span></a> <p></p>
<script>
 {
 __sveltekit_u8ez91 = {
 assets: "/docs/course/pr_1069/it",
 base: "/docs/course/pr_1069/it",
 env: {}
 };
 const element = document.currentScript.parentElement;
 const data = [null,null];
 Promise.all([
 import("/docs/course/pr_1069/it/_app/immutable/entry/start.693d748d.js"),
 import("/docs/course/pr_1069/it/_app/immutable/entry/app.e9cfd099.js")
 ]).then(([kit, app]) => {
 kit.start(app, element, {
 node_ids: [0, 51],
 data,
 form: null,
 error: null
 });
 });
 }
 </script>

Xet Storage Details

Size:
31.2 kB
·
Xet hash:
41beaf685cce87688bbc0301e04a7b1b74d16c346634d6082a0881001ba5dc9d

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