trackio/pr_310/en/_app/immutable/nodes/4.1cc1e5e9.js

import{s as Je,a as _e,n as ve,o as He}from"../chunks/scheduler.cfabe6e6.js";import{S as ke,i as qe,e as n,s as l,c as d,h as xe,a as p,d as a,b as i,f as we,g as m,j as r,k as S,q as Ie,l as Ye,m as s,n as u,t as f,o as h,p as g}from"../chunks/index.2eae04e0.js";import{C as Ee,H as re,a as oe,E as Le}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.270b8ab9.js";function Ce(ce){let c,U,W,D,M,Q,$,z,b,B,y,de='When calling <a href="/docs/trackio/pr_310/en/api#trackio.init">init()</a>, by default the service will run locally and store project data on the local machine.',N,j,me='But if you pass a <code>space_id</code> to <a href="/docs/trackio/pr_310/en/api#trackio.init">init()</a>, like:',P,T,R,w,ue="or",F,J,A,_,fe="it will use an existing or automatically deploy a new Hugging Face Space as needed. You should be logged in with the <code>huggingface-cli</code> locally and your token should have write permissions to create the Space.",V,v,G,H,he="One of the reasons we created <code>trackio</code> was to make it easy to embed live dashboards on websites, blog posts, or anywhere else you can embed a website.",X,k,ge='<img src="https://github.com/user-attachments/assets/77f1424b-737b-4f04-b828-a12b2c1af4ef" alt="image"/>',K,q,Me="If your Trackio dashboard is hosted on Spaces, you can embed it anywhere using an <code>&lt;iframe&gt;</code>:",O,x,ee,I,$e="You can also filter the dashboard to display only specific projects or metrics using query parameters. Supported parameters include:",te,Y,be="<li><p><code>project</code> (string): Show only a specific project.</p></li> <li><p><code>metrics</code> (comma-separated list): Show only specific metrics, e.g., <code>train_loss,train_accuracy</code>.</p></li> <li><p><code>sidebar</code> (string, <code>&quot;hidden&quot;</code> or <code>&quot;collapsed&quot;</code>):</p> <ul><li><code>&quot;hidden&quot;</code> hides the sidebar completely.</li> <li><code>&quot;collapsed&quot;</code> keeps the sidebar initially collapsed, but the user can expand it. By default, the sidebar is visible and open.</li></ul></li>",ae,E,ye='You can customize your <code>&lt;iframe&gt;</code> using standard attributes such as <code>width</code>, <code>height</code>, and <code>style</code>. For more details, see <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/iframe" rel="nofollow">MDN Web Docs: <code>&lt;iframe&gt;</code></a>. For example:',se,L,le,o,je="",Te,ie,C,ne,Z,pe;return M=new Ee({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),$=new re({props:{title:"Deploying and Embedding Dashboards",local:"deploying-and-embedding-dashboards",headingTag:"h1"}}),b=new re({props:{title:"Deploying to Hugging Face Spaces",local:"deploying-to-hugging-face-spaces",headingTag:"h2"}}),T=new oe({props:{code:"dHJhY2tpby5pbml0KHByb2plY3QlM0QlMjJteS1wcm9qZWN0JTIyJTJDJTIwc3BhY2VfaWQlM0QlMjJvcmduYW1lJTJGc3BhY2VfaWQlMjIp",highlighted:'trackio.init(project=<span class="hljs-string">&quot;my-project&quot;</span>, space_id=<span class="hljs-string">&quot;orgname/space_id&quot;</span>)',wrap:!1}}),J=new oe({props:{code:"dHJhY2tpby5pbml0KHByb2plY3QlM0QlMjJteS1wcm9qZWN0JTIyJTJDJTIwc3BhY2VfaWQlM0QlMjJ1c2VybmFtZSUyRnNwYWNlX2lkJTIyKQ==",highlighted:'trackio.init(project=<span class="hljs-string">&quot;my-project&quot;</span>, space_id=<span class="hljs-string">&quot;username/space_id&quot;</span>)',wrap:!1}}),v=new re({props:{title:"Embedding a Trackio Dashboard",local:"embedding-a-trackio-dashboard",headingTag:"h2"}}),x=new oe({props:{code:"JTNDaWZyYW1lJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZ1c2VybmFtZS1zcGFjZV9pZC5oZi5zcGFjZSUyMiUzRSUzQyUyRmlmcmFtZSUzRQ==",highlighted:'<span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://username-space_id.hf.space&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>',wrap:!1}}),L=new oe({props:{code:"JTNDaWZyYW1lJTIwJTBBJTIwJTIwJTIwJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZ0cmFja2lvLWRvY3VtZW50YXRpb24uaGYuc3BhY2UlMkYlM0Zwcm9qZWN0JTNEbXktcHJvamVjdCUyNm1ldHJpY3MlM0R0cmFpbl9sb3NzJTJDdHJhaW5fYWNjdXJhY3klMjZzaWRlYmFyJTNEaGlkZGVuJTIyJTIwJTBBJTIwJTIwJTIwJTIwd2lkdGglM0QlMjI2MDAlMjIlMjAlMEElMjAlMjAlMjAlMjBoZWlnaHQlM0QlMjI2MzAlMjIlMjAlMEElMjAlMjAlMjAlMjBzdHlsZSUzRCUyMmJvcmRlciUzQTAlM0IlMjIlM0UlMEElM0MlMkZpZnJhbWUlM0U=",highlighted:`<span class="hljs-tag">&lt;<span class="hljs-name">iframe</span> 
    <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://trackio-documentation.hf.space/?project=my-project&amp;metrics=train_loss,train_accuracy&amp;sidebar=hidden&quot;</span> 
    <span class="hljs-attr">width</span>=<span class="hljs-string">&quot;600&quot;</span> 
    <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;630&quot;</span> 
    <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;border:0;&quot;</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>`,wrap:!1}}),C=new Le({props:{source:"https://github.com/gradio-app/trackio/blob/main/docs/source/deploy_embed.md"}}),{c(){c=n("meta"),U=l(),W=n("p"),D=l(),d(M.$$.fragment),Q=l(),d($.$$.fragment),z=l(),d(b.$$.fragment),B=l(),y=n("p"),y.innerHTML=de,N=l(),j=n("p"),j.innerHTML=me,P=l(),d(T.$$.fragment),R=l(),w=n("p"),w.textContent=ue,F=l(),d(J.$$.fragment),A=l(),_=n("p"),_.innerHTML=fe,V=l(),d(v.$$.fragment),G=l(),H=n("p"),H.innerHTML=he,X=l(),k=n("p"),k.innerHTML=ge,K=l(),q=n("p"),q.innerHTML=Me,O=l(),d(x.$$.fragment),ee=l(),I=n("p"),I.textContent=$e,te=l(),Y=n("ul"),Y.innerHTML=be,ae=l(),E=n("p"),E.innerHTML=ye,se=l(),d(L.$$.fragment),le=l(),o=n("iframe"),o.innerHTML=je,ie=l(),d(C.$$.fragment),ne=l(),Z=n("p"),this.h()},l(e){const t=xe("svelte-u9bgzb",document.head);c=p(t,"META",{name:!0,content:!0}),t.forEach(a),U=i(e),W=p(e,"P",{}),we(W).forEach(a),D=i(e),m(M.$$.fragment,e),Q=i(e),m($.$$.fragment,e),z=i(e),m(b.$$.fragment,e),B=i(e),y=p(e,"P",{"data-svelte-h":!0}),r(y)!=="svelte-12j7ec5"&&(y.innerHTML=de),N=i(e),j=p(e,"P",{"data-svelte-h":!0}),r(j)!=="svelte-1944h05"&&(j.innerHTML=me),P=i(e),m(T.$$.fragment,e),R=i(e),w=p(e,"P",{"data-svelte-h":!0}),r(w)!=="svelte-93sdsf"&&(w.textContent=ue),F=i(e),m(J.$$.fragment,e),A=i(e),_=p(e,"P",{"data-svelte-h":!0}),r(_)!=="svelte-q9r9dd"&&(_.innerHTML=fe),V=i(e),m(v.$$.fragment,e),G=i(e),H=p(e,"P",{"data-svelte-h":!0}),r(H)!=="svelte-bar35u"&&(H.innerHTML=he),X=i(e),k=p(e,"P",{"data-svelte-h":!0}),r(k)!=="svelte-1lnedmc"&&(k.innerHTML=ge),K=i(e),q=p(e,"P",{"data-svelte-h":!0}),r(q)!=="svelte-12lrtsj"&&(q.innerHTML=Me),O=i(e),m(x.$$.fragment,e),ee=i(e),I=p(e,"P",{"data-svelte-h":!0}),r(I)!=="svelte-15pvsve"&&(I.textContent=$e),te=i(e),Y=p(e,"UL",{"data-svelte-h":!0}),r(Y)!=="svelte-179opx0"&&(Y.innerHTML=be),ae=i(e),E=p(e,"P",{"data-svelte-h":!0}),r(E)!=="svelte-fafxx9"&&(E.innerHTML=ye),se=i(e),m(L.$$.fragment,e),le=i(e),o=p(e,"IFRAME",{src:!0,width:!0,height:!0,style:!0,"data-svelte-h":!0}),r(o)!=="svelte-1mm7d2a"&&(o.innerHTML=je),ie=i(e),m(C.$$.fragment,e),ne=i(e),Z=p(e,"P",{}),we(Z).forEach(a),this.h()},h(){S(c,"name","hf:doc:metadata"),S(c,"content",We),_e(o.src,Te="https://trackio-documentation.hf.space/?project=my-project&metrics=train_loss,train_accuracy&sidebar=hidden")||S(o,"src",Te),S(o,"width","600"),S(o,"height","630"),Ie(o,"border","0")},m(e,t){Ye(document.head,c),s(e,U,t),s(e,W,t),s(e,D,t),u(M,e,t),s(e,Q,t),u($,e,t),s(e,z,t),u(b,e,t),s(e,B,t),s(e,y,t),s(e,N,t),s(e,j,t),s(e,P,t),u(T,e,t),s(e,R,t),s(e,w,t),s(e,F,t),u(J,e,t),s(e,A,t),s(e,_,t),s(e,V,t),u(v,e,t),s(e,G,t),s(e,H,t),s(e,X,t),s(e,k,t),s(e,K,t),s(e,q,t),s(e,O,t),u(x,e,t),s(e,ee,t),s(e,I,t),s(e,te,t),s(e,Y,t),s(e,ae,t),s(e,E,t),s(e,se,t),u(L,e,t),s(e,le,t),s(e,o,t),s(e,ie,t),u(C,e,t),s(e,ne,t),s(e,Z,t),pe=!0},p:ve,i(e){pe||(f(M.$$.fragment,e),f($.$$.fragment,e),f(b.$$.fragment,e),f(T.$$.fragment,e),f(J.$$.fragment,e),f(v.$$.fragment,e),f(x.$$.fragment,e),f(L.$$.fragment,e),f(C.$$.fragment,e),pe=!0)},o(e){h(M.$$.fragment,e),h($.$$.fragment,e),h(b.$$.fragment,e),h(T.$$.fragment,e),h(J.$$.fragment,e),h(v.$$.fragment,e),h(x.$$.fragment,e),h(L.$$.fragment,e),h(C.$$.fragment,e),pe=!1},d(e){e&&(a(U),a(W),a(D),a(Q),a(z),a(B),a(y),a(N),a(j),a(P),a(R),a(w),a(F),a(A),a(_),a(V),a(G),a(H),a(X),a(k),a(K),a(q),a(O),a(ee),a(I),a(te),a(Y),a(ae),a(E),a(se),a(le),a(o),a(ie),a(ne),a(Z)),a(c),g(M,e),g($,e),g(b,e),g(T,e),g(J,e),g(v,e),g(x,e),g(L,e),g(C,e)}}}const We='{"title":"Deploying and Embedding Dashboards","local":"deploying-and-embedding-dashboards","sections":[{"title":"Deploying to Hugging Face Spaces","local":"deploying-to-hugging-face-spaces","sections":[],"depth":2},{"title":"Embedding a Trackio Dashboard","local":"embedding-a-trackio-dashboard","sections":[],"depth":2}],"depth":1}';function Ze(ce){return He(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Qe extends ke{constructor(c){super(),qe(this,c,Ze,Ce,Je,{})}}export{Qe as component};