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