Hugging Face's logo

Spaces:
Hamed744
/
Veu3
Running

App Files Community
Hamed744 commited on
Commit
d545782
·
verified ·
1 Parent(s): 521762e

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +144 -81
index.html CHANGED
@@ -3,11 +3,19 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>ساخت ویدیو هوشمند LTX | تبدیل تصویر و متن به انیمیشن</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/Vazirmatn-font-face.css" rel="stylesheet">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
 
 
 
 
 
 
 
 
11
  @keyframes float {
12
  0% { transform: translateY(0px); }
13
  50% { transform: translateY(-8px); }
@@ -26,9 +34,9 @@
26
  }
27
 
28
  @keyframes pulseGlow {
29
- 0% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0.4); }
30
- 70% { box-shadow: 0 0 0 12px rgba(139, 92, 246, 0); }
31
- 100% { box-shadow: 0 0 0 0 rgba(139, 92, 246, 0); }
32
  }
33
 
34
  .animate-float {
@@ -75,12 +83,12 @@
75
  }
76
 
77
  .file-drop-area.drag-over {
78
- border-color: #8b5cf6;
79
- background: rgba(139, 92, 246, 0.08);
80
  }
81
 
82
  .progress-track {
83
- background: linear-gradient(90deg, #8b5cf6 0%, #6366f1 100%);
84
  background-size: 200% 100%;
85
  animation: gradientFlow 4s ease infinite;
86
  }
@@ -108,15 +116,15 @@
108
  transform: rotateX(2deg) rotateY(2deg) scale(1.02);
109
  }
110
 
111
- /* New button styles */
112
  .primary-btn {
113
- background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
114
  color: white;
115
  transition: all 0.3s ease;
116
  }
117
 
118
  .primary-btn:hover {
119
- background: linear-gradient(135deg, #6d28d9 0%, #4c1d95 100%);
120
  transform: translateY(-2px);
121
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
122
  }
@@ -134,13 +142,13 @@
134
  }
135
 
136
  .accent-btn {
137
- background: linear-gradient(135deg, #10b981 0%, #059669 100%);
138
  color: white;
139
  transition: all 0.3s ease;
140
  }
141
 
142
  .accent-btn:hover {
143
- background: linear-gradient(135deg, #0d9b6c 0%, #047857 100%);
144
  }
145
 
146
  .tab-btn {
@@ -155,7 +163,7 @@
155
  left: 0;
156
  right: 0;
157
  height: 2px;
158
- background: linear-gradient(90deg, #7c3aed 0%, #5b21b6 100%);
159
  transform: scaleX(0);
160
  transition: transform 0.3s ease;
161
  transform-origin: left;
@@ -164,34 +172,88 @@
164
  .tab-btn.active::after {
165
  transform: scaleX(1);
166
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  </style>
168
  </head>
169
- <body class="min-h-screen bg-gray-950 text-gray-100 font-sans overflow-x-hidden">
170
- <!-- Clean Background -->
171
- <div class="fixed inset-0 -z-10 bg-gradient-to-br from-gray-950 to-gray-900"></div>
172
-
 
173
  <div class="container mx-auto px-4 py-12 max-w-4xl relative">
174
  <!-- Header Section -->
175
  <div class="text-center mb-16 animate-fade-in" style="animation-delay: 0.1s;">
176
- <div class="inline-flex items-center justify-center p-5 rounded-2xl glass-morphism mb-6 shadow-lg">
177
- <i class="fas fa-film text-4xl text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-indigo-400"></i>
178
  </div>
179
  <h1 class="text-4xl font-bold mb-4 flex items-center justify-center">
180
- <span class="text-gradient bg-gradient-to-r from-purple-300 via-indigo-300 to-blue-300">ساخت ویدیو هوشمند</span>
181
- <span class="text-gradient bg-gradient-to-r from-purple-400 to-pink-400 mr-3">LTX</span>
182
  </h1>
183
  <p class="text-lg text-gray-300 max-w-2xl mx-auto leading-relaxed">
184
- با فناوری هوش مصنوعی، تصاویر و متون خود را به انیمیشن‌های خیره‌کننده تبدیل کنید
185
  </p>
186
  </div>
187
 
188
  <!-- Main Card -->
189
- <div class="glass-morphism rounded-3xl overflow-hidden shadow-2xl mb-10 animate-fade-in" style="animation-delay: 0.2s;">
190
  <!-- Mode Selector -->
191
  <div class="flex border-b border-gray-700/50">
192
  <button class="mode-button tab-btn flex-1 py-5 font-medium text-sm uppercase tracking-wider transition-all duration-300 relative overflow-hidden group active" data-mode="image-to-video">
193
  <span class="relative z-10 flex items-center justify-center">
194
- <i class="fas fa-image ml-2 text-purple-300"></i>
195
  تصویر به ویدیو
196
  </span>
197
  </button>
@@ -209,14 +271,14 @@
209
  <div id="imageToVideoSection" class="form-mode-section">
210
  <div class="mb-8">
211
  <label for="imageFile" class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
212
- <i class="fas fa-image mr-2 text-purple-300"></i>
213
  انتخاب تصویر
214
  </label>
215
- <div class="file-drop-area relative border-2 border-dashed border-gray-700 rounded-2xl p-10 text-center cursor-pointer transition-all duration-300 hover:border-purple-400 bg-gray-800/30" id="fileUploadArea">
216
  <input type="file" id="imageFile" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/jpeg, image/png, image/webp" />
217
  <div class="flex flex-col items-center justify-center">
218
- <div class="w-16 h-16 rounded-full bg-gradient-to-br from-purple-500/20 to-indigo-500/20 flex items-center justify-center mb-4">
219
- <i class="fas fa-cloud-upload-alt text-2xl text-purple-300"></i>
220
  </div>
221
  <p class="text-sm text-gray-300 mb-1">فایل را اینجا رها کنید یا برای انتخاب کلیک کنید</p>
222
  <p class="text-xs text-gray-500">فرمت‌های پشتیبانی شده: JPG, PNG, WebP</p>
@@ -228,10 +290,10 @@
228
 
229
  <!-- Text to Video Section -->
230
  <div id="textToVideoSection" class="form-mode-section hidden">
231
- <div class="mb-8 text-center py-5 px-6 rounded-xl bg-gradient-to-r from-purple-900/30 to-indigo-900/30 border border-purple-500/20 shadow-inner">
232
  <div class="flex items-center justify-center">
233
- <i class="fas fa-info-circle text-purple-300 mr-3"></i>
234
- <span class="text-sm text-purple-100">در این حالت، ویدیو فقط بر اساس متن راهنما ساخته می‌شود.</span>
235
  </div>
236
  </div>
237
  </div>
@@ -239,11 +301,11 @@
239
  <!-- Prompt Section -->
240
  <div class="mb-8">
241
  <label for="prompt" class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
242
- <i class="fas fa-magic mr-2 text-indigo-300"></i>
243
  شرح انیمیشن (Prompt)
244
  </label>
245
  <div class="relative">
246
- <textarea id="prompt" rows="3" class="w-full px-5 py-4 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-gray-200 placeholder-gray-500 transition-all duration-300 shadow-inner" placeholder="مثال: گربه‌ای که به آرامی پلک می‌زند">یک موجود از داخل تصویر شروع به حرکت می‌کند</textarea>
247
  <div class="absolute bottom-4 left-4 text-xs text-gray-500 flex items-center">
248
  <i class="fas fa-lightbulb mr-1 text-yellow-300/70"></i>
249
  <span>توضیحات دقیق‌تر = نتیجه بهتر</span>
@@ -254,25 +316,25 @@
254
  <!-- Duration Options -->
255
  <div class="mb-8">
256
  <label class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
257
- <i class="fas fa-clock mr-2 text-blue-300"></i>
258
  مدت زمان
259
  </label>
260
  <div class="grid grid-cols-2 gap-4">
261
- <button class="option-card duration-button p-4 rounded-xl bg-gray-800/50 border border-gray-700 text-gray-200 hover:border-purple-400 flex flex-col items-center relative overflow-hidden" data-api-duration="5">
262
- <div class="w-10 h-10 rounded-full bg-purple-500/10 flex items-center justify-center mb-2">
263
- <i class="fas fa-hourglass-start text-purple-300"></i>
264
  </div>
265
  <span class="font-medium">کوتاه</span>
266
  <span class="text-xs text-gray-400 mt-1">۵ ثانیه</span>
267
- <div class="absolute inset-0 bg-gradient-to-br from-purple-500/5 to-indigo-500/5 opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
268
  </button>
269
- <button class="option-card duration-button p-4 rounded-xl bg-gradient-to-br from-purple-900/30 to-indigo-900/30 border border-purple-500/30 text-purple-100 hover:border-purple-400 flex flex-col items-center relative selected" data-api-duration="7.8">
270
- <div class="w-10 h-10 rounded-full bg-purple-500/20 flex items-center justify-center mb-2">
271
- <i class="fas fa-hourglass-half text-purple-200"></i>
272
  </div>
273
  <span class="font-medium">استاندارد</span>
274
- <span class="text-xs text-purple-300 mt-1">۸ ثانیه</span>
275
- <div class="absolute inset-0 bg-gradient-to-br from-purple-500/10 to-indigo-500/10 opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
276
  </button>
277
  </div>
278
  </div>
@@ -280,39 +342,39 @@
280
  <!-- Advanced Settings Toggle -->
281
  <button id="advancedSettingsToggle" class="w-full py-4 px-5 mb-6 rounded-xl bg-gray-800/50 border border-gray-700 text-gray-300 hover:bg-gray-700/50 hover:text-white transition-all duration-300 flex items-center justify-between group">
282
  <span class="flex items-center">
283
- <i class="fas fa-cog mr-3 text-purple-300 group-hover:animate-spin"></i>
284
  تنظیمات پیشرفته
285
  </span>
286
- <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 group-hover:text-purple-300"></i>
287
  </button>
288
 
289
  <!-- Advanced Settings -->
290
  <div id="advancedSettings" class="hidden bg-gradient-to-br from-gray-800/30 to-gray-900/30 rounded-2xl p-6 mb-8 border border-gray-700/50 shadow-inner">
291
  <div class="mb-8">
292
  <label class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
293
- <i class="fas fa-crop-alt mr-2 text-green-300"></i>
294
  نسبت تصویر
295
  </label>
296
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
297
- <button class="option-card aspect-ratio-button p-3 rounded-xl bg-gradient-to-br from-purple-900/30 to-indigo-900/30 border border-purple-500/30 text-purple-100 hover:border-purple-400 flex flex-col items-center selected" data-height="768" data-width="768">
298
  <i class="fas fa-square text-xl mb-1"></i>
299
  <span class="text-sm">مربع</span>
300
- <span class="text-xs text-purple-300 mt-1">۱:۱</span>
301
  </button>
302
- <button class="option-card aspect-ratio-button p-3 rounded-xl bg-gray-800/50 border border-gray-700 text-gray-200 hover:border-purple-400 flex flex-col items-center" data-height="768" data-width="432">
303
  <i class="fas fa-mobile-alt text-xl mb-1"></i>
304
  <span class="text-sm">پرتره</span>
305
  <span class="text-xs text-gray-400 mt-1">۹:۱۶</span>
306
  </button>
307
- <button class="option-card aspect-ratio-button p-3 rounded-xl bg-gray-800/50 border border-gray-700 text-gray-200 hover:border-purple-400 flex flex-col items-center" data-height="432" data-width="768">
308
  <i class="fas fa-desktop text-xl mb-1"></i>
309
  <span class="text-sm">لنداسکیپ</span>
310
  <span class="text-xs text-gray-400 mt-1">۱۶:۹</span>
311
  </button>
312
- <button class="option-card aspect-ratio-button p-3 rounded-xl bg-gray-800/50 border border-gray-700 text-gray-200 hover:border-purple-400 flex flex-col items-center" data-height="512" data-width="704">
313
  <i class="fas fa-expand text-xl mb-1"></i>
314
  <span class="text-sm">پیش‌فرض</span>
315
- <span class="text-xs text-gray-400 mt-1">LTX</span>
316
  </button>
317
  </div>
318
  </div>
@@ -322,17 +384,17 @@
322
  <i class="fas fa-ban mr-2 text-red-300"></i>
323
  متن راهنمای منفی
324
  </label>
325
- <textarea id="negativePrompt" rows="2" class="w-full px-5 py-4 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-gray-200 placeholder-gray-500 transition-all duration-300 shadow-inner">کیفیت پایین، تار، لرزان</textarea>
326
  </div>
327
 
328
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
329
  <div>
330
  <label for="cfgScale" class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
331
- <i class="fas fa-sliders-h mr-2 text-blue-300"></i>
332
  مقیاس CFG
333
  </label>
334
  <div class="relative">
335
- <input type="number" id="cfgScale" value="1.0" min="1.0" max="10.0" step="0.1" class="w-full px-5 py-3 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-gray-200 transition-all duration-300 shadow-inner" />
336
  <div class="absolute left-4 top-3 text-gray-500">
337
  <i class="fas fa-adjust"></i>
338
  </div>
@@ -344,7 +406,7 @@
344
  سید تصادفی
345
  </label>
346
  <div class="relative">
347
- <input type="number" id="seed" value="0" min="0" class="w-full px-5 py-3 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-gray-200 transition-all duration-300 shadow-inner" />
348
  <div class="absolute left-4 top-3 text-gray-500">
349
  <i class="fas fa-random"></i>
350
  </div>
@@ -355,11 +417,11 @@
355
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
356
  <div>
357
  <label for="outputHeight" class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
358
- <i class="fas fa-arrows-alt-v mr-2 text-green-300"></i>
359
  ارتفاع (پیکسل)
360
  </label>
361
  <div class="relative">
362
- <input type="number" id="outputHeight" value="768" step="32" min="256" max="1280" class="w-full px-5 py-3 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-gray-200 transition-all duration-300 shadow-inner" />
363
  <div class="absolute left-4 top-3 text-gray-500">
364
  <i class="fas fa-ruler-vertical"></i>
365
  </div>
@@ -367,11 +429,11 @@
367
  </div>
368
  <div>
369
  <label for="outputWidth" class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
370
- <i class="fas fa-arrows-alt-h mr-2 text-blue-300"></i>
371
  عرض (پیکسل)
372
  </label>
373
  <div class="relative">
374
- <input type="number" id="outputWidth" value="768" step="32" min="256" max="1280" class="w-full px-5 py-3 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-purple-500 focus:border-purple-500 text-gray-200 transition-all duration-300 shadow-inner" />
375
  <div class="absolute left-4 top-3 text-gray-500">
376
  <i class="fas fa-ruler-horizontal"></i>
377
  </div>
@@ -387,39 +449,40 @@
387
  <i class="fas fa-magic mr-3 transform group-hover:rotate-12 transition-transform"></i>
388
  ساخت ویدیو هوشمند
389
  </span>
 
390
  </button>
391
  </div>
392
  </div>
393
  </div>
394
 
395
  <!-- Status Section -->
396
- <div id="statusSection" class="glass-morphism rounded-3xl overflow-hidden shadow-2xl mb-10 hidden animate-fade-in">
397
  <div class="p-8">
398
  <h2 class="text-xl font-bold mb-6 flex items-center">
399
- <div class="w-10 h-10 rounded-full bg-gradient-to-r from-purple-500/20 to-indigo-500/20 flex items-center justify-center mr-3">
400
- <i class="fas fa-spinner fa-spin text-purple-300"></i>
401
  </div>
402
- <span class="text-gradient bg-gradient-to-r from-purple-200 to-indigo-200">در حال پردازش درخواست</span>
403
  </h2>
404
 
405
  <div class="mb-6">
406
  <div class="flex justify-between text-sm mb-2">
407
  <span class="text-gray-300">پیشرفت عملیات</span>
408
- <span id="progressPercent" class="text-purple-300 font-medium">0%</span>
409
  </div>
410
  <div class="w-full h-2.5 bg-gray-800 rounded-full overflow-hidden">
411
  <div id="progressBar" class="h-full rounded-full progress-track" style="width: 0%"></div>
412
  </div>
413
  </div>
414
 
415
- <div id="statusMessages" class="space-y-3 max-h-60 overflow-y-auto pr-2">
416
  <!-- Status messages will appear here -->
417
  </div>
418
  </div>
419
  </div>
420
 
421
  <!-- Output Section -->
422
- <div id="outputSection" class="glass-morphism rounded-3xl overflow-hidden shadow-2xl hidden animate-fade-in">
423
  <div class="p-8">
424
  <h2 class="text-xl font-bold mb-6 flex items-center">
425
  <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-500/20 to-teal-500/20 flex items-center justify-center mr-3">
@@ -457,8 +520,8 @@
457
  <div class="text-center text-gray-500 text-sm mt-16">
458
  <p class="flex items-center justify-center">
459
  ساخته شده با
460
- <i class="fas fa-heart text-pink-400 mx-2 animate-pulse"></i>
461
- توسط تیم LTX
462
  </p>
463
  <p class="mt-2 text-gray-600">نسخه ۲.۰ | فناوری هوش مصنوعی پیشرفته</p>
464
  </div>
@@ -567,13 +630,13 @@
567
  // Update active state
568
  modeButtons.forEach(btn => {
569
  btn.classList.remove('active');
570
- btn.querySelector('i').classList.remove('text-purple-300');
571
  btn.querySelector('i').classList.add('text-gray-400');
572
  });
573
 
574
  button.classList.add('active');
575
  button.querySelector('i').classList.remove('text-gray-400');
576
- button.querySelector('i').classList.add('text-purple-300');
577
 
578
  // Update mode
579
  currentGenerationMode = button.dataset.mode;
@@ -638,11 +701,11 @@
638
  button.addEventListener('click', () => {
639
  // Update selection
640
  durationButtons.forEach(btn => {
641
- btn.classList.remove('selected', 'bg-gradient-to-br', 'from-purple-900/30', 'to-indigo-900/30', 'border-purple-500/30', 'text-purple-100');
642
  btn.classList.add('bg-gray-800/50', 'border-gray-700', 'text-gray-200');
643
  });
644
 
645
- button.classList.add('selected', 'bg-gradient-to-br', 'from-purple-900/30', 'to-indigo-900/30', 'border-purple-500/30', 'text-purple-100');
646
  button.classList.remove('bg-gray-800/50', 'border-gray-700', 'text-gray-200');
647
 
648
  selectedApiDuration = parseFloat(button.dataset.apiDuration);
@@ -657,11 +720,11 @@
657
  button.addEventListener('click', () => {
658
  // Update selection
659
  aspectRatioButtons.forEach(btn => {
660
- btn.classList.remove('selected', 'bg-gradient-to-br', 'from-purple-900/30', 'to-indigo-900/30', 'border-purple-500/30', 'text-purple-100');
661
  btn.classList.add('bg-gray-800/50', 'border-gray-700', 'text-gray-200');
662
  });
663
 
664
- button.classList.add('selected', 'bg-gradient-to-br', 'from-purple-900/30', 'to-indigo-900/30', 'border-purple-500/30', 'text-purple-100');
665
  button.classList.remove('bg-gray-800/50', 'border-gray-700', 'text-gray-200');
666
 
667
  outputHeightInput.value = button.dataset.height;
@@ -710,8 +773,8 @@
710
  'bg-gradient-to-r from-blue-900/30 to-indigo-900/20 text-blue-100 border-r-2 border-blue-400'}`;
711
 
712
  const icon = document.createElement('i');
713
- icon.className = type === 'error' ? 'fas fa-exclamation-circle mt-0.5 mr-3 text-red-300' :
714
- type === 'success' ? 'fas fa-check-circle mt-0.5 mr-3 text-green-300' :
715
  'fas fa-info-circle mt-0.5 mr-3 text-blue-300';
716
 
717
  const text = document.createElement('span');
@@ -871,11 +934,11 @@
871
  progressBar.style.width = '0%';
872
  progressPercent.textContent = '0%';
873
  break;
874
-
875
  case "progress":
876
  updateVisualProgress(data.progress_data);
877
  break;
878
-
879
  case "process_completed":
880
  eventSource.close();
881
  generateButton.disabled = false;
@@ -899,7 +962,7 @@
899
  downloadButton.onclick = function() {
900
  const a = document.createElement('a');
901
  a.href = data.output.data[0].video.url;
902
- a.download = `ltx-video-${new Date().toISOString().slice(0,10)}.mp4`;
903
  document.body.appendChild(a);
904
  a.click();
905
  document.body.removeChild(a);
@@ -921,7 +984,7 @@
921
  playErrorSound();
922
  }
923
  break;
924
-
925
  case "queue_full":
926
  addStatusMessage('سرور مشغول است، لطفا کمی بعد تلاش کنید.', 'error');
927
  eventSource.close();
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>ساخت ویدیو هوشمند آلفا | تبدیل تصویر و متن به انیمیشن</title>
7
  <script src="https://cdn.tailwindcss.com"></script>
8
  <link href="https://cdn.jsdelivr.net/gh/rastikerdar/[email protected]/Vazirmatn-font-face.css" rel="stylesheet">
9
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
  <style>
11
+ :root {
12
+ --primary-color: rgb(84, 110, 122);
13
+ --primary-light: rgba(84, 110, 122, 0.1);
14
+ --primary-dark: rgb(69, 90, 100);
15
+ --accent-color: #4fc3f7;
16
+ --accent-dark: #29b6f6;
17
+ }
18
+
19
  @keyframes float {
20
  0% { transform: translateY(0px); }
21
  50% { transform: translateY(-8px); }
 
34
  }
35
 
36
  @keyframes pulseGlow {
37
+ 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.4); }
38
+ 70% { box-shadow: 0 0 0 12px rgba(76, 175, 80, 0); }
39
+ 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); }
40
  }
41
 
42
  .animate-float {
 
83
  }
84
 
85
  .file-drop-area.drag-over {
86
+ border-color: var(--accent-color);
87
+ background: rgba(79, 195, 247, 0.08);
88
  }
89
 
90
  .progress-track {
91
+ background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
92
  background-size: 200% 100%;
93
  animation: gradientFlow 4s ease infinite;
94
  }
 
116
  transform: rotateX(2deg) rotateY(2deg) scale(1.02);
117
  }
118
 
119
+ /* Button styles */
120
  .primary-btn {
121
+ background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
122
  color: white;
123
  transition: all 0.3s ease;
124
  }
125
 
126
  .primary-btn:hover {
127
+ background: linear-gradient(135deg, var(--primary-dark) 0%, rgb(59, 77, 86) 100%);
128
  transform: translateY(-2px);
129
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
130
  }
 
142
  }
143
 
144
  .accent-btn {
145
+ background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%);
146
  color: white;
147
  transition: all 0.3s ease;
148
  }
149
 
150
  .accent-btn:hover {
151
+ background: linear-gradient(135deg, var(--accent-dark) 0%, #039be5 100%);
152
  }
153
 
154
  .tab-btn {
 
163
  left: 0;
164
  right: 0;
165
  height: 2px;
166
+ background: linear-gradient(90deg, var(--primary-color) 0%, var(--accent-color) 100%);
167
  transform: scaleX(0);
168
  transition: transform 0.3s ease;
169
  transform-origin: left;
 
172
  .tab-btn.active::after {
173
  transform: scaleX(1);
174
  }
175
+
176
+ /* Custom scrollbar */
177
+ ::-webkit-scrollbar {
178
+ width: 8px;
179
+ height: 8px;
180
+ }
181
+
182
+ ::-webkit-scrollbar-track {
183
+ background: rgba(255, 255, 255, 0.05);
184
+ border-radius: 10px;
185
+ }
186
+
187
+ ::-webkit-scrollbar-thumb {
188
+ background: var(--primary-light);
189
+ border-radius: 10px;
190
+ }
191
+
192
+ ::-webkit-scrollbar-thumb:hover {
193
+ background: var(--primary-color);
194
+ }
195
+
196
+ /* Elegant background */
197
+ .bg-pattern {
198
+ background-color: #0f172a;
199
+ background-image:
200
+ radial-gradient(at 47% 33%, rgba(84, 110, 122, 0.2) 0, transparent 59%),
201
+ radial-gradient(at 82% 65%, rgba(79, 195, 247, 0.1) 0, transparent 55%);
202
+ }
203
+
204
+ /* Floating elements */
205
+ .floating-element {
206
+ position: absolute;
207
+ border-radius: 50%;
208
+ filter: blur(60px);
209
+ opacity: 0.15;
210
+ z-index: -1;
211
+ }
212
+
213
+ /* Input focus styles */
214
+ .custom-input:focus {
215
+ border-color: var(--accent-color);
216
+ box-shadow: 0 0 0 2px rgba(79, 195, 247, 0.2);
217
+ }
218
+
219
+ /* Card hover effect */
220
+ .hover-card {
221
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
222
+ }
223
+
224
+ .hover-card:hover {
225
+ transform: translateY(-5px);
226
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
227
+ }
228
  </style>
229
  </head>
230
+ <body class="min-h-screen bg-pattern text-gray-100 font-sans overflow-x-hidden">
231
+ <!-- Floating background elements -->
232
+ <div class="floating-element bg-primary-color w-64 h-64 top-20 left-20"></div>
233
+ <div class="floating-element bg-accent-color w-96 h-96 bottom-20 right-20"></div>
234
+
235
  <div class="container mx-auto px-4 py-12 max-w-4xl relative">
236
  <!-- Header Section -->
237
  <div class="text-center mb-16 animate-fade-in" style="animation-delay: 0.1s;">
238
+ <div class="inline-flex items-center justify-center p-5 rounded-2xl glass-morphism mb-6 shadow-lg hover-card">
239
+ <i class="fas fa-film text-4xl text-transparent bg-clip-text bg-gradient-to-r from-primary-color to-accent-color"></i>
240
  </div>
241
  <h1 class="text-4xl font-bold mb-4 flex items-center justify-center">
242
+ <span class="text-gradient bg-gradient-to-r from-primary-color to-accent-color">ساخت ویدیو هوشمند</span>
243
+ <span class="text-gradient bg-gradient-to-r from-accent-color to-cyan-400 mr-3">آلفا</span>
244
  </h1>
245
  <p class="text-lg text-gray-300 max-w-2xl mx-auto leading-relaxed">
246
+ با فناوری هوش مصنوعی آلفا، تصاویر و متون خود را به انیمیشن‌های خیره‌کننده تبدیل کنید
247
  </p>
248
  </div>
249
 
250
  <!-- Main Card -->
251
+ <div class="glass-morphism rounded-3xl overflow-hidden shadow-2xl mb-10 animate-fade-in hover-card" style="animation-delay: 0.2s;">
252
  <!-- Mode Selector -->
253
  <div class="flex border-b border-gray-700/50">
254
  <button class="mode-button tab-btn flex-1 py-5 font-medium text-sm uppercase tracking-wider transition-all duration-300 relative overflow-hidden group active" data-mode="image-to-video">
255
  <span class="relative z-10 flex items-center justify-center">
256
+ <i class="fas fa-image ml-2 text-accent-color"></i>
257
  تصویر به ویدیو
258
  </span>
259
  </button>
 
271
  <div id="imageToVideoSection" class="form-mode-section">
272
  <div class="mb-8">
273
  <label for="imageFile" class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
274
+ <i class="fas fa-image mr-2 text-accent-color"></i>
275
  انتخاب تصویر
276
  </label>
277
+ <div class="file-drop-area relative border-2 border-dashed border-gray-700 rounded-2xl p-10 text-center cursor-pointer transition-all duration-300 hover:border-accent-color bg-gray-800/30" id="fileUploadArea">
278
  <input type="file" id="imageFile" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" accept="image/jpeg, image/png, image/webp" />
279
  <div class="flex flex-col items-center justify-center">
280
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-light to-accent-color/20 flex items-center justify-center mb-4">
281
+ <i class="fas fa-cloud-upload-alt text-2xl text-accent-color"></i>
282
  </div>
283
  <p class="text-sm text-gray-300 mb-1">فایل را اینجا رها کنید یا برای انتخاب کلیک کنید</p>
284
  <p class="text-xs text-gray-500">فرمت‌های پشتیبانی شده: JPG, PNG, WebP</p>
 
290
 
291
  <!-- Text to Video Section -->
292
  <div id="textToVideoSection" class="form-mode-section hidden">
293
+ <div class="mb-8 text-center py-5 px-6 rounded-xl bg-gradient-to-r from-primary-light to-accent-color/20 border border-accent-color/20 shadow-inner">
294
  <div class="flex items-center justify-center">
295
+ <i class="fas fa-info-circle text-accent-color mr-3"></i>
296
+ <span class="text-sm text-gray-200">در این حالت، ویدیو فقط بر اساس متن راهنما ساخته می‌شود.</span>
297
  </div>
298
  </div>
299
  </div>
 
301
  <!-- Prompt Section -->
302
  <div class="mb-8">
303
  <label for="prompt" class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
304
+ <i class="fas fa-magic mr-2 text-accent-color"></i>
305
  شرح انیمیشن (Prompt)
306
  </label>
307
  <div class="relative">
308
+ <textarea id="prompt" rows="3" class="custom-input w-full px-5 py-4 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-accent-color focus:border-accent-color text-gray-200 placeholder-gray-500 transition-all duration-300 shadow-inner" placeholder="مثال: گربه‌ای که به آرامی پلک می‌زند">یک موجود از داخل تصویر شروع به حرکت می‌کند</textarea>
309
  <div class="absolute bottom-4 left-4 text-xs text-gray-500 flex items-center">
310
  <i class="fas fa-lightbulb mr-1 text-yellow-300/70"></i>
311
  <span>توضیحات دقیق‌تر = نتیجه بهتر</span>
 
316
  <!-- Duration Options -->
317
  <div class="mb-8">
318
  <label class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
319
+ <i class="fas fa-clock mr-2 text-accent-color"></i>
320
  مدت زمان
321
  </label>
322
  <div class="grid grid-cols-2 gap-4">
323
+ <button class="option-card duration-button p-4 rounded-xl bg-gray-800/50 border border-gray-700 text-gray-200 hover:border-accent-color flex flex-col items-center relative overflow-hidden" data-api-duration="5">
324
+ <div class="w-10 h-10 rounded-full bg-accent-color/10 flex items-center justify-center mb-2">
325
+ <i class="fas fa-hourglass-start text-accent-color"></i>
326
  </div>
327
  <span class="font-medium">کوتاه</span>
328
  <span class="text-xs text-gray-400 mt-1">۵ ثانیه</span>
329
+ <div class="absolute inset-0 bg-gradient-to-br from-primary-light to-accent-color/5 opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
330
  </button>
331
+ <button class="option-card duration-button p-4 rounded-xl bg-gradient-to-br from-primary-light to-accent-color/20 border border-accent-color/30 text-gray-100 hover:border-accent-color flex flex-col items-center relative selected" data-api-duration="7.8">
332
+ <div class="w-10 h-10 rounded-full bg-accent-color/20 flex items-center justify-center mb-2">
333
+ <i class="fas fa-hourglass-half text-gray-200"></i>
334
  </div>
335
  <span class="font-medium">استاندارد</span>
336
+ <span class="text-xs text-accent-color mt-1">۸ ثانیه</span>
337
+ <div class="absolute inset-0 bg-gradient-to-br from-primary-light to-accent-color/10 opacity-0 hover:opacity-100 transition-opacity duration-300"></div>
338
  </button>
339
  </div>
340
  </div>
 
342
  <!-- Advanced Settings Toggle -->
343
  <button id="advancedSettingsToggle" class="w-full py-4 px-5 mb-6 rounded-xl bg-gray-800/50 border border-gray-700 text-gray-300 hover:bg-gray-700/50 hover:text-white transition-all duration-300 flex items-center justify-between group">
344
  <span class="flex items-center">
345
+ <i class="fas fa-cog mr-3 text-accent-color group-hover:animate-spin"></i>
346
  تنظیمات پیشرفته
347
  </span>
348
+ <i class="fas fa-chevron-down text-gray-400 transition-transform duration-300 group-hover:text-accent-color"></i>
349
  </button>
350
 
351
  <!-- Advanced Settings -->
352
  <div id="advancedSettings" class="hidden bg-gradient-to-br from-gray-800/30 to-gray-900/30 rounded-2xl p-6 mb-8 border border-gray-700/50 shadow-inner">
353
  <div class="mb-8">
354
  <label class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
355
+ <i class="fas fa-crop-alt mr-2 text-accent-color"></i>
356
  نسبت تصویر
357
  </label>
358
  <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
359
+ <button class="option-card aspect-ratio-button p-3 rounded-xl bg-gray-800/50 border border-gray-700 text-gray-200 hover:border-accent-color flex flex-col items-center" data-height="768" data-width="768">
360
  <i class="fas fa-square text-xl mb-1"></i>
361
  <span class="text-sm">مربع</span>
362
+ <span class="text-xs text-gray-400 mt-1">۱:۱</span>
363
  </button>
364
+ <button class="option-card aspect-ratio-button p-3 rounded-xl bg-gray-800/50 border border-gray-700 text-gray-200 hover:border-accent-color flex flex-col items-center" data-height="768" data-width="432">
365
  <i class="fas fa-mobile-alt text-xl mb-1"></i>
366
  <span class="text-sm">پرتره</span>
367
  <span class="text-xs text-gray-400 mt-1">۹:۱۶</span>
368
  </button>
369
+ <button class="option-card aspect-ratio-button p-3 rounded-xl bg-gray-800/50 border border-gray-700 text-gray-200 hover:border-accent-color flex flex-col items-center" data-height="432" data-width="768">
370
  <i class="fas fa-desktop text-xl mb-1"></i>
371
  <span class="text-sm">لنداسکیپ</span>
372
  <span class="text-xs text-gray-400 mt-1">۱۶:۹</span>
373
  </button>
374
+ <button class="option-card aspect-ratio-button p-3 rounded-xl bg-gradient-to-br from-primary-light to-accent-color/20 border border-accent-color/30 text-gray-100 hover:border-accent-color flex flex-col items-center selected" data-height="576" data-width="1024">
375
  <i class="fas fa-expand text-xl mb-1"></i>
376
  <span class="text-sm">پیش‌فرض</span>
377
+ <span class="text-xs text-accent-color mt-1">آلفا</span>
378
  </button>
379
  </div>
380
  </div>
 
384
  <i class="fas fa-ban mr-2 text-red-300"></i>
385
  متن راهنمای منفی
386
  </label>
387
+ <textarea id="negativePrompt" rows="2" class="custom-input w-full px-5 py-4 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-accent-color focus:border-accent-color text-gray-200 placeholder-gray-500 transition-all duration-300 shadow-inner">کیفیت پایین، تار، لرزان</textarea>
388
  </div>
389
 
390
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
391
  <div>
392
  <label for="cfgScale" class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
393
+ <i class="fas fa-sliders-h mr-2 text-accent-color"></i>
394
  مقیاس CFG
395
  </label>
396
  <div class="relative">
397
+ <input type="number" id="cfgScale" value="1.0" min="1.0" max="10.0" step="0.1" class="custom-input w-full px-5 py-3 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-accent-color focus:border-accent-color text-gray-200 transition-all duration-300 shadow-inner" />
398
  <div class="absolute left-4 top-3 text-gray-500">
399
  <i class="fas fa-adjust"></i>
400
  </div>
 
406
  سید تصادفی
407
  </label>
408
  <div class="relative">
409
+ <input type="number" id="seed" value="0" min="0" class="custom-input w-full px-5 py-3 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-accent-color focus:border-accent-color text-gray-200 transition-all duration-300 shadow-inner" />
410
  <div class="absolute left-4 top-3 text-gray-500">
411
  <i class="fas fa-random"></i>
412
  </div>
 
417
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
418
  <div>
419
  <label for="outputHeight" class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
420
+ <i class="fas fa-arrows-alt-v mr-2 text-accent-color"></i>
421
  ارتفاع (پیکسل)
422
  </label>
423
  <div class="relative">
424
+ <input type="number" id="outputHeight" value="576" step="32" min="256" max="1280" class="custom-input w-full px-5 py-3 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-accent-color focus:border-accent-color text-gray-200 transition-all duration-300 shadow-inner" />
425
  <div class="absolute left-4 top-3 text-gray-500">
426
  <i class="fas fa-ruler-vertical"></i>
427
  </div>
 
429
  </div>
430
  <div>
431
  <label for="outputWidth" class="block text-sm font-medium mb-3 text-gray-300 flex items-center">
432
+ <i class="fas fa-arrows-alt-h mr-2 text-accent-color"></i>
433
  عرض (پیکسل)
434
  </label>
435
  <div class="relative">
436
+ <input type="number" id="outputWidth" value="1024" step="32" min="256" max="1280" class="custom-input w-full px-5 py-3 bg-gray-800/40 border border-gray-700 rounded-xl focus:ring-2 focus:ring-accent-color focus:border-accent-color text-gray-200 transition-all duration-300 shadow-inner" />
437
  <div class="absolute left-4 top-3 text-gray-500">
438
  <i class="fas fa-ruler-horizontal"></i>
439
  </div>
 
449
  <i class="fas fa-magic mr-3 transform group-hover:rotate-12 transition-transform"></i>
450
  ساخت ویدیو هوشمند
451
  </span>
452
+ <span class="absolute inset-0 bg-gradient-to-r from-primary-color/30 to-accent-color/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
453
  </button>
454
  </div>
455
  </div>
456
  </div>
457
 
458
  <!-- Status Section -->
459
+ <div id="statusSection" class="glass-morphism rounded-3xl overflow-hidden shadow-2xl mb-10 hidden animate-fade-in hover-card">
460
  <div class="p-8">
461
  <h2 class="text-xl font-bold mb-6 flex items-center">
462
+ <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary-light to-accent-color/20 flex items-center justify-center mr-3">
463
+ <i class="fas fa-spinner fa-spin text-accent-color"></i>
464
  </div>
465
+ <span class="text-gradient bg-gradient-to-r from-primary-color to-accent-color">در حال پردازش درخواست</span>
466
  </h2>
467
 
468
  <div class="mb-6">
469
  <div class="flex justify-between text-sm mb-2">
470
  <span class="text-gray-300">پیشرفت عملیات</span>
471
+ <span id="progressPercent" class="text-accent-color font-medium">0%</span>
472
  </div>
473
  <div class="w-full h-2.5 bg-gray-800 rounded-full overflow-hidden">
474
  <div id="progressBar" class="h-full rounded-full progress-track" style="width: 0%"></div>
475
  </div>
476
  </div>
477
 
478
+ <div id="statusMessages" class="space-y-3 max-h-60 overflow-y-auto pr-2 custom-scroll">
479
  <!-- Status messages will appear here -->
480
  </div>
481
  </div>
482
  </div>
483
 
484
  <!-- Output Section -->
485
+ <div id="outputSection" class="glass-morphism rounded-3xl overflow-hidden shadow-2xl hidden animate-fade-in hover-card">
486
  <div class="p-8">
487
  <h2 class="text-xl font-bold mb-6 flex items-center">
488
  <div class="w-10 h-10 rounded-full bg-gradient-to-r from-green-500/20 to-teal-500/20 flex items-center justify-center mr-3">
 
520
  <div class="text-center text-gray-500 text-sm mt-16">
521
  <p class="flex items-center justify-center">
522
  ساخته شده با
523
+ <i class="fas fa-heart text-accent-color mx-2 animate-pulse"></i>
524
+ توسط تیم آلفا
525
  </p>
526
  <p class="mt-2 text-gray-600">نسخه ۲.۰ | فناوری هوش مصنوعی پیشرفته</p>
527
  </div>
 
630
  // Update active state
631
  modeButtons.forEach(btn => {
632
  btn.classList.remove('active');
633
+ btn.querySelector('i').classList.remove('text-accent-color');
634
  btn.querySelector('i').classList.add('text-gray-400');
635
  });
636
 
637
  button.classList.add('active');
638
  button.querySelector('i').classList.remove('text-gray-400');
639
+ button.querySelector('i').classList.add('text-accent-color');
640
 
641
  // Update mode
642
  currentGenerationMode = button.dataset.mode;
 
701
  button.addEventListener('click', () => {
702
  // Update selection
703
  durationButtons.forEach(btn => {
704
+ btn.classList.remove('selected', 'bg-gradient-to-br', 'from-primary-light', 'to-accent-color/20', 'border-accent-color/30', 'text-gray-100');
705
  btn.classList.add('bg-gray-800/50', 'border-gray-700', 'text-gray-200');
706
  });
707
 
708
+ button.classList.add('selected', 'bg-gradient-to-br', 'from-primary-light', 'to-accent-color/20', 'border-accent-color/30', 'text-gray-100');
709
  button.classList.remove('bg-gray-800/50', 'border-gray-700', 'text-gray-200');
710
 
711
  selectedApiDuration = parseFloat(button.dataset.apiDuration);
 
720
  button.addEventListener('click', () => {
721
  // Update selection
722
  aspectRatioButtons.forEach(btn => {
723
+ btn.classList.remove('selected', 'bg-gradient-to-br', 'from-primary-light', 'to-accent-color/20', 'border-accent-color/30', 'text-gray-100');
724
  btn.classList.add('bg-gray-800/50', 'border-gray-700', 'text-gray-200');
725
  });
726
 
727
+ button.classList.add('selected', 'bg-gradient-to-br', 'from-primary-light', 'to-accent-color/20', 'border-accent-color/30', 'text-gray-100');
728
  button.classList.remove('bg-gray-800/50', 'border-gray-700', 'text-gray-200');
729
 
730
  outputHeightInput.value = button.dataset.height;
 
773
  'bg-gradient-to-r from-blue-900/30 to-indigo-900/20 text-blue-100 border-r-2 border-blue-400'}`;
774
 
775
  const icon = document.createElement('i');
776
+ icon.className = type === 'error' ? 'fas fa-exclamation-circle mt-0.5 mr-3 text-red-300' :
777
+ type === 'success' ? 'fas fa-check-circle mt-0.5 mr-3 text-green-300' :
778
  'fas fa-info-circle mt-0.5 mr-3 text-blue-300';
779
 
780
  const text = document.createElement('span');
 
934
  progressBar.style.width = '0%';
935
  progressPercent.textContent = '0%';
936
  break;
937
+
938
  case "progress":
939
  updateVisualProgress(data.progress_data);
940
  break;
941
+
942
  case "process_completed":
943
  eventSource.close();
944
  generateButton.disabled = false;
 
962
  downloadButton.onclick = function() {
963
  const a = document.createElement('a');
964
  a.href = data.output.data[0].video.url;
965
+ a.download = `alpha-video-${new Date().toISOString().slice(0,10)}.mp4`;
966
  document.body.appendChild(a);
967
  a.click();
968
  document.body.removeChild(a);
 
984
  playErrorSound();
985
  }
986
  break;
987
+
988
  case "queue_full":
989
  addStatusMessage('سرور مشغول است، لطفا کمی بعد تلاش کنید.', 'error');
990
  eventSource.close();