Better page thumbnails: use first image by default

[gwern]

Hub pages should provide better image thumbnails for use in previews on social media websites like Twitter or Reddit. This can be done by a user-configurable setting, and by a heuristic of using the first image in a model/project README as the default image thumbnail.

---

A concrete example: Stable Diffusion models are very hot image generative models now, and there are ever more finetuned models and variations. They usually come with image samples that in a nutshell reveal their capabilities to interested users.

An example of such a project is pony-diffusion, whose README contains 4 sample images which show off its capabilities & 3 of which would be decent thumbnails (such as the first one). The current thumbnail is:

	<meta property="og:image" content="https://thumbnails.huggingface.co/social-thumbnails/models/AstraliteHeart/pony-diffusion.png" />

It is not decent (copying for posterity):

Aside from the text contents being redundant with the page title / URL, it is completely illegible as a thumbnail because there is too much text which is at least 10x too small to be read, to the point where I was staring at it on Reddit wondering what on earth this smudge was supposed to be and started thinking about how HF really ought to do better:

A simple improvement which I use successfully on my own sites, and which I copied from Wikipedia which uses it likewise in its thumbnail popups, would be to take the first <img> in the README and use that as the thumbnail. eg in pony-diffusion's case it'd read:

<meta property="og:image" content="https://cdn.discordapp.com/attachments/1020199895694589953/1020200601780494386/000001.553325548.png" />

This also makes it easy for users like AstraliteHeart to change it if they want to: just change the obvious first image in your README which has pride of place.

(If there is no image at all, I would still suggest changing the text-swirl default image to something more legible.)

[julien-c]

hi, thanks for your feedback.

As a quick fix , repo authors can set a custom social thumbnail in the model card metadata (also works for datasets and Spaces): for instance i've opened a pull request to do it here: https://huggingface.co/AstraliteHeart/pony-diffusion/discussions/2

diff --git a/README.md b/README.md
index 7076eac878fca52e33e4e2795b2b4b97c0a7781e..737fe439180252273b2f73c739281c56ff91ea5e 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@ tags:
 - text-to-image
 license: bigscience-bloom-rail-1.0
 inference: false
-
+thumbnail: "https://cdn.discordapp.com/attachments/1020199895694589953/1020200601780494386/000001.553325548.png"
 ---
 
 # pony-diffusion - >nohooves

[osanseviero]

This has not been requested again and there is this solution, so will close this issue