| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Magic Creator | Gerador de Imagens, Vídeos e 3D</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Poppins', sans-serif; |
| background-color: #f8fafc; |
| } |
| |
| .gradient-bg { |
| background: linear-gradient(135deg, #6b46c1 0%, #4299e1 100%); |
| } |
| |
| .card-hover { |
| transition: all 0.3s ease; |
| } |
| |
| .card-hover:hover { |
| transform: translateY(-5px); |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
| } |
| |
| .loading-spinner { |
| border: 4px solid rgba(255, 255, 255, 0.3); |
| border-radius: 50%; |
| border-top: 4px solid #ffffff; |
| width: 40px; |
| height: 40px; |
| animation: spin 1s linear infinite; |
| } |
| |
| @keyframes spin { |
| 0% { transform: rotate(0deg); } |
| 100% { transform: rotate(360deg); } |
| } |
| |
| .preview-box { |
| transition: all 0.5s ease; |
| max-height: 0; |
| overflow: hidden; |
| } |
| |
| .preview-box.active { |
| max-height: 1000px; |
| padding: 1rem; |
| margin-top: 1rem; |
| } |
| |
| .tab-content { |
| display: none; |
| } |
| |
| .tab-content.active { |
| display: block; |
| } |
| |
| .edit-tools { |
| display: none; |
| } |
| |
| .edit-tools.active { |
| display: grid; |
| } |
| |
| .character-consistency { |
| border-left: 4px solid #6b46c1; |
| padding-left: 1rem; |
| } |
| |
| .dropzone { |
| border: 2px dashed #cbd5e0; |
| border-radius: 0.5rem; |
| padding: 2rem; |
| text-align: center; |
| cursor: pointer; |
| transition: all 0.3s; |
| } |
| |
| .dropzone:hover { |
| border-color: #a0aec0; |
| background-color: #f7fafc; |
| } |
| |
| .dropzone.active { |
| border-color: #4299e1; |
| background-color: #ebf8ff; |
| } |
| |
| .image-editor { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .editor-tool { |
| padding: 0.5rem 1rem; |
| background: white; |
| border-radius: 0.5rem; |
| box-shadow: 0 1px 3px rgba(0,0,0,0.1); |
| cursor: pointer; |
| transition: all 0.2s; |
| } |
| |
| .editor-tool:hover { |
| background: #f8f9fa; |
| transform: translateY(-2px); |
| } |
| |
| .share-btn { |
| position: fixed; |
| bottom: 2rem; |
| right: 2rem; |
| z-index: 50; |
| } |
| |
| .character-card { |
| position: relative; |
| transition: all 0.3s; |
| } |
| |
| .character-card:hover { |
| transform: scale(1.03); |
| } |
| |
| .remove-character { |
| position: absolute; |
| top: -8px; |
| right: -8px; |
| background: #ef4444; |
| color: white; |
| border-radius: 50%; |
| width: 24px; |
| height: 24px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| opacity: 0; |
| transition: opacity 0.3s; |
| } |
| |
| .character-card:hover .remove-character { |
| opacity: 1; |
| } |
| |
| .character-preview { |
| width: 100%; |
| height: 200px; |
| object-fit: cover; |
| border-radius: 0.5rem; |
| } |
| |
| .character-gallery { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); |
| gap: 1rem; |
| margin-top: 1rem; |
| } |
| |
| .character-actions { |
| display: flex; |
| gap: 0.5rem; |
| margin-top: 0.5rem; |
| } |
| |
| .progress-container { |
| width: 100%; |
| background-color: #e5e7eb; |
| border-radius: 9999px; |
| height: 8px; |
| overflow: hidden; |
| } |
| |
| .progress-bar { |
| height: 100%; |
| background: linear-gradient(90deg, #6b46c1, #4299e1); |
| border-radius: 9999px; |
| transition: width 0.5s ease; |
| } |
| |
| .progress-info { |
| display: flex; |
| justify-content: space-between; |
| margin-top: 0.5rem; |
| font-size: 0.875rem; |
| color: #6b7280; |
| } |
| |
| .progress-time { |
| font-weight: 600; |
| color: #6b46c1; |
| } |
| |
| .progress-percentage { |
| font-weight: 600; |
| } |
| |
| |
| .result-panel { |
| position: fixed; |
| top: 0; |
| right: -400px; |
| width: 400px; |
| height: 100vh; |
| background-color: white; |
| box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1); |
| transition: right 0.3s ease; |
| z-index: 100; |
| overflow-y: auto; |
| padding: 1rem; |
| } |
| |
| .result-panel.active { |
| right: 0; |
| } |
| |
| .result-panel-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| padding-bottom: 1rem; |
| border-bottom: 1px solid #e5e7eb; |
| margin-bottom: 1rem; |
| } |
| |
| .result-item { |
| border: 1px solid #e5e7eb; |
| border-radius: 0.5rem; |
| padding: 1rem; |
| margin-bottom: 1rem; |
| transition: all 0.3s; |
| } |
| |
| .result-item:hover { |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| } |
| |
| .result-item img { |
| width: 100%; |
| border-radius: 0.25rem; |
| margin-bottom: 0.5rem; |
| } |
| |
| .result-item-actions { |
| display: flex; |
| gap: 0.5rem; |
| margin-top: 0.5rem; |
| } |
| |
| .panel-toggle-btn { |
| position: fixed; |
| right: 20px; |
| top: 50%; |
| transform: translateY(-50%); |
| background-color: #6b46c1; |
| color: white; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); |
| z-index: 90; |
| transition: all 0.3s; |
| } |
| |
| .panel-toggle-btn:hover { |
| background-color: #7c3aed; |
| } |
| |
| .panel-toggle-btn.active { |
| right: 420px; |
| } |
| |
| .panel-toggle-btn .badge { |
| position: absolute; |
| top: -5px; |
| right: -5px; |
| background-color: #ef4444; |
| color: white; |
| border-radius: 50%; |
| width: 20px; |
| height: 20px; |
| font-size: 12px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| } |
| |
| @media (max-width: 768px) { |
| .result-panel { |
| width: 100%; |
| right: -100%; |
| } |
| |
| .result-panel.active { |
| right: 0; |
| } |
| |
| .panel-toggle-btn.active { |
| right: calc(100% + 20px); |
| } |
| } |
| |
| |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| |
| .fade-in { |
| animation: fadeIn 0.5s ease forwards; |
| } |
| |
| |
| .preview-image { |
| transition: all 0.3s; |
| cursor: pointer; |
| } |
| |
| .preview-image:hover { |
| transform: scale(1.02); |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
| } |
| |
| |
| .preview-image.selected { |
| border: 3px solid #6b46c1; |
| } |
| </style> |
| </head> |
| <body class="min-h-screen"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-magic text-2xl"></i> |
| <h1 class="text-2xl font-bold">Magic Creator</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button id="open-in-browser" class="hidden md:flex items-center space-x-1 bg-white/20 hover:bg-white/30 px-3 py-1 rounded-full text-sm transition"> |
| <i class="fas fa-external-link-alt"></i> |
| <span>Abrir no navegador</span> |
| </button> |
| <button id="share-btn" class="hidden md:flex items-center space-x-1 bg-white/20 hover:bg-white/30 px-3 py-1 rounded-full text-sm transition"> |
| <i class="fas fa-share-alt"></i> |
| <span>Compartilhar</span> |
| </button> |
| </div> |
| <button class="md:hidden text-xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="container mx-auto px-4 py-8"> |
| |
| <section class="text-center mb-12"> |
| <h2 class="text-4xl font-bold text-gray-800 mb-4">Crie Conteúdo Incrível com IA</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto"> |
| Gere imagens, vídeos e modelos 3D de alta qualidade a partir de texto ou imagens. |
| Edite, personalize e baixe seus projetos com facilidade. |
| </p> |
| </section> |
|
|
| |
| <div class="max-w-6xl mx-auto mb-8"> |
| <div class="flex flex-wrap border-b border-gray-200"> |
| <button class="tab-btn active px-6 py-3 font-medium text-purple-600 border-b-2 border-purple-600" data-tab="images"> |
| <i class="fas fa-image mr-2"></i>Gerar Imagens |
| </button> |
| <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-purple-600" data-tab="characters"> |
| <i class="fas fa-user-circle mr-2"></i>Personagens Consistentes |
| </button> |
| <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-purple-600" data-tab="videos"> |
| <i class="fas fa-video mr-2"></i>Gerar Vídeos |
| </button> |
| <button class="tab-btn px-6 py-3 font-medium text-gray-500 hover:text-purple-600" data-tab="3d"> |
| <i class="fas fa-cube mr-2"></i>Modelos 3D |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="max-w-6xl mx-auto"> |
| |
| <div id="images" class="tab-content active"> |
| <div class="bg-white rounded-lg shadow-md p-6 card-hover"> |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Gerador de Imagens IA</h3> |
| |
| |
| <div class="mb-6"> |
| <div class="flex space-x-4 mb-4"> |
| <button class="input-method-btn active px-4 py-2 bg-purple-600 text-white rounded-lg" data-method="text"> |
| <i class="fas fa-font mr-2"></i>Texto para Imagem |
| </button> |
| <button class="input-method-btn px-4 py-2 bg-gray-200 text-gray-700 rounded-lg" data-method="image"> |
| <i class="fas fa-image mr-2"></i>Imagem para Imagem |
| </button> |
| </div> |
| |
| |
| <div id="text-input" class="input-method-content active"> |
| <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> |
| <div class="flex justify-between items-center mt-4"> |
| <div class="flex space-x-2"> |
| <button id="suggest-prompts" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm"> |
| <i class="fas fa-magic mr-1"></i>Sugestões |
| </button> |
| <button id="show-history" class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm"> |
| <i class="fas fa-history mr-1"></i>Histórico |
| </button> |
| </div> |
| <button id="generate-image" class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"> |
| <i class="fas fa-sparkles mr-2"></i>Gerar Imagem |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="image-input" class="input-method-content hidden"> |
| <div id="image-dropzone" class="dropzone"> |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-2"></i> |
| <p class="text-gray-600">Arraste e solte uma imagem aqui ou clique para selecionar</p> |
| <input type="file" id="image-upload" class="hidden" accept="image/*"> |
| </div> |
| <div class="flex justify-end mt-4"> |
| <button id="transform-image" class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 transition"> |
| <i class="fas fa-sparkles mr-2"></i>Transformar Imagem |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div class="mb-6"> |
| <button id="toggle-advanced" class="flex items-center text-purple-600 font-medium"> |
| <i class="fas fa-cog mr-2"></i>Configurações Avançadas |
| <i id="advanced-arrow" class="fas fa-chevron-down ml-2 text-sm"></i> |
| </button> |
| <div id="advanced-settings" class="preview-box"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mt-4"> |
| <div> |
| <label class="block text-gray-700 mb-1">Estilo</label> |
| <select id="image-style" class="w-full p-2 border border-gray-300 rounded-lg"> |
| <option value="realistic">Realista</option> |
| <option value="artistic">Artístico</option> |
| <option value="cartoon">Cartoon</option> |
| <option value="anime">Anime</option> |
| <option value="pixel">Pixel Art</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Resolução</label> |
| <select id="image-resolution" class="w-full p-2 border border-gray-300 rounded-lg"> |
| <option value="512">512x512</option> |
| <option value="768">768x768</option> |
| <option value="1024">1024x1024</option> |
| <option value="widescreen">Widescreen</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Nível de detalhe</label> |
| <input id="image-detail" type="range" class="w-full" min="1" max="10" value="7"> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="image-progress" class="hidden mb-6"> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-spinner fa-spin text-purple-600 mr-2"></i> |
| <span class="font-medium text-gray-700">Gerando sua imagem...</span> |
| </div> |
| <div class="progress-container"> |
| <div id="image-progress-bar" class="progress-bar" style="width: 0%"></div> |
| </div> |
| <div class="progress-info"> |
| <span id="image-progress-time" class="progress-time">Estimativa: 15 segundos</span> |
| <span id="image-progress-percentage" class="progress-percentage">0%</span> |
| </div> |
| </div> |
| |
| |
| <div> |
| <div class="flex justify-between items-center mb-3"> |
| <h4 class="text-lg font-medium text-gray-800">Resultados</h4> |
| <button id="save-all-images" class="px-3 py-1 bg-blue-600 text-white rounded-lg text-sm hidden"> |
| <i class="fas fa-download mr-1"></i>Baixar Todas |
| </button> |
| </div> |
| <div id="image-results" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> |
| |
| <div class="bg-gray-100 rounded-lg aspect-square flex items-center justify-center text-gray-400"> |
| <i class="fas fa-image text-4xl"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg aspect-square flex items-center justify-center text-gray-400"> |
| <i class="fas fa-image text-4xl"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg aspect-square flex items-center justify-center text-gray-400"> |
| <i class="fas fa-image text-4xl"></i> |
| </div> |
| <div class="bg-gray-100 rounded-lg aspect-square flex items-center justify-center text-gray-400"> |
| <i class="fas fa-image text-4xl"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="characters" class="tab-content"> |
| <div class="bg-white rounded-lg shadow-md p-6 card-hover"> |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Personagens Consistentes</h3> |
| <p class="text-gray-600 mb-6"> |
| Crie e mantenha personagens consistentes em diferentes cenas e situações. |
| Faça upload de imagens do seu personagem ou gere novas variações mantendo as características principais. |
| </p> |
| |
| |
| <div id="character-progress" class="hidden mb-6"> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-spinner fa-spin text-purple-600 mr-2"></i> |
| <span class="font-medium text-gray-700">Criando seu personagem...</span> |
| </div> |
| <div class="progress-container"> |
| <div id="character-progress-bar" class="progress-bar" style="width: 0%"></div> |
| </div> |
| <div class="progress-info"> |
| <span id="character-progress-time" class="progress-time">Estimativa: 25 segundos</span> |
| <span id="character-progress-percentage" class="progress-percentage">0%</span> |
| </div> |
| </div> |
| |
| |
| <div class="mb-8"> |
| <h4 class="text-lg font-medium text-gray-800 mb-3">Criar Novo Personagem</h4> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-upload text-purple-600"></i> |
| </div> |
| <h5 class="font-medium">Usar imagem existente</h5> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Faça upload de uma imagem do seu personagem para criar um modelo consistente.</p> |
| <div id="character-dropzone" class="dropzone"> |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
| <p class="text-gray-600 text-sm">Arraste e solte uma imagem aqui ou clique para selecionar</p> |
| <input type="file" id="character-upload" class="hidden" accept="image/*"> |
| </div> |
| <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"> |
| <i class="fas fa-sparkles mr-2"></i>Criar Personagem |
| </button> |
| </div> |
| |
| |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-font text-purple-600"></i> |
| </div> |
| <h5 class="font-medium">Criar a partir de texto</h5> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Descreva seu personagem e nós geraremos uma versão inicial para você.</p> |
| <textarea id="character-description" class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent text-sm" rows="3" placeholder="Descreva seu personagem (aparência, personalidade, estilo...)"></textarea> |
| <button id="generate-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"> |
| <i class="fas fa-sparkles mr-2"></i>Gerar Personagem |
| </button> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div> |
| <div class="flex justify-between items-center mb-4"> |
| <h4 class="text-lg font-medium text-gray-800">Sua Biblioteca de Personagens</h4> |
| <div class="flex items-center space-x-2"> |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm"> |
| <i class="fas fa-filter mr-1"></i>Filtrar |
| </button> |
| <button class="px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm"> |
| <i class="fas fa-sort mr-1"></i>Ordenar |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="character-gallery" class="character-gallery"> |
| |
| <div class="character-card bg-gray-50 rounded-lg p-3"> |
| <img src="https://via.placeholder.com/300x400" alt="Personagem" class="character-preview"> |
| <div class="mt-2"> |
| <h5 class="font-medium text-sm truncate">Herói Espacial</h5> |
| <p class="text-gray-500 text-xs">Criado em 15/06/2023</p> |
| </div> |
| <div class="character-actions"> |
| <button class="flex-1 px-2 py-1 bg-purple-600 text-white rounded text-xs hover:bg-purple-700"> |
| <i class="fas fa-magic mr-1"></i>Variar |
| </button> |
| <button class="flex-1 px-2 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700"> |
| <i class="fas fa-download mr-1"></i>Baixar |
| </button> |
| </div> |
| <div class="remove-character"> |
| <i class="fas fa-times text-xs"></i> |
| </div> |
| </div> |
| |
| |
| <div class="character-card bg-gray-50 rounded-lg p-3"> |
| <img src="https://via.placeholder.com/300x400" alt="Personagem" class="character-preview"> |
| <div class="mt-2"> |
| <h5 class="font-medium text-sm truncate">Feiticeira Mística</h5> |
| <p class="text-gray-500 text-xs">Criado em 10/06/2023</p> |
| </div> |
| <div class="character-actions"> |
| <button class="flex-1 px-2 py-1 bg-purple-600 text-white rounded text-xs hover:bg-purple-700"> |
| <i class="fas fa-magic mr-1"></i>Variar |
| </button> |
| <button class="flex-1 px-2 py-1 bg-blue-600 text-white rounded text-xs hover:bg-blue-700"> |
| <i class="fas fa-download mr-1"></i>Baixar |
| </button> |
| </div> |
| <div class="remove-character"> |
| <i class="fas fa-times text-xs"></i> |
| </div> |
| </div> |
| |
| |
| <div class="border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:bg-gray-50"> |
| <div class="bg-purple-100 p-3 rounded-full my-4"> |
| <i class="fas fa-plus text-purple-600"></i> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Adicionar Personagem</p> |
| </div> |
| </div> |
| </div> |
| |
| |
| <div id="character-editor" class="mt-8 hidden"> |
| <div class="border-t border-gray-200 pt-6"> |
| <h4 class="text-lg font-medium text-gray-800 mb-4">Editar Personagem</h4> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> |
| |
| <div class="md:col-span-1"> |
| <div class="bg-gray-100 rounded-lg aspect-square flex items-center justify-center"> |
| <i class="fas fa-user text-4xl text-gray-400"></i> |
| </div> |
| <div class="mt-4"> |
| <label class="block text-gray-700 mb-1">Nome do Personagem</label> |
| <input type="text" class="w-full p-2 border border-gray-300 rounded-lg" value="Herói Espacial"> |
| </div> |
| </div> |
| |
| |
| <div class="md:col-span-2"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label class="block text-gray-700 mb-1">Estilo</label> |
| <select class="w-full p-2 border border-gray-300 rounded-lg"> |
| <option>Realista</option> |
| <option selected>Artístico</option> |
| <option>Cartoon</option> |
| <option>Anime</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-gray-700 mb-1">Idade Aproximada</label> |
| <input type="number" class="w-full p-2 border border-gray-300 rounded-lg" value="28"> |
| </div> |
| </div> |
| |
| <label class="block text-gray-700 mb-1">Descrição</label> |
| <textarea class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-600 focus:border-transparent" rows="4">Um herói espacial com traje futurístico, cabelos loiros e olhos azuis brilhantes. Usa uma armadura prateada com detalhes em azul neon.</textarea> |
| |
| <div class="mt-4"> |
| <label class="block text-gray-700 mb-1">Características Principais</label> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Rosto alongado</span> |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Cicatriz no queixo</span> |
| <span class="bg-purple-100 text-purple-800 px-3 py-1 rounded-full text-sm">Olhos azuis</span> |
| <button class="text-purple-600"> |
| <i class="fas fa-plus"></i> |
| </button> |
| </div> |
| </div> |
| |
| <div class="flex justify-end space-x-3 mt-6"> |
| <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50"> |
| Cancelar |
| </button> |
| <button class="px-6 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700"> |
| Salvar Alterações |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="videos" class="tab-content"> |
| <div class="bg-white rounded-lg shadow-md p-6 card-hover"> |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Gerador de Vídeos IA</h3> |
| <p class="text-gray-600 mb-6"> |
| Crie vídeos impressionantes a partir de texto ou imagens. |
| Personalize cenas, adicione movimento e gerar conteúdo audiovisual único. |
| </p> |
| |
| |
| <div id="video-progress" class="hidden mb-6"> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-spinner fa-spin text-purple-600 mr-2"></i> |
| <span class="font-medium text-gray-700">Gerando seu vídeo...</span> |
| </div> |
| <div class="progress-container"> |
| <div id="video-progress-bar" class="progress-bar" style="width: 0%"></div> |
| </div> |
| <div class="progress-info"> |
| <span id="video-progress-time" class="progress-time">Estimativa: 1 minuto</span> |
| <span id="video-progress-percentage" class="progress-percentage">0%</span> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-font text-purple-600"></i> |
| </div> |
| <h5 class="font-medium">Texto para Vídeo</h5> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Descreva a cena or história que deseja transformar em vídeo.</p> |
| <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> |
| <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"> |
| <i class="fas fa-sparkles mr-2"></i>Gerar Vídeo |
| </button> |
| </div> |
| |
| |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-images text-purple-600"></i> |
| </div> |
| <h5 class="font-medium">Imagens para Vídeo</h5> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Faça upload de imagens para transformar em uma sequência animada.</p> |
| <div id="video-dropzone" class="dropzone"> |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
| <p class="text-gray-600 text-sm">Arraste e solte imagens aqui ou clique para selecionar</p> |
| <input type="file" id="video-upload" class="hidden" accept="image/*" multiple> |
| </div> |
| <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"> |
| <i class="fas fa-sparkles mr-2"></i>Criar Vídeo |
| </button> |
| </div> |
| </div> |
| |
| <div id="video-preview" class="bg-gray-100 rounded-lg p-8 text-center"> |
| <i class="fas fa-video text-4xl text-gray-400 mb-4"></i> |
| <h4 class="text-xl font-medium text-gray-700 mb-2">Pré-visualização do Vídeo</h4> |
| <p class="text-gray-600">Seu vídeo aparecerá aqui quando estiver pronto.</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="3d" class="tab-content"> |
| <div class="bg-white rounded-lg shadow-md p-6 card-hover"> |
| <h3 class="text-2xl font-semibold text-gray-800 mb-4">Gerador de Modelos 3D</h3> |
| <p class="text-gray-600 mb-6"> |
| Transforme suas ideias em modelos 3D detalhados. |
| Crie objetos, personagens ou cenários para usar em jogos, animações ou impressão 3D. |
| </p> |
| |
| |
| <div id="3d-progress" class="hidden mb-6"> |
| <div class="flex items-center mb-2"> |
| <i class="fas fa-spinner fa-spin text-purple-600 mr-2"></i> |
| <span class="font-medium text-gray-700">Gerando seu modelo 3D...</span> |
| </div> |
| <div class="progress-container"> |
| <div id="3d-progress-bar" class="progress-bar" style="width: 0%"></div> |
| </div> |
| <div class="progress-info"> |
| <span id="3d-progress-time" class="progress-time">Estimativa: 45 segundos</span> |
| <span id="3d-progress-percentage" class="progress-percentage">0%</span> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-font text-purple-600"></i> |
| </div> |
| <h5 class="font-medium">Texto para 3D</h5> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Descreva o objeto ou personagem 3D que deseja criar.</p> |
| <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> |
| <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"> |
| <i class="fas fa-sparkles mr-2"></i>Gerar Modelo |
| </button> |
| </div> |
| |
| |
| <div class="border border-gray-200 rounded-lg p-4"> |
| <div class="flex items-center mb-3"> |
| <div class="bg-purple-100 p-2 rounded-full mr-3"> |
| <i class="fas fa-image text-purple-600"></i> |
| </div> |
| <h5 class="font-medium">Imagem para 3D</h5> |
| </div> |
| <p class="text-gray-600 text-sm mb-4">Faça upload de uma imagem para transformar em modelo 3D.</p> |
| <div id="3d-dropzone" class="dropzone"> |
| <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i> |
| <p class="text-gray-600 text-sm">Arraste e solte uma imagem aqui or clique para selecionar</p> |
| <input type="file" id="3d-upload" class="hidden" accept="image/*"> |
| </div> |
| <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"> |
| <i class="fas fa-sparkles mr-2"></i>Criar Modelo |
| </button> |
| </div> |
| </div> |
| |
| <div id="3d-preview" class="bg-gray-100 rounded-lg p-8 text-center"> |
| <i class="fas fa-cube text-4xl text-gray-400 mb-4"></i> |
| <h4 class="text-xl font-medium text-gray-700 mb-2">Visualização 3D</h4> |
| <p class="text-gray-600">Seu modelo 3D aparecerá aqui quando estiver pronto.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <div class="result-panel" id="resultPanel"> |
| <div class="result-panel-header"> |
| <h3 class="text-xl font-bold text-gray-800">Resultados Recentes</h3> |
| <button id="closePanel" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div id="resultsContainer"> |
| |
| <div class="text-center py-8 text-gray-500"> |
| <i class="fas fa-box-open text-4xl mb-2"></i> |
| <p>Nenhum resultado ainda</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="panel-toggle-btn" id="panelToggleBtn"> |
| <i class="fas fa-clipboard-list"></i> |
| <div class="badge hidden" id="resultsBadge">0</div> |
| </div> |
|
|
| |
| <footer class="bg-gray-100 border-t border-gray-200 mt-12"> |
| <div class="container mx-auto px-4 py-8"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Magic Creator</h4> |
| <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> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Links Úteis</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-600 hover:text-purple-600">Tutoriais</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-purple-600">Documentação</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-purple-600">Termos de Serviço</a></li> |
| <li><a href="#" class="text-gray-600 hover:text-purple-600">Política de Privacidade</a></li> |
| </ul> |
| </div> |
| <div> |
| <h4 class="text-lg font-semibold mb-4">Contato</h4> |
| <ul class="space-y-2"> |
| <li class="flex items-center text-gray-600"><i class="fas fa-envelope mr-2"></i> contato@magiccreator.com</li> |
| <li class="flex items-center text-gray-600"><i class="fas fa-phone mr-2"></i> (11) 98765-4321</li> |
| <li class="flex items-center text-gray-600"><i class="fas fa-map-marker-alt mr-2"></i> São Paulo, Brasil</li> |
| </ul> |
| </div> |
| </div> |
| <div class="border-t border-gray-200 mt-8 pt-8 text-center text-gray-500"> |
| <p>© 2023 Magic Creator. Todos os direitos reservados.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| <script> |
| // Variáveis globais |
| let results = []; |
| let selectedTab = 'images'; |
| let selectedMethod = 'text'; |
| |
| // Função para simular geração de conteúdo |
| async function generateContent(type, prompt, options = {}) { |
| return new Promise((resolve) => { |
| // Simular tempo de processamento |
| const processingTime = type === 'image' ? 15000 : |
| type === 'character' ? 25000 : |
| type === 'video' ? 60000 : 45000; |
| |
| // Atualizar barra de progresso |
| const progressBar = document.getElementById(`${type}-progress-bar`); |
| const progressPercentage = document.getElementById(`${type}-progress-percentage`); |
| const progressTime = document.getElementById(`${type}-progress-time`); |
| |
| let progress = 0; |
| const interval = setInterval(() => { |
| progress += 1; |
| progressBar.style.width = `${progress}%`; |
| progressPercentage.textContent = `${progress}%`; |
| |
| // Atualizar tempo estimado |
| const remainingTime = Math.max(0, (processingTime - (processingTime * progress / 100)) / 1000); |
| progressTime.textContent = `Estimativa: ${remainingTime.toFixed(0)} segundos`; |
| |
| if (progress >= 100) { |
| clearInterval(interval); |
| |
| // Simular resultado |
| setTimeout(() => { |
| const result = { |
| id: Date.now(), |
| type: type, |
| prompt: prompt, |
| options: options, |
| timestamp: new Date().toLocaleString(), |
| content: generateMockContent(type, prompt) |
| }; |
| |
| resolve(result); |
| }, 500); |
| } |
| }, processingTime / 100); |
| }); |
| } |
| |
| // Gerar conteúdo mockado para demonstração |
| function generateMockContent(type, prompt) { |
| const mockImages = [ |
| 'https://source.unsplash.com/random/300x300/?fantasy', |
| 'https://source.unsplash.com/random/300x300/?space', |
| 'https://source.unsplash.com/random/300x300/?character', |
| 'https://source.unsplash.com/random/300x300/?art' |
| ]; |
| |
| const mockVideos = [ |
| 'https://www.youtube.com/embed/dQw4w9WgXcQ', |
| 'https://www.youtube.com/embed/9bZkp7q19f0', |
| 'https://www.youtube.com/embed/JGwWNGJdvx8' |
| ]; |
| |
| const mock3DModels = [ |
| 'https://sketchfab.com/models/8eb5a7c679104773a728a3aee803d6d6/embed', |
| 'https://sketchfab.com/models/94d8fe954a1e45b4b4b5c6846e64d1e3/embed', |
| 'https://sketchfab.com/models/2a6e70c1e1d84c4e9d8d0b5d5f5b5b5f/embed' |
| ]; |
| |
| switch(type) { |
| case 'image': |
| return { |
| images: mockImages, |
| selected: 0 |
| }; |
| case 'character': |
| return { |
| image: 'https://source.unsplash.com/random/300x400/?portrait', |
| name: prompt.substring(0, 20) || 'Personagem Gerado', |
| description: prompt |
| }; |
| case 'video': |
| return { |
| video: mockVideos[Math.floor(Math.random() * mockVideos.length)], |
| thumbnail: 'https://source.unsplash.com/random/300x200/?video' |
| }; |
| case '3d': |
| return { |
| embed: mock3DModels[Math.floor(Math.random() * mock3DModels.length)], |
| thumbnail: 'https://source.unsplash.com/random/300x300/?3d' |
| }; |
| default: |
| return null; |
| } |
| } |
| |
| // Adicionar resultado ao painel |
| function addResultToPanel(result) { |
| const resultsContainer = document.getElementById('resultsContainer'); |
| const emptyState = resultsContainer.querySelector('.text-center'); |
| |
| if (emptyState) { |
| resultsContainer.removeChild(emptyState); |
| } |
| |
| // Criar elemento de resultado |
| const resultElement = document.createElement('div'); |
| resultElement.className = 'result-item fade-in'; |
| |
| let contentHTML = ''; |
| |
| switch(result.type) { |
| case 'image': |
| contentHTML = ` |
| <h4 class="font-medium text-gray-800 mb-2">Imagem Gerada</h4> |
| <p class="text-sm text-gray-600 mb-2">${result.prompt}</p> |
| <img src="${result.content.images[0]}" alt="Imagem gerada" class="mb-2"> |
| <div class="result-item-actions"> |
| <button class="px-3 py-1 bg-purple-600 text-white rounded text-sm" onclick="downloadImage('${result.content.images[0]}', 'imagem-${result.id}')"> |
| <i class="fas fa-download mr-1"></i>Baixar |
| </button> |
| <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm" onclick="shareResult(${result.id})"> |
| <i class="fas fa-share-alt mr-1"></i>Compartilhar |
| </button> |
| </div> |
| `; |
| break; |
| case 'character': |
| contentHTML = ` |
| <h4 class="font-medium text-gray-800 mb-2">Personagem: ${result.content.name}</h4> |
| <p class="text-sm text-gray-600 mb-2">${result.prompt.substring(0, 100)}...</p> |
| <img src="${result.content.image}" alt="Personagem gerado" class="mb-2"> |
| <div class="result-item-actions"> |
| <button class="px-3 py-1 bg-purple-600 text-white rounded text-sm" onclick="downloadImage('${result.content.image}', 'personagem-${result.id}')"> |
| <i class="fas fa-download mr-1"></i>Baixar |
| </button> |
| <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm" onclick="shareResult(${result.id})"> |
| <i class="fas fa-share-alt mr-1"></i>Compartilhar |
| </button> |
| </div> |
| `; |
| break; |
| case 'video': |
| contentHTML = ` |
| <h4 class="font-medium text-gray-800 mb-2">Vídeo Gerado</h4> |
| <p class="text-sm text-gray-600 mb-2">${result.prompt}</p> |
| <img src="${result.content.thumbnail}" alt="Thumbnail do vídeo" class="mb-2"> |
| <div class="result-item-actions"> |
| <button class="px-3 py-1 bg-purple-600 text-white rounded text-sm"> |
| <i class="fas fa-download mr-1"></i>Baixar |
| </button> |
| <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm" onclick="shareResult(${result.id})"> |
| <i class="fas fa-share-alt mr-1"></i>Compartilhar |
| </button> |
| </div> |
| `; |
| break; |
| case '3d': |
| contentHTML = ` |
| <h4 class="font-medium text-gray-800 mb-2">Modelo 3D Gerado</h4> |
| <p class="text-sm text-gray-600 mb-2">${result.prompt}</p> |
| <img src="${result.content.thumbnail}" alt="Thumbnail do modelo 3D" class="mb-2"> |
| <div class="result-item-actions"> |
| <button class="px-3 py-1 bg-purple-600 text-white rounded text-sm"> |
| <i class="fas fa-download mr-1"></i>Baixar |
| </button> |
| <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm" onclick="shareResult(${result.id})"> |
| <i class="fas fa-share-alt mr-1"></i>Compartilhar |
| </button> |
| </div> |
| `; |
| break; |
| } |
| |
| resultElement.innerHTML = contentHTML; |
| resultsContainer.insertBefore(resultElement, resultsContainer.firstChild); |
| |
| // Atualizar contador |
| updateResultsBadge(); |
| } |
| |
| // Atualizar badge de resultados |
| function updateResultsBadge() { |
| const badge = document.getElementById('resultsBadge'); |
| const resultItems = document.querySelectorAll('.result-item'); |
| |
| if (resultItems.length > 0) { |
| badge.textContent = resultItems.length; |
| badge.classList.remove('hidden'); |
| } else { |
| badge.classList.add('hidden'); |
| } |
| } |
| |
| // Função para baixar imagem |
| function downloadImage(url, filename) { |
| const link = document.createElement('a'); |
| link.href = url; |
| link.download = filename || 'imagem-gerada'; |
| document.body.appendChild(link); |
| link.click(); |
| document.body.removeChild(link); |
| } |
| |
| // Função para compartilhar resultado |
| function shareResult(resultId) { |
| const result = results.find(r => r.id === resultId); |
| if (!result) return; |
| |
| if (navigator.share) { |
| navigator.share({ |
| title: 'Confira o que criei com Magic Creator!', |
| text: `Criei ${result.type === 'image' ? 'uma imagem' : result.type === 'video' ? 'um vídeo' : 'um modelo 3D'} com a descrição: ${result.prompt}`, |
| url: window.location.href |
| }).catch(err => { |
| console.log('Erro ao compartilhar:', err); |
| }); |
| } else { |
| // Fallback para navegadores que não suportam Web Share API |
| alert('Seu navegador não suporta a API de compartilhamento. Copie o link da página para compartilhar.'); |
| } |
| } |
| |
| // Event Listeners |
| document.addEventListener('DOMContentLoaded', function() { |
| // Alternar abas |
| const tabButtons = document.querySelectorAll('.tab-btn'); |
| tabButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| // Remover classe active de todas as abas |
| tabButtons.forEach(btn => { |
| btn.classList.remove('active', 'text-purple-600', 'border-purple-600'); |
| btn.classList.add('text-gray-500'); |
| }); |
| |
| // Adicionar classe active à aba clicada |
| this.classList.add('active', 'text-purple-600', 'border-purple-600'); |
| this.classList.remove('text-gray-500'); |
| |
| // Esconder todos os conteúdos de abas |
| document.querySelectorAll('.tab-content').forEach(content => { |
| content.classList.remove('active'); |
| }); |
| |
| // Mostrar conteúdo da aba selecionada |
| const tabId = this.getAttribute('data-tab'); |
| document.getElementById(tabId).classList.add('active'); |
| selectedTab = tabId; |
| }); |
| }); |
| |
| // Alternar métodos de entrada |
| const methodButtons = document.querySelectorAll('.input-method-btn'); |
| methodButtons.forEach(button => { |
| button.addEventListener('click', function() { |
| // Remover classe active de todos os botões |
| methodButtons.forEach(btn => { |
| btn.classList.remove('active', 'bg-purple-600', 'text-white'); |
| btn.classList.add('bg-gray-200', 'text-gray-700'); |
| }); |
| |
| // Adicionar classe active ao botão clicado |
| this.classList.add('active', 'bg-purple-600', 'text-white'); |
| this.classList.remove('bg-gray-200', 'text-gray-700'); |
| |
| // Esconder todos os conteúdos de métodos |
| document.querySelectorAll('.input-method-content').forEach(content => { |
| content.classList.remove('active'); |
| }); |
| |
| // Mostrar conteúdo do método selecionado |
| const method = this.getAttribute('data-method'); |
| document.getElementById(`${method}-input`).classList.add('active'); |
| selectedMethod = method; |
| }); |
| }); |
| |
| // Configurações avançadas |
| document.getElementById('toggle-advanced').addEventListener('click', function() { |
| const settings = document.getElementById('advanced-settings'); |
| const arrow = document.getElementById('advanced-arrow'); |
| |
| settings.classList.toggle('active'); |
| arrow.classList.toggle('fa-chevron-down'); |
| arrow.classList.toggle('fa-chevron-up'); |
| }); |
| |
| // Gerar imagem |
| document.getElementById('generate-image').addEventListener('click', async function() { |
| const prompt = document.getElementById('image-prompt').value; |
| if (!prompt) { |
| alert('Por favor, descreva a imagem que deseja gerar.'); |
| return; |
| } |
| |
| const style = document.getElementById('image-style').value; |
| const resolution = document.getElementById('image-resolution').value; |
| const detail = document.getElementById('image-detail').value; |
| |
| // Mostrar barra de progresso |
| const progress = document.getElementById('image-progress'); |
| progress.classList.remove('hidden'); |
| |
| // Gerar conteúdo |
| const result = await generateContent('image', prompt, { style, resolution, detail }); |
| |
| // Esconder barra de progresso |
| progress.classList.add('hidden'); |
| |
| // Adicionar resultado ao painel |
| results.push(result); |
| addResultToPanel(result); |
| |
| // Mostrar resultados na aba de imagens |
| const resultsContainer = document.getElementById('image-results'); |
| resultsContainer.innerHTML = ''; |
| |
| result.content.images.forEach((image, index) => { |
| const imgDiv = document.createElement('div'); |
| imgDiv.className = 'preview-image relative'; |
| if (index === 0) imgDiv.classList.add('selected'); |
| |
| imgDiv.innerHTML = ` |
| <img src="${image}" alt="Imagem gerada" class="w-full h-full object-cover rounded-lg"> |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm rounded-b-lg"> |
| <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"> |
| <i class="fas fa-download text-xs"></i> |
| </button> |
| </div> |
| `; |
| |
| imgDiv.addEventListener('click', function() { |
| document.querySelectorAll('.preview-image').forEach(img => img.classList.remove('selected')); |
| this.classList.add('selected'); |
| }); |
| |
| resultsContainer.appendChild(imgDiv); |
| }); |
| |
| // Mostrar botão de baixar todas |
| document.getElementById('save-all-images').classList.remove('hidden'); |
| }); |
| |
| // Baixar todas as imagens |
| document.getElementById('save-all-images').addEventListener('click', function() { |
| const selectedResult = results[results.length - 1]; // Último resultado |
| if (selectedResult && selectedResult.type === 'image') { |
| selectedResult.content.images.forEach((image, index) => { |
| setTimeout(() => { |
| downloadImage(image, `imagem-${selectedResult.id}-${index}`); |
| }, index * 500); |
| }); |
| } |
| }); |
| |
| // Upload de imagem |
| document.getElementById('image-upload').addEventListener('change', function(e) { |
| const file = e.target.files[0]; |
| if (file) { |
| const reader = new FileReader(); |
| reader.onload = function(event) { |
| const dropzone = document.getElementById('image-dropzone'); |
| dropzone.innerHTML = ` |
| <img src="${event.target.result}" alt="Imagem carregada" class="max-h-48 mx-auto mb-2"> |
| <p class="text-gray-600">${file.name}</p> |
| `; |
| dropzone.classList.add('active'); |
| }; |
| reader.readAsDataURL(file); |
| } |
| }); |
| |
| // Transformar imagem |
| document.getElementById('transform-image').addEventListener('click', async function() { |
| const fileInput = document.getElementById('image-upload'); |
| if (!fileInput.files || fileInput.files.length === 0) { |
| alert('Por favor, selecione uma imagem para transformar.'); |
| return; |
| } |
| |
| const prompt = document.getElementById('image-prompt').value || 'Transformar imagem'; |
| const style = document.getElementById('image-style').value; |
| const resolution = document.getElementById('image-resolution').value; |
| const detail = document.getElementById('image-detail').value; |
| |
| // Mostrar barra de progresso |
| const progress = document.getElementById('image-progress'); |
| progress.classList.remove('hidden'); |
| |
| // Gerar conteúdo |
| const result = await generateContent('image', prompt, { style, resolution, detail }); |
| |
| // Esconder barra de progresso |
| progress.classList.add('hidden'); |
| |
| // Adicionar resultado ao painel |
| results.push(result); |
| addResultToPanel(result); |
| |
| // Mostrar resultados na aba de imagens |
| const resultsContainer = document.getElementById('image-results'); |
| resultsContainer.innerHTML = ''; |
| |
| result.content.images.forEach((image, index) => { |
| const imgDiv = document.createElement('div'); |
| imgDiv.className = 'preview-image relative'; |
| if (index === 0) imgDiv.classList.add('selected'); |
| |
| imgDiv.innerHTML = ` |
| <img src="${image}" alt="Imagem gerada" class="w-full h-full object-cover rounded-lg"> |
| <div class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-white p-2 text-sm rounded-b-lg"> |
| <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"> |
| <i class="fas fa-download text-xs"></i> |
| </button> |
| </div> |
| `; |
| |
| imgDiv.addEventListener('click', function() { |
| document.querySelectorAll('.preview-image').forEach(img => img.classList.remove('selected')); |
| this.classList.add('selected'); |
| }); |
| |
| resultsContainer.appendChild(imgDiv); |
| }); |
| |
| // Mostrar botão de baixar todas |
| document.getElementById('save-all-images').classList.remove('hidden'); |
| }); |
| |
| // Gerar personagem a partir de texto |
| document.getElementById('generate-from-text').addEventListener('click', async function() { |
| const prompt = document.getElementById('character-description').value; |
| if (!prompt) { |
| alert('Por favor, descreva o personagem que deseja criar.'); |
| return; |
| } |
| |
| // Mostrar barra de progresso |
| const progress = document.getElementById('character-progress'); |
| progress.classList.remove('hidden'); |
| |
| // Gerar conteúdo |
| const result = await generateContent('character', prompt); |
| |
| // Esconder barra de progresso |
| progress.classList.add('hidden'); |
| |
| // Adicionar resultado ao painel |
| results.push(result); |
| addResultToPanel(result); |
| |
| // Adicionar à galeria de personagens |
| const gallery = document.getElementById('character-gallery'); |
| const characterDiv = document.createElement('div'); |
| characterDiv.className = 'character-card bg-gray-50 rounded-lg p-3'; |
| |
| characterDiv.innerHTML = ` |
| <img src="${result.content.image}" alt="Personagem" class="character-preview"> |
| <div class="mt-2"> |
| <h5 class="font-medium text-sm truncate">${result.content.name}</h5> |
| <p class="text-gray-500 text-xs">Criado em ${new Date().toLocaleDateString()}</p> |
| </div> |
| <div class="character-actions"> |
| <button class="flex-1 px-2 py-1 bg-purple-600 text-white rounded text-xs hover:bg-purple-700"> |
| <i class="fas fa-magic mr-1"></i>Variar |
| </button> |
| <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}')"> |
| <i class="fas fa-download mr-1"></i>Baixar |
| </button> |
| </div> |
| <div class="remove-character"> |
| <i class="fas fa-times text-xs"></i> |
| </div> |
| `; |
| |
| gallery.insertBefore(characterDiv, gallery.lastElementChild); |
| }); |
| |
| // Upload de imagem para personagem |
| document.getElementById('character-upload').addEventListener('change', function(e) { |
| const file = e.target.files[0]; |
| if (file) { |
| const reader = new FileReader(); |
| reader.onload = function(event) { |
| const dropzone = document.getElementById('character-dropzone'); |
| dropzone.innerHTML = ` |
| <img src="${event.target.result}" alt="Imagem carregada" class="max-h-48 mx-auto mb-2"> |
| <p class="text-gray-600 text-sm">${file.name}</p> |
| `; |
| dropzone.classList.add('active'); |
| }; |
| reader.readAsDataURL(file); |
| } |
| }); |
| |
| // Gerar personagem a partir de imagem |
| document.getElementById('generate-from-image').addEventListener('click', async function() { |
| const fileInput = document.getElementById('character-upload'); |
| if (!fileInput.files || fileInput.files.length === 0) { |
| alert('Por favor, selecione uma imagem para criar o personagem.'); |
| return; |
| } |
| |
| const prompt = document.getElementById('character-description').value || 'Personagem baseado em imagem'; |
| |
| // Mostrar barra de progresso |
| const progress = document.getElementById('character-progress'); |
| progress.classList.remove('hidden'); |
| |
| // Gerar conteúdo |
| const result = await generateContent('character', prompt); |
| |
| // Esconder barra de progresso |
| progress.classList.add('hidden'); |
| |
| // Adicionar resultado ao painel |
| results.push(result); |
| addResultToPanel(result); |
| |
| // Adicionar à galeria de personagens |
| const gallery = document.getElementById('character-gallery'); |
| const characterDiv = document.createElement('div'); |
| characterDiv.className = 'character-card bg-gray-50 rounded-lg p-3'; |
| |
| characterDiv.innerHTML = ` |
| <img src="${result.content.image}" alt="Personagem" class="character-preview"> |
| <div class="mt-2"> |
| <h5 class="font-medium text-sm truncate">${result.content.name}</h5> |
| <p class="text-gray-500 text-xs">Criado em ${new Date().toLocaleDateString()}</p> |
| </div> |
| <div class="character-actions"> |
| <button class="flex-1 px-2 py-1 bg-purple-600 text-white rounded text-xs hover:bg-purple-700"> |
| <i class="fas fa-magic mr-1"></i>Variar |
| </button> |
| <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}')"> |
| <i class="fas fa-download mr-1"></i>Baixar |
| </button> |
| </div> |
| <div class="remove-character"> |
| <i class="fas fa-times text-xs"></i> |
| </div> |
| `; |
| |
| gallery.insertBefore(characterDiv, gallery.lastElementChild); |
| }); |
| |
| // Gerar vídeo a partir de texto |
| document.getElementById('generate-video-from-text').addEventListener('click', async function() { |
| const prompt = document.getElementById('video-prompt').value; |
| if (!prompt) { |
| alert('Por favor, descreva o vídeo que deseja criar.'); |
| return; |
| } |
| |
| // Mostrar barra de progresso |
| const progress = document.getElementById('video-progress'); |
| progress.classList.remove('hidden'); |
| |
| // Gerar conteúdo |
| const result = await generateContent('video', prompt); |
| |
| // Esconder barra de progresso |
| progress.classList.add('hidden'); |
| |
| // Adicionar resultado ao painel |
| results.push(result); |
| addResultToPanel(result); |
| |
| // Mostrar pré-visualização do vídeo |
| const preview = document.getElementById('video-preview'); |
| preview.innerHTML = ` |
| <div class="aspect-w-16 aspect-h-9 mb-4"> |
| <iframe src="${result.content.video}" frameborder="0" allowfullscreen class="w-full h-64"></iframe> |
| </div> |
| <h4 class="text-xl font-medium text-gray-700 mb-2">Vídeo Gerado</h4> |
| <p class="text-gray-600">${prompt.substring(0, 100)}...</p> |
| `; |
| }); |
| |
| // Upload de vídeo |
| document.getElementById('video-upload').addEventListener('change', function(e) { |
| const files = e.target.files; |
| if (!files || files.length === 0) return; |
| |
| const dropzone = document.getElementById('video-dropzone'); |
| dropzone.innerHTML = ''; |
| |
| Array.from(files).forEach((file, index) => { |
| if (index >= 3) return; // Mostrar apenas 3 imagens |
| |
| const reader = new FileReader(); |
| reader.onload = function(event) { |
| const img = document.createElement('img'); |
| img.src = event.target.result; |
| img.className = 'inline-block w-16 h-16 object-cover mr-2 mb-2'; |
| img.alt = file.name; |
| dropzone.appendChild(img); |
| }; |
| reader.readAsDataURL(file); |
| }); |
| |
| if (files.length > 3) { |
| const moreText = document.createElement('p'); |
| moreText.className = 'text-gray-600 text-sm'; |
| moreText.textContent = `+${files.length - 3} mais...`; |
| dropzone.appendChild(moreText); |
| } |
| |
| dropzone.classList.add('active'); |
| }); |
| |
| // Gerar vídeo a partir de imagens |
| document.getElementById('generate-video-from-images').addEventListener('click', async function() { |
| const fileInput = document.getElementById('video-upload'); |
| if (!fileInput.files || fileInput.files.length === 0) { |
| alert('Por favor, selecione pelo menos |
| </html> |
