import{s as K,n as ee,o as te}from"../chunks/scheduler.9cda857a.js";import{S as ae,i as se,e as l,s as n,c as E,h as ne,a as i,d as a,b as p,f as V,g as z,j as $,k as O,l as pe,m as s,n as I,t as B,o as Q,p as N}from"../chunks/index.003612b0.js";import{C as le}from"../chunks/CopyLLMTxtMenu.44d08a39.js";import{C as ie}from"../chunks/CodeBlock.a90632f1.js";import{H as oe,E as re}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.e5cfda8c.js";function ce(A){let o,U,T,x,r,_,c,v,h,Y="You can use URL query parameters as a data sharing mechanism, for instance to be able to deep-link into an app with a specific state.",C,m,Z="On a Space page (<code>https://huggingface.co/spaces/&lt;user&gt;/&lt;app&gt;</code>), the actual application page (<code>https://*.hf.space/</code>) is embedded in an iframe. The query string and the hash attached to the parent page URL are propagated to the embedded app on initial load, so the embedded app can read these values without special consideration.",L,d,D=`In contrast, updating the query string and the hash of the parent page URL from the embedded app is slightly more complex.
If you want to do this in a Docker or static Space, you need to add the following JS code that sends a message to the parent page that has a <code>queryString</code> and/or <code>hash</code> key.`,S,u,J,f,G="<strong>This is only for Docker or static Spaces.</strong>",j,g,W="For Streamlit apps, Spaces automatically syncs the URL parameters. Gradio apps can read the query parameters from the Spaces page, but do not sync updated URL parameters with the parent page.",H,y,X="Note that the URL parameters of the parent page are propagated to the embedded app <em>only</em> on the initial load. So <code>location.hash</code> in the embedded app will not change even if the parent URL hash is updated using this method.",q,M,F=`An example of this method can be found in this static Space,
<a href="https://huggingface.co/spaces/whitphx/static-url-param-sync-example" rel="nofollow"><code>whitphx/static-url-param-sync-example</code></a>.`,R,w,k,b,P;return r=new le({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),c=new oe({props:{title:"How to handle URL parameters in Spaces",local:"how-to-handle-url-parameters-in-spaces",headingTag:"h1"}}),u=new ie({props:{code:"Y29uc3QlMjBxdWVyeVN0cmluZyUyMCUzRCUyMCUyMi4uLiUyMiUzQiUwQWNvbnN0JTIwaGFzaCUyMCUzRCUyMCUyMi4uLiUyMiUzQiUwQSUwQXdpbmRvdy5wYXJlbnQucG9zdE1lc3NhZ2UoJTdCJTBBJTIwJTIwJTIwJTIwcXVlcnlTdHJpbmclMkMlMEElMjAlMjAlMjAlMjBoYXNoJTJDJTBBJTdEJTJDJTIwJTIyaHR0cHMlM0ElMkYlMkZodWdnaW5nZmFjZS5jbyUyMiklM0I=",highlighted:`<span class="hljs-keyword">const</span> queryString = <span class="hljs-string">&quot;...&quot;</span>;
<span class="hljs-keyword">const</span> hash = <span class="hljs-string">&quot;...&quot;</span>;

<span class="hljs-variable language_">window</span>.<span class="hljs-property">parent</span>.<span class="hljs-title function_">postMessage</span>({
    queryString,
    hash,
}, <span class="hljs-string">&quot;https://huggingface.co&quot;</span>);`,wrap:!1}}),w=new re({props:{source:"https://github.com/huggingface/hub-docs/blob/main/docs/hub/spaces-handle-url-parameters.md"}}),{c(){o=l("meta"),U=n(),T=l("p"),x=n(),E(r.$$.fragment),_=n(),E(c.$$.fragment),v=n(),h=l("p"),h.textContent=Y,C=n(),m=l("p"),m.innerHTML=Z,L=n(),d=l("p"),d.innerHTML=D,S=n(),E(u.$$.fragment),J=n(),f=l("p"),f.innerHTML=G,j=n(),g=l("p"),g.textContent=W,H=n(),y=l("p"),y.innerHTML=X,q=n(),M=l("p"),M.innerHTML=F,R=n(),E(w.$$.fragment),k=n(),b=l("p"),this.h()},l(e){const t=ne("svelte-u9bgzb",document.head);o=i(t,"META",{name:!0,content:!0}),t.forEach(a),U=p(e),T=i(e,"P",{}),V(T).forEach(a),x=p(e),z(r.$$.fragment,e),_=p(e),z(c.$$.fragment,e),v=p(e),h=i(e,"P",{"data-svelte-h":!0}),$(h)!=="svelte-13bdlzr"&&(h.textContent=Y),C=p(e),m=i(e,"P",{"data-svelte-h":!0}),$(m)!=="svelte-12t98gf"&&(m.innerHTML=Z),L=p(e),d=i(e,"P",{"data-svelte-h":!0}),$(d)!=="svelte-ngy7gm"&&(d.innerHTML=D),S=p(e),z(u.$$.fragment,e),J=p(e),f=i(e,"P",{"data-svelte-h":!0}),$(f)!=="svelte-1pi7s18"&&(f.innerHTML=G),j=p(e),g=i(e,"P",{"data-svelte-h":!0}),$(g)!=="svelte-mvq3g"&&(g.textContent=W),H=p(e),y=i(e,"P",{"data-svelte-h":!0}),$(y)!=="svelte-zn49j8"&&(y.innerHTML=X),q=p(e),M=i(e,"P",{"data-svelte-h":!0}),$(M)!=="svelte-1ft72d"&&(M.innerHTML=F),R=p(e),z(w.$$.fragment,e),k=p(e),b=i(e,"P",{}),V(b).forEach(a),this.h()},h(){O(o,"name","hf:doc:metadata"),O(o,"content",he)},m(e,t){pe(document.head,o),s(e,U,t),s(e,T,t),s(e,x,t),I(r,e,t),s(e,_,t),I(c,e,t),s(e,v,t),s(e,h,t),s(e,C,t),s(e,m,t),s(e,L,t),s(e,d,t),s(e,S,t),I(u,e,t),s(e,J,t),s(e,f,t),s(e,j,t),s(e,g,t),s(e,H,t),s(e,y,t),s(e,q,t),s(e,M,t),s(e,R,t),I(w,e,t),s(e,k,t),s(e,b,t),P=!0},p:ee,i(e){P||(B(r.$$.fragment,e),B(c.$$.fragment,e),B(u.$$.fragment,e),B(w.$$.fragment,e),P=!0)},o(e){Q(r.$$.fragment,e),Q(c.$$.fragment,e),Q(u.$$.fragment,e),Q(w.$$.fragment,e),P=!1},d(e){e&&(a(U),a(T),a(x),a(_),a(v),a(h),a(C),a(m),a(L),a(d),a(S),a(J),a(f),a(j),a(g),a(H),a(y),a(q),a(M),a(R),a(k),a(b)),a(o),N(r,e),N(c,e),N(u,e),N(w,e)}}}const he='{"title":"How to handle URL parameters in Spaces","local":"how-to-handle-url-parameters-in-spaces","sections":[],"depth":1}';function me(A){return te(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Me extends ae{constructor(o){super(),se(this,o,me,ce,K,{})}}export{Me as component};
