====== 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.

===== Vue d'Ensemble =====

**Workflow en 3 Étapes :**

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

===== Étape 1 : Analyser une Image =====

==== 1.1 Choisir votre LLM ====

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.2 Utiliser le Prompt ====

  - Ouvrir le fichier ''prompt-analyse-image.md''
  - Copier le prompt complet (section "Prompt à Copier-Coller")
  - Dans votre LLM :
    * Uploader votre image
    * Coller le prompt
    * Envoyer

==== 1.3 Récupérer le JSON ====

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>

===== Étape 2 : Comprendre le JSON =====

==== 2.1 Structure Générale ====

Le JSON contient plusieurs sections :

<code json>
{
  "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"
    ]
  }
}
</code>

==== 2.2 Section "enrichissement_suggestions" ====

**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 :
<code json>
"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.)"
]
</code>

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

===== Étape 3 : Modifier index.html =====

==== 3.1 Localiser la Section Database ====

Ouvrir ''index.html'' dans un éditeur de texte.

Chercher (Ctrl+F) : ''const database = {''

Vous verrez quelque chose comme :

<code javascript>
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",
            ...
        ],
        ...
    },
    ...
};
</code>

==== 3.2 Ajouter des Valeurs dans une Catégorie Existante ====

**Exemple :** Ajouter "French humanist photography 1960s" dans Univers graphiques

**AVANT :**
<code javascript>
"Univers graphiques": {
    "Bande dessinée": [
        "ligne claire Hergé style",
        "Franco-Belgian BD aesthetic",
        ...
    ],
    "Peinture classique": [
        "Renaissance oil painting",
        ...
    ],
</code>

**APRÈS :**
<code javascript>
"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",
        ...
    ],
</code>

**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

==== 3.3 Créer une Nouvelle Sous-Catégorie ====

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

**Exemple :** Ajouter "Photographie" dans Univers graphiques

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

==== 3.4 Créer une Nouvelle Catégorie Principale ====

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

**Exemple :** Ajouter "Contexte culturel"

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

**AVANT :**
<code javascript>
    "Qualité technique": [
        "8K ultra detailed",
        "sharp focus",
        ...
    ]
};  // ← Fin de database
</code>

**APRÈS :**
<code javascript>
    "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"
    ]
};
</code>

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

==== 3.5 Vérifier la Syntaxe ====

Après modification, vérifier :
  - Toutes les accolades ''{ }'' sont bien fermées
  - Toutes les valeurs sauf les dernières ont une virgule
  - 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.

===== Exemples Concrets =====

==== Exemple 1 : Ajouter des Films Argentiques ====

**JSON reçu :**
<code json>
"Films argentiques": ["Kodak Portra 400 pushed to 800"],
"enrichissement_suggestions": [
  "Films argentiques:",
  "  + Kodak Portra 400 pushed to 800"
]
</code>

**Modification dans index.html :**

Chercher :
<code javascript>
"Films argentiques": {
    "Couleur": [
        "Kodak Portra 400",
        "Fujifilm Provia 100F",
        "Kodak Ektar 100",
</code>

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

==== Exemple 2 : Ajouter des Styles de Composition ====

**JSON reçu :**
<code json>
"Composition": ["layered depth with foreground element", "L-shaped composition"],
"enrichissement_suggestions": [
  "Composition:",
  "  + layered depth with foreground element",
  "  + L-shaped composition"
]
</code>

**Modification dans index.html :**

Chercher :
<code javascript>
"Composition": [
    "rule of thirds",
    "leading lines",
    "symmetrical composition",
</code>

Ajouter à la fin :
<code javascript>
"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É
]
</code>

==== Exemple 3 : Créer une Nouvelle Catégorie ====

**JSON reçu :**
<code json>
"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"
]
</code>

**Modification dans index.html :**

Aller à la fin de ''database'', avant ''};''

<code javascript>
    "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"
    ]
};
</code>

===== Organisation des Valeurs =====

==== Règles de Bonne Pratique ====

  - **Spécificité croissante** : Du général au spécifique
<code javascript>
"street photography",          // Général
"street photography candid",   // Plus spécifique
"French humanist street 1960s" // Très spécifique
</code>

  - **Grouper par affinité** : Si sous-catégories, grouper les valeurs similaires
<code javascript>
"Univers graphiques": {
    "Photographie": [
        "documentary style",
        "street photography",
        "photojournalism"  // Regroupés par thème
    ],
    "Peinture": [ ... ]
}
</code>

  - **Noms descriptifs** : Privilégier la clarté
    * ✅ "1970s Kodachrome warm magenta cast"
    * ❌ "vintage look"

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

===== Workflow Complet : Exemple Réel =====

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

==== Étape par Étape ====

**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 :
<code json>
"enrichissement_suggestions": [
  "Éclairage:",
  "  + window light directional soft",
  "  + ambient room fill subtle",
  "",
  "Films argentiques:",
  "  + Ilford FP4 Plus for fine grain portraits"
]
</code>

**3. Modifier index.html**

Ouvrir ''index.html'', chercher ''"Éclairage":''

Ajouter les nouvelles valeurs :
<code javascript>
"É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É
    ],
</code>

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 !

===== Dépannage =====

==== Problème : La page ne charge plus après modification ====

**Cause :** Erreur de syntaxe JavaScript

**Solution :**
  - Ouvrir la Console (F12 dans le navigateur)
  - Lire le message d'erreur (souvent il indique la ligne)
  - 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++)

==== Problème : La nouvelle valeur n'apparaît pas ====

**Causes possibles :**
  - Cache du navigateur → Forcer le rechargement (Ctrl+Shift+R)
  - Modification dans la mauvaise section
  - Erreur dans le nom de la catégorie (sensible à la casse)

==== Problème : Trop de nouvelles valeurs suggérées ====

**Solution :** Faire un tri. Ajouter seulement :
  * Les valeurs vraiment distinctes et utiles
  * Celles que vous comptez réutiliser
  * Éviter les variantes trop proches

===== Conseils Avancés =====

==== 1. Versionner vos Modifications ====

Avant de modifier ''index.html'' :
<code bash>
cp index.html index.html.backup
</code>

Ou utiliser Git pour tracker les changements.

==== 2. Créer des Sous-Catégories Thématiques ====

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

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

**Après :**
<code javascript>
"Univers graphiques": {
    "Bande dessinée": [ ... ],
    "Peinture": [ ... ],
    "Art numérique": [ ... ],
    "Photographie": [ ... ]
}
</code>

==== 3. Documenter vos Ajouts ====

Ajouter des commentaires dans le code :

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

==== 4. Exporter vos Configurations ====

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

===== Résumé : Checklist Complète =====

  * [ ] 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

===== Ressources =====

  * **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é.