Hugging Face's logo

Spaces:
secutorpro
/
deepsite-project-f3o7e
Running

App Files Community
secutorpro commited on
Commit
f8df6a2
·
verified ·
1 Parent(s): 0af0269

Initial DeepSite commit

Browse files
Files changed (2) hide show
  1. README.md +9 -6
  2. index.html +569 -19
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepsite Project F3o7e
3
- emoji: 💻
4
- colorFrom: yellow
5
- colorTo: indigo
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: DeepSite Project
3
+ colorFrom: blue
4
+ colorTo: gray
 
5
  sdk: static
6
+ emoji: ✨
7
+ tags:
8
+ - deepsite-v4
9
  ---
10
 
11
+ # DeepSite Project
12
+
13
+ This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.
index.html CHANGED
@@ -1,19 +1,569 @@
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>La Ruche - Studio Cognitif de Création de Films</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://unpkg.com/lucide@latest"></script>
9
+ <link rel="preconnect" href="https://fonts.googleapis.com">
10
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
11
+ <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ fontFamily: {
18
+ sans: ['Inter', 'sans-serif'],
19
+ display: ['Space Grotesk', 'sans-serif'],
20
+ },
21
+ colors: {
22
+ ruche: {
23
+ 50: '#f0fdf4',
24
+ 100: '#dcfce7',
25
+ 200: '#bbf7d0',
26
+ 300: '#86efac',
27
+ 400: '#4ade80',
28
+ 500: '#22c55e',
29
+ 600: '#16a34a',
30
+ 700: '#15803d',
31
+ 800: '#166534',
32
+ 900: '#14532d',
33
+ 950: '#052e16',
34
+ },
35
+ dark: {
36
+ 900: '#0a0a0f',
37
+ 800: '#12121a',
38
+ 700: '#1a1a2e',
39
+ 600: '#252542',
40
+ 500: '#3a3a5c',
41
+ 400: '#4a4a6a',
42
+ 300: '#6a6a8a',
43
+ 200: '#9a9aaa',
44
+ 100: '#cacaef',
45
+ },
46
+ accent: {
47
+ gold: '#fbbf24',
48
+ amber: '#f59e0b',
49
+ purple: '#8b5cf6',
50
+ cyan: '#06b6d4',
51
+ rose: '#f43f5e',
52
+ }
53
+ },
54
+ animation: {
55
+ 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
56
+ 'glow': 'glow 2s ease-in-out infinite alternate',
57
+ 'float': 'float 3s ease-in-out infinite',
58
+ 'slide-up': 'slideUp 0.5s ease-out',
59
+ 'fade-in': 'fadeIn 0.3s ease-out',
60
+ 'spin-slow': 'spin 8s linear infinite',
61
+ },
62
+ keyframes: {
63
+ glow: {
64
+ '0%': { boxShadow: '0 0 5px rgba(34, 197, 94, 0.5)' },
65
+ '100%': { boxShadow: '0 0 20px rgba(34, 197, 94, 0.8), 0 0 40px rgba(34, 197, 94, 0.4)' },
66
+ },
67
+ float: {
68
+ '0%, 100%': { transform: 'translateY(0)' },
69
+ '50%': { transform: 'translateY(-10px)' },
70
+ },
71
+ slideUp: {
72
+ '0%': { transform: 'translateY(20px)', opacity: '0' },
73
+ '100%': { transform: 'translateY(0)', opacity: '1' },
74
+ },
75
+ fadeIn: {
76
+ '0%': { opacity: '0' },
77
+ '100%': { opacity: '1' },
78
+ },
79
+ },
80
+ },
81
+ },
82
+ }
83
+ </script>
84
+ <style>
85
+ * {
86
+ scrollbar-width: thin;
87
+ scrollbar-color: #3a3a5c #0a0a0f;
88
+ }
89
+ *::-webkit-scrollbar {
90
+ width: 8px;
91
+ height: 8px;
92
+ }
93
+ *::-webkit-scrollbar-track {
94
+ background: #0a0a0f;
95
+ }
96
+ *::-webkit-scrollbar-thumb {
97
+ background: #3a3a5c;
98
+ border-radius: 4px;
99
+ }
100
+ *::-webkit-scrollbar-thumb:hover {
101
+ background: #4a4a6a;
102
+ }
103
+
104
+ .glass-panel {
105
+ background: rgba(26, 26, 46, 0.8);
106
+ backdrop-filter: blur(12px);
107
+ border: 1px solid rgba(74, 74, 106, 0.3);
108
+ }
109
+
110
+ .glass-panel-hover:hover {
111
+ background: rgba(37, 37, 66, 0.9);
112
+ border-color: rgba(34, 197, 94, 0.3);
113
+ }
114
+
115
+ .gradient-text {
116
+ background: linear-gradient(135deg, #22c55e 0%, #06b6d4 50%, #8b5cf6 100%);
117
+ -webkit-background-clip: text;
118
+ -webkit-text-fill-color: transparent;
119
+ background-clip: text;
120
+ }
121
+
122
+ .hex-pattern {
123
+ background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15L30 0z' fill='none' stroke='%233a3a5c' stroke-width='0.5' fill-opacity='0.05'/%3E%3C/svg%3E");
124
+ }
125
+
126
+ .agent-card {
127
+ transition: all 0.3s ease;
128
+ }
129
+ .agent-card:hover {
130
+ transform: translateY(-4px);
131
+ }
132
+ .agent-card.active {
133
+ border-color: #22c55e;
134
+ box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
135
+ }
136
+
137
+ .pipeline-step {
138
+ position: relative;
139
+ }
140
+ .pipeline-step::after {
141
+ content: '';
142
+ position: absolute;
143
+ top: 50%;
144
+ right: -20px;
145
+ width: 40px;
146
+ height: 2px;
147
+ background: linear-gradient(90deg, #3a3a5c, #22c55e);
148
+ transform: translateY(-50%);
149
+ }
150
+ .pipeline-step:last-child::after {
151
+ display: none;
152
+ }
153
+
154
+ .neural-glow {
155
+ box-shadow: 0 0 30px rgba(34, 197, 94, 0.2),
156
+ inset 0 0 30px rgba(34, 197, 94, 0.05);
157
+ }
158
+
159
+ .status-dot {
160
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
161
+ }
162
+
163
+ .film-grain {
164
+ position: relative;
165
+ }
166
+ .film-grain::before {
167
+ content: '';
168
+ position: absolute;
169
+ inset: 0;
170
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
171
+ pointer-events: none;
172
+ }
173
+ </style>
174
+ </head>
175
+ <body class="bg-dark-900 text-gray-100 font-sans antialiased overflow-hidden">
176
+ <div id="app" class="h-screen flex">
177
+ <!-- Sidebar -->
178
+ <aside class="w-20 lg:w-72 bg-dark-800 border-r border-dark-600 flex flex-col transition-all duration-300">
179
+ <!-- Logo -->
180
+ <div class="h-20 flex items-center justify-center lg:justify-start lg:px-6 border-b border-dark-600">
181
+ <div class="relative">
182
+ <div class="w-12 h-12 rounded-xl bg-gradient-to-br from-ruche-500 to-ruche-700 flex items-center justify-center neural-glow">
183
+ <i data-lucide="hexagon" class="w-7 h-7 text-white"></i>
184
+ </div>
185
+ <div class="absolute -top-1 -right-1 w-4 h-4 bg-accent-gold rounded-full status-dot"></div>
186
+ </div>
187
+ <div class="hidden lg:block ml-4">
188
+ <h1 class="font-display font-bold text-xl gradient-text">LA RUCHE</h1>
189
+ <p class="text-xs text-dark-300">Studio Cognitif</p>
190
+ </div>
191
+ </div>
192
+
193
+ <!-- Navigation -->
194
+ <nav class="flex-1 py-6 space-y-2 overflow-y-auto">
195
+ <button onclick="app.navigate('dashboard')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group active" data-page="dashboard">
196
+ <i data-lucide="layout-dashboard" class="w-5 h-5 group-hover:text-ruche-400 transition-colors"></i>
197
+ <span class="hidden lg:block ml-3 font-medium">Dashboard</span>
198
+ <span class="hidden lg:block ml-auto text-xs bg-ruche-500/20 text-ruche-400 px-2 py-1 rounded-full">3 actifs</span>
199
+ </button>
200
+
201
+ <button onclick="app.navigate('writers-room')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="writers-room">
202
+ <i data-lucide="pen-tool" class="w-5 h-5 group-hover:text-accent-purple transition-colors"></i>
203
+ <span class="hidden lg:block ml-3 font-medium">Writers Room</span>
204
+ </button>
205
+
206
+ <button onclick="app.navigate('univers')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="univers">
207
+ <i data-lucide="globe" class="w-5 h-5 group-hover:text-accent-cyan transition-colors"></i>
208
+ <span class="hidden lg:block ml-3 font-medium">Univers</span>
209
+ </button>
210
+
211
+ <button onclick="app.navigate('storyboard')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="storyboard">
212
+ <i data-lucide="film" class="w-5 h-5 group-hover:text-accent-amber transition-colors"></i>
213
+ <span class="hidden lg:block ml-3 font-medium">Storyboard</span>
214
+ </button>
215
+
216
+ <button onclick="app.navigate('video')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="video">
217
+ <i data-lucide="video" class="w-5 h-5 group-hover:text-accent-rose transition-colors"></i>
218
+ <span class="hidden lg:block ml-3 font-medium">Vidéo IA</span>
219
+ </button>
220
+
221
+ <div class="hidden lg:block px-6 py-4">
222
+ <div class="h-px bg-dark-600"></div>
223
+ </div>
224
+
225
+ <button onclick="app.navigate('fourmiliere')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="fourmiliere">
226
+ <i data-lucide="users" class="w-5 h-5 group-hover:text-ruche-400 transition-colors"></i>
227
+ <span class="hidden lg:block ml-3 font-medium">La Fourmilière</span>
228
+ <span class="hidden lg:block ml-auto w-2 h-2 bg-ruche-500 rounded-full animate-pulse"></span>
229
+ </button>
230
+
231
+ <button onclick="app.navigate('noyau')" class="nav-item w-full flex items-center px-4 lg:px-6 py-3 text-dark-200 hover:text-white hover:bg-dark-700/50 transition-all group" data-page="noyau">
232
+ <i data-lucide="cpu" class="w-5 h-5 group-hover:text-accent-gold transition-colors"></i>
233
+ <span class="hidden lg:block ml-3 font-medium">Noyau IA</span>
234
+ </button>
235
+ </nav>
236
+
237
+ <!-- User Profile -->
238
+ <div class="p-4 border-t border-dark-600">
239
+ <div class="flex items-center justify-center lg:justify-start">
240
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-accent-purple to-accent-cyan flex items-center justify-center">
241
+ <span class="font-bold text-sm">JD</span>
242
+ </div>
243
+ <div class="hidden lg:block ml-3">
244
+ <p class="font-medium text-sm">Jean Dupont</p>
245
+ <p class="text-xs text-dark-300">Showrunner</p>
246
+ </div>
247
+ <button class="hidden lg:block ml-auto text-dark-300 hover:text-white">
248
+ <i data-lucide="settings" class="w-4 h-4"></i>
249
+ </button>
250
+ </div>
251
+ </div>
252
+ </aside>
253
+
254
+ <!-- Main Content -->
255
+ <main class="flex-1 flex flex-col overflow-hidden">
256
+ <!-- Header -->
257
+ <header class="h-20 bg-dark-800/80 backdrop-blur border-b border-dark-600 flex items-center justify-between px-8">
258
+ <div class="flex items-center space-x-4">
259
+ <h2 id="page-title" class="font-display text-2xl font-semibold">Dashboard</h2>
260
+ <span id="page-badge" class="px-3 py-1 bg-ruche-500/20 text-ruche-400 text-xs font-medium rounded-full border border-ruche-500/30">Studio Actif</span>
261
+ </div>
262
+
263
+ <div class="flex items-center space-x-4">
264
+ <!-- Search -->
265
+ <div class="relative hidden md:block">
266
+ <i data-lucide="search" class="w-4 h-4 absolute left-3 top-1/2 -translate-y-1/2 text-dark-300"></i>
267
+ <input type="text" placeholder="Rechercher un projet..." class="w-64 pl-10 pr-4 py-2 bg-dark-700 border border-dark-600 rounded-lg text-sm focus:outline-none focus:border-ruche-500 transition-colors">
268
+ </div>
269
+
270
+ <!-- Quick Actions -->
271
+ <button onclick="app.showNewProjectModal()" class="flex items-center px-4 py-2 bg-gradient-to-r from-ruche-500 to-ruche-600 hover:from-ruche-400 hover:to-ruche-500 text-white rounded-lg font-medium transition-all hover:shadow-lg hover:shadow-ruche-500/25">
272
+ <i data-lucide="plus" class="w-4 h-4 mr-2"></i>
273
+ <span class="hidden sm:inline">Nouveau Projet</span>
274
+ </button>
275
+
276
+ <!-- Notifications -->
277
+ <button class="relative p-2 text-dark-300 hover:text-white transition-colors">
278
+ <i data-lucide="bell" class="w-5 h-5"></i>
279
+ <span class="absolute top-1 right-1 w-2 h-2 bg-accent-rose rounded-full"></span>
280
+ </button>
281
+ </div>
282
+ </header>
283
+
284
+ <!-- Content Area -->
285
+ <div id="content-area" class="flex-1 overflow-y-auto p-8 hex-pattern film-grain">
286
+ <!-- Dynamic content will be loaded here -->
287
+ </div>
288
+ </main>
289
+ </div>
290
+
291
+ <!-- New Project Modal -->
292
+ <div id="new-project-modal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center">
293
+ <div class="bg-dark-800 border border-dark-600 rounded-2xl w-full max-w-2xl mx-4 p-8 animate-slide-up">
294
+ <div class="flex items-center justify-between mb-6">
295
+ <div>
296
+ <h3 class="font-display text-2xl font-bold">Nouveau Projet</h3>
297
+ <p class="text-dark-300 mt-1">Lancez votre pipeline de création cinématographique</p>
298
+ </div>
299
+ <button onclick="app.hideNewProjectModal()" class="text-dark-300 hover:text-white">
300
+ <i data-lucide="x" class="w-6 h-6"></i>
301
+ </button>
302
+ </div>
303
+
304
+ <div class="space-y-6">
305
+ <div>
306
+ <label class="block text-sm font-medium mb-2">Titre du film</label>
307
+ <input type="text" id="project-title" placeholder="Ex: Les Ombres de Demain" class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500 transition-colors text-lg">
308
+ </div>
309
+
310
+ <div>
311
+ <label class="block text-sm font-medium mb-2">Votre idée de départ</label>
312
+ <textarea id="project-idea" rows="4" placeholder="Décrivez votre concept, l'ambiance, les thèmes principaux..." class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500 transition-colors resize-none"></textarea>
313
+ </div>
314
+
315
+ <div class="grid grid-cols-2 gap-4">
316
+ <div>
317
+ <label class="block text-sm font-medium mb-2">Genre</label>
318
+ <select class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500">
319
+ <option>Science-Fiction</option>
320
+ <option>Drame</option>
321
+ <option>Thriller</option>
322
+ <option>Comédie</option>
323
+ <option>Horreur</option>
324
+ <option>Documentaire</option>
325
+ </select>
326
+ </div>
327
+ <div>
328
+ <label class="block text-sm font-medium mb-2">Durée estimée</label>
329
+ <select class="w-full px-4 py-3 bg-dark-700 border border-dark-600 rounded-xl focus:outline-none focus:border-ruche-500">
330
+ <option>Court-métrage (15 min)</option>
331
+ <option>Moyen-métrage (30 min)</option>
332
+ <option>Long-métrage (90 min)</option>
333
+ <option>Série (saison complète)</option>
334
+ </select>
335
+ </div>
336
+ </div>
337
+
338
+ <div class="p-4 bg-ruche-900/30 border border-ruche-500/30 rounded-xl">
339
+ <div class="flex items-start space-x-3">
340
+ <i data-lucide="info" class="w-5 h-5 text-ruche-400 flex-shrink-0 mt-0.5"></i>
341
+ <div>
342
+ <p class="font-medium text-ruche-400">Pipeline automatique</p>
343
+ <p class="text-sm text-dark-300 mt-1">Votre idée sera transformée en livre → scénario → storyboard → film par nos agents IA spécialisés.</p>
344
+ </div>
345
+ </div>
346
+ </div>
347
+ </div>
348
+
349
+ <div class="flex justify-end space-x-3 mt-8">
350
+ <button onclick="app.hideNewProjectModal()" class="px-6 py-3 text-dark-300 hover:text-white font-medium transition-colors">Annuler</button>
351
+ <button onclick="app.createProject()" class="px-8 py-3 bg-gradient-to-r from-ruche-500 to-ruche-600 hover:from-ruche-400 hover:to-ruche-500 text-white rounded-xl font-medium transition-all hover:shadow-lg hover:shadow-ruche-500/25 flex items-center">
352
+ <i data-lucide="sparkles" class="w-5 h-5 mr-2"></i>
353
+ Lancer la création
354
+ </button>
355
+ </div>
356
+ </div>
357
+ </div>
358
+
359
+ <script>
360
+ // Application State
361
+ const app = {
362
+ currentPage: 'dashboard',
363
+ projects: [
364
+ {
365
+ id: 1,
366
+ title: 'Les Ombres de Demain',
367
+ status: 'storyboard',
368
+ progress: 65,
369
+ genre: 'Science-Fiction',
370
+ lastModified: 'Il y a 2 heures',
371
+ cover: 'http://static.photos/science/640x360/42'
372
+ },
373
+ {
374
+ id: 2,
375
+ title: 'Mémoires d\'une Ville',
376
+ status: 'scenario',
377
+ progress: 40,
378
+ genre: 'Drame',
379
+ lastModified: 'Il y a 5 heures',
380
+ cover: 'http://static.photos/cityscape/640x360/88'
381
+ },
382
+ {
383
+ id: 3,
384
+ title: 'Le Dernier Horizon',
385
+ status: 'film',
386
+ progress: 90,
387
+ genre: 'Thriller',
388
+ lastModified: 'Il y a 1 jour',
389
+ cover: 'http://static.photos/minimal/640x360/156'
390
+ }
391
+ ],
392
+ agents: [
393
+ { id: 'showrunner', name: 'Showrunner', role: 'Vision créative', status: 'active', model: 'Llama 3.1', icon: 'crown' },
394
+ { id: 'realisateur', name: 'Réalisateur', role: 'Mise en scène', status: 'active', model: 'DeepSeek', icon: 'clapperboard' },
395
+ { id: 'archiviste', name: 'Archiviste', role: 'Mémoire narrative', status: 'active', model: 'Gemma 2', icon: 'archive' },
396
+ { id: 'script', name: 'Script Supervisor', role: 'Cohérence scénario', status: 'idle', model: 'Mistral', icon: 'file-text' },
397
+ { id: 'musique', name: 'Direction Musicale', role: 'Composition', status: 'active', model: 'Minimax', icon: 'music' },
398
+ { id: 'casting', name: 'Casting', role: 'Personnages IA', status: 'idle', model: 'Mem0', icon: 'users' },
399
+ { id: 'postprod', name: 'Post-Production', role: 'Montage & VFX', status: 'busy', model: 'Nvidia', icon: 'wand-2' },
400
+ { id: 'producteur', name: 'Producteur', role: 'Gestion projet', status: 'active', model: 'Llama 3.1', icon: 'briefcase' }
401
+ ],
402
+ models: [
403
+ { name: 'Mistral', role: 'Garde-fou', status: 'online', load: 45, color: 'blue' },
404
+ { name: 'Llama', role: 'Création', status: 'online', load: 78, color: 'purple' },
405
+ { name: 'DeepSeek', role: 'Raisonnement', status: 'online', load: 62, color: 'cyan' },
406
+ { name: 'Gemma', role: 'Mémoire', status: 'online', load: 34, color: 'amber' },
407
+ { name: 'Minimax', role: 'Mémoire longue', status: 'online', load: 56, color: 'rose' },
408
+ { name: 'Mem0', role: 'Mémoire centrale', status: 'online', load: 41, color: 'green' },
409
+ { name: 'Nvidia', role: 'Calcul GPU', status: 'busy', load: 92, color: 'emerald' }
410
+ ],
411
+
412
+ init() {
413
+ this.navigate('dashboard');
414
+ lucide.createIcons();
415
+ },
416
+
417
+ navigate(page) {
418
+ this.currentPage = page;
419
+
420
+ // Update navigation
421
+ document.querySelectorAll('.nav-item').forEach(item => {
422
+ item.classList.remove('active', 'bg-dark-700/50', 'text-white');
423
+ item.classList.add('text-dark-200');
424
+ if (item.dataset.page === page) {
425
+ item.classList.add('active', 'bg-dark-700/50', 'text-white');
426
+ item.classList.remove('text-dark-200');
427
+ }
428
+ });
429
+
430
+ // Update page title
431
+ const titles = {
432
+ 'dashboard': 'Dashboard',
433
+ 'writers-room': 'Writers Room',
434
+ 'univers': 'Univers',
435
+ 'storyboard': 'Storyboard',
436
+ 'video': 'Vidéo IA',
437
+ 'fourmiliere': 'La Fourmilière',
438
+ 'noyau': 'Noyau IA'
439
+ };
440
+ document.getElementById('page-title').textContent = titles[page];
441
+
442
+ // Render content
443
+ this.renderContent(page);
444
+ lucide.createIcons();
445
+ },
446
+
447
+ renderContent(page) {
448
+ const container = document.getElementById('content-area');
449
+
450
+ switch(page) {
451
+ case 'dashboard':
452
+ container.innerHTML = this.renderDashboard();
453
+ break;
454
+ case 'writers-room':
455
+ container.innerHTML = this.renderWritersRoom();
456
+ break;
457
+ case 'univers':
458
+ container.innerHTML = this.renderUnivers();
459
+ break;
460
+ case 'storyboard':
461
+ container.innerHTML = this.renderStoryboard();
462
+ break;
463
+ case 'video':
464
+ container.innerHTML = this.renderVideo();
465
+ break;
466
+ case 'fourmiliere':
467
+ container.innerHTML = this.renderFourmiliere();
468
+ break;
469
+ case 'noyau':
470
+ container.innerHTML = this.renderNoyau();
471
+ break;
472
+ }
473
+
474
+ // Re-initialize icons after content render
475
+ setTimeout(() => lucide.createIcons(), 10);
476
+ },
477
+
478
+ renderDashboard() {
479
+ return `
480
+ <div class="space-y-8 animate-fade-in">
481
+ <!-- Stats Row -->
482
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
483
+ <div class="glass-panel rounded-2xl p-6">
484
+ <div class="flex items-center justify-between">
485
+ <div>
486
+ <p class="text-dark-300 text-sm">Projets actifs</p>
487
+ <p class="text-3xl font-bold font-display mt-1">12</p>
488
+ </div>
489
+ <div class="w-12 h-12 rounded-xl bg-ruche-500/20 flex items-center justify-center">
490
+ <i data-lucide="folder-open" class="w-6 h-6 text-ruche-400"></i>
491
+ </div>
492
+ </div>
493
+ <div class="mt-4 flex items-center text-sm">
494
+ <span class="text-ruche-400 flex items-center">
495
+ <i data-lucide="trending-up" class="w-4 h-4 mr-1"></i>
496
+ +3 ce mois
497
+ </span>
498
+ </div>
499
+ </div>
500
+
501
+ <div class="glass-panel rounded-2xl p-6">
502
+ <div class="flex items-center justify-between">
503
+ <div>
504
+ <p class="text-dark-300 text-sm">Agents actifs</p>
505
+ <p class="text-3xl font-bold font-display mt-1">8/8</p>
506
+ </div>
507
+ <div class="w-12 h-12 rounded-xl bg-accent-purple/20 flex items-center justify-center">
508
+ <i data-lucide="bot" class="w-6 h-6 text-accent-purple"></i>
509
+ </div>
510
+ </div>
511
+ <div class="mt-4 flex items-center text-sm">
512
+ <span class="text-accent-purple flex items-center">
513
+ <i data-lucide="activity" class="w-4 h-4 mr-1"></i>
514
+ 100% opérationnel
515
+ </span>
516
+ </div>
517
+ </div>
518
+
519
+ <div class="glass-panel rounded-2xl p-6">
520
+ <div class="flex items-center justify-between">
521
+ <div>
522
+ <p class="text-dark-300 text-sm">Scènes générées</p>
523
+ <p class="text-3xl font-bold font-display mt-1">247</p>
524
+ </div>
525
+ <div class="w-12 h-12 rounded-xl bg-accent-cyan/20 flex items-center justify-center">
526
+ <i data-lucide="film" class="w-6 h-6 text-accent-cyan"></i>
527
+ </div>
528
+ </div>
529
+ <div class="mt-4 flex items-center text-sm">
530
+ <span class="text-accent-cyan flex items-center">
531
+ <i data-lucide="zap" class="w-4 h-4 mr-1"></i>
532
+ 12 aujourd'hui
533
+ </span>
534
+ </div>
535
+ </div>
536
+
537
+ <div class="glass-panel rounded-2xl p-6">
538
+ <div class="flex items-center justify-between">
539
+ <div>
540
+ <p class="text-dark-300 text-sm">Temps de génération</p>
541
+ <p class="text-3xl font-bold font-display mt-1">4.2h</p>
542
+ </div>
543
+ <div class="w-12 h-12 rounded-xl bg-accent-amber/20 flex items-center justify-center">
544
+ <i data-lucide="clock" class="w-6 h-6 text-accent-amber"></i>
545
+ </div>
546
+ </div>
547
+ <div class="mt-4 flex items-center text-sm">
548
+ <span class="text-accent-amber flex items-center">
549
+ <i data-lucide="gauge" class="w-4 h-4 mr-1"></i>
550
+ Moyenne par film
551
+ </span>
552
+ </div>
553
+ </div>
554
+ </div>
555
+
556
+ <!-- Pipeline Visualization -->
557
+ <div class="glass-panel rounded-2xl p-8">
558
+ <div class="flex items-center justify-between mb-6">
559
+ <h3 class="font-display text-xl font-semibold">Pipeline de Création</h3>
560
+ <button class="text-sm text-ruche-400 hover:text-ruche-300 flex items-center">
561
+ <i data-lucide="play" class="w-4 h-4 mr-1"></i>
562
+ Voir démo
563
+ </button>
564
+ </div>
565
+
566
+ <div class="flex flex-wrap items-center justify-between gap-4">
567
+ ${[
568
+ { icon: 'lightbulb', label: 'Idée', status: 'completed', color
569
+ <script src="https://deepsite.hf.co/deepsite-badge.js"></script>