import{S as Et,i as Tt,s as qt,e as s,k as u,w as J,t as c,M as Pt,c as l,d as t,m as h,a as n,x as L,h as p,b as o,Z as et,G as a,g as i,y as M,L as At,q as N,o as R,B as C,v as It}from"../../chunks/vendor-hf-doc-builder.js";import{I as tt}from"../../chunks/IconCopyLink-hf-doc-builder.js";import{C as at}from"../../chunks/CodeBlock-hf-doc-builder.js";import{D as Ft}from"../../chunks/DocNotebookDropdown-hf-doc-builder.js";function St(ot){let w,oe,v,$,U,q,Te,W,qe,re,P,se,k,Pe,X,Ae,Ie,le,y,_,Y,A,Fe,Z,Se,ie,m,Ge,K,je,Be,Q,Je,Le,V,Me,Ne,I,Re,Ce,ne,F,ce,D,De,pe,f,rt,ue,H,ze,S,Oe,Ue,he,x,E,ee,G,We,te,Xe,me,z,Ye,fe,j,ge,g,st,de,O,Ze,be,B,we,d,lt,ve,T,Ke,ae,Qe,Ve,ye;return q=new tt({}),P=new Ft({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"}]}}),A=new tt({}),F=new at({props:{code:`import gradio as gr

title = "GPT-J-6B"
description = "Gradio Demo for GPT-J 6B, a transformer model trained using Ben Wang's Mesh Transformer JAX. 'GPT-J' refers to the class of model, while '6B' 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."
article = "<p style='text-align: center'><a href='https://github.com/kingoflolz/mesh-transformer-jax' target='_blank'>GPT-J-6B: A 6 Billion Parameter Autoregressive Language Model</a></p>"
examples = [
    ["The tower is 324 metres (1,063 ft) tall,"],
    ["The Moon's orbit around Earth has"],
    ["The smooth Borealis basin in the Northern Hemisphere covers 40%"],
]
gr.Interface.load(
    "huggingface/EleutherAI/gpt-j-6B",
    inputs=gr.Textbox(lines=5, label="Input Text"),
    title=title,
    description=description,
    article=article,
    examples=examples,
    enable_queue=True,
).launch()`,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()`}}),G=new tt({}),j=new at({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()'}}),B=new at({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=s("meta"),oe=u(),v=s("h1"),$=s("a"),U=s("span"),J(q.$$.fragment),Te=u(),W=s("span"),qe=c("Integrations with the Hugging Face Hub"),re=u(),J(P.$$.fragment),se=u(),k=s("p"),Pe=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 `),X=s("em"),Ae=c("one line of code"),Ie=c("."),le=u(),y=s("h3"),_=s("a"),Y=s("span"),J(A.$$.fragment),Fe=u(),Z=s("span"),Se=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).
`),m=s("p"),Ge=c("Using the special "),K=s("code"),je=c("Interface.load()"),Be=c(" method, you pass "),Q=s("code"),Je=c('"model/"'),Le=c(" (or, equivalently, "),V=s("code"),Me=c('"huggingface/"'),Ne=c(`)
followed by the model name.
For example, here is the code to build a demo for `),I=s("a"),Re=c("GPT-J"),Ce=c(", a large language model, add a couple of example inputs:"),ne=u(),J(F.$$.fragment),ce=u(),D=s("p"),De=c("The code above will produce the interface below:"),pe=u(),f=s("iframe"),ue=u(),H=s("p"),ze=c("Loading a model in this way uses Hugging Face\u2019s "),S=s("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.`),he=u(),x=s("h3"),E=s("a"),ee=s("span"),J(G.$$.fragment),We=u(),te=s("span"),Xe=c("Loading from Hugging Face Spaces"),me=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=s("p"),Ye=c("Remember the demo from section 1 that removes the background of an image? Let\u2019s load it from Hugging Face Spaces:"),fe=u(),J(j.$$.fragment),ge=u(),g=s("iframe"),de=u(),O=s("p"),Ze=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(),J(B.$$.fragment),we=u(),d=s("iframe"),ve=u(),T=s("p"),Ke=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 "),ae=s("code"),Qe=c("Interface"),Ve=c(" class. That\u2019s the topic of the next section!"),this.h()},l(e){const r=Pt('[data-svelte="svelte-1phssyn"]',document.head);w=l(r,"META",{name:!0,content:!0}),r.forEach(t),oe=h(e),v=l(e,"H1",{class:!0});var xe=n(v);$=l(xe,"A",{id:!0,class:!0,href:!0});var it=n($);U=l(it,"SPAN",{});var nt=n(U);L(q.$$.fragment,nt),nt.forEach(t),it.forEach(t),Te=h(xe),W=l(xe,"SPAN",{});var ct=n(W);qe=p(ct,"Integrations with the Hugging Face Hub"),ct.forEach(t),xe.forEach(t),re=h(e),L(P.$$.fragment,e),se=h(e),k=l(e,"P",{});var $e=n(k);Pe=p($e,`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 `),X=l($e,"EM",{});var pt=n(X);Ae=p(pt,"one line of code"),pt.forEach(t),Ie=p($e,"."),$e.forEach(t),le=h(e),y=l(e,"H3",{class:!0});var ke=n(y);_=l(ke,"A",{id:!0,class:!0,href:!0});var ut=n(_);Y=l(ut,"SPAN",{});var ht=n(Y);L(A.$$.fragment,ht),ht.forEach(t),ut.forEach(t),Fe=h(ke),Z=l(ke,"SPAN",{});var mt=n(Z);Se=p(mt,"Loading models from the Hugging Face Hub"),mt.forEach(t),ke.forEach(t),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).
`),m=l(e,"P",{});var b=n(m);Ge=p(b,"Using the special "),K=l(b,"CODE",{});var ft=n(K);je=p(ft,"Interface.load()"),ft.forEach(t),Be=p(b," method, you pass "),Q=l(b,"CODE",{});var gt=n(Q);Je=p(gt,'"model/"'),gt.forEach(t),Le=p(b," (or, equivalently, "),V=l(b,"CODE",{});var dt=n(V);Me=p(dt,'"huggingface/"'),dt.forEach(t),Ne=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 bt=n(I);Re=p(bt,"GPT-J"),bt.forEach(t),Ce=p(b,", a large language model, add a couple of example inputs:"),b.forEach(t),ne=h(e),L(F.$$.fragment,e),ce=h(e),D=l(e,"P",{});var wt=n(D);De=p(wt,"The code above will produce the interface below:"),wt.forEach(t),pe=h(e),f=l(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),n(f).forEach(t),ue=h(e),H=l(e,"P",{});var _e=n(H);ze=p(_e,"Loading a model in this way uses Hugging Face\u2019s "),S=l(_e,"A",{href:!0,rel:!0});var vt=n(S);Oe=p(vt,"Inference API"),vt.forEach(t),Ue=p(_e,`,
instead of loading the model in memory. This is ideal for huge models like GPT-J or T0pp which
require lots of RAM.`),_e.forEach(t),he=h(e),x=l(e,"H3",{class:!0});var He=n(x);E=l(He,"A",{id:!0,class:!0,href:!0});var yt=n(E);ee=l(yt,"SPAN",{});var xt=n(ee);L(G.$$.fragment,xt),xt.forEach(t),yt.forEach(t),We=h(He),te=l(He,"SPAN",{});var $t=n(te);Xe=p($t,"Loading from Hugging Face Spaces"),$t.forEach(t),He.forEach(t),me=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 kt=n(z);Ye=p(kt,"Remember the demo from section 1 that removes the background of an image? Let\u2019s load it from Hugging Face Spaces:"),kt.forEach(t),fe=h(e),L(j.$$.fragment,e),ge=h(e),g=l(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),n(g).forEach(t),de=h(e),O=l(e,"P",{});var _t=n(O);Ze=p(_t,`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:`),_t.forEach(t),be=h(e),L(B.$$.fragment,e),we=h(e),d=l(e,"IFRAME",{src:!0,frameborder:!0,height:!0,title:!0,class:!0,allow:!0,sandbox:!0}),n(d).forEach(t),ve=h(e),T=l(e,"P",{});var Ee=n(T);Ke=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 "),ae=l(Ee,"CODE",{});var Ht=n(ae);Qe=p(Ht,"Interface"),Ht.forEach(t),Ve=p(Ee," class. That\u2019s the topic of the next section!"),Ee.forEach(t),this.h()},h(){o(w,"name","hf:doc:metadata"),o(w,"content",JSON.stringify(Gt)),o($,"id","integrations-with-the-hugging-face-hub"),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"),o($,"href","#integrations-with-the-hugging-face-hub"),o(v,"class","relative group"),o(_,"id","loading-models-from-the-hugging-face-hub"),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"),o(_,"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"),et(f.src,rt="https://hf.space/gradioiframe/course-demos/gpt-j-6B/+")||o(f,"src",rt),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(S,"href","https://huggingface.co/inference-api"),o(S,"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(x,"class","relative group"),et(g.src,st="https://hf.space/gradioiframe/course-demos/remove-bg-original/+")||o(g,"src",st),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"),et(d.src,lt="https://hf.space/gradioiframe/course-demos/Remove-bg/+")||o(d,"src",lt),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,r){a(document.head,w),i(e,oe,r),i(e,v,r),a(v,$),a($,U),M(q,U,null),a(v,Te),a(v,W),a(W,qe),i(e,re,r),M(P,e,r),i(e,se,r),i(e,k,r),a(k,Pe),a(k,X),a(X,Ae),a(k,Ie),i(e,le,r),i(e,y,r),a(y,_),a(_,Y),M(A,Y,null),a(y,Fe),a(y,Z),a(Z,Se),i(e,ie,r),i(e,m,r),a(m,Ge),a(m,K),a(K,je),a(m,Be),a(m,Q),a(Q,Je),a(m,Le),a(m,V),a(V,Me),a(m,Ne),a(m,I),a(I,Re),a(m,Ce),i(e,ne,r),M(F,e,r),i(e,ce,r),i(e,D,r),a(D,De),i(e,pe,r),i(e,f,r),i(e,ue,r),i(e,H,r),a(H,ze),a(H,S),a(S,Oe),a(H,Ue),i(e,he,r),i(e,x,r),a(x,E),a(E,ee),M(G,ee,null),a(x,We),a(x,te),a(te,Xe),i(e,me,r),i(e,z,r),a(z,Ye),i(e,fe,r),M(j,e,r),i(e,ge,r),i(e,g,r),i(e,de,r),i(e,O,r),a(O,Ze),i(e,be,r),M(B,e,r),i(e,we,r),i(e,d,r),i(e,ve,r),i(e,T,r),a(T,Ke),a(T,ae),a(ae,Qe),a(T,Ve),ye=!0},p:At,i(e){ye||(N(q.$$.fragment,e),N(P.$$.fragment,e),N(A.$$.fragment,e),N(F.$$.fragment,e),N(G.$$.fragment,e),N(j.$$.fragment,e),N(B.$$.fragment,e),ye=!0)},o(e){R(q.$$.fragment,e),R(P.$$.fragment,e),R(A.$$.fragment,e),R(F.$$.fragment,e),R(G.$$.fragment,e),R(j.$$.fragment,e),R(B.$$.fragment,e),ye=!1},d(e){t(w),e&&t(oe),e&&t(v),C(q),e&&t(re),C(P,e),e&&t(se),e&&t(k),e&&t(le),e&&t(y),C(A),e&&t(ie),e&&t(m),e&&t(ne),C(F,e),e&&t(ce),e&&t(D),e&&t(pe),e&&t(f),e&&t(ue),e&&t(H),e&&t(he),e&&t(x),C(G),e&&t(me),e&&t(z),e&&t(fe),C(j,e),e&&t(ge),e&&t(g),e&&t(de),e&&t(O),e&&t(be),C(B,e),e&&t(we),e&&t(d),e&&t(ve),e&&t(T)}}}const Gt={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 jt(ot){return It(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Nt extends Et{constructor(w){super();Tt(this,w,jt,St,qt,{})}}export{Nt as default,Gt as metadata};
