Notice Utilisateur : Analyser une Image et Enrichir l'Outil

Guide complet pour analyser vos images, comprendre les résultats, et modifier manuellement index.html pour enrichir l'outil.

Workflow en 3 Étapes :

1. Analyser : Utiliser le prompt avec un LLM pour analyser votre image
2. Comprendre : Lire et interpréter le JSON généré
3. Intégrer : Modifier index.html pour ajouter les nouvelles valeurs

Vous pouvez utiliser n'importe quel LLM avec vision :

• ChatGPT (GPT-4 avec vision)
• Claude (Claude 3 ou 4)
• Gemini
• Tout autre LLM supportant l'analyse d'images

1. Ouvrir le fichier prompt-analyse-image.md
2. Copier le prompt complet (section “Prompt à Copier-Coller”)
3. Dans votre LLM :
   • Uploader votre image
   • Coller le prompt
   • Envoyer

Le LLM génère un JSON structuré. Copier tout le JSON généré et le sauvegarder dans un fichier texte (ex: analyse_portrait.json).

<note important>Le LLM peut proposer des valeurs qui n'existent pas encore dans l'outil - c'est normal et souhaité ! Ces nouvelles valeurs vont enrichir votre catalogue.</note>

Le JSON contient plusieurs sections :

{
  "subject": "Le sujet principal",
  "details": "Détails supplémentaires",
 
  "Format d'image": ["3:2 classic photo"],
  "Univers graphiques": ["style 1", "style 2"],
  "Medium": ["technique"],
  ...
 
  "metadata": {
    "enrichissement_suggestions": [
      "Liste des nouvelles valeurs à ajouter"
    ]
  }
}

C'EST LA PLUS IMPORTANTE !

Cette section liste TOUTES les nouvelles valeurs que le LLM a créées et qui n'existent pas dans l'outil actuel.

Exemple :

"enrichissement_suggestions": [
  "NOUVELLES VALEURS IDENTIFIÉES :",
  "",
  "Univers graphiques:",
  "  + French humanist photography 1960s",
  "  + Henri Cartier-Bresson documentary intimacy",
  "",
  "NOUVELLES CATÉGORIES SUGGÉRÉES :",
  "  + Contexte culturel (Parisian café culture, etc.)"
]

Ces suggestions vous indiquent exactement quoi ajouter dans index.html.

Ouvrir index.html dans un éditeur de texte.

Chercher (Ctrl+F) : const database = {

Vous verrez quelque chose comme :

const database = {
    "Format d'image": [
        "1:1 square",
        "4:3 standard",
        "3:2 classic photo",
        ...
    ],
    "Univers graphiques": {
        "Bande dessinée": [
            "ligne claire Hergé style",
            "Franco-Belgian BD aesthetic",
            ...
        ],
        ...
    },
    ...
};

Exemple : Ajouter “French humanist photography 1960s” dans Univers graphiques

AVANT :

"Univers graphiques": {
    "Bande dessinée": [
        "ligne claire Hergé style",
        "Franco-Belgian BD aesthetic",
        ...
    ],
    "Peinture classique": [
        "Renaissance oil painting",
        ...
    ],

APRÈS :

"Univers graphiques": {
    "Bande dessinée": [
        "ligne claire Hergé style",
        "Franco-Belgian BD aesthetic",
        ...
    ],
    "Photographie": [
        "French humanist photography 1960s",  // NOUVELLE VALEUR AJOUTÉE
        "Henri Cartier-Bresson documentary intimacy",  // NOUVELLE VALEUR AJOUTÉE
    ],
    "Peinture classique": [
        "Renaissance oil painting",
        ...
    ],

Points d'attention :

• Mettre une virgule , après CHAQUE valeur sauf la dernière de la liste
• Respecter l'indentation (4 espaces ou 1 tab)
• Les valeurs sont entre guillemets doubles “…”
• Organiser par sous-catégories si la catégorie en a

Si le JSON suggère une sous-catégorie qui n'existe pas :

Exemple : Ajouter “Photographie” dans Univers graphiques

"Univers graphiques": {
    "Bande dessinée": [ ... ],
    "Comics": [ ... ],
    "Manga": [ ... ],
    "Photographie": [                    // NOUVELLE SOUS-CATÉGORIE
        "French humanist photography 1960s",
        "documentary street photography",
        "environmental portrait style"
    ],
    "Peinture classique": [ ... ],

Si le JSON suggère une catégorie totalement nouvelle :

Exemple : Ajouter “Contexte culturel”

Chercher la fin de la section database, juste avant };

AVANT :

    "Qualité technique": [
        "8K ultra detailed",
        "sharp focus",
        ...
    ]
};  // ← Fin de database

APRÈS :

    "Qualité technique": [
        "8K ultra detailed",
        "sharp focus",
        ...
    ],                          // ← Ajouter une virgule !
    "Contexte culturel": [      // ← NOUVELLE CATÉGORIE
        "Parisian café culture",
        "Japanese tea ceremony aesthetic",
        "American diner 1950s"
    ]
};

<note warning>Important : Ajouter une virgule après la catégorie précédente !</note>

Après modification, vérifier :

1. Toutes les accolades { } sont bien fermées
2. Toutes les valeurs sauf les dernières ont une virgule
3. Les guillemets sont bien appariés “…”

Tester : Recharger index.html dans le navigateur (F5). Si la page s'affiche correctement, la syntaxe est bonne. Si erreur → ouvrir la Console (F12) pour voir le message d'erreur.

JSON reçu :

"Films argentiques": ["Kodak Portra 400 pushed to 800"],
"enrichissement_suggestions": [
  "Films argentiques:",
  "  + Kodak Portra 400 pushed to 800"
]

Modification dans index.html :

Chercher :

"Films argentiques": {
    "Couleur": [
        "Kodak Portra 400",
        "Fujifilm Provia 100F",
        "Kodak Ektar 100",

Ajouter :

"Films argentiques": {
    "Couleur": [
        "Kodak Portra 400",
        "Kodak Portra 400 pushed to 800",  // AJOUTÉ
        "Fujifilm Provia 100F",
        "Kodak Ektar 100",

JSON reçu :

"Composition": ["layered depth with foreground element", "L-shaped composition"],
"enrichissement_suggestions": [
  "Composition:",
  "  + layered depth with foreground element",
  "  + L-shaped composition"
]

Modification dans index.html :

Chercher :

"Composition": [
    "rule of thirds",
    "leading lines",
    "symmetrical composition",

Ajouter à la fin :

"Composition": [
    "rule of thirds",
    "leading lines",
    "symmetrical composition",
    "frame within frame",
    "golden ratio",
    "negative space",
    "dynamic diagonal",
    "centered composition",
    "layered depth with foreground element",  // AJOUTÉ
    "L-shaped composition"                     // AJOUTÉ
]

JSON reçu :

"Nouvelles catégories": {
    "Contexte culturel": [
        "Parisian café culture",
        "Japanese wabi-sabi philosophy",
        "American Southwest desert aesthetic"
    ]
},
"enrichissement_suggestions": [
  "NOUVELLES CATÉGORIES SUGGÉRÉES :",
  "  + Contexte culturel"
]

Modification dans index.html :

Aller à la fin de database, avant };

    "Qualité technique": [
        "8K ultra detailed",
        "sharp focus",
        "extreme detail",
        ...
    ],  // ← VIRGULE AJOUTÉE
    "Contexte culturel": [  // ← NOUVELLE CATÉGORIE
        "Parisian café culture",
        "Japanese wabi-sabi philosophy",
        "American Southwest desert aesthetic",
        "Scandinavian minimalism",
        "Victorian era elegance"
    ]
};

1. Spécificité croissante : Du général au spécifique

"street photography",          // Général
"street photography candid",   // Plus spécifique
"French humanist street 1960s" // Très spécifique

1. Grouper par affinité : Si sous-catégories, grouper les valeurs similaires

"Univers graphiques": {
    "Photographie": [
        "documentary style",
        "street photography",
        "photojournalism"  // Regroupés par thème
    ],
    "Peinture": [ ... ]
}

1. Noms descriptifs : Privilégier la clarté
   • ✅ “1970s Kodachrome warm magenta cast”
   • ❌ “vintage look”

1. Éviter les doublons : Vérifier qu'une valeur similaire n'existe pas déjà

Vous avez 5 photos de portraits en lumière naturelle que vous aimez beaucoup.

1. Analyser la première photo

• Upload dans ChatGPT/Claude
• Coller le prompt d'analyse
• Recevoir le JSON

2. Identifier les nouvelles valeurs

Le JSON contient :

"enrichissement_suggestions": [
  "Éclairage:",
  "  + window light directional soft",
  "  + ambient room fill subtle",
  "",
  "Films argentiques:",
  "  + Ilford FP4 Plus for fine grain portraits"
]

3. Modifier index.html

Ouvrir index.html, chercher “Éclairage”:

Ajouter les nouvelles valeurs :

"Éclairage": {
    "Naturel": [
        "golden hour",
        "blue hour",
        "contre-jour",
        "diffuse overcast",
        "harsh midday sun",
        "moonlight",
        "window light directional soft"  // AJOUTÉ
    ],
    "Artificiel": [
        "studio strobe",
        "continuous lighting",
        "flash indirect",
        "néon",
        "candlelight",
        "ambient room fill subtle"  // AJOUTÉ
    ],

Faire pareil pour Films argentiques, etc.

4. Analyser les 4 autres photos

Pour chaque photo, répéter le processus. Vous construisez progressivement un catalogue enrichi de vos propres références.

5. Tester

Recharger index.html → Les nouvelles valeurs apparaissent dans les catégories → Vous pouvez maintenant les utiliser pour créer de nouveaux prompts !

Cause : Erreur de syntaxe JavaScript

Solution :

1. Ouvrir la Console (F12 dans le navigateur)
2. Lire le message d'erreur (souvent il indique la ligne)
3. Vérifications courantes :
   • Virgule manquante après une valeur
   • Virgule en trop après la dernière valeur d'un array
   • Guillemet non fermé
   • Accolade { ou } non appariée

Astuce : Utiliser un éditeur avec coloration syntaxique (VS Code, Sublime Text, Notepad++)

Causes possibles :

1. Cache du navigateur → Forcer le rechargement (Ctrl+Shift+R)
2. Modification dans la mauvaise section
3. Erreur dans le nom de la catégorie (sensible à la casse)

Solution : Faire un tri. Ajouter seulement :

• Les valeurs vraiment distinctes et utiles
• Celles que vous comptez réutiliser
• Éviter les variantes trop proches

Avant de modifier index.html :

cp index.html index.html.backup

Ou utiliser Git pour tracker les changements.

Si une catégorie devient trop grande, organiser en sous-catégories :

Avant :

"Univers graphiques": [
    "ligne claire Hergé",
    "impressionist",
    "pixel art retro",
    "Renaissance oil",
    ... // 50 valeurs mélangées
]

Après :

"Univers graphiques": {
    "Bande dessinée": [ ... ],
    "Peinture": [ ... ],
    "Art numérique": [ ... ],
    "Photographie": [ ... ]
}

Ajouter des commentaires dans le code :

"Éclairage": {
    "Naturel": [
        "golden hour",
        "blue hour",
        // Ajouté le 2025-11-05 - Analyse portrait café
        "window light directional soft",
        "ambient room fill subtle"
    ],

Après avoir enrichi l'outil, sauvegarder votre index.html personnalisé séparément pour pouvoir le réutiliser ou le partager.

• [ ] Choisir une image à analyser
• [ ] Copier le prompt depuis prompt-analyse-image.md
• [ ] Uploader l'image dans un LLM (ChatGPT, Claude, etc.)
• [ ] Coller le prompt et obtenir le JSON
• [ ] Lire la section enrichissement_suggestions du JSON
• [ ] Ouvrir index.html dans un éditeur
• [ ] Chercher const database = {
• [ ] Pour chaque nouvelle valeur suggérée :
  • [ ] Trouver la catégorie correspondante
  • [ ] Ajouter la valeur à la bonne place
  • [ ] Vérifier la syntaxe (virgules, guillemets)
• [ ] Sauvegarder index.html
• [ ] Recharger dans le navigateur (F5)
• [ ] Vérifier que les nouvelles valeurs apparaissent
• [ ] Tester la génération de prompts avec les nouvelles valeurs

• Prompt d'analyse : prompt-analyse-image.md
• Guide de l'outil : README.md
• Référence des catégories : reference-formats-univers.md
• Exemples de prompts : exemples-prompts-generes.md

C'est tout ! Vous savez maintenant comment analyser vos images et enrichir progressivement votre catalogue personnel de styles. Plus vous analysez d'images variées, plus votre outil devient puissant et personnalisé.