J'ai créé Thumbnail Prompt Builder : une petite expérience pour déployer naturellement des images de vignettes créées par l'IA sur différentes plateformes

Lors de la création d'images de couverture pour les articles de blog, il est maintenant possible de créer des visuels de très bonne qualité en utilisant des outils de génération d'images par IA comme ChatGPT.

Cependant, lors de la mise en œuvre réelle, il y a un problème.

Les tailles d'image requises varient trop selon la plateforme.

Par exemple, avec l'outil de cette fois-ci, nous avons envisagé les résultats suivants à titre final.

Au départ, je pensais : « Et si nous créions une seule image carrée et la déployions sur toutes les tailles ? Ce serait pratique. »

C'est là que j'ai commencé à créer Thumbnail Prompt Builder.

Ce que je voulais créer initialement

L'objectif initial était simple.

Un outil qui crée des invites pour les générateurs d'images IA en fonction du titre et de la description de l'article que vous entrez.

De plus, lorsque vous téléchargez l'image carrée générée,

• Instagram
• Thumbnail
• X
• Cover

nous voulions la convertir automatiquement dans les différentes tailles de.

En d'autres termes, voici notre idéal.

Entrez les informations de l'article
↓
Créez une invite de génération d'image
↓
Générez une image carrée
↓
Déployer automatiquement vers les différentes tailles de médias

Au départ, la conception était assez simple.

« Si nous plaçons le sujet principal au centre et créons de l'espace blanc autour, cela devrait fonctionner sur n'importe quel médium »

c'est ce que nous pensions.

Problèmes découverts en testant réellement

Cependant, des problèmes sont apparus lors de la mise en œuvre effective des images.

En particulier, l'image de couverture.

Lors de la conversion d'une image carrée en format paysage,

• le haut et le bas sont considérablement recadrés
• le sujet principal devient anormalement petit
• les bordures de l'arrière-plan deviennent visibles
• la composition qui fonctionnait en format carré se désagrège en couverture

Ces problèmes se sont produits.

Au début, nous avons testé plusieurs approches en consultation avec Codex.

Par exemple,

• Définir la SAFE ZONE au centre 60 %
• Concentrer le sujet principal au centre
• Interdire les objets d'arrière-plan
• Étendre les côtés gauche et droit avec la couleur d'arrière-plan uniquement
• Ajouter un fondu aux bords de l'image originale
• Réduire légèrement pour X / Cover afin d'éviter les coupures

et ainsi de suite.

Toutes ces approches ont eu une certaine efficacité.

Cependant, un problème fondamental demeure.

Il existe une limite à créer naturellement une Cover à partir d'une image carrée.

La couverture a un rapport d'aspect très large de 1280×560.

Si vous placez un PC, une personne, une carte UI, des icônes, etc. dans une image carrée, elle peut sembler correcte au format carré, mais la couverture coupera beaucoup les parties supérieure et inférieure.

À l'inverse, si vous essayez d'inclure tout, le sujet principal devient trop petit.

Nous avons décidé de modifier la conception à ce stade.

Conclusion finale : diviser les invites en deux séries

Finalement, nous avons adopté une conception divisant les invites en deux.

Instagram / Thumbnail 用プロンプト
X / Cover 用プロンプト

En d'autres termes, au lieu de gérer l'intégralité avec une seule image carrée,

正方形画像
→ Instagram / Thumbnail 用

横長画像
→ X / Cover 用

c'est cette approche.

C'était un changement de direction très important.

Au départ, nous visions un outil qui « créerait tout à partir d'une seule image », mais en considérant l'utilisation réelle, nous avons réalisé que il était plus naturel de séparer d'emblée les compositions selon chaque support médias.

En dernier recours, un designer pourrait ajuster la mise en page, mais nous voulions créer quelque chose que même les personnes ne sachant pas utiliser Figma puissent exploiter complètement avec l'IA seule.

Ce que l'outil actuel peut faire

Avec le Thumbnail Prompt Builder actuel, en entrant les informations de l'article, deux types de prompts sont générés.

1. Pour Instagram / Thumbnail

Un prompt pour un accroche visuelle carrée.

• Image carrée 1:1
• Sujet principal au centre
• Espaces blancs adaptés pour le déploiement vertical sur Instagram
• Composition facile à lire comme miniature de blog

en gardant cet aspect à l'esprit.

2. X / Couverture

Invite conçue pour les images d'accroche en format paysage.

• Composition paysage dès le départ
• Les bords supérieur et inférieur ne sont pas facilement coupés dans la couverture
• Prévoir des marges latérales
• Moins susceptible de déchirer sur X et Couverture

ces instructions sont intégrées.

De cette façon, l'image de couverture ne semble plus « un carré étiré de force en format paysage ».

La mise en page des images a également été révisée en deux systèmes

Les téléchargements d'images ont également été divisés en deux catégories.

• Téléchargement d'image carrée
• Téléchargement d'image panoramique

À partir d'une image carrée, nous générons

• instagram.png
• thumbnail.png

.

À partir d'une image panoramique, nous générons

• x.png
• cover.png
• [email protected]

.

Pour Cover uniquement, nous avons également généré une version Retina à double résolution.

Au départ, j'ai essayé de générer des versions à double résolution pour toutes les images, mais Instagram et X compressent facilement les images lors du partage, et Thumbnail est déjà suffisamment volumineux. J'ai finalement décidé de générer la double résolution pour Cover uniquement.

Éviter que le contenu saisi ne disparaisse lors du rechargement

Un problème discret que j'ai rencontré pendant le développement était que le formulaire d'entrée disparaissait lors du rechargement de la page.

Quand j'travaillais avec Codex et que je mettais à jour la page, le contenu en cours de saisie disparaissait parfois.

C'était un peu stressant, j'ai donc renforcé la fonction de sauvegarde.

Désormais, je

• localStorage
• Cookie

les deux pour enregistrer le contenu saisi.

Le côté Cookie sert de sauvegarde de 7 jours.

Ainsi, même en cas de rafraîchissement de la page ou de rechargement pendant le développement, le contenu saisi est plus facilement restauré.

Ce que j'ai appris en mettant en œuvre

La plus grande découverte de ce développement était que

la génération d'images par IA est plus stable quand on les crée dès le départ en fonction de l'usage plutôt que de les convertir après coup

.

Les images d'accroche en particulier présentent des différences de format importantes selon le support.

Une bonne composition au format carré et une bonne composition en mode Couverture ne sont pas les mêmes.

Si vous cherchez à tout uniformiser de force,

• le sujet principal devient trop petit
• les marges deviennent trop importantes
• le haut et le bas sont coupés
• l'arrière-plan devient antinatural

des problèmes apparaissent.

C'est pourquoi en fin de compte,

ne pas trop uniformiser séparer les prémisses de génération par cas d'usage

c'est la conception à laquelle nous nous sommes arrêtés.

Progresser en échangeant avec Codex

Cet outil n'avait pas de forme finale claire dès le départ.

En échangeant avec Codex,

• Déployer les images carrées sur chaque support
• Éliminer les défaillances de l'extension de l'arrière-plan
• Réviser la SAFE ZONE
• Résoudre le problème du rétrécissement du sujet principal en couverture
• Organiser la définition des tailles
• Ajouter la sortie Retina
• Cependant, nous avons limité Retina à Cover uniquement.
• Diviser les invites en deux systèmes.
• Enregistrer le contenu saisi.

Nous avons progressivement modifié la conception selon ce processus.

L'idée initiale était de « faire de l'image carrée un master universel ».

Cependant, en testant les images et en améliorant le concept, nous avons finalement adopté une approche plus pragmatique : « séparer les formats carrés et paysages ».

Ce changement était intéressant.

Conclusion

Thumbnail Prompt Builder n'est pas simplement un outil de conversion de tailles d'images.

C'est plutôt un

outil complémentaire pour transformer les images d'en-tête créées par IA en une forme viable pour une utilisation opérationnelle réelle

.

Dans sa forme actuelle,

• Générer deux types de prompts de génération d'images à partir des informations de l'article
• Générer Instagram / Thumbnail à partir d'une image carrée
• Générer X / Cover à partir d'une image au format paysage
• Générer aussi la version Retina pour Cover uniquement
• Conserver le contenu saisi pendant une certaine période

jusqu'à ce point.

C'est devenu un peu plus complexe que prévu initialement, mais en contrepartie, nous pensons que cela offre une bien meilleure expérience d'utilisation en pratique.

Si nous devions continuer à l'améliorer à l'avenir,

• Basculement de modèle de prompt
• Gestion de la palette de couleurs par marque
• Sauvegarde d'exemples générés
• Parcours de sortie pour Notion et WordPress
• Intégration directe avec les générateurs d'images IA

J'aimerais aussi essayer d'autres options.

La génération d'images par IA est pratique, mais pour une utilisation réelle dans les articles ou les réseaux sociaux, il est nécessaire que les humains fassent une conception supplémentaire.

Nous souhaitons développer Thumbnail Prompt Builder comme un outil pour réduire légèrement cet « effort de conception ».