import{s as at,f as Ue,n as st,o as it}from"../chunks/scheduler.37c15a92.js";import{S as ot,i as nt,g as o,s,r as f,A as rt,h as n,f as l,c as i,j as K,u as h,x as p,k as r,y as pt,a,v as y,d as w,t as b,w as M}from"../chunks/index.2bf4358c.js";import{C as N}from"../chunks/CodeBlock.4f5fc1ad.js";import{C as ct}from"../chunks/CourseFloatingBanner.06521e8b.js";import{H as lt}from"../chunks/Heading.8ada512a.js";function ut(ze){let d,D,F,O,g,ee,j,te,J,Ze="Iniziamo installando Gradio! Essendo una libreria di Python, è sufficiente eseguire:",le,T,He="<code>$ pip install gradio</code>",ae,x,qe=`Puoi usare Gradio ovunque, dalla tua IDE Python preferita, ai Jupyter notebook o anche in Google Colab 🤯!
Quindi, installa Gradio in qualsiasi posto in cui usi Python!`,se,v,_e="Iniziamo con un semplice esempio “Hello World” per prendere familiarità con la sintassi di Gradio:",ie,G,oe,I,We="Analizziamo il codice qui sopra:",ne,k,Ve="<li>Per prima cosa, definiamo una funzione chiamata <code>greet()</code>. In questo caso, si tratta di una semplice funzione che aggiunge “Hello” prima di un nome (<em>name</em>), ma questa può essere in generale <em>qualsiasi</em> funzione in Python. Ad esempio, nelle applicazioni di machine learning, questa funzione <em>chiamerebbe un modello per fare una previsione</em> su un input e restituirebbe l’output.</li> <li>Creaiamo puoi una <code>Interface</code> (<em>Interfaccia</em>) di Gradio con tre argomenti, <code>fn</code>, <code>inputs</code>, e <code>outputs</code>. Questi argomenti definiscono la funzione di predizione e il <em>tipo</em> di componenti di ingresso e di uscita che desideriamo. Nel nostro caso, entrambi i componenti sono semplici caselle di testo.</li> <li>Chiamiamo poi il metodo <code>launch()</code> sul <code>Interface</code> creata.</li>",re,C,Re='Se si esegue questo codice, l’interfaccia qui sotto apparirà automaticamente all’interno di un Jupyter/Colab notebook, o comparirà in un browser  <strong><a href="http://localhost:7860/" rel="nofollow">http://localhost:7860</a></strong> se lanciato in uno script.',pe,c,Pe,ce,$,Se="Prova subito a utilizzare questa GUI con il tuo nome o con un altro input!",ue,B,Qe=`Si noterà che in questa GUI, Gradio ha riconosciuto automaticamente il nome del parametro di input (<code>name</code>)
e lo applica come etichetta in cima alla casella di testo. E se si volesse cambiarlo?
O se si volesse personalizzare la casella di testo in qualche altro modo? In questo caso, si può
istanziare una classe che rappresenti il componente in input.`,me,U,Xe="Si osservi l’esempio seguente:",de,z,fe,u,Ee,he,Z,Ye=`Qui abbiamo creato una casella di testo di input con un’etichetta (<code>label</code>), un segnaposto (<code>placeholder</code>) e un numero di righe stabilito (<code>lines</code>).
Si potrebbe fare lo stesso per la casella di testo in output, ma per ora ci fermiamo qui.`,ye,H,Le=`Abbiamo visto che con poche righe di codice, Gradio consente di creare una semplice interfaccia intorno a qualsiasi funzione
con qualsiasi tipo di input o output. In questa sezione abbiamo iniziato con una
semplice casella di testo, ma nelle prossime sezioni tratteremo altri tipi di input e output. Vediamo ora di inserire un po’ di NLP in un’applicazione Gradio.`,we,q,be,_,Ne="Costruiamo ora una semplice interfaccia che consenta di dimostrare come funziona un modello di <strong>generazione del testo</strong> come GPT-2.",Me,W,Fe=`Caricheremo il nostro modello usando la funzione <code>pipeline()</code> di 🤗 Transformers.
Se hai bisogno di un rapido ripasso, puoi tornare a <a href="/course/chapter1/3#text-generation">quella sezione nel Capitolo 1</a>.`,ge,V,Ae="Per prima cosa, definiamo una funzione di predizione che riceve un prompt di testo e restituisce il testo completato:",je,R,Je,P,Ke="Questa funzione completa le richieste fornite dall’utente e puoi eseguirla con qualche tuo input per vedere come funziona. Ecco un esempio (potresti ottenere un risultato diverso):",Te,S,xe,Q,ve,X,De="Ora che abbiamo una funzione per generare previsioni, possiamo creare e lanciare una <code>Interface</code> nello stesso modo in cui abbiamo fatto prima:",Ge,E,Ie,Y,Oe="Ecco fatto! Ora è possibile utilizzare questa interfaccia per generare testo utilizzando il modello GPT-2 come mostrato qui sotto 🤯.",ke,m,et,Ce,L,tt="Continua a leggere per scoprire come costruire altri tipi di demo con Gradio!",$e,A,Be;return g=new lt({props:{title:"Creare la tua prima demo",local:"creare-la-tua-prima-demo",headingTag:"h1"}}),j=new ct({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/section2.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/chapter9/section2.ipynb"}]}}),G=new N({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}}),z=new N({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}}),q=new lt({props:{title:"🤖 Includere le predizioni del modello",local:"-includere-le-predizioni-del-modello",headingTag:"h2"}}),R=new N({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}}),S=new N({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}}),Q=new N({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 N({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}}),{c(){d=o("meta"),D=s(),F=o("p"),O=s(),f(g.$$.fragment),ee=s(),f(j.$$.fragment),te=s(),J=o("p"),J.textContent=Ze,le=s(),T=o("p"),T.innerHTML=He,ae=s(),x=o("p"),x.textContent=qe,se=s(),v=o("p"),v.textContent=_e,ie=s(),f(G.$$.fragment),oe=s(),I=o("p"),I.textContent=We,ne=s(),k=o("ul"),k.innerHTML=Ve,re=s(),C=o("p"),C.innerHTML=Re,pe=s(),c=o("iframe"),ce=s(),$=o("p"),$.textContent=Se,ue=s(),B=o("p"),B.innerHTML=Qe,me=s(),U=o("p"),U.textContent=Xe,de=s(),f(z.$$.fragment),fe=s(),u=o("iframe"),he=s(),Z=o("p"),Z.innerHTML=Ye,ye=s(),H=o("p"),H.textContent=Le,we=s(),f(q.$$.fragment),be=s(),_=o("p"),_.innerHTML=Ne,Me=s(),W=o("p"),W.innerHTML=Fe,ge=s(),V=o("p"),V.textContent=Ae,je=s(),f(R.$$.fragment),Je=s(),P=o("p"),P.textContent=Ke,Te=s(),f(S.$$.fragment),xe=s(),f(Q.$$.fragment),ve=s(),X=o("p"),X.innerHTML=De,Ge=s(),f(E.$$.fragment),Ie=s(),Y=o("p"),Y.textContent=Oe,ke=s(),m=o("iframe"),Ce=s(),L=o("p"),L.textContent=tt,$e=s(),A=o("p"),this.h()},l(e){const t=rt("svelte-u9bgzb",document.head);d=n(t,"META",{name:!0,content:!0}),t.forEach(l),D=i(e),F=n(e,"P",{}),K(F).forEach(l),O=i(e),h(g.$$.fragment,e),ee=i(e),h(j.$$.fragment,e),te=i(e),J=n(e,"P",{"data-svelte-h":!0}),p(J)!=="svelte-1kcxbqu"&&(J.textContent=Ze),le=i(e),T=n(e,"P",{"data-svelte-h":!0}),p(T)!=="svelte-sv8g3f"&&(T.innerHTML=He),ae=i(e),x=n(e,"P",{"data-svelte-h":!0}),p(x)!=="svelte-1h87863"&&(x.textContent=qe),se=i(e),v=n(e,"P",{"data-svelte-h":!0}),p(v)!=="svelte-g0ql64"&&(v.textContent=_e),ie=i(e),h(G.$$.fragment,e),oe=i(e),I=n(e,"P",{"data-svelte-h":!0}),p(I)!=="svelte-4froyl"&&(I.textContent=We),ne=i(e),k=n(e,"UL",{"data-svelte-h":!0}),p(k)!=="svelte-1ir6309"&&(k.innerHTML=Ve),re=i(e),C=n(e,"P",{"data-svelte-h":!0}),p(C)!=="svelte-1slgw3n"&&(C.innerHTML=Re),pe=i(e),c=n(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),K(c).forEach(l),ce=i(e),$=n(e,"P",{"data-svelte-h":!0}),p($)!=="svelte-jylajh"&&($.textContent=Se),ue=i(e),B=n(e,"P",{"data-svelte-h":!0}),p(B)!=="svelte-d8u4xy"&&(B.innerHTML=Qe),me=i(e),U=n(e,"P",{"data-svelte-h":!0}),p(U)!=="svelte-4firqo"&&(U.textContent=Xe),de=i(e),h(z.$$.fragment,e),fe=i(e),u=n(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),K(u).forEach(l),he=i(e),Z=n(e,"P",{"data-svelte-h":!0}),p(Z)!=="svelte-eepfk"&&(Z.innerHTML=Ye),ye=i(e),H=n(e,"P",{"data-svelte-h":!0}),p(H)!=="svelte-1os2nng"&&(H.textContent=Le),we=i(e),h(q.$$.fragment,e),be=i(e),_=n(e,"P",{"data-svelte-h":!0}),p(_)!=="svelte-7iy06b"&&(_.innerHTML=Ne),Me=i(e),W=n(e,"P",{"data-svelte-h":!0}),p(W)!=="svelte-1bodsle"&&(W.innerHTML=Fe),ge=i(e),V=n(e,"P",{"data-svelte-h":!0}),p(V)!=="svelte-1uhkpc2"&&(V.textContent=Ae),je=i(e),h(R.$$.fragment,e),Je=i(e),P=n(e,"P",{"data-svelte-h":!0}),p(P)!=="svelte-1jk4usz"&&(P.textContent=Ke),Te=i(e),h(S.$$.fragment,e),xe=i(e),h(Q.$$.fragment,e),ve=i(e),X=n(e,"P",{"data-svelte-h":!0}),p(X)!=="svelte-kegr5g"&&(X.innerHTML=De),Ge=i(e),h(E.$$.fragment,e),Ie=i(e),Y=n(e,"P",{"data-svelte-h":!0}),p(Y)!=="svelte-1tt2799"&&(Y.textContent=Oe),ke=i(e),m=n(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),K(m).forEach(l),Ce=i(e),L=n(e,"P",{"data-svelte-h":!0}),p(L)!=="svelte-107ph84"&&(L.textContent=tt),$e=i(e),A=n(e,"P",{}),K(A).forEach(l),this.h()},h(){r(d,"name","hf:doc:metadata"),r(d,"content",mt),Ue(c.src,Pe="https://course-demos-hello-world.hf.space")||r(c,"src",Pe),r(c,"frameborder","0"),r(c,"height","250"),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"),Ue(u.src,Ee="https://course-demos-hello-world-custom.hf.space")||r(u,"src",Ee),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"),Ue(m.src,et="https://course-demos-gpt-2.hf.space")||r(m,"src",et),r(m,"frameborder","0"),r(m,"height","300"),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")},m(e,t){pt(document.head,d),a(e,D,t),a(e,F,t),a(e,O,t),y(g,e,t),a(e,ee,t),y(j,e,t),a(e,te,t),a(e,J,t),a(e,le,t),a(e,T,t),a(e,ae,t),a(e,x,t),a(e,se,t),a(e,v,t),a(e,ie,t),y(G,e,t),a(e,oe,t),a(e,I,t),a(e,ne,t),a(e,k,t),a(e,re,t),a(e,C,t),a(e,pe,t),a(e,c,t),a(e,ce,t),a(e,$,t),a(e,ue,t),a(e,B,t),a(e,me,t),a(e,U,t),a(e,de,t),y(z,e,t),a(e,fe,t),a(e,u,t),a(e,he,t),a(e,Z,t),a(e,ye,t),a(e,H,t),a(e,we,t),y(q,e,t),a(e,be,t),a(e,_,t),a(e,Me,t),a(e,W,t),a(e,ge,t),a(e,V,t),a(e,je,t),y(R,e,t),a(e,Je,t),a(e,P,t),a(e,Te,t),y(S,e,t),a(e,xe,t),y(Q,e,t),a(e,ve,t),a(e,X,t),a(e,Ge,t),y(E,e,t),a(e,Ie,t),a(e,Y,t),a(e,ke,t),a(e,m,t),a(e,Ce,t),a(e,L,t),a(e,$e,t),a(e,A,t),Be=!0},p:st,i(e){Be||(w(g.$$.fragment,e),w(j.$$.fragment,e),w(G.$$.fragment,e),w(z.$$.fragment,e),w(q.$$.fragment,e),w(R.$$.fragment,e),w(S.$$.fragment,e),w(Q.$$.fragment,e),w(E.$$.fragment,e),Be=!0)},o(e){b(g.$$.fragment,e),b(j.$$.fragment,e),b(G.$$.fragment,e),b(z.$$.fragment,e),b(q.$$.fragment,e),b(R.$$.fragment,e),b(S.$$.fragment,e),b(Q.$$.fragment,e),b(E.$$.fragment,e),Be=!1},d(e){e&&(l(D),l(F),l(O),l(ee),l(te),l(J),l(le),l(T),l(ae),l(x),l(se),l(v),l(ie),l(oe),l(I),l(ne),l(k),l(re),l(C),l(pe),l(c),l(ce),l($),l(ue),l(B),l(me),l(U),l(de),l(fe),l(u),l(he),l(Z),l(ye),l(H),l(we),l(be),l(_),l(Me),l(W),l(ge),l(V),l(je),l(Je),l(P),l(Te),l(xe),l(ve),l(X),l(Ge),l(Ie),l(Y),l(ke),l(m),l(Ce),l(L),l($e),l(A)),l(d),M(g,e),M(j,e),M(G,e),M(z,e),M(q,e),M(R,e),M(S,e),M(Q,e),M(E,e)}}}const mt='{"title":"Creare la tua prima demo","local":"creare-la-tua-prima-demo","sections":[{"title":"🤖 Includere le predizioni del modello","local":"-includere-le-predizioni-del-modello","sections":[],"depth":2}],"depth":1}';function dt(ze){return it(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Mt extends ot{constructor(d){super(),nt(this,d,dt,ut,at,{})}}export{Mt as component};
