Que fait Texte vers Image Élégante ?
- Version : 1.2.1
- Licence : MIT
- Auteur : Evan Song · github.com/Songhonglei
- Dépôt : https://github.com/Songhonglei/text-to-elegant-image
Transformez du contenu Markdown ou texte brut en une longue image magnifiquement mise en page. Fonctionne en générant un fichier HTML et en le capturant avec le navigateur headless Puppeteer.
Structure des fichiers de ressources
resources/
├── styles/ # 18 styles, un fichier par style (CSS + exemple HTML + mappage des variables de composants + décoration)
│ ├── 01_cyberpunk.md … 18_vivid.md
│ └── _BASE.md # Squelette HTML générique + normes de mise en page + références de bibliothèques CSS open source
└── components.css # Bibliothèque de composants visuels génériques (carte KPI/barre de progression/barre de comparaison/donut/processus/timeline, etc.)
Discipline de lecture : ne lire que les fichiers nécessaires. Une fois le style déterminé, lire les deux fichiers styles/NN_key.md + styles/_BASE.md correspondants, sans lire les autres fichiers de style. Si le contenu contient des données/processus/comparaisons, lire également components.css.
Sélection du style
18 styles au total :
| # | Fichier | Style | Mots-clés visuels | Idéal pour |
|---|---|---|---|---|
| 1 | 01_cyberpunk.md | Cyberpunk (défaut) | Sombre/Néon/Grille SVG en nid d'abeille | Analyse IA, rapports technologiques, affiches cool |
| 2 | 02_minimal.md | Minimaliste Élégant | Fond blanc/Serif/Espaces blancs/Papier texturé bruité | Essais littéraires, journaux intimes, connaissances humaines |
| 3 | 03_apple.md | Qualité Apple | Gris clair/Cartes en verre dépoli/Fenêtres colorées | Outils de productivité, résumés, méthodologies |
| 4 | 04_cowork.md | Cowork Léger Tech | Blanc/gris Apple/Bleu tech/Hero en verre dépoli | Partage interne, présentation d'outils IA, manuels produits |
| 5 | 05_newspaper.md | Journal/Magazine | Beige/Grain de plomb/Impression noir et blanc | Événements historiques, timelines, récits profonds |
| 6 | 06_bloomberg.md | Terminal Bloomberg | Noir pur/Texture CRT/Lettres orange lumineuses | Rapports de données, comparaisons d'indicateurs, fintech |
| 7 | `07_ink.md** | Rouleau d'encre de Chine | Papier de riz délavé/Rouge vermillon/Trait de pinceau horizontal | Histoire chinoise, art et culture, esthétique orientale |
| 8 | `08_steampunk.md** | Steampunk | Brun foncé/Engrenages cuivrés/Rivets en nid d'abeille/Manomètres | Histoire industrielle, sauts technologiques, esthétique mécanique |
| 9 | 09_xhs.md | Style Xiaohongshu | Fond blanc/Rouge officiel/Cartes à coins arrondis | Notes de connaissances, guides de vie, partage de savoir |
| 10 | 10_morandi.md | Gris élégant Morandi | Fond beige chaud/Gris-vert/Barres de couleurs/Espaces blancs retenus | Méthodologies de marque, résumés, essais humanistes |
| 11 | 11_glass.md | Verre dépoli | Fond dégradé coloré/Boules de lumière/Cartes givrées | Site SaaS, pages d'activité, présentation de fonctionnalités |
| 12 | 12_palace.md | Style Palais | Fond bois brun foncé/Rouge vermillon/Lettres dorées/Motif de sceau | Histoire chinoise, fêtes de style national, expositions culturelles |
| 13 | 13_fresh.md | Vert Naturel Frais | Fond menthe clair/Vert forêt/Éléments de feuilles | Santé et environnement, mode de vie, guides scientifiques |
| 14 | 14_earthy.md | Bois Terrestre | Tissu lin/Terracotta orange/Cartes cousues main | Café artisanal, esthétique de vie, histoires de marque |
| 15 | `15_dreamy.md** | Violet Rêveur Élégant | Fond lavande/Dégradé violet/Étoiles scintillantes | Beauté mode, émotions, affiches d'événements |
| 16 | 16_macaron.md | Macaron Pastel | Fond rose crème/Pois/Sucreries numérotées | Desserts puériculture, partage de vie, vœux de fête |
| 17 | 17_carbon.md | Minimaliste Sombre | Fond gris charbon/Bleu-vert/Numéros de ligne terminal | Documentation technique, contenu développeur, rapports de données |
| 18 | 18_vivid.md | Dégradé Dynamique | Dégradé violet-rose-orange/Blocs de couleur fluides/Cartes à bordure dégradée | Promotions, marques jeunes, musique divertissement |
Deux modes du style Xiaohongshu (style 9)
Le style 9 intègre deux sous-modes, spécifiés par l'utilisateur ; par défaut, mode A :
| Mode | Mot déclencheur | Ambiance |
|---|---|---|
| A — Formel simplifié | "simple"/"formel"/"propre"/"sensation de connaissance" | Bordures fines petits angles arrondis, numéros soulignés, grande respirabilité |
| B — Riche et vivant | "vivant"/"riche"/"mignon"/"vie"/"amusant" | Rose clair grands angles arrondis, numéros cercles pleins, lignes décoratives ondulées, footer avec texte d'incitation |
Après génération, informer l'utilisateur du mode actuel et suggérer de changer :
"Généré en version simplifiée. Si vous voulez une version plus vivante, dites « fais une version vivante »."
Guide de sélection du style
Si l'utilisateur ne précise pas le style, recommander automatiquement en fonction du type de contenu, et informer l'utilisateur des options :
Type de contenu → Style recommandé
──────────────────────────────────────
Tech/IA/Analyse de données → Cyberpunk ou Terminal Bloomberg
Histoire/Timeline/Récit → Journal/Magazine ou Rouleau d'encre de Chine (histoire chinoise)
Industrie/Mécanique/Saut techno → Steampunk
Efficacité/Méthodologie/Résumé → Qualité Apple ou Cowork Léger Tech
Littérature/Journal/Humanités → Minimaliste Élégant ou Rouleau d'encre de Chine
Partage interne entreprise → Cowork Léger Tech
Notes de connaissances/Guides vie → Style Xiaohongshu
Méthodologie marque/Résumé/Haut de gamme → Gris élégant Morandi
SaaS/Page produit/Site activité → Verre dépoli ou Dégradé Dynamique
Histoire chinoise/National/Expo → Style Palais ou Rouleau d'encre de Chine
Santé/Environnement/Mode de vie → Vert Naturel Frais
Artisanat/Café/Esthétique vie → Bois Terrestre
Beauté/Mode/Émotions/Romantique → Violet Rêveur Élégant
Desserts/Puériculture/Mignon → Macaron Pastel
Doc technique/Développeur/Confort visuel → Minimaliste Sombre
Activité/Promotion/Tendance/Jeune → Dégradé Dynamique
Exemple de discours de recommandation :
"D'après le contenu, je recommande le style « Xiaohongshu » (impression de notes, adapté à la diffusion) ou « Qualité Apple » (plus outil). 18 styles disponibles, vous pouvez aussi demander directement un style (ex. « Palais », « Morandi », « Verre dépoli »)."
Correspondance des mots-clés pour les préférences stylistiques de l'utilisateur :
- "Sensation tech"/"Cool"/"Sombre"/"Néon" → Cyberpunk
- "Simple"/"Blanc"/"Propre"/"Artistique" → Minimaliste Élégant
- "Style Apple"/"Moderne"/"Sensation produit" → Qualité Apple
- "Léger tech"/"Interne"/"Bleu"/"Bleu style Apple"/"Bleu tech" → Cowork Léger Tech
- "Journal"/"Magazine"/"Historique"/"Impression rétro" → Journal/Magazine
- "Données"/"Finance"/"Terminal"/"Bloomberg" → Terminal Bloomberg
- "Encre de Chine"/"Chinois"/"Oriental"/"Rouleau"/"Style ancien" → Rouleau d'encre de Chine
- "Vapeur"/"Punk"/"Mécanique"/"Couleur cuivre"/"Engrenage"/"Industriel rétro" → Steampunk
- "Xiaohongshu"/"Notes"/"Plante"/"Guide"/"Partage"/"Rouge" → Style Xiaohongshu (rouge officiel #FF2442)
- "Morandi"/"Gris élégant"/"Faible saturation"/"Calme"/"Haut de gamme" → Gris élégant Morandi
- "Verre"/"Verre dépoli"/"Givré"/"Transparent"/"Translucide"/"SaaS" → Verre dépoli
- "Palais"/"Cour"/"Mur rouge"/"Doré"/"Vermillon"/"Style national" → Style Palais
- "Frais"/"Vert"/"Naturel"/"Menthe"/"Écolo"/"Forêt" → Vert Naturel Frais
- "Couleur terre"/"Bois"/"Terracotta"/"Lin"/"Fait main"/"Chaleureux" → Bois Terrestre
- "Violet"/"Rêveur"/"Lavande"/"Romantique"/"Violet élégant" → Violet Rêveur Élégant
- "Macaron"/"Rose"/"Pastel"/"Doux"/"Mignon"/"Féminin" → Macaron Pastel
- "Sombre"/"Foncé"/"Noir minimaliste"/"Confort visuel"/"Sensation tech"/"Développeur" → Minimaliste Sombre
- "Dégradé"/"Dynamique"/"Tendance"/"Jeune"/"Coloré"/"Tension" → Dégradé Dynamique
Modes de mise en page (Longue image / Affiche)
Par défaut, sortie en longue image (560px, plusieurs blocs verticaux). Passer en mode affiche lorsque l'utilisateur dit "affiche"/"affiche citation"/"couverture"/"première image" :
| Mise en page | Mot déclencheur | Spécifications | Points clés de mise en page |
|---|---|---|---|
| Longue image (défaut) | "Longue image"/"Grande image"/non spécifié | Largeur 560px, hauteur adaptative | Zone titre + plusieurs blocs de contenu, contenu complet |
| Affiche citation | "Affiche"/"Citation"/"Image de partage" | Largeur 600px, hauteur 800px fixe (3:4) | Une citation clé agrandie centrée + grands espaces blancs + petite source, contenu limité à 30 caractères |
| Carte de couverture | "Couverture"/"Première image" | Largeur 600px, hauteur 800px fixe (3:4) | Grand titre + sous-titre + 2-3 phrases de points forts, rythme de couverture Xiaohongshu |
Mode affiche/couverture : choisir l'un des 18 styles pour ses couleurs et son ambiance, .container devient width: 600px; height: 800px; display: flex; flex-direction: column; justify-content: center; hauteur fixe centrée ; la commande de capture doit obligatoirement passer --fixed-height 800 pour ignorer l'adaptation de hauteur, largeur 600, soit :
node scripts/export_image.js <html> <output.png> 600 --fixed-height 800
Mode longue image (défaut) ne passe pas
--fixed-height, le script mesure automatiquement la hauteur réelle de.containeret coupe l'espace vide supplémentaire en bas. Marges de cadre : par défaut, le mode longue image ajoute 32px de cadre uniforme sur les quatre côtés du canvas (côtés gauche/droite générés par élargissement du canvas +margin:auto, haut/bas forcés par padding du body), bords équidistants, plus de collage aux bords — pas besoin de paramètre manuel. Si nécessaire, utiliser--frame <px>pour personnaliser la marge (ex.--frame 48), ou--frame 0pour désactiver le cadre et revenir au contenu collé. En mode fixe (--fixed-height), le conteneur occupe tout le canvas avec ses propres marges internes,--frameest automatiquement ignoré. Arrière-plan de carte : les 18 styles de.containeront tous par défaut un aspect carte (couleur de fond + contour + coins arrondis/ombres, chaque style avec ses propres teintes et ambiance, ex. contour néon cyberpunk, bordure papier encre de Chine, bloc de couleur unie Morandi), associé aux marges de cadre pour un effet d'encadrement "carte flottant sur le canvas" — pas de paramètre manuel, activé par défaut. Pour revenir à l'ancien aspect plat (contenu intégré au fond, sans bordure de carte), passer--flat:node scripts/export_image.js <html> <output.png> 560 --flat. ⚠️ Le style Verre dépoli (11_glass) a un fond de carte en verre givré lui-même ;--flatferait disparaître son effet visuel principal, déconseillé pour ce style. Pour la carte de couverture, il est suggéré d'ajouter des orbes de lumière douce en haut à droite/bas à droite (radial-gradient+ positionnement absolu) pour équilibrer l'espace blanc de l'alignement à gauche, évitant un vide important à droite.
Processus d'exécution
Étape 1 : Analyser la structure du contenu
Lire le contenu de l'utilisateur, extraire :
- Titre principal, sous-titre
- Citation clé (à afficher en grand)
- Blocs structurés (comparaison, liste, timeline, etc.)
Scan des opportunités de visualisation (important) : parcourir le contenu pour les chiffres clés, pourcentages, classements, tendances, processus, comparaisons, timelines — ceux-ci doivent être transformés en composants visuels (carte KPI, barre de progression, barre de comparaison, donut, étapes de processus, timeline, voir les commentaires dans resources/components.css), plutôt que mis en texte brut. S'il y a 2-3 chiffres clés, il faut une carte KPI ; s'il y a un classement/comparaison, il faut une barre de comparaison. L'illustration est la clé de la qualité d'une longue image.
Étape 2 : Lire les ressources du style et générer le HTML
- Après avoir déterminé le style, lire
resources/styles/<NN_key>.md(contenant le CSS du style, un exemple de structure HTML, le mappage des variables de composants, l'injection de polices, la décoration d'accent) etresources/styles/_BASE.md(squelette générique + normes de mise en page) - Si l'étape 1 a scanné des opportunités de visualisation, lire
resources/components.css, copier les segments CSS des composants nécessaires dans<style>, et copier également le bloc:rootdu « mappage des variables de composants » du fichier de style (les composants utilisent les variables--t2e-*pour les couleurs) - Si le fichier de style contient une section « injection de polices », ajouter le
<link>de la police dans<head> - Si le fichier de style contient une section « décoration d'accent », utiliser ces éléments décoratifs en priorité pour améliorer la reconnaissance
- Injecter le contenu dans le squelette, générer le HTML complet, sauvegarder avec l'outil
writedans/tmp/elegant_image_<timestamp>.html(le nom de l'outil estwrite, paswrite_to_file)
Règles de traitement du Footer (important) :
- Si l'utilisateur n'a pas spécifié d'informations sur l'auteur : écrire dans l'élément
.footerdu HTML la valeur par défaut :<nom du skill> @ <nom du modèle actuel>- Ex. :
text-to-elegant-image @ claude-4.6-sonnet
- Ex. :
- Si l'utilisateur a spécifié des informations sur l'auteur (ex. "auteur : Zhang San") : écrire le texte spécifié par l'utilisateur
- Si l'utilisateur demande explicitement pas de footer : ne pas générer l'élément
.footerdans le HTML, ajouter--no-footerà la capture
Ne pas écrire "Généré par <nom d'assistant>" ou tout identifiant IA dans le footer.
Étape 3 : Vérification des dépendances et initialisation (avant chaque utilisation)
Exécuter le script de configuration pour vérifier l'environnement :
bash <répertoire_du_skill>/scripts/setup.sh
- Vérifier les trois dépendances : Node.js (>= v18), Chrome/Chromium, puppeteer-core
- Si tout est prêt, passer directement, afficher
✔ Toutes les dépendances sont prêtes - Node.js / Chrome manquant : le script échoue et quitte (
exit 1), invitant à installer les dépendances manquantes (Node.js >= v18 / Chrome ou Chromium) - puppeteer-core manquant : le script indique "Installation en cours..." et exécute
npm install(le processus d'installation est visible, installe uniquement puppeteer-core comme dépendance de rendu)
Lorsque tout est prêt, le script revient très rapidement, sans impact sur les performances ; il est recommandé de l'exécuter avant chaque appel.
Étape 4 : Vérification des emojis (obligatoire avant la capture)
Il est strictement interdit d'utiliser des emojis lors de la génération du HTML — l'environnement headless manque de polices d'emojis colorés, ce qui les rendrait en carrés noirs illisibles. Alternatives :
| Usage original de l'emoji | Écriture alternative |
|---|---|
| Icône de chapitre (graphique/boule de cristal/carte) | Titre en texte pur, différencié par une barre de couleur border-left |
| Marqueurs d'état (check/croix/alerte) | Badge en bloc de couleur : <span class="badge-green">Entièrement automatique</span> |
| Symboles décoratifs | Supprimés, ou utiliser les éléments décoratifs d'accent du style (feuilles/étoiles/cachets, etc.) |
| Progrès/flèches | Pseudo-élément CSS ::before ou texte pur ->, · |
Après la génération, exécuter obligatoirement la vérification :
python3 <répertoire_du_skill>/scripts/check_emoji.py <chemin_du_fichier_HTML>
ÉCHEC (exit 1) → remplacer selon les numéros de ligne → relancer jusqu'à RÉUSSITE, avant de passer à la capture.
Étape 5 : Exécuter l'exportation de la capture
node <répertoire_du_skill>/scripts/export_image.js \
<chemin_absolu_du_fichier_HTML> \
<répertoire_sortie>/<nom_fichier>.png \
[largeur] [--author "informations auteur" | --no-footer]
Configuration du répertoire de sortie (lors de la première utilisation, guider l'utilisateur pour le configurer) :
Le répertoire de sortie est résolu par ordre de priorité (du plus élevé au plus bas) :
- Chemin de sortie explicitement passé dans la commande
- Variable d'environnement
T2EI_OUTPUT_DIR - Valeur par défaut :
./output(dossieroutput/dans le répertoire de travail courant)
💡 Guide pour la première utilisation : avant de générer la première longue image pour l'utilisateur, demander une fois "Dans quel répertoire souhaitez-vous exporter l'image ?"
- L'utilisateur ne précise pas → utiliser le défaut
./output- L'utilisateur spécifie un répertoire fixe → suggérer de l'écrire dans une variable d'environnement pour le rendre persistant :
echo 'export T2EI_OUTPUT_DIR="$HOME/mes-images"' >> ~/.bashrcEnsuite, ne plus demander.
Description des paramètres du Footer :
| Paramètre | Effet |
|---|---|
| Non passé (défaut) | Utiliser le footer déjà écrit dans le HTML (voir Étape 2) |
--author "texte personnalisé" | Remplacer le footer par le texte spécifié |
--no-footer | Supprimer complètement le footer |
Le script détecte automatiquement le chemin de Chrome/Chromium (Linux/macOS/WSL), attend automatiquement le chargement des webfonts (max 8s, ne bloque pas si le CDN est inaccessible), mesure automatiquement la hauteur du contenu pour un recadrage précis, et crée le répertoire de sortie s'il n'existe pas. Largeur par défaut 600px, sortie haute résolution en 2x deviceScaleFactor.
Étape 6 : Retourner le résultat et livrer l'image
Après une capture réussie, retourner à l'utilisateur le chemin local du PNG :
Image générée 🎉
Chemin local : <répertoire_sortie>/<nom_fichier>.png
L'utilisateur peut visualiser le PNG directement dans le système de fichiers / l'éditeur, ou le distribuer lui-même.
📌 À propos de la distribution automatique (réservé, non intégré pour l'instant) Cette version open source se concentre uniquement sur la génération "texte → longue image élégante", sans intégrer de capacité d'envoi automatique d'image via un canal de messagerie instantanée. Pour envoyer automatiquement l'image générée vers WeChat / Telegram / Slack etc., vous pouvez intégrer votre propre Bot / API de la plateforme correspondante après cette étape (les futures versions pourraient fournir des adaptateurs optionnels). Actuellement, veuillez demander à l'utilisateur de récupérer manuellement le PNG local et de le distribuer.
Changement de style refait (chemin à faible coût)
Lorsque l'utilisateur dit "remplace par le style XX" pour une longue image déjà générée : ne pas réécrire tout le HTML. Lire le nouveau fichier de style, remplacer uniquement le segment CSS du style dans <style> et le bloc :root du mappage des variables de composants (--t2e-*), et remplacer en masse le préfixe de classe de l'ancien style (ex. mo-*) par le nouveau préfixe (ex. fr-*) dans le HTML — les composants du squelette de chaque style sont isomorphes (header/title/subtitle/section-title/card/item/num/quote/tag/divider/footer), il suffit de les remplacer un par un. Puis relancer les étapes 4-6.
Mécanisme de repli
En cas d'échec de la capture (ex. navigateur non installé), le script génère le chemin du fichier HTML, invitant l'utilisateur à l'ouvrir dans un navigateur pour l'imprimer manuellement en PDF/image.
Consignes importantes
- Le troisième paramètre de
export_image.jspermet de spécifier la largeur (défaut 600px), avec un 2x deviceScaleFactor garantissant une sortie haute résolution - Ne pas référencer d'images externes ; les icônes sont réalisées avec des formes CSS pures ou des URI de données SVG inline, évitant les échecs de chargement réseau ; la seule ressource externe autorisée est le CDN de polices (fonts.googleapis.com, service public ; avec fallback sur les polices système, ne bloque pas)
- Chemin de sortie :
<répertoire_sortie>/<nom_fichier>.png(répertoire de sortie par défaut./output, configurable via la variable d'environnementT2EI_OUTPUT_DIR, voir Étape 5)
Liste des scripts
| Script | Rôle |
|---|---|
scripts/setup.sh | Vérification des dépendances (Node/Chrome/puppeteer-core), si puppeteer-core manque, indique et installe (sortie visible) |
scripts/check_emoji.py | Vérification des emojis avant la capture, affiche le caractère et le numéro de ligne en cas d'échec |
scripts/export_image.js | Capture avec Puppeteer : attente des polices + recadrage précis de la hauteur + marges de cadre uniformes + activation/désactivation du fond de carte (--flat) + injection/suppression du footer |