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