import{s as ve,n as Ge,o as Ce}from"../chunks/scheduler.d6170356.js";import{S as _e,i as ke,g as i,s as n,r as d,A as Ie,h as l,f as a,c as o,j as je,u as c,x as r,k as de,y as He,a as s,v as g,d as h,t as u,w as f}from"../chunks/index.fcd4cc08.js";import{C as Ue}from"../chunks/CodeBlock.7b16bdef.js";import{H as x,E as Se}from"../chunks/EditOnGithub.da2b595c.js";function We(ce){let p,R,L,Y,w,q,y,ge='<strong>Gradio</strong> provides an easy and intuitive interface for running a model from a list of inputs and displaying the outputs in formats such as images, audio, 3D objects, and more. Gradio now even has a <a href="https://gradio.app/docs/#o_plot" rel="nofollow">Plot output component</a> for creating data visualizations with Matplotlib, Bokeh, and Plotly! For more details, take a look at the <a href="https://gradio.app/getting_started/" rel="nofollow">Getting started</a> guide from the Gradio team.',z,M,he='Selecting <strong>Gradio</strong> as the SDK when <a href="https://huggingface.co/new-space" rel="nofollow">creating a new Space</a> will initialize your Space with the latest version of Gradio by setting the <code>sdk</code> property to <code>gradio</code> in your <code>README.md</code> file’s YAML block. If you’d like to change the Gradio version, you can edit the <code>sdk_version</code> property.',E,T,ue='Visit the <a href="https://gradio.app/docs/" rel="nofollow">Gradio documentation</a> to learn all about its features and check out the <a href="https://gradio.app/guides/" rel="nofollow">Gradio Guides</a> for some handy tutorials to help you get started!',P,b,N,$,fe='In the following sections, you’ll learn the basics of creating a Space, configuring it, and deploying your code to it. We’ll create a <strong>Hot Dog Classifier</strong> Space with Gradio that’ll be used to demo the <a href="https://huggingface.co/julien-c/hotdog-not-hotdog" rel="nofollow">julien-c/hotdog-not-hotdog</a> model, which can detect whether a given picture contains a hot dog 🌭',V,J,me='You can find a completed version of this hosted at <a href="https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio" rel="nofollow">NimaBoscarino/hotdog-gradio</a>.',X,j,F,U,we='We’ll start by <a href="https://huggingface.co/new-space" rel="nofollow">creating a brand new Space</a> and choosing <strong>Gradio</strong> as our SDK. Hugging Face Spaces are Git repositories, meaning that you can work on your Space incrementally (and collaboratively) by pushing commits. Take a look at the <a href="./repositories-getting-started">Getting Started with Repositories</a> guide to learn about how you can create and edit files before continuing.',A,v,D,G,ye='For the <strong>Hot Dog Classifier</strong> we’ll be using a <a href="https://huggingface.co/docs/transformers/pipeline_tutorial" rel="nofollow">🤗 Transformers pipeline</a> to use the model, so we need to start by installing a few dependencies. This can be done by creating a <strong>requirements.txt</strong> file in our repository, and adding the following dependencies to it:',K,C,O,_,Me="The Spaces runtime will handle installing the dependencies!",ee,k,te,I,Te="To create the Gradio app, make a new file in the repository called <strong>app.py</strong>, and add the following code:",ae,H,se,S,be='This Python script uses a <a href="https://huggingface.co/docs/transformers/pipeline_tutorial" rel="nofollow">🤗 Transformers pipeline</a> to load the <a href="https://huggingface.co/julien-c/hotdog-not-hotdog" rel="nofollow">julien-c/hotdog-not-hotdog</a> model, which is used by the Gradio interface. The Gradio app will expect you to upload an image, which it’ll then classify as <em>hot dog</em> or <em>not hot dog</em>. Once you’ve saved the code to the <strong>app.py</strong> file, visit the <strong>App</strong> tab to see your app in action!',ne,m,$e='<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-hot-dog-gradio.png"/> <img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-hot-dog-gradio-dark.png"/>',oe,W,ie,B,Je='You can embed a Gradio Space on other webpages by using either Web Components or the HTML <code>&lt;iframe&gt;</code> tag. Check out <a href="./spaces-embed">our documentation</a> or the <a href="https://gradio.app/sharing_your_app/#embedding-hosted-spaces" rel="nofollow">Gradio documentation</a> for more details.',le,Z,re,Q,pe;return w=new x({props:{title:"Gradio Spaces",local:"gradio-spaces",headingTag:"h1"}}),b=new x({props:{title:"Your First Gradio Space: Hot Dog Classifier",local:"your-first-gradio-space-hot-dog-classifier",headingTag:"h2"}}),j=new x({props:{title:"Create a new Gradio Space",local:"create-a-new-gradio-space",headingTag:"h2"}}),v=new x({props:{title:"Add the dependencies",local:"add-the-dependencies",headingTag:"h2"}}),C=new Ue({props:{code:"dHJhbnNmb3JtZXJzJTBBdG9yY2g=",highlighted:`<span class="hljs-attribute">transformers
torch</span>`,wrap:!1}}),k=new x({props:{title:"Create the Gradio interface",local:"create-the-gradio-interface",headingTag:"h2"}}),H=new Ue({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQWZyb20lMjB0cmFuc2Zvcm1lcnMlMjBpbXBvcnQlMjBwaXBlbGluZSUwQSUwQXBpcGVsaW5lJTIwJTNEJTIwcGlwZWxpbmUodGFzayUzRCUyMmltYWdlLWNsYXNzaWZpY2F0aW9uJTIyJTJDJTIwbW9kZWwlM0QlMjJqdWxpZW4tYyUyRmhvdGRvZy1ub3QtaG90ZG9nJTIyKSUwQSUwQWRlZiUyMHByZWRpY3QoaW5wdXRfaW1nKSUzQSUwQSUyMCUyMCUyMCUyMHByZWRpY3Rpb25zJTIwJTNEJTIwcGlwZWxpbmUoaW5wdXRfaW1nKSUwQSUyMCUyMCUyMCUyMHJldHVybiUyMGlucHV0X2ltZyUyQyUyMCU3QnAlNUIlMjJsYWJlbCUyMiU1RCUzQSUyMHAlNUIlMjJzY29yZSUyMiU1RCUyMGZvciUyMHAlMjBpbiUyMHByZWRpY3Rpb25zJTdEJTIwJTBBJTBBZ3JhZGlvX2FwcCUyMCUzRCUyMGdyLkludGVyZmFjZSglMEElMjAlMjAlMjAlMjBwcmVkaWN0JTJDJTBBJTIwJTIwJTIwJTIwaW5wdXRzJTNEZ3IuSW1hZ2UobGFiZWwlM0QlMjJTZWxlY3QlMjBob3QlMjBkb2clMjBjYW5kaWRhdGUlMjIlMkMlMjBzb3VyY2VzJTNEJTVCJ3VwbG9hZCclMkMlMjAnd2ViY2FtJyU1RCUyQyUyMHR5cGUlM0QlMjJwaWwlMjIpJTJDJTBBJTIwJTIwJTIwJTIwb3V0cHV0cyUzRCU1QmdyLkltYWdlKGxhYmVsJTNEJTIyUHJvY2Vzc2VkJTIwSW1hZ2UlMjIpJTJDJTIwZ3IuTGFiZWwobGFiZWwlM0QlMjJSZXN1bHQlMjIlMkMlMjBudW1fdG9wX2NsYXNzZXMlM0QyKSU1RCUyQyUwQSUyMCUyMCUyMCUyMHRpdGxlJTNEJTIySG90JTIwRG9nJTNGJTIwT3IlMjBOb3QlM0YlMjIlMkMlMEEpJTBBJTBBaWYlMjBfX25hbWVfXyUyMCUzRCUzRCUyMCUyMl9fbWFpbl9fJTIyJTNBJTBBJTIwJTIwJTIwJTIwZ3JhZGlvX2FwcC5sYXVuY2goKQ==",highlighted:`<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
<span class="hljs-keyword">from</span> transformers <span class="hljs-keyword">import</span> pipeline

pipeline = pipeline(task=<span class="hljs-string">&quot;image-classification&quot;</span>, model=<span class="hljs-string">&quot;julien-c/hotdog-not-hotdog&quot;</span>)

<span class="hljs-keyword">def</span> <span class="hljs-title function_">predict</span>(<span class="hljs-params">input_img</span>):
    predictions = pipeline(input_img)
    <span class="hljs-keyword">return</span> input_img, {p[<span class="hljs-string">&quot;label&quot;</span>]: p[<span class="hljs-string">&quot;score&quot;</span>] <span class="hljs-keyword">for</span> p <span class="hljs-keyword">in</span> predictions} 

gradio_app = gr.Interface(
    predict,
    inputs=gr.Image(label=<span class="hljs-string">&quot;Select hot dog candidate&quot;</span>, sources=[<span class="hljs-string">&#x27;upload&#x27;</span>, <span class="hljs-string">&#x27;webcam&#x27;</span>], <span class="hljs-built_in">type</span>=<span class="hljs-string">&quot;pil&quot;</span>),
    outputs=[gr.Image(label=<span class="hljs-string">&quot;Processed Image&quot;</span>), gr.Label(label=<span class="hljs-string">&quot;Result&quot;</span>, num_top_classes=<span class="hljs-number">2</span>)],
    title=<span class="hljs-string">&quot;Hot Dog? Or Not?&quot;</span>,
)

<span class="hljs-keyword">if</span> __name__ == <span class="hljs-string">&quot;__main__&quot;</span>:
    gradio_app.launch()`,wrap:!1}}),W=new x({props:{title:"Embed Gradio Spaces on other webpages",local:"embed-gradio-spaces-on-other-webpages",headingTag:"h2"}}),Z=new Se({props:{source:"https://github.com/huggingface/hub-docs/blob/main/docs/hub/spaces-sdks-gradio.md"}}),{c(){p=i("meta"),R=n(),L=i("p"),Y=n(),d(w.$$.fragment),q=n(),y=i("p"),y.innerHTML=ge,z=n(),M=i("p"),M.innerHTML=he,E=n(),T=i("p"),T.innerHTML=ue,P=n(),d(b.$$.fragment),N=n(),$=i("p"),$.innerHTML=fe,V=n(),J=i("p"),J.innerHTML=me,X=n(),d(j.$$.fragment),F=n(),U=i("p"),U.innerHTML=we,A=n(),d(v.$$.fragment),D=n(),G=i("p"),G.innerHTML=ye,K=n(),d(C.$$.fragment),O=n(),_=i("p"),_.textContent=Me,ee=n(),d(k.$$.fragment),te=n(),I=i("p"),I.innerHTML=Te,ae=n(),d(H.$$.fragment),se=n(),S=i("p"),S.innerHTML=be,ne=n(),m=i("div"),m.innerHTML=$e,oe=n(),d(W.$$.fragment),ie=n(),B=i("p"),B.innerHTML=Je,le=n(),d(Z.$$.fragment),re=n(),Q=i("p"),this.h()},l(e){const t=Ie("svelte-u9bgzb",document.head);p=l(t,"META",{name:!0,content:!0}),t.forEach(a),R=o(e),L=l(e,"P",{}),je(L).forEach(a),Y=o(e),c(w.$$.fragment,e),q=o(e),y=l(e,"P",{"data-svelte-h":!0}),r(y)!=="svelte-3238v8"&&(y.innerHTML=ge),z=o(e),M=l(e,"P",{"data-svelte-h":!0}),r(M)!=="svelte-hz5eql"&&(M.innerHTML=he),E=o(e),T=l(e,"P",{"data-svelte-h":!0}),r(T)!=="svelte-sn7344"&&(T.innerHTML=ue),P=o(e),c(b.$$.fragment,e),N=o(e),$=l(e,"P",{"data-svelte-h":!0}),r($)!=="svelte-dlhtlz"&&($.innerHTML=fe),V=o(e),J=l(e,"P",{"data-svelte-h":!0}),r(J)!=="svelte-zok0xa"&&(J.innerHTML=me),X=o(e),c(j.$$.fragment,e),F=o(e),U=l(e,"P",{"data-svelte-h":!0}),r(U)!=="svelte-1jimeij"&&(U.innerHTML=we),A=o(e),c(v.$$.fragment,e),D=o(e),G=l(e,"P",{"data-svelte-h":!0}),r(G)!=="svelte-12qvnza"&&(G.innerHTML=ye),K=o(e),c(C.$$.fragment,e),O=o(e),_=l(e,"P",{"data-svelte-h":!0}),r(_)!=="svelte-pc1ide"&&(_.textContent=Me),ee=o(e),c(k.$$.fragment,e),te=o(e),I=l(e,"P",{"data-svelte-h":!0}),r(I)!=="svelte-d6vm11"&&(I.innerHTML=Te),ae=o(e),c(H.$$.fragment,e),se=o(e),S=l(e,"P",{"data-svelte-h":!0}),r(S)!=="svelte-kmqyjo"&&(S.innerHTML=be),ne=o(e),m=l(e,"DIV",{class:!0,"data-svelte-h":!0}),r(m)!=="svelte-d7yd7v"&&(m.innerHTML=$e),oe=o(e),c(W.$$.fragment,e),ie=o(e),B=l(e,"P",{"data-svelte-h":!0}),r(B)!=="svelte-xeezyp"&&(B.innerHTML=Je),le=o(e),c(Z.$$.fragment,e),re=o(e),Q=l(e,"P",{}),je(Q).forEach(a),this.h()},h(){de(p,"name","hf:doc:metadata"),de(p,"content",Be),de(m,"class","flex justify-center")},m(e,t){He(document.head,p),s(e,R,t),s(e,L,t),s(e,Y,t),g(w,e,t),s(e,q,t),s(e,y,t),s(e,z,t),s(e,M,t),s(e,E,t),s(e,T,t),s(e,P,t),g(b,e,t),s(e,N,t),s(e,$,t),s(e,V,t),s(e,J,t),s(e,X,t),g(j,e,t),s(e,F,t),s(e,U,t),s(e,A,t),g(v,e,t),s(e,D,t),s(e,G,t),s(e,K,t),g(C,e,t),s(e,O,t),s(e,_,t),s(e,ee,t),g(k,e,t),s(e,te,t),s(e,I,t),s(e,ae,t),g(H,e,t),s(e,se,t),s(e,S,t),s(e,ne,t),s(e,m,t),s(e,oe,t),g(W,e,t),s(e,ie,t),s(e,B,t),s(e,le,t),g(Z,e,t),s(e,re,t),s(e,Q,t),pe=!0},p:Ge,i(e){pe||(h(w.$$.fragment,e),h(b.$$.fragment,e),h(j.$$.fragment,e),h(v.$$.fragment,e),h(C.$$.fragment,e),h(k.$$.fragment,e),h(H.$$.fragment,e),h(W.$$.fragment,e),h(Z.$$.fragment,e),pe=!0)},o(e){u(w.$$.fragment,e),u(b.$$.fragment,e),u(j.$$.fragment,e),u(v.$$.fragment,e),u(C.$$.fragment,e),u(k.$$.fragment,e),u(H.$$.fragment,e),u(W.$$.fragment,e),u(Z.$$.fragment,e),pe=!1},d(e){e&&(a(R),a(L),a(Y),a(q),a(y),a(z),a(M),a(E),a(T),a(P),a(N),a($),a(V),a(J),a(X),a(F),a(U),a(A),a(D),a(G),a(K),a(O),a(_),a(ee),a(te),a(I),a(ae),a(se),a(S),a(ne),a(m),a(oe),a(ie),a(B),a(le),a(re),a(Q)),a(p),f(w,e),f(b,e),f(j,e),f(v,e),f(C,e),f(k,e),f(H,e),f(W,e),f(Z,e)}}}const Be='{"title":"Gradio Spaces","local":"gradio-spaces","sections":[{"title":"Your First Gradio Space: Hot Dog Classifier","local":"your-first-gradio-space-hot-dog-classifier","sections":[],"depth":2},{"title":"Create a new Gradio Space","local":"create-a-new-gradio-space","sections":[],"depth":2},{"title":"Add the dependencies","local":"add-the-dependencies","sections":[],"depth":2},{"title":"Create the Gradio interface","local":"create-the-gradio-interface","sections":[],"depth":2},{"title":"Embed Gradio Spaces on other webpages","local":"embed-gradio-spaces-on-other-webpages","sections":[],"depth":2}],"depth":1}';function Ze(ce){return Ce(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Ye extends _e{constructor(p){super(),ke(this,p,Ze,We,ve,{})}}export{Ye as component};
