import{s as je,y as Ue,n as _e,o as xe}from"../chunks/scheduler.d6170356.js";import{S as Je,i as Le,g as o,s as n,r as S,A as Se,h as l,f as a,c as i,j as pe,u as H,x as r,k as h,y as He,a as s,v as E,d as q,t as R,w as I}from"../chunks/index.fcd4cc08.js";import{C as Ce}from"../chunks/CodeBlock.db16bf50.js";import{H as re,E as Ee}from"../chunks/getInferenceSnippets.0f6acb26.js";function qe(me){let m,k,N,z,u,F,f,de=`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.`,W,g,G,b,ce="A Space is assigned a unique URL you can use to share your Space or embed it in a website.",B,w,he='This URL is of the form: <code>&quot;https://&lt;space-subdomain&gt;.hf.space&quot;</code>. For instance, the Space <a href="https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio" rel="nofollow">NimaBoscarino/hotdog-gradio</a> has the corresponding URL of <code>&quot;https://nimaboscarino-hotdog-gradio.hf.space&quot;</code>. The subdomain is unique and only changes if you move or rename your Space.',A,y,ue="Your space is always served from the root of this subdomain.",Y,$,fe="You can find the Space URL along with examples snippets of how to embed it directly from the options menu:",Z,d,ge='<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-embed-option.png"/> <img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-embed-option-dark.png"/>',D,M,Q,v,be="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:",V,T,O,C,we='For instance using the <a href="https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio" rel="nofollow">NimaBoscarino/hotdog-gradio</a> Space:',K,p,ye,X,j,ee,U,$e=`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 <code>width</code> or <code>height</code> 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.`,te,c,Me='<img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-embed-gradio-module.png"/>',ae,_,ve="Then, add a <code>gradio-app</code> element where you want to embed your Space.",se,x,ne,J,Te='Check out the <a href="https://www.gradio.app/guides/sharing-your-app#embedding-hosted-spaces" rel="nofollow">Gradio documentation</a> for more details.',ie,L,oe,P,le;return u=new re({props:{title:"Embed your Space in another website",local:"embed-your-space-in-another-website",headingTag:"h1"}}),g=new re({props:{title:"Direct URL",local:"direct-url",headingTag:"h2"}}),M=new re({props:{title:"Embedding with IFrames",local:"embedding-with-iframes",headingTag:"h2"}}),T=new Ce({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>`,wrap:!1}}),j=new re({props:{title:"Embedding with WebComponents",local:"embedding-with-webcomponents",headingTag:"h2"}}),x=new Ce({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>',wrap:!1}}),L=new Ee({props:{source:"https://github.com/huggingface/hub-docs/blob/main/docs/hub/spaces-embed.md"}}),{c(){m=o("meta"),k=n(),N=o("p"),z=n(),S(u.$$.fragment),F=n(),f=o("p"),f.textContent=de,W=n(),S(g.$$.fragment),G=n(),b=o("p"),b.textContent=ce,B=n(),w=o("p"),w.innerHTML=he,A=n(),y=o("p"),y.textContent=ue,Y=n(),$=o("p"),$.textContent=fe,Z=n(),d=o("div"),d.innerHTML=ge,D=n(),S(M.$$.fragment),Q=n(),v=o("p"),v.textContent=be,V=n(),S(T.$$.fragment),O=n(),C=o("p"),C.innerHTML=we,K=n(),p=o("iframe"),X=n(),S(j.$$.fragment),ee=n(),U=o("p"),U.innerHTML=$e,te=n(),c=o("div"),c.innerHTML=Me,ae=n(),_=o("p"),_.innerHTML=ve,se=n(),S(x.$$.fragment),ne=n(),J=o("p"),J.innerHTML=Te,ie=n(),S(L.$$.fragment),oe=n(),P=o("p"),this.h()},l(e){const t=Se("svelte-u9bgzb",document.head);m=l(t,"META",{name:!0,content:!0}),t.forEach(a),k=i(e),N=l(e,"P",{}),pe(N).forEach(a),z=i(e),H(u.$$.fragment,e),F=i(e),f=l(e,"P",{"data-svelte-h":!0}),r(f)!=="svelte-q4v8fy"&&(f.textContent=de),W=i(e),H(g.$$.fragment,e),G=i(e),b=l(e,"P",{"data-svelte-h":!0}),r(b)!=="svelte-matlhr"&&(b.textContent=ce),B=i(e),w=l(e,"P",{"data-svelte-h":!0}),r(w)!=="svelte-1a5w9hu"&&(w.innerHTML=he),A=i(e),y=l(e,"P",{"data-svelte-h":!0}),r(y)!=="svelte-ibgv73"&&(y.textContent=ue),Y=i(e),$=l(e,"P",{"data-svelte-h":!0}),r($)!=="svelte-694fn6"&&($.textContent=fe),Z=i(e),d=l(e,"DIV",{class:!0,"data-svelte-h":!0}),r(d)!=="svelte-8bvj0n"&&(d.innerHTML=ge),D=i(e),H(M.$$.fragment,e),Q=i(e),v=l(e,"P",{"data-svelte-h":!0}),r(v)!=="svelte-v1m8yz"&&(v.textContent=be),V=i(e),H(T.$$.fragment,e),O=i(e),C=l(e,"P",{"data-svelte-h":!0}),r(C)!=="svelte-1n1xt40"&&(C.innerHTML=we),K=i(e),p=l(e,"IFRAME",{src:!0,frameborder:!0,width:!0,height:!0}),pe(p).forEach(a),X=i(e),H(j.$$.fragment,e),ee=i(e),U=l(e,"P",{"data-svelte-h":!0}),r(U)!=="svelte-cbdhda"&&(U.innerHTML=$e),te=i(e),c=l(e,"DIV",{class:!0,"data-svelte-h":!0}),r(c)!=="svelte-ykrzzo"&&(c.innerHTML=Me),ae=i(e),_=l(e,"P",{"data-svelte-h":!0}),r(_)!=="svelte-191yan5"&&(_.innerHTML=ve),se=i(e),H(x.$$.fragment,e),ne=i(e),J=l(e,"P",{"data-svelte-h":!0}),r(J)!=="svelte-1w4jujy"&&(J.innerHTML=Te),ie=i(e),H(L.$$.fragment,e),oe=i(e),P=l(e,"P",{}),pe(P).forEach(a),this.h()},h(){h(m,"name","hf:doc:metadata"),h(m,"content",Re),h(d,"class","flex justify-center"),Ue(p.src,ye="https://nimaboscarino-hotdog-gradio.hf.space")||h(p,"src",ye),h(p,"frameborder","0"),h(p,"width","850"),h(p,"height","500"),h(c,"class","flex justify-center")},m(e,t){He(document.head,m),s(e,k,t),s(e,N,t),s(e,z,t),E(u,e,t),s(e,F,t),s(e,f,t),s(e,W,t),E(g,e,t),s(e,G,t),s(e,b,t),s(e,B,t),s(e,w,t),s(e,A,t),s(e,y,t),s(e,Y,t),s(e,$,t),s(e,Z,t),s(e,d,t),s(e,D,t),E(M,e,t),s(e,Q,t),s(e,v,t),s(e,V,t),E(T,e,t),s(e,O,t),s(e,C,t),s(e,K,t),s(e,p,t),s(e,X,t),E(j,e,t),s(e,ee,t),s(e,U,t),s(e,te,t),s(e,c,t),s(e,ae,t),s(e,_,t),s(e,se,t),E(x,e,t),s(e,ne,t),s(e,J,t),s(e,ie,t),E(L,e,t),s(e,oe,t),s(e,P,t),le=!0},p:_e,i(e){le||(q(u.$$.fragment,e),q(g.$$.fragment,e),q(M.$$.fragment,e),q(T.$$.fragment,e),q(j.$$.fragment,e),q(x.$$.fragment,e),q(L.$$.fragment,e),le=!0)},o(e){R(u.$$.fragment,e),R(g.$$.fragment,e),R(M.$$.fragment,e),R(T.$$.fragment,e),R(j.$$.fragment,e),R(x.$$.fragment,e),R(L.$$.fragment,e),le=!1},d(e){e&&(a(k),a(N),a(z),a(F),a(f),a(W),a(G),a(b),a(B),a(w),a(A),a(y),a(Y),a($),a(Z),a(d),a(D),a(Q),a(v),a(V),a(O),a(C),a(K),a(p),a(X),a(ee),a(U),a(te),a(c),a(ae),a(_),a(se),a(ne),a(J),a(ie),a(oe),a(P)),a(m),I(u,e),I(g,e),I(M,e),I(T,e),I(j,e),I(x,e),I(L,e)}}}const Re='{"title":"Embed your Space in another website","local":"embed-your-space-in-another-website","sections":[{"title":"Direct URL","local":"direct-url","sections":[],"depth":2},{"title":"Embedding with IFrames","local":"embedding-with-iframes","sections":[],"depth":2},{"title":"Embedding with WebComponents","local":"embedding-with-webcomponents","sections":[],"depth":2}],"depth":1}';function Ie(me){return xe(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Fe extends Je{constructor(m){super(),Le(this,m,Ie,qe,je,{})}}export{Fe as component};
