import{s as we,n as ve,o as ye}from"../chunks/scheduler.d6170356.js";import{S as Me,i as Te,g as i,s as n,r as H,A as je,h as o,f as a,c as l,j as ge,u as Z,x as c,k as C,y as Je,a as s,v as _,d as E,t as L,w as R}from"../chunks/index.fcd4cc08.js";import{C as fe}from"../chunks/CodeBlock.7b16bdef.js";import{H as be,E as $e}from"../chunks/EditOnGithub.da2b595c.js";function Ue(ae){let r,I,k,W,u,q,g,se="You can embed the Dataset Viewer in your own webpage using an iframe.",N,f,ne="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.",P,b,le="For example, the following iframe embeds the Dataset Viewer for the <code>glue</code> dataset from the <code>nyu-mll</code> organization:",D,w,V,v,ie="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:",B,m,oe='<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"/>',G,y,ce="It will open a modal with the iframe code that you can copy and paste into your webpage:",Y,d,re='<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"/>',z,M,F,T,me="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:",S,j,A,J,de="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>:",X,p,pe='<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"/>',Q,$,he="It will open a modal with the iframe code that you can copy and paste into your webpage:",O,h,ue='<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"/>',K,U,ee,x,te;return u=new be({props:{title:"Embed the Dataset Viewer in a webpage",local:"embed-the-dataset-viewer-in-a-webpage",headingTag:"h1"}}),w=new fe({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}}),M=new be({props:{title:"Parameters",local:"parameters",headingTag:"h2"}}),j=new fe({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}}),U=new $e({props:{source:"https://github.com/huggingface/hub-docs/blob/main/docs/hub/datasets-viewer-embed.md"}}),{c(){r=i("meta"),I=n(),k=i("p"),W=n(),H(u.$$.fragment),q=n(),g=i("p"),g.textContent=se,N=n(),f=i("p"),f.innerHTML=ne,P=n(),b=i("p"),b.innerHTML=le,D=n(),H(w.$$.fragment),V=n(),v=i("p"),v.innerHTML=ie,B=n(),m=i("div"),m.innerHTML=oe,G=n(),y=i("p"),y.textContent=ce,Y=n(),d=i("div"),d.innerHTML=re,z=n(),H(M.$$.fragment),F=n(),T=i("p"),T.innerHTML=me,S=n(),H(j.$$.fragment),A=n(),J=i("p"),J.innerHTML=de,X=n(),p=i("div"),p.innerHTML=pe,Q=n(),$=i("p"),$.textContent=he,O=n(),h=i("div"),h.innerHTML=ue,K=n(),H(U.$$.fragment),ee=n(),x=i("p"),this.h()},l(e){const t=je("svelte-u9bgzb",document.head);r=o(t,"META",{name:!0,content:!0}),t.forEach(a),I=l(e),k=o(e,"P",{}),ge(k).forEach(a),W=l(e),Z(u.$$.fragment,e),q=l(e),g=o(e,"P",{"data-svelte-h":!0}),c(g)!=="svelte-32nl95"&&(g.textContent=se),N=l(e),f=o(e,"P",{"data-svelte-h":!0}),c(f)!=="svelte-ry8anw"&&(f.innerHTML=ne),P=l(e),b=o(e,"P",{"data-svelte-h":!0}),c(b)!=="svelte-75cdtl"&&(b.innerHTML=le),D=l(e),Z(w.$$.fragment,e),V=l(e),v=o(e,"P",{"data-svelte-h":!0}),c(v)!=="svelte-1u8t49h"&&(v.innerHTML=ie),B=l(e),m=o(e,"DIV",{class:!0,"data-svelte-h":!0}),c(m)!=="svelte-1xf70fl"&&(m.innerHTML=oe),G=l(e),y=o(e,"P",{"data-svelte-h":!0}),c(y)!=="svelte-7m212a"&&(y.textContent=ce),Y=l(e),d=o(e,"DIV",{class:!0,"data-svelte-h":!0}),c(d)!=="svelte-1nca5nx"&&(d.innerHTML=re),z=l(e),Z(M.$$.fragment,e),F=l(e),T=o(e,"P",{"data-svelte-h":!0}),c(T)!=="svelte-1gdmkfr"&&(T.innerHTML=me),S=l(e),Z(j.$$.fragment,e),A=l(e),J=o(e,"P",{"data-svelte-h":!0}),c(J)!=="svelte-1ft68n5"&&(J.innerHTML=de),X=l(e),p=o(e,"DIV",{class:!0,"data-svelte-h":!0}),c(p)!=="svelte-s2ivhj"&&(p.innerHTML=pe),Q=l(e),$=o(e,"P",{"data-svelte-h":!0}),c($)!=="svelte-7m212a"&&($.textContent=he),O=l(e),h=o(e,"DIV",{class:!0,"data-svelte-h":!0}),c(h)!=="svelte-1bbgbhz"&&(h.innerHTML=ue),K=l(e),Z(U.$$.fragment,e),ee=l(e),x=o(e,"P",{}),ge(x).forEach(a),this.h()},h(){C(r,"name","hf:doc:metadata"),C(r,"content",Ce),C(m,"class","flex justify-center"),C(d,"class","flex justify-center"),C(p,"class","flex justify-center"),C(h,"class","flex justify-center")},m(e,t){Je(document.head,r),s(e,I,t),s(e,k,t),s(e,W,t),_(u,e,t),s(e,q,t),s(e,g,t),s(e,N,t),s(e,f,t),s(e,P,t),s(e,b,t),s(e,D,t),_(w,e,t),s(e,V,t),s(e,v,t),s(e,B,t),s(e,m,t),s(e,G,t),s(e,y,t),s(e,Y,t),s(e,d,t),s(e,z,t),_(M,e,t),s(e,F,t),s(e,T,t),s(e,S,t),_(j,e,t),s(e,A,t),s(e,J,t),s(e,X,t),s(e,p,t),s(e,Q,t),s(e,$,t),s(e,O,t),s(e,h,t),s(e,K,t),_(U,e,t),s(e,ee,t),s(e,x,t),te=!0},p:ve,i(e){te||(E(u.$$.fragment,e),E(w.$$.fragment,e),E(M.$$.fragment,e),E(j.$$.fragment,e),E(U.$$.fragment,e),te=!0)},o(e){L(u.$$.fragment,e),L(w.$$.fragment,e),L(M.$$.fragment,e),L(j.$$.fragment,e),L(U.$$.fragment,e),te=!1},d(e){e&&(a(I),a(k),a(W),a(q),a(g),a(N),a(f),a(P),a(b),a(D),a(V),a(v),a(B),a(m),a(G),a(y),a(Y),a(d),a(z),a(F),a(T),a(S),a(A),a(J),a(X),a(p),a(Q),a($),a(O),a(h),a(K),a(ee),a(x)),a(r),R(u,e),R(w,e),R(M,e),R(j,e),R(U,e)}}}const Ce='{"title":"Embed the Dataset Viewer in a webpage","local":"embed-the-dataset-viewer-in-a-webpage","sections":[{"title":"Parameters","local":"parameters","sections":[],"depth":2}],"depth":1}';function ke(ae){return ye(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class Ee extends Me{constructor(r){super(),Te(this,r,ke,Ue,we,{})}}export{Ee as component};
