Spaces:
Running
Running
**Rôle:** Tu es un expert en création automatisée de vidéos YouTube. **Mission:** À partir du thème "[THÈME]" et d'une durée de [DURÉE] minutes, génère un projet vidéo complet incluant : 1. **Script détaillé** (intro percutante, segments chronométrés, conclusion avec CTA) 2. **Storyboard visuel** (description des images/vidéos pour chaque séquence) 3. **Paramètres techniques** (voix off, musique, sous-titres) 4. **Optimisation YouTube** (titre accrocheur, description, miniatures) **Exigences:** - Public cible : [Précisez si vous avez un public, ex: "adolescents", "débutants en cuisine"] - Style : [ex: "dynamique", "pédagogique", "humoristique"] - Format : [ex: "tutoriel", "top 5", "documentaire"] **Sortie:** Donne tout en français, structuré en sections claires. - Initial Deployment
14425f6
verified
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Générateur de Projet Vidéo YouTube</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); } | |
| .card-hover { transition: all 0.3s ease; } | |
| .card-hover:hover { transform: translateY(-5px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } | |
| .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; } | |
| .section-divider { background: linear-gradient(90deg, transparent, #e5e7eb, transparent); } | |
| .timeline-item::before { content: ''; position: absolute; left: -8px; top: 8px; width: 16px; height: 16px; background: #667eea; border-radius: 50%; } | |
| .step-number { background: linear-gradient(135deg, #667eea, #764ba2); } | |
| .expandable-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } | |
| .expandable-content.active { max-height: 1000px; } | |
| .floating-btn { position: fixed; bottom: 2rem; right: 2rem; z-index: 50; } | |
| .progress-bar { transition: width 0.5s ease; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <!-- Header --> | |
| <header class="gradient-bg text-white py-16"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-4 text-center"> | |
| <i class="fas fa-video mr-3"></i> | |
| Générateur de Projet Vidéo YouTube | |
| </h1> | |
| <p class="text-xl md:text-2xl text-center opacity-90">Créez des vidéos optimisées en quelques clics</p> | |
| </div> | |
| </header> | |
| <!-- Form Section --> | |
| <section class="container mx-auto px-4 py-12"> | |
| <div class="max-w-4xl mx-auto"> | |
| <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Configurez votre projet vidéo</h2> | |
| <form id="videoForm" class="space-y-6"> | |
| <div class="grid md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-semibold text-gray-700 mb-2">Thème principal</label> | |
| <input type="text" id="theme" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Ex: Cuisine rapide pour étudiants" required> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-semibold text-gray-700 mb-2">Durée (minutes)</label> | |
| <input type="number" id="duration" min="1" max="60" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent" placeholder="Ex: 8" required> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-semibold text-gray-700 mb-2">Public cible</label> | |
| <select id="audience" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent" required> | |
| <option value="">Choisissez...</option> | |
| <option value="ados">Adolescents (13-18 ans)</option> | |
| <option value="jeunes-adultes">Jeunes adultes (18-25 ans)</option> | |
| <option value="adultes">Adultes (25-40 ans)</option> | |
| <option value="seniors">Seniors (40+ ans)</option> | |
| <option value="debutants">Débutants absolus</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-semibold text-gray-700 mb-2">Style de vidéo</label> | |
| <select id="style" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent" required> | |
| <option value="">Choisissez...</option> | |
| <option value="dynamique">Dynamique et énergique</option> | |
| <option value="pedagogique">Pédagogique et calme</option> | |
| <option value="humoristique">Humoristique et décalé</option> | |
| <option value="dramatique">Dramatique et intense</option> | |
| <option value="inspirant">Inspirant et motivant</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-semibold text-gray-700 mb-2">Format vidéo</label> | |
| <select id="format" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent" required> | |
| <option value="">Choisissez...</option> | |
| <option value="tutoriel">Tutoriel pas-à-pas</option> | |
| <option value="top5">Top 5 / Classement</option> | |
| <option value="documentaire">Mini-documentaire</option> | |
| <option value="challenge">Défi ou challenge</option> | |
| <option value="vlog">Vlog quotidien</option> | |
| </select> | |
| </div> | |
| <button type="submit" class="w-full bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-bold py-4 px-6 rounded-lg hover:from-indigo-600 hover:to-purple-700 transform transition duration-200 hover:scale-105"> | |
| <i class="fas fa-magic mr-2"></i> | |
| Générer mon projet vidéo | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Loading Section --> | |
| <section id="loadingSection" class="hidden container mx-auto px-4 py-12"> | |
| <div class="text-center"> | |
| <div class="inline-block animate-spin rounded-full h-16 w-16 border-b-2 border-indigo-500 mb-4"></div> | |
| <h3 class="text-2xl font-semibold text-gray-700 mb-2">Création de votre projet...</h3> | |
| <div class="w-64 mx-auto bg-gray-200 rounded-full h-2"> | |
| <div class="progress-bar bg-indigo-500 h-2 rounded-full" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Results Section --> | |
| <section id="resultsSection" class="hidden container mx-auto px-4 py-12"> | |
| <!-- Project Overview --> | |
| <div class="max-w-4xl mx-auto mb-12"> | |
| <div class="bg-white rounded-2xl shadow-xl p-8"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4"> | |
| <i class="fas fa-play-circle text-indigo-500 mr-2"></i> | |
| Aperçu du projet | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-6"> | |
| <div class="text-center"> | |
| <div class="step-number text-white text-2xl font-bold rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">1</div> | |
| <h4 class="font-semibold">Script détaillé</h4> | |
| <p class="text-sm text-gray-600">Structure chronométrée avec intro, segments et CTA</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="step-number text-white text-2xl font-bold rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">2</div> | |
| <h4 class="font-semibold">Storyboard visuel</h4> | |
| <p class="text-sm text-gray-600">Plan de tournage avec descriptions visuelles</p> | |
| </div> | |
| <div class="text-center"> | |
| <div class="step-number text-white text-2xl font-bold rounded-full w-16 h-16 flex items-center justify-center mx-auto mb-2">3</div> | |
| <h4 class="font-semibold">Optimisation YT</h4> | |
| <p class="text-sm text-gray-600">Titre, description et miniatures optimisées</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Script Section --> | |
| <div class="max-w-4xl mx-auto mb-8"> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-6"> | |
| <h3 class="text-2xl font-bold"> | |
| <i class="fas fa-scroll mr-2"></i> | |
| Script détaillé | |
| </h3> | |
| <p class="opacity-90 mt-1">Structure chronométrée avec timing précis</p> | |
| </div> | |
| <div class="p-8"> | |
| <div id="scriptContent" class="space-y-6"> | |
| <!-- Will be filled by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Storyboard Section --> | |
| <div class="max-w-4xl mx-auto mb-8"> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="bg-gradient-to-r from-green-500 to-teal-600 text-white p-6"> | |
| <h3 class="text-2xl font-bold"> | |
| <i class="fas fa-film mr-2"></i> | |
| Storyboard visuel | |
| </h3> | |
| <p class="opacity-90 mt-1">Séquences visuelles détaillées</p> | |
| </div> | |
| <div class="p-8"> | |
| <div id="storyboardContent" class="space-y-4"> | |
| <!-- Will be filled by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Technical Settings --> | |
| <div class="max-w-4xl mx-auto mb-8"> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="bg-gradient-to-r from-purple-500 to-pink-600 text-white p-6"> | |
| <h3 class="text-2xl font-bold"> | |
| <i class="fas fa-cogs mr-2"></i> | |
| Paramètres techniques | |
| </h3> | |
| <p class="opacity-90 mt-1">Voix off, musique et sous-titres</p> | |
| </div> | |
| <div class="p-8"> | |
| <div id="technicalContent" class="grid md:grid-cols-3 gap-6"> | |
| <!-- Will be filled by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- YouTube Optimization --> | |
| <div class="max-w-4xl mx-auto mb-8"> | |
| <div class="bg-white rounded-2xl shadow-xl overflow-hidden"> | |
| <div class="bg-gradient-to-r from-red-500 to-orange-600 text-white p-6"> | |
| <h3 class="text-2xl font-bold"> | |
| <i class="fab fa-youtube mr-2"></i> | |
| Optimisation YouTube | |
| </h3> | |
| <p class="opacity-90 mt-1">Titre, description et miniatures</p> | |
| </div> | |
| <div class="p-8"> | |
| <div id="youtubeContent" class="space-y-6"> | |
| <!-- Will be filled by JavaScript --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Export Button --> | |
| <div class="text-center"> | |
| <button onclick="exportProject()" class="bg-gradient-to-r from-green-500 to-emerald-600 text-white font-bold py-4 px-8 rounded-lg hover:from-green-600 hover:to-emerald-700 transform transition duration-200 hover:scale-105"> | |
| <i class="fas fa-download mr-2"></i> | |
| Exporter le projet complet | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Floating Action Button --> | |
| <button class="floating-btn bg-indigo-500 text-white p-4 rounded-full shadow-lg hover:bg-indigo-600 transition duration-200" onclick="scrollToTop()"> | |
| <i class="fas fa-arrow-up"></i> | |
| </button> | |
| <script> | |
| // Global variables to store project data | |
| let projectData = {}; | |
| // Form submission handler | |
| document.getElementById('videoForm').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| const formData = { | |
| theme: document.getElementById('theme').value, | |
| duration: document.getElementById('duration').value, | |
| audience: document.getElementById('audience').value, | |
| style: document.getElementById('style').value, | |
| format: document.getElementById('format').value | |
| }; | |
| // Show loading | |
| document.getElementById('loadingSection').classList.remove('hidden'); | |
| document.getElementById('resultsSection').classList.add('hidden'); | |
| // Simulate processing | |
| animateProgress(); | |
| setTimeout(() => { | |
| generateProject(formData); | |
| document.getElementById('loadingSection').classList.add('hidden'); | |
| document.getElementById('resultsSection').classList.remove('hidden'); | |
| window.scrollTo({ top: document.getElementById('resultsSection').offsetTop - 100, behavior: 'smooth' }); | |
| }, 2500); | |
| }); | |
| function animateProgress() { | |
| const progressBar = document.querySelector('.progress-bar'); | |
| let width = 0; | |
| const interval = setInterval(() => { | |
| if (width >= 100) { | |
| clearInterval(interval); | |
| } else { | |
| width += 2; | |
| progressBar.style.width = width + '%'; | |
| } | |
| }, 50); | |
| } | |
| function generateProject(data) { | |
| projectData = { | |
| theme: data.theme, | |
| duration: data.duration, | |
| audience: data.audience, | |
| style: data.style, | |
| format: data.format, | |
| script: generateScript(data), | |
| storyboard: generateStoryboard(data), | |
| technical: generateTechnical(data), | |
| youtube: generateYouTubeOptimization(data) | |
| }; | |
| displayScript(projectData.script); | |
| displayStoryboard(projectData.storyboard); | |
| displayTechnical(projectData.technical); | |
| displayYouTubeOptimization(projectData.youtube); | |
| } | |
| function generateScript(data) { | |
| const duration = parseInt(data.duration); | |
| const segments = Math.floor(duration / 2); | |
| return { | |
| intro: { | |
| time: "0:00 - 0:15", | |
| content: generateIntro(data), | |
| hook: generateHook(data) | |
| }, | |
| segments: Array.from({length: segments}, (_, i) => ({ | |
| time: `${i*2 + 0.5}:${(i*2 + 2.5).toString().padStart(2, '0')}`, | |
| title: `Segment ${i + 1}: ${generateSegmentTitle(data, i)}`, | |
| content: generateSegmentContent(data, i) | |
| })), | |
| outro: { | |
| time: `${duration - 0.5}:${duration.toString().padStart(2, '0')}`, | |
| content: generateOutro(data), | |
| cta: generateCTA(data) | |
| } | |
| }; | |
| } | |
| function generateIntro(data) { | |
| const intros = { | |
| 'dynamique': "Salut les gars ! Prêts pour une vidéo explosive sur [THÈME] ?", | |
| 'pedagogique': "Bienvenue dans cette nouvelle vidéo éducative où nous allons explorer en détail [THÈME]", | |
| 'humoristique': "Alors aujourd'hui, on va parler de [THÈME]... et croyez-moi, ça va être drôle !", | |
| 'dramatique': "Ce que vous allez découvrir aujourd'hui sur [THÈME] va changer votre vision", | |
| 'inspirant': "Imaginez pouvoir [BENEFICE] grâce à [THÈME] - c'est possible, et je vais vous montrer comment" | |
| }; | |
| return intros[data.style].replace('[THÈME]', data.theme); | |
| } | |
| function generateHook(data) { | |
| const hooks = { | |
| 'tutoriel': "En seulement 3 étapes simples", | |
| 'top5': "Le numéro 3 va vous surprendre", | |
| 'documentaire': "Des secrets que peu de gens connaissent", | |
| 'challenge': "J'ai relevé le défi pendant 30 jours", | |
| 'vlog': "Vous ne devinerez jamais ce qui s'est passé" | |
| }; | |
| return hooks[data.format]; | |
| } | |
| function generateSegmentTitle(data, index) { | |
| const titles = { | |
| 'tutoriel': ["La préparation", "La technique", "Les astuces finales"], | |
| 'top5': ["Numéro 5", "Numéro 4", "Numéro 3", "Numéro 2", "Numéro 1"], | |
| 'documentaire': ["Contexte historique", "Analyse actuelle", "Perspectives d'avenir"], | |
| 'challenge': ["Jour 1-5", "Jour 6-15", "Jour 16-25", "Résultats"], | |
| 'vlog': ["Matin", "Après-midi", "Soir"] | |
| }; | |
| const segmentTitles = titles[data.format] || ["Introduction", "Développement", "Conclusion"]; | |
| return segmentTitles[index] || `Point ${index + 1}`; | |
| } | |
| function generateSegmentContent(data, index) { | |
| const contents = [ | |
| "Commençons par les bases. [DETAIL] est essentiel pour réussir.", | |
| "Passons maintenant à l'aspect pratique. Ici, il faut faire attention à [POINT_IMPORTANT].", | |
| "Pour finir, voici l'astuce secrète que tous les pros utilisent : [ASTUCE]" | |
| ]; | |
| return contents[index % contents.length].replace('[DETAIL]', data.theme); | |
| } | |
| function generateOutro(data) { | |
| const outros = { | |
| 'dynamique': "C'était une vidéo de ouf ! N'oubliez pas de liker", | |
| 'pedagogique': "J'espère que cette vidéo vous aura été utile", | |
| 'humoristique': "J'espère que ça vous aura fait rire !", | |
| 'dramatique': "Cette découverte change tout", | |
| 'inspirant': "Croyez en vous, vous pouvez le faire" | |
| }; | |
| return outros[data.style]; | |
| } | |
| function generateCTA(data) { | |
| return "Abonnez-vous et activez la cloche pour ne rien manquer !"; | |
| } | |
| function generateStoryboard(data) { | |
| const duration = parseInt(data.duration); | |
| const shots = Math.floor(duration / 1.5); | |
| return Array.from({length: shots}, (_, i) => ({ | |
| time: `${i*1.5}:${((i+1)*1.5).toString().padStart(2, '0')}`, | |
| shot: i === 0 ? "Plan large - Présentateur en plan américain" : | |
| i % 3 === 0 ? "Plan rapproché - Détails du sujet" : | |
| i % 3 === 1 ? "Plan fixe - Explication visuelle" : | |
| "Travelling - Mouvement dynamique", | |
| visual: `Visuel ${i+1}: ${data.theme} - ${i === 0 ? 'Introduction accrocheuse' : 'Développement du contenu'}`, | |
| transition: i === 0 ? "Fade in" : i % 2 === 0 ? "Cut" : "Dissolve" | |
| })); | |
| } | |
| function generateTechnical(data) { | |
| return { | |
| voice: { | |
| type: data.style === 'dynamique' ? "Voix masculine énergique" : | |
| data.style === 'pedagogique' ? "Voix féminine calme" : | |
| data.style === 'humoristique' ? "Voix avec intonations comiques" : | |
| "Voix professionnelle", | |
| speed: data.style === 'dynamique' ? "Rapide" : "Modéré", | |
| tone: data.style | |
| }, | |
| music: { | |
| genre: data.style === 'dynamique' ? "Electro/Pop" : | |
| data.style === 'pedagogique' ? "Ambient/Lofi" : | |
| data.style === 'humoristique' ? "Jazz/Funky" : | |
| "Orchestral", | |
| volume: 15, | |
| intro: "3 secondes de musique d'intro" | |
| }, | |
| subtitles: { | |
| style: "Grand et lisible", | |
| color: "Blanc avec contour noir", | |
| position: "Bas-centre" | |
| } | |
| }; | |
| } | |
| function generateYouTubeOptimization(data) { | |
| const titles = { | |
| 'tutoriel': `COMMENT ${data.theme.toUpperCase()} EN ${data.duration} MINUTES (Méthode Rapide)`, | |
| 'top5': `TOP ${Math.floor(data.duration/2)} DES MEILLEURS ${data.theme.toUpperCase()} (Numéro 3 est INCROYABLE)`, | |
| 'documentaire': `LE VRAI SECRET DE ${data.theme.toUpperCase()} - Documentaire Exclusif`, | |
| 'challenge': `J'AI TESTÉ ${data.theme.toUpperCase()} PENDANT ${data.duration} MINUTES - RÉSULTAT SURPRENANT`, | |
| 'vlog': `UNE JOURNÉE COMPLÈTE DE ${data.theme.toUpperCase()} - Vlog Honnête` | |
| }; | |
| return { | |
| title: titles[data.format], | |
| description: `🎯 Dans cette vidéo, nous explorons ${data.theme} en profondeur. | |
| 📌 Ce que vous allez découvrir : | |
| ${Array.from({length: Math.floor(data.duration/2)}, (_, i) => `• ${generateSegmentTitle(data, i)}`).join('\n')} | |
| 🎥 Vidéo parfaite pour : ${getAudienceText(data.audience)} | |
| ⏰ TIMESTAMPS : | |
| 00:00 Introduction | |
| ${Array.from({length: Math.floor(data.duration/2)}, (_, i) => `${(i*2+0.5).toString().padStart(2, '0')}:00 ${generateSegmentTitle(data, i)}`).join('\n')} | |
| ${data.duration-0.5}:00 Conclusion & CTA | |
| 👍 Si cette vidéo vous a plu, n'hésitez pas à liker et vous abonner ! | |
| #${data.theme.replace(/\s+/g, '')} #${data.format} #${data.audience}`, | |
| thumbnail: { | |
| text: ["Texte accrocheur", "Couleurs vives", "Visage expressif", "Flèches/directions"], | |
| colors: ["Rouge vif", "Bleu électrique", "Jaune fluo", "Contraste élevé"] | |
| }, | |
| tags: [data.theme, data.format, data.style, data.audience, "youtube", "français", "2024"] | |
| }; | |
| } | |
| function getAudienceText(audience) { | |
| const texts = { | |
| 'ados': "les ados et jeunes", | |
| 'jeunes-adultes': "les étudiants et jeunes actifs", | |
| 'adultes': "les adultes actifs", | |
| 'seniors': "les adultes expérimentés", | |
| 'debutants': "les débutants complets" | |
| }; | |
| return texts[audience]; | |
| } | |
| function displayScript(script) { | |
| const container = document.getElementById('scriptContent'); | |
| container.innerHTML = ` | |
| <div class="border-l-4 border-indigo-500 pl-4"> | |
| <h4 class="font-bold text-lg">Introduction</h4> | |
| <p class="text-gray-600 text-sm mb-2">${script.intro.time}</p> | |
| <p class="text-gray-800">${script.intro.content}</p> | |
| <p class="text-indigo-600 italic">${script.intro.hook}</p> | |
| </div> | |
| ${script.segments.map((segment, i) => ` | |
| <div class="border-l-4 border-green-500 pl-4"> | |
| <h4 class="font-bold text-lg">${segment.title}</h4> | |
| <p class="text-gray-600 text-sm mb-2">${segment.time}</p> | |
| <p class="text-gray-800">${segment.content}</p> | |
| </div> | |
| `).join('')} | |
| <div class="border-l-4 border-purple-500 pl-4"> | |
| <h4 class="font-bold text-lg">Conclusion</h4> | |
| <p class="text-gray-600 text-sm mb-2">${script.outro.time}</p> | |
| <p class="text-gray-800">${script.outro.content}</p> | |
| <p class="text-purple-600 font-semibold">${script.outro.cta}</p> | |
| </div> | |
| `; | |
| } | |
| function displayStoryboard(storyboard) { | |
| const container = document.getElementById('storyboardContent'); | |
| container.innerHTML = storyboard.map((shot, i) => ` | |
| <div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg"> | |
| <div class="step-number text-white text-sm font-bold rounded-full w-8 h-8 flex items-center justify-center">${i+1}</div> | |
| <div> | |
| <h4 class="font-semibold">${shot.time}</h4> | |
| <p class="text-sm text-gray-600"><strong>Plan:</strong> ${shot.shot}</p> | |
| <p class="text-sm text-gray-600"><strong>Visuel:</strong> ${shot.visual}</p> | |
| <p class="text-sm text-gray-500"><strong>Transition:</strong> ${shot.transition}</p> | |
| </div> | |
| </div> | |
| `).join(''); | |
| } | |
| function displayTechnical(technical) { | |
| const container = document.getElementById('technicalContent'); | |
| container.innerHTML = ` | |
| <div class="text-center"> | |
| <i class="fas fa-microphone text-3xl text-indigo-500 mb-2"></i> | |
| <h4 class="font-semibold">Voix off</h4> | |
| <p class="text-sm text-gray-600">${technical.voice.type}</p> | |
| <p class="text-xs text-gray-500">${technical.voice.speed} - ${technical.voice.tone}</p> | |
| </div> | |
| <div class="text-center"> | |
| <i class="fas fa-music text-3xl text-green-500 mb-2"></i> | |
| <h4 class="font-semibold">Musique</h4> | |
| <p class="text-sm text-gray-600">${technical.music.genre}</p> | |
| <p class="text-xs text-gray-500">Volume: ${technical.music.volume}%</p> | |
| </div> | |
| <div class="text-center"> | |
| <i class="fas fa-closed-captioning text-3xl text-purple-500 mb-2"></i> | |
| <h4 class="font-semibold">Sous-titres</h4> | |
| <p class="text-sm text-gray-600">${technical.subtitles.style}</p> | |
| <p class="text-xs text-gray-500">${technical.subtitles.color}</p> | |
| </div> | |
| `; | |
| } | |
| function displayYouTubeOptimization(youtube) { | |
| const container = document.getElementById('youtubeContent'); | |
| container.innerHTML = ` | |
| <div> | |
| <h4 class="font-bold text-lg mb-2">Titre optimisé</h4> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="font-semibold text-indigo-600">${youtube.title}</p> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-2">Description SEO</h4> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <p class="text-sm whitespace-pre-line">${youtube.description}</p> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-2">Miniature</h4> | |
| <div class="grid md:grid-cols-2 gap-4"> | |
| <div> | |
| <h5 class="font-semibold text-sm mb-2">Éléments</h5> | |
| <ul class="text-sm space-y-1"> | |
| ${youtube.thumbnail.text.map(t => `<li>• ${t}</li>`).join('')} | |
| </ul> | |
| </div> | |
| <div> | |
| <h5 class="font-semibold text-sm mb-2">Couleurs</h5> | |
| <ul class="text-sm space-y-1"> | |
| ${youtube.thumbnail.colors.map(c => `<li>• ${c}</li>`).join('')} | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-lg mb-2">Tags</h4> | |
| <div class="flex flex-wrap gap-2"> | |
| ${youtube.tags.map(tag => `<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">${tag}</span>`).join('')} | |
| </div> | |
| </div> | |
| `; | |
| } | |
| function exportProject() { | |
| const dataStr = JSON.stringify(projectData, null, 2); | |
| const dataBlob = new Blob([dataStr], {type: 'application/json'}); | |
| const url = URL.createObjectURL(dataBlob); | |
| const link = document.createElement('a'); | |
| link.href = url; | |
| link.download = `projet-youtube-${projectData.theme.replace(/\s+/g, '-').toLowerCase()}.json`; | |
| link.click(); | |
| } | |
| function scrollToTop() { | |
| window.scrollTo({ top: 0, behavior: 'smooth' }); | |
| } | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=AFROSALSA/generateur-video" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |