import{s as Ue,f as ne,n as xe,o as Ie}from"../chunks/scheduler.37c15a92.js";import{S as je,i as ve,g as n,s,r as Z,A as He,h as r,f as a,c as i,j as S,u as $,x as g,k as o,y as ke,a as l,v as G,d as W,t as B,w as C}from"../chunks/index.2bf4358c.js";import{C as re}from"../chunks/CodeBlock.4f5fc1ad.js";import{C as Ze}from"../chunks/CourseFloatingBanner.15ba07e6.js";import{H as me}from"../chunks/Heading.8ada512a.js";function $e(ce){let u,_,R,F,d,z,f,L,h,pe=`To make your life even easier, Gradio integrates directly with Hugging Face Hub and Hugging Face Spaces.
You can load demos from the Hub and Spaces with only <em>one line of code</em>.`,N,y,Q,b,ue='To start with, choose one of the thousands of models Hugging Face offers through the Hub, as described in <a href="/course/chapter4/2">Chapter 4</a>.',V,w,ge=`Using the special <code>Interface.load()</code> method, you pass <code>&quot;model/&quot;</code> (or, equivalently, <code>&quot;huggingface/&quot;</code>)
followed by the model name.
For example, here is the code to build a demo for <a href="https://huggingface.co/EleutherAI/gpt-j-6B" rel="nofollow">GPT-J</a>, a large language model, add a couple of example inputs:`,E,M,q,J,de="The code above will produce the interface below:",X,m,fe,A,T,he=`Loading a model in this way uses Hugging Face’s <a href="https://huggingface.co/inference-api" rel="nofollow">Inference API</a>,
instead of loading the model in memory. This is ideal for huge models like GPT-J or T0pp which
require lots of RAM.`,P,U,D,x,ye="To load any Space from the Hugging Face Hub and recreate it locally, you can pass <code>spaces/</code> to the <code>Interface</code>, followed by the name of the Space.",K,I,be="Remember the demo from section 1 that removes the background of an image? Let’s load it from Hugging Face Spaces:",O,j,ee,c,we,te,v,Me=`One of the cool things about loading demos from the Hub or Spaces is that you customize them
by overriding any of the
parameters. Here, we add a title and get it to work with a webcam instead:`,ae,H,le,p,Je,oe,k,Te="Now that we’ve explored a few ways to integrate Gradio with the Hugging Face Hub, let’s take a look at some advanced features of the <code>Interface</code> class. That’s the topic of the next section!",se,Y,ie;return d=new me({props:{title:"Integrations with the Hugging Face Hub",local:"integrations-with-the-hugging-face-hub",headingTag:"h1"}}),f=new Ze({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/section5.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/en/chapter9/section5.ipynb"}]}}),y=new me({props:{title:"Loading models from the Hugging Face Hub",local:"loading-models-from-the-hugging-face-hub",headingTag:"h3"}}),M=new re({props:{code:"aW1wb3J0JTIwZ3JhZGlvJTIwYXMlMjBnciUwQSUwQXRpdGxlJTIwJTNEJTIwJTIyR1BULUotNkIlMjIlMEFkZXNjcmlwdGlvbiUyMCUzRCUyMCUyMkdyYWRpbyUyMERlbW8lMjBmb3IlMjBHUFQtSiUyMDZCJTJDJTIwYSUyMHRyYW5zZm9ybWVyJTIwbW9kZWwlMjB0cmFpbmVkJTIwdXNpbmclMjBCZW4lMjBXYW5nJ3MlMjBNZXNoJTIwVHJhbnNmb3JtZXIlMjBKQVguJTIwJ0dQVC1KJyUyMHJlZmVycyUyMHRvJTIwdGhlJTIwY2xhc3MlMjBvZiUyMG1vZGVsJTJDJTIwd2hpbGUlMjAnNkInJTIwcmVwcmVzZW50cyUyMHRoZSUyMG51bWJlciUyMG9mJTIwdHJhaW5hYmxlJTIwcGFyYW1ldGVycy4lMjBUbyUyMHVzZSUyMGl0JTJDJTIwc2ltcGx5JTIwYWRkJTIweW91ciUyMHRleHQlMkMlMjBvciUyMGNsaWNrJTIwb25lJTIwb2YlMjB0aGUlMjBleGFtcGxlcyUyMHRvJTIwbG9hZCUyMHRoZW0uJTIwUmVhZCUyMG1vcmUlMjBhdCUyMHRoZSUyMGxpbmtzJTIwYmVsb3cuJTIyJTBBYXJ0aWNsZSUyMCUzRCUyMCUyMiUzQ3AlMjBzdHlsZSUzRCd0ZXh0LWFsaWduJTNBJTIwY2VudGVyJyUzRSUzQ2ElMjBocmVmJTNEJ2h0dHBzJTNBJTJGJTJGZ2l0aHViLmNvbSUyRmtpbmdvZmxvbHolMkZtZXNoLXRyYW5zZm9ybWVyLWpheCclMjB0YXJnZXQlM0QnX2JsYW5rJyUzRUdQVC1KLTZCJTNBJTIwQSUyMDYlMjBCaWxsaW9uJTIwUGFyYW1ldGVyJTIwQXV0b3JlZ3Jlc3NpdmUlMjBMYW5ndWFnZSUyME1vZGVsJTNDJTJGYSUzRSUzQyUyRnAlM0UlMjIlMEElMEFnci5JbnRlcmZhY2UubG9hZCglMEElMjAlMjAlMjAlMjAlMjJodWdnaW5nZmFjZSUyRkVsZXV0aGVyQUklMkZncHQtai02QiUyMiUyQyUwQSUyMCUyMCUyMCUyMGlucHV0cyUzRGdyLlRleHRib3gobGluZXMlM0Q1JTJDJTIwbGFiZWwlM0QlMjJJbnB1dCUyMFRleHQlMjIpJTJDJTBBJTIwJTIwJTIwJTIwdGl0bGUlM0R0aXRsZSUyQyUwQSUyMCUyMCUyMCUyMGRlc2NyaXB0aW9uJTNEZGVzY3JpcHRpb24lMkMlMEElMjAlMjAlMjAlMjBhcnRpY2xlJTNEYXJ0aWNsZSUyQyUwQSkubGF1bmNoKCk=",highlighted:`<span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr

title = <span class="hljs-string">&quot;GPT-J-6B&quot;</span>
description = <span class="hljs-string">&quot;Gradio Demo for GPT-J 6B, a transformer model trained using Ben Wang&#x27;s Mesh Transformer JAX. &#x27;GPT-J&#x27; refers to the class of model, while &#x27;6B&#x27; represents the number of trainable parameters. To use it, simply add your text, or click one of the examples to load them. Read more at the links below.&quot;</span>
article = <span class="hljs-string">&quot;&lt;p style=&#x27;text-align: center&#x27;&gt;&lt;a href=&#x27;https://github.com/kingoflolz/mesh-transformer-jax&#x27; target=&#x27;_blank&#x27;&gt;GPT-J-6B: A 6 Billion Parameter Autoregressive Language Model&lt;/a&gt;&lt;/p&gt;&quot;</span>

gr.Interface.load(
    <span class="hljs-string">&quot;huggingface/EleutherAI/gpt-j-6B&quot;</span>,
    inputs=gr.Textbox(lines=<span class="hljs-number">5</span>, label=<span class="hljs-string">&quot;Input Text&quot;</span>),
    title=title,
    description=description,
    article=article,
).launch()`,wrap:!1}}),U=new me({props:{title:"Loading from Hugging Face Spaces",local:"loading-from-hugging-face-spaces",headingTag:"h3"}}),j=new re({props:{code:"Z3IuSW50ZXJmYWNlLmxvYWQoJTIyc3BhY2VzJTJGYWJpZGxhYnMlMkZyZW1vdmUtYmclMjIpLmxhdW5jaCgp",highlighted:'gr.Interface.load(<span class="hljs-string">&quot;spaces/abidlabs/remove-bg&quot;</span>).launch()',wrap:!1}}),H=new re({props:{code:"Z3IuSW50ZXJmYWNlLmxvYWQoJTBBJTIwJTIwJTIwJTIwJTIyc3BhY2VzJTJGYWJpZGxhYnMlMkZyZW1vdmUtYmclMjIlMkMlMjBpbnB1dHMlM0QlMjJ3ZWJjYW0lMjIlMkMlMjB0aXRsZSUzRCUyMlJlbW92ZSUyMHlvdXIlMjB3ZWJjYW0lMjBiYWNrZ3JvdW5kISUyMiUwQSkubGF1bmNoKCk=",highlighted:`gr.Interface.load(
    <span class="hljs-string">&quot;spaces/abidlabs/remove-bg&quot;</span>, inputs=<span class="hljs-string">&quot;webcam&quot;</span>, title=<span class="hljs-string">&quot;Remove your webcam background!&quot;</span>
).launch()`,wrap:!1}}),{c(){u=n("meta"),_=s(),R=n("p"),F=s(),Z(d.$$.fragment),z=s(),Z(f.$$.fragment),L=s(),h=n("p"),h.innerHTML=pe,N=s(),Z(y.$$.fragment),Q=s(),b=n("p"),b.innerHTML=ue,V=s(),w=n("p"),w.innerHTML=ge,E=s(),Z(M.$$.fragment),q=s(),J=n("p"),J.textContent=de,X=s(),m=n("iframe"),A=s(),T=n("p"),T.innerHTML=he,P=s(),Z(U.$$.fragment),D=s(),x=n("p"),x.innerHTML=ye,K=s(),I=n("p"),I.textContent=be,O=s(),Z(j.$$.fragment),ee=s(),c=n("iframe"),te=s(),v=n("p"),v.textContent=Me,ae=s(),Z(H.$$.fragment),le=s(),p=n("iframe"),oe=s(),k=n("p"),k.innerHTML=Te,se=s(),Y=n("p"),this.h()},l(e){const t=He("svelte-u9bgzb",document.head);u=r(t,"META",{name:!0,content:!0}),t.forEach(a),_=i(e),R=r(e,"P",{}),S(R).forEach(a),F=i(e),$(d.$$.fragment,e),z=i(e),$(f.$$.fragment,e),L=i(e),h=r(e,"P",{"data-svelte-h":!0}),g(h)!=="svelte-12pis40"&&(h.innerHTML=pe),N=i(e),$(y.$$.fragment,e),Q=i(e),b=r(e,"P",{"data-svelte-h":!0}),g(b)!=="svelte-lxoemb"&&(b.innerHTML=ue),V=i(e),w=r(e,"P",{"data-svelte-h":!0}),g(w)!=="svelte-3z199z"&&(w.innerHTML=ge),E=i(e),$(M.$$.fragment,e),q=i(e),J=r(e,"P",{"data-svelte-h":!0}),g(J)!=="svelte-1fjc49g"&&(J.textContent=de),X=i(e),m=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),S(m).forEach(a),A=i(e),T=r(e,"P",{"data-svelte-h":!0}),g(T)!=="svelte-fyleft"&&(T.innerHTML=he),P=i(e),$(U.$$.fragment,e),D=i(e),x=r(e,"P",{"data-svelte-h":!0}),g(x)!=="svelte-1k2bhow"&&(x.innerHTML=ye),K=i(e),I=r(e,"P",{"data-svelte-h":!0}),g(I)!=="svelte-z16y7l"&&(I.textContent=be),O=i(e),$(j.$$.fragment,e),ee=i(e),c=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),S(c).forEach(a),te=i(e),v=r(e,"P",{"data-svelte-h":!0}),g(v)!=="svelte-m60st2"&&(v.textContent=Me),ae=i(e),$(H.$$.fragment,e),le=i(e),p=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),S(p).forEach(a),oe=i(e),k=r(e,"P",{"data-svelte-h":!0}),g(k)!=="svelte-19g2kvj"&&(k.innerHTML=Te),se=i(e),Y=r(e,"P",{}),S(Y).forEach(a),this.h()},h(){o(u,"name","hf:doc:metadata"),o(u,"content",Ge),ne(m.src,fe="https://course-demos-gpt-j-6B.hf.space")||o(m,"src",fe),o(m,"frameborder","0"),o(m,"height","750"),o(m,"title","Gradio app"),o(m,"class","container p-0 flex-grow space-iframe"),o(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"),o(m,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),ne(c.src,we="https://course-demos-remove-bg-original.hf.space")||o(c,"src",we),o(c,"frameborder","0"),o(c,"height","650"),o(c,"title","Gradio app"),o(c,"class","container p-0 flex-grow space-iframe"),o(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"),o(c,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),ne(p.src,Je="https://course-demos-Remove-bg.hf.space")||o(p,"src",Je),o(p,"frameborder","0"),o(p,"height","550"),o(p,"title","Gradio app"),o(p,"class","container p-0 flex-grow space-iframe"),o(p,"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"),o(p,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,t){ke(document.head,u),l(e,_,t),l(e,R,t),l(e,F,t),G(d,e,t),l(e,z,t),G(f,e,t),l(e,L,t),l(e,h,t),l(e,N,t),G(y,e,t),l(e,Q,t),l(e,b,t),l(e,V,t),l(e,w,t),l(e,E,t),G(M,e,t),l(e,q,t),l(e,J,t),l(e,X,t),l(e,m,t),l(e,A,t),l(e,T,t),l(e,P,t),G(U,e,t),l(e,D,t),l(e,x,t),l(e,K,t),l(e,I,t),l(e,O,t),G(j,e,t),l(e,ee,t),l(e,c,t),l(e,te,t),l(e,v,t),l(e,ae,t),G(H,e,t),l(e,le,t),l(e,p,t),l(e,oe,t),l(e,k,t),l(e,se,t),l(e,Y,t),ie=!0},p:xe,i(e){ie||(W(d.$$.fragment,e),W(f.$$.fragment,e),W(y.$$.fragment,e),W(M.$$.fragment,e),W(U.$$.fragment,e),W(j.$$.fragment,e),W(H.$$.fragment,e),ie=!0)},o(e){B(d.$$.fragment,e),B(f.$$.fragment,e),B(y.$$.fragment,e),B(M.$$.fragment,e),B(U.$$.fragment,e),B(j.$$.fragment,e),B(H.$$.fragment,e),ie=!1},d(e){e&&(a(_),a(R),a(F),a(z),a(L),a(h),a(N),a(Q),a(b),a(V),a(w),a(E),a(q),a(J),a(X),a(m),a(A),a(T),a(P),a(D),a(x),a(K),a(I),a(O),a(ee),a(c),a(te),a(v),a(ae),a(le),a(p),a(oe),a(k),a(se),a(Y)),a(u),C(d,e),C(f,e),C(y,e),C(M,e),C(U,e),C(j,e),C(H,e)}}}const Ge='{"title":"Integrations with the Hugging Face Hub","local":"integrations-with-the-hugging-face-hub","sections":[{"title":"Loading models from the Hugging Face Hub","local":"loading-models-from-the-hugging-face-hub","sections":[],"depth":3},{"title":"Loading from Hugging Face Spaces","local":"loading-from-hugging-face-spaces","sections":[],"depth":3}],"depth":1}';function We(ce){return Ie(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class _e extends je{constructor(u){super(),ve(this,u,We,$e,Ue,{})}}export{_e as component};
