srt-whiteboard-animation

# Skill d'animation tableau blanc SRT Un skill qui transforme les sous-titres SRT en vidéos de dessin sur tableau blanc, dessinées selon l'ordre narratif. Il combine **l'organisation par masques de zones** et le **tracé fluide** : chaque élément apparaît au fur et à mesure des sous-titres, la pointe du stylo trace en continu dans la zone, puis les couleurs sont ajoutées progressivement, et enfin le fichier MP4 est exporté. Idéal pour transformer des explications de connaissances, des récits oraux, des sous-titres de cours ou des scripts de courtes vidéos en animations dessinées sur fond de papier beige chaud. ## Exemple d'effet **Scène : la montagne aux singes et la banane volée** — en suivant l'ordre narratif des sous-titres, on dessine successivement la fausse montagne et le petit singe, le grand singe qui vole la banane, ainsi que les enfants spectateurs.  Trait original : [voir le PNG](examples/scene-01-monkey-mountain.png). ## Capacités principales - Analyse les sous-titres SRT et découpe les scènes selon une durée conseillée de 25 à 35 secondes - Produit d'abord le storyboard et la stratégie d'illustration, pour que chaque scène n'exprime qu'une seule idée centrale - Établit un ordre de dessin sémantique pour les éléments, basé sur les événements des sous-titres plutôt que sur les coordonnées de l'image - Utilise `annotation.json` pour gérer les zones, la chronologie, les associations de sous-titres et les zones protégées contre les chevauchements - Chaque zone adopte un tracé fluide continu : d'abord `ink` pour poser le trait, puis `color` pour ajouter la couleur - Prend en charge un aperçu dans le navigateur pour ajuster les zones, l'ordre, le temps et les associations de sous-titres - Prend en charge le rendu scène par scène et la fusion de plusieurs scènes, pour produire un MP4 complet ## Mode de fonctionnement La clé de ce skill est « piloté par les sous-titres, confirmation étape par étape ». Chaque étape attend une confirmation avant de passer à la suivante, afin d'éviter de gaspiller du temps de rendu lorsque le storyboard, le trait ou les annotations ne sont pas encore finalisés : 1. Analyse le SRT et produit le storyboard et la stratégie d'illustration. 2. Après confirmation, génère un trait de style unifié. 3. Après confirmation du trait, crée les annotations en combinant les sous-titres et l'image d'origine, puis les charge dans l'aperçu. 4. Après confirmation des annotations, génère une image de contrôle des zones et des directions. 5. Dans l'aperçu, ajuste les zones, l'ordre narratif, la chronologie et les associations de sous-titres, puis enregistre. 6. Après confirmation des annotations finales, effectue le rendu MP4 scène par scène. 7. Pour les projets multi-scènes, fusionne après confirmation de chaque scène rendue. ## Normes visuelles - Fond de papier beige chaud : `#F5EBD7` recommandé - Traits de dessin gris foncé, avec seulement de petites touches conceptuelles en rouge, orange et bleu - Dessin à main levée minimaliste, fond propre et espace blanc suffisant - Pas de texte de scène, d'étiquettes, d'effet photographique, de rendu 3D ou de textures complexes ## Installation et environnement Le skill est livré avec un script autonome de préparation d'environnement virtuel Python. Lors de la première exécution : ```bash python scripts/prepare_env.py --check python scripts/prepare_env.py ``` En cas de succès, la première commande affiche `ENV_PY=<chemin>` ; utilisez ensuite cet interpréteur pour les rendus afin de garantir l'isolation des dépendances. ## Structure des ressources du projet ```text assets/whiteboard/<nom-du-projet>/ ├── scene-01-<nom>.png ├── scene-01-<nom>.annotation.json ├── scene-01-<nom>-whiteboard.mp4 └── scene-01-<nom>-preview.mp4 ``` L'image et l'annotation doivent porter le même nom, par exemple `scene-01-demo.png` correspond à `scene-01-demo.annotation.json`. ## Format d'annotation Chaque élément utilise des coordonnées en pixels entiers de l'image d'origine, et relie les événements des sous-titres via `sequence`, `subtitle` et `narrativeRole`. Les zones doivent être ordonnées selon « mise en place de la scène → personnage ou objet clé → action ou changement → réaction ou résultat ». ```json { "sceneId": "scene-01", "canvas": { "width": 1672, "height": 941 }, "storyBasis": "Le petit singe est assis sur la montagne aux singes avec une banane, le grand singe lui vole la banane, les enfants regardent.", "sceneDurationMs": 9000, "elements": [ { "id": "rockery", "label": "Scène de la montagne aux singes", "sequence": 1, "narrativeRole": "Mise en place de la scène de l'histoire", "subtitle": "Le petit singe est assis au sommet de la montagne aux singes, une banane à la main.", "type": "structure", "region": { "x": 20, "y": 120, "width": 540, "height": 780 }, "reveal": { "direction": "top_to_bottom", "startMs": 300, "durationMs": 2600, "maskPaddingPx": 22, "protectedRegions": [] }, "handPath": { "start": [290, 130], "end": [290, 890], "easing": "easeInOut" } } ] } ``` `direction` et `handPath` servent de proxy rectangulaire pour l'aperçu ; le tracé réel du rendu final est généré automatiquement par le traceur fluide. Pour les objets qui se chevauchent, indiquez dans `protectedRegions` des éléments plus anciens les zones à afficher plus tard, afin d'éviter que le contenu suivant n'apparaisse prématurément. ## Commandes courantes Analyser les sous-titres et générer un storyboard suggéré : ```bash python scripts/parse_srt.py <sous-titres.srt> --target-sec 30 --min-sec 25 --max-sec 35 ``` Générer une image de contrôle des zones : ```bash python scripts/render_annotation_preview.py <chemin-image> <chemin-annotation> <chemin-sortie-aperçu> ``` Ouvrez `assets/preview.html`, utilisez « Ouvrir un dossier » pour charger le répertoire de la scène, puis modifiez les zones, l'ordre, le temps et les associations de sous-titres. Rendu d'une scène : ```bash <ENV_PY> scripts/render_stream_whiteboard.py <chemin-image> <chemin-annotation> <sortie.mp4> assets/drawing-hand.png \ --ink-path grid --color-fill contour-wipe ``` Fusion de plusieurs scènes : ```bash <ENV_PY> scripts/merge_scenes.py --inputs scene1.mp4 scene2.mp4 scene3.mp4 --output final.mp4 ``` ## Contrôle qualité - La première image est un fond de papier beige chaud propre, sans traits apparaissant prématurément - `canvas` correspond aux dimensions de l'image d'origine, toutes les zones sont des coordonnées en pixels entiers à l'intérieur du canevas - `sequence`, `startMs` et l'ordre narratif des sous-titres sont cohérents - Dans les images intermédiaires, les zones non commencées et les zones protégées n'apparaissent pas prématurément - La pointe du stylo reste proche du tracé fluide en cours ; lorsque le trait est net, on peut choisir `--ink-path skeleton` - Chaque scène reste affichée au moins 0,5 seconde en entier après sa fin ; l'ordre de fusion multi-scènes correspond au storyboard des sous-titres ## Contenu du dépôt ```text srt-whiteboard-animation/ ├── SKILL.md # Flux de travail complet et contraintes ├── assets/ │ ├── drawing-hand.png # Ressource de main │ ├── preview.html # Aperçu d'édition local ├── examples/ # Ressources d'exemple du README ├── scripts/ │ ├── parse_srt.py # Analyse des sous-titres et suggestion de storyboard │ ├── render_annotation_preview.py # Image de contrôle des annotations │ ├── render_stream_whiteboard.py # Rendu MP4 à tracé fluide │ ├── merge_scenes.py # Fusion multi-scènes │ └── prepare_env.py # Préparation de l'environnement de dépendances └── agents/openai.yaml # Métadonnées Codex ``` ## Contribution Les issues et pull requests sont les bienvenues. Toute modification concernant la logique de dessin doit être vérifiée avec de vrais sous-titres, annotations et rendus finaux pour contrôler la protection par masques, la chronologie et l'image finale. ## Licence Ce projet est open source sous licence MIT, voir [LICENSE](LICENSE). ## À propos de l'auteur Un vieux passionné d'aquariophilie / AI Builder / construit une entreprise individuelle avec une équipe d'IA. Douyin, Bilibili, compte public : 江哥是老登啊