import{s as st,n as lt,o as at}from"../chunks/scheduler.d6170356.js";import{S as nt,i as ot,g as i,s as a,r as y,A as it,h as p,f as s,c as n,j as tt,u as b,x as J,k as R,y as pt,a as l,v as $,d as B,t as v,w as I}from"../chunks/index.fcd4cc08.js";import{C as et}from"../chunks/CodeBlock.7b16bdef.js";import{H as N,E as rt}from"../chunks/EditOnGithub.da2b595c.js";function mt(Q){let o,U,E,C,c,_,u,z='<strong>Model Card Components</strong> are special elements that you can inject directly into your Model Card markdown to display powerful custom components in your model page. These components are authored by us, feel free to share ideas about new Model Card component in <a href="https://huggingface.co/spaces/huggingface/HuggingDiscussions/discussions/17" rel="nofollow">this discussion</a>.',k,d,G,M,P="The <code>&lt;Gallery /&gt;</code> component can be used in your model card to showcase your generated images and videos.",x,h,Z,g,F='<li>Update your Model Card <a href="/docs/hub/models-widgets-examples#text-to-image">widget metadata</a> to add the media you want to showcase.</li>',W,f,q,r,O="<li>Add the <code>&lt;Gallery /&gt;</code> component to your card. The widget metadata will be used by the <code>&lt;Gallery /&gt;</code> component to display the media with each associated prompt.</li>",A,j,L,m,D='<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/models-gallery.png"/> <img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/models-gallery-dark.png"/>',S,w,K="<p>Hint: Support of Card Components through the GUI editor coming soon…</p>",V,T,X,H,Y;return c=new N({props:{title:"Model Card components",local:"model-card-components",headingTag:"h1"}}),d=new N({props:{title:"The Gallery component",local:"the-gallery-component",headingTag:"h2"}}),h=new N({props:{title:"How to use it?",local:"how-to-use-it",headingTag:"h3"}}),f=new et({props:{code:"d2lkZ2V0JTNBJTBBLSUyMHRleHQlM0ElMjAlMjJkcmF3aW5nJTIwb2YlMjB0aW50aW4lMjBpbiUyMGElMjBzaG9wJTIyJTBBJTIwJTIwb3V0cHV0JTNBJTBBJTIwJTIwJTIwJTIwdXJsJTNBJTIwJTIyaW1hZ2VzJTJGc2hvcC5wbmclMjIlMEEtJTIwdGV4dCUzQSUyMCUyMmRyYXdpbmclMjBvZiUyMHRpbnRpbiUyMHdhdGNoaW5nJTIwcnVnYnklMjIlMEElMjAlMjBvdXRwdXQlM0ElMEElMjAlMjAlMjAlMjB1cmwlM0ElMjAlMjJpbWFnZXMlMkZydWdieS5wbmclMjIlMEElMjAlMjBwYXJhbWV0ZXJzJTNBJTBBJTIwJTIwJTIwJTIwbmVnYXRpdmVfcHJvbXB0JTNBJTIwJTIyYmx1cnJ5JTIyJTBBLSUyMHRleHQlM0ElMjAlMjJ0aW50aW4lMjB3b3JraW5nJTIwYXQlMjB0aGUlMjBvZmZpY2UlMjIlMEElMjAlMjBvdXRwdXQlM0ElMEElMjAlMjAlMjAlMjB1cmwlM0ElMjAlMjJpbWFnZXMlMkZvZmZpY2UucG5nJTIy",highlighted:`<span class="hljs-attr">widget:</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">text:</span> <span class="hljs-string">&quot;drawing of tintin in a shop&quot;</span>
  <span class="hljs-attr">output:</span>
    <span class="hljs-attr">url:</span> <span class="hljs-string">&quot;images/shop.png&quot;</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">text:</span> <span class="hljs-string">&quot;drawing of tintin watching rugby&quot;</span>
  <span class="hljs-attr">output:</span>
    <span class="hljs-attr">url:</span> <span class="hljs-string">&quot;images/rugby.png&quot;</span>
  <span class="hljs-attr">parameters:</span>
    <span class="hljs-attr">negative_prompt:</span> <span class="hljs-string">&quot;blurry&quot;</span>
<span class="hljs-bullet">-</span> <span class="hljs-attr">text:</span> <span class="hljs-string">&quot;tintin working at the office&quot;</span>
  <span class="hljs-attr">output:</span>
    <span class="hljs-attr">url:</span> <span class="hljs-string">&quot;images/office.png&quot;</span>`,wrap:!1}}),j=new et({props:{code:"JTBBJTNDR2FsbGVyeSUyMCUyRiUzRSUwQSUwQSUyMyUyMyUyME1vZGVsJTIwZGVzY3JpcHRpb24lMEElMEFUaW50aW5JQSUyMGlzJTIwZmluZS10dW5lZCUyMHZlcnNpb24lMjBvZiUyMFN0YWJsZS1EaWZmdXNpb24teGwlMjB0cmFpbmVkJTIwb24lMjAxMjUlMjBjb21pY3MlMjBwYW5lbHMlMjBmcm9tJTIwVGludGluJTIwYWxidW0uJTIwJTBB",highlighted:`
<span class="language-xml"><span class="hljs-tag">&lt;<span class="hljs-name">Gallery</span> /&gt;</span></span>

<span class="hljs-section">## Model description</span>

TintinIA is fine-tuned version of Stable-Diffusion-xl trained on 125 comics panels from Tintin album. 
`,wrap:!1}}),T=new rt({props:{source:"https://github.com/huggingface/hub-docs/blob/main/docs/hub/model-cards-components.md"}}),{c(){o=i("meta"),U=a(),E=i("p"),C=a(),y(c.$$.fragment),_=a(),u=i("p"),u.innerHTML=z,k=a(),y(d.$$.fragment),G=a(),M=i("p"),M.innerHTML=P,x=a(),y(h.$$.fragment),Z=a(),g=i("ol"),g.innerHTML=F,W=a(),y(f.$$.fragment),q=a(),r=i("ol"),r.innerHTML=O,A=a(),y(j.$$.fragment),L=a(),m=i("div"),m.innerHTML=D,S=a(),w=i("blockquote"),w.innerHTML=K,V=a(),y(T.$$.fragment),X=a(),H=i("p"),this.h()},l(t){const e=it("svelte-u9bgzb",document.head);o=p(e,"META",{name:!0,content:!0}),e.forEach(s),U=n(t),E=p(t,"P",{}),tt(E).forEach(s),C=n(t),b(c.$$.fragment,t),_=n(t),u=p(t,"P",{"data-svelte-h":!0}),J(u)!=="svelte-h2nkcr"&&(u.innerHTML=z),k=n(t),b(d.$$.fragment,t),G=n(t),M=p(t,"P",{"data-svelte-h":!0}),J(M)!=="svelte-gu3ewl"&&(M.innerHTML=P),x=n(t),b(h.$$.fragment,t),Z=n(t),g=p(t,"OL",{"data-svelte-h":!0}),J(g)!=="svelte-1bv1i6r"&&(g.innerHTML=F),W=n(t),b(f.$$.fragment,t),q=n(t),r=p(t,"OL",{start:!0,"data-svelte-h":!0}),J(r)!=="svelte-1vk7k8r"&&(r.innerHTML=O),A=n(t),b(j.$$.fragment,t),L=n(t),m=p(t,"DIV",{class:!0,"data-svelte-h":!0}),J(m)!=="svelte-185eq7n"&&(m.innerHTML=D),S=n(t),w=p(t,"BLOCKQUOTE",{"data-svelte-h":!0}),J(w)!=="svelte-tmvbpg"&&(w.innerHTML=K),V=n(t),b(T.$$.fragment,t),X=n(t),H=p(t,"P",{}),tt(H).forEach(s),this.h()},h(){R(o,"name","hf:doc:metadata"),R(o,"content",ct),R(r,"start","2"),R(m,"class","flex justify-center")},m(t,e){pt(document.head,o),l(t,U,e),l(t,E,e),l(t,C,e),$(c,t,e),l(t,_,e),l(t,u,e),l(t,k,e),$(d,t,e),l(t,G,e),l(t,M,e),l(t,x,e),$(h,t,e),l(t,Z,e),l(t,g,e),l(t,W,e),$(f,t,e),l(t,q,e),l(t,r,e),l(t,A,e),$(j,t,e),l(t,L,e),l(t,m,e),l(t,S,e),l(t,w,e),l(t,V,e),$(T,t,e),l(t,X,e),l(t,H,e),Y=!0},p:lt,i(t){Y||(B(c.$$.fragment,t),B(d.$$.fragment,t),B(h.$$.fragment,t),B(f.$$.fragment,t),B(j.$$.fragment,t),B(T.$$.fragment,t),Y=!0)},o(t){v(c.$$.fragment,t),v(d.$$.fragment,t),v(h.$$.fragment,t),v(f.$$.fragment,t),v(j.$$.fragment,t),v(T.$$.fragment,t),Y=!1},d(t){t&&(s(U),s(E),s(C),s(_),s(u),s(k),s(G),s(M),s(x),s(Z),s(g),s(W),s(q),s(r),s(A),s(L),s(m),s(S),s(w),s(V),s(X),s(H)),s(o),I(c,t),I(d,t),I(h,t),I(f,t),I(j,t),I(T,t)}}}const ct='{"title":"Model Card components","local":"model-card-components","sections":[{"title":"The Gallery component","local":"the-gallery-component","sections":[{"title":"How to use it?","local":"how-to-use-it","sections":[],"depth":3}],"depth":2}],"depth":1}';function ut(Q){return at(()=>{new URLSearchParams(window.location.search).get("fw")}),[]}class ft extends nt{constructor(o){super(),ot(this,o,ut,mt,st,{})}}export{ft as component};
