VideoGen v2 est une application moderne et intuitive permettant de transformer instantanément du contenu Markdown en vidéos professionnelles et élégantes. Arborant une esthétique "Premium Dark Mode" avec des effets de Glassmorphism et des accents Néon, l'application offre une expérience d'édition fluide et un rendu vidéo de haute qualité via Remotion.
- Édition Markdown Intégrée : Saisissez votre contenu en Markdown et visualisez instantanément la structure de vos diapositives.
- Preview en Temps Réel : Visualisez vos changements (texte, couleurs, icônes) directement dans le lecteur vidéo avant l'exportation.
- Design Premium Dark : Une interface utilisateur moderne utilisant le Glassmorphism, des dégradés néon et une typographie raffinée.
- Styles de Diapositives Variés :
- Diapositive de Titre
- Diapositive de Concept (avec mise en avant de mots-clés)
- Diapositive de Liste & Récapitulation
- Schémas (étapes numérotées)
- Citations élégantes
- Export MP4 : Génération de la vidéo finale directement via le moteur Remotion.
- Synthèse Vocale (TTS) : Génération audio automatique pour accompagner vos présentations.
Le projet est divisé en trois services principaux orchestrés par un script de démarrage unique :
front/: L'interface utilisateur construite avec React, Vite et Tailwind CSS v4. Elle gère l'édition interactive des diapositives.video-gen-renderer/: Le moteur de rendu basé sur Remotion et un serveur Express. Il permet de prévisualiser et d'exporter les vidéos.back/: Un service Flask (Python) dédié à la gestion des assets et de la synthèse vocale.shared/: Contient les définitions de types TypeScript partagées entre les différents services.
- Node.js (v18+)
- Python 3.10+
- FFmpeg (indispensable pour l'exportation vidéo en .mp4)
Le moyen le plus simple de lancer l'application est d'utiliser le script start.sh à la racine :
chmod +x start.sh
./start.shCe script va automatiquement :
- Installer les dépendances Python dans un environnement virtuel (
back/). - Lancer le service TTS sur le port
5000. - Lancer le serveur de rendu Remotion sur le port
3001. - Lancer le frontend React sur le port
5173.
L'application sera alors accessible à l'adresse : http://localhost:5173
- Modifiez les styles globaux dans
front/src/index.css. - Les composants de l'interface (Lecteur, Éditeur, Boutons) se trouvent dans
front/src/components/.
- Les designs des diapositives vidéo (titres, couleurs, animations) sont dans
src/slides/. - Les constantes de design (couleurs, polices) sont centralisées dans
src/design.ts. - Pour ouvrir Remotion Studio et déboguer les animations :
cd video-gen-renderer npm run studio
L'application utilise un système de design cohérent :
- Background : Anthracite profond avec grille de points subtile.
- Verre poli (Glass) : Bordures transparentes et flou d'arrière-plan.
- Néons : Accents de couleurs (Jaune, Indigo, Rose, Vert, etc.) avec effets de lueur (
box-shadowettext-shadow).
Projet développé avec passion pour la création de contenu vidéo simplifiée.