import{s as Ie,n as Re,o as We}from"../chunks/scheduler.d6170356.js";import{S as qe,i as Pe,g as i,s as l,r as Z,A as De,h as o,f as a,c as n,j as Ze,u as E,x as r,k as I,y as Ne,a as s,v as R,d as W,t as q,w as P}from"../chunks/index.fcd4cc08.js";import{C as Ee}from"../chunks/CodeBlock.7b16bdef.js";import{H as ue,E as ze}from"../chunks/EditOnGithub.da2b595c.js";function Ve(fe){let m,z,D,V,u,B,f,ge="You can embed the Dataset Viewer in your own webpage using an iframe.",G,g,be="The URL to use is <code>https://huggingface.co/datasets/&lt;namespace&gt;/&lt;dataset-name&gt;/embed/viewer</code>, where <code>&lt;namespace&gt;</code> is the owner of the dataset (user or organization) and <code>&lt;dataset-name&gt;</code> is the name of the dataset. You can also pass other parameters like the configuration, split, filter, search or selected row.",Y,b,we="For example, the following iframe embeds the Dataset Viewer for the <code>glue</code> dataset from the <code>nyu-mll</code> organization:",F,w,S,v,ve="You can also get the embed code directly from the Dataset Viewer interface. Click on the <code>Embed</code> button in the top right corner of the Dataset Viewer:",A,c,Me='<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/dataset-viewer-embed-main-button.png"/> <img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/dataset-viewer-embed-main-button-dark.png"/>',X,M,ye="It will open a modal with the iframe code that you can copy and paste into your webpage:",O,p,Te='<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/dataset-viewer-embed-main-button-modal.png"/> <img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/dataset-viewer-embed-main-button-modal-dark.png"/>',Q,y,K,T,$e="All the parameters of the dataset viewer page can also be passed to the embedded viewer (filter, search, specific split, etc.) by adding them to the iframe URL. For example, to show the results of the search on <code>mangrove</code> in the <code>test</code> split of the <code>rte</code> subset of the <code>nyu-mll/glue</code> dataset, you can use the following URL:",ee,$,te,x,xe="You can get this code directly from the Dataset Viewer interface by performing the search, clicking on the <code>⋮</code> button then <code>Embed</code>:",ae,d,je='<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/dataset-viewer-embed-search-button.png"/> <img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/dataset-viewer-embed-search-button-dark.png"/>',se,j,Ce="It will open a modal with the iframe code that you can copy and paste into your webpage:",le,h,Je='<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/dataset-viewer-embed-search-button-modal.png"/> <img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/dataset-viewer-embed-search-button-modal-dark.png"/>',ne,C,ie,J,Ue="The embedded dataset viewer is used in multiple Machine Learning tools and platforms to display datasets. Here are a few examples:",oe,U,ke='<li><a href="https://www.zenml.io/blog/embedding-huggingface-datasets-visualizations-with-zenml" rel="nofollow">ZenML</a></li> <li><a href="https://www.linkedin.com/posts/eddie-mattia_the-team-at-hugging-facerecently-released-activity-7219416449084272641-swIu" rel="nofollow">Metaflow + Outerbounds</a></li> <li><a href="https://x.com/abhi1thakur/status/1813892464144798171" rel="nofollow">AutoTrain</a></li>',re,k,He="Dataset creators also use the embedded viewer to showcase their datasets on their websites, spaces or apps:",me,H,Le='<li><a href="https://huggingface.co/spaces/librarian-bots/Alpaca-Style-Datasets-explorer" rel="nofollow">librarian-bots/alpaca-style-datasets gallery</a></li> <li><a href="https://x.com/calebfahlgren/status/1813356638239125735" rel="nofollow">Electric Vehicle Charge Finder app</a></li>',ce,L,_e='Open a <a href="https://github.com/huggingface/hub-docs/blob/main/docs/hub/datasets-viewer-embed.md" rel="nofollow">pull request</a> if you want to appear in this section!',pe,_,de,N,he;return u=new ue({props:{title:"Embed the Dataset Viewer in a webpage",local:"embed-the-dataset-viewer-in-a-webpage",headingTag:"h1"}}),w=new Ee({props:{code:"JTNDaWZyYW1lJTBBJTIwJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZodWdnaW5nZmFjZS5jbyUyRmRhdGFzZXRzJTJGbnl1LW1sbCUyRmdsdWUlMkZlbWJlZCUyRnZpZXdlciUyMiUwQSUyMCUyMGZyYW1lYm9yZGVyJTNEJTIyMCUyMiUwQSUyMCUyMHdpZHRoJTNEJTIyMTAwJTI1JTIyJTBBJTIwJTIwaGVpZ2h0JTNEJTIyNTYwcHglMjIlMEElM0UlM0MlMkZpZnJhbWUlM0U=",highlighted:`<span class="hljs-tag">&lt;<span class="hljs-name">iframe</span>
  <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://huggingface.co/datasets/nyu-mll/glue/embed/viewer&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;100%&quot;</span>
  <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;560px&quot;</span>
&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>`,wrap:!1}}),y=new ue({props:{title:"Parameters",local:"parameters",headingTag:"h2"}}),$=new Ee({props:{code:"JTNDaWZyYW1lJTBBJTIwJTIwc3JjJTNEJTIyaHR0cHMlM0ElMkYlMkZodWdnaW5nZmFjZS5jbyUyRmRhdGFzZXRzJTJGbnl1LW1sbCUyRmdsdWUlMkZlbWJlZCUyRnZpZXdlciUyRnJ0ZSUyRnNwbGl0JTNGc2VhcmNoJTNEbWFuZ3JvdmUlMjIlMEElMjAlMjBmcmFtZWJvcmRlciUzRCUyMjAlMjIlMEElMjAlMjB3aWR0aCUzRCUyMjEwMCUyNSUyMiUwQSUyMCUyMGhlaWdodCUzRCUyMjU2MHB4JTIyJTBBJTNFJTNDJTJGaWZyYW1lJTNF",highlighted:`<span class="hljs-tag">&lt;<span class="hljs-name">iframe</span>
  <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;https://huggingface.co/datasets/nyu-mll/glue/embed/viewer/rte/split?search=mangrove&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;100%&quot;</span>
  <span class="hljs-attr">height</span>=<span class="hljs-string">&quot;560px&quot;</span>
&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">iframe</span>&gt;</span>`,wrap:!1}}),C=new ue({props:{title:"Examples",local:"examples",headingTag:"h2"}}),_=new ze({props:{source:"https://github.com/huggingface/hub-docs/blob/main/docs/hub/datasets-viewer-embed.md"}}),{c(){m=i("meta"),z=l(),D=i("p"),V=l(),Z(u.$$.fragment),B=l(),f=i("p"),f.textContent=ge,G=l(),g=i("p"),g.innerHTML=be,Y=l(),b=i("p"),b.innerHTML=we,F=l(),Z(w.$$.fragment),S=l(),v=i("p"),v.innerHTML=ve,A=l(),c=i("div"),c.innerHTML=Me,X=l(),M=i("p"),M.textContent=ye,O=l(),p=i("div"),p.innerHTML=Te,Q=l(),Z(y.$$.fragment),K=l(),T=i("p"),T.innerHTML=$e,ee=l(),Z($.$$.fragment),te=l(),x=i("p"),x.innerHTML=xe,ae=l(),d=i("div"),d.innerHTML=je,se=l(),j=i("p"),j.textContent=Ce,le=l(),h=i("div"),h.innerHTML=Je,ne=l(),Z(C.$$.fragment),ie=l(),J=i("p"),J.textContent=Ue,oe=l(),U=i("ul"),U.innerHTML=ke,re=l(),k=i("p"),k.textContent=He,me=l(),H=i("ul"),H.innerHTML=Le,ce=l(),L=i("p"),L.innerHTML=_e,pe=l(),Z(_.$$.fragment),de=l(),N=i("p"),this.h()},l(e){const t=De("svelte-u9bgzb",document.head);m=o(t,"META",{name:!0,content:!0}),t.forEach(a),z=n(e),D=o(e,"P",{}),Ze(D).forEach(a),V=n(e),E(u.$$.fragment,e),B=n(e),f=o(e,"P",{"data-svelte-h":!0}),r(f)!=="svelte-32nl95"&&(f.textContent=ge),G=n(e),g=o(e,"P",{"data-svelte-h":!0}),r(g)!=="svelte-ry8anw"&&(g.innerHTML=be),Y=n(e),b=o(e,"P",{"data-svelte-h":!0}),r(b)!=="svelte-75cdtl"&&(b.innerHTML=we),F=n(e),E(w.$$.fragment,e),S=n(e),v=o(e,"P",{"data-svelte-h":!0}),r(v)!=="svelte-1u8t49h"&&(v.innerHTML=ve),A=n(e),c=o(e,"DIV",{class:!0,"data-svelte-h":!0}),r(c)!=="svelte-1xf70fl"&&(c.innerHTML=Me),X=n(e),M=o(e,"P",{"data-svelte-h":!0}),r(M)!=="svelte-7m212a"&&(M.textContent=ye),O=n(e),p=o(e,"DIV",{class:!0,"data-svelte-h":!0}),r(p)!=="svelte-1nca5nx"&&(p.innerHTML=Te),Q=n(e),E(y.$$.fragment,e),K=n(e),T=o(e,"P",{"data-svelte-h":!0}),r(T)!=="svelte-1gdmkfr"&&(T.innerHTML=$e),ee=n(e),E($.$$.fragment,e),te=n(e),x=o(e,"P",{"data-svelte-h":!0}),r(x)!=="svelte-1ft68n5"&&(x.innerHTML=xe),ae=n(e),d=o(e,"DIV",{class:!0,"data-svelte-h":!0}),r(d)!=="svelte-s2ivhj"&&(d.innerHTML=je),se=n(e),j=o(e,"P",{"data-svelte-h":!0}),r(j)!=="svelte-7m212a"&&(j.textContent=Ce),le=n(e),h=o(e,"DIV",{class:!0,"data-svelte-h":!0}),r(h)!=="svelte-1bbgbhz"&&(h.innerHTML=Je),ne=n(e),E(C.$$.fragment,e),ie=n(e),J=o(e,"P",{"data-svelte-h":!0}),r(J)!=="svelte-10jr4zq"&&(J.textContent=Ue),oe=n(e),U=o(e,"UL",{"data-svelte-h":!0}),r(U)!=="svelte-2mp1jt"&&(U.innerHTML=ke),re=n(e),k=o(e,"P",{"data-svelte-h":!0}),r(k)!=="svelte-1bqcrcw"&&(k.textContent=He),me=n(e),H=o(e,"UL",{"data-svelte-h":!0}),r(H)!=="svelte-cqwdky"&&(H.innerHTML=Le),ce=n(e),L=o(e,"P",{"data-svelte-h":!0}),r(L)!=="svelte-np7bnb"&&(L.innerHTML=_e),pe=n(e),E(_.$$.fragment,e),de=n(e),N=o(e,"P",{}),Ze(N).forEach(a),this.h()},h(){I(m,"name","hf:doc:metadata"),I(m,"content",Be),I(c,"class","flex justify-center"),I(p,"class","flex justify-center"),I(d,"class","flex justify-center"),I(h,"class","flex justify-center")},m(e,t){Ne(document.head,m),s(e,z,t),s(e,D,t),s(e,V,t),R(u,e,t),s(e,B,t),s(e,f,t),s(e,G,t),s(e,g,t),s(e,Y,t),s(e,b,t),s(e,F,t),R(w,e,t),s(e,S,t),s(e,v,t),s(e,A,t),s(e,c,t),s(e,X,t),s(e,M,t),s(e,O,t),s(e,p,t),s(e,Q,t),R(y,e,t),s(e,K,t),s(e,T,t),s(e,ee,t),R($,e,t),s(e,te,t),s(e,x,t),s(e,ae,t),s(e,d,t),s(e,se,t),s(e,j,t),s(e,le,t),s(e,h,t),s(e,ne,t),R(C,e,t),s(e,ie,t),s(e,J,t),s(e,oe,t),s(e,U,t),s(e,re,t),s(e,k,t),s(e,me,t),s(e,H,t),s(e,ce,t),s(e,L,t),s(e,pe,t),R(_,e,t),s(e,de,t),s(e,N,t),he=!0},p:Re,i(e){he||(W(u.$$.fragment,e),W(w.$$.fragment,e),W(y.$$.fragment,e),W($.$$.fragment,e),W(C.$$.fragment,e),W(_.$$.fragment,e),he=!0)},o(e){q(u.$$.fragment,e),q(w.$$.fragment,e),q(y.$$.fragment,e),q($.$$.fragment,e),q(C.$$.fragment,e),q(_.$$.fragment,e),he=!1},d(e){e&&(a(z),a(D),a(V),a(B),a(f),a(G),a(g),a(Y),a(b),a(F),a(S),a(v),a(A),a(c),a(X),a(M),a(O),a(p),a(Q),a(K),a(T),a(ee),a(te),a(x),a(ae),a(d),a(se),a(j),a(le),a(h),a(ne),a(ie),a(J),a(oe),a(U),a(re),a(k),a(me),a(H),a(ce),a(L),a(pe),a(de),a(N)),a(m),P(u,e),P(w,e),P(y,e),P($,e),P(C,e),P(_,e)}}}const Be='{"title":"Embed the Dataset Viewer in a webpage","local":"embed-the-dataset-viewer-in-a-webpage","sections":[{"title":"Parameters","local":"parameters","sections":[],"depth":2},{"title":"Examples","local":"examples","sections":[],"depth":2}],"depth":1}';function Ge(fe){return We(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Xe extends qe{constructor(m){super(),Pe(this,m,Ge,Ve,Ie,{})}}export{Xe as component};
