course/pr_1021/it/_app/immutable/nodes/51.7587d5d0.js

import{s as Lt,f as it,n as Qt,o as St}from"../chunks/scheduler.37c15a92.js";import{S as Wt,i as Rt,g as n,s as i,r as d,A as Vt,h as o,f as l,c as s,j as ce,u as M,x as r,k as p,y as Nt,a,v as y,d as f,t as w,w as T}from"../chunks/index.2bf4358c.js";import{C as st}from"../chunks/CodeBlock.4e987730.js";import{C as Xt}from"../chunks/CourseFloatingBanner.9ff4c771.js";import{H as oe,E as Yt}from"../chunks/getInferenceSnippets.ebf8be91.js";function Pt(nt){let j,ue,re,me,h,de,J,Me,b,ot=`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.`,ye,U,fe,v,rt="Si può notare che la classe <code>Interface</code> (<em>interfaccia</em>) ha 3 parametri necessari:",we,I,pt="<code>Interface(fn, inputs, outputs, ...)</code>",Te,C,ct="Questi parametri sono:",je,g,ut="<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>",he,q,mt='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.',Je,k,dt=`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.`,be,A,Mt="Diamo un’occhiata a un altro esempio, questa volta con un componente <code>Audio</code>.",Ue,x,ve,$,yt=`Come detto in precedenza, Gradio fornisce molti input e output differenti.
Costruiamo perciò una <code>Interface</code> che funziona con l’audio.`,Ie,G,ft=`In questo esempio, svilupperemo una funzione da audio ad audio che prende un
file audio e semplicemente lo inverte.`,Ce,B,wt=`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>).`,ge,_,Tt=`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.`,qe,Z,jt=`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>.`,ke,H,Ae,E,ht=`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>.)`,xe,c,Jt,$e,z,bt="A questo punto potresti registrare la tua voce e di sentirti parlare al contrario - spaventoso 👻!",Ge,L,Be,Q,Ut=`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.`,_e,S,vt=`Osserva come si passa un elenco di componenti di input e di output,
e vedi se riesci a seguire quello che succede.`,Ze,W,It="La questione fondamentale è che quando si passa:",He,R,Ct="<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>",Ee,V,gt="Lo snippet di codice qui sotto mostra come tre componenti di input si abbinano ai tre argomenti della funzione <code>generate_tone()</code>:",ze,N,Le,u,qt,Qe,X,Se,Y,kt=`Per ora, abbiamo utilizzato il metodo <code>launch()</code> per avviare l’interfaccia, ma
non abbiamo discusso realmente cosa fa.`,We,P,At=`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.`,Re,F,xt="È possibile modificare il comportamento di <code>launch()</code> attraverso diversi parametri:",Ve,D,$t="<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>",Ne,K,Gt="Il parametro <code>share</code> sarà trattato in modo molto più dettagliato nella prossima sezione!",Xe,O,Ye,ee,Bt=`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.`,Pe,te,_t=`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:`,Fe,le,De,ae,Zt='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>.',Ke,m,Ht,Oe,ie,Et=`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).`,et,se,zt="Continua a leggere per scoprire come condividere la tua interfaccia con gli altri!",tt,ne,lt,pe,at;return h=new oe({props:{title:"Capire la classe Interface",local:"capire-la-classe-interface",headingTag:"h1"}}),J=new Xt({props:{chapter:9,classNames:"absolute z-10 right-0 top-0",notebooks:[{label:"Google Colab",value:"https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/chapter9/section3.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/chapter9/section3.ipynb"}]}}),U=new oe({props:{title:"Come creare una Interface",local:"come-creare-una-interface",headingTag:"h2"}}),x=new oe({props:{title:"Un semplice esempio con l’audio",local:"un-semplice-esempio-con-laudio",headingTag:"h2"}}),H=new st({props:{code:"aW1wb3J0JTIwbnVtcHklMjBhcyUyMG5wJTBBaW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQSUwQWRlZiUyMHJldmVyc2VfYXVkaW8oYXVkaW8pJTNBJTBBJTIwJTIwJTIwJTIwc3IlMkMlMjBkYXRhJTIwJTNEJTIwYXVkaW8lMEElMjAlMjAlMjAlMjByZXZlcnNlZF9hdWRpbyUyMCUzRCUyMChzciUyQyUyMG5wLmZsaXB1ZChkYXRhKSklMEElMjAlMjAlMjAlMjByZXR1cm4lMjByZXZlcnNlZF9hdWRpbyUwQSUwQSUwQW1pYyUyMCUzRCUyMGdyLkF1ZGlvKHNvdXJjZSUzRCUyMm1pY3JvcGhvbmUlMjIlMkMlMjB0eXBlJTNEJTIybnVtcHklMjIlMkMlMjBsYWJlbCUzRCUyMlNwZWFrJTIwaGVyZS4uLiUyMiklMEFnci5JbnRlcmZhY2UocmV2ZXJzZV9hdWRpbyUyQyUyMG1pYyUyQyUyMCUyMmF1ZGlvJTIyKS5sYXVuY2goKQ==",highlighted:`<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()`,wrap:!1}}),L=new oe({props:{title:"Lavorare con più input e output",local:"lavorare-con-più-input-e-output",headingTag:"h2"}}),N=new st({props:{code:"aW1wb3J0JTIwbnVtcHklMjBhcyUyMG5wJTBBaW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQW5vdGVzJTIwJTNEJTIwJTVCJTIyQyUyMiUyQyUyMCUyMkMlMjMlMjIlMkMlMjAlMjJEJTIyJTJDJTIwJTIyRCUyMyUyMiUyQyUyMCUyMkUlMjIlMkMlMjAlMjJGJTIyJTJDJTIwJTIyRiUyMyUyMiUyQyUyMCUyMkclMjIlMkMlMjAlMjJHJTIzJTIyJTJDJTIwJTIyQSUyMiUyQyUyMCUyMkElMjMlMjIlMkMlMjAlMjJCJTIyJTVEJTBBJTBBJTBBZGVmJTIwZ2VuZXJhdGVfdG9uZShub3RlJTJDJTIwb2N0YXZlJTJDJTIwZHVyYXRpb24pJTNBJTBBJTIwJTIwJTIwJTIwc3IlMjAlM0QlMjA0ODAwMCUwQSUyMCUyMCUyMCUyMGE0X2ZyZXElMkMlMjB0b25lc19mcm9tX2E0JTIwJTNEJTIwNDQwJTJDJTIwMTIlMjAqJTIwKG9jdGF2ZSUyMC0lMjA0KSUyMCUyQiUyMChub3RlJTIwLSUyMDkpJTBBJTIwJTIwJTIwJTIwZnJlcXVlbmN5JTIwJTNEJTIwYTRfZnJlcSUyMColMjAyJTIwKiolMjAodG9uZXNfZnJvbV9hNCUyMCUyRiUyMDEyKSUwQSUyMCUyMCUyMCUyMGR1cmF0aW9uJTIwJTNEJTIwaW50KGR1cmF0aW9uKSUwQSUyMCUyMCUyMCUyMGF1ZGlvJTIwJTNEJTIwbnAubGluc3BhY2UoMCUyQyUyMGR1cmF0aW9uJTJDJTIwZHVyYXRpb24lMjAqJTIwc3IpJTBBJTIwJTIwJTIwJTIwYXVkaW8lMjAlM0QlMjAoMjAwMDAlMjAqJTIwbnAuc2luKGF1ZGlvJTIwKiUyMCgyJTIwKiUyMG5wLnBpJTIwKiUyMGZyZXF1ZW5jeSkpKS5hc3R5cGUobnAuaW50MTYpJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwKHNyJTJDJTIwYXVkaW8pJTBBJTBBJTBBZ3IuSW50ZXJmYWNlKCUwQSUyMCUyMCUyMCUyMGdlbmVyYXRlX3RvbmUlMkMlMEElMjAlMjAlMjAlMjAlNUIlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBnci5Ecm9wZG93bihub3RlcyUyQyUyMHR5cGUlM0QlMjJpbmRleCUyMiklMkMlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBnci5TbGlkZXIobWluaW11bSUzRDQlMkMlMjBtYXhpbXVtJTNENiUyQyUyMHN0ZXAlM0QxKSUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGdyLlRleHRib3godHlwZSUzRCUyMm51bWJlciUyMiUyQyUyMHZhbHVlJTNEMSUyQyUyMGxhYmVsJTNEJTIyRHVyYXRpb24lMjBpbiUyMHNlY29uZHMlMjIpJTJDJTBBJTIwJTIwJTIwJTIwJTVEJTJDJTBBJTIwJTIwJTIwJTIwJTIyYXVkaW8lMjIlMkMlMEEpLmxhdW5jaCgp",highlighted:`<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()`,wrap:!1}}),X=new oe({props:{title:"Il metodo launch()",local:"il-metodo-launch",headingTag:"h3"}}),O=new oe({props:{title:"✏️ Mettiamolo in pratica!",local:"-mettiamolo-in-pratica",headingTag:"h2"}}),le=new st({props:{code:"ZnJvbSUyMHRyYW5zZm9ybWVycyUyMGltcG9ydCUyMHBpcGVsaW5lJTBBaW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQW1vZGVsJTIwJTNEJTIwcGlwZWxpbmUoJTIyYXV0b21hdGljLXNwZWVjaC1yZWNvZ25pdGlvbiUyMiklMEElMEElMEFkZWYlMjB0cmFuc2NyaWJlX2F1ZGlvKG1pYyUzRE5vbmUlMkMlMjBmaWxlJTNETm9uZSklM0ElMEElMjAlMjAlMjAlMjBpZiUyMG1pYyUyMGlzJTIwbm90JTIwTm9uZSUzQSUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGF1ZGlvJTIwJTNEJTIwbWljJTBBJTIwJTIwJTIwJTIwZWxpZiUyMGZpbGUlMjBpcyUyMG5vdCUyME5vbmUlM0ElMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBhdWRpbyUyMCUzRCUyMGZpbGUlMEElMjAlMjAlMjAlMjBlbHNlJTNBJTBBJTIwJTIwJTIwJTIwJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTIyWW91JTIwbXVzdCUyMGVpdGhlciUyMHByb3ZpZGUlMjBhJTIwbWljJTIwcmVjb3JkaW5nJTIwb3IlMjBhJTIwZmlsZSUyMiUwQSUyMCUyMCUyMCUyMHRyYW5zY3JpcHRpb24lMjAlM0QlMjBtb2RlbChhdWRpbyklNUIlMjJ0ZXh0JTIyJTVEJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwdHJhbnNjcmlwdGlvbiUwQSUwQSUwQWdyLkludGVyZmFjZSglMEElMjAlMjAlMjAlMjBmbiUzRHRyYW5zY3JpYmVfYXVkaW8lMkMlMEElMjAlMjAlMjAlMjBpbnB1dHMlM0QlNUIlMEElMjAlMjAlMjAlMjAlMjAlMjAlMjAlMjBnci5BdWRpbyhzb3VyY2UlM0QlMjJtaWNyb3Bob25lJTIyJTJDJTIwdHlwZSUzRCUyMmZpbGVwYXRoJTIyJTJDJTIwb3B0aW9uYWwlM0RUcnVlKSUyQyUwQSUyMCUyMCUyMCUyMCUyMCUyMCUyMCUyMGdyLkF1ZGlvKHNvdXJjZSUzRCUyMnVwbG9hZCUyMiUyQyUyMHR5cGUlM0QlMjJmaWxlcGF0aCUyMiUyQyUyMG9wdGlvbmFsJTNEVHJ1ZSklMkMlMEElMjAlMjAlMjAlMjAlNUQlMkMlMEElMjAlMjAlMjAlMjBvdXRwdXRzJTNEJTIydGV4dCUyMiUyQyUwQSkubGF1bmNoKCk=",highlighted:`<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()`,wrap:!1}}),ne=new Yt({props:{source:"https://github.com/huggingface/course/blob/main/chapters/it/chapter9/3.mdx"}}),{c(){j=n("meta"),ue=i(),re=n("p"),me=i(),d(h.$$.fragment),de=i(),d(J.$$.fragment),Me=i(),b=n("p"),b.innerHTML=ot,ye=i(),d(U.$$.fragment),fe=i(),v=n("p"),v.innerHTML=rt,we=i(),I=n("p"),I.innerHTML=pt,Te=i(),C=n("p"),C.textContent=ct,je=i(),g=n("ul"),g.innerHTML=ut,he=i(),q=n("p"),q.innerHTML=mt,Je=i(),k=n("p"),k.innerHTML=dt,be=i(),A=n("p"),A.innerHTML=Mt,Ue=i(),d(x.$$.fragment),ve=i(),$=n("p"),$.innerHTML=yt,Ie=i(),G=n("p"),G.textContent=ft,Ce=i(),B=n("p"),B.innerHTML=wt,ge=i(),_=n("p"),_.innerHTML=Tt,qe=i(),Z=n("p"),Z.innerHTML=jt,ke=i(),d(H.$$.fragment),Ae=i(),E=n("p"),E.innerHTML=ht,xe=i(),c=n("iframe"),$e=i(),z=n("p"),z.textContent=bt,Ge=i(),d(L.$$.fragment),Be=i(),Q=n("p"),Q.textContent=Ut,_e=i(),S=n("p"),S.textContent=vt,Ze=i(),W=n("p"),W.textContent=It,He=i(),R=n("ul"),R.innerHTML=Ct,Ee=i(),V=n("p"),V.innerHTML=gt,ze=i(),d(N.$$.fragment),Le=i(),u=n("iframe"),Qe=i(),d(X.$$.fragment),Se=i(),Y=n("p"),Y.innerHTML=kt,We=i(),P=n("p"),P.innerHTML=At,Re=i(),F=n("p"),F.innerHTML=xt,Ve=i(),D=n("ul"),D.innerHTML=$t,Ne=i(),K=n("p"),K.innerHTML=Gt,Xe=i(),d(O.$$.fragment),Ye=i(),ee=n("p"),ee.innerHTML=Bt,Pe=i(),te=n("p"),te.innerHTML=_t,Fe=i(),d(le.$$.fragment),De=i(),ae=n("p"),ae.innerHTML=Zt,Ke=i(),m=n("iframe"),Oe=i(),ie=n("p"),ie.innerHTML=Et,et=i(),se=n("p"),se.textContent=zt,tt=i(),d(ne.$$.fragment),lt=i(),pe=n("p"),this.h()},l(e){const t=Vt("svelte-u9bgzb",document.head);j=o(t,"META",{name:!0,content:!0}),t.forEach(l),ue=s(e),re=o(e,"P",{}),ce(re).forEach(l),me=s(e),M(h.$$.fragment,e),de=s(e),M(J.$$.fragment,e),Me=s(e),b=o(e,"P",{"data-svelte-h":!0}),r(b)!=="svelte-14ztba5"&&(b.innerHTML=ot),ye=s(e),M(U.$$.fragment,e),fe=s(e),v=o(e,"P",{"data-svelte-h":!0}),r(v)!=="svelte-mdq459"&&(v.innerHTML=rt),we=s(e),I=o(e,"P",{"data-svelte-h":!0}),r(I)!=="svelte-5xxju6"&&(I.innerHTML=pt),Te=s(e),C=o(e,"P",{"data-svelte-h":!0}),r(C)!=="svelte-6irjuj"&&(C.textContent=ct),je=s(e),g=o(e,"UL",{"data-svelte-h":!0}),r(g)!=="svelte-1j8hlms"&&(g.innerHTML=ut),he=s(e),q=o(e,"P",{"data-svelte-h":!0}),r(q)!=="svelte-1jw46aq"&&(q.innerHTML=mt),Je=s(e),k=o(e,"P",{"data-svelte-h":!0}),r(k)!=="svelte-19f2t2g"&&(k.innerHTML=dt),be=s(e),A=o(e,"P",{"data-svelte-h":!0}),r(A)!=="svelte-typm67"&&(A.innerHTML=Mt),Ue=s(e),M(x.$$.fragment,e),ve=s(e),$=o(e,"P",{"data-svelte-h":!0}),r($)!=="svelte-rpkqe"&&($.innerHTML=yt),Ie=s(e),G=o(e,"P",{"data-svelte-h":!0}),r(G)!=="svelte-a1nhl0"&&(G.textContent=ft),Ce=s(e),B=o(e,"P",{"data-svelte-h":!0}),r(B)!=="svelte-bhgks4"&&(B.innerHTML=wt),ge=s(e),_=o(e,"P",{"data-svelte-h":!0}),r(_)!=="svelte-y2m3ta"&&(_.innerHTML=Tt),qe=s(e),Z=o(e,"P",{"data-svelte-h":!0}),r(Z)!=="svelte-1ixtdpr"&&(Z.innerHTML=jt),ke=s(e),M(H.$$.fragment,e),Ae=s(e),E=o(e,"P",{"data-svelte-h":!0}),r(E)!=="svelte-awt8h6"&&(E.innerHTML=ht),xe=s(e),c=o(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),ce(c).forEach(l),$e=s(e),z=o(e,"P",{"data-svelte-h":!0}),r(z)!=="svelte-tpp1gz"&&(z.textContent=bt),Ge=s(e),M(L.$$.fragment,e),Be=s(e),Q=o(e,"P",{"data-svelte-h":!0}),r(Q)!=="svelte-1vk6lhf"&&(Q.textContent=Ut),_e=s(e),S=o(e,"P",{"data-svelte-h":!0}),r(S)!=="svelte-dck3w8"&&(S.textContent=vt),Ze=s(e),W=o(e,"P",{"data-svelte-h":!0}),r(W)!=="svelte-1nrtmto"&&(W.textContent=It),He=s(e),R=o(e,"UL",{"data-svelte-h":!0}),r(R)!=="svelte-1p8dh6b"&&(R.innerHTML=Ct),Ee=s(e),V=o(e,"P",{"data-svelte-h":!0}),r(V)!=="svelte-lpxldx"&&(V.innerHTML=gt),ze=s(e),M(N.$$.fragment,e),Le=s(e),u=o(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),ce(u).forEach(l),Qe=s(e),M(X.$$.fragment,e),Se=s(e),Y=o(e,"P",{"data-svelte-h":!0}),r(Y)!=="svelte-1m4lcun"&&(Y.innerHTML=kt),We=s(e),P=o(e,"P",{"data-svelte-h":!0}),r(P)!=="svelte-1khz6t"&&(P.innerHTML=At),Re=s(e),F=o(e,"P",{"data-svelte-h":!0}),r(F)!=="svelte-1m47pf2"&&(F.innerHTML=xt),Ve=s(e),D=o(e,"UL",{"data-svelte-h":!0}),r(D)!=="svelte-1x8aicu"&&(D.innerHTML=$t),Ne=s(e),K=o(e,"P",{"data-svelte-h":!0}),r(K)!=="svelte-ozzr76"&&(K.innerHTML=Gt),Xe=s(e),M(O.$$.fragment,e),Ye=s(e),ee=o(e,"P",{"data-svelte-h":!0}),r(ee)!=="svelte-24bysq"&&(ee.innerHTML=Bt),Pe=s(e),te=o(e,"P",{"data-svelte-h":!0}),r(te)!=="svelte-1o4vjjv"&&(te.innerHTML=_t),Fe=s(e),M(le.$$.fragment,e),De=s(e),ae=o(e,"P",{"data-svelte-h":!0}),r(ae)!=="svelte-55fg8a"&&(ae.innerHTML=Zt),Ke=s(e),m=o(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),ce(m).forEach(l),Oe=s(e),ie=o(e,"P",{"data-svelte-h":!0}),r(ie)!=="svelte-1c0ove0"&&(ie.innerHTML=Et),et=s(e),se=o(e,"P",{"data-svelte-h":!0}),r(se)!=="svelte-1rwz6wq"&&(se.textContent=zt),tt=s(e),M(ne.$$.fragment,e),lt=s(e),pe=o(e,"P",{}),ce(pe).forEach(l),this.h()},h(){p(j,"name","hf:doc:metadata"),p(j,"content",Ft),it(c.src,Jt="https://course-demos-audio-reverse.hf.space")||p(c,"src",Jt),p(c,"frameborder","0"),p(c,"height","250"),p(c,"title","Gradio app"),p(c,"class","container p-0 flex-grow space-iframe"),p(c,"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"),p(c,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),it(u.src,qt="https://course-demos-generate-tone.hf.space")||p(u,"src",qt),p(u,"frameborder","0"),p(u,"height","450"),p(u,"title","Gradio app"),p(u,"class","container p-0 flex-grow space-iframe"),p(u,"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"),p(u,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),it(m.src,Ht="https://course-demos-asr.hf.space")||p(m,"src",Ht),p(m,"frameborder","0"),p(m,"height","550"),p(m,"title","Gradio app"),p(m,"class","container p-0 flex-grow space-iframe"),p(m,"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"),p(m,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,t){Nt(document.head,j),a(e,ue,t),a(e,re,t),a(e,me,t),y(h,e,t),a(e,de,t),y(J,e,t),a(e,Me,t),a(e,b,t),a(e,ye,t),y(U,e,t),a(e,fe,t),a(e,v,t),a(e,we,t),a(e,I,t),a(e,Te,t),a(e,C,t),a(e,je,t),a(e,g,t),a(e,he,t),a(e,q,t),a(e,Je,t),a(e,k,t),a(e,be,t),a(e,A,t),a(e,Ue,t),y(x,e,t),a(e,ve,t),a(e,$,t),a(e,Ie,t),a(e,G,t),a(e,Ce,t),a(e,B,t),a(e,ge,t),a(e,_,t),a(e,qe,t),a(e,Z,t),a(e,ke,t),y(H,e,t),a(e,Ae,t),a(e,E,t),a(e,xe,t),a(e,c,t),a(e,$e,t),a(e,z,t),a(e,Ge,t),y(L,e,t),a(e,Be,t),a(e,Q,t),a(e,_e,t),a(e,S,t),a(e,Ze,t),a(e,W,t),a(e,He,t),a(e,R,t),a(e,Ee,t),a(e,V,t),a(e,ze,t),y(N,e,t),a(e,Le,t),a(e,u,t),a(e,Qe,t),y(X,e,t),a(e,Se,t),a(e,Y,t),a(e,We,t),a(e,P,t),a(e,Re,t),a(e,F,t),a(e,Ve,t),a(e,D,t),a(e,Ne,t),a(e,K,t),a(e,Xe,t),y(O,e,t),a(e,Ye,t),a(e,ee,t),a(e,Pe,t),a(e,te,t),a(e,Fe,t),y(le,e,t),a(e,De,t),a(e,ae,t),a(e,Ke,t),a(e,m,t),a(e,Oe,t),a(e,ie,t),a(e,et,t),a(e,se,t),a(e,tt,t),y(ne,e,t),a(e,lt,t),a(e,pe,t),at=!0},p:Qt,i(e){at||(f(h.$$.fragment,e),f(J.$$.fragment,e),f(U.$$.fragment,e),f(x.$$.fragment,e),f(H.$$.fragment,e),f(L.$$.fragment,e),f(N.$$.fragment,e),f(X.$$.fragment,e),f(O.$$.fragment,e),f(le.$$.fragment,e),f(ne.$$.fragment,e),at=!0)},o(e){w(h.$$.fragment,e),w(J.$$.fragment,e),w(U.$$.fragment,e),w(x.$$.fragment,e),w(H.$$.fragment,e),w(L.$$.fragment,e),w(N.$$.fragment,e),w(X.$$.fragment,e),w(O.$$.fragment,e),w(le.$$.fragment,e),w(ne.$$.fragment,e),at=!1},d(e){e&&(l(ue),l(re),l(me),l(de),l(Me),l(b),l(ye),l(fe),l(v),l(we),l(I),l(Te),l(C),l(je),l(g),l(he),l(q),l(Je),l(k),l(be),l(A),l(Ue),l(ve),l($),l(Ie),l(G),l(Ce),l(B),l(ge),l(_),l(qe),l(Z),l(ke),l(Ae),l(E),l(xe),l(c),l($e),l(z),l(Ge),l(Be),l(Q),l(_e),l(S),l(Ze),l(W),l(He),l(R),l(Ee),l(V),l(ze),l(Le),l(u),l(Qe),l(Se),l(Y),l(We),l(P),l(Re),l(F),l(Ve),l(D),l(Ne),l(K),l(Xe),l(Ye),l(ee),l(Pe),l(te),l(Fe),l(De),l(ae),l(Ke),l(m),l(Oe),l(ie),l(et),l(se),l(tt),l(lt),l(pe)),l(j),T(h,e),T(J,e),T(U,e),T(x,e),T(H,e),T(L,e),T(N,e),T(X,e),T(O,e),T(le,e),T(ne,e)}}}const Ft='{"title":"Capire la classe Interface","local":"capire-la-classe-interface","sections":[{"title":"Come creare una Interface","local":"come-creare-una-interface","sections":[],"depth":2},{"title":"Un semplice esempio con l’audio","local":"un-semplice-esempio-con-laudio","sections":[],"depth":2},{"title":"Lavorare con più input e output","local":"lavorare-con-più-input-e-output","sections":[{"title":"Il metodo launch()","local":"il-metodo-launch","sections":[],"depth":3}],"depth":2},{"title":"✏️ Mettiamolo in pratica!","local":"-mettiamolo-in-pratica","sections":[],"depth":2}],"depth":1}';function Dt(nt){return St(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class al extends Wt{constructor(j){super(),Rt(this,j,Dt,Pt,Lt,{})}}export{al as component};