import{S as cn,i as hn,s as pn,e as n,k as p,w as k,t as a,M as un,c as r,d as o,m as u,a as l,x as _,h as s,b as h,N as no,G as t,g as c,y as E,L as dn,q as $,o as x,B as j,v as mn}from"../../chunks/vendor-hf-doc-builder.js";import{Y as fn}from"../../chunks/Youtube-hf-doc-builder.js";import{I as wt}from"../../chunks/IconCopyLink-hf-doc-builder.js";import{C as ro}from"../../chunks/CodeBlock-hf-doc-builder.js";import{C as gn}from"../../chunks/CourseFloatingBanner-hf-doc-builder.js";function yn(ts){let P,vt,C,O,xe,Z,lo,je,io,bt,ee,kt,q,co,qe,Se,ho,po,Te,Le,uo,mo,_t,fe,fo,Et,R,N,Pe,te,go,Ce,yo,$t,A,oe,os,wo,ae,as,xt,G,vo,Re,bo,ko,jt,f,H,Ae,_o,Eo,Me,$o,xo,jo,ge,Ie,qo,So,To,F,De,Lo,Po,Oe,Co,Ro,Ao,d,Ne,Mo,Io,Ge,Do,Oo,He,No,Go,Fe,Ho,Fo,Ue,Uo,Bo,Be,Wo,zo,We,Xo,Qo,ze,Yo,Ko,Vo,U,Xe,Jo,Zo,Qe,ea,ta,oa,B,Ye,aa,sa,Ke,na,ra,qt,se,St,ye,la,Tt,g,ss,Lt,M,W,Ve,ne,ia,Je,ca,Pt,re,Ct,z,ha,Ze,pa,ua,Rt,X,da,et,ma,fa,At,I,Q,tt,le,ga,ot,ya,Mt,we,wa,It,w,va,at,ba,ka,st,_a,Ea,ie,$a,xa,Dt,ce,Ot,D,Y,nt,he,ja,rt,qa,Nt,S,Sa,ve,Ta,La,lt,Pa,Ca,Gt,v,Ra,pe,Aa,Ma,ue,Ia,Da,it,Oa,Na,Ht,de,Ft,K,Ga,ct,Ha,Fa,Ut,me,Bt,y,ns,Wt,T,Ua,ht,Ba,Wa,pt,za,Xa,zt,L,Qa,ut,Ya,Ka,dt,Va,Ja,Xt,be,Za,Qt;return Z=new wt({}),ee=new gn({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/section4.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/en/chapter9/section4.ipynb"}]}}),te=new wt({}),se=new ro({props:{code:`title = "Ask Rick a Question"
description = """
The bot was trained to answer questions based on Rick and Morty dialogues. Ask Rick anything!
<img src="https://huggingface.co/spaces/course-demos/Rick_and_Morty_QA/resolve/main/rick.png" width=200px>
"""

article = "Check out [the original Rick and Morty Bot](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) that this demo is based off of."

gr.Interface(
    fn=predict,
    inputs="textbox",
    outputs="text",
    title=title,
    description=description,
    article=article,
    examples=[["What are you doing?"], ["Where should we time travel to?"]],
).launch()`,highlighted:`title = <span class="hljs-string">&quot;Ask Rick a Question&quot;</span>
description = <span class="hljs-string">&quot;&quot;&quot;
The bot was trained to answer questions based on Rick and Morty dialogues. Ask Rick anything!
&lt;img src=&quot;https://huggingface.co/spaces/course-demos/Rick_and_Morty_QA/resolve/main/rick.png&quot; width=200px&gt;
&quot;&quot;&quot;</span>

article = <span class="hljs-string">&quot;Check out [the original Rick and Morty Bot](https://huggingface.co/spaces/kingabzpro/Rick_and_Morty_Bot) that this demo is based off of.&quot;</span>

gr.Interface(
    fn=predict,
    inputs=<span class="hljs-string">&quot;textbox&quot;</span>,
    outputs=<span class="hljs-string">&quot;text&quot;</span>,
    title=title,
    description=description,
    article=article,
    examples=[[<span class="hljs-string">&quot;What are you doing?&quot;</span>], [<span class="hljs-string">&quot;Where should we time travel to?&quot;</span>]],
).launch()`}}),ne=new wt({}),re=new ro({props:{code:'gr.Interface(classify_image, "image", "label").launch(share=True)',highlighted:'gr.Interface(classify_image, <span class="hljs-string">&quot;image&quot;</span>, <span class="hljs-string">&quot;label&quot;</span>).launch(share=<span class="hljs-literal">True</span>)'}}),le=new wt({}),ce=new fn({props:{id:"LS9Y2wDVI0k"}}),he=new wt({}),de=new ro({props:{code:`from pathlib import Path
import torch
import gradio as gr
from torch import nn

LABELS = Path("class_names.txt").read_text().splitlines()

model = nn.Sequential(
    nn.Conv2d(1, 32, 3, padding="same"),
    nn.ReLU(),
    nn.MaxPool2d(2),
    nn.Conv2d(32, 64, 3, padding="same"),
    nn.ReLU(),
    nn.MaxPool2d(2),
    nn.Conv2d(64, 128, 3, padding="same"),
    nn.ReLU(),
    nn.MaxPool2d(2),
    nn.Flatten(),
    nn.Linear(1152, 256),
    nn.ReLU(),
    nn.Linear(256, len(LABELS)),
)
state_dict = torch.load("pytorch_model.bin", map_location="cpu")
model.load_state_dict(state_dict, strict=False)
model.eval()


def predict(im):
    x = torch.tensor(im, dtype=torch.float32).unsqueeze(0).unsqueeze(0) / 255.0
    with torch.no_grad():
        out = model(x)
    probabilities = torch.nn.functional.softmax(out[0], dim=0)
    values, indices = torch.topk(probabilities, 5)
    return {LABELS[i]: v.item() for i, v in zip(indices, values)}`,highlighted:`<span class="hljs-keyword">from</span> pathlib <span class="hljs-keyword">import</span> Path
<span class="hljs-keyword">import</span> torch
<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
<span class="hljs-keyword">from</span> torch <span class="hljs-keyword">import</span> nn

LABELS = Path(<span class="hljs-string">&quot;class_names.txt&quot;</span>).read_text().splitlines()

model = nn.Sequential(
    nn.Conv2d(<span class="hljs-number">1</span>, <span class="hljs-number">32</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">&quot;same&quot;</span>),
    nn.ReLU(),
    nn.MaxPool2d(<span class="hljs-number">2</span>),
    nn.Conv2d(<span class="hljs-number">32</span>, <span class="hljs-number">64</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">&quot;same&quot;</span>),
    nn.ReLU(),
    nn.MaxPool2d(<span class="hljs-number">2</span>),
    nn.Conv2d(<span class="hljs-number">64</span>, <span class="hljs-number">128</span>, <span class="hljs-number">3</span>, padding=<span class="hljs-string">&quot;same&quot;</span>),
    nn.ReLU(),
    nn.MaxPool2d(<span class="hljs-number">2</span>),
    nn.Flatten(),
    nn.Linear(<span class="hljs-number">1152</span>, <span class="hljs-number">256</span>),
    nn.ReLU(),
    nn.Linear(<span class="hljs-number">256</span>, <span class="hljs-built_in">len</span>(LABELS)),
)
state_dict = torch.load(<span class="hljs-string">&quot;pytorch_model.bin&quot;</span>, map_location=<span class="hljs-string">&quot;cpu&quot;</span>)
model.load_state_dict(state_dict, strict=<span class="hljs-literal">False</span>)
model.<span class="hljs-built_in">eval</span>()


<span class="hljs-keyword">def</span> <span class="hljs-title function_">predict</span>(<span class="hljs-params">im</span>):
    x = torch.tensor(im, dtype=torch.float32).unsqueeze(<span class="hljs-number">0</span>).unsqueeze(<span class="hljs-number">0</span>) / <span class="hljs-number">255.0</span>
    <span class="hljs-keyword">with</span> torch.no_grad():
        out = model(x)
    probabilities = torch.nn.functional.softmax(out[<span class="hljs-number">0</span>], dim=<span class="hljs-number">0</span>)
    values, indices = torch.topk(probabilities, <span class="hljs-number">5</span>)
    <span class="hljs-keyword">return</span> {LABELS[i]: v.item() <span class="hljs-keyword">for</span> i, v <span class="hljs-keyword">in</span> <span class="hljs-built_in">zip</span>(indices, values)}`}}),me=new ro({props:{code:`interface = gr.Interface(
    predict,
    inputs="sketchpad",
    outputs="label",
    theme="huggingface",
    title="Sketch Recognition",
    description="Who wants to play Pictionary? Draw a common object like a shovel or a laptop, and the algorithm will guess in real time!",
    article="<p style='text-align: center'>Sketch Recognition | Demo Model</p>",
    live=True,
)
interface.launch(share=True)`,highlighted:`interface = gr.Interface(
    predict,
    inputs=<span class="hljs-string">&quot;sketchpad&quot;</span>,
    outputs=<span class="hljs-string">&quot;label&quot;</span>,
    theme=<span class="hljs-string">&quot;huggingface&quot;</span>,
    title=<span class="hljs-string">&quot;Sketch Recognition&quot;</span>,
    description=<span class="hljs-string">&quot;Who wants to play Pictionary? Draw a common object like a shovel or a laptop, and the algorithm will guess in real time!&quot;</span>,
    article=<span class="hljs-string">&quot;&lt;p style=&#x27;text-align: center&#x27;&gt;Sketch Recognition | Demo Model&lt;/p&gt;&quot;</span>,
    live=<span class="hljs-literal">True</span>,
)
interface.launch(share=<span class="hljs-literal">True</span>)`}}),{c(){P=n("meta"),vt=p(),C=n("h1"),O=n("a"),xe=n("span"),k(Z.$$.fragment),lo=p(),je=n("span"),io=a("Sharing demos with others"),bt=p(),k(ee.$$.fragment),kt=p(),q=n("p"),co=a(`Now that you\u2019ve built a demo, you\u2019ll probably want to share it with others. Gradio demos
can be shared in two ways: using a `),qe=n("strong"),Se=n("em"),ho=a("temporary share link"),po=a(" or "),Te=n("strong"),Le=n("em"),uo=a("permanent hosting on Spaces"),mo=a("."),_t=p(),fe=n("p"),fo=a("We\u2019ll cover both of these approaches shortly. But before you share your demo, you may want to polish it up \u{1F485}."),Et=p(),R=n("h3"),N=n("a"),Pe=n("span"),k(te.$$.fragment),go=p(),Ce=n("span"),yo=a("Polishing your Gradio demo:"),$t=p(),A=n("div"),oe=n("img"),wo=p(),ae=n("img"),xt=p(),G=n("p"),vo=a("To add additional content to your demo, the "),Re=n("code"),bo=a("Interface"),ko=a(" class supports some optional parameters:"),jt=p(),f=n("ul"),H=n("li"),Ae=n("code"),_o=a("title"),Eo=a(": you can give a title to your demo, which appears "),Me=n("em"),$o=a("above"),xo=a(" the input and output components."),jo=p(),ge=n("li"),Ie=n("code"),qo=a("description"),So=a(": you can give a description (in text, Markdown, or HTML) for the interface, which appears above the input and output components and below the title."),To=p(),F=n("li"),De=n("code"),Lo=a("article"),Po=a(": you can also write an expanded article (in text, Markdown, or HTML) explaining the interface. If provided, it appears "),Oe=n("em"),Co=a("below"),Ro=a(" the input and output components."),Ao=p(),d=n("li"),Ne=n("code"),Mo=a("theme"),Io=a(": don\u2019t like the default colors? Set the theme to use one of "),Ge=n("code"),Do=a("default"),Oo=a(", "),He=n("code"),No=a("huggingface"),Go=a(", "),Fe=n("code"),Ho=a("grass"),Fo=a(", "),Ue=n("code"),Uo=a("peach"),Bo=a(". You can also add the "),Be=n("code"),Wo=a("dark-"),zo=a(" prefix, e.g. "),We=n("code"),Xo=a("dark-peach"),Qo=a(" for dark theme (or just "),ze=n("code"),Yo=a("dark"),Ko=a(" for the default dark theme)."),Vo=p(),U=n("li"),Xe=n("code"),Jo=a("examples"),Zo=a(": to make your demo "),Qe=n("em"),ea=a("way easier to use"),ta=a(", you can provide some example inputs for the function. These appear below the UI components and can be used to populate the interface. These should be provided as a nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component."),oa=p(),B=n("li"),Ye=n("code"),aa=a("live"),sa=a(": if you want to make your demo \u201Clive\u201D, meaning that your model reruns every time the input changes, you can set "),Ke=n("code"),na=a("live=True"),ra=a(`. This makes sense to use with quick models (we\u2019ll see an example at the end of this section)
Using the options above, we end up with a more complete interface. Run the code below so you can chat with Rick and Morty:`),qt=p(),k(se.$$.fragment),St=p(),ye=n("p"),la=a("Using the options above, we end up with a more complete interface. Try the interface below:"),Tt=p(),g=n("iframe"),Lt=p(),M=n("h3"),W=n("a"),Ve=n("span"),k(ne.$$.fragment),ia=p(),Je=n("span"),ca=a("Sharing your demo with temporary links"),Pt=a(`

Now that we have a working demo of our machine learning model, let's learn how to easily share a link to our interface.
Interfaces can be easily shared publicly by setting \`share=True\` in the \`launch()\` method:

	`),k(re.$$.fragment),Ct=p(),z=n("p"),ha=a("This generates a public, shareable link that you can send to anybody! When you send this link, the user on the other side can try out the model in their browser for up to 72 hours. Because the processing happens on your device (as long as your device stays on!), you don\u2019t have to worry about packaging any dependencies. If you\u2019re working out of a Google Colab notebook, a share link is always automatically created. It usually looks something like this: "),Ze=n("strong"),pa=a("XXXXX.gradio.app"),ua=a(". Although the link is served through a Gradio link, we are only a proxy for your local server, and do not store any data sent through the interfaces."),Rt=p(),X=n("p"),da=a("Keep in mind, however, that these links are publicly accessible, meaning that anyone can use your model for prediction! Therefore, make sure not to expose any sensitive information through the functions you write, or allow any critical changes to occur on your device. If you set "),et=n("code"),ma=a("share=False"),fa=a(" (the default), only a local link is created."),At=p(),I=n("h3"),Q=n("a"),tt=n("span"),k(le.$$.fragment),ga=p(),ot=n("span"),ya=a("Hosting your demo on Hugging Face Spaces"),Mt=p(),we=n("p"),wa=a("A share link that you can pass around to collegues is cool, but how can you permanently host your demo and have it exist in its own \u201Cspace\u201D on the internet?"),It=p(),w=n("p"),va=a("Hugging Face Spaces provides the infrastructure to permanently host your Gradio model on the internet, "),at=n("strong"),ba=a("for free"),ka=a(`! Spaces allows you to create and push to a (public or private) repo,
where your Gradio
interface code will exist in an `),st=n("code"),_a=a("app.py"),Ea=a(" file. "),ie=n("a"),$a=a("Read a step-by-step tutorial"),xa=a(" to get started, or watch an example video below."),Dt=p(),k(ce.$$.fragment),Ot=p(),D=n("h2"),Y=n("a"),nt=n("span"),k(he.$$.fragment),ja=p(),rt=n("span"),qa=a("\u270F\uFE0F Let's apply it!"),Nt=p(),S=n("p"),Sa=a("Using what we just learned in the sections so far, let\u2019s create the sketch recognition demo we saw in "),ve=n("a"),Ta=a("section one of this chapter"),La=a(". Let\u2019s add some customization to our interface and set "),lt=n("code"),Pa=a("share=True"),Ca=a(" to create a public link we can pass around."),Gt=p(),v=n("p"),Ra=a("We can load the labels from "),pe=n("a"),Aa=a("class_names.txt"),Ma=a(" and load the pre-trained pytorch model from "),ue=n("a"),Ia=a("pytorch_model.bin"),Da=a(". Download these files by following the link and clicking download on the top left corner of the file preview. Let\u2019s take a look at the code below to see how we use these files to load our model and create a "),it=n("code"),Oa=a("predict()"),Na=a(" function:"),Ht=p(),k(de.$$.fragment),Ft=p(),K=n("p"),Ga=a("Now that we have a "),ct=n("code"),Ha=a("predict()"),Fa=a(" function. The next step is to define and launch our gradio interface:"),Ut=p(),k(me.$$.fragment),Bt=p(),y=n("iframe"),Wt=p(),T=n("p"),Ua=a("Notice the "),ht=n("code"),Ba=a("live=True"),Wa=a(" parameter in "),pt=n("code"),za=a("Interface"),Xa=a(`, which means that the sketch demo makes
a prediction every time someone draws on the sketchpad (no submit button!).`),zt=p(),L=n("p"),Qa=a("Furthermore, we also set the "),ut=n("code"),Ya=a("share=True"),Ka=a(" argument in the "),dt=n("code"),Va=a("launch()"),Ja=a(` method.
This will create a public link that you can
send to anyone! When you send this link, the user on the other side can try out the
sketch recognition model. To reiterate, you could also host the model on Hugging Face Spaces,
which is how we are able to embed the demo above.`),Xt=p(),be=n("p"),Za=a("Next up, we\u2019ll cover other ways that Gradio can be used with the Hugging Face ecosystem!"),this.h()},l(e){const i=un('[data-svelte="svelte-1phssyn"]',document.head);P=r(i,"META",{name:!0,content:!0}),i.forEach(o),vt=u(e),C=r(e,"H1",{class:!0});var Yt=l(C);O=r(Yt,"A",{id:!0,class:!0,href:!0});var rs=l(O);xe=r(rs,"SPAN",{});var ls=l(xe);_(Z.$$.fragment,ls),ls.forEach(o),rs.forEach(o),lo=u(Yt),je=r(Yt,"SPAN",{});var is=l(je);io=s(is,"Sharing demos with others"),is.forEach(o),Yt.forEach(o),bt=u(e),_(ee.$$.fragment,e),kt=u(e),q=r(e,"P",{});var ke=l(q);co=s(ke,`Now that you\u2019ve built a demo, you\u2019ll probably want to share it with others. Gradio demos
can be shared in two ways: using a `),qe=r(ke,"STRONG",{});var cs=l(qe);Se=r(cs,"EM",{});var hs=l(Se);ho=s(hs,"temporary share link"),hs.forEach(o),cs.forEach(o),po=s(ke," or "),Te=r(ke,"STRONG",{});var ps=l(Te);Le=r(ps,"EM",{});var us=l(Le);uo=s(us,"permanent hosting on Spaces"),us.forEach(o),ps.forEach(o),mo=s(ke,"."),ke.forEach(o),_t=u(e),fe=r(e,"P",{});var ds=l(fe);fo=s(ds,"We\u2019ll cover both of these approaches shortly. But before you share your demo, you may want to polish it up \u{1F485}."),ds.forEach(o),Et=u(e),R=r(e,"H3",{class:!0});var Kt=l(R);N=r(Kt,"A",{id:!0,class:!0,href:!0});var ms=l(N);Pe=r(ms,"SPAN",{});var fs=l(Pe);_(te.$$.fragment,fs),fs.forEach(o),ms.forEach(o),go=u(Kt),Ce=r(Kt,"SPAN",{});var gs=l(Ce);yo=s(gs,"Polishing your Gradio demo:"),gs.forEach(o),Kt.forEach(o),$t=u(e),A=r(e,"DIV",{class:!0});var Vt=l(A);oe=r(Vt,"IMG",{class:!0,src:!0,alt:!0}),wo=u(Vt),ae=r(Vt,"IMG",{class:!0,src:!0,alt:!0}),Vt.forEach(o),xt=u(e),G=r(e,"P",{});var Jt=l(G);vo=s(Jt,"To add additional content to your demo, the "),Re=r(Jt,"CODE",{});var ys=l(Re);bo=s(ys,"Interface"),ys.forEach(o),ko=s(Jt," class supports some optional parameters:"),Jt.forEach(o),jt=u(e),f=r(e,"UL",{});var b=l(f);H=r(b,"LI",{});var mt=l(H);Ae=r(mt,"CODE",{});var ws=l(Ae);_o=s(ws,"title"),ws.forEach(o),Eo=s(mt,": you can give a title to your demo, which appears "),Me=r(mt,"EM",{});var vs=l(Me);$o=s(vs,"above"),vs.forEach(o),xo=s(mt," the input and output components."),mt.forEach(o),jo=u(b),ge=r(b,"LI",{});var es=l(ge);Ie=r(es,"CODE",{});var bs=l(Ie);qo=s(bs,"description"),bs.forEach(o),So=s(es,": you can give a description (in text, Markdown, or HTML) for the interface, which appears above the input and output components and below the title."),es.forEach(o),To=u(b),F=r(b,"LI",{});var ft=l(F);De=r(ft,"CODE",{});var ks=l(De);Lo=s(ks,"article"),ks.forEach(o),Po=s(ft,": you can also write an expanded article (in text, Markdown, or HTML) explaining the interface. If provided, it appears "),Oe=r(ft,"EM",{});var _s=l(Oe);Co=s(_s,"below"),_s.forEach(o),Ro=s(ft," the input and output components."),ft.forEach(o),Ao=u(b),d=r(b,"LI",{});var m=l(d);Ne=r(m,"CODE",{});var Es=l(Ne);Mo=s(Es,"theme"),Es.forEach(o),Io=s(m,": don\u2019t like the default colors? Set the theme to use one of "),Ge=r(m,"CODE",{});var $s=l(Ge);Do=s($s,"default"),$s.forEach(o),Oo=s(m,", "),He=r(m,"CODE",{});var xs=l(He);No=s(xs,"huggingface"),xs.forEach(o),Go=s(m,", "),Fe=r(m,"CODE",{});var js=l(Fe);Ho=s(js,"grass"),js.forEach(o),Fo=s(m,", "),Ue=r(m,"CODE",{});var qs=l(Ue);Uo=s(qs,"peach"),qs.forEach(o),Bo=s(m,". You can also add the "),Be=r(m,"CODE",{});var Ss=l(Be);Wo=s(Ss,"dark-"),Ss.forEach(o),zo=s(m," prefix, e.g. "),We=r(m,"CODE",{});var Ts=l(We);Xo=s(Ts,"dark-peach"),Ts.forEach(o),Qo=s(m," for dark theme (or just "),ze=r(m,"CODE",{});var Ls=l(ze);Yo=s(Ls,"dark"),Ls.forEach(o),Ko=s(m," for the default dark theme)."),m.forEach(o),Vo=u(b),U=r(b,"LI",{});var gt=l(U);Xe=r(gt,"CODE",{});var Ps=l(Xe);Jo=s(Ps,"examples"),Ps.forEach(o),Zo=s(gt,": to make your demo "),Qe=r(gt,"EM",{});var Cs=l(Qe);ea=s(Cs,"way easier to use"),Cs.forEach(o),ta=s(gt,", you can provide some example inputs for the function. These appear below the UI components and can be used to populate the interface. These should be provided as a nested list, in which the outer list consists of samples and each inner list consists of an input corresponding to each input component."),gt.forEach(o),oa=u(b),B=r(b,"LI",{});var yt=l(B);Ye=r(yt,"CODE",{});var Rs=l(Ye);aa=s(Rs,"live"),Rs.forEach(o),sa=s(yt,": if you want to make your demo \u201Clive\u201D, meaning that your model reruns every time the input changes, you can set "),Ke=r(yt,"CODE",{});var As=l(Ke);na=s(As,"live=True"),As.forEach(o),ra=s(yt,`. This makes sense to use with quick models (we\u2019ll see an example at the end of this section)
Using the options above, we end up with a more complete interface. Run the code below so you can chat with Rick and Morty:`),yt.forEach(o),b.forEach(o),qt=u(e),_(se.$$.fragment,e),St=u(e),ye=r(e,"P",{});var Ms=l(ye);la=s(Ms,"Using the options above, we end up with a more complete interface. Try the interface below:"),Ms.forEach(o),Tt=u(e),g=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),l(g).forEach(o),Lt=u(e),M=r(e,"H3",{class:!0});var Zt=l(M);W=r(Zt,"A",{id:!0,class:!0,href:!0});var Is=l(W);Ve=r(Is,"SPAN",{});var Ds=l(Ve);_(ne.$$.fragment,Ds),Ds.forEach(o),Is.forEach(o),ia=u(Zt),Je=r(Zt,"SPAN",{});var Os=l(Je);ca=s(Os,"Sharing your demo with temporary links"),Os.forEach(o),Zt.forEach(o),Pt=s(e,`

Now that we have a working demo of our machine learning model, let's learn how to easily share a link to our interface.
Interfaces can be easily shared publicly by setting \`share=True\` in the \`launch()\` method:

	`),_(re.$$.fragment,e),Ct=u(e),z=r(e,"P",{});var eo=l(z);ha=s(eo,"This generates a public, shareable link that you can send to anybody! When you send this link, the user on the other side can try out the model in their browser for up to 72 hours. Because the processing happens on your device (as long as your device stays on!), you don\u2019t have to worry about packaging any dependencies. If you\u2019re working out of a Google Colab notebook, a share link is always automatically created. It usually looks something like this: "),Ze=r(eo,"STRONG",{});var Ns=l(Ze);pa=s(Ns,"XXXXX.gradio.app"),Ns.forEach(o),ua=s(eo,". Although the link is served through a Gradio link, we are only a proxy for your local server, and do not store any data sent through the interfaces."),eo.forEach(o),Rt=u(e),X=r(e,"P",{});var to=l(X);da=s(to,"Keep in mind, however, that these links are publicly accessible, meaning that anyone can use your model for prediction! Therefore, make sure not to expose any sensitive information through the functions you write, or allow any critical changes to occur on your device. If you set "),et=r(to,"CODE",{});var Gs=l(et);ma=s(Gs,"share=False"),Gs.forEach(o),fa=s(to," (the default), only a local link is created."),to.forEach(o),At=u(e),I=r(e,"H3",{class:!0});var oo=l(I);Q=r(oo,"A",{id:!0,class:!0,href:!0});var Hs=l(Q);tt=r(Hs,"SPAN",{});var Fs=l(tt);_(le.$$.fragment,Fs),Fs.forEach(o),Hs.forEach(o),ga=u(oo),ot=r(oo,"SPAN",{});var Us=l(ot);ya=s(Us,"Hosting your demo on Hugging Face Spaces"),Us.forEach(o),oo.forEach(o),Mt=u(e),we=r(e,"P",{});var Bs=l(we);wa=s(Bs,"A share link that you can pass around to collegues is cool, but how can you permanently host your demo and have it exist in its own \u201Cspace\u201D on the internet?"),Bs.forEach(o),It=u(e),w=r(e,"P",{});var V=l(w);va=s(V,"Hugging Face Spaces provides the infrastructure to permanently host your Gradio model on the internet, "),at=r(V,"STRONG",{});var Ws=l(at);ba=s(Ws,"for free"),Ws.forEach(o),ka=s(V,`! Spaces allows you to create and push to a (public or private) repo,
where your Gradio
interface code will exist in an `),st=r(V,"CODE",{});var zs=l(st);_a=s(zs,"app.py"),zs.forEach(o),Ea=s(V," file. "),ie=r(V,"A",{href:!0,rel:!0});var Xs=l(ie);$a=s(Xs,"Read a step-by-step tutorial"),Xs.forEach(o),xa=s(V," to get started, or watch an example video below."),V.forEach(o),Dt=u(e),_(ce.$$.fragment,e),Ot=u(e),D=r(e,"H2",{class:!0});var ao=l(D);Y=r(ao,"A",{id:!0,class:!0,href:!0});var Qs=l(Y);nt=r(Qs,"SPAN",{});var Ys=l(nt);_(he.$$.fragment,Ys),Ys.forEach(o),Qs.forEach(o),ja=u(ao),rt=r(ao,"SPAN",{});var Ks=l(rt);qa=s(Ks,"\u270F\uFE0F Let's apply it!"),Ks.forEach(o),ao.forEach(o),Nt=u(e),S=r(e,"P",{});var _e=l(S);Sa=s(_e,"Using what we just learned in the sections so far, let\u2019s create the sketch recognition demo we saw in "),ve=r(_e,"A",{href:!0});var Vs=l(ve);Ta=s(Vs,"section one of this chapter"),Vs.forEach(o),La=s(_e,". Let\u2019s add some customization to our interface and set "),lt=r(_e,"CODE",{});var Js=l(lt);Pa=s(Js,"share=True"),Js.forEach(o),Ca=s(_e," to create a public link we can pass around."),_e.forEach(o),Gt=u(e),v=r(e,"P",{});var J=l(v);Ra=s(J,"We can load the labels from "),pe=r(J,"A",{href:!0,rel:!0});var Zs=l(pe);Aa=s(Zs,"class_names.txt"),Zs.forEach(o),Ma=s(J," and load the pre-trained pytorch model from "),ue=r(J,"A",{href:!0,rel:!0});var en=l(ue);Ia=s(en,"pytorch_model.bin"),en.forEach(o),Da=s(J,". Download these files by following the link and clicking download on the top left corner of the file preview. Let\u2019s take a look at the code below to see how we use these files to load our model and create a "),it=r(J,"CODE",{});var tn=l(it);Oa=s(tn,"predict()"),tn.forEach(o),Na=s(J," function:"),J.forEach(o),Ht=u(e),_(de.$$.fragment,e),Ft=u(e),K=r(e,"P",{});var so=l(K);Ga=s(so,"Now that we have a "),ct=r(so,"CODE",{});var on=l(ct);Ha=s(on,"predict()"),on.forEach(o),Fa=s(so," function. The next step is to define and launch our gradio interface:"),so.forEach(o),Ut=u(e),_(me.$$.fragment,e),Bt=u(e),y=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),l(y).forEach(o),Wt=u(e),T=r(e,"P",{});var Ee=l(T);Ua=s(Ee,"Notice the "),ht=r(Ee,"CODE",{});var an=l(ht);Ba=s(an,"live=True"),an.forEach(o),Wa=s(Ee," parameter in "),pt=r(Ee,"CODE",{});var sn=l(pt);za=s(sn,"Interface"),sn.forEach(o),Xa=s(Ee,`, which means that the sketch demo makes
a prediction every time someone draws on the sketchpad (no submit button!).`),Ee.forEach(o),zt=u(e),L=r(e,"P",{});var $e=l(L);Qa=s($e,"Furthermore, we also set the "),ut=r($e,"CODE",{});var nn=l(ut);Ya=s(nn,"share=True"),nn.forEach(o),Ka=s($e," argument in the "),dt=r($e,"CODE",{});var rn=l(dt);Va=s(rn,"launch()"),rn.forEach(o),Ja=s($e,` method.
This will create a public link that you can
send to anyone! When you send this link, the user on the other side can try out the
sketch recognition model. To reiterate, you could also host the model on Hugging Face Spaces,
which is how we are able to embed the demo above.`),$e.forEach(o),Xt=u(e),be=r(e,"P",{});var ln=l(be);Za=s(ln,"Next up, we\u2019ll cover other ways that Gradio can be used with the Hugging Face ecosystem!"),ln.forEach(o),this.h()},h(){h(P,"name","hf:doc:metadata"),h(P,"content",JSON.stringify(wn)),h(O,"id","sharing-demos-with-others"),h(O,"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"),h(O,"href","#sharing-demos-with-others"),h(C,"class","relative group"),h(N,"id","polishing-your-gradio-demo"),h(N,"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"),h(N,"href","#polishing-your-gradio-demo"),h(R,"class","relative group"),h(oe,"class","block dark:hidden"),no(oe.src,os="https://huggingface.co/datasets/huggingface-course/documentation-images/resolve/main/en/chapter9/gradio-demo-overview.png")||h(oe,"src",os),h(oe,"alt","Overview of a gradio interface"),h(ae,"class","hidden dark:block"),no(ae.src,as="https://huggingface.co/datasets/huggingface-course/documentation-images/resolve/main/en/chapter9/gradio-demo-overview-dark.png")||h(ae,"src",as),h(ae,"alt","Overview of a gradio interface"),h(A,"class","flex justify-center"),no(g.src,ss="https://course-demos-Rick-and-Morty-QA.hf.space")||h(g,"src",ss),h(g,"frameborder","0"),h(g,"height","800"),h(g,"title","Gradio app"),h(g,"class","container p-0 flex-grow space-iframe"),h(g,"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"),h(g,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),h(W,"id","sharing-your-demo-with-temporary-links"),h(W,"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"),h(W,"href","#sharing-your-demo-with-temporary-links"),h(M,"class","relative group"),h(Q,"id","hosting-your-demo-on-hugging-face-spaces"),h(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"),h(Q,"href","#hosting-your-demo-on-hugging-face-spaces"),h(I,"class","relative group"),h(ie,"href","https://huggingface.co/blog/gradio-spaces"),h(ie,"rel","nofollow"),h(Y,"id","lets-apply-it"),h(Y,"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"),h(Y,"href","#lets-apply-it"),h(D,"class","relative group"),h(ve,"href","/course/chapter9/1"),h(pe,"href","https://huggingface.co/spaces/dawood/Sketch-Recognition/blob/main/class_names.txt"),h(pe,"rel","nofollow"),h(ue,"href","https://huggingface.co/spaces/dawood/Sketch-Recognition/blob/main/pytorch_model.bin"),h(ue,"rel","nofollow"),no(y.src,ns="https://course-demos-Sketch-Recognition.hf.space")||h(y,"src",ns),h(y,"frameborder","0"),h(y,"height","650"),h(y,"title","Gradio app"),h(y,"class","container p-0 flex-grow space-iframe"),h(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"),h(y,"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,P),c(e,vt,i),c(e,C,i),t(C,O),t(O,xe),E(Z,xe,null),t(C,lo),t(C,je),t(je,io),c(e,bt,i),E(ee,e,i),c(e,kt,i),c(e,q,i),t(q,co),t(q,qe),t(qe,Se),t(Se,ho),t(q,po),t(q,Te),t(Te,Le),t(Le,uo),t(q,mo),c(e,_t,i),c(e,fe,i),t(fe,fo),c(e,Et,i),c(e,R,i),t(R,N),t(N,Pe),E(te,Pe,null),t(R,go),t(R,Ce),t(Ce,yo),c(e,$t,i),c(e,A,i),t(A,oe),t(A,wo),t(A,ae),c(e,xt,i),c(e,G,i),t(G,vo),t(G,Re),t(Re,bo),t(G,ko),c(e,jt,i),c(e,f,i),t(f,H),t(H,Ae),t(Ae,_o),t(H,Eo),t(H,Me),t(Me,$o),t(H,xo),t(f,jo),t(f,ge),t(ge,Ie),t(Ie,qo),t(ge,So),t(f,To),t(f,F),t(F,De),t(De,Lo),t(F,Po),t(F,Oe),t(Oe,Co),t(F,Ro),t(f,Ao),t(f,d),t(d,Ne),t(Ne,Mo),t(d,Io),t(d,Ge),t(Ge,Do),t(d,Oo),t(d,He),t(He,No),t(d,Go),t(d,Fe),t(Fe,Ho),t(d,Fo),t(d,Ue),t(Ue,Uo),t(d,Bo),t(d,Be),t(Be,Wo),t(d,zo),t(d,We),t(We,Xo),t(d,Qo),t(d,ze),t(ze,Yo),t(d,Ko),t(f,Vo),t(f,U),t(U,Xe),t(Xe,Jo),t(U,Zo),t(U,Qe),t(Qe,ea),t(U,ta),t(f,oa),t(f,B),t(B,Ye),t(Ye,aa),t(B,sa),t(B,Ke),t(Ke,na),t(B,ra),c(e,qt,i),E(se,e,i),c(e,St,i),c(e,ye,i),t(ye,la),c(e,Tt,i),c(e,g,i),c(e,Lt,i),c(e,M,i),t(M,W),t(W,Ve),E(ne,Ve,null),t(M,ia),t(M,Je),t(Je,ca),c(e,Pt,i),E(re,e,i),c(e,Ct,i),c(e,z,i),t(z,ha),t(z,Ze),t(Ze,pa),t(z,ua),c(e,Rt,i),c(e,X,i),t(X,da),t(X,et),t(et,ma),t(X,fa),c(e,At,i),c(e,I,i),t(I,Q),t(Q,tt),E(le,tt,null),t(I,ga),t(I,ot),t(ot,ya),c(e,Mt,i),c(e,we,i),t(we,wa),c(e,It,i),c(e,w,i),t(w,va),t(w,at),t(at,ba),t(w,ka),t(w,st),t(st,_a),t(w,Ea),t(w,ie),t(ie,$a),t(w,xa),c(e,Dt,i),E(ce,e,i),c(e,Ot,i),c(e,D,i),t(D,Y),t(Y,nt),E(he,nt,null),t(D,ja),t(D,rt),t(rt,qa),c(e,Nt,i),c(e,S,i),t(S,Sa),t(S,ve),t(ve,Ta),t(S,La),t(S,lt),t(lt,Pa),t(S,Ca),c(e,Gt,i),c(e,v,i),t(v,Ra),t(v,pe),t(pe,Aa),t(v,Ma),t(v,ue),t(ue,Ia),t(v,Da),t(v,it),t(it,Oa),t(v,Na),c(e,Ht,i),E(de,e,i),c(e,Ft,i),c(e,K,i),t(K,Ga),t(K,ct),t(ct,Ha),t(K,Fa),c(e,Ut,i),E(me,e,i),c(e,Bt,i),c(e,y,i),c(e,Wt,i),c(e,T,i),t(T,Ua),t(T,ht),t(ht,Ba),t(T,Wa),t(T,pt),t(pt,za),t(T,Xa),c(e,zt,i),c(e,L,i),t(L,Qa),t(L,ut),t(ut,Ya),t(L,Ka),t(L,dt),t(dt,Va),t(L,Ja),c(e,Xt,i),c(e,be,i),t(be,Za),Qt=!0},p:dn,i(e){Qt||($(Z.$$.fragment,e),$(ee.$$.fragment,e),$(te.$$.fragment,e),$(se.$$.fragment,e),$(ne.$$.fragment,e),$(re.$$.fragment,e),$(le.$$.fragment,e),$(ce.$$.fragment,e),$(he.$$.fragment,e),$(de.$$.fragment,e),$(me.$$.fragment,e),Qt=!0)},o(e){x(Z.$$.fragment,e),x(ee.$$.fragment,e),x(te.$$.fragment,e),x(se.$$.fragment,e),x(ne.$$.fragment,e),x(re.$$.fragment,e),x(le.$$.fragment,e),x(ce.$$.fragment,e),x(he.$$.fragment,e),x(de.$$.fragment,e),x(me.$$.fragment,e),Qt=!1},d(e){o(P),e&&o(vt),e&&o(C),j(Z),e&&o(bt),j(ee,e),e&&o(kt),e&&o(q),e&&o(_t),e&&o(fe),e&&o(Et),e&&o(R),j(te),e&&o($t),e&&o(A),e&&o(xt),e&&o(G),e&&o(jt),e&&o(f),e&&o(qt),j(se,e),e&&o(St),e&&o(ye),e&&o(Tt),e&&o(g),e&&o(Lt),e&&o(M),j(ne),e&&o(Pt),j(re,e),e&&o(Ct),e&&o(z),e&&o(Rt),e&&o(X),e&&o(At),e&&o(I),j(le),e&&o(Mt),e&&o(we),e&&o(It),e&&o(w),e&&o(Dt),j(ce,e),e&&o(Ot),e&&o(D),j(he),e&&o(Nt),e&&o(S),e&&o(Gt),e&&o(v),e&&o(Ht),j(de,e),e&&o(Ft),e&&o(K),e&&o(Ut),j(me,e),e&&o(Bt),e&&o(y),e&&o(Wt),e&&o(T),e&&o(zt),e&&o(L),e&&o(Xt),e&&o(be)}}}const wn={local:"sharing-demos-with-others",sections:[{local:null,sections:[{local:"polishing-your-gradio-demo",title:"Polishing your Gradio demo:"},{local:"sharing-your-demo-with-temporary-links",title:"Sharing your demo with temporary links"},{local:"hosting-your-demo-on-hugging-face-spaces",title:"Hosting your demo on Hugging Face Spaces"}],title:null},{local:"lets-apply-it",title:"\u270F\uFE0F Let's apply it!"}],title:"Sharing demos with others"};function vn(ts){return mn(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class xn extends cn{constructor(P){super();hn(this,P,vn,yn,pn,{})}}export{xn as default,wn as metadata};
