From 3a844407acc22db69d1d2f016c02cdc6a50b07c8 Mon Sep 17 00:00:00 2001 From: Bertrand CHEVRIER Date: Fri, 10 Nov 2023 09:36:58 +0100 Subject: [PATCH 1/5] add gallery component doc --- docs/hub/_toctree.yml | 2 ++ docs/hub/model-cards-components.md | 39 ++++++++++++++++++++++++++++++ 2 files changed, 41 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..c7fdcd871 --- /dev/null +++ b/docs/hub/model-cards-components.md @@ -0,0 +1,39 @@ +# Model Card components + +Model cards supports additionnal components you can place in your markdown. + +## The Gallery component + +To display an image gallery in your model card, add the `` anywhere in your markdown. + +For example, +```md + + + +## Model description + +TintinIA is fine-tuned version of Stable-Diffusion-xl trained on 125 comics panels from Tintin album. + +``` + +
+ +
+ +The gallery uses the card's [widget metadata](/docs/hub/models-widgets-examples#text-to-image) to display the images and 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" +``` From 7bcec40ce68b86203e0faea50c9f1b2af12c371b Mon Sep 17 00:00:00 2001 From: Bertrand CHEVRIER Date: Fri, 10 Nov 2023 09:40:01 +0100 Subject: [PATCH 2/5] wording --- docs/hub/model-cards-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/hub/model-cards-components.md b/docs/hub/model-cards-components.md index c7fdcd871..47a54b5a6 100644 --- a/docs/hub/model-cards-components.md +++ b/docs/hub/model-cards-components.md @@ -4,7 +4,7 @@ Model cards supports additionnal components you can place in your markdown. ## The Gallery component -To display an image gallery in your model card, add the `` anywhere in your markdown. +Add the `` component to your text-to-image model card to showcase your images generation. For example, ```md From 1fb7b97a2f21bbdd02a55c91c2f50458c02584da Mon Sep 17 00:00:00 2001 From: Bertrand CHEVRIER Date: Fri, 10 Nov 2023 15:08:09 +0100 Subject: [PATCH 3/5] Apply suggestions from code review MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Victor Muštar --- docs/hub/model-cards-components.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/hub/model-cards-components.md b/docs/hub/model-cards-components.md index 47a54b5a6..961137767 100644 --- a/docs/hub/model-cards-components.md +++ b/docs/hub/model-cards-components.md @@ -1,6 +1,6 @@ # Model Card components -Model cards supports additionnal components you can place in your markdown. +**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 @@ -21,7 +21,7 @@ TintinIA is fine-tuned version of Stable-Diffusion-xl trained on 125 comics pane -The gallery uses the card's [widget metadata](/docs/hub/models-widgets-examples#text-to-image) to display the images and prompt. +The `` 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: From a26deb2f2df42fc393201128d2182c2ccdd71d0a Mon Sep 17 00:00:00 2001 From: Bertrand CHEVRIER Date: Mon, 13 Nov 2023 10:29:47 +0100 Subject: [PATCH 4/5] dark mode images --- docs/hub/model-cards-components.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/hub/model-cards-components.md b/docs/hub/model-cards-components.md index 961137767..feed48a24 100644 --- a/docs/hub/model-cards-components.md +++ b/docs/hub/model-cards-components.md @@ -17,8 +17,10 @@ TintinIA is fine-tuned version of Stable-Diffusion-xl trained on 125 comics pane ``` +
- + +
The `` component will use your Model Card [widget metadata](/docs/hub/models-widgets-examples#text-to-image) to display the images with each associated prompt. From e2ea2347c52e39b8b9bf44808889d4022b38d867 Mon Sep 17 00:00:00 2001 From: Bertrand CHEVRIER Date: Mon, 13 Nov 2023 10:38:38 +0100 Subject: [PATCH 5/5] Update model-cards-components.md --- docs/hub/model-cards-components.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/hub/model-cards-components.md b/docs/hub/model-cards-components.md index feed48a24..a325d7acf 100644 --- a/docs/hub/model-cards-components.md +++ b/docs/hub/model-cards-components.md @@ -23,7 +23,7 @@ TintinIA is fine-tuned version of Stable-Diffusion-xl trained on 125 comics pane -The `` component will use your Model Card [widget metadata](/docs/hub/models-widgets-examples#text-to-image) to display the images with each associated prompt. +The `` 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: @@ -39,3 +39,5 @@ widget: output: url: "images/office.png" ``` + +> Hint: Support of Card Components through the GUI editor coming soon...