import{S as yn,i as bn,s as _n,e as l,k as u,w as I,t as o,M as En,c as r,d as a,m as h,a as n,x as P,h as s,b as c,Z as Ul,G as t,g as p,y as O,L as kn,q as T,o as S,B as N,v as gn}from"../../chunks/vendor-hf-doc-builder.js";import{I as We}from"../../chunks/IconCopyLink-hf-doc-builder.js";import{C as Wl}from"../../chunks/CodeBlock-hf-doc-builder.js";import{D as jn}from"../../chunks/DocNotebookDropdown-hf-doc-builder.js";function $n(Ml){let G,Rt,L,M,Me,ce,so,Be,lo,Kt,ue,Zt,B,ro,Je,no,io,Qt,F,J,Re,he,po,Ke,co,Vt,R,uo,Ze,ho,fo,Xt,$e,Qe,mo,ea,xe,wo,ta,g,qe,Ve,vo,yo,bo,j,Xe,_o,Eo,et,ko,go,tt,jo,$o,xo,_,at,qo,Ao,ot,Co,Do,st,Io,Po,lt,Oo,To,aa,K,So,de,No,Go,oa,m,Lo,Ae,Fo,Ho,rt,zo,Yo,nt,Uo,Wo,it,Mo,Bo,sa,Z,Jo,pt,Ro,Ko,la,H,Q,ct,fe,Zo,ut,Qo,ra,V,Vo,ht,Xo,es,na,Ce,ts,ia,d,as,dt,os,ss,ft,ls,rs,mt,ns,is,wt,ps,cs,vt,us,hs,pa,w,ds,yt,fs,ms,bt,ws,vs,_t,ys,bs,Et,_s,Es,ca,$,ks,kt,gs,js,gt,$s,xs,ua,me,ha,X,qs,we,As,Cs,da,v,Bl,fa,De,Ds,ma,z,ee,jt,ve,Is,$t,Ps,wa,Ie,Os,va,Pe,Ts,ya,Oe,Ss,ba,te,xt,Ns,Gs,qt,Ls,_a,ae,Fs,At,Hs,zs,Ea,ye,ka,y,Jl,ga,Y,oe,Ct,be,Ys,_e,Us,Dt,Ws,Ms,ja,se,Bs,It,Js,Rs,$a,le,Ks,Pt,Zs,Qs,xa,re,Vs,Ot,Xs,el,qa,x,Te,Tt,tl,al,ol,Se,St,sl,ll,rl,Ne,Nt,nl,il,Aa,ne,pl,Gt,cl,ul,Ca,U,ie,Lt,Ee,hl,Ft,dl,Da,q,fl,Ht,ml,wl,zt,vl,yl,Ia,f,bl,Yt,_l,El,Ge,kl,gl,Ut,jl,$l,Wt,xl,ql,Mt,Al,Cl,Pa,ke,Oa,pe,Dl,ge,Il,Pl,Ta,b,Rl,Sa,A,Ol,Bt,Tl,Sl,Jt,Nl,Gl,Na,Le,Ll,Ga;return ce=new We({}),ue=new jn({props:{classNames:"absolute z-10 right-0 top-0",options:[{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"}]}}),he=new We({}),fe=new We({}),me=new Wl({props:{code:`import numpy as np
import gradio as gr


def reverse_audio(audio):
    sr, data = audio
    reversed_audio = (sr, np.flipud(data))
    return reversed_audio


mic = gr.Audio(source="microphone", type="numpy", label="Speak here...")
gr.Interface(reverse_audio, mic, "audio").launch()`,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()`}}),ve=new We({}),ye=new Wl({props:{code:`import numpy as np
import gradio as gr

notes = ["C", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B"]


def generate_tone(note, octave, duration):
    sr = 48000
    a4_freq, tones_from_a4 = 440, 12 * (octave - 4) + (note - 9)
    frequency = a4_freq * 2 ** (tones_from_a4 / 12)
    duration = int(duration)
    audio = np.linspace(0, duration, duration * sr)
    audio = (20000 * np.sin(audio * (2 * np.pi * frequency))).astype(np.int16)
    return (sr, audio)


gr.Interface(
    generate_tone,
    [
        gr.Dropdown(notes, type="index"),
        gr.Slider(minimum=4, maximum=6, step=1),
        gr.Textbox(type="number", value=1, label="Duration in seconds"),
    ],
    "audio",
).launch()`,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()`}}),be=new We({}),Ee=new We({}),ke=new Wl({props:{code:`from transformers import pipeline
import gradio as gr

model = pipeline("automatic-speech-recognition")


def transcribe_audio(mic=None, file=None):
    if mic is not None:
        audio = mic
    elif file is not None:
        audio = file
    else:
        return "You must either provide a mic recording or a file"
    transcription = model(audio)["text"]
    return transcription


gr.Interface(
    fn=transcribe_audio,
    inputs=[
        gr.Audio(source="microphone", type="filepath", optional=True),
        gr.Audio(source="upload", type="filepath", optional=True),
    ],
    outputs="text",
).launch()`,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()`}}),{c(){G=l("meta"),Rt=u(),L=l("h1"),M=l("a"),Me=l("span"),I(ce.$$.fragment),so=u(),Be=l("span"),lo=o("Understanding the Interface class"),Kt=u(),I(ue.$$.fragment),Zt=u(),B=l("p"),ro=o("In this section, we will take a closer look at the "),Je=l("code"),no=o("Interface"),io=o(` class, and understand the
main parameters used to create one.`),Qt=u(),F=l("h2"),J=l("a"),Re=l("span"),I(he.$$.fragment),po=u(),Ke=l("span"),co=o("How to create an Interface"),Vt=u(),R=l("p"),uo=o("You\u2019ll notice that the "),Ze=l("code"),ho=o("Interface"),fo=o(" class has 3 required parameters:"),Xt=u(),$e=l("p"),Qe=l("code"),mo=o("Interface(fn, inputs, outputs, ...)"),ea=u(),xe=l("p"),wo=o("These parameters are:"),ta=u(),g=l("ul"),qe=l("li"),Ve=l("code"),vo=o("fn"),yo=o(": the prediction function that is wrapped by the Gradio interface. This function can take one or more parameters and return one or more values"),bo=u(),j=l("li"),Xe=l("code"),_o=o("inputs"),Eo=o(": the input component type(s). Gradio provides many pre-built components such as"),et=l("code"),ko=o('"image"'),go=o(" or "),tt=l("code"),jo=o('"mic"'),$o=o("."),xo=u(),_=l("li"),at=l("code"),qo=o("outputs"),Ao=o(": the output component type(s). Again, "),ot=l("code"),Co=o("gradio"),Do=o(" provides many pre-built components e.g. "),st=l("code"),Io=o('"image"'),Po=o(" or "),lt=l("code"),Oo=o('"label"'),To=o("."),aa=u(),K=l("p"),So=o("For a complete list of components, "),de=l("a"),No=o("see the Gradio docs "),Go=o(". Each pre-built component can be customized by instantiating the class corresponding to the component."),oa=u(),m=l("p"),Lo=o("For example, as we saw in the "),Ae=l("a"),Fo=o("previous section"),Ho=o(`,
instead of passing in `),rt=l("code"),zo=o('"textbox"'),Yo=o(" to the "),nt=l("code"),Uo=o("inputs"),Wo=o(" parameter, you can pass in a "),it=l("code"),Mo=o('Textbox(lines=7, label="Prompt")'),Bo=o(" component to create a textbox with 7 lines and a label."),sa=u(),Z=l("p"),Jo=o("Let\u2019s take a look at another example, this time with an "),pt=l("code"),Ro=o("Audio"),Ko=o(" component."),la=u(),H=l("h2"),Q=l("a"),ct=l("span"),I(fe.$$.fragment),Zo=u(),ut=l("span"),Qo=o("A simple example with audio"),ra=u(),V=l("p"),Vo=o(`As mentioned earlier, Gradio provides many different inputs and outputs.
So let\u2019s build an `),ht=l("code"),Xo=o("Interface"),es=o(" that works with audio."),na=u(),Ce=l("p"),ts=o(`In this example, we\u2019ll build an audio-to-audio function that takes an
audio file and simply reverses it.`),ia=u(),d=l("p"),as=o("We will use for the input the "),dt=l("code"),os=o("Audio"),ss=o(" component. When using the "),ft=l("code"),ls=o("Audio"),rs=o(` component,
you can specify whether you want the `),mt=l("code"),ns=o("source"),is=o(` of the audio to be a file that the user
uploads or a microphone that the user records their voice with. In this case, let\u2019s
set it to a `),wt=l("code"),ps=o('"microphone"'),cs=o(". Just for fun, we\u2019ll add a label to our "),vt=l("code"),us=o("Audio"),hs=o(` that says
\u201CSpeak here\u2026\u201C.`),pa=u(),w=l("p"),ds=o(`In addition, we\u2019d like to receive the audio as a numpy array so that we can easily
\u201Creverse\u201D it. So we\u2019ll set the `),yt=l("code"),fs=o('"type"'),ms=o(" to be "),bt=l("code"),ws=o('"numpy"'),vs=o(`, which passes the input
data as a tuple of (`),_t=l("code"),ys=o("sample_rate"),bs=o(", "),Et=l("code"),_s=o("data"),Es=o(") into our function."),ca=u(),$=l("p"),ks=o("We will also use the "),kt=l("code"),gs=o("Audio"),js=o(` output component which can automatically
render a tuple with a sample rate and numpy array of data as a playable audio file.
In this case, we do not need to do any customization, so we will use the string
shortcut `),gt=l("code"),$s=o('"audio"'),xs=o("."),ua=u(),I(me.$$.fragment),ha=u(),X=l("p"),qs=o(`The code above will produce an interface like the one below (if your browser doesn\u2019t
ask you for microphone permissions, `),we=l("a"),As=o("open the demo in  a separate tab"),Cs=o(".)"),da=u(),v=l("iframe"),fa=u(),De=l("p"),Ds=o("You should now be able to record your voice and hear yourself speaking in reverse - spooky \u{1F47B}!"),ma=u(),z=l("h2"),ee=l("a"),jt=l("span"),I(ve.$$.fragment),Is=u(),$t=l("span"),Ps=o("Handling multiple inputs and outputs"),wa=u(),Ie=l("p"),Os=o(`Let\u2019s say we had a more complicated function, with multiple inputs and outputs.
In the example below, we have a function that takes a dropdown index, a slider value, and number,
and returns an audio sample of a musical tone.`),va=u(),Pe=l("p"),Ts=o(`Take a look how we pass a list of input and output components,
and see if you can follow along what\u2019s happening.`),ya=u(),Oe=l("p"),Ss=o("The key here is that when you pass:"),ba=u(),te=l("ul"),xt=l("li"),Ns=o("a list of input components, each component corresponds to a parameter in order."),Gs=u(),qt=l("li"),Ls=o("a list of output coponents, each component corresponds to a returned value."),_a=u(),ae=l("p"),Fs=o("The code snippet below shows how three input components line up with the three arguments of the "),At=l("code"),Hs=o("generate_tone()"),zs=o(" function:"),Ea=u(),I(ye.$$.fragment),ka=u(),y=l("iframe"),ga=u(),Y=l("h3"),oe=l("a"),Ct=l("span"),I(be.$$.fragment),Ys=u(),_e=l("span"),Us=o("The "),Dt=l("code"),Ws=o("launch()"),Ms=o(" method"),ja=u(),se=l("p"),Bs=o("So far, we have used the "),It=l("code"),Js=o("launch()"),Rs=o(` method to launch the interface, but we
haven\u2019t really discussed what it does.`),$a=u(),le=l("p"),Ks=o("By default, the "),Pt=l("code"),Zs=o("launch()"),Qs=o(` method will launch the demo in a web server that
is running locally. If you are running your code in a Jupyter or Colab notebook, then
Gradio will embed the demo GUI in the notebook so you can easily use it.`),xa=u(),re=l("p"),Vs=o("You can customize the behavior of "),Ot=l("code"),Xs=o("launch()"),el=o(" through different parameters:"),qa=u(),x=l("ul"),Te=l("li"),Tt=l("code"),tl=o("inline"),al=o(" - whether to display the interface inline on Python notebooks."),ol=u(),Se=l("li"),St=l("code"),sl=o("inbrowser"),ll=o(" - whether to automatically launch the interface in a new tab on the default browser."),rl=u(),Ne=l("li"),Nt=l("code"),nl=o("share"),il=o(" - whether to create a publicly shareable link from your computer for the interface. Kind of like a Google Drive link!"),Aa=u(),ne=l("p"),pl=o("We\u2019ll cover the "),Gt=l("code"),cl=o("share"),ul=o(" parameter in a lot more detail in the next section!"),Ca=u(),U=l("h2"),ie=l("a"),Lt=l("span"),I(Ee.$$.fragment),hl=u(),Ft=l("span"),dl=o("\u270F\uFE0F Let's apply it!"),Da=u(),q=l("p"),fl=o("Let\u2019s build an interface that allows you to demo a "),Ht=l("strong"),ml=o("speech-recognition"),wl=o(` model.
To make it interesting, we will accept `),zt=l("em"),vl=o("either"),yl=o(" a mic input or an uploaded file."),Ia=u(),f=l("p"),bl=o("As usual, we\u2019ll load our speech recognition model using the "),Yt=l("code"),_l=o("pipeline()"),El=o(` function from \u{1F917} Transformers.
If you need a quick refresher, you can go back to `),Ge=l("a"),kl=o("that section in Chapter 1"),gl=o(".   Next, we\u2019ll implement a "),Ut=l("code"),jl=o("transcribe_audio()"),$l=o(" function that processes the audio and returns the transcription. Finally, we\u2019ll wrap this function in an "),Wt=l("code"),xl=o("Interface"),ql=o(" with the "),Mt=l("code"),Al=o("Audio"),Cl=o(" components for the inputs and just text for the output. Altogether, the code for this application is the following:"),Pa=u(),I(ke.$$.fragment),Oa=u(),pe=l("p"),Dl=o("If your browser doesn\u2019t ask you for microphone permissions, "),ge=l("a"),Il=o("open the demo in a separate tab"),Pl=o("."),Ta=u(),b=l("iframe"),Sa=u(),A=l("p"),Ol=o(`That\u2019s it! You can now use this interface to transcribe audio. Notice here that
by passing in the `),Bt=l("code"),Tl=o("optional"),Sl=o(" parameter as "),Jt=l("code"),Nl=o("True"),Gl=o(`, we allow the user to either
provide a microphone or an audio file (or neither, but that will return an error message).`),Na=u(),Le=l("p"),Ll=o("Keep going to see how to share your interface with others!"),this.h()},l(e){const i=En('[data-svelte="svelte-1phssyn"]',document.head);G=r(i,"META",{name:!0,content:!0}),i.forEach(a),Rt=h(e),L=r(e,"H1",{class:!0});var La=n(L);M=r(La,"A",{id:!0,class:!0,href:!0});var Kl=n(M);Me=r(Kl,"SPAN",{});var Zl=n(Me);P(ce.$$.fragment,Zl),Zl.forEach(a),Kl.forEach(a),so=h(La),Be=r(La,"SPAN",{});var Ql=n(Be);lo=s(Ql,"Understanding the Interface class"),Ql.forEach(a),La.forEach(a),Kt=h(e),P(ue.$$.fragment,e),Zt=h(e),B=r(e,"P",{});var Fa=n(B);ro=s(Fa,"In this section, we will take a closer look at the "),Je=r(Fa,"CODE",{});var Vl=n(Je);no=s(Vl,"Interface"),Vl.forEach(a),io=s(Fa,` class, and understand the
main parameters used to create one.`),Fa.forEach(a),Qt=h(e),F=r(e,"H2",{class:!0});var Ha=n(F);J=r(Ha,"A",{id:!0,class:!0,href:!0});var Xl=n(J);Re=r(Xl,"SPAN",{});var er=n(Re);P(he.$$.fragment,er),er.forEach(a),Xl.forEach(a),po=h(Ha),Ke=r(Ha,"SPAN",{});var tr=n(Ke);co=s(tr,"How to create an Interface"),tr.forEach(a),Ha.forEach(a),Vt=h(e),R=r(e,"P",{});var za=n(R);uo=s(za,"You\u2019ll notice that the "),Ze=r(za,"CODE",{});var ar=n(Ze);ho=s(ar,"Interface"),ar.forEach(a),fo=s(za," class has 3 required parameters:"),za.forEach(a),Xt=h(e),$e=r(e,"P",{});var or=n($e);Qe=r(or,"CODE",{});var sr=n(Qe);mo=s(sr,"Interface(fn, inputs, outputs, ...)"),sr.forEach(a),or.forEach(a),ea=h(e),xe=r(e,"P",{});var lr=n(xe);wo=s(lr,"These parameters are:"),lr.forEach(a),ta=h(e),g=r(e,"UL",{});var Fe=n(g);qe=r(Fe,"LI",{});var Fl=n(qe);Ve=r(Fl,"CODE",{});var rr=n(Ve);vo=s(rr,"fn"),rr.forEach(a),yo=s(Fl,": the prediction function that is wrapped by the Gradio interface. This function can take one or more parameters and return one or more values"),Fl.forEach(a),bo=h(Fe),j=r(Fe,"LI",{});var je=n(j);Xe=r(je,"CODE",{});var nr=n(Xe);_o=s(nr,"inputs"),nr.forEach(a),Eo=s(je,": the input component type(s). Gradio provides many pre-built components such as"),et=r(je,"CODE",{});var ir=n(et);ko=s(ir,'"image"'),ir.forEach(a),go=s(je," or "),tt=r(je,"CODE",{});var pr=n(tt);jo=s(pr,'"mic"'),pr.forEach(a),$o=s(je,"."),je.forEach(a),xo=h(Fe),_=r(Fe,"LI",{});var W=n(_);at=r(W,"CODE",{});var cr=n(at);qo=s(cr,"outputs"),cr.forEach(a),Ao=s(W,": the output component type(s). Again, "),ot=r(W,"CODE",{});var ur=n(ot);Co=s(ur,"gradio"),ur.forEach(a),Do=s(W," provides many pre-built components e.g. "),st=r(W,"CODE",{});var hr=n(st);Io=s(hr,'"image"'),hr.forEach(a),Po=s(W," or "),lt=r(W,"CODE",{});var dr=n(lt);Oo=s(dr,'"label"'),dr.forEach(a),To=s(W,"."),W.forEach(a),Fe.forEach(a),aa=h(e),K=r(e,"P",{});var Ya=n(K);So=s(Ya,"For a complete list of components, "),de=r(Ya,"A",{href:!0,rel:!0});var fr=n(de);No=s(fr,"see the Gradio docs "),fr.forEach(a),Go=s(Ya,". Each pre-built component can be customized by instantiating the class corresponding to the component."),Ya.forEach(a),oa=h(e),m=r(e,"P",{});var C=n(m);Lo=s(C,"For example, as we saw in the "),Ae=r(C,"A",{href:!0});var mr=n(Ae);Fo=s(mr,"previous section"),mr.forEach(a),Ho=s(C,`,
instead of passing in `),rt=r(C,"CODE",{});var wr=n(rt);zo=s(wr,'"textbox"'),wr.forEach(a),Yo=s(C," to the "),nt=r(C,"CODE",{});var vr=n(nt);Uo=s(vr,"inputs"),vr.forEach(a),Wo=s(C," parameter, you can pass in a "),it=r(C,"CODE",{});var yr=n(it);Mo=s(yr,'Textbox(lines=7, label="Prompt")'),yr.forEach(a),Bo=s(C," component to create a textbox with 7 lines and a label."),C.forEach(a),sa=h(e),Z=r(e,"P",{});var Ua=n(Z);Jo=s(Ua,"Let\u2019s take a look at another example, this time with an "),pt=r(Ua,"CODE",{});var br=n(pt);Ro=s(br,"Audio"),br.forEach(a),Ko=s(Ua," component."),Ua.forEach(a),la=h(e),H=r(e,"H2",{class:!0});var Wa=n(H);Q=r(Wa,"A",{id:!0,class:!0,href:!0});var _r=n(Q);ct=r(_r,"SPAN",{});var Er=n(ct);P(fe.$$.fragment,Er),Er.forEach(a),_r.forEach(a),Zo=h(Wa),ut=r(Wa,"SPAN",{});var kr=n(ut);Qo=s(kr,"A simple example with audio"),kr.forEach(a),Wa.forEach(a),ra=h(e),V=r(e,"P",{});var Ma=n(V);Vo=s(Ma,`As mentioned earlier, Gradio provides many different inputs and outputs.
So let\u2019s build an `),ht=r(Ma,"CODE",{});var gr=n(ht);Xo=s(gr,"Interface"),gr.forEach(a),es=s(Ma," that works with audio."),Ma.forEach(a),na=h(e),Ce=r(e,"P",{});var jr=n(Ce);ts=s(jr,`In this example, we\u2019ll build an audio-to-audio function that takes an
audio file and simply reverses it.`),jr.forEach(a),ia=h(e),d=r(e,"P",{});var E=n(d);as=s(E,"We will use for the input the "),dt=r(E,"CODE",{});var $r=n(dt);os=s($r,"Audio"),$r.forEach(a),ss=s(E," component. When using the "),ft=r(E,"CODE",{});var xr=n(ft);ls=s(xr,"Audio"),xr.forEach(a),rs=s(E,` component,
you can specify whether you want the `),mt=r(E,"CODE",{});var qr=n(mt);ns=s(qr,"source"),qr.forEach(a),is=s(E,` of the audio to be a file that the user
uploads or a microphone that the user records their voice with. In this case, let\u2019s
set it to a `),wt=r(E,"CODE",{});var Ar=n(wt);ps=s(Ar,'"microphone"'),Ar.forEach(a),cs=s(E,". Just for fun, we\u2019ll add a label to our "),vt=r(E,"CODE",{});var Cr=n(vt);us=s(Cr,"Audio"),Cr.forEach(a),hs=s(E,` that says
\u201CSpeak here\u2026\u201C.`),E.forEach(a),pa=h(e),w=r(e,"P",{});var D=n(w);ds=s(D,`In addition, we\u2019d like to receive the audio as a numpy array so that we can easily
\u201Creverse\u201D it. So we\u2019ll set the `),yt=r(D,"CODE",{});var Dr=n(yt);fs=s(Dr,'"type"'),Dr.forEach(a),ms=s(D," to be "),bt=r(D,"CODE",{});var Ir=n(bt);ws=s(Ir,'"numpy"'),Ir.forEach(a),vs=s(D,`, which passes the input
data as a tuple of (`),_t=r(D,"CODE",{});var Pr=n(_t);ys=s(Pr,"sample_rate"),Pr.forEach(a),bs=s(D,", "),Et=r(D,"CODE",{});var Or=n(Et);_s=s(Or,"data"),Or.forEach(a),Es=s(D,") into our function."),D.forEach(a),ca=h(e),$=r(e,"P",{});var He=n($);ks=s(He,"We will also use the "),kt=r(He,"CODE",{});var Tr=n(kt);gs=s(Tr,"Audio"),Tr.forEach(a),js=s(He,` output component which can automatically
render a tuple with a sample rate and numpy array of data as a playable audio file.
In this case, we do not need to do any customization, so we will use the string
shortcut `),gt=r(He,"CODE",{});var Sr=n(gt);$s=s(Sr,'"audio"'),Sr.forEach(a),xs=s(He,"."),He.forEach(a),ua=h(e),P(me.$$.fragment,e),ha=h(e),X=r(e,"P",{});var Ba=n(X);qs=s(Ba,`The code above will produce an interface like the one below (if your browser doesn\u2019t
ask you for microphone permissions, `),we=r(Ba,"A",{href:!0,target:!0});var Nr=n(we);As=s(Nr,"open the demo in  a separate tab"),Nr.forEach(a),Cs=s(Ba,".)"),Ba.forEach(a),da=h(e),v=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),n(v).forEach(a),fa=h(e),De=r(e,"P",{});var Gr=n(De);Ds=s(Gr,"You should now be able to record your voice and hear yourself speaking in reverse - spooky \u{1F47B}!"),Gr.forEach(a),ma=h(e),z=r(e,"H2",{class:!0});var Ja=n(z);ee=r(Ja,"A",{id:!0,class:!0,href:!0});var Lr=n(ee);jt=r(Lr,"SPAN",{});var Fr=n(jt);P(ve.$$.fragment,Fr),Fr.forEach(a),Lr.forEach(a),Is=h(Ja),$t=r(Ja,"SPAN",{});var Hr=n($t);Ps=s(Hr,"Handling multiple inputs and outputs"),Hr.forEach(a),Ja.forEach(a),wa=h(e),Ie=r(e,"P",{});var zr=n(Ie);Os=s(zr,`Let\u2019s say we had a more complicated function, with multiple inputs and outputs.
In the example below, we have a function that takes a dropdown index, a slider value, and number,
and returns an audio sample of a musical tone.`),zr.forEach(a),va=h(e),Pe=r(e,"P",{});var Yr=n(Pe);Ts=s(Yr,`Take a look how we pass a list of input and output components,
and see if you can follow along what\u2019s happening.`),Yr.forEach(a),ya=h(e),Oe=r(e,"P",{});var Ur=n(Oe);Ss=s(Ur,"The key here is that when you pass:"),Ur.forEach(a),ba=h(e),te=r(e,"UL",{});var Ra=n(te);xt=r(Ra,"LI",{});var Wr=n(xt);Ns=s(Wr,"a list of input components, each component corresponds to a parameter in order."),Wr.forEach(a),Gs=h(Ra),qt=r(Ra,"LI",{});var Mr=n(qt);Ls=s(Mr,"a list of output coponents, each component corresponds to a returned value."),Mr.forEach(a),Ra.forEach(a),_a=h(e),ae=r(e,"P",{});var Ka=n(ae);Fs=s(Ka,"The code snippet below shows how three input components line up with the three arguments of the "),At=r(Ka,"CODE",{});var Br=n(At);Hs=s(Br,"generate_tone()"),Br.forEach(a),zs=s(Ka," function:"),Ka.forEach(a),Ea=h(e),P(ye.$$.fragment,e),ka=h(e),y=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),n(y).forEach(a),ga=h(e),Y=r(e,"H3",{class:!0});var Za=n(Y);oe=r(Za,"A",{id:!0,class:!0,href:!0});var Jr=n(oe);Ct=r(Jr,"SPAN",{});var Rr=n(Ct);P(be.$$.fragment,Rr),Rr.forEach(a),Jr.forEach(a),Ys=h(Za),_e=r(Za,"SPAN",{});var Qa=n(_e);Us=s(Qa,"The "),Dt=r(Qa,"CODE",{});var Kr=n(Dt);Ws=s(Kr,"launch()"),Kr.forEach(a),Ms=s(Qa," method"),Qa.forEach(a),Za.forEach(a),ja=h(e),se=r(e,"P",{});var Va=n(se);Bs=s(Va,"So far, we have used the "),It=r(Va,"CODE",{});var Zr=n(It);Js=s(Zr,"launch()"),Zr.forEach(a),Rs=s(Va,` method to launch the interface, but we
haven\u2019t really discussed what it does.`),Va.forEach(a),$a=h(e),le=r(e,"P",{});var Xa=n(le);Ks=s(Xa,"By default, the "),Pt=r(Xa,"CODE",{});var Qr=n(Pt);Zs=s(Qr,"launch()"),Qr.forEach(a),Qs=s(Xa,` method will launch the demo in a web server that
is running locally. If you are running your code in a Jupyter or Colab notebook, then
Gradio will embed the demo GUI in the notebook so you can easily use it.`),Xa.forEach(a),xa=h(e),re=r(e,"P",{});var eo=n(re);Vs=s(eo,"You can customize the behavior of "),Ot=r(eo,"CODE",{});var Vr=n(Ot);Xs=s(Vr,"launch()"),Vr.forEach(a),el=s(eo," through different parameters:"),eo.forEach(a),qa=h(e),x=r(e,"UL",{});var ze=n(x);Te=r(ze,"LI",{});var Hl=n(Te);Tt=r(Hl,"CODE",{});var Xr=n(Tt);tl=s(Xr,"inline"),Xr.forEach(a),al=s(Hl," - whether to display the interface inline on Python notebooks."),Hl.forEach(a),ol=h(ze),Se=r(ze,"LI",{});var zl=n(Se);St=r(zl,"CODE",{});var en=n(St);sl=s(en,"inbrowser"),en.forEach(a),ll=s(zl," - whether to automatically launch the interface in a new tab on the default browser."),zl.forEach(a),rl=h(ze),Ne=r(ze,"LI",{});var Yl=n(Ne);Nt=r(Yl,"CODE",{});var tn=n(Nt);nl=s(tn,"share"),tn.forEach(a),il=s(Yl," - whether to create a publicly shareable link from your computer for the interface. Kind of like a Google Drive link!"),Yl.forEach(a),ze.forEach(a),Aa=h(e),ne=r(e,"P",{});var to=n(ne);pl=s(to,"We\u2019ll cover the "),Gt=r(to,"CODE",{});var an=n(Gt);cl=s(an,"share"),an.forEach(a),ul=s(to," parameter in a lot more detail in the next section!"),to.forEach(a),Ca=h(e),U=r(e,"H2",{class:!0});var ao=n(U);ie=r(ao,"A",{id:!0,class:!0,href:!0});var on=n(ie);Lt=r(on,"SPAN",{});var sn=n(Lt);P(Ee.$$.fragment,sn),sn.forEach(a),on.forEach(a),hl=h(ao),Ft=r(ao,"SPAN",{});var ln=n(Ft);dl=s(ln,"\u270F\uFE0F Let's apply it!"),ln.forEach(a),ao.forEach(a),Da=h(e),q=r(e,"P",{});var Ye=n(q);fl=s(Ye,"Let\u2019s build an interface that allows you to demo a "),Ht=r(Ye,"STRONG",{});var rn=n(Ht);ml=s(rn,"speech-recognition"),rn.forEach(a),wl=s(Ye,` model.
To make it interesting, we will accept `),zt=r(Ye,"EM",{});var nn=n(zt);vl=s(nn,"either"),nn.forEach(a),yl=s(Ye," a mic input or an uploaded file."),Ye.forEach(a),Ia=h(e),f=r(e,"P",{});var k=n(f);bl=s(k,"As usual, we\u2019ll load our speech recognition model using the "),Yt=r(k,"CODE",{});var pn=n(Yt);_l=s(pn,"pipeline()"),pn.forEach(a),El=s(k,` function from \u{1F917} Transformers.
If you need a quick refresher, you can go back to `),Ge=r(k,"A",{href:!0});var cn=n(Ge);kl=s(cn,"that section in Chapter 1"),cn.forEach(a),gl=s(k,".   Next, we\u2019ll implement a "),Ut=r(k,"CODE",{});var un=n(Ut);jl=s(un,"transcribe_audio()"),un.forEach(a),$l=s(k," function that processes the audio and returns the transcription. Finally, we\u2019ll wrap this function in an "),Wt=r(k,"CODE",{});var hn=n(Wt);xl=s(hn,"Interface"),hn.forEach(a),ql=s(k," with the "),Mt=r(k,"CODE",{});var dn=n(Mt);Al=s(dn,"Audio"),dn.forEach(a),Cl=s(k," components for the inputs and just text for the output. Altogether, the code for this application is the following:"),k.forEach(a),Pa=h(e),P(ke.$$.fragment,e),Oa=h(e),pe=r(e,"P",{});var oo=n(pe);Dl=s(oo,"If your browser doesn\u2019t ask you for microphone permissions, "),ge=r(oo,"A",{href:!0,target:!0});var fn=n(ge);Il=s(fn,"open the demo in a separate tab"),fn.forEach(a),Pl=s(oo,"."),oo.forEach(a),Ta=h(e),b=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),n(b).forEach(a),Sa=h(e),A=r(e,"P",{});var Ue=n(A);Ol=s(Ue,`That\u2019s it! You can now use this interface to transcribe audio. Notice here that
by passing in the `),Bt=r(Ue,"CODE",{});var mn=n(Bt);Tl=s(mn,"optional"),mn.forEach(a),Sl=s(Ue," parameter as "),Jt=r(Ue,"CODE",{});var wn=n(Jt);Nl=s(wn,"True"),wn.forEach(a),Gl=s(Ue,`, we allow the user to either
provide a microphone or an audio file (or neither, but that will return an error message).`),Ue.forEach(a),Na=h(e),Le=r(e,"P",{});var vn=n(Le);Ll=s(vn,"Keep going to see how to share your interface with others!"),vn.forEach(a),this.h()},h(){c(G,"name","hf:doc:metadata"),c(G,"content",JSON.stringify(xn)),c(M,"id","understanding-the-interface-class"),c(M,"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"),c(M,"href","#understanding-the-interface-class"),c(L,"class","relative group"),c(J,"id","how-to-create-an-interface"),c(J,"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"),c(J,"href","#how-to-create-an-interface"),c(F,"class","relative group"),c(de,"href","https://gradio.app/docs"),c(de,"rel","nofollow"),c(Ae,"href","/course/chapter9/2"),c(Q,"id","a-simple-example-with-audio"),c(Q,"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"),c(Q,"href","#a-simple-example-with-audio"),c(H,"class","relative group"),c(we,"href","https://huggingface.co/spaces/course-demos/audio-reverse"),c(we,"target","_blank"),Ul(v.src,Bl="https://hf.space/gradioiframe/course-demos/audio-reverse/+")||c(v,"src",Bl),c(v,"frameborder","0"),c(v,"height","250"),c(v,"title","Gradio app"),c(v,"class","container p-0 flex-grow space-iframe"),c(v,"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"),c(v,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),c(ee,"id","handling-multiple-inputs-and-outputs"),c(ee,"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"),c(ee,"href","#handling-multiple-inputs-and-outputs"),c(z,"class","relative group"),Ul(y.src,Jl="https://hf.space/gradioiframe/course-demos/generate-tone/+")||c(y,"src",Jl),c(y,"frameborder","0"),c(y,"height","450"),c(y,"title","Gradio app"),c(y,"class","container p-0 flex-grow space-iframe"),c(y,"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"),c(y,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),c(oe,"id","the-launch-method"),c(oe,"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"),c(oe,"href","#the-launch-method"),c(Y,"class","relative group"),c(ie,"id","lets-apply-it"),c(ie,"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"),c(ie,"href","#lets-apply-it"),c(U,"class","relative group"),c(Ge,"href","/course/chapter1/3"),c(ge,"href","https://huggingface.co/spaces/course-demos/audio-reverse"),c(ge,"target","_blank"),Ul(b.src,Rl="https://hf.space/gradioiframe/course-demos/asr/+")||c(b,"src",Rl),c(b,"frameborder","0"),c(b,"height","550"),c(b,"title","Gradio app"),c(b,"class","container p-0 flex-grow space-iframe"),c(b,"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"),c(b,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,i){t(document.head,G),p(e,Rt,i),p(e,L,i),t(L,M),t(M,Me),O(ce,Me,null),t(L,so),t(L,Be),t(Be,lo),p(e,Kt,i),O(ue,e,i),p(e,Zt,i),p(e,B,i),t(B,ro),t(B,Je),t(Je,no),t(B,io),p(e,Qt,i),p(e,F,i),t(F,J),t(J,Re),O(he,Re,null),t(F,po),t(F,Ke),t(Ke,co),p(e,Vt,i),p(e,R,i),t(R,uo),t(R,Ze),t(Ze,ho),t(R,fo),p(e,Xt,i),p(e,$e,i),t($e,Qe),t(Qe,mo),p(e,ea,i),p(e,xe,i),t(xe,wo),p(e,ta,i),p(e,g,i),t(g,qe),t(qe,Ve),t(Ve,vo),t(qe,yo),t(g,bo),t(g,j),t(j,Xe),t(Xe,_o),t(j,Eo),t(j,et),t(et,ko),t(j,go),t(j,tt),t(tt,jo),t(j,$o),t(g,xo),t(g,_),t(_,at),t(at,qo),t(_,Ao),t(_,ot),t(ot,Co),t(_,Do),t(_,st),t(st,Io),t(_,Po),t(_,lt),t(lt,Oo),t(_,To),p(e,aa,i),p(e,K,i),t(K,So),t(K,de),t(de,No),t(K,Go),p(e,oa,i),p(e,m,i),t(m,Lo),t(m,Ae),t(Ae,Fo),t(m,Ho),t(m,rt),t(rt,zo),t(m,Yo),t(m,nt),t(nt,Uo),t(m,Wo),t(m,it),t(it,Mo),t(m,Bo),p(e,sa,i),p(e,Z,i),t(Z,Jo),t(Z,pt),t(pt,Ro),t(Z,Ko),p(e,la,i),p(e,H,i),t(H,Q),t(Q,ct),O(fe,ct,null),t(H,Zo),t(H,ut),t(ut,Qo),p(e,ra,i),p(e,V,i),t(V,Vo),t(V,ht),t(ht,Xo),t(V,es),p(e,na,i),p(e,Ce,i),t(Ce,ts),p(e,ia,i),p(e,d,i),t(d,as),t(d,dt),t(dt,os),t(d,ss),t(d,ft),t(ft,ls),t(d,rs),t(d,mt),t(mt,ns),t(d,is),t(d,wt),t(wt,ps),t(d,cs),t(d,vt),t(vt,us),t(d,hs),p(e,pa,i),p(e,w,i),t(w,ds),t(w,yt),t(yt,fs),t(w,ms),t(w,bt),t(bt,ws),t(w,vs),t(w,_t),t(_t,ys),t(w,bs),t(w,Et),t(Et,_s),t(w,Es),p(e,ca,i),p(e,$,i),t($,ks),t($,kt),t(kt,gs),t($,js),t($,gt),t(gt,$s),t($,xs),p(e,ua,i),O(me,e,i),p(e,ha,i),p(e,X,i),t(X,qs),t(X,we),t(we,As),t(X,Cs),p(e,da,i),p(e,v,i),p(e,fa,i),p(e,De,i),t(De,Ds),p(e,ma,i),p(e,z,i),t(z,ee),t(ee,jt),O(ve,jt,null),t(z,Is),t(z,$t),t($t,Ps),p(e,wa,i),p(e,Ie,i),t(Ie,Os),p(e,va,i),p(e,Pe,i),t(Pe,Ts),p(e,ya,i),p(e,Oe,i),t(Oe,Ss),p(e,ba,i),p(e,te,i),t(te,xt),t(xt,Ns),t(te,Gs),t(te,qt),t(qt,Ls),p(e,_a,i),p(e,ae,i),t(ae,Fs),t(ae,At),t(At,Hs),t(ae,zs),p(e,Ea,i),O(ye,e,i),p(e,ka,i),p(e,y,i),p(e,ga,i),p(e,Y,i),t(Y,oe),t(oe,Ct),O(be,Ct,null),t(Y,Ys),t(Y,_e),t(_e,Us),t(_e,Dt),t(Dt,Ws),t(_e,Ms),p(e,ja,i),p(e,se,i),t(se,Bs),t(se,It),t(It,Js),t(se,Rs),p(e,$a,i),p(e,le,i),t(le,Ks),t(le,Pt),t(Pt,Zs),t(le,Qs),p(e,xa,i),p(e,re,i),t(re,Vs),t(re,Ot),t(Ot,Xs),t(re,el),p(e,qa,i),p(e,x,i),t(x,Te),t(Te,Tt),t(Tt,tl),t(Te,al),t(x,ol),t(x,Se),t(Se,St),t(St,sl),t(Se,ll),t(x,rl),t(x,Ne),t(Ne,Nt),t(Nt,nl),t(Ne,il),p(e,Aa,i),p(e,ne,i),t(ne,pl),t(ne,Gt),t(Gt,cl),t(ne,ul),p(e,Ca,i),p(e,U,i),t(U,ie),t(ie,Lt),O(Ee,Lt,null),t(U,hl),t(U,Ft),t(Ft,dl),p(e,Da,i),p(e,q,i),t(q,fl),t(q,Ht),t(Ht,ml),t(q,wl),t(q,zt),t(zt,vl),t(q,yl),p(e,Ia,i),p(e,f,i),t(f,bl),t(f,Yt),t(Yt,_l),t(f,El),t(f,Ge),t(Ge,kl),t(f,gl),t(f,Ut),t(Ut,jl),t(f,$l),t(f,Wt),t(Wt,xl),t(f,ql),t(f,Mt),t(Mt,Al),t(f,Cl),p(e,Pa,i),O(ke,e,i),p(e,Oa,i),p(e,pe,i),t(pe,Dl),t(pe,ge),t(ge,Il),t(pe,Pl),p(e,Ta,i),p(e,b,i),p(e,Sa,i),p(e,A,i),t(A,Ol),t(A,Bt),t(Bt,Tl),t(A,Sl),t(A,Jt),t(Jt,Nl),t(A,Gl),p(e,Na,i),p(e,Le,i),t(Le,Ll),Ga=!0},p:kn,i(e){Ga||(T(ce.$$.fragment,e),T(ue.$$.fragment,e),T(he.$$.fragment,e),T(fe.$$.fragment,e),T(me.$$.fragment,e),T(ve.$$.fragment,e),T(ye.$$.fragment,e),T(be.$$.fragment,e),T(Ee.$$.fragment,e),T(ke.$$.fragment,e),Ga=!0)},o(e){S(ce.$$.fragment,e),S(ue.$$.fragment,e),S(he.$$.fragment,e),S(fe.$$.fragment,e),S(me.$$.fragment,e),S(ve.$$.fragment,e),S(ye.$$.fragment,e),S(be.$$.fragment,e),S(Ee.$$.fragment,e),S(ke.$$.fragment,e),Ga=!1},d(e){a(G),e&&a(Rt),e&&a(L),N(ce),e&&a(Kt),N(ue,e),e&&a(Zt),e&&a(B),e&&a(Qt),e&&a(F),N(he),e&&a(Vt),e&&a(R),e&&a(Xt),e&&a($e),e&&a(ea),e&&a(xe),e&&a(ta),e&&a(g),e&&a(aa),e&&a(K),e&&a(oa),e&&a(m),e&&a(sa),e&&a(Z),e&&a(la),e&&a(H),N(fe),e&&a(ra),e&&a(V),e&&a(na),e&&a(Ce),e&&a(ia),e&&a(d),e&&a(pa),e&&a(w),e&&a(ca),e&&a($),e&&a(ua),N(me,e),e&&a(ha),e&&a(X),e&&a(da),e&&a(v),e&&a(fa),e&&a(De),e&&a(ma),e&&a(z),N(ve),e&&a(wa),e&&a(Ie),e&&a(va),e&&a(Pe),e&&a(ya),e&&a(Oe),e&&a(ba),e&&a(te),e&&a(_a),e&&a(ae),e&&a(Ea),N(ye,e),e&&a(ka),e&&a(y),e&&a(ga),e&&a(Y),N(be),e&&a(ja),e&&a(se),e&&a($a),e&&a(le),e&&a(xa),e&&a(re),e&&a(qa),e&&a(x),e&&a(Aa),e&&a(ne),e&&a(Ca),e&&a(U),N(Ee),e&&a(Da),e&&a(q),e&&a(Ia),e&&a(f),e&&a(Pa),N(ke,e),e&&a(Oa),e&&a(pe),e&&a(Ta),e&&a(b),e&&a(Sa),e&&a(A),e&&a(Na),e&&a(Le)}}}const xn={local:"understanding-the-interface-class",sections:[{local:"how-to-create-an-interface",title:"How to create an Interface"},{local:"a-simple-example-with-audio",title:"A simple example with audio"},{local:"handling-multiple-inputs-and-outputs",sections:[{local:"the-launch-method",title:"The `launch()` method"}],title:"Handling multiple inputs and outputs"},{local:"lets-apply-it",title:"\u270F\uFE0F Let's apply it!"}],title:"Understanding the Interface class"};function qn(Ml){return gn(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Pn extends yn{constructor(G){super();bn(this,G,qn,$n,_n,{})}}export{Pn as default,xn as metadata};
