Rienadire

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
====== 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 =====

<code>
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>
</code>

===== Section Critique : La Database =====

==== Localisation Exacte ====

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

<code javascript>
<script>
        // Database structure
        const database = {
</code>

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

==== Structure Visuelle de la Database ====

<code javascript>
<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>
</code>

===== Où Ajouter Quoi ? =====

==== Type 1 : Ajouter dans une Liste Simple ====

**Exemple :** Ajouter "2.35:1 anamorphic" dans Format d'image

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

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

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

**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) :**
<code javascript>
            "Qualité technique": [
                "8K ultra detailed",
                "sharp focus",
                ...
            ]
        };  // ← FIN
</code>

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

===== Anatomie d'une Catégorie =====

==== Cas 1 : Liste Simple (Flat Array) ====

<code javascript>
"Nom de la Catégorie": [
    "valeur 1",
    "valeur 2",
    "valeur 3"
]
</code>

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

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

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

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

**Message d'erreur :** ''Unexpected token ]''

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

==== Erreur 2 : Virgule Manquante ====

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

**Message d'erreur :** ''Unexpected string''

**Solution :** Ajouter '','' après '']'' de "Bande dessinée".

==== Erreur 3 : Guillemet Non Fermé ====

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

**Message d'erreur :** ''Unterminated string constant''

**Solution :** Ajouter ''"'' à la fin de "1:1 square".

==== Erreur 4 : Accolade Non Fermée ====

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

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

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

==== Actions ====

**1. Ajouter dans Univers graphiques**

Créer une sous-catégorie "Photographie" :

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

**2. Ajouter dans Composition**

<code javascript>
"Composition": [
    "rule of thirds",
    "leading lines",
    ...
    "centered composition",
    "layered depth with foreground element"
],
</code>

**3. Créer nouvelle catégorie Contexte culturel**

À la fin, avant ''};'' :

<code javascript>
            "Qualité technique": [ ... ],
            "Contexte culturel": [
                "Parisian café culture"
            ]
        };
</code>

**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.
----
[[..:prompteur_pour_image|Retour]]