Page:
Interface-NLE
No results
This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
🖥️ Interface NLE
Détail complet de l'interface d'édition non-linéaire : Viewport, Timeline, Panneaux latéraux et interactions.
Architecture de l'Interface
L'interface de RetroToon Studio s'inspire des éditeurs professionnels (DaVinci Resolve, After Effects) tout en restant accessible :
┌──────────────────────────────────────────────────────────────────────────┐
│ ◀ Retour │ 📁 Projet │ ⏮ ◀ ▶ ⏭ │ Frame 42/720 │ 🔊 Vol │ ⚙️ │ 📤 Export │
├──────────────────────────────────────────────┬───────────────────────────┤
│ │ │
│ │ ┌─────────────────────┐ │
│ │ │ 📋 CALQUES │ │
│ 🖼️ VIEWPORT │ │ │ │
│ │ │ ▸ Arrière-plan 👁🔓 │ │
│ ┌──────────────────────┐ │ │ ▸ Personnage 1 👁🔓 │ │
│ │ │ │ │ ▸ Effets 👁🔓 │ │
│ │ Frame courante │ │ └─────────────────────┘ │
│ │ │ │ │
│ └──────────────────────┘ │ ┌─────────────────────┐ │
│ │ │ 👤 PERSONNAGES │ │
│ [Original ▼] [🔍 Loupe] [📐 Fit] [🔲 Full] │ │ │ │
│ │ │ • Tom Sawyer │ │
│ │ │ • Huck Finn │ │
│ │ │ + Ajouter │ │
│ │ └─────────────────────┘ │
│ │ │
│ │ ┌─────────────────────┐ │
│ │ │ 🤖 ASSISTANT IA │ │
│ │ │ │ │
│ │ │ > Segmente le │ │
│ │ │ personnage... │ │
│ │ │ │ │
│ │ │ [🔍][✂️][🎨][📊] │ │
│ │ └─────────────────────┘ │
├──────────────────────────────────────────────┴───────────────────────────┤
│ ▶ Séq.1: Intro (0-45) │ Séq.2: Rivière (46-120) │ Séq.3: Cabane │
│ [▓▓▓▓▓|▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓|▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓|▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓] │
│ 🔊 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ │
│ ⏱️ 00:01.75 / 00:30.00 [Zoom: 100%] │
└──────────────────────────────────────────────────────────────────────────┘
🖼️ Viewport — 6 Modes de Comparaison
Tableau des Modes
| # | Mode | Raccourci | Description | Usage principal |
|---|---|---|---|---|
| 1 | Original | 1 |
Frame source brute | Référence, inspection |
| 2 | Composite | 2 |
Tous calques fusionnés | Résultat final |
| 3 | Side-by-Side | 3 |
Original ↔ Composite côte à côte | Comparaison globale |
| 4 | Split | 4 |
Curseur vertical glissant | Comparaison précise |
| 5 | Overlay | 5 |
Superposition avec opacité | Alignement |
| 6 | Onion Skin | 6 |
Frame N-1 transparente | Animation, continuité |
Mode Split — Détail
Le mode Split affiche un curseur vertical draggable qui sépare l'original (gauche) du composite (droite) :
◀── Original ──▶│◀── Composite ──▶
│
┌────────────────────│────────────────────┐
│ │ │
│ Frame source │ Frame regénérée │
│ (non modifiée) │ (IA appliquée) │
│ │ │
│ │ │
└────────────────────│────────────────────┘
│
◀──drag──▶
Mode Overlay — Détail
Le mode Overlay superpose le composite sur l'original avec un slider d'opacité (0% = original pur, 100% = composite pur) :
Opacité: [━━━━━━━━━━●━━━━━━] 65%
┌──────────────────────────────────┐
│ │
│ Original (35% visible) │
│ + │
│ Composite (65% visible) │
│ │
└──────────────────────────────────┘
🔍 Loupe Duale
La loupe est un outil d'inspection pixel-par-pixel unique à RetroToon Studio.
Fonctionnement
Position souris
│
▼
┌────────────────────●────────────────────┐
│ │
│ Frame dans le viewport │
│ │
│ ┌───────────────┐ │
│ │ ○○○○○○○○○○○○ │ │
│ │ ○ Zone zoomée○ │ │
│ │ ○ (4×) ○ │ │
│ │ ○○○○○○○○○○○○ │ │
│ └───────────────┘ │
│ │
└─────────────────────────────────────────┘
Contrôles
| Touche | Action | Détail |
|---|---|---|
L |
Toggle loupe | Active/désactive |
+ |
Zoom + | 2× → 3× → 4× → 5× → 6× → 7× → 8× |
- |
Zoom - | 8× → 7× → ... → 2× |
[ |
Forme cercle | Loupe ronde |
] |
Forme carré | Loupe carrée |
G |
Grille pixel | Affiche la grille entre chaque pixel |
Clic |
Verrouiller | Fixe la position de la loupe |
Esc |
Fermer | Désactive la loupe |
Mode Side-by-Side avec Loupe
En mode Side-by-Side, la loupe affiche simultanément la même zone dans les deux images :
┌──────────────────┬──────────────────┐
│ ORIGINAL │ COMPOSITE │
│ │ │
│ ┌──────┐ │ ┌──────┐ │
│ │ Zone │ │ │ Zone │ │
│ │ 4× │ │ │ 4× │ │
│ └──────┘ │ └──────┘ │
│ │ │
└──────────────────┴──────────────────┘
→ Même coordonnées, comparaison directe pixel-par-pixel
🎬 Timeline
Structure
La timeline est composée de 3 couches :
┌─────────────────────────────────────────────────────────────────────┐
│ SÉQUENCES │
│ ┌─────────────┐┌──────────────────────┐┌────────────┐┌───────────┐ │
│ │ Intro ││ Rivière ││ Cabane ││ Fin │ │
│ │ 🟦 0-45 ││ 🟩 46-120 ││ 🟨 121-180 ││ 🟪 181-240│ │
│ └─────────────┘└──────────────────────┘└────────────┘└───────────┘ │
├─────────────────────────────────────────────────────────────────────┤
│ MARQUEURS │
│ ▼ ▼ ▼ ▼ │
│ 12 58 95 200 │
├─────────────────────────────────────────────────────────────────────┤
│ AUDIO │
│ 🔊 ━╋━━━━╋━━━━╋━━━━╋━━━━╋━━━━╋━━━━╋━━━━╋━━━━╋━━━━╋━━━━╋━━━━╋━━━ │
│ ▁▂▃▅▇█▇▅▃▂▁▁▂▃▅▇█▇▅▃▂▁▁▂▃▅▇█▇▅▃▂▁▁▂▃▅▇█▇▅▃▂▁▁▂▃▅▇█▇▅▃▂▁ │
└─────────────────────────────────────────────────────────────────────┘
Édition des Séquences
Chaque séquence possède des handles de redimensionnement :
◀─── drag ───▶
┌────────────|═══════════════════════|────────────┐
│ │ │ │
│ Handle │ Séquence active │ Handle │
│ In ◀── │ │ ──▶ Out │
│ │ │ │
└────────────|═══════════════════════|────────────┘
Lecture Audio Synchronisée
| Fonctionnalité | Implémentation |
|---|---|
| Synchronisation | HTMLAudioElement.currentTime aligné sur frame index |
| Resync | Correction automatique si drift > 100ms |
| Intervalle | setInterval à 1000/fps ms |
| Fin de lecture | Pause automatique à la dernière frame |
| Erreurs | Fallback silencieux (lecture continue sans audio) |
📋 Panneau Calques
Hiérarchie
📋 Calques — Séquence "Rivière"
│
├── 🎨 Arrière-plan 👁 🔒 ████████████ 100%
│ └── Regénéré (Ghibli style)
│
├── 👤 Tom Sawyer 👁 🔓 ████████░░░░ 80%
│ └── Segmenté + LoRA
│
├── 👤 Huckleberry Finn 👁 🔓 ████████████ 100%
│ └── Segmenté + IP-Adapter
│
├── ✨ Reflets eau 👁 🔓 ██████░░░░░░ 50%
│ └── Effet généré
│
└── 🖼️ Composite (auto) 👁 🔒 ████████████ 100%
└── Fusion finale
Actions par Calque
| Action | Icône | Description |
|---|---|---|
| Visibilité | 👁 | Affiche/masque le calque dans le viewport |
| Verrouillage | 🔒/🔓 | Empêche les modifications accidentelles |
| Opacité | Slider | 0% (transparent) → 100% (opaque) |
| Réordonnancement | Drag | Modifie l'ordre de compositing |
| Expansion | ▸/▾ | Affiche les détails du calque |
👤 Panneau Personnages
Fiche Personnage
┌─────────────────────────────────────────────────────┐
│ 👤 Tom Sawyer [✏️][🗑️] │
├─────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ Nom: Tom Sawyer │
│ │ │ Type: LoRA │
│ │ [Référence] │ Strength: 0.8 │
│ │ [Image] │ Steps: 30 │
│ │ │ │
│ └──────────────┘ Description: │
│ Garçon ~12 ans, cheveux bruns │
│ ébouriffés, chapeau de paille, │
│ salopette bleue, pieds nus, │
│ expression malicieuse │
│ │
└─────────────────────────────────────────────────────┘
Upload d'Image de Référence
| Contrainte | Valeur |
|---|---|
| Formats acceptés | PNG, JPEG, WebP |
| Taille maximale | 10 Mo |
| Dimensions recommandées | 512×512 minimum |
| Fond | Transparent ou uni (meilleur résultat) |
🤖 Panneau Assistant
Interface de Chat
┌─────────────────────────────────────────────────────┐
│ 🤖 Assistant IA │
├─────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 🤖 Bonjour ! Je suis l'assistant opérateur │ │
│ │ de RetroToon Studio. Je peux : │ │
│ │ • Segmenter des personnages │ │
│ │ • Regénérer des arrière-plans │ │
│ │ • Détecter les plans │ │
│ │ • Analyser les frames │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 👤 Segmente Tom Sawyer dans cette frame │ │
│ └─────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────┐ │
│ │ 🤖 J'ai segmenté le personnage principal. │ │
│ │ Masque créé avec 95% de confiance. │ │
│ │ Calque "Tom Sawyer" ajouté. │ │
│ └─────────────────────────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────┤
│ [🔍 Analyser] [✂️ Segmenter] [🎨 Regénérer] │
├─────────────────────────────────────────────────────┤
│ [Message... ] [Envoyer]│
└─────────────────────────────────────────────────────┘
Actions Rapides
| Bouton | Raccourci | Action |
|---|---|---|
| 🔍 Analyser | A |
Décrit la frame courante via Vision |
| ✂️ Segmenter | S |
Lance SAM 2 sur la frame |
| 🎨 Regénérer | R |
Inpainting de l'arrière-plan |
| 📊 Détecter | D |
Détection de plans sur la séquence |
🎨 Design System — Blueprint
Palette de Couleurs
| Rôle | Couleur | Code OKLCH | Hex approx. |
|---|---|---|---|
| Fond principal | Bleu royal foncé | oklch(0.25 0.05 250) |
#1a1f3a |
| Fond secondaire | Bleu nuit | oklch(0.20 0.04 250) |
#141830 |
| Texte principal | Blanc | oklch(0.98 0 0) |
#fafafa |
| Texte secondaire | Gris bleuté | oklch(0.70 0.02 250) |
#9ca3af |
| Accent primaire | Bleu électrique | oklch(0.65 0.20 250) |
#3b82f6 |
| Accent succès | Vert néon | oklch(0.75 0.20 150) |
#22c55e |
| Accent alerte | Orange vif | oklch(0.70 0.20 60) |
#f59e0b |
| Accent danger | Rouge | oklch(0.60 0.20 25) |
#ef4444 |
| Grille | Semi-transparent | rgba(59,130,246,0.08) |
— |
Typographie
| Usage | Police | Poids | Taille |
|---|---|---|---|
| Titres | Inter | 700 (Bold) | 24-32px |
| Corps | Inter | 400 (Regular) | 14-16px |
| Code/Données | JetBrains Mono | 400 | 12-14px |
| Labels | Inter | 500 (Medium) | 11-12px |
Animations
| Élément | Durée | Easing | Déclencheur |
|---|---|---|---|
| Boutons (press) | 160ms | cubic-bezier(0.23,1,0.32,1) |
:active |
| Tooltips | 150ms | ease-out | Hover |
| Modals | 250ms | cubic-bezier(0.77,0,0.175,1) |
Open/Close |
| Panneaux | 200ms | ease-out | Toggle |
| Loupe | 100ms | ease-out | Move |
| Toast | 300ms | ease-out | Apparition |
📱 Responsive Design
| Breakpoint | Layout | Adaptation |
|---|---|---|
≥1280px |
Complet | 4 panneaux, sidebar ouverte |
1024-1279px |
Réduit | Sidebar collapsible, panneaux en tabs |
768-1023px |
Tablette | Viewport plein écran, panneaux en overlay |
<768px |
Mobile | Non supporté (message d'avertissement) |
⚠️ RetroToon Studio est conçu pour une utilisation desktop. L'édition vidéo professionnelle nécessite un écran large et une souris/trackpad.
🎬 RetroToon Studio
📚 Documentation
🏗️ Technique
⚙️ Gestion
🔗 Liens
v3.5 — Mai 2026
RetroToon Studio — Pipeline IA de Recomposition de Dessins Animés | Créé par William MERI | System D 3.0 | Mai 2026