Hugging Face's logo

Spaces:
AFROSALSA
/
generateur-video
Running

App Files Community
AFROSALSA commited on
Commit
14425f6
·
verified ·
1 Parent(s): afa4d66

**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

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +582 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Generateur Video
3
- emoji: 👁
4
- colorFrom: red
5
- colorTo: yellow
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: generateur-video
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,582 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Générateur de Projet Vidéo YouTube</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
9
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
10
+ <style>
11
+ body { font-family: 'Inter', sans-serif; }
12
+ .gradient-bg { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
13
+ .card-hover { transition: all 0.3s ease; }
14
+ .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); }
15
+ .animate-pulse-slow { animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
16
+ .section-divider { background: linear-gradient(90deg, transparent, #e5e7eb, transparent); }
17
+ .timeline-item::before { content: ''; position: absolute; left: -8px; top: 8px; width: 16px; height: 16px; background: #667eea; border-radius: 50%; }
18
+ .step-number { background: linear-gradient(135deg, #667eea, #764ba2); }
19
+ .expandable-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
20
+ .expandable-content.active { max-height: 1000px; }
21
+ .floating-btn { position: fixed; bottom: 2rem; right: 2rem; z-index: 50; }
22
+ .progress-bar { transition: width 0.5s ease; }
23
+ </style>
24
+ </head>
25
+ <body class="bg-gray-50 min-h-screen">
26
+ <!-- Header -->
27
+ <header class="gradient-bg text-white py-16">
28
+ <div class="container mx-auto px-4">
29
+ <h1 class="text-4xl md:text-6xl font-bold mb-4 text-center">
30
+ <i class="fas fa-video mr-3"></i>
31
+ Générateur de Projet Vidéo YouTube
32
+ </h1>
33
+ <p class="text-xl md:text-2xl text-center opacity-90">Créez des vidéos optimisées en quelques clics</p>
34
+ </div>
35
+ </header>
36
+
37
+ <!-- Form Section -->
38
+ <section class="container mx-auto px-4 py-12">
39
+ <div class="max-w-4xl mx-auto">
40
+ <div class="bg-white rounded-2xl shadow-xl p-8 md:p-12">
41
+ <h2 class="text-3xl font-bold text-gray-800 mb-8 text-center">Configurez votre projet vidéo</h2>
42
+
43
+ <form id="videoForm" class="space-y-6">
44
+ <div class="grid md:grid-cols-2 gap-6">
45
+ <div>
46
+ <label class="block text-sm font-semibold text-gray-700 mb-2">Thème principal</label>
47
+ <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>
48
+ </div>
49
+
50
+ <div>
51
+ <label class="block text-sm font-semibold text-gray-700 mb-2">Durée (minutes)</label>
52
+ <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>
53
+ </div>
54
+ </div>
55
+
56
+ <div>
57
+ <label class="block text-sm font-semibold text-gray-700 mb-2">Public cible</label>
58
+ <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>
59
+ <option value="">Choisissez...</option>
60
+ <option value="ados">Adolescents (13-18 ans)</option>
61
+ <option value="jeunes-adultes">Jeunes adultes (18-25 ans)</option>
62
+ <option value="adultes">Adultes (25-40 ans)</option>
63
+ <option value="seniors">Seniors (40+ ans)</option>
64
+ <option value="debutants">Débutants absolus</option>
65
+ </select>
66
+ </div>
67
+
68
+ <div>
69
+ <label class="block text-sm font-semibold text-gray-700 mb-2">Style de vidéo</label>
70
+ <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>
71
+ <option value="">Choisissez...</option>
72
+ <option value="dynamique">Dynamique et énergique</option>
73
+ <option value="pedagogique">Pédagogique et calme</option>
74
+ <option value="humoristique">Humoristique et décalé</option>
75
+ <option value="dramatique">Dramatique et intense</option>
76
+ <option value="inspirant">Inspirant et motivant</option>
77
+ </select>
78
+ </div>
79
+
80
+ <div>
81
+ <label class="block text-sm font-semibold text-gray-700 mb-2">Format vidéo</label>
82
+ <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>
83
+ <option value="">Choisissez...</option>
84
+ <option value="tutoriel">Tutoriel pas-à-pas</option>
85
+ <option value="top5">Top 5 / Classement</option>
86
+ <option value="documentaire">Mini-documentaire</option>
87
+ <option value="challenge">Défi ou challenge</option>
88
+ <option value="vlog">Vlog quotidien</option>
89
+ </select>
90
+ </div>
91
+
92
+ <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">
93
+ <i class="fas fa-magic mr-2"></i>
94
+ Générer mon projet vidéo
95
+ </button>
96
+ </form>
97
+ </div>
98
+ </div>
99
+ </section>
100
+
101
+ <!-- Loading Section -->
102
+ <section id="loadingSection" class="hidden container mx-auto px-4 py-12">
103
+ <div class="text-center">
104
+ <div class="inline-block animate-spin rounded-full h-16 w-16 border-b-2 border-indigo-500 mb-4"></div>
105
+ <h3 class="text-2xl font-semibold text-gray-700 mb-2">Création de votre projet...</h3>
106
+ <div class="w-64 mx-auto bg-gray-200 rounded-full h-2">
107
+ <div class="progress-bar bg-indigo-500 h-2 rounded-full" style="width: 0%"></div>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Results Section -->
113
+ <section id="resultsSection" class="hidden container mx-auto px-4 py-12">
114
+ <!-- Project Overview -->
115
+ <div class="max-w-4xl mx-auto mb-12">
116
+ <div class="bg-white rounded-2xl shadow-xl p-8">
117
+ <h2 class="text-3xl font-bold text-gray-800 mb-4">
118
+ <i class="fas fa-play-circle text-indigo-500 mr-2"></i>
119
+ Aperçu du projet
120
+ </h2>
121
+ <div class="grid md:grid-cols-3 gap-6">
122
+ <div class="text-center">
123
+ <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>
124
+ <h4 class="font-semibold">Script détaillé</h4>
125
+ <p class="text-sm text-gray-600">Structure chronométrée avec intro, segments et CTA</p>
126
+ </div>
127
+ <div class="text-center">
128
+ <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>
129
+ <h4 class="font-semibold">Storyboard visuel</h4>
130
+ <p class="text-sm text-gray-600">Plan de tournage avec descriptions visuelles</p>
131
+ </div>
132
+ <div class="text-center">
133
+ <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>
134
+ <h4 class="font-semibold">Optimisation YT</h4>
135
+ <p class="text-sm text-gray-600">Titre, description et miniatures optimisées</p>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+
141
+ <!-- Script Section -->
142
+ <div class="max-w-4xl mx-auto mb-8">
143
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
144
+ <div class="bg-gradient-to-r from-indigo-500 to-purple-600 text-white p-6">
145
+ <h3 class="text-2xl font-bold">
146
+ <i class="fas fa-scroll mr-2"></i>
147
+ Script détaillé
148
+ </h3>
149
+ <p class="opacity-90 mt-1">Structure chronométrée avec timing précis</p>
150
+ </div>
151
+ <div class="p-8">
152
+ <div id="scriptContent" class="space-y-6">
153
+ <!-- Will be filled by JavaScript -->
154
+ </div>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Storyboard Section -->
160
+ <div class="max-w-4xl mx-auto mb-8">
161
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
162
+ <div class="bg-gradient-to-r from-green-500 to-teal-600 text-white p-6">
163
+ <h3 class="text-2xl font-bold">
164
+ <i class="fas fa-film mr-2"></i>
165
+ Storyboard visuel
166
+ </h3>
167
+ <p class="opacity-90 mt-1">Séquences visuelles détaillées</p>
168
+ </div>
169
+ <div class="p-8">
170
+ <div id="storyboardContent" class="space-y-4">
171
+ <!-- Will be filled by JavaScript -->
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Technical Settings -->
178
+ <div class="max-w-4xl mx-auto mb-8">
179
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
180
+ <div class="bg-gradient-to-r from-purple-500 to-pink-600 text-white p-6">
181
+ <h3 class="text-2xl font-bold">
182
+ <i class="fas fa-cogs mr-2"></i>
183
+ Paramètres techniques
184
+ </h3>
185
+ <p class="opacity-90 mt-1">Voix off, musique et sous-titres</p>
186
+ </div>
187
+ <div class="p-8">
188
+ <div id="technicalContent" class="grid md:grid-cols-3 gap-6">
189
+ <!-- Will be filled by JavaScript -->
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </div>
194
+
195
+ <!-- YouTube Optimization -->
196
+ <div class="max-w-4xl mx-auto mb-8">
197
+ <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
198
+ <div class="bg-gradient-to-r from-red-500 to-orange-600 text-white p-6">
199
+ <h3 class="text-2xl font-bold">
200
+ <i class="fab fa-youtube mr-2"></i>
201
+ Optimisation YouTube
202
+ </h3>
203
+ <p class="opacity-90 mt-1">Titre, description et miniatures</p>
204
+ </div>
205
+ <div class="p-8">
206
+ <div id="youtubeContent" class="space-y-6">
207
+ <!-- Will be filled by JavaScript -->
208
+ </div>
209
+ </div>
210
+ </div>
211
+ </div>
212
+
213
+ <!-- Export Button -->
214
+ <div class="text-center">
215
+ <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">
216
+ <i class="fas fa-download mr-2"></i>
217
+ Exporter le projet complet
218
+ </button>
219
+ </div>
220
+ </section>
221
+
222
+ <!-- Floating Action Button -->
223
+ <button class="floating-btn bg-indigo-500 text-white p-4 rounded-full shadow-lg hover:bg-indigo-600 transition duration-200" onclick="scrollToTop()">
224
+ <i class="fas fa-arrow-up"></i>
225
+ </button>
226
+
227
+ <script>
228
+ // Global variables to store project data
229
+ let projectData = {};
230
+
231
+ // Form submission handler
232
+ document.getElementById('videoForm').addEventListener('submit', function(e) {
233
+ e.preventDefault();
234
+
235
+ const formData = {
236
+ theme: document.getElementById('theme').value,
237
+ duration: document.getElementById('duration').value,
238
+ audience: document.getElementById('audience').value,
239
+ style: document.getElementById('style').value,
240
+ format: document.getElementById('format').value
241
+ };
242
+
243
+ // Show loading
244
+ document.getElementById('loadingSection').classList.remove('hidden');
245
+ document.getElementById('resultsSection').classList.add('hidden');
246
+
247
+ // Simulate processing
248
+ animateProgress();
249
+
250
+ setTimeout(() => {
251
+ generateProject(formData);
252
+ document.getElementById('loadingSection').classList.add('hidden');
253
+ document.getElementById('resultsSection').classList.remove('hidden');
254
+ window.scrollTo({ top: document.getElementById('resultsSection').offsetTop - 100, behavior: 'smooth' });
255
+ }, 2500);
256
+ });
257
+
258
+ function animateProgress() {
259
+ const progressBar = document.querySelector('.progress-bar');
260
+ let width = 0;
261
+ const interval = setInterval(() => {
262
+ if (width >= 100) {
263
+ clearInterval(interval);
264
+ } else {
265
+ width += 2;
266
+ progressBar.style.width = width + '%';
267
+ }
268
+ }, 50);
269
+ }
270
+
271
+ function generateProject(data) {
272
+ projectData = {
273
+ theme: data.theme,
274
+ duration: data.duration,
275
+ audience: data.audience,
276
+ style: data.style,
277
+ format: data.format,
278
+ script: generateScript(data),
279
+ storyboard: generateStoryboard(data),
280
+ technical: generateTechnical(data),
281
+ youtube: generateYouTubeOptimization(data)
282
+ };
283
+
284
+ displayScript(projectData.script);
285
+ displayStoryboard(projectData.storyboard);
286
+ displayTechnical(projectData.technical);
287
+ displayYouTubeOptimization(projectData.youtube);
288
+ }
289
+
290
+ function generateScript(data) {
291
+ const duration = parseInt(data.duration);
292
+ const segments = Math.floor(duration / 2);
293
+
294
+ return {
295
+ intro: {
296
+ time: "0:00 - 0:15",
297
+ content: generateIntro(data),
298
+ hook: generateHook(data)
299
+ },
300
+ segments: Array.from({length: segments}, (_, i) => ({
301
+ time: `${i*2 + 0.5}:${(i*2 + 2.5).toString().padStart(2, '0')}`,
302
+ title: `Segment ${i + 1}: ${generateSegmentTitle(data, i)}`,
303
+ content: generateSegmentContent(data, i)
304
+ })),
305
+ outro: {
306
+ time: `${duration - 0.5}:${duration.toString().padStart(2, '0')}`,
307
+ content: generateOutro(data),
308
+ cta: generateCTA(data)
309
+ }
310
+ };
311
+ }
312
+
313
+ function generateIntro(data) {
314
+ const intros = {
315
+ 'dynamique': "Salut les gars ! Prêts pour une vidéo explosive sur [THÈME] ?",
316
+ 'pedagogique': "Bienvenue dans cette nouvelle vidéo éducative où nous allons explorer en détail [THÈME]",
317
+ 'humoristique': "Alors aujourd'hui, on va parler de [THÈME]... et croyez-moi, ça va être drôle !",
318
+ 'dramatique': "Ce que vous allez découvrir aujourd'hui sur [THÈME] va changer votre vision",
319
+ 'inspirant': "Imaginez pouvoir [BENEFICE] grâce à [THÈME] - c'est possible, et je vais vous montrer comment"
320
+ };
321
+ return intros[data.style].replace('[THÈME]', data.theme);
322
+ }
323
+
324
+ function generateHook(data) {
325
+ const hooks = {
326
+ 'tutoriel': "En seulement 3 étapes simples",
327
+ 'top5': "Le numéro 3 va vous surprendre",
328
+ 'documentaire': "Des secrets que peu de gens connaissent",
329
+ 'challenge': "J'ai relevé le défi pendant 30 jours",
330
+ 'vlog': "Vous ne devinerez jamais ce qui s'est passé"
331
+ };
332
+ return hooks[data.format];
333
+ }
334
+
335
+ function generateSegmentTitle(data, index) {
336
+ const titles = {
337
+ 'tutoriel': ["La préparation", "La technique", "Les astuces finales"],
338
+ 'top5': ["Numéro 5", "Numéro 4", "Numéro 3", "Numéro 2", "Numéro 1"],
339
+ 'documentaire': ["Contexte historique", "Analyse actuelle", "Perspectives d'avenir"],
340
+ 'challenge': ["Jour 1-5", "Jour 6-15", "Jour 16-25", "Résultats"],
341
+ 'vlog': ["Matin", "Après-midi", "Soir"]
342
+ };
343
+ const segmentTitles = titles[data.format] || ["Introduction", "Développement", "Conclusion"];
344
+ return segmentTitles[index] || `Point ${index + 1}`;
345
+ }
346
+
347
+ function generateSegmentContent(data, index) {
348
+ const contents = [
349
+ "Commençons par les bases. [DETAIL] est essentiel pour réussir.",
350
+ "Passons maintenant à l'aspect pratique. Ici, il faut faire attention à [POINT_IMPORTANT].",
351
+ "Pour finir, voici l'astuce secrète que tous les pros utilisent : [ASTUCE]"
352
+ ];
353
+ return contents[index % contents.length].replace('[DETAIL]', data.theme);
354
+ }
355
+
356
+ function generateOutro(data) {
357
+ const outros = {
358
+ 'dynamique': "C'était une vidéo de ouf ! N'oubliez pas de liker",
359
+ 'pedagogique': "J'espère que cette vidéo vous aura été utile",
360
+ 'humoristique': "J'espère que ça vous aura fait rire !",
361
+ 'dramatique': "Cette découverte change tout",
362
+ 'inspirant': "Croyez en vous, vous pouvez le faire"
363
+ };
364
+ return outros[data.style];
365
+ }
366
+
367
+ function generateCTA(data) {
368
+ return "Abonnez-vous et activez la cloche pour ne rien manquer !";
369
+ }
370
+
371
+ function generateStoryboard(data) {
372
+ const duration = parseInt(data.duration);
373
+ const shots = Math.floor(duration / 1.5);
374
+
375
+ return Array.from({length: shots}, (_, i) => ({
376
+ time: `${i*1.5}:${((i+1)*1.5).toString().padStart(2, '0')}`,
377
+ shot: i === 0 ? "Plan large - Présentateur en plan américain" :
378
+ i % 3 === 0 ? "Plan rapproché - Détails du sujet" :
379
+ i % 3 === 1 ? "Plan fixe - Explication visuelle" :
380
+ "Travelling - Mouvement dynamique",
381
+ visual: `Visuel ${i+1}: ${data.theme} - ${i === 0 ? 'Introduction accrocheuse' : 'Développement du contenu'}`,
382
+ transition: i === 0 ? "Fade in" : i % 2 === 0 ? "Cut" : "Dissolve"
383
+ }));
384
+ }
385
+
386
+ function generateTechnical(data) {
387
+ return {
388
+ voice: {
389
+ type: data.style === 'dynamique' ? "Voix masculine énergique" :
390
+ data.style === 'pedagogique' ? "Voix féminine calme" :
391
+ data.style === 'humoristique' ? "Voix avec intonations comiques" :
392
+ "Voix professionnelle",
393
+ speed: data.style === 'dynamique' ? "Rapide" : "Modéré",
394
+ tone: data.style
395
+ },
396
+ music: {
397
+ genre: data.style === 'dynamique' ? "Electro/Pop" :
398
+ data.style === 'pedagogique' ? "Ambient/Lofi" :
399
+ data.style === 'humoristique' ? "Jazz/Funky" :
400
+ "Orchestral",
401
+ volume: 15,
402
+ intro: "3 secondes de musique d'intro"
403
+ },
404
+ subtitles: {
405
+ style: "Grand et lisible",
406
+ color: "Blanc avec contour noir",
407
+ position: "Bas-centre"
408
+ }
409
+ };
410
+ }
411
+
412
+ function generateYouTubeOptimization(data) {
413
+ const titles = {
414
+ 'tutoriel': `COMMENT ${data.theme.toUpperCase()} EN ${data.duration} MINUTES (Méthode Rapide)`,
415
+ 'top5': `TOP ${Math.floor(data.duration/2)} DES MEILLEURS ${data.theme.toUpperCase()} (Numéro 3 est INCROYABLE)`,
416
+ 'documentaire': `LE VRAI SECRET DE ${data.theme.toUpperCase()} - Documentaire Exclusif`,
417
+ 'challenge': `J'AI TESTÉ ${data.theme.toUpperCase()} PENDANT ${data.duration} MINUTES - RÉSULTAT SURPRENANT`,
418
+ 'vlog': `UNE JOURNÉE COMPLÈTE DE ${data.theme.toUpperCase()} - Vlog Honnête`
419
+ };
420
+
421
+ return {
422
+ title: titles[data.format],
423
+ description: `🎯 Dans cette vidéo, nous explorons ${data.theme} en profondeur.
424
+
425
+ 📌 Ce que vous allez découvrir :
426
+ ${Array.from({length: Math.floor(data.duration/2)}, (_, i) => `• ${generateSegmentTitle(data, i)}`).join('\n')}
427
+
428
+ 🎥 Vidéo parfaite pour : ${getAudienceText(data.audience)}
429
+
430
+ ⏰ TIMESTAMPS :
431
+ 00:00 Introduction
432
+ ${Array.from({length: Math.floor(data.duration/2)}, (_, i) => `${(i*2+0.5).toString().padStart(2, '0')}:00 ${generateSegmentTitle(data, i)}`).join('\n')}
433
+ ${data.duration-0.5}:00 Conclusion & CTA
434
+
435
+ 👍 Si cette vidéo vous a plu, n'hésitez pas à liker et vous abonner !
436
+
437
+ #${data.theme.replace(/\s+/g, '')} #${data.format} #${data.audience}`,
438
+ thumbnail: {
439
+ text: ["Texte accrocheur", "Couleurs vives", "Visage expressif", "Flèches/directions"],
440
+ colors: ["Rouge vif", "Bleu électrique", "Jaune fluo", "Contraste élevé"]
441
+ },
442
+ tags: [data.theme, data.format, data.style, data.audience, "youtube", "français", "2024"]
443
+ };
444
+ }
445
+
446
+ function getAudienceText(audience) {
447
+ const texts = {
448
+ 'ados': "les ados et jeunes",
449
+ 'jeunes-adultes': "les étudiants et jeunes actifs",
450
+ 'adultes': "les adultes actifs",
451
+ 'seniors': "les adultes expérimentés",
452
+ 'debutants': "les débutants complets"
453
+ };
454
+ return texts[audience];
455
+ }
456
+
457
+ function displayScript(script) {
458
+ const container = document.getElementById('scriptContent');
459
+ container.innerHTML = `
460
+ <div class="border-l-4 border-indigo-500 pl-4">
461
+ <h4 class="font-bold text-lg">Introduction</h4>
462
+ <p class="text-gray-600 text-sm mb-2">${script.intro.time}</p>
463
+ <p class="text-gray-800">${script.intro.content}</p>
464
+ <p class="text-indigo-600 italic">${script.intro.hook}</p>
465
+ </div>
466
+
467
+ ${script.segments.map((segment, i) => `
468
+ <div class="border-l-4 border-green-500 pl-4">
469
+ <h4 class="font-bold text-lg">${segment.title}</h4>
470
+ <p class="text-gray-600 text-sm mb-2">${segment.time}</p>
471
+ <p class="text-gray-800">${segment.content}</p>
472
+ </div>
473
+ `).join('')}
474
+
475
+ <div class="border-l-4 border-purple-500 pl-4">
476
+ <h4 class="font-bold text-lg">Conclusion</h4>
477
+ <p class="text-gray-600 text-sm mb-2">${script.outro.time}</p>
478
+ <p class="text-gray-800">${script.outro.content}</p>
479
+ <p class="text-purple-600 font-semibold">${script.outro.cta}</p>
480
+ </div>
481
+ `;
482
+ }
483
+
484
+ function displayStoryboard(storyboard) {
485
+ const container = document.getElementById('storyboardContent');
486
+ container.innerHTML = storyboard.map((shot, i) => `
487
+ <div class="flex items-start space-x-4 p-4 bg-gray-50 rounded-lg">
488
+ <div class="step-number text-white text-sm font-bold rounded-full w-8 h-8 flex items-center justify-center">${i+1}</div>
489
+ <div>
490
+ <h4 class="font-semibold">${shot.time}</h4>
491
+ <p class="text-sm text-gray-600"><strong>Plan:</strong> ${shot.shot}</p>
492
+ <p class="text-sm text-gray-600"><strong>Visuel:</strong> ${shot.visual}</p>
493
+ <p class="text-sm text-gray-500"><strong>Transition:</strong> ${shot.transition}</p>
494
+ </div>
495
+ </div>
496
+ `).join('');
497
+ }
498
+
499
+ function displayTechnical(technical) {
500
+ const container = document.getElementById('technicalContent');
501
+ container.innerHTML = `
502
+ <div class="text-center">
503
+ <i class="fas fa-microphone text-3xl text-indigo-500 mb-2"></i>
504
+ <h4 class="font-semibold">Voix off</h4>
505
+ <p class="text-sm text-gray-600">${technical.voice.type}</p>
506
+ <p class="text-xs text-gray-500">${technical.voice.speed} - ${technical.voice.tone}</p>
507
+ </div>
508
+ <div class="text-center">
509
+ <i class="fas fa-music text-3xl text-green-500 mb-2"></i>
510
+ <h4 class="font-semibold">Musique</h4>
511
+ <p class="text-sm text-gray-600">${technical.music.genre}</p>
512
+ <p class="text-xs text-gray-500">Volume: ${technical.music.volume}%</p>
513
+ </div>
514
+ <div class="text-center">
515
+ <i class="fas fa-closed-captioning text-3xl text-purple-500 mb-2"></i>
516
+ <h4 class="font-semibold">Sous-titres</h4>
517
+ <p class="text-sm text-gray-600">${technical.subtitles.style}</p>
518
+ <p class="text-xs text-gray-500">${technical.subtitles.color}</p>
519
+ </div>
520
+ `;
521
+ }
522
+
523
+ function displayYouTubeOptimization(youtube) {
524
+ const container = document.getElementById('youtubeContent');
525
+ container.innerHTML = `
526
+ <div>
527
+ <h4 class="font-bold text-lg mb-2">Titre optimisé</h4>
528
+ <div class="bg-gray-100 p-4 rounded-lg">
529
+ <p class="font-semibold text-indigo-600">${youtube.title}</p>
530
+ </div>
531
+ </div>
532
+
533
+ <div>
534
+ <h4 class="font-bold text-lg mb-2">Description SEO</h4>
535
+ <div class="bg-gray-100 p-4 rounded-lg">
536
+ <p class="text-sm whitespace-pre-line">${youtube.description}</p>
537
+ </div>
538
+ </div>
539
+
540
+ <div>
541
+ <h4 class="font-bold text-lg mb-2">Miniature</h4>
542
+ <div class="grid md:grid-cols-2 gap-4">
543
+ <div>
544
+ <h5 class="font-semibold text-sm mb-2">Éléments</h5>
545
+ <ul class="text-sm space-y-1">
546
+ ${youtube.thumbnail.text.map(t => `<li>• ${t}</li>`).join('')}
547
+ </ul>
548
+ </div>
549
+ <div>
550
+ <h5 class="font-semibold text-sm mb-2">Couleurs</h5>
551
+ <ul class="text-sm space-y-1">
552
+ ${youtube.thumbnail.colors.map(c => `<li>• ${c}</li>`).join('')}
553
+ </ul>
554
+ </div>
555
+ </div>
556
+ </div>
557
+
558
+ <div>
559
+ <h4 class="font-bold text-lg mb-2">Tags</h4>
560
+ <div class="flex flex-wrap gap-2">
561
+ ${youtube.tags.map(tag => `<span class="bg-indigo-100 text-indigo-800 px-3 py-1 rounded-full text-sm">${tag}</span>`).join('')}
562
+ </div>
563
+ </div>
564
+ `;
565
+ }
566
+
567
+ function exportProject() {
568
+ const dataStr = JSON.stringify(projectData, null, 2);
569
+ const dataBlob = new Blob([dataStr], {type: 'application/json'});
570
+ const url = URL.createObjectURL(dataBlob);
571
+ const link = document.createElement('a');
572
+ link.href = url;
573
+ link.download = `projet-youtube-${projectData.theme.replace(/\s+/g, '-').toLowerCase()}.json`;
574
+ link.click();
575
+ }
576
+
577
+ function scrollToTop() {
578
+ window.scrollTo({ top: 0, behavior: 'smooth' });
579
+ }
580
+ </script>
581
+ <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>
582
+ </html>