Improve Gallery component documentation (#1507)

* Improve Gallery component documentation Add video support mention * Update docs/hub/model-cards-components.md Co-authored-by: Pedro Cuenca <[email protected]> --------- Co-authored-by: Pedro Cuenca <[email protected]>
huggingface · Dec 11, 2024 · 51965ff · 51965ff
1 parent 258f925
commit 51965ff
Showing 1 changed file with 19 additions and 18 deletions.
diff --git a/docs/hub/model-cards-components.md b/docs/hub/model-cards-components.md
@@ -4,26 +4,11 @@
 
 ## The Gallery component
 
-Add the `<Gallery />` component to your text-to-image model card to showcase your images generation.
+The `<Gallery />` component can be used in your model card to showcase your generated images and videos.
 
-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>
+### How to use it?
 
-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. 
+1. Update your Model Card [widget metadata](/docs/hub/models-widgets-examples#text-to-image) to add the media you want to showcase. 
 
 ```yaml
 widget:
@@ -40,4 +25,20 @@ widget:
     url: "images/office.png"
 ```
 
+2. Add the `<Gallery />` component to your card. The widget metadata will be used by the `<Gallery />` component to display the media with each associated prompt.
+```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>
+
 > Hint: Support of Card Components through the GUI editor coming soon...