import{S as oa,i as sa,s as ra,e as s,k as c,w as Z,t as p,N as ia,c as r,d as t,m as u,a as i,x as O,h,b as l,P as Be,G as a,g as n,y as Q,L as na,q as V,o as K,B as X,v as la}from"../chunks/vendor-hf-doc-builder.js";import{I as xe}from"../chunks/IconCopyLink-hf-doc-builder.js";import{C as aa}from"../chunks/CodeBlock-hf-doc-builder.js";function pa(Mt){let b,me,g,E,ee,k,De,te,Ye,fe,q,He,be,y,S,ae,J,ze,oe,Ze,ge,W,Oe,ye,d,Qe,se,Ve,Ke,A,Xe,et,re,tt,at,we,B,ot,ve,x,st,_e,w,D,jt,rt,Y,Ut,Ee,v,$,ie,N,it,ne,nt,Se,H,lt,$e,I,Me,M,pt,R,ht,ct,je,m,Tt,Ue,_,j,le,L,ut,pe,dt,Te,f,mt,he,ft,bt,ce,gt,yt,Ce,P,ue,Ct,ke,U,wt,de,vt,_t,Je,F,Ae,T,Et,G,St,$t,Ne;return k=new xe({}),J=new xe({}),N=new xe({}),I=new aa({props:{code:"JTNDaWZyYW1lJTBBJTIwJTIwJTIwJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkYlM0NzcGFjZS1zdWJkb21haW4lM0UuaGYuc3BhY2UlMjIlMEElMjAlMjAlMjAlMjBmcmFtZWJvcmRlciUzRCUyMjAlMjIlMEElMjAlMjAlMjAlMjB3aWR0aCUzRCUyMjg1MCUyMiUwQSUyMCUyMCUyMCUyMGhlaWdodCUzRCUyMjQ1MCUyMiUwQSUzRSUzQyUyRmlmcmFtZSUzRQ==",highlighted:`<span class="hljs-tag">&lt;<span class="hljs-name">iframe</span>
    <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://&lt;space-subdomain&gt;.hf.space&quot;</span>
    <span class="hljs-attr">frameborder</span>=<span class="hljs-string">&quot;0&quot;</span>
    <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;850&quot;</span>
    <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;450&quot;</span>
&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>`}}),L=new xe({}),F=new aa({props:{code:"JTNDZ3JhZGlvLWFwcCUyMHNyYyUzRCUyMmh0dHBzJTNBJTJGJTJGJTNDc3BhY2Utc3ViZG9tYWluJTNFLmhmLnNwYWNlJTIyJTNFJTNDJTJGZ3JhZGlvLWFwcCUzRQ==",highlighted:'<span class="hljs-tag">&lt;<span class="hljs-name">gradio-app</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://&lt;space-subdomain&gt;.hf.space&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">gradio-app</span>&gt;</span>'}}),{c(){b=s("meta"),me=c(),g=s("h1"),E=s("a"),ee=s("span"),Z(k.$$.fragment),De=c(),te=s("span"),Ye=p("Embed your Space in another website"),fe=c(),q=s("p"),He=p(`Once your Space is up and running you might wish to embed it in a website or in your blog.
Embedding or sharing your Space is a great way to allow your audience to interact with your work and demonstrations without requiring any setup on their side.
To embed a Space its visibility needs to be public.`),be=c(),y=s("h2"),S=s("a"),ae=s("span"),Z(J.$$.fragment),ze=c(),oe=s("span"),Ze=p("Direct URL"),ge=c(),W=s("p"),Oe=p("A Space is assigned a unique URL you can use to share your Space or embed it in a website."),ye=c(),d=s("p"),Qe=p("This URL is of the form: "),se=s("code"),Ve=p('"https://<space-subdomain>.hf.space"'),Ke=p(". For instance, the Space "),A=s("a"),Xe=p("NimaBoscarino/hotdog-gradio"),et=p(" has the corresponding URL of "),re=s("code"),tt=p('"https://nimaboscarino-hotdog-gradio.hf.space"'),at=p(". The subdomain is unique and only changes if you move or rename your Space."),we=c(),B=s("p"),ot=p("Your space is always served from the root of this subdomain."),ve=c(),x=s("p"),st=p("You can find the Space URL along with examples snippets of how to embed it directly from the options menu:"),_e=c(),w=s("div"),D=s("img"),rt=c(),Y=s("img"),Ee=c(),v=s("h2"),$=s("a"),ie=s("span"),Z(N.$$.fragment),it=c(),ne=s("span"),nt=p("Embedding with IFrames"),Se=c(),H=s("p"),lt=p("The default embedding method for a Space is using IFrames. Add in the HTML location where you want to embed your Space the following element:"),$e=c(),Z(I.$$.fragment),Me=c(),M=s("p"),pt=p("For instance using the "),R=s("a"),ht=p("NimaBoscarino/hotdog-gradio"),ct=p(" Space:"),je=c(),m=s("iframe"),Ue=c(),_=s("h2"),j=s("a"),le=s("span"),Z(L.$$.fragment),ut=c(),pe=s("span"),dt=p("Embedding with WebComponents"),Te=c(),f=s("p"),mt=p("If the Space you wish to embed is Gradio-based, you can use Web Components to embed your Space. WebComponents are faster than IFrames and automatically adjust to your web page so that you do not need to configure "),he=s("code"),ft=p("width"),bt=p(" or "),ce=s("code"),gt=p("height"),yt=p(` for your element.
First, you need to import the Gradio JS library that corresponds to the Gradio version in the Space by adding the following script to your HTML.`),Ce=c(),P=s("div"),ue=s("img"),ke=c(),U=s("p"),wt=p("Then, add a "),de=s("code"),vt=p("gradio-app"),_t=p(" element where you want to embed your Space."),Je=c(),Z(F.$$.fragment),Ae=c(),T=s("p"),Et=p("Check out the "),G=s("a"),St=p("Gradio documentation"),$t=p(" for more details."),this.h()},l(e){const o=ia('[data-svelte="svelte-1phssyn"]',document.head);b=r(o,"META",{name:!0,content:!0}),o.forEach(t),me=u(e),g=r(e,"H1",{class:!0});var Ie=i(g);E=r(Ie,"A",{id:!0,class:!0,href:!0});var kt=i(E);ee=r(kt,"SPAN",{});var Jt=i(ee);O(k.$$.fragment,Jt),Jt.forEach(t),kt.forEach(t),De=u(Ie),te=r(Ie,"SPAN",{});var At=i(te);Ye=h(At,"Embed your Space in another website"),At.forEach(t),Ie.forEach(t),fe=u(e),q=r(e,"P",{});var Nt=i(q);He=h(Nt,`Once your Space is up and running you might wish to embed it in a website or in your blog.
Embedding or sharing your Space is a great way to allow your audience to interact with your work and demonstrations without requiring any setup on their side.
To embed a Space its visibility needs to be public.`),Nt.forEach(t),be=u(e),y=r(e,"H2",{class:!0});var Re=i(y);S=r(Re,"A",{id:!0,class:!0,href:!0});var It=i(S);ae=r(It,"SPAN",{});var Rt=i(ae);O(J.$$.fragment,Rt),Rt.forEach(t),It.forEach(t),ze=u(Re),oe=r(Re,"SPAN",{});var Lt=i(oe);Ze=h(Lt,"Direct URL"),Lt.forEach(t),Re.forEach(t),ge=u(e),W=r(e,"P",{});var Pt=i(W);Oe=h(Pt,"A Space is assigned a unique URL you can use to share your Space or embed it in a website."),Pt.forEach(t),ye=u(e),d=r(e,"P",{});var C=i(d);Qe=h(C,"This URL is of the form: "),se=r(C,"CODE",{});var Ft=i(se);Ve=h(Ft,'"https://<space-subdomain>.hf.space"'),Ft.forEach(t),Ke=h(C,". For instance, the Space "),A=r(C,"A",{href:!0,rel:!0});var Gt=i(A);Xe=h(Gt,"NimaBoscarino/hotdog-gradio"),Gt.forEach(t),et=h(C," has the corresponding URL of "),re=r(C,"CODE",{});var qt=i(re);tt=h(qt,'"https://nimaboscarino-hotdog-gradio.hf.space"'),qt.forEach(t),at=h(C,". The subdomain is unique and only changes if you move or rename your Space."),C.forEach(t),we=u(e),B=r(e,"P",{});var Wt=i(B);ot=h(Wt,"Your space is always served from the root of this subdomain."),Wt.forEach(t),ve=u(e),x=r(e,"P",{});var Bt=i(x);st=h(Bt,"You can find the Space URL along with examples snippets of how to embed it directly from the options menu:"),Bt.forEach(t),_e=u(e),w=r(e,"DIV",{class:!0});var Le=i(w);D=r(Le,"IMG",{class:!0,src:!0}),rt=u(Le),Y=r(Le,"IMG",{class:!0,src:!0}),Le.forEach(t),Ee=u(e),v=r(e,"H2",{class:!0});var Pe=i(v);$=r(Pe,"A",{id:!0,class:!0,href:!0});var xt=i($);ie=r(xt,"SPAN",{});var Dt=i(ie);O(N.$$.fragment,Dt),Dt.forEach(t),xt.forEach(t),it=u(Pe),ne=r(Pe,"SPAN",{});var Yt=i(ne);nt=h(Yt,"Embedding with IFrames"),Yt.forEach(t),Pe.forEach(t),Se=u(e),H=r(e,"P",{});var Ht=i(H);lt=h(Ht,"The default embedding method for a Space is using IFrames. Add in the HTML location where you want to embed your Space the following element:"),Ht.forEach(t),$e=u(e),O(I.$$.fragment,e),Me=u(e),M=r(e,"P",{});var Fe=i(M);pt=h(Fe,"For instance using the "),R=r(Fe,"A",{href:!0,rel:!0});var zt=i(R);ht=h(zt,"NimaBoscarino/hotdog-gradio"),zt.forEach(t),ct=h(Fe," Space:"),Fe.forEach(t),je=u(e),m=r(e,"IFRAME",{src:!0,frameborder:!0,width:!0,height:!0}),i(m).forEach(t),Ue=u(e),_=r(e,"H2",{class:!0});var Ge=i(_);j=r(Ge,"A",{id:!0,class:!0,href:!0});var Zt=i(j);le=r(Zt,"SPAN",{});var Ot=i(le);O(L.$$.fragment,Ot),Ot.forEach(t),Zt.forEach(t),ut=u(Ge),pe=r(Ge,"SPAN",{});var Qt=i(pe);dt=h(Qt,"Embedding with WebComponents"),Qt.forEach(t),Ge.forEach(t),Te=u(e),f=r(e,"P",{});var z=i(f);mt=h(z,"If the Space you wish to embed is Gradio-based, you can use Web Components to embed your Space. WebComponents are faster than IFrames and automatically adjust to your web page so that you do not need to configure "),he=r(z,"CODE",{});var Vt=i(he);ft=h(Vt,"width"),Vt.forEach(t),bt=h(z," or "),ce=r(z,"CODE",{});var Kt=i(ce);gt=h(Kt,"height"),Kt.forEach(t),yt=h(z,` for your element.
First, you need to import the Gradio JS library that corresponds to the Gradio version in the Space by adding the following script to your HTML.`),z.forEach(t),Ce=u(e),P=r(e,"DIV",{class:!0});var Xt=i(P);ue=r(Xt,"IMG",{src:!0}),Xt.forEach(t),ke=u(e),U=r(e,"P",{});var qe=i(U);wt=h(qe,"Then, add a "),de=r(qe,"CODE",{});var ea=i(de);vt=h(ea,"gradio-app"),ea.forEach(t),_t=h(qe," element where you want to embed your Space."),qe.forEach(t),Je=u(e),O(F.$$.fragment,e),Ae=u(e),T=r(e,"P",{});var We=i(T);Et=h(We,"Check out the "),G=r(We,"A",{href:!0,rel:!0});var ta=i(G);St=h(ta,"Gradio documentation"),ta.forEach(t),$t=h(We," for more details."),We.forEach(t),this.h()},h(){l(b,"name","hf:doc:metadata"),l(b,"content",JSON.stringify(ha)),l(E,"id","embed-your-space-in-another-website"),l(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"),l(E,"href","#embed-your-space-in-another-website"),l(g,"class","relative group"),l(S,"id","direct-url"),l(S,"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"),l(S,"href","#direct-url"),l(y,"class","relative group"),l(A,"href","https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio"),l(A,"rel","nofollow"),l(D,"class","block dark:hidden"),Be(D.src,jt="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-embed-option.png")||l(D,"src",jt),l(Y,"class","hidden dark:block"),Be(Y.src,Ut="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-embed-option-dark.png")||l(Y,"src",Ut),l(w,"class","flex justify-center"),l($,"id","embedding-with-iframes"),l($,"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"),l($,"href","#embedding-with-iframes"),l(v,"class","relative group"),l(R,"href","https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio"),l(R,"rel","nofollow"),Be(m.src,Tt="https://nimaboscarino-hotdog-gradio.hf.space")||l(m,"src",Tt),l(m,"frameborder","0"),l(m,"width","850"),l(m,"height","500"),l(j,"id","embedding-with-webcomponents"),l(j,"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"),l(j,"href","#embedding-with-webcomponents"),l(_,"class","relative group"),Be(ue.src,Ct="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-embed-gradio-module.png")||l(ue,"src",Ct),l(P,"class","flex justify-center"),l(G,"href","https://gradio.app/sharing_your_app/#embedding-hosted-spaces"),l(G,"rel","nofollow")},m(e,o){a(document.head,b),n(e,me,o),n(e,g,o),a(g,E),a(E,ee),Q(k,ee,null),a(g,De),a(g,te),a(te,Ye),n(e,fe,o),n(e,q,o),a(q,He),n(e,be,o),n(e,y,o),a(y,S),a(S,ae),Q(J,ae,null),a(y,ze),a(y,oe),a(oe,Ze),n(e,ge,o),n(e,W,o),a(W,Oe),n(e,ye,o),n(e,d,o),a(d,Qe),a(d,se),a(se,Ve),a(d,Ke),a(d,A),a(A,Xe),a(d,et),a(d,re),a(re,tt),a(d,at),n(e,we,o),n(e,B,o),a(B,ot),n(e,ve,o),n(e,x,o),a(x,st),n(e,_e,o),n(e,w,o),a(w,D),a(w,rt),a(w,Y),n(e,Ee,o),n(e,v,o),a(v,$),a($,ie),Q(N,ie,null),a(v,it),a(v,ne),a(ne,nt),n(e,Se,o),n(e,H,o),a(H,lt),n(e,$e,o),Q(I,e,o),n(e,Me,o),n(e,M,o),a(M,pt),a(M,R),a(R,ht),a(M,ct),n(e,je,o),n(e,m,o),n(e,Ue,o),n(e,_,o),a(_,j),a(j,le),Q(L,le,null),a(_,ut),a(_,pe),a(pe,dt),n(e,Te,o),n(e,f,o),a(f,mt),a(f,he),a(he,ft),a(f,bt),a(f,ce),a(ce,gt),a(f,yt),n(e,Ce,o),n(e,P,o),a(P,ue),n(e,ke,o),n(e,U,o),a(U,wt),a(U,de),a(de,vt),a(U,_t),n(e,Je,o),Q(F,e,o),n(e,Ae,o),n(e,T,o),a(T,Et),a(T,G),a(G,St),a(T,$t),Ne=!0},p:na,i(e){Ne||(V(k.$$.fragment,e),V(J.$$.fragment,e),V(N.$$.fragment,e),V(I.$$.fragment,e),V(L.$$.fragment,e),V(F.$$.fragment,e),Ne=!0)},o(e){K(k.$$.fragment,e),K(J.$$.fragment,e),K(N.$$.fragment,e),K(I.$$.fragment,e),K(L.$$.fragment,e),K(F.$$.fragment,e),Ne=!1},d(e){t(b),e&&t(me),e&&t(g),X(k),e&&t(fe),e&&t(q),e&&t(be),e&&t(y),X(J),e&&t(ge),e&&t(W),e&&t(ye),e&&t(d),e&&t(we),e&&t(B),e&&t(ve),e&&t(x),e&&t(_e),e&&t(w),e&&t(Ee),e&&t(v),X(N),e&&t(Se),e&&t(H),e&&t($e),X(I,e),e&&t(Me),e&&t(M),e&&t(je),e&&t(m),e&&t(Ue),e&&t(_),X(L),e&&t(Te),e&&t(f),e&&t(Ce),e&&t(P),e&&t(ke),e&&t(U),e&&t(Je),X(F,e),e&&t(Ae),e&&t(T)}}}const ha={local:"embed-your-space-in-another-website",sections:[{local:"direct-url",title:"Direct URL"},{local:"embedding-with-iframes",title:"Embedding with IFrames"},{local:"embedding-with-webcomponents",title:"Embedding with WebComponents"}],title:"Embed your Space in another website"};function ca(Mt){return la(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class fa extends oa{constructor(b){super();sa(this,b,ca,pa,ra,{})}}export{fa as default,ha as metadata};
