🎬 RetroToon Studio — Wiki
Pipeline IA de Recomposition de Dessins Animés Vintage
🎯 Qu'est-ce que RetroToon Studio ?
RetroToon Studio est un éditeur non-linéaire (NLE) spécialisé dans la recomposition artistique de dessins animés classiques. Il permet de prendre une vidéo d'animation vintage — Tom Sawyer, Goldorak, Candy, Les Mystérieuses Cités d'Or — et de la transformer frame par frame en une version moderne, tout en préservant l'âme et le charme de l'original.
« Donnez une nouvelle vie à vos dessins animés préférés »
Le pipeline complet se décompose en 5 étapes :
╔═══════════╗ ╔═══════════╗ ╔═══════════════╗ ╔══════════════╗ ╔══════════╗
║ IMPORT ║ ──▶ ║ DÉTECTION ║ ──▶ ║ SEGMENTATION ║ ──▶ ║ REGÉNÉRATION ║ ──▶ ║ EXPORT ║
║ Vidéo ║ ║ de Plans ║ ║ par Calques ║ ║ IA / Style ║ ║ Vidéo ║
╚═══════════╝ ╚═══════════╝ ╚═══════════════╝ ╚══════════════╝ ╚══════════╝
│ │ │ │ │
Upload MP4 Chi-Squared SAM 2 Auto Gemini Vision FFmpeg Encode
Canvas API Histogramme Point/Box Style Transfer Audio Sync
3 modes FPS Hard/Dissolve Propagation ControlNet/LoRA Batch Export
📖 Sommaire du Wiki
| Page | Description |
|---|---|
| Architecture-Technique | Stack complète, flux de données, schéma DB, procédures tRPC |
| Guide-Utilisateur | Tutoriel pas-à-pas : import, workspace, timeline, export |
| Pipeline-IA | Détection de plans, segmentation, regénération, assistant |
| Interface-NLE | Viewport 6 modes, loupe duale, raccourcis, audio sync |
| Administration | Panel admin, configuration LLM, moteurs IA, services |
| Roadmap | Phases du projet, fonctionnalités planifiées, changelog |
| Installation | Démarrage rapide, variables d'environnement, déploiement |
⚡ Fonctionnalités Clés
🎞️ Import Intelligent
L'import vidéo offre 3 modes adaptés à chaque besoin :
| Mode | FPS | Résolution | Format | Usage |
|---|---|---|---|---|
| 🚀 Rapide | 8 | 480p | JPEG 85% | Prévisualisation, tests rapides |
| 🎯 Qualité | 24 | Original | PNG | Production, rendu final |
| ⚙️ Personnalisé | 1-60 | 360p→Original | JPEG/PNG | Contrôle total |
L'extraction se fait côté client via Canvas API — aucun serveur FFmpeg requis pour le mode standard. Un compteur en temps réel affiche la progression et le nombre de frames extraites.
🖥️ Workspace NLE Professionnel
Le workspace est organisé en 4 panneaux redimensionnables :
┌──────────────────────────────────────────────────────────────┐
│ TOOLBAR (Transport) │
├────────────────────────────────┬─────────────────────────────┤
│ │ 📋 Layers Panel │
│ 🖼️ VIEWPORT │ 👤 Characters Panel │
│ (6 modes de vue) │ 🤖 Assistant Panel │
│ │ │
├────────────────────────────────┴─────────────────────────────┤
│ 🎬 TIMELINE (Séquences + Audio) │
└──────────────────────────────────────────────────────────────┘
🧠 IA Intégrée
L'assistant opérateur comprend le langage naturel et peut exécuter des pipelines complexes :
Utilisateur : "Segmente le personnage principal et regénère l'arrière-plan en style Ghibli"
Assistant : ┌─ Analyse frame courante (Vision)
├─ Détection personnage (SAM 2)
├─ Création masque automatique
├─ Inpainting arrière-plan (prompt: "Ghibli style background")
└─ Compositing final (alpha blending)
🏗️ Architecture en Bref
┌─────────────────────────┐
│ Client React │
│ (Tailwind + shadcn/ui) │
└───────────┬─────────────┘
│ tRPC (Superjson)
┌───────────▼─────────────┐
│ Serveur Express │
│ (tRPC + OAuth + Upload) │
└───┬───────────┬─────────┘
│ │
┌─────────▼──┐ ┌────▼────────┐
│ MySQL/TiDB │ │ S3 Storage │
│ (8 tables) │ │ (Frames) │
└────────────┘ └─────────────┘
| Couche | Technologies |
|---|---|
| Frontend | React 19, Tailwind CSS 4, shadcn/ui, Wouter, Lucide Icons |
| Transport | tRPC 11 + Superjson (types end-to-end) |
| Backend | Express 4, Drizzle ORM, Manus OAuth |
| Base de données | MySQL/TiDB, 8 tables, migrations Drizzle |
| Stockage | S3 compatible (frames, vidéos, assets) |
| IA | Gemini 2.5 Flash, Manus Built-in LLM, Image Generation |
🎨 Design System
Le thème Blueprint Architectural crée une ambiance technique et précise :
| Élément | Valeur | Aperçu |
|---|---|---|
| Fond principal | oklch(0.25 0.05 250) |
🟦 Bleu royal foncé |
| Grille technique | Semi-transparente | ░░░ Lignes fines |
| Texte principal | Blanc pur | ⬜ Haute lisibilité |
| Accent primaire | Bleu électrique | 🔵 Actions & liens |
| Accent succès | Vert néon | 🟢 Confirmations |
| Accent alerte | Violet lumineux | 🟣 Notifications |
| Typographie | Inter + JetBrains Mono | Sans-serif + Monospace |
📊 État du Projet
| Métrique | Valeur |
|---|---|
| Tests unitaires | 49 passants ✅ |
| Erreurs TypeScript | 0 ✅ |
| Tables DB | 8 (projects, frames, sequences, layers, characters, users, ai_engines, app_config) |
| Procédures tRPC | 35+ (auth, projects, frames, sequences, layers, characters, assistant, admin) |
| Composants React | 20+ (ViewportPanel, TimelinePanel, LayersPanel, AssistantPanel...) |
| Lignes de code | ~8000+ (TypeScript) |
👤 Auteur
| Nom | William MERI |
| Rôle | Architecte logiciel & Transformation numérique |
| Organisation | System D 3.0 |
| william.meri@gmail.com | |
| Git | git.cosmolan.fr/tarzzan |
Documentation maintenue par William MERI — Dernière mise à jour : Mai 2026
Architecture-Technique | Guide-Utilisateur | Pipeline-IA | Roadmap