Add gallery component doc (#1093)

* add gallery component doc * wording * Apply suggestions from code review Co-authored-by: Victor Muštar <[email protected]> * dark mode images * Update model-cards-components.md --------- Co-authored-by: Victor Muštar <[email protected]>
huggingface · Nov 13, 2023 · d3c9d81 · d3c9d81
1 parent 417d8d6
commit d3c9d81
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 0 deletions.
diff --git 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
@@ -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...