trackio/pr_320/en/_app/immutable/nodes/4.2fa80927.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 xe,e as n,s as l,c as m,h as qe,a as o,d as a,b as i,f as we,g as d,j as r,k as Z,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 pe,E as Le}from"../chunks/MermaidChart.svelte_svelte_type_style_lang.e552d4e7.js";function Se(ce){let c,U,C,D,M,Q,b,z,$,B,y,me='When calling <a href="/docs/trackio/pr_320/en/api#trackio.init">init()</a>, by default the service will run locally and store project data on the local machine.',N,j,de='But if you pass a <code>space_id</code> to <a href="/docs/trackio/pr_320/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,x,Me="If your Trackio dashboard is hosted on Spaces, you can embed it anywhere using an <code>&lt;iframe&gt;</code>:",O,q,ee,I,be="You can also filter the dashboard to display only specific projects or metrics using query parameters. Supported parameters include:",te,Y,$e="<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> <li><p><code>xmin</code> (number): Set the initial minimum value for the x-axis limits across all metrics plots.</p></li> <li><p><code>xmax</code> (number): Set the initial maximum value for the x-axis limits across all metrics plots.</p></li> <li><p><code>smoothing</code> (number): Set the initial value of the smoothing slider (0-20, where 0 = no smoothing).</p></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,p,je="",Te,ie,S,ne,W,oe;return M=new Ee({props:{containerStyle:"float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"}}),b=new re({props:{title:"Deploying and Embedding Dashboards",local:"deploying-and-embedding-dashboards",headingTag:"h1"}}),$=new re({props:{title:"Deploying to Hugging Face Spaces",local:"deploying-to-hugging-face-spaces",headingTag:"h2"}}),T=new pe({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 pe({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"}}),q=new pe({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 pe({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}}),S=new Le({props:{source:"https://github.com/gradio-app/trackio/blob/main/docs/source/deploy_embed.md"}}),{c(){c=n("meta"),U=l(),C=n("p"),D=l(),m(M.$$.fragment),Q=l(),m(b.$$.fragment),z=l(),m($.$$.fragment),B=l(),y=n("p"),y.innerHTML=me,N=l(),j=n("p"),j.innerHTML=de,P=l(),m(T.$$.fragment),R=l(),w=n("p"),w.textContent=ue,F=l(),m(J.$$.fragment),A=l(),_=n("p"),_.innerHTML=fe,V=l(),m(v.$$.fragment),G=l(),H=n("p"),H.innerHTML=he,X=l(),k=n("p"),k.innerHTML=ge,K=l(),x=n("p"),x.innerHTML=Me,O=l(),m(q.$$.fragment),ee=l(),I=n("p"),I.textContent=be,te=l(),Y=n("ul"),Y.innerHTML=$e,ae=l(),E=n("p"),E.innerHTML=ye,se=l(),m(L.$$.fragment),le=l(),p=n("iframe"),p.innerHTML=je,ie=l(),m(S.$$.fragment),ne=l(),W=n("p"),this.h()},l(e){const t=qe("svelte-u9bgzb",document.head);c=o(t,"META",{name:!0,content:!0}),t.forEach(a),U=i(e),C=o(e,"P",{}),we(C).forEach(a),D=i(e),d(M.$$.fragment,e),Q=i(e),d(b.$$.fragment,e),z=i(e),d($.$$.fragment,e),B=i(e),y=o(e,"P",{"data-svelte-h":!0}),r(y)!=="svelte-39faps"&&(y.innerHTML=me),N=i(e),j=o(e,"P",{"data-svelte-h":!0}),r(j)!=="svelte-1jdlpm8"&&(j.innerHTML=de),P=i(e),d(T.$$.fragment,e),R=i(e),w=o(e,"P",{"data-svelte-h":!0}),r(w)!=="svelte-93sdsf"&&(w.textContent=ue),F=i(e),d(J.$$.fragment,e),A=i(e),_=o(e,"P",{"data-svelte-h":!0}),r(_)!=="svelte-q9r9dd"&&(_.innerHTML=fe),V=i(e),d(v.$$.fragment,e),G=i(e),H=o(e,"P",{"data-svelte-h":!0}),r(H)!=="svelte-bar35u"&&(H.innerHTML=he),X=i(e),k=o(e,"P",{"data-svelte-h":!0}),r(k)!=="svelte-1lnedmc"&&(k.innerHTML=ge),K=i(e),x=o(e,"P",{"data-svelte-h":!0}),r(x)!=="svelte-12lrtsj"&&(x.innerHTML=Me),O=i(e),d(q.$$.fragment,e),ee=i(e),I=o(e,"P",{"data-svelte-h":!0}),r(I)!=="svelte-15pvsve"&&(I.textContent=be),te=i(e),Y=o(e,"UL",{"data-svelte-h":!0}),r(Y)!=="svelte-178sgr3"&&(Y.innerHTML=$e),ae=i(e),E=o(e,"P",{"data-svelte-h":!0}),r(E)!=="svelte-fafxx9"&&(E.innerHTML=ye),se=i(e),d(L.$$.fragment,e),le=i(e),p=o(e,"IFRAME",{src:!0,width:!0,height:!0,style:!0,"data-svelte-h":!0}),r(p)!=="svelte-1mm7d2a"&&(p.innerHTML=je),ie=i(e),d(S.$$.fragment,e),ne=i(e),W=o(e,"P",{}),we(W).forEach(a),this.h()},h(){Z(c,"name","hf:doc:metadata"),Z(c,"content",Ce),_e(p.src,Te="https://trackio-documentation.hf.space/?project=my-project&metrics=train_loss,train_accuracy&sidebar=hidden")||Z(p,"src",Te),Z(p,"width","600"),Z(p,"height","630"),Ie(p,"border","0")},m(e,t){Ye(document.head,c),s(e,U,t),s(e,C,t),s(e,D,t),u(M,e,t),s(e,Q,t),u(b,e,t),s(e,z,t),u($,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,x,t),s(e,O,t),u(q,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,p,t),s(e,ie,t),u(S,e,t),s(e,ne,t),s(e,W,t),oe=!0},p:ve,i(e){oe||(f(M.$$.fragment,e),f(b.$$.fragment,e),f($.$$.fragment,e),f(T.$$.fragment,e),f(J.$$.fragment,e),f(v.$$.fragment,e),f(q.$$.fragment,e),f(L.$$.fragment,e),f(S.$$.fragment,e),oe=!0)},o(e){h(M.$$.fragment,e),h(b.$$.fragment,e),h($.$$.fragment,e),h(T.$$.fragment,e),h(J.$$.fragment,e),h(v.$$.fragment,e),h(q.$$.fragment,e),h(L.$$.fragment,e),h(S.$$.fragment,e),oe=!1},d(e){e&&(a(U),a(C),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(x),a(O),a(ee),a(I),a(te),a(Y),a(ae),a(E),a(se),a(le),a(p),a(ie),a(ne),a(W)),a(c),g(M,e),g(b,e),g($,e),g(T,e),g(J,e),g(v,e),g(q,e),g(L,e),g(S,e)}}}const Ce='{"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 We(ce){return He(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Qe extends ke{constructor(c){super(),xe(this,c,We,Se,Je,{})}}export{Qe as component};