import{s as it,a as _e,n as rt,o as pt}from"../chunks/scheduler.cc52f4b9.js";import{S as mt,i as ut,e as o,s,c as d,h as ct,a as i,d as l,b as n,f as O,g as h,j as p,k as r,l as dt,m as a,n as f,t as w,o as y,p as b}from"../chunks/index.5b747fde.js";import{C as ht,H as ot,E as ft}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.d38ac5a9.js";import{C as A}from"../chunks/CodeBlock.665bfc37.js";import{C as wt}from"../chunks/CourseFloatingBanner.b33fcd79.js";function yt(Ve){let g,ee,K,te,M,le,x,ae,j,se,T,Re="Let’s start by installing Gradio! Since it is a Python package, simply run:",ne,J,Se="<code>$ pip install gradio</code>",oe,k,Xe=`You can run Gradio anywhere, be it from your favourite Python IDE, to Jupyter notebooks or even in Google Colab 🤯!
So install Gradio wherever you run Python!`,ie,$,Ye="Let’s get started with a simple “Hello World” example to get familiar with the Gradio syntax:",re,v,pe,G,qe="Let’s walk through the code above:",me,I,Pe="<li>First, we define a function called <code>greet()</code>. In this case, it is a simple function that adds “Hello” before your name, but it can be <em>any</em> Python function in general. For example, in machine learning applications, this function would <em>call a model to make a prediction</em> on an input and return the output.</li> <li>Then, we create a Gradio <code>Interface</code> with three arguments, <code>fn</code>, <code>inputs</code>, and <code>outputs</code>. These arguments define the prediction function, as well as the <em>type</em> of input and output components we would like. In our case, both components are simple text boxes.</li> <li>We then call the <code>launch()</code> method on the <code>Interface</code> that we created.</li>",ue,B,Le='If you run this code, the interface below will appear automatically within a Jupyter/Colab notebook, or pop in a browser on <strong><a href="http://localhost:7860/" rel="nofollow">http://localhost:7860</a></strong> if running from a script.',ce,m,Qe,de,U,Ee="Try using this GUI right now with your own name or some other input!",he,C,ze=`You’ll notice that in this GUI, Gradio automatically inferred the name of the input parameter (<code>name</code>)
and applied it as a label on top of the textbox. What if you’d like to change that?
Or if you’d like to customize the textbox in some other way? In that case, you can
instantiate a class object representing the input component.`,fe,Z,Fe="Take a look at the example below:",we,H,ye,u,Ne,be,W,Ae=`Here, we’ve 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’ll leave that for now.`,ge,_,Ke=`We’ve 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’ve started with a
simple textbox, but in the next sections, we’ll cover other kinds of inputs and outputs. Let’s now take a look at including some NLP in a Gradio application.`,Me,V,xe,R,De="Let’s now build a simple interface that allows you to demo a <strong>text-generation</strong> model like GPT-2.",je,S,Oe=`We’ll load our model using the <code>pipeline()</code> function from 🤗 Transformers.
If you need a quick refresher, you can go back to <a href="/course/chapter1/3#text-generation">that section in Chapter 1</a>.`,Te,X,et="First, we define a prediction function that takes in a text prompt and returns the text completion:",Je,Y,ke,q,tt="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):",$e,P,ve,L,Ge,Q,lt="Now that we have a function for generating predictions, we can create and launch an <code>Interface</code> in the same way we did earlier:",Ie,E,Be,z,at="That’s it! You can now use this interface to generate text using the GPT-2 model as shown below 🤯.",Ue,c,st,Ce,F,nt="Keep reading to see how to build other kinds of demos with Gradio!",Ze,N,He,D,We;return M=new ht({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),x=new ot({props:{title:"Building your first demo",local:"building-your-first-demo",headingTag:"h1"}}),j=new wt({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"}]}}),v=new A({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQSUwQWRlZiUyMGdyZWV0KG5hbWUpJTNBJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTIySGVsbG8lMjAlMjIlMjAlMkIlMjBuYW1lJTBBJTBBJTBBZGVtbyUyMCUzRCUyMGdyLkludGVyZmFjZShmbiUzRGdyZWV0JTJDJTIwaW5wdXRzJTNEJTIydGV4dCUyMiUyQyUyMG91dHB1dHMlM0QlMjJ0ZXh0JTIyKSUwQSUwQWRlbW8ubGF1bmNoKCk=",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()`,wrap:!1}}),H=new A({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQSUwQWRlZiUyMGdyZWV0KG5hbWUpJTNBJTBBJTIwJTIwJTIwJTIwcmV0dXJuJTIwJTIySGVsbG8lMjAlMjIlMjAlMkIlMjBuYW1lJTBBJTBBJTBBJTIzJTIwV2UlMjBpbnN0YW50aWF0ZSUyMHRoZSUyMFRleHRib3glMjBjbGFzcyUwQXRleHRib3glMjAlM0QlMjBnci5UZXh0Ym94KGxhYmVsJTNEJTIyVHlwZSUyMHlvdXIlMjBuYW1lJTIwaGVyZSUzQSUyMiUyQyUyMHBsYWNlaG9sZGVyJTNEJTIySm9obiUyMERvZSUyMiUyQyUyMGxpbmVzJTNEMiklMEElMEFnci5JbnRlcmZhY2UoZm4lM0RncmVldCUyQyUyMGlucHV0cyUzRHRleHRib3glMkMlMjBvdXRwdXRzJTNEJTIydGV4dCUyMikubGF1bmNoKCk=",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()`,wrap:!1}}),V=new ot({props:{title:"🤖 Including model predictions",local:"including-model-predictions",headingTag:"h2"}}),Y=new A({props:{code:"ZnJvbSUyMHRyYW5zZm9ybWVycyUyMGltcG9ydCUyMHBpcGVsaW5lJTBBJTBBbW9kZWwlMjAlM0QlMjBwaXBlbGluZSglMjJ0ZXh0LWdlbmVyYXRpb24lMjIpJTBBJTBBJTBBZGVmJTIwcHJlZGljdChwcm9tcHQpJTNBJTBBJTIwJTIwJTIwJTIwY29tcGxldGlvbiUyMCUzRCUyMG1vZGVsKHByb21wdCklNUIwJTVEJTVCJTIyZ2VuZXJhdGVkX3RleHQlMjIlNUQlMEElMjAlMjAlMjAlMjByZXR1cm4lMjBjb21wbGV0aW9u",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`,wrap:!1}}),P=new A({props:{code:"cHJlZGljdCglMjJNeSUyMGZhdm9yaXRlJTIwcHJvZ3JhbW1pbmclMjBsYW5ndWFnZSUyMGlzJTIyKQ==",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>',wrap:!1}}),L=new A({props:{code:"JTNFJTNFJTIwTXklMjBmYXZvcml0ZSUyMHByb2dyYW1taW5nJTIwbGFuZ3VhZ2UlMjBpcyUyMEhhc2tlbGwuJTIwSSUyMHJlYWxseSUyMGVuam95ZWQlMjB0aGUlMjBIYXNrZWxsJTIwbGFuZ3VhZ2UlMkMlMjBidXQlMjBpdCUyMGRvZXNuJ3QlMjBoYXZlJTIwYWxsJTIwdGhlJTIwZmVhdHVyZXMlMjB0aGF0JTIwY2FuJTIwYmUlMjBhcHBsaWVkJTIwdG8lMjBhbnklMjBvdGhlciUyMGxhbmd1YWdlLiUyMEZvciUyMGV4YW1wbGUlMkMlMjBhbGwlMjBpdCUyMGRvZXMlMjBpcyUyMGNvbXBpbGUlMjB0byUyMGElMjBieXRlJTIwYXJyYXku",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.',wrap:!1}}),E=new A({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQWdyLkludGVyZmFjZShmbiUzRHByZWRpY3QlMkMlMjBpbnB1dHMlM0QlMjJ0ZXh0JTIyJTJDJTIwb3V0cHV0cyUzRCUyMnRleHQlMjIpLmxhdW5jaCgp",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()`,wrap:!1}}),N=new ft({props:{source:"https://github.com/huggingface/course/blob/main/chapters/en/chapter9/2.mdx"}}),{c(){g=o("meta"),ee=s(),K=o("p"),te=s(),d(M.$$.fragment),le=s(),d(x.$$.fragment),ae=s(),d(j.$$.fragment),se=s(),T=o("p"),T.textContent=Re,ne=s(),J=o("p"),J.innerHTML=Se,oe=s(),k=o("p"),k.textContent=Xe,ie=s(),$=o("p"),$.textContent=Ye,re=s(),d(v.$$.fragment),pe=s(),G=o("p"),G.textContent=qe,me=s(),I=o("ul"),I.innerHTML=Pe,ue=s(),B=o("p"),B.innerHTML=Le,ce=s(),m=o("iframe"),de=s(),U=o("p"),U.textContent=Ee,he=s(),C=o("p"),C.innerHTML=ze,fe=s(),Z=o("p"),Z.textContent=Fe,we=s(),d(H.$$.fragment),ye=s(),u=o("iframe"),be=s(),W=o("p"),W.textContent=Ae,ge=s(),_=o("p"),_.textContent=Ke,Me=s(),d(V.$$.fragment),xe=s(),R=o("p"),R.innerHTML=De,je=s(),S=o("p"),S.innerHTML=Oe,Te=s(),X=o("p"),X.textContent=et,Je=s(),d(Y.$$.fragment),ke=s(),q=o("p"),q.textContent=tt,$e=s(),d(P.$$.fragment),ve=s(),d(L.$$.fragment),Ge=s(),Q=o("p"),Q.innerHTML=lt,Ie=s(),d(E.$$.fragment),Be=s(),z=o("p"),z.textContent=at,Ue=s(),c=o("iframe"),Ce=s(),F=o("p"),F.textContent=nt,Ze=s(),d(N.$$.fragment),He=s(),D=o("p"),this.h()},l(e){const t=ct("svelte-u9bgzb",document.head);g=i(t,"META",{name:!0,content:!0}),t.forEach(l),ee=n(e),K=i(e,"P",{}),O(K).forEach(l),te=n(e),h(M.$$.fragment,e),le=n(e),h(x.$$.fragment,e),ae=n(e),h(j.$$.fragment,e),se=n(e),T=i(e,"P",{"data-svelte-h":!0}),p(T)!=="svelte-1majxmb"&&(T.textContent=Re),ne=n(e),J=i(e,"P",{"data-svelte-h":!0}),p(J)!=="svelte-sv8g3f"&&(J.innerHTML=Se),oe=n(e),k=i(e,"P",{"data-svelte-h":!0}),p(k)!=="svelte-m0sejh"&&(k.textContent=Xe),ie=n(e),$=i(e,"P",{"data-svelte-h":!0}),p($)!=="svelte-t8uf68"&&($.textContent=Ye),re=n(e),h(v.$$.fragment,e),pe=n(e),G=i(e,"P",{"data-svelte-h":!0}),p(G)!=="svelte-ncdl3e"&&(G.textContent=qe),me=n(e),I=i(e,"UL",{"data-svelte-h":!0}),p(I)!=="svelte-hfhpkt"&&(I.innerHTML=Pe),ue=n(e),B=i(e,"P",{"data-svelte-h":!0}),p(B)!=="svelte-wp0shj"&&(B.innerHTML=Le),ce=n(e),m=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),O(m).forEach(l),de=n(e),U=i(e,"P",{"data-svelte-h":!0}),p(U)!=="svelte-4s0wmk"&&(U.textContent=Ee),he=n(e),C=i(e,"P",{"data-svelte-h":!0}),p(C)!=="svelte-fjgg8g"&&(C.innerHTML=ze),fe=n(e),Z=i(e,"P",{"data-svelte-h":!0}),p(Z)!=="svelte-wrn35m"&&(Z.textContent=Fe),we=n(e),h(H.$$.fragment,e),ye=n(e),u=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),O(u).forEach(l),be=n(e),W=i(e,"P",{"data-svelte-h":!0}),p(W)!=="svelte-1e1b3uv"&&(W.textContent=Ae),ge=n(e),_=i(e,"P",{"data-svelte-h":!0}),p(_)!=="svelte-tl90qv"&&(_.textContent=Ke),Me=n(e),h(V.$$.fragment,e),xe=n(e),R=i(e,"P",{"data-svelte-h":!0}),p(R)!=="svelte-b3uqtx"&&(R.innerHTML=De),je=n(e),S=i(e,"P",{"data-svelte-h":!0}),p(S)!=="svelte-1kqxpib"&&(S.innerHTML=Oe),Te=n(e),X=i(e,"P",{"data-svelte-h":!0}),p(X)!=="svelte-zuidxn"&&(X.textContent=et),Je=n(e),h(Y.$$.fragment,e),ke=n(e),q=i(e,"P",{"data-svelte-h":!0}),p(q)!=="svelte-1cnd6y7"&&(q.textContent=tt),$e=n(e),h(P.$$.fragment,e),ve=n(e),h(L.$$.fragment,e),Ge=n(e),Q=i(e,"P",{"data-svelte-h":!0}),p(Q)!=="svelte-mg1sf2"&&(Q.innerHTML=lt),Ie=n(e),h(E.$$.fragment,e),Be=n(e),z=i(e,"P",{"data-svelte-h":!0}),p(z)!=="svelte-ptoolc"&&(z.textContent=at),Ue=n(e),c=i(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),O(c).forEach(l),Ce=n(e),F=i(e,"P",{"data-svelte-h":!0}),p(F)!=="svelte-md4bqz"&&(F.textContent=nt),Ze=n(e),h(N.$$.fragment,e),He=n(e),D=i(e,"P",{}),O(D).forEach(l),this.h()},h(){r(g,"name","hf:doc:metadata"),r(g,"content",bt),_e(m.src,Qe="https://course-demos-hello-world.hf.space")||r(m,"src",Qe),r(m,"frameborder","0"),r(m,"height","250"),r(m,"title","Gradio app"),r(m,"class","container p-0 flex-grow space-iframe"),r(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"),r(m,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),_e(u.src,Ne="https://course-demos-hello-world-custom.hf.space")||r(u,"src",Ne),r(u,"frameborder","0"),r(u,"height","300"),r(u,"title","Gradio app"),r(u,"class","container p-0 flex-grow space-iframe"),r(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"),r(u,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),_e(c.src,st="https://course-demos-gpt-2.hf.space")||r(c,"src",st),r(c,"frameborder","0"),r(c,"height","300"),r(c,"title","Gradio app"),r(c,"class","container p-0 flex-grow space-iframe"),r(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"),r(c,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,t){dt(document.head,g),a(e,ee,t),a(e,K,t),a(e,te,t),f(M,e,t),a(e,le,t),f(x,e,t),a(e,ae,t),f(j,e,t),a(e,se,t),a(e,T,t),a(e,ne,t),a(e,J,t),a(e,oe,t),a(e,k,t),a(e,ie,t),a(e,$,t),a(e,re,t),f(v,e,t),a(e,pe,t),a(e,G,t),a(e,me,t),a(e,I,t),a(e,ue,t),a(e,B,t),a(e,ce,t),a(e,m,t),a(e,de,t),a(e,U,t),a(e,he,t),a(e,C,t),a(e,fe,t),a(e,Z,t),a(e,we,t),f(H,e,t),a(e,ye,t),a(e,u,t),a(e,be,t),a(e,W,t),a(e,ge,t),a(e,_,t),a(e,Me,t),f(V,e,t),a(e,xe,t),a(e,R,t),a(e,je,t),a(e,S,t),a(e,Te,t),a(e,X,t),a(e,Je,t),f(Y,e,t),a(e,ke,t),a(e,q,t),a(e,$e,t),f(P,e,t),a(e,ve,t),f(L,e,t),a(e,Ge,t),a(e,Q,t),a(e,Ie,t),f(E,e,t),a(e,Be,t),a(e,z,t),a(e,Ue,t),a(e,c,t),a(e,Ce,t),a(e,F,t),a(e,Ze,t),f(N,e,t),a(e,He,t),a(e,D,t),We=!0},p:rt,i(e){We||(w(M.$$.fragment,e),w(x.$$.fragment,e),w(j.$$.fragment,e),w(v.$$.fragment,e),w(H.$$.fragment,e),w(V.$$.fragment,e),w(Y.$$.fragment,e),w(P.$$.fragment,e),w(L.$$.fragment,e),w(E.$$.fragment,e),w(N.$$.fragment,e),We=!0)},o(e){y(M.$$.fragment,e),y(x.$$.fragment,e),y(j.$$.fragment,e),y(v.$$.fragment,e),y(H.$$.fragment,e),y(V.$$.fragment,e),y(Y.$$.fragment,e),y(P.$$.fragment,e),y(L.$$.fragment,e),y(E.$$.fragment,e),y(N.$$.fragment,e),We=!1},d(e){e&&(l(ee),l(K),l(te),l(le),l(ae),l(se),l(T),l(ne),l(J),l(oe),l(k),l(ie),l($),l(re),l(pe),l(G),l(me),l(I),l(ue),l(B),l(ce),l(m),l(de),l(U),l(he),l(C),l(fe),l(Z),l(we),l(ye),l(u),l(be),l(W),l(ge),l(_),l(Me),l(xe),l(R),l(je),l(S),l(Te),l(X),l(Je),l(ke),l(q),l($e),l(ve),l(Ge),l(Q),l(Ie),l(Be),l(z),l(Ue),l(c),l(Ce),l(F),l(Ze),l(He),l(D)),l(g),b(M,e),b(x,e),b(j,e),b(v,e),b(H,e),b(V,e),b(Y,e),b(P,e),b(L,e),b(E,e),b(N,e)}}}const bt='{"title":"Building your first demo","local":"building-your-first-demo","sections":[{"title":"🤖 Including model predictions","local":"including-model-predictions","sections":[],"depth":2}],"depth":1}';function gt(Ve){return pt(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class kt extends mt{constructor(g){super(),ut(this,g,gt,yt,it,{})}}export{kt as component};
