import{s as je,a as pe,n as ve,o as He}from"../chunks/scheduler.cc52f4b9.js";import{S as ke,i as Ze,e as n,s as o,c as g,h as Ge,a as r,d as a,b as s,f as z,g as f,j as d,k as i,l as Ce,m as l,n as h,t as y,o as b,p as M}from"../chunks/index.5b747fde.js";import{C as We,H as ue,E as Be}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.d38ac5a9.js";import{C as ge}from"../chunks/CodeBlock.665bfc37.js";import{C as Re}from"../chunks/CourseFloatingBanner.b33fcd79.js";function Ye(fe){let u,F,S,L,w,N,J,Q,T,E,U,de=`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>.`,V,x,q,$,he='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>.',X,I,ye=`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:`,P,j,A,v,be="The code above will produce the interface below:",D,m,Me,K,H,we=`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.`,O,k,ee,Z,Je="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.",te,G,Te="Remember the demo from section 1 that removes the background of an image? Let’s load it from Hugging Face Spaces:",ae,C,le,c,Ue,oe,W,xe=`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:`,se,B,ie,p,$e,ne,R,Ie="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!",re,Y,me,_,ce;return w=new We({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),J=new ue({props:{title:"Integrations with the Hugging Face Hub",local:"integrations-with-the-hugging-face-hub",headingTag:"h1"}}),T=new Re({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"}]}}),x=new ue({props:{title:"Loading models from the Hugging Face Hub",local:"loading-models-from-the-hugging-face-hub",headingTag:"h3"}}),j=new ge({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}}),k=new ue({props:{title:"Loading from Hugging Face Spaces",local:"loading-from-hugging-face-spaces",headingTag:"h3"}}),C=new ge({props:{code:"Z3IuSW50ZXJmYWNlLmxvYWQoJTIyc3BhY2VzJTJGYWJpZGxhYnMlMkZyZW1vdmUtYmclMjIpLmxhdW5jaCgp",highlighted:'gr.Interface.load(<span class="hljs-string">&quot;spaces/abidlabs/remove-bg&quot;</span>).launch()',wrap:!1}}),B=new ge({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}}),Y=new Be({props:{source:"https://github.com/huggingface/course/blob/main/chapters/en/chapter9/5.mdx"}}),{c(){u=n("meta"),F=o(),S=n("p"),L=o(),g(w.$$.fragment),N=o(),g(J.$$.fragment),Q=o(),g(T.$$.fragment),E=o(),U=n("p"),U.innerHTML=de,V=o(),g(x.$$.fragment),q=o(),$=n("p"),$.innerHTML=he,X=o(),I=n("p"),I.innerHTML=ye,P=o(),g(j.$$.fragment),A=o(),v=n("p"),v.textContent=be,D=o(),m=n("iframe"),K=o(),H=n("p"),H.innerHTML=we,O=o(),g(k.$$.fragment),ee=o(),Z=n("p"),Z.innerHTML=Je,te=o(),G=n("p"),G.textContent=Te,ae=o(),g(C.$$.fragment),le=o(),c=n("iframe"),oe=o(),W=n("p"),W.textContent=xe,se=o(),g(B.$$.fragment),ie=o(),p=n("iframe"),ne=o(),R=n("p"),R.innerHTML=Ie,re=o(),g(Y.$$.fragment),me=o(),_=n("p"),this.h()},l(e){const t=Ge("svelte-u9bgzb",document.head);u=r(t,"META",{name:!0,content:!0}),t.forEach(a),F=s(e),S=r(e,"P",{}),z(S).forEach(a),L=s(e),f(w.$$.fragment,e),N=s(e),f(J.$$.fragment,e),Q=s(e),f(T.$$.fragment,e),E=s(e),U=r(e,"P",{"data-svelte-h":!0}),d(U)!=="svelte-12pis40"&&(U.innerHTML=de),V=s(e),f(x.$$.fragment,e),q=s(e),$=r(e,"P",{"data-svelte-h":!0}),d($)!=="svelte-lxoemb"&&($.innerHTML=he),X=s(e),I=r(e,"P",{"data-svelte-h":!0}),d(I)!=="svelte-3z199z"&&(I.innerHTML=ye),P=s(e),f(j.$$.fragment,e),A=s(e),v=r(e,"P",{"data-svelte-h":!0}),d(v)!=="svelte-1fjc49g"&&(v.textContent=be),D=s(e),m=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),z(m).forEach(a),K=s(e),H=r(e,"P",{"data-svelte-h":!0}),d(H)!=="svelte-fyleft"&&(H.innerHTML=we),O=s(e),f(k.$$.fragment,e),ee=s(e),Z=r(e,"P",{"data-svelte-h":!0}),d(Z)!=="svelte-1k2bhow"&&(Z.innerHTML=Je),te=s(e),G=r(e,"P",{"data-svelte-h":!0}),d(G)!=="svelte-z16y7l"&&(G.textContent=Te),ae=s(e),f(C.$$.fragment,e),le=s(e),c=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),z(c).forEach(a),oe=s(e),W=r(e,"P",{"data-svelte-h":!0}),d(W)!=="svelte-m60st2"&&(W.textContent=xe),se=s(e),f(B.$$.fragment,e),ie=s(e),p=r(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),z(p).forEach(a),ne=s(e),R=r(e,"P",{"data-svelte-h":!0}),d(R)!=="svelte-19g2kvj"&&(R.innerHTML=Ie),re=s(e),f(Y.$$.fragment,e),me=s(e),_=r(e,"P",{}),z(_).forEach(a),this.h()},h(){i(u,"name","hf:doc:metadata"),i(u,"content",Se),pe(m.src,Me="https://course-demos-gpt-j-6B.hf.space")||i(m,"src",Me),i(m,"frameborder","0"),i(m,"height","750"),i(m,"title","Gradio app"),i(m,"class","container p-0 flex-grow space-iframe"),i(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"),i(m,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),pe(c.src,Ue="https://course-demos-remove-bg-original.hf.space")||i(c,"src",Ue),i(c,"frameborder","0"),i(c,"height","650"),i(c,"title","Gradio app"),i(c,"class","container p-0 flex-grow space-iframe"),i(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"),i(c,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),pe(p.src,$e="https://course-demos-Remove-bg.hf.space")||i(p,"src",$e),i(p,"frameborder","0"),i(p,"height","550"),i(p,"title","Gradio app"),i(p,"class","container p-0 flex-grow space-iframe"),i(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"),i(p,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,t){Ce(document.head,u),l(e,F,t),l(e,S,t),l(e,L,t),h(w,e,t),l(e,N,t),h(J,e,t),l(e,Q,t),h(T,e,t),l(e,E,t),l(e,U,t),l(e,V,t),h(x,e,t),l(e,q,t),l(e,$,t),l(e,X,t),l(e,I,t),l(e,P,t),h(j,e,t),l(e,A,t),l(e,v,t),l(e,D,t),l(e,m,t),l(e,K,t),l(e,H,t),l(e,O,t),h(k,e,t),l(e,ee,t),l(e,Z,t),l(e,te,t),l(e,G,t),l(e,ae,t),h(C,e,t),l(e,le,t),l(e,c,t),l(e,oe,t),l(e,W,t),l(e,se,t),h(B,e,t),l(e,ie,t),l(e,p,t),l(e,ne,t),l(e,R,t),l(e,re,t),h(Y,e,t),l(e,me,t),l(e,_,t),ce=!0},p:ve,i(e){ce||(y(w.$$.fragment,e),y(J.$$.fragment,e),y(T.$$.fragment,e),y(x.$$.fragment,e),y(j.$$.fragment,e),y(k.$$.fragment,e),y(C.$$.fragment,e),y(B.$$.fragment,e),y(Y.$$.fragment,e),ce=!0)},o(e){b(w.$$.fragment,e),b(J.$$.fragment,e),b(T.$$.fragment,e),b(x.$$.fragment,e),b(j.$$.fragment,e),b(k.$$.fragment,e),b(C.$$.fragment,e),b(B.$$.fragment,e),b(Y.$$.fragment,e),ce=!1},d(e){e&&(a(F),a(S),a(L),a(N),a(Q),a(E),a(U),a(V),a(q),a($),a(X),a(I),a(P),a(A),a(v),a(D),a(m),a(K),a(H),a(O),a(ee),a(Z),a(te),a(G),a(ae),a(le),a(c),a(oe),a(W),a(se),a(ie),a(p),a(ne),a(R),a(re),a(me),a(_)),a(u),M(w,e),M(J,e),M(T,e),M(x,e),M(j,e),M(k,e),M(C,e),M(B,e),M(Y,e)}}}const Se='{"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 _e(fe){return He(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Ee extends ke{constructor(u){super(),Ze(this,u,_e,Ye,je,{})}}export{Ee as component};
