Ceci est une ancienne révision du document !

Guide Visuel : Structure de index.html

Ce document explique visuellement comment est organisé le fichier index.html et où modifier chaque section.

Vue d'Ensemble du Fichier

index.html (34 KB)
│
├── <!DOCTYPE html>
├── <html>
│   │
│   ├── <head>
│   │   ├── <meta charset="UTF-8">
│   │   ├── <title>
│   │   └── <style>
│   │       └── [TOUS LES STYLES CSS]
│   │
│   └── <body>
│       │
│       ├── <div class="container">
│       │   ├── <header>
│       │   └── <div class="main-grid">
│       │       ├── PANNEAU GAUCHE (sélection)
│       │       └── PANNEAU DROIT (sortie)
│       │
│       └── <script>
│           ├── const database = { ... }     ← ICI : BASE DE DONNÉES
│           ├── function initCategories()
│           ├── function toggleItem()
│           └── [AUTRES FONCTIONS]
│
└── </html>

Section Critique : La Database

Localisation Exacte

Ouvrir index.html et chercher (Ctrl+F) :

<script>
        // Database structure
        const database = {

Cette ligne se trouve vers la ligne 400-450 (peut varier selon les modifications).

Structure Visuelle de la Database

<script>
        const database = {
            // ==========================================
            // CATÉGORIE 1 : Format d'image (LISTE SIMPLE)
            // ==========================================
            "Format d'image": [
                "1:1 square",
                "4:3 standard",
                "3:2 classic photo",
                "16:9 widescreen",
                "21:9 cinematic",
                "9:16 vertical portrait",
                "2:3 portrait",
                "3:4 portrait",
                "panoramic 3:1"
            ],
 
            // ==========================================
            // CATÉGORIE 2 : Univers graphiques (AVEC SOUS-CATÉGORIES)
            // ==========================================
            "Univers graphiques": {
                "Bande dessinée": [
                    "ligne claire Hergé style",
                    "Franco-Belgian BD aesthetic",
                    "Moebius sci-fi comic",
                    "Enki Bilal dystopian watercolor",
                    "Blacksad noir comic",
                    "Spirou dynamic cartoon"
                ],
                "Comics": [
                    "Marvel superhero comic style",
                    "DC Comics bold inking",
                    "vintage 1950s comic book",
                    ...
                ],
                "Manga": [ ... ],
                "Peinture classique": [ ... ],
                "Peinture moderne": [ ... ],
                "Art numérique": [ ... ],
                "Art traditionnel": [ ... ]
            },
 
            // ==========================================
            // CATÉGORIE 3 : Medium (AVEC SOUS-CATÉGORIES)
            // ==========================================
            "Medium": {
                "Photographie": [ ... ],
                "Peinture": [ ... ],
                "3D": [ ... ],
                "Illustration": [ ... ]
            },
 
            // ... TOUTES LES AUTRES CATÉGORIES ...
 
            // ==========================================
            // DERNIÈRE CATÉGORIE : Qualité technique
            // ==========================================
            "Qualité technique": [
                "8K ultra detailed",
                "sharp focus",
                "extreme detail",
                "photoréaliste",
                "hyperréaliste",
                "crisp clarity",
                "film grain",
                "high resolution"
            ]
        };  // ← FIN DE LA DATABASE
 
        // Suite des fonctions JavaScript...
</script>

Où Ajouter Quoi ?

Type 1 : Ajouter dans une Liste Simple

Exemple : Ajouter “2.35:1 anamorphic” dans Format d'image

"Format d'image": [
    "1:1 square",
    "4:3 standard",
    "3:2 classic photo",
    "16:9 widescreen",
    "21:9 cinematic",
    "2.35:1 anamorphic",  // ← AJOUTÉ ICI
    "9:16 vertical portrait",
    "2:3 portrait",
    "3:4 portrait",
    "panoramic 3:1"
],

Points d'attention :

Virgule , après chaque valeur sauf la dernière
Guillemets doubles “…”
Indentation : 4 espaces ou 1 tab

Type 2 : Ajouter dans une Sous-Catégorie Existante

Exemple : Ajouter “French humanist photography 1960s” dans Univers graphiques > nouvelle sous-catégorie Photographie

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

Où l'insérer : Entre deux sous-catégories existantes, en respectant une certaine logique (regrouper par thèmes similaires).

Type 3 : Créer une Nouvelle Catégorie

Exemple : Ajouter “Contexte culturel” comme nouvelle catégorie principale

AVANT (fin de database) :

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

APRÈS :

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

Anatomie d'une Catégorie

Cas 1 : Liste Simple (Flat Array)

"Nom de la Catégorie": [
    "valeur 1",
    "valeur 2",
    "valeur 3"
]

Utilisé pour : Catégories où les valeurs ne se regroupent pas naturellement.

Exemples :

Format d'image
Composition
Focus
Ambiance

Cas 2 : Sous-Catégories (Nested Object)

"Nom de la Catégorie": {
    "Sous-catégorie A": [
        "valeur A1",
        "valeur A2"
    ],
    "Sous-catégorie B": [
        "valeur B1",
        "valeur B2"
    ]
}

Utilisé pour : Catégories avec regroupements naturels.

Exemples :

Univers graphiques (BD, Comics, Manga, etc.)
Medium (Photographie, Peinture, 3D, etc.)
Éclairage (Naturel, Artificiel, Qualités)

Checklist de Vérification

Après avoir modifié la database :

1. Syntaxe JavaScript

[ ] Toutes les accolades { } sont fermées
[ ] Toutes les crochets [ ] sont fermés
[ ] Toutes les chaînes ont des guillemets doubles “…”
[ ] Virgules entre les éléments (sauf le dernier)
[ ] PAS de virgule après le dernier élément d'un array ou objet

2. Indentation

[ ] Cohérente (tout en espaces ou tout en tabs)
[ ] Chaque niveau = +4 espaces (ou +1 tab)

3. Noms de Catégories

[ ] Respectent la casse (ex: “Format d'image” pas “format d'image”)
[ ] Caractères spéciaux : apostrophes ' autorisées

4. Test

[ ] Sauvegarder index.html
[ ] Ouvrir dans le navigateur
[ ] Si erreur : F12 → Console → lire le message
[ ] Vérifier que les nouvelles valeurs apparaissent dans l'interface

Erreurs Courantes

Erreur 1 : Virgule en Trop

"Format d'image": [
    "1:1 square",
    "4:3 standard",
    "3:2 classic photo",  // ← VIRGULE EN TROP
]

Message d'erreur : Unexpected token ]

Solution : Retirer la virgule après le dernier élément.

Erreur 2 : Virgule Manquante

"Univers graphiques": {
    "Bande dessinée": [ ... ]   // ← MANQUE UNE VIRGULE
    "Comics": [ ... ]
}

Message d'erreur : Unexpected string

Solution : Ajouter , après ] de “Bande dessinée”.

Erreur 3 : Guillemet Non Fermé

"Format d'image": [
    "1:1 square,  // ← GUILLEMET MANQUANT
    "4:3 standard"
]

Message d'erreur : Unterminated string constant

Solution : Ajouter “ à la fin de “1:1 square”.

Erreur 4 : Accolade Non Fermée

"Univers graphiques": {
    "Bande dessinée": [ ... ],
    "Comics": [ ... ]
    // ← MANQUE } pour fermer l'objet

Message d'erreur : Unexpected token

Solution : Ajouter } ou }, selon le contexte.

Astuces d'Éditeur

Visual Studio Code (Recommandé)

Ouvrir index.html dans VS Code
Le code JavaScript est colorisé automatiquement
Les accolades/crochets sont appariés visuellement
Cmd/Ctrl+K Cmd/Ctrl+F : Auto-formater la sélection

Notepad++ (Alternative)

Language → JavaScript
View → Show Symbol → Show All Characters
Repérage visuel des erreurs

Validation en Ligne

Si vous n'êtes pas sûr de votre syntaxe :

Copier UNIQUEMENT la section const database = { … };
Aller sur https://jsonlint.com/ (fonctionne pour la structure JS aussi)
Vérifier les erreurs

Exemple Complet de Modification

Situation

Vous avez analysé une photo et le JSON contient :

"enrichissement_suggestions": [
  "Univers graphiques:",
  "  + French humanist photography 1960s",
  "  + Henri Cartier-Bresson documentary intimacy",
  "",
  "Composition:",
  "  + layered depth with foreground element",
  "",
  "NOUVELLE CATÉGORIE :",
  "  + Contexte culturel (Parisian café culture)"
]

Actions

1. Ajouter dans Univers graphiques

Créer une sous-catégorie “Photographie” :

"Univers graphiques": {
    "Bande dessinée": [ ... ],
    "Comics": [ ... ],
    "Manga": [ ... ],
    "Photographie": [
        "French humanist photography 1960s",
        "Henri Cartier-Bresson documentary intimacy"
    ],
    "Peinture classique": [ ... ],
    ...
},

2. Ajouter dans Composition

"Composition": [
    "rule of thirds",
    "leading lines",
    ...
    "centered composition",
    "layered depth with foreground element"
],

3. Créer nouvelle catégorie Contexte culturel

À la fin, avant }; :

            "Qualité technique": [ ... ],
            "Contexte culturel": [
                "Parisian café culture"
            ]
        };

4. Sauvegarder et tester

Ctrl+S pour sauvegarder
F5 dans le navigateur pour recharger
Vérifier que “Contexte culturel” apparaît dans les catégories
Tester la sélection et génération de prompt

C'est tout ! Avec ce guide visuel, vous savez exactement où et comment modifier index.html pour enrichir votre catalogue.

Rienadire

Table des matières