====== 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)
│
├──
├──
│ │
│ ├──
│ │ ├──
│ │ ├──
│ │ └── <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]]