Hugging Face's logo

Spaces:
WAGNER88
/
cria-es
Running

App Files Community
WAGNER88 commited on
Commit
f97d5a5
·
verified ·
1 Parent(s): 8386ee5

Add 1 files

Browse files
Files changed (1) hide show
  1. index.html +712 -35
index.html CHANGED
@@ -309,6 +309,32 @@
309
  right: calc(100% + 20px);
310
  }
311
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
312
  </style>
313
  </head>
314
  <body class="min-h-screen">
@@ -386,13 +412,13 @@
386
 
387
  <!-- Entrada por texto -->
388
  <div id="text-input" class="input-method-content active">
389
- <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" rows="4" placeholder="Descreva a imagem que deseja gerar..."></textarea>
390
  <div class="flex justify-between items-center mt-4">
391
  <div class="flex space-x-2">
392
- <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm">
393
  <i class="fas fa-magic mr-1"></i>Sugestões
394
  </button>
395
- <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm">
396
  <i class="fas fa-history mr-1"></i>Histórico
397
  </button>
398
  </div>
@@ -404,13 +430,13 @@
404
 
405
  <!-- Entrada por imagem -->
406
  <div id="image-input" class="input-method-content hidden">
407
- <div class="dropzone">
408
  <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
409
  <p class="text-gray-600">Arraste e solte uma imagem aqui ou clique para selecionar</p>
410
- <input type="file" class="hidden" accept="image/*">
411
  </div>
412
  <div class="flex justify-end mt-4">
413
- <button class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
414
  <i class="fas fa-sparkles mr-2"></i>Transformar Imagem
415
  </button>
416
  </div>
@@ -419,34 +445,34 @@
419
 
420
  <!-- Configurações avançadas -->
421
  <div class="mb-6">
422
- <button class="flex items-center text-purple-600 font-medium">
423
  <i class="fas fa-cog mr-2"></i>Configurações Avançadas
424
- <i class="fas fa-chevron-down ml-2 text-sm"></i>
425
  </button>
426
- <div class="preview-box">
427
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
428
  <div>
429
  <label class="block text-gray-700 mb-1">Estilo</label>
430
- <select class="w-full p-2 border border-gray-300 rounded-lg">
431
- <option>Realista</option>
432
- <option>Artístico</option>
433
- <option>Cartoon</option>
434
- <option>Anime</option>
435
- <option>Pixel Art</option>
436
  </select>
437
  </div>
438
  <div>
439
  <label class="block text-gray-700 mb-1">Resolução</label>
440
- <select class="w-full p-2 border border-gray-300 rounded-lg">
441
- <option>512x512</option>
442
- <option>768x768</option>
443
- <option>1024x1024</option>
444
- <option>Widescreen</option>
445
  </select>
446
  </div>
447
  <div>
448
  <label class="block text-gray-700 mb-1">Nível de detalhe</label>
449
- <input type="range" class="w-full" min="1" max="10" value="7">
450
  </div>
451
  </div>
452
  </div>
@@ -469,8 +495,13 @@
469
 
470
  <!-- Resultados -->
471
  <div>
472
- <h4 class="text-lg font-medium text-gray-800 mb-3">Resultados</h4>
473
- <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
 
 
 
 
 
474
  <!-- Placeholder para resultados -->
475
  <div class="bg-gray-100 rounded-lg aspect-square flex items-center justify-center text-gray-400">
476
  <i class="fas fa-image text-4xl"></i>
@@ -526,10 +557,10 @@
526
  <h5 class="font-medium">Usar imagem existente</h5>
527
  </div>
528
  <p class="text-gray-600 text-sm mb-4">Faça upload de uma imagem do seu personagem para criar um modelo consistente.</p>
529
- <div class="dropzone">
530
  <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
531
  <p class="text-gray-600 text-sm">Arraste e solte uma imagem aqui ou clique para selecionar</p>
532
- <input type="file" class="hidden" accept="image/*">
533
  </div>
534
  <button id="generate-from-image" class="w-full mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm">
535
  <i class="fas fa-sparkles mr-2"></i>Criar Personagem
@@ -568,7 +599,7 @@
568
  </div>
569
 
570
  <!-- Lista de personagens -->
571
- <div class="character-gallery">
572
  <!-- Personagem 1 -->
573
  <div class="character-card bg-gray-50 rounded-lg p-3">
574
  <img src="https://via.placeholder.com/300x400" alt="Personagem" class="character-preview">
@@ -717,7 +748,7 @@
717
  <h5 class="font-medium">Texto para Vídeo</h5>
718
  </div>
719
  <p class="text-gray-600 text-sm mb-4">Descreva a cena or história que deseja transformar em vídeo.</p>
720
- <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent text-sm" rows="4" placeholder="Descreva o vídeo que deseja criar..."></textarea>
721
  <button id="generate-video-from-text" class="w-full mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm">
722
  <i class="fas fa-sparkles mr-2"></i>Gerar Vídeo
723
  </button>
@@ -732,10 +763,10 @@
732
  <h5 class="font-medium">Imagens para Vídeo</h5>
733
  </div>
734
  <p class="text-gray-600 text-sm mb-4">Faça upload de imagens para transformar em uma sequência animada.</p>
735
- <div class="dropzone">
736
  <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
737
  <p class="text-gray-600 text-sm">Arraste e solte imagens aqui ou clique para selecionar</p>
738
- <input type="file" class="hidden" accept="image/*" multiple>
739
  </div>
740
  <button id="generate-video-from-images" class="w-full mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm">
741
  <i class="fas fa-sparkles mr-2"></i>Criar Vídeo
@@ -743,7 +774,7 @@
743
  </div>
744
  </div>
745
 
746
- <div class="bg-gray-100 rounded-lg p-8 text-center">
747
  <i class="fas fa-video text-4xl text-gray-400 mb-4"></i>
748
  <h4 class="text-xl font-medium text-gray-700 mb-2">Pré-visualização do Vídeo</h4>
749
  <p class="text-gray-600">Seu vídeo aparecerá aqui quando estiver pronto.</p>
@@ -785,7 +816,7 @@
785
  <h5 class="font-medium">Texto para 3D</h5>
786
  </div>
787
  <p class="text-gray-600 text-sm mb-4">Descreva o objeto ou personagem 3D que deseja criar.</p>
788
- <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent text-sm" rows="4" placeholder="Descreva o modelo 3D que deseja gerar..."></textarea>
789
  <button id="generate-3d-from-text" class="w-full mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm">
790
  <i class="fas fa-sparkles mr-2"></i>Gerar Modelo
791
  </button>
@@ -800,10 +831,10 @@
800
  <h5 class="font-medium">Imagem para 3D</h5>
801
  </div>
802
  <p class="text-gray-600 text-sm mb-4">Faça upload de uma imagem para transformar em modelo 3D.</p>
803
- <div class="dropzone">
804
  <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
805
  <p class="text-gray-600 text-sm">Arraste e solte uma imagem aqui or clique para selecionar</p>
806
- <input type="file" class="hidden" accept="image/*">
807
  </div>
808
  <button id="generate-3d-from-image" class="w-full mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm">
809
  <i class="fas fa-sparkles mr-2"></i>Criar Modelo
@@ -811,7 +842,7 @@
811
  </div>
812
  </div>
813
 
814
- <div class="bg-gray-100 rounded-lg p-8 text-center">
815
  <i class="fas fa-cube text-4xl text-gray-400 mb-4"></i>
816
  <h4 class="text-xl font-medium text-gray-700 mb-2">Visualização 3D</h4>
817
  <p class="text-gray-600">Seu modelo 3D aparecerá aqui quando estiver pronto.</p>
@@ -847,5 +878,651 @@
847
  <!-- Rodapé -->
848
  <footer class="bg-gray-100 border-t border-gray-200 mt-12">
849
  <div class="container mx-auto px-4 py-8">
850
- <div class="grid grid-cols-1 md:grid-c
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
851
  </html>
 
309
  right: calc(100% + 20px);
310
  }
311
  }
312
+
313
+ /* Animation for generated items */
314
+ @keyframes fadeIn {
315
+ from { opacity: 0; transform: translateY(10px); }
316
+ to { opacity: 1; transform: translateY(0); }
317
+ }
318
+
319
+ .fade-in {
320
+ animation: fadeIn 0.5s ease forwards;
321
+ }
322
+
323
+ /* Preview image styles */
324
+ .preview-image {
325
+ transition: all 0.3s;
326
+ cursor: pointer;
327
+ }
328
+
329
+ .preview-image:hover {
330
+ transform: scale(1.02);
331
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
332
+ }
333
+
334
+ /* Selected image style */
335
+ .preview-image.selected {
336
+ border: 3px solid #6b46c1;
337
+ }
338
  </style>
339
  </head>
340
  <body class="min-h-screen">
 
412
 
413
  <!-- Entrada por texto -->
414
  <div id="text-input" class="input-method-content active">
415
+ <textarea id="image-prompt" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" rows="4" placeholder="Descreva a imagem que deseja gerar..."></textarea>
416
  <div class="flex justify-between items-center mt-4">
417
  <div class="flex space-x-2">
418
+ <button id="suggest-prompts" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm">
419
  <i class="fas fa-magic mr-1"></i>Sugestões
420
  </button>
421
+ <button id="show-history" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm">
422
  <i class="fas fa-history mr-1"></i>Histórico
423
  </button>
424
  </div>
 
430
 
431
  <!-- Entrada por imagem -->
432
  <div id="image-input" class="input-method-content hidden">
433
+ <div id="image-dropzone" class="dropzone">
434
  <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i>
435
  <p class="text-gray-600">Arraste e solte uma imagem aqui ou clique para selecionar</p>
436
+ <input type="file" id="image-upload" class="hidden" accept="image/*">
437
  </div>
438
  <div class="flex justify-end mt-4">
439
+ <button id="transform-image" class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition">
440
  <i class="fas fa-sparkles mr-2"></i>Transformar Imagem
441
  </button>
442
  </div>
 
445
 
446
  <!-- Configurações avançadas -->
447
  <div class="mb-6">
448
+ <button id="toggle-advanced" class="flex items-center text-purple-600 font-medium">
449
  <i class="fas fa-cog mr-2"></i>Configurações Avançadas
450
+ <i id="advanced-arrow" class="fas fa-chevron-down ml-2 text-sm"></i>
451
  </button>
452
+ <div id="advanced-settings" class="preview-box">
453
  <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4">
454
  <div>
455
  <label class="block text-gray-700 mb-1">Estilo</label>
456
+ <select id="image-style" class="w-full p-2 border border-gray-300 rounded-lg">
457
+ <option value="realistic">Realista</option>
458
+ <option value="artistic">Artístico</option>
459
+ <option value="cartoon">Cartoon</option>
460
+ <option value="anime">Anime</option>
461
+ <option value="pixel">Pixel Art</option>
462
  </select>
463
  </div>
464
  <div>
465
  <label class="block text-gray-700 mb-1">Resolução</label>
466
+ <select id="image-resolution" class="w-full p-2 border border-gray-300 rounded-lg">
467
+ <option value="512">512x512</option>
468
+ <option value="768">768x768</option>
469
+ <option value="1024">1024x1024</option>
470
+ <option value="widescreen">Widescreen</option>
471
  </select>
472
  </div>
473
  <div>
474
  <label class="block text-gray-700 mb-1">Nível de detalhe</label>
475
+ <input id="image-detail" type="range" class="w-full" min="1" max="10" value="7">
476
  </div>
477
  </div>
478
  </div>
 
495
 
496
  <!-- Resultados -->
497
  <div>
498
+ <div class="flex justify-between items-center mb-3">
499
+ <h4 class="text-lg font-medium text-gray-800">Resultados</h4>
500
+ <button id="save-all-images" class="px-3 py-1 bg-blue-600 text-white rounded-lg text-sm hidden">
501
+ <i class="fas fa-download mr-1"></i>Baixar Todas
502
+ </button>
503
+ </div>
504
+ <div id="image-results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
505
  <!-- Placeholder para resultados -->
506
  <div class="bg-gray-100 rounded-lg aspect-square flex items-center justify-center text-gray-400">
507
  <i class="fas fa-image text-4xl"></i>
 
557
  <h5 class="font-medium">Usar imagem existente</h5>
558
  </div>
559
  <p class="text-gray-600 text-sm mb-4">Faça upload de uma imagem do seu personagem para criar um modelo consistente.</p>
560
+ <div id="character-dropzone" class="dropzone">
561
  <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
562
  <p class="text-gray-600 text-sm">Arraste e solte uma imagem aqui ou clique para selecionar</p>
563
+ <input type="file" id="character-upload" class="hidden" accept="image/*">
564
  </div>
565
  <button id="generate-from-image" class="w-full mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm">
566
  <i class="fas fa-sparkles mr-2"></i>Criar Personagem
 
599
  </div>
600
 
601
  <!-- Lista de personagens -->
602
+ <div id="character-gallery" class="character-gallery">
603
  <!-- Personagem 1 -->
604
  <div class="character-card bg-gray-50 rounded-lg p-3">
605
  <img src="https://via.placeholder.com/300x400" alt="Personagem" class="character-preview">
 
748
  <h5 class="font-medium">Texto para Vídeo</h5>
749
  </div>
750
  <p class="text-gray-600 text-sm mb-4">Descreva a cena or história que deseja transformar em vídeo.</p>
751
+ <textarea id="video-prompt" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent text-sm" rows="4" placeholder="Descreva o vídeo que deseja criar..."></textarea>
752
  <button id="generate-video-from-text" class="w-full mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm">
753
  <i class="fas fa-sparkles mr-2"></i>Gerar Vídeo
754
  </button>
 
763
  <h5 class="font-medium">Imagens para Vídeo</h5>
764
  </div>
765
  <p class="text-gray-600 text-sm mb-4">Faça upload de imagens para transformar em uma sequência animada.</p>
766
+ <div id="video-dropzone" class="dropzone">
767
  <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
768
  <p class="text-gray-600 text-sm">Arraste e solte imagens aqui ou clique para selecionar</p>
769
+ <input type="file" id="video-upload" class="hidden" accept="image/*" multiple>
770
  </div>
771
  <button id="generate-video-from-images" class="w-full mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm">
772
  <i class="fas fa-sparkles mr-2"></i>Criar Vídeo
 
774
  </div>
775
  </div>
776
 
777
+ <div id="video-preview" class="bg-gray-100 rounded-lg p-8 text-center">
778
  <i class="fas fa-video text-4xl text-gray-400 mb-4"></i>
779
  <h4 class="text-xl font-medium text-gray-700 mb-2">Pré-visualização do Vídeo</h4>
780
  <p class="text-gray-600">Seu vídeo aparecerá aqui quando estiver pronto.</p>
 
816
  <h5 class="font-medium">Texto para 3D</h5>
817
  </div>
818
  <p class="text-gray-600 text-sm mb-4">Descreva o objeto ou personagem 3D que deseja criar.</p>
819
+ <textarea id="3d-prompt" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent text-sm" rows="4" placeholder="Descreva o modelo 3D que deseja gerar..."></textarea>
820
  <button id="generate-3d-from-text" class="w-full mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm">
821
  <i class="fas fa-sparkles mr-2"></i>Gerar Modelo
822
  </button>
 
831
  <h5 class="font-medium">Imagem para 3D</h5>
832
  </div>
833
  <p class="text-gray-600 text-sm mb-4">Faça upload de uma imagem para transformar em modelo 3D.</p>
834
+ <div id="3d-dropzone" class="dropzone">
835
  <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
836
  <p class="text-gray-600 text-sm">Arraste e solte uma imagem aqui or clique para selecionar</p>
837
+ <input type="file" id="3d-upload" class="hidden" accept="image/*">
838
  </div>
839
  <button id="generate-3d-from-image" class="w-full mt-3 px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition text-sm">
840
  <i class="fas fa-sparkles mr-2"></i>Criar Modelo
 
842
  </div>
843
  </div>
844
 
845
+ <div id="3d-preview" class="bg-gray-100 rounded-lg p-8 text-center">
846
  <i class="fas fa-cube text-4xl text-gray-400 mb-4"></i>
847
  <h4 class="text-xl font-medium text-gray-700 mb-2">Visualização 3D</h4>
848
  <p class="text-gray-600">Seu modelo 3D aparecerá aqui quando estiver pronto.</p>
 
878
  <!-- Rodapé -->
879
  <footer class="bg-gray-100 border-t border-gray-200 mt-12">
880
  <div class="container mx-auto px-4 py-8">
881
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
882
+ <div>
883
+ <h4 class="text-lg font-semibold mb-4">Magic Creator</h4>
884
+ <p class="text-gray-600">Crie conteúdo incrível com IA. Gere imagens, vídeos e modelos 3D de alta qualidade com facilidade.</p>
885
+ </div>
886
+ <div>
887
+ <h4 class="text-lg font-semibold mb-4">Links Úteis</h4>
888
+ <ul class="space-y-2">
889
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Tutoriais</a></li>
890
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Documentação</a></li>
891
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Termos de Serviço</a></li>
892
+ <li><a href="#" class="text-gray-600 hover:text-purple-600">Política de Privacidade</a></li>
893
+ </ul>
894
+ </div>
895
+ <div>
896
+ <h4 class="text-lg font-semibold mb-4">Contato</h4>
897
+ <ul class="space-y-2">
898
+ <li class="flex items-center text-gray-600"><i class="fas fa-envelope mr-2"></i> contato@magiccreator.com</li>
899
+ <li class="flex items-center text-gray-600"><i class="fas fa-phone mr-2"></i> (11) 98765-4321</li>
900
+ <li class="flex items-center text-gray-600"><i class="fas fa-map-marker-alt mr-2"></i> São Paulo, Brasil</li>
901
+ </ul>
902
+ </div>
903
+ </div>
904
+ <div class="border-t border-gray-200 mt-8 pt-8 text-center text-gray-500">
905
+ <p>&copy; 2023 Magic Creator. Todos os direitos reservados.</p>
906
+ </div>
907
+ </div>
908
+ </footer>
909
+
910
+ <script>
911
+ // Variáveis globais
912
+ let results = [];
913
+ let selectedTab = 'images';
914
+ let selectedMethod = 'text';
915
+
916
+ // Função para simular geração de conteúdo
917
+ async function generateContent(type, prompt, options = {}) {
918
+ return new Promise((resolve) => {
919
+ // Simular tempo de processamento
920
+ const processingTime = type === 'image' ? 15000 :
921
+ type === 'character' ? 25000 :
922
+ type === 'video' ? 60000 : 45000;
923
+
924
+ // Atualizar barra de progresso
925
+ const progressBar = document.getElementById(`${type}-progress-bar`);
926
+ const progressPercentage = document.getElementById(`${type}-progress-percentage`);
927
+ const progressTime = document.getElementById(`${type}-progress-time`);
928
+
929
+ let progress = 0;
930
+ const interval = setInterval(() => {
931
+ progress += 1;
932
+ progressBar.style.width = `${progress}%`;
933
+ progressPercentage.textContent = `${progress}%`;
934
+
935
+ // Atualizar tempo estimado
936
+ const remainingTime = Math.max(0, (processingTime - (processingTime * progress / 100)) / 1000);
937
+ progressTime.textContent = `Estimativa: ${remainingTime.toFixed(0)} segundos`;
938
+
939
+ if (progress >= 100) {
940
+ clearInterval(interval);
941
+
942
+ // Simular resultado
943
+ setTimeout(() => {
944
+ const result = {
945
+ id: Date.now(),
946
+ type: type,
947
+ prompt: prompt,
948
+ options: options,
949
+ timestamp: new Date().toLocaleString(),
950
+ content: generateMockContent(type, prompt)
951
+ };
952
+
953
+ resolve(result);
954
+ }, 500);
955
+ }
956
+ }, processingTime / 100);
957
+ });
958
+ }
959
+
960
+ // Gerar conteúdo mockado para demonstração
961
+ function generateMockContent(type, prompt) {
962
+ const mockImages = [
963
+ 'https://source.unsplash.com/random/300x300/?fantasy',
964
+ 'https://source.unsplash.com/random/300x300/?space',
965
+ 'https://source.unsplash.com/random/300x300/?character',
966
+ 'https://source.unsplash.com/random/300x300/?art'
967
+ ];
968
+
969
+ const mockVideos = [
970
+ 'https://www.youtube.com/embed/dQw4w9WgXcQ',
971
+ 'https://www.youtube.com/embed/9bZkp7q19f0',
972
+ 'https://www.youtube.com/embed/JGwWNGJdvx8'
973
+ ];
974
+
975
+ const mock3DModels = [
976
+ 'https://sketchfab.com/models/8eb5a7c679104773a728a3aee803d6d6/embed',
977
+ 'https://sketchfab.com/models/94d8fe954a1e45b4b4b5c6846e64d1e3/embed',
978
+ 'https://sketchfab.com/models/2a6e70c1e1d84c4e9d8d0b5d5f5b5b5f/embed'
979
+ ];
980
+
981
+ switch(type) {
982
+ case 'image':
983
+ return {
984
+ images: mockImages,
985
+ selected: 0
986
+ };
987
+ case 'character':
988
+ return {
989
+ image: 'https://source.unsplash.com/random/300x400/?portrait',
990
+ name: prompt.substring(0, 20) || 'Personagem Gerado',
991
+ description: prompt
992
+ };
993
+ case 'video':
994
+ return {
995
+ video: mockVideos[Math.floor(Math.random() * mockVideos.length)],
996
+ thumbnail: 'https://source.unsplash.com/random/300x200/?video'
997
+ };
998
+ case '3d':
999
+ return {
1000
+ embed: mock3DModels[Math.floor(Math.random() * mock3DModels.length)],
1001
+ thumbnail: 'https://source.unsplash.com/random/300x300/?3d'
1002
+ };
1003
+ default:
1004
+ return null;
1005
+ }
1006
+ }
1007
+
1008
+ // Adicionar resultado ao painel
1009
+ function addResultToPanel(result) {
1010
+ const resultsContainer = document.getElementById('resultsContainer');
1011
+ const emptyState = resultsContainer.querySelector('.text-center');
1012
+
1013
+ if (emptyState) {
1014
+ resultsContainer.removeChild(emptyState);
1015
+ }
1016
+
1017
+ // Criar elemento de resultado
1018
+ const resultElement = document.createElement('div');
1019
+ resultElement.className = 'result-item fade-in';
1020
+
1021
+ let contentHTML = '';
1022
+
1023
+ switch(result.type) {
1024
+ case 'image':
1025
+ contentHTML = `
1026
+ <h4 class="font-medium text-gray-800 mb-2">Imagem Gerada</h4>
1027
+ <p class="text-sm text-gray-600 mb-2">${result.prompt}</p>
1028
+ <img src="${result.content.images[0]}" alt="Imagem gerada" class="mb-2">
1029
+ <div class="result-item-actions">
1030
+ <button class="px-3 py-1 bg-purple-600 text-white rounded text-sm" onclick="downloadImage('${result.content.images[0]}', 'imagem-${result.id}')">
1031
+ <i class="fas fa-download mr-1"></i>Baixar
1032
+ </button>
1033
+ <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm" onclick="shareResult(${result.id})">
1034
+ <i class="fas fa-share-alt mr-1"></i>Compartilhar
1035
+ </button>
1036
+ </div>
1037
+ `;
1038
+ break;
1039
+ case 'character':
1040
+ contentHTML = `
1041
+ <h4 class="font-medium text-gray-800 mb-2">Personagem: ${result.content.name}</h4>
1042
+ <p class="text-sm text-gray-600 mb-2">${result.prompt.substring(0, 100)}...</p>
1043
+ <img src="${result.content.image}" alt="Personagem gerado" class="mb-2">
1044
+ <div class="result-item-actions">
1045
+ <button class="px-3 py-1 bg-purple-600 text-white rounded text-sm" onclick="downloadImage('${result.content.image}', 'personagem-${result.id}')">
1046
+ <i class="fas fa-download mr-1"></i>Baixar
1047
+ </button>
1048
+ <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm" onclick="shareResult(${result.id})">
1049
+ <i class="fas fa-share-alt mr-1"></i>Compartilhar
1050
+ </button>
1051
+ </div>
1052
+ `;
1053
+ break;
1054
+ case 'video':
1055
+ contentHTML = `
1056
+ <h4 class="font-medium text-gray-800 mb-2">Vídeo Gerado</h4>
1057
+ <p class="text-sm text-gray-600 mb-2">${result.prompt}</p>
1058
+ <img src="${result.content.thumbnail}" alt="Thumbnail do vídeo" class="mb-2">
1059
+ <div class="result-item-actions">
1060
+ <button class="px-3 py-1 bg-purple-600 text-white rounded text-sm">
1061
+ <i class="fas fa-download mr-1"></i>Baixar
1062
+ </button>
1063
+ <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm" onclick="shareResult(${result.id})">
1064
+ <i class="fas fa-share-alt mr-1"></i>Compartilhar
1065
+ </button>
1066
+ </div>
1067
+ `;
1068
+ break;
1069
+ case '3d':
1070
+ contentHTML = `
1071
+ <h4 class="font-medium text-gray-800 mb-2">Modelo 3D Gerado</h4>
1072
+ <p class="text-sm text-gray-600 mb-2">${result.prompt}</p>
1073
+ <img src="${result.content.thumbnail}" alt="Thumbnail do modelo 3D" class="mb-2">
1074
+ <div class="result-item-actions">
1075
+ <button class="px-3 py-1 bg-purple-600 text-white rounded text-sm">
1076
+ <i class="fas fa-download mr-1"></i>Baixar
1077
+ </button>
1078
+ <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm" onclick="shareResult(${result.id})">
1079
+ <i class="fas fa-share-alt mr-1"></i>Compartilhar
1080
+ </button>
1081
+ </div>
1082
+ `;
1083
+ break;
1084
+ }
1085
+
1086
+ resultElement.innerHTML = contentHTML;
1087
+ resultsContainer.insertBefore(resultElement, resultsContainer.firstChild);
1088
+
1089
+ // Atualizar contador
1090
+ updateResultsBadge();
1091
+ }
1092
+
1093
+ // Atualizar badge de resultados
1094
+ function updateResultsBadge() {
1095
+ const badge = document.getElementById('resultsBadge');
1096
+ const resultItems = document.querySelectorAll('.result-item');
1097
+
1098
+ if (resultItems.length > 0) {
1099
+ badge.textContent = resultItems.length;
1100
+ badge.classList.remove('hidden');
1101
+ } else {
1102
+ badge.classList.add('hidden');
1103
+ }
1104
+ }
1105
+
1106
+ // Função para baixar imagem
1107
+ function downloadImage(url, filename) {
1108
+ const link = document.createElement('a');
1109
+ link.href = url;
1110
+ link.download = filename || 'imagem-gerada';
1111
+ document.body.appendChild(link);
1112
+ link.click();
1113
+ document.body.removeChild(link);
1114
+ }
1115
+
1116
+ // Função para compartilhar resultado
1117
+ function shareResult(resultId) {
1118
+ const result = results.find(r => r.id === resultId);
1119
+ if (!result) return;
1120
+
1121
+ if (navigator.share) {
1122
+ navigator.share({
1123
+ title: 'Confira o que criei com Magic Creator!',
1124
+ text: `Criei ${result.type === 'image' ? 'uma imagem' : result.type === 'video' ? 'um vídeo' : 'um modelo 3D'} com a descrição: ${result.prompt}`,
1125
+ url: window.location.href
1126
+ }).catch(err => {
1127
+ console.log('Erro ao compartilhar:', err);
1128
+ });
1129
+ } else {
1130
+ // Fallback para navegadores que não suportam Web Share API
1131
+ alert('Seu navegador não suporta a API de compartilhamento. Copie o link da página para compartilhar.');
1132
+ }
1133
+ }
1134
+
1135
+ // Event Listeners
1136
+ document.addEventListener('DOMContentLoaded', function() {
1137
+ // Alternar abas
1138
+ const tabButtons = document.querySelectorAll('.tab-btn');
1139
+ tabButtons.forEach(button => {
1140
+ button.addEventListener('click', function() {
1141
+ // Remover classe active de todas as abas
1142
+ tabButtons.forEach(btn => {
1143
+ btn.classList.remove('active', 'text-purple-600', 'border-purple-600');
1144
+ btn.classList.add('text-gray-500');
1145
+ });
1146
+
1147
+ // Adicionar classe active à aba clicada
1148
+ this.classList.add('active', 'text-purple-600', 'border-purple-600');
1149
+ this.classList.remove('text-gray-500');
1150
+
1151
+ // Esconder todos os conteúdos de abas
1152
+ document.querySelectorAll('.tab-content').forEach(content => {
1153
+ content.classList.remove('active');
1154
+ });
1155
+
1156
+ // Mostrar conteúdo da aba selecionada
1157
+ const tabId = this.getAttribute('data-tab');
1158
+ document.getElementById(tabId).classList.add('active');
1159
+ selectedTab = tabId;
1160
+ });
1161
+ });
1162
+
1163
+ // Alternar métodos de entrada
1164
+ const methodButtons = document.querySelectorAll('.input-method-btn');
1165
+ methodButtons.forEach(button => {
1166
+ button.addEventListener('click', function() {
1167
+ // Remover classe active de todos os botões
1168
+ methodButtons.forEach(btn => {
1169
+ btn.classList.remove('active', 'bg-purple-600', 'text-white');
1170
+ btn.classList.add('bg-gray-200', 'text-gray-700');
1171
+ });
1172
+
1173
+ // Adicionar classe active ao botão clicado
1174
+ this.classList.add('active', 'bg-purple-600', 'text-white');
1175
+ this.classList.remove('bg-gray-200', 'text-gray-700');
1176
+
1177
+ // Esconder todos os conteúdos de métodos
1178
+ document.querySelectorAll('.input-method-content').forEach(content => {
1179
+ content.classList.remove('active');
1180
+ });
1181
+
1182
+ // Mostrar conteúdo do método selecionado
1183
+ const method = this.getAttribute('data-method');
1184
+ document.getElementById(`${method}-input`).classList.add('active');
1185
+ selectedMethod = method;
1186
+ });
1187
+ });
1188
+
1189
+ // Configurações avançadas
1190
+ document.getElementById('toggle-advanced').addEventListener('click', function() {
1191
+ const settings = document.getElementById('advanced-settings');
1192
+ const arrow = document.getElementById('advanced-arrow');
1193
+
1194
+ settings.classList.toggle('active');
1195
+ arrow.classList.toggle('fa-chevron-down');
1196
+ arrow.classList.toggle('fa-chevron-up');
1197
+ });
1198
+
1199
+ // Gerar imagem
1200
+ document.getElementById('generate-image').addEventListener('click', async function() {
1201
+ const prompt = document.getElementById('image-prompt').value;
1202
+ if (!prompt) {
1203
+ alert('Por favor, descreva a imagem que deseja gerar.');
1204
+ return;
1205
+ }
1206
+
1207
+ const style = document.getElementById('image-style').value;
1208
+ const resolution = document.getElementById('image-resolution').value;
1209
+ const detail = document.getElementById('image-detail').value;
1210
+
1211
+ // Mostrar barra de progresso
1212
+ const progress = document.getElementById('image-progress');
1213
+ progress.classList.remove('hidden');
1214
+
1215
+ // Gerar conteúdo
1216
+ const result = await generateContent('image', prompt, { style, resolution, detail });
1217
+
1218
+ // Esconder barra de progresso
1219
+ progress.classList.add('hidden');
1220
+
1221
+ // Adicionar resultado ao painel
1222
+ results.push(result);
1223
+ addResultToPanel(result);
1224
+
1225
+ // Mostrar resultados na aba de imagens
1226
+ const resultsContainer = document.getElementById('image-results');
1227
+ resultsContainer.innerHTML = '';
1228
+
1229
+ result.content.images.forEach((image, index) => {
1230
+ const imgDiv = document.createElement('div');
1231
+ imgDiv.className = 'preview-image relative';
1232
+ if (index === 0) imgDiv.classList.add('selected');
1233
+
1234
+ imgDiv.innerHTML = `
1235
+ <img src="${image}" alt="Imagem gerada" class="w-full h-full object-cover rounded-lg">
1236
+ <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm rounded-b-lg">
1237
+ <button class="download-btn absolute top-2 right-2 bg-white text-black p-1 rounded-full w-6 h-6 flex items-center justify-center">
1238
+ <i class="fas fa-download text-xs"></i>
1239
+ </button>
1240
+ </div>
1241
+ `;
1242
+
1243
+ imgDiv.addEventListener('click', function() {
1244
+ document.querySelectorAll('.preview-image').forEach(img => img.classList.remove('selected'));
1245
+ this.classList.add('selected');
1246
+ });
1247
+
1248
+ resultsContainer.appendChild(imgDiv);
1249
+ });
1250
+
1251
+ // Mostrar botão de baixar todas
1252
+ document.getElementById('save-all-images').classList.remove('hidden');
1253
+ });
1254
+
1255
+ // Baixar todas as imagens
1256
+ document.getElementById('save-all-images').addEventListener('click', function() {
1257
+ const selectedResult = results[results.length - 1]; // Último resultado
1258
+ if (selectedResult && selectedResult.type === 'image') {
1259
+ selectedResult.content.images.forEach((image, index) => {
1260
+ setTimeout(() => {
1261
+ downloadImage(image, `imagem-${selectedResult.id}-${index}`);
1262
+ }, index * 500);
1263
+ });
1264
+ }
1265
+ });
1266
+
1267
+ // Upload de imagem
1268
+ document.getElementById('image-upload').addEventListener('change', function(e) {
1269
+ const file = e.target.files[0];
1270
+ if (file) {
1271
+ const reader = new FileReader();
1272
+ reader.onload = function(event) {
1273
+ const dropzone = document.getElementById('image-dropzone');
1274
+ dropzone.innerHTML = `
1275
+ <img src="${event.target.result}" alt="Imagem carregada" class="max-h-48 mx-auto mb-2">
1276
+ <p class="text-gray-600">${file.name}</p>
1277
+ `;
1278
+ dropzone.classList.add('active');
1279
+ };
1280
+ reader.readAsDataURL(file);
1281
+ }
1282
+ });
1283
+
1284
+ // Transformar imagem
1285
+ document.getElementById('transform-image').addEventListener('click', async function() {
1286
+ const fileInput = document.getElementById('image-upload');
1287
+ if (!fileInput.files || fileInput.files.length === 0) {
1288
+ alert('Por favor, selecione uma imagem para transformar.');
1289
+ return;
1290
+ }
1291
+
1292
+ const prompt = document.getElementById('image-prompt').value || 'Transformar imagem';
1293
+ const style = document.getElementById('image-style').value;
1294
+ const resolution = document.getElementById('image-resolution').value;
1295
+ const detail = document.getElementById('image-detail').value;
1296
+
1297
+ // Mostrar barra de progresso
1298
+ const progress = document.getElementById('image-progress');
1299
+ progress.classList.remove('hidden');
1300
+
1301
+ // Gerar conteúdo
1302
+ const result = await generateContent('image', prompt, { style, resolution, detail });
1303
+
1304
+ // Esconder barra de progresso
1305
+ progress.classList.add('hidden');
1306
+
1307
+ // Adicionar resultado ao painel
1308
+ results.push(result);
1309
+ addResultToPanel(result);
1310
+
1311
+ // Mostrar resultados na aba de imagens
1312
+ const resultsContainer = document.getElementById('image-results');
1313
+ resultsContainer.innerHTML = '';
1314
+
1315
+ result.content.images.forEach((image, index) => {
1316
+ const imgDiv = document.createElement('div');
1317
+ imgDiv.className = 'preview-image relative';
1318
+ if (index === 0) imgDiv.classList.add('selected');
1319
+
1320
+ imgDiv.innerHTML = `
1321
+ <img src="${image}" alt="Imagem gerada" class="w-full h-full object-cover rounded-lg">
1322
+ <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm rounded-b-lg">
1323
+ <button class="download-btn absolute top-2 right-2 bg-white text-black p-1 rounded-full w-6 h-6 flex items-center justify-center">
1324
+ <i class="fas fa-download text-xs"></i>
1325
+ </button>
1326
+ </div>
1327
+ `;
1328
+
1329
+ imgDiv.addEventListener('click', function() {
1330
+ document.querySelectorAll('.preview-image').forEach(img => img.classList.remove('selected'));
1331
+ this.classList.add('selected');
1332
+ });
1333
+
1334
+ resultsContainer.appendChild(imgDiv);
1335
+ });
1336
+
1337
+ // Mostrar botão de baixar todas
1338
+ document.getElementById('save-all-images').classList.remove('hidden');
1339
+ });
1340
+
1341
+ // Gerar personagem a partir de texto
1342
+ document.getElementById('generate-from-text').addEventListener('click', async function() {
1343
+ const prompt = document.getElementById('character-description').value;
1344
+ if (!prompt) {
1345
+ alert('Por favor, descreva o personagem que deseja criar.');
1346
+ return;
1347
+ }
1348
+
1349
+ // Mostrar barra de progresso
1350
+ const progress = document.getElementById('character-progress');
1351
+ progress.classList.remove('hidden');
1352
+
1353
+ // Gerar conteúdo
1354
+ const result = await generateContent('character', prompt);
1355
+
1356
+ // Esconder barra de progresso
1357
+ progress.classList.add('hidden');
1358
+
1359
+ // Adicionar resultado ao painel
1360
+ results.push(result);
1361
+ addResultToPanel(result);
1362
+
1363
+ // Adicionar à galeria de personagens
1364
+ const gallery = document.getElementById('character-gallery');
1365
+ const characterDiv = document.createElement('div');
1366
+ characterDiv.className = 'character-card bg-gray-50 rounded-lg p-3';
1367
+
1368
+ characterDiv.innerHTML = `
1369
+ <img src="${result.content.image}" alt="Personagem" class="character-preview">
1370
+ <div class="mt-2">
1371
+ <h5 class="font-medium text-sm truncate">${result.content.name}</h5>
1372
+ <p class="text-gray-500 text-xs">Criado em ${new Date().toLocaleDateString()}</p>
1373
+ </div>
1374
+ <div class="character-actions">
1375
+ <button class="flex-1 px-2 py-1 bg-purple-600 text-white rounded text-xs hover:bg-purple-700">
1376
+ <i class="fas fa-magic mr-1"></i>Variar
1377
+ </button>
1378
+ <button class="flex-1 px-2 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700" onclick="downloadImage('${result.content.image}', 'personagem-${result.id}')">
1379
+ <i class="fas fa-download mr-1"></i>Baixar
1380
+ </button>
1381
+ </div>
1382
+ <div class="remove-character">
1383
+ <i class="fas fa-times text-xs"></i>
1384
+ </div>
1385
+ `;
1386
+
1387
+ gallery.insertBefore(characterDiv, gallery.lastElementChild);
1388
+ });
1389
+
1390
+ // Upload de imagem para personagem
1391
+ document.getElementById('character-upload').addEventListener('change', function(e) {
1392
+ const file = e.target.files[0];
1393
+ if (file) {
1394
+ const reader = new FileReader();
1395
+ reader.onload = function(event) {
1396
+ const dropzone = document.getElementById('character-dropzone');
1397
+ dropzone.innerHTML = `
1398
+ <img src="${event.target.result}" alt="Imagem carregada" class="max-h-48 mx-auto mb-2">
1399
+ <p class="text-gray-600 text-sm">${file.name}</p>
1400
+ `;
1401
+ dropzone.classList.add('active');
1402
+ };
1403
+ reader.readAsDataURL(file);
1404
+ }
1405
+ });
1406
+
1407
+ // Gerar personagem a partir de imagem
1408
+ document.getElementById('generate-from-image').addEventListener('click', async function() {
1409
+ const fileInput = document.getElementById('character-upload');
1410
+ if (!fileInput.files || fileInput.files.length === 0) {
1411
+ alert('Por favor, selecione uma imagem para criar o personagem.');
1412
+ return;
1413
+ }
1414
+
1415
+ const prompt = document.getElementById('character-description').value || 'Personagem baseado em imagem';
1416
+
1417
+ // Mostrar barra de progresso
1418
+ const progress = document.getElementById('character-progress');
1419
+ progress.classList.remove('hidden');
1420
+
1421
+ // Gerar conteúdo
1422
+ const result = await generateContent('character', prompt);
1423
+
1424
+ // Esconder barra de progresso
1425
+ progress.classList.add('hidden');
1426
+
1427
+ // Adicionar resultado ao painel
1428
+ results.push(result);
1429
+ addResultToPanel(result);
1430
+
1431
+ // Adicionar à galeria de personagens
1432
+ const gallery = document.getElementById('character-gallery');
1433
+ const characterDiv = document.createElement('div');
1434
+ characterDiv.className = 'character-card bg-gray-50 rounded-lg p-3';
1435
+
1436
+ characterDiv.innerHTML = `
1437
+ <img src="${result.content.image}" alt="Personagem" class="character-preview">
1438
+ <div class="mt-2">
1439
+ <h5 class="font-medium text-sm truncate">${result.content.name}</h5>
1440
+ <p class="text-gray-500 text-xs">Criado em ${new Date().toLocaleDateString()}</p>
1441
+ </div>
1442
+ <div class="character-actions">
1443
+ <button class="flex-1 px-2 py-1 bg-purple-600 text-white rounded text-xs hover:bg-purple-700">
1444
+ <i class="fas fa-magic mr-1"></i>Variar
1445
+ </button>
1446
+ <button class="flex-1 px-2 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700" onclick="downloadImage('${result.content.image}', 'personagem-${result.id}')">
1447
+ <i class="fas fa-download mr-1"></i>Baixar
1448
+ </button>
1449
+ </div>
1450
+ <div class="remove-character">
1451
+ <i class="fas fa-times text-xs"></i>
1452
+ </div>
1453
+ `;
1454
+
1455
+ gallery.insertBefore(characterDiv, gallery.lastElementChild);
1456
+ });
1457
+
1458
+ // Gerar vídeo a partir de texto
1459
+ document.getElementById('generate-video-from-text').addEventListener('click', async function() {
1460
+ const prompt = document.getElementById('video-prompt').value;
1461
+ if (!prompt) {
1462
+ alert('Por favor, descreva o vídeo que deseja criar.');
1463
+ return;
1464
+ }
1465
+
1466
+ // Mostrar barra de progresso
1467
+ const progress = document.getElementById('video-progress');
1468
+ progress.classList.remove('hidden');
1469
+
1470
+ // Gerar conteúdo
1471
+ const result = await generateContent('video', prompt);
1472
+
1473
+ // Esconder barra de progresso
1474
+ progress.classList.add('hidden');
1475
+
1476
+ // Adicionar resultado ao painel
1477
+ results.push(result);
1478
+ addResultToPanel(result);
1479
+
1480
+ // Mostrar pré-visualização do vídeo
1481
+ const preview = document.getElementById('video-preview');
1482
+ preview.innerHTML = `
1483
+ <div class="aspect-w-16 aspect-h-9 mb-4">
1484
+ <iframe src="${result.content.video}" frameborder="0" allowfullscreen class="w-full h-64"></iframe>
1485
+ </div>
1486
+ <h4 class="text-xl font-medium text-gray-700 mb-2">Vídeo Gerado</h4>
1487
+ <p class="text-gray-600">${prompt.substring(0, 100)}...</p>
1488
+ `;
1489
+ });
1490
+
1491
+ // Upload de vídeo
1492
+ document.getElementById('video-upload').addEventListener('change', function(e) {
1493
+ const files = e.target.files;
1494
+ if (!files || files.length === 0) return;
1495
+
1496
+ const dropzone = document.getElementById('video-dropzone');
1497
+ dropzone.innerHTML = '';
1498
+
1499
+ Array.from(files).forEach((file, index) => {
1500
+ if (index >= 3) return; // Mostrar apenas 3 imagens
1501
+
1502
+ const reader = new FileReader();
1503
+ reader.onload = function(event) {
1504
+ const img = document.createElement('img');
1505
+ img.src = event.target.result;
1506
+ img.className = 'inline-block w-16 h-16 object-cover mr-2 mb-2';
1507
+ img.alt = file.name;
1508
+ dropzone.appendChild(img);
1509
+ };
1510
+ reader.readAsDataURL(file);
1511
+ });
1512
+
1513
+ if (files.length > 3) {
1514
+ const moreText = document.createElement('p');
1515
+ moreText.className = 'text-gray-600 text-sm';
1516
+ moreText.textContent = `+${files.length - 3} mais...`;
1517
+ dropzone.appendChild(moreText);
1518
+ }
1519
+
1520
+ dropzone.classList.add('active');
1521
+ });
1522
+
1523
+ // Gerar vídeo a partir de imagens
1524
+ document.getElementById('generate-video-from-images').addEventListener('click', async function() {
1525
+ const fileInput = document.getElementById('video-upload');
1526
+ if (!fileInput.files || fileInput.files.length === 0) {
1527
+ alert('Por favor, selecione pelo menos
1528
  </html>