import{S as uo,i as co,s as fo,e as r,k as u,w as E,t as s,M as mo,c as i,d as t,m as c,a as p,x as j,h as l,b as f,N as xa,G as a,g as n,y as I,L as ho,q as P,o as G,B as q,v as wo}from"../../chunks/vendor-hf-doc-builder.js";import{I as po}from"../../chunks/IconCopyLink-hf-doc-builder.js";import{C as ce}from"../../chunks/CodeBlock-hf-doc-builder.js";import{C as yo}from"../../chunks/CourseFloatingBanner-hf-doc-builder.js";function go(ka){let x,Ce,k,T,fe,A,wt,me,yt,Le,M,He,U,gt,Oe,K,he,bt,De,Q,vt,Se,V,xt,Ae,N,Me,X,kt,Ne,b,g,_t,de,$t,Et,we,jt,It,ye,Pt,Gt,qt,m,Tt,ge,Ct,Lt,be,Ht,Ot,ve,Dt,St,xe,At,Mt,ke,Nt,Ft,Wt,_,Yt,_e,Jt,zt,$e,Bt,Rt,Fe,C,Ut,Ee,F,Kt,Qt,We,h,_a,Ye,Z,Vt,Je,L,Xt,je,Zt,ea,ze,ee,ta,Be,W,Re,d,$a,Ue,te,aa,Ke,ae,oa,Qe,$,H,Ie,Y,sa,Pe,la,Ve,O,na,Ge,ra,ia,Xe,v,pa,qe,ua,ca,oe,fa,ma,Ze,se,ha,et,J,tt,le,da,at,z,ot,B,st,D,wa,Te,ya,ga,lt,R,nt,ne,ba,rt,w,Ea,it,re,va,pt;return A=new po({}),M=new yo({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/en/chapter9/section2.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/en/chapter9/section2.ipynb"}]}}),N=new ce({props:{code:`import gradio as gr


def greet(name):
    return "Hello " + name


demo = gr.Interface(fn=greet, inputs="text", outputs="text")

demo.launch()`,highlighted:`<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_">greet</span>(<span class="hljs-params">name</span>):
    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Hello &quot;</span> + name


demo = gr.Interface(fn=greet, inputs=<span class="hljs-string">&quot;text&quot;</span>, outputs=<span class="hljs-string">&quot;text&quot;</span>)

demo.launch()`}}),W=new ce({props:{code:`import gradio as gr


def greet(name):
    return "Hello " + name


# We instantiate the Textbox class
textbox = gr.Textbox(label="Type your name here:", placeholder="John Doe", lines=2)

gr.Interface(fn=greet, inputs=textbox, outputs="text").launch()`,highlighted:`<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_">greet</span>(<span class="hljs-params">name</span>):
    <span class="hljs-keyword">return</span> <span class="hljs-string">&quot;Hello &quot;</span> + name


<span class="hljs-comment"># We instantiate the Textbox class</span>
textbox = gr.Textbox(label=<span class="hljs-string">&quot;Type your name here:&quot;</span>, placeholder=<span class="hljs-string">&quot;John Doe&quot;</span>, lines=<span class="hljs-number">2</span>)

gr.Interface(fn=greet, inputs=textbox, outputs=<span class="hljs-string">&quot;text&quot;</span>).launch()`}}),Y=new po({}),J=new ce({props:{code:`from transformers import pipeline

model = pipeline("text-generation")


def predict(prompt):
    completion = model(prompt)[0]["generated_text"]
    return completion`,highlighted:`<span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> pipeline

model = pipeline(<span class="hljs-string">&quot;text-generation&quot;</span>)


<span class="hljs-keyword">def</span> <span class="hljs-title function_">predict</span>(<span class="hljs-params">prompt</span>):
    completion = model(prompt)[<span class="hljs-number">0</span>][<span class="hljs-string">&quot;generated_text&quot;</span>]
    <span class="hljs-keyword">return</span> completion`}}),z=new ce({props:{code:'predict("My favorite programming language is")',highlighted:'<span class="hljs-function"><span class="hljs-title">predict</span><span class="hljs-params">(<span class="hljs-string">&quot;My favorite programming language is&quot;</span>)</span></span>'}}),B=new ce({props:{code:">> My favorite programming language is Haskell. I really enjoyed the Haskell language, but it doesn't have all the features that can be applied to any other language. For example, all it does is compile to a byte array.",highlighted:'&gt;&gt; My favorite programming language <span class="hljs-keyword">is</span> Haskell. I really enjoyed <span class="hljs-keyword">the</span> Haskell language, <span class="hljs-keyword">but</span> <span class="hljs-keyword">it</span> doesn&#x27;t have all <span class="hljs-keyword">the</span> features <span class="hljs-keyword">that</span> can be applied <span class="hljs-keyword">to</span> any other language. For example, all <span class="hljs-keyword">it</span> <span class="hljs-keyword">does</span> <span class="hljs-keyword">is</span> compile <span class="hljs-keyword">to</span> a byte array.'}}),R=new ce({props:{code:`import gradio as gr

gr.Interface(fn=predict, inputs="text", outputs="text").launch()`,highlighted:`<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

gr.Interface(fn=predict, inputs=<span class="hljs-string">&quot;text&quot;</span>, outputs=<span class="hljs-string">&quot;text&quot;</span>).launch()`}}),{c(){x=r("meta"),Ce=u(),k=r("h1"),T=r("a"),fe=r("span"),E(A.$$.fragment),wt=u(),me=r("span"),yt=s("Building your first demo"),Le=u(),E(M.$$.fragment),He=u(),U=r("p"),gt=s("Let\u2019s start by installing Gradio! Since it is a Python package, simply run:"),Oe=u(),K=r("p"),he=r("code"),bt=s("$ pip install gradio"),De=u(),Q=r("p"),vt=s(`You can run Gradio anywhere, be it from your favourite Python IDE, to Jupyter notebooks or even in Google Colab \u{1F92F}!
So install Gradio wherever you run Python!`),Se=u(),V=r("p"),xt=s("Let\u2019s get started with a simple \u201CHello World\u201D example to get familiar with the Gradio syntax:"),Ae=u(),E(N.$$.fragment),Me=u(),X=r("p"),kt=s("Let\u2019s walk through the code above:"),Ne=u(),b=r("ul"),g=r("li"),_t=s("First, we define a function called "),de=r("code"),$t=s("greet()"),Et=s(". In this case, it is a simple function that adds \u201CHello\u201D before your name, but it can be "),we=r("em"),jt=s("any"),It=s(" Python function in general. For example, in machine learning applications, this function would "),ye=r("em"),Pt=s("call a model to make a prediction"),Gt=s(" on an input and return the output."),qt=u(),m=r("li"),Tt=s("Then, we create a Gradio "),ge=r("code"),Ct=s("Interface"),Lt=s(" with three arguments, "),be=r("code"),Ht=s("fn"),Ot=s(", "),ve=r("code"),Dt=s("inputs"),St=s(", and "),xe=r("code"),At=s("outputs"),Mt=s(". These arguments define the prediction function, as well as the "),ke=r("em"),Nt=s("type"),Ft=s(" of input and output components we would like. In our case, both components are simple text boxes."),Wt=u(),_=r("li"),Yt=s("We then call the "),_e=r("code"),Jt=s("launch()"),zt=s(" method on the "),$e=r("code"),Bt=s("Interface"),Rt=s(" that we created."),Fe=u(),C=r("p"),Ut=s("If you run this code, the interface below will appear automatically within a Jupyter/Colab notebook, or pop in a browser on "),Ee=r("strong"),F=r("a"),Kt=s("http://localhost:7860"),Qt=s(" if running from a script."),We=u(),h=r("iframe"),Ye=u(),Z=r("p"),Vt=s("Try using this GUI right now with your own name or some other input!"),Je=u(),L=r("p"),Xt=s("You\u2019ll notice that in this GUI, Gradio automatically inferred the name of the input parameter ("),je=r("code"),Zt=s("name"),ea=s(`)
and applied it as a label on top of the textbox. What if you\u2019d like to change that?
Or if you\u2019d like to customize the textbox in some other way? In that case, you can
instantiate a class object representing the input component.`),ze=u(),ee=r("p"),ta=s("Take a look at the example below:"),Be=u(),E(W.$$.fragment),Re=u(),d=r("iframe"),Ue=u(),te=r("p"),aa=s(`Here, we\u2019ve created an input textbox with a label, a placeholder, and a set number of lines.
You could do the same for the output textbox, but we\u2019ll leave that for now.`),Ke=u(),ae=r("p"),oa=s(`We\u2019ve seen that with just a few lines of code, Gradio lets you create a simple interface around any function
with any kind of inputs or outputs. In this section, we\u2019ve started with a
simple textbox, but in the next sections, we\u2019ll cover other kinds of inputs and outputs. Let\u2019s now take a look at including some NLP in a Gradio application.`),Qe=u(),$=r("h2"),H=r("a"),Ie=r("span"),E(Y.$$.fragment),sa=u(),Pe=r("span"),la=s("\u{1F916} Including model predictions"),Ve=u(),O=r("p"),na=s("Let\u2019s now build a simple interface that allows you to demo a "),Ge=r("strong"),ra=s("text-generation"),ia=s(" model like GPT-2."),Xe=u(),v=r("p"),pa=s("We\u2019ll load our model using the "),qe=r("code"),ua=s("pipeline()"),ca=s(` function from \u{1F917} Transformers.
If you need a quick refresher, you can go back to `),oe=r("a"),fa=s("that section in Chapter 1"),ma=s("."),Ze=u(),se=r("p"),ha=s("First, we define a prediction function that takes in a text prompt and returns the text completion:"),et=u(),E(J.$$.fragment),tt=u(),le=r("p"),da=s("This function completes prompts that you provide, and you can run it with your own input prompts to see how it works. Here is an example (you might get a different completion):"),at=u(),E(z.$$.fragment),ot=u(),E(B.$$.fragment),st=u(),D=r("p"),wa=s("Now that we have a function for generating predictions, we can create and launch an "),Te=r("code"),ya=s("Interface"),ga=s(" in the same way we did earlier:"),lt=u(),E(R.$$.fragment),nt=u(),ne=r("p"),ba=s("That\u2019s it! You can now use this interface to generate text using the GPT-2 model as shown below \u{1F92F}."),rt=u(),w=r("iframe"),it=u(),re=r("p"),va=s("Keep reading to see how to build other kinds of demos with Gradio!"),this.h()},l(e){const o=mo('[data-svelte="svelte-1phssyn"]',document.head);x=i(o,"META",{name:!0,content:!0}),o.forEach(t),Ce=c(e),k=i(e,"H1",{class:!0});var ut=p(k);T=i(ut,"A",{id:!0,class:!0,href:!0});var ja=p(T);fe=i(ja,"SPAN",{});var Ia=p(fe);j(A.$$.fragment,Ia),Ia.forEach(t),ja.forEach(t),wt=c(ut),me=i(ut,"SPAN",{});var Pa=p(me);yt=l(Pa,"Building your first demo"),Pa.forEach(t),ut.forEach(t),Le=c(e),j(M.$$.fragment,e),He=c(e),U=i(e,"P",{});var Ga=p(U);gt=l(Ga,"Let\u2019s start by installing Gradio! Since it is a Python package, simply run:"),Ga.forEach(t),Oe=c(e),K=i(e,"P",{});var qa=p(K);he=i(qa,"CODE",{});var Ta=p(he);bt=l(Ta,"$ pip install gradio"),Ta.forEach(t),qa.forEach(t),De=c(e),Q=i(e,"P",{});var Ca=p(Q);vt=l(Ca,`You can run Gradio anywhere, be it from your favourite Python IDE, to Jupyter notebooks or even in Google Colab \u{1F92F}!
So install Gradio wherever you run Python!`),Ca.forEach(t),Se=c(e),V=i(e,"P",{});var La=p(V);xt=l(La,"Let\u2019s get started with a simple \u201CHello World\u201D example to get familiar with the Gradio syntax:"),La.forEach(t),Ae=c(e),j(N.$$.fragment,e),Me=c(e),X=i(e,"P",{});var Ha=p(X);kt=l(Ha,"Let\u2019s walk through the code above:"),Ha.forEach(t),Ne=c(e),b=i(e,"UL",{});var ie=p(b);g=i(ie,"LI",{});var S=p(g);_t=l(S,"First, we define a function called "),de=i(S,"CODE",{});var Oa=p(de);$t=l(Oa,"greet()"),Oa.forEach(t),Et=l(S,". In this case, it is a simple function that adds \u201CHello\u201D before your name, but it can be "),we=i(S,"EM",{});var Da=p(we);jt=l(Da,"any"),Da.forEach(t),It=l(S," Python function in general. For example, in machine learning applications, this function would "),ye=i(S,"EM",{});var Sa=p(ye);Pt=l(Sa,"call a model to make a prediction"),Sa.forEach(t),Gt=l(S," on an input and return the output."),S.forEach(t),qt=c(ie),m=i(ie,"LI",{});var y=p(m);Tt=l(y,"Then, we create a Gradio "),ge=i(y,"CODE",{});var Aa=p(ge);Ct=l(Aa,"Interface"),Aa.forEach(t),Lt=l(y," with three arguments, "),be=i(y,"CODE",{});var Ma=p(be);Ht=l(Ma,"fn"),Ma.forEach(t),Ot=l(y,", "),ve=i(y,"CODE",{});var Na=p(ve);Dt=l(Na,"inputs"),Na.forEach(t),St=l(y,", and "),xe=i(y,"CODE",{});var Fa=p(xe);At=l(Fa,"outputs"),Fa.forEach(t),Mt=l(y,". These arguments define the prediction function, as well as the "),ke=i(y,"EM",{});var Wa=p(ke);Nt=l(Wa,"type"),Wa.forEach(t),Ft=l(y," of input and output components we would like. In our case, both components are simple text boxes."),y.forEach(t),Wt=c(ie),_=i(ie,"LI",{});var pe=p(_);Yt=l(pe,"We then call the "),_e=i(pe,"CODE",{});var Ya=p(_e);Jt=l(Ya,"launch()"),Ya.forEach(t),zt=l(pe," method on the "),$e=i(pe,"CODE",{});var Ja=p($e);Bt=l(Ja,"Interface"),Ja.forEach(t),Rt=l(pe," that we created."),pe.forEach(t),ie.forEach(t),Fe=c(e),C=i(e,"P",{});var ct=p(C);Ut=l(ct,"If you run this code, the interface below will appear automatically within a Jupyter/Colab notebook, or pop in a browser on "),Ee=i(ct,"STRONG",{});var za=p(Ee);F=i(za,"A",{href:!0,rel:!0});var Ba=p(F);Kt=l(Ba,"http://localhost:7860"),Ba.forEach(t),za.forEach(t),Qt=l(ct," if running from a script."),ct.forEach(t),We=c(e),h=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),p(h).forEach(t),Ye=c(e),Z=i(e,"P",{});var Ra=p(Z);Vt=l(Ra,"Try using this GUI right now with your own name or some other input!"),Ra.forEach(t),Je=c(e),L=i(e,"P",{});var ft=p(L);Xt=l(ft,"You\u2019ll notice that in this GUI, Gradio automatically inferred the name of the input parameter ("),je=i(ft,"CODE",{});var Ua=p(je);Zt=l(Ua,"name"),Ua.forEach(t),ea=l(ft,`)
and applied it as a label on top of the textbox. What if you\u2019d like to change that?
Or if you\u2019d like to customize the textbox in some other way? In that case, you can
instantiate a class object representing the input component.`),ft.forEach(t),ze=c(e),ee=i(e,"P",{});var Ka=p(ee);ta=l(Ka,"Take a look at the example below:"),Ka.forEach(t),Be=c(e),j(W.$$.fragment,e),Re=c(e),d=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),p(d).forEach(t),Ue=c(e),te=i(e,"P",{});var Qa=p(te);aa=l(Qa,`Here, we\u2019ve created an input textbox with a label, a placeholder, and a set number of lines.
You could do the same for the output textbox, but we\u2019ll leave that for now.`),Qa.forEach(t),Ke=c(e),ae=i(e,"P",{});var Va=p(ae);oa=l(Va,`We\u2019ve seen that with just a few lines of code, Gradio lets you create a simple interface around any function
with any kind of inputs or outputs. In this section, we\u2019ve started with a
simple textbox, but in the next sections, we\u2019ll cover other kinds of inputs and outputs. Let\u2019s now take a look at including some NLP in a Gradio application.`),Va.forEach(t),Qe=c(e),$=i(e,"H2",{class:!0});var mt=p($);H=i(mt,"A",{id:!0,class:!0,href:!0});var Xa=p(H);Ie=i(Xa,"SPAN",{});var Za=p(Ie);j(Y.$$.fragment,Za),Za.forEach(t),Xa.forEach(t),sa=c(mt),Pe=i(mt,"SPAN",{});var eo=p(Pe);la=l(eo,"\u{1F916} Including model predictions"),eo.forEach(t),mt.forEach(t),Ve=c(e),O=i(e,"P",{});var ht=p(O);na=l(ht,"Let\u2019s now build a simple interface that allows you to demo a "),Ge=i(ht,"STRONG",{});var to=p(Ge);ra=l(to,"text-generation"),to.forEach(t),ia=l(ht," model like GPT-2."),ht.forEach(t),Xe=c(e),v=i(e,"P",{});var ue=p(v);pa=l(ue,"We\u2019ll load our model using the "),qe=i(ue,"CODE",{});var ao=p(qe);ua=l(ao,"pipeline()"),ao.forEach(t),ca=l(ue,` function from \u{1F917} Transformers.
If you need a quick refresher, you can go back to `),oe=i(ue,"A",{href:!0});var oo=p(oe);fa=l(oo,"that section in Chapter 1"),oo.forEach(t),ma=l(ue,"."),ue.forEach(t),Ze=c(e),se=i(e,"P",{});var so=p(se);ha=l(so,"First, we define a prediction function that takes in a text prompt and returns the text completion:"),so.forEach(t),et=c(e),j(J.$$.fragment,e),tt=c(e),le=i(e,"P",{});var lo=p(le);da=l(lo,"This function completes prompts that you provide, and you can run it with your own input prompts to see how it works. Here is an example (you might get a different completion):"),lo.forEach(t),at=c(e),j(z.$$.fragment,e),ot=c(e),j(B.$$.fragment,e),st=c(e),D=i(e,"P",{});var dt=p(D);wa=l(dt,"Now that we have a function for generating predictions, we can create and launch an "),Te=i(dt,"CODE",{});var no=p(Te);ya=l(no,"Interface"),no.forEach(t),ga=l(dt," in the same way we did earlier:"),dt.forEach(t),lt=c(e),j(R.$$.fragment,e),nt=c(e),ne=i(e,"P",{});var ro=p(ne);ba=l(ro,"That\u2019s it! You can now use this interface to generate text using the GPT-2 model as shown below \u{1F92F}."),ro.forEach(t),rt=c(e),w=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),p(w).forEach(t),it=c(e),re=i(e,"P",{});var io=p(re);va=l(io,"Keep reading to see how to build other kinds of demos with Gradio!"),io.forEach(t),this.h()},h(){f(x,"name","hf:doc:metadata"),f(x,"content",JSON.stringify(bo)),f(T,"id","building-your-first-demo"),f(T,"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"),f(T,"href","#building-your-first-demo"),f(k,"class","relative group"),f(F,"href","http://localhost:7860/"),f(F,"rel","nofollow"),xa(h.src,_a="https://course-demos-hello-world.hf.space")||f(h,"src",_a),f(h,"frameborder","0"),f(h,"height","250"),f(h,"title","Gradio app"),f(h,"class","container p-0 flex-grow space-iframe"),f(h,"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"),f(h,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),xa(d.src,$a="https://course-demos-hello-world-custom.hf.space")||f(d,"src",$a),f(d,"frameborder","0"),f(d,"height","300"),f(d,"title","Gradio app"),f(d,"class","container p-0 flex-grow space-iframe"),f(d,"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"),f(d,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),f(H,"id","including-model-predictions"),f(H,"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"),f(H,"href","#including-model-predictions"),f($,"class","relative group"),f(oe,"href","/course/chapter1/3#text-generation"),xa(w.src,Ea="https://course-demos-gpt-2.hf.space")||f(w,"src",Ea),f(w,"frameborder","0"),f(w,"height","300"),f(w,"title","Gradio app"),f(w,"class","container p-0 flex-grow space-iframe"),f(w,"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"),f(w,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,o){a(document.head,x),n(e,Ce,o),n(e,k,o),a(k,T),a(T,fe),I(A,fe,null),a(k,wt),a(k,me),a(me,yt),n(e,Le,o),I(M,e,o),n(e,He,o),n(e,U,o),a(U,gt),n(e,Oe,o),n(e,K,o),a(K,he),a(he,bt),n(e,De,o),n(e,Q,o),a(Q,vt),n(e,Se,o),n(e,V,o),a(V,xt),n(e,Ae,o),I(N,e,o),n(e,Me,o),n(e,X,o),a(X,kt),n(e,Ne,o),n(e,b,o),a(b,g),a(g,_t),a(g,de),a(de,$t),a(g,Et),a(g,we),a(we,jt),a(g,It),a(g,ye),a(ye,Pt),a(g,Gt),a(b,qt),a(b,m),a(m,Tt),a(m,ge),a(ge,Ct),a(m,Lt),a(m,be),a(be,Ht),a(m,Ot),a(m,ve),a(ve,Dt),a(m,St),a(m,xe),a(xe,At),a(m,Mt),a(m,ke),a(ke,Nt),a(m,Ft),a(b,Wt),a(b,_),a(_,Yt),a(_,_e),a(_e,Jt),a(_,zt),a(_,$e),a($e,Bt),a(_,Rt),n(e,Fe,o),n(e,C,o),a(C,Ut),a(C,Ee),a(Ee,F),a(F,Kt),a(C,Qt),n(e,We,o),n(e,h,o),n(e,Ye,o),n(e,Z,o),a(Z,Vt),n(e,Je,o),n(e,L,o),a(L,Xt),a(L,je),a(je,Zt),a(L,ea),n(e,ze,o),n(e,ee,o),a(ee,ta),n(e,Be,o),I(W,e,o),n(e,Re,o),n(e,d,o),n(e,Ue,o),n(e,te,o),a(te,aa),n(e,Ke,o),n(e,ae,o),a(ae,oa),n(e,Qe,o),n(e,$,o),a($,H),a(H,Ie),I(Y,Ie,null),a($,sa),a($,Pe),a(Pe,la),n(e,Ve,o),n(e,O,o),a(O,na),a(O,Ge),a(Ge,ra),a(O,ia),n(e,Xe,o),n(e,v,o),a(v,pa),a(v,qe),a(qe,ua),a(v,ca),a(v,oe),a(oe,fa),a(v,ma),n(e,Ze,o),n(e,se,o),a(se,ha),n(e,et,o),I(J,e,o),n(e,tt,o),n(e,le,o),a(le,da),n(e,at,o),I(z,e,o),n(e,ot,o),I(B,e,o),n(e,st,o),n(e,D,o),a(D,wa),a(D,Te),a(Te,ya),a(D,ga),n(e,lt,o),I(R,e,o),n(e,nt,o),n(e,ne,o),a(ne,ba),n(e,rt,o),n(e,w,o),n(e,it,o),n(e,re,o),a(re,va),pt=!0},p:ho,i(e){pt||(P(A.$$.fragment,e),P(M.$$.fragment,e),P(N.$$.fragment,e),P(W.$$.fragment,e),P(Y.$$.fragment,e),P(J.$$.fragment,e),P(z.$$.fragment,e),P(B.$$.fragment,e),P(R.$$.fragment,e),pt=!0)},o(e){G(A.$$.fragment,e),G(M.$$.fragment,e),G(N.$$.fragment,e),G(W.$$.fragment,e),G(Y.$$.fragment,e),G(J.$$.fragment,e),G(z.$$.fragment,e),G(B.$$.fragment,e),G(R.$$.fragment,e),pt=!1},d(e){t(x),e&&t(Ce),e&&t(k),q(A),e&&t(Le),q(M,e),e&&t(He),e&&t(U),e&&t(Oe),e&&t(K),e&&t(De),e&&t(Q),e&&t(Se),e&&t(V),e&&t(Ae),q(N,e),e&&t(Me),e&&t(X),e&&t(Ne),e&&t(b),e&&t(Fe),e&&t(C),e&&t(We),e&&t(h),e&&t(Ye),e&&t(Z),e&&t(Je),e&&t(L),e&&t(ze),e&&t(ee),e&&t(Be),q(W,e),e&&t(Re),e&&t(d),e&&t(Ue),e&&t(te),e&&t(Ke),e&&t(ae),e&&t(Qe),e&&t($),q(Y),e&&t(Ve),e&&t(O),e&&t(Xe),e&&t(v),e&&t(Ze),e&&t(se),e&&t(et),q(J,e),e&&t(tt),e&&t(le),e&&t(at),q(z,e),e&&t(ot),q(B,e),e&&t(st),e&&t(D),e&&t(lt),q(R,e),e&&t(nt),e&&t(ne),e&&t(rt),e&&t(w),e&&t(it),e&&t(re)}}}const bo={local:"building-your-first-demo",sections:[{local:"including-model-predictions",title:"\u{1F916} Including model predictions"}],title:"Building your first demo"};function vo(ka){return wo(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Eo extends uo{constructor(x){super();co(this,x,vo,go,fo,{})}}export{Eo as default,bo as metadata};
