From d3c9d81724bf1b2a9cdd01f416fd39f7137f8380 Mon Sep 17 00:00:00 2001
From: Bertrand CHEVRIER <bertrand@huggingface.co>
Date: Mon, 13 Nov 2023 13:33:41 +0100
Subject: [PATCH] Add gallery component doc (#1093)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* add gallery component doc

* wording

* Apply suggestions from code review

Co-authored-by: Victor Muštar <victor.mustar@gmail.com>

* dark mode images

* Update model-cards-components.md

---------

Co-authored-by: Victor Muštar <victor.mustar@gmail.com>
---
 docs/hub/_toctree.yml              |  2 ++
 docs/hub/model-cards-components.md | 43 ++++++++++++++++++++++++++++++
 2 files changed, 45 insertions(+)
 create mode 100644 docs/hub/model-cards-components.md

diff --git a/docs/hub/_toctree.yml b/docs/hub/_toctree.yml
index 0c28a47e6..68760c34a 100644
--- a/docs/hub/_toctree.yml
+++ b/docs/hub/_toctree.yml
@@ -46,6 +46,8 @@
       title: Model Card Guidebook
     - local: model-card-landscape-analysis
       title: Landscape Analysis
+    - local: model-cards-components
+      title: Card Components
   - local: models-gated
     title: Gated Models
   - local: models-uploading
diff --git a/docs/hub/model-cards-components.md b/docs/hub/model-cards-components.md
new file mode 100644
index 000000000..a325d7acf
--- /dev/null
+++ b/docs/hub/model-cards-components.md
@@ -0,0 +1,43 @@
+# Model Card components
+
+**Model Card Components** 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 [this discussion](https://huggingface.co/spaces/huggingchat/chat-ui/discussions/312).
+
+## The Gallery component
+
+Add the `<Gallery />` component to your text-to-image model card to showcase your images generation.
+
+For example, 
+```md
+
+<Gallery />
+
+## Model description
+
+TintinIA is fine-tuned version of Stable-Diffusion-xl trained on 125 comics panels from Tintin album. 
+
+```
+
+
+<div class="flex justify-center">
+<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"/>
+</div>
+
+The `<Gallery/>` component will use your Model Card [widget metadata](/docs/hub/models-widgets-examples#text-to-image) to display the images with each associated prompt. 
+
+```yaml
+widget:
+- text: "drawing of tintin in a shop"
+  output:
+    url: "images/shop.png"
+- text: "drawing of tintin watching rugby"
+  output:
+    url: "images/rugby.png"
+  parameters:
+    negative_prompt: "blurry"
+- text: "tintin working at the office"
+  output:
+    url: "images/office.png"
+```
+
+> Hint: Support of Card Components through the GUI editor coming soon...