[Widget docs] Add width="450" to widget outputs screenshots (#1077)

huggingface · Nov 2, 2023 · e24c7e1 · e24c7e1
1 parent f37c2bc
commit e24c7e1
Showing 1 changed file with 6 additions and 6 deletions.
diff --git a/docs/hub/models-widgets.md b/docs/hub/models-widgets.md
@@ -105,8 +105,8 @@ widget:
 ```
 
 <div class="flex justify-center">
-<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-textgen-light.png"/>
-<img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-textgen-dark.png"/>
+<img class="block dark:hidden" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-textgen-light.png"/>
+<img class="hidden dark:block" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-textgen-dark.png"/>
 </div>
 
 The `output` property should be a YAML dictionary that represents the Inference API output.
@@ -126,8 +126,8 @@ widget:
 ```
 
 <div class="flex justify-center">
-<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-audiocls-light.png"/>
-<img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-audiocls-dark.png"/>
+<img class="block dark:hidden" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-audiocls-light.png"/>
+<img class="hidden dark:block" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-audiocls-dark.png"/>
 </div>
 
 Finally, for a model that outputs an image, audio, or any other kind of asset, the output should include a `url` property linking to either a file name or path inside the repo or a remote URL. For example, for a text-to-image model:
@@ -140,8 +140,8 @@ widget:
 ```
 
 <div class="flex justify-center">
-<img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-text2img-light.png"/>
-<img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-text2img-dark.png"/>
+<img class="block dark:hidden" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-text2img-light.png"/>
+<img class="hidden dark:block" width="450" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/infrence-examples-text2img-dark.png"/>
 </div>
 
 We can also surface the example outputs in the Hugging Face UI, for instance, for a text-to-image model to display a gallery of cool image generations.