import{S as Ea,i as qa,s as Ta,e as r,k as u,w as N,t as c,M as Fa,c as l,d as a,m,a as n,x as B,h as p,b as o,N as ea,G as t,g as i,y as M,L as Pa,q as R,o as C,B as J,v as Ia}from"../../chunks/vendor-hf-doc-builder.js";import{I as aa}from"../../chunks/IconCopyLink-hf-doc-builder.js";import{C as ta}from"../../chunks/CodeBlock-hf-doc-builder.js";import{D as Sa}from"../../chunks/DocNotebookDropdown-hf-doc-builder.js";function Aa(oa){let w,oe,v,x,U,T,qe,Y,Te,se,F,re,_,Fe,W,Pe,Ie,le,y,k,X,P,Se,K,Ae,ie,h,je,Q,Ge,Le,V,Ne,Be,Z,Me,Re,I,Ce,Je,ne,S,ce,D,De,pe,f,sa,ue,H,ze,A,Oe,Ue,me,$,E,ee,j,Ye,ae,We,he,z,Xe,fe,G,ge,g,ra,de,O,Ke,be,L,we,d,la,ve,q,Qe,te,Ve,Ze,ye;return T=new aa({}),F=new Sa({props:{classNames:"absolute z-10 right-0 top-0",options:[{label:"Google Colab",value:"https://colab.research.google.com/github/huggingface/notebooks/blob/master/course/chapter9/section5.ipynb"},{label:"Aws Studio",value:"https://studiolab.sagemaker.aws/import/github/huggingface/notebooks/blob/master/course/chapter9/section5.ipynb"}]}}),P=new aa({}),S=new ta({props:{code:"",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>
examples = [
    [<span class="hljs-string">&quot;The tower is 324 metres (1,063 ft) tall,&quot;</span>],
    [<span class="hljs-string">&quot;The Moon&#x27;s orbit around Earth has&quot;</span>],
    [<span class="hljs-string">&quot;The smooth Borealis basin in the Northern Hemisphere covers 40%&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,
    examples=examples,
    enable_queue=<span class="hljs-literal">True</span>,
).launch()`}}),j=new aa({}),G=new ta({props:{code:'gr.Interface.load("spaces/abidlabs/remove-bg").launch()',highlighted:'gr.Interface.load(<span class="hljs-string">&quot;spaces/abidlabs/remove-bg&quot;</span>).launch()'}}),L=new ta({props:{code:`gr.Interface.load(
    "spaces/abidlabs/remove-bg", inputs="webcam", title="Remove your webcam background!"
).launch()`,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()`}}),{c(){w=r("meta"),oe=u(),v=r("h1"),x=r("a"),U=r("span"),N(T.$$.fragment),qe=u(),Y=r("span"),Te=c("Integrations with the Hugging Face Hub"),se=u(),N(F.$$.fragment),re=u(),_=r("p"),Fe=c(`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 `),W=r("em"),Pe=c("one line of code"),Ie=c("."),le=u(),y=r("h3"),k=r("a"),X=r("span"),N(P.$$.fragment),Se=u(),K=r("span"),Ae=c("Loading models from the Hugging Face Hub"),ie=c(`

To start with, choose one of the thousands of models Hugging Face offers through the Hub, as described in [Chapter 4](/course/chapter4/2).
`),h=r("p"),je=c("Using the special "),Q=r("code"),Ge=c("Interface.load()"),Le=c(" method, you pass "),V=r("code"),Ne=c('"model/"'),Be=c(" (or, equivalently, "),Z=r("code"),Me=c('"huggingface/"'),Re=c(`)
followed by the model name.
For example, here is the code to build a demo for `),I=r("a"),Ce=c("GPT-J"),Je=c(", a large language model, add a couple of example inputs:"),ne=u(),N(S.$$.fragment),ce=u(),D=r("p"),De=c("The code above will produce the interface below:"),pe=u(),f=r("iframe"),ue=u(),H=r("p"),ze=c("Loading a model in this way uses Hugging Face\u2019s "),A=r("a"),Oe=c("Inference API"),Ue=c(`,
instead of loading the model in memory. This is ideal for huge models like GPT-J or T0pp which
require lots of RAM.`),me=u(),$=r("h3"),E=r("a"),ee=r("span"),N(j.$$.fragment),Ye=u(),ae=r("span"),We=c("Loading from Hugging Face Spaces"),he=c("\n\nTo load any Space from the Hugging Face Hub and recreate it locally, you can pass `spaces/` to the `Interface`, followed by the name of the Space.\n"),z=r("p"),Xe=c("Remember the demo from section 1 that removes the background of an image? Let\u2019s load it from Hugging Face Spaces:"),fe=u(),N(G.$$.fragment),ge=u(),g=r("iframe"),de=u(),O=r("p"),Ke=c(`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:`),be=u(),N(L.$$.fragment),we=u(),d=r("iframe"),ve=u(),q=r("p"),Qe=c("Now that we\u2019ve explored a few ways to integrate Gradio with the Hugging Face Hub, let\u2019s take a look at some advanced features of the "),te=r("code"),Ve=c("Interface"),Ze=c(" class. That\u2019s the topic of the next section!"),this.h()},l(e){const s=Fa('[data-svelte="svelte-1phssyn"]',document.head);w=l(s,"META",{name:!0,content:!0}),s.forEach(a),oe=m(e),v=l(e,"H1",{class:!0});var $e=n(v);x=l($e,"A",{id:!0,class:!0,href:!0});var ia=n(x);U=l(ia,"SPAN",{});var na=n(U);B(T.$$.fragment,na),na.forEach(a),ia.forEach(a),qe=m($e),Y=l($e,"SPAN",{});var ca=n(Y);Te=p(ca,"Integrations with the Hugging Face Hub"),ca.forEach(a),$e.forEach(a),se=m(e),B(F.$$.fragment,e),re=m(e),_=l(e,"P",{});var xe=n(_);Fe=p(xe,`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 `),W=l(xe,"EM",{});var pa=n(W);Pe=p(pa,"one line of code"),pa.forEach(a),Ie=p(xe,"."),xe.forEach(a),le=m(e),y=l(e,"H3",{class:!0});var _e=n(y);k=l(_e,"A",{id:!0,class:!0,href:!0});var ua=n(k);X=l(ua,"SPAN",{});var ma=n(X);B(P.$$.fragment,ma),ma.forEach(a),ua.forEach(a),Se=m(_e),K=l(_e,"SPAN",{});var ha=n(K);Ae=p(ha,"Loading models from the Hugging Face Hub"),ha.forEach(a),_e.forEach(a),ie=p(e,`

To start with, choose one of the thousands of models Hugging Face offers through the Hub, as described in [Chapter 4](/course/chapter4/2).
`),h=l(e,"P",{});var b=n(h);je=p(b,"Using the special "),Q=l(b,"CODE",{});var fa=n(Q);Ge=p(fa,"Interface.load()"),fa.forEach(a),Le=p(b," method, you pass "),V=l(b,"CODE",{});var ga=n(V);Ne=p(ga,'"model/"'),ga.forEach(a),Be=p(b," (or, equivalently, "),Z=l(b,"CODE",{});var da=n(Z);Me=p(da,'"huggingface/"'),da.forEach(a),Re=p(b,`)
followed by the model name.
For example, here is the code to build a demo for `),I=l(b,"A",{href:!0,rel:!0});var ba=n(I);Ce=p(ba,"GPT-J"),ba.forEach(a),Je=p(b,", a large language model, add a couple of example inputs:"),b.forEach(a),ne=m(e),B(S.$$.fragment,e),ce=m(e),D=l(e,"P",{});var wa=n(D);De=p(wa,"The code above will produce the interface below:"),wa.forEach(a),pe=m(e),f=l(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),n(f).forEach(a),ue=m(e),H=l(e,"P",{});var ke=n(H);ze=p(ke,"Loading a model in this way uses Hugging Face\u2019s "),A=l(ke,"A",{href:!0,rel:!0});var va=n(A);Oe=p(va,"Inference API"),va.forEach(a),Ue=p(ke,`,
instead of loading the model in memory. This is ideal for huge models like GPT-J or T0pp which
require lots of RAM.`),ke.forEach(a),me=m(e),$=l(e,"H3",{class:!0});var He=n($);E=l(He,"A",{id:!0,class:!0,href:!0});var ya=n(E);ee=l(ya,"SPAN",{});var $a=n(ee);B(j.$$.fragment,$a),$a.forEach(a),ya.forEach(a),Ye=m(He),ae=l(He,"SPAN",{});var xa=n(ae);We=p(xa,"Loading from Hugging Face Spaces"),xa.forEach(a),He.forEach(a),he=p(e,"\n\nTo load any Space from the Hugging Face Hub and recreate it locally, you can pass `spaces/` to the `Interface`, followed by the name of the Space.\n"),z=l(e,"P",{});var _a=n(z);Xe=p(_a,"Remember the demo from section 1 that removes the background of an image? Let\u2019s load it from Hugging Face Spaces:"),_a.forEach(a),fe=m(e),B(G.$$.fragment,e),ge=m(e),g=l(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),n(g).forEach(a),de=m(e),O=l(e,"P",{});var ka=n(O);Ke=p(ka,`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:`),ka.forEach(a),be=m(e),B(L.$$.fragment,e),we=m(e),d=l(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),n(d).forEach(a),ve=m(e),q=l(e,"P",{});var Ee=n(q);Qe=p(Ee,"Now that we\u2019ve explored a few ways to integrate Gradio with the Hugging Face Hub, let\u2019s take a look at some advanced features of the "),te=l(Ee,"CODE",{});var Ha=n(te);Ve=p(Ha,"Interface"),Ha.forEach(a),Ze=p(Ee," class. That\u2019s the topic of the next section!"),Ee.forEach(a),this.h()},h(){o(w,"name","hf:doc:metadata"),o(w,"content",JSON.stringify(ja)),o(x,"id","integrations-with-the-hugging-face-hub"),o(x,"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"),o(x,"href","#integrations-with-the-hugging-face-hub"),o(v,"class","relative group"),o(k,"id","loading-models-from-the-hugging-face-hub"),o(k,"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"),o(k,"href","#loading-models-from-the-hugging-face-hub"),o(y,"class","relative group"),o(I,"href","https://huggingface.co/EleutherAI/gpt-j-6B"),o(I,"rel","nofollow"),ea(f.src,sa="https://hf.space/gradioiframe/course-demos/gpt-j-6B/+")||o(f,"src",sa),o(f,"frameborder","0"),o(f,"height","750"),o(f,"title","Gradio app"),o(f,"class","container p-0 flex-grow space-iframe"),o(f,"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(f,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),o(A,"href","https://huggingface.co/inference-api"),o(A,"rel","nofollow"),o(E,"id","loading-from-hugging-face-spaces"),o(E,"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"),o(E,"href","#loading-from-hugging-face-spaces"),o($,"class","relative group"),ea(g.src,ra="https://hf.space/gradioiframe/course-demos/remove-bg-original/+")||o(g,"src",ra),o(g,"frameborder","0"),o(g,"height","650"),o(g,"title","Gradio app"),o(g,"class","container p-0 flex-grow space-iframe"),o(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"),o(g,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads"),ea(d.src,la="https://hf.space/gradioiframe/course-demos/Remove-bg/+")||o(d,"src",la),o(d,"frameborder","0"),o(d,"height","550"),o(d,"title","Gradio app"),o(d,"class","container p-0 flex-grow space-iframe"),o(d,"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(d,"sandbox","allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-downloads")},m(e,s){t(document.head,w),i(e,oe,s),i(e,v,s),t(v,x),t(x,U),M(T,U,null),t(v,qe),t(v,Y),t(Y,Te),i(e,se,s),M(F,e,s),i(e,re,s),i(e,_,s),t(_,Fe),t(_,W),t(W,Pe),t(_,Ie),i(e,le,s),i(e,y,s),t(y,k),t(k,X),M(P,X,null),t(y,Se),t(y,K),t(K,Ae),i(e,ie,s),i(e,h,s),t(h,je),t(h,Q),t(Q,Ge),t(h,Le),t(h,V),t(V,Ne),t(h,Be),t(h,Z),t(Z,Me),t(h,Re),t(h,I),t(I,Ce),t(h,Je),i(e,ne,s),M(S,e,s),i(e,ce,s),i(e,D,s),t(D,De),i(e,pe,s),i(e,f,s),i(e,ue,s),i(e,H,s),t(H,ze),t(H,A),t(A,Oe),t(H,Ue),i(e,me,s),i(e,$,s),t($,E),t(E,ee),M(j,ee,null),t($,Ye),t($,ae),t(ae,We),i(e,he,s),i(e,z,s),t(z,Xe),i(e,fe,s),M(G,e,s),i(e,ge,s),i(e,g,s),i(e,de,s),i(e,O,s),t(O,Ke),i(e,be,s),M(L,e,s),i(e,we,s),i(e,d,s),i(e,ve,s),i(e,q,s),t(q,Qe),t(q,te),t(te,Ve),t(q,Ze),ye=!0},p:Pa,i(e){ye||(R(T.$$.fragment,e),R(F.$$.fragment,e),R(P.$$.fragment,e),R(S.$$.fragment,e),R(j.$$.fragment,e),R(G.$$.fragment,e),R(L.$$.fragment,e),ye=!0)},o(e){C(T.$$.fragment,e),C(F.$$.fragment,e),C(P.$$.fragment,e),C(S.$$.fragment,e),C(j.$$.fragment,e),C(G.$$.fragment,e),C(L.$$.fragment,e),ye=!1},d(e){a(w),e&&a(oe),e&&a(v),J(T),e&&a(se),J(F,e),e&&a(re),e&&a(_),e&&a(le),e&&a(y),J(P),e&&a(ie),e&&a(h),e&&a(ne),J(S,e),e&&a(ce),e&&a(D),e&&a(pe),e&&a(f),e&&a(ue),e&&a(H),e&&a(me),e&&a($),J(j),e&&a(he),e&&a(z),e&&a(fe),J(G,e),e&&a(ge),e&&a(g),e&&a(de),e&&a(O),e&&a(be),J(L,e),e&&a(we),e&&a(d),e&&a(ve),e&&a(q)}}}const ja={local:"integrations-with-the-hugging-face-hub",sections:[{local:"loading-models-from-the-hugging-face-hub",title:"Loading models from the Hugging Face Hub"},{local:"loading-from-hugging-face-spaces",title:"Loading from Hugging Face Spaces"}],title:"Integrations with the Hugging Face Hub"};function Ga(oa){return Ia(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Ra extends Ea{constructor(w){super();qa(this,w,Ga,Aa,Ta,{})}}export{Ra as default,ja as metadata};
