| <!DOCTYPE html> |
| <html lang="pt-BR"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Editor de Vídeo Profissional - Geração Final com Áudio</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| </head> |
| <body> |
| <header class="header"> |
| <div class="header-content"> |
| <div class="logo"> |
| <i data-feather="video"></i> |
| Editor de Vídeo Profissional |
| </div> |
| <div class="precision-indicator"> |
| <i data-feather="crosshair"></i> |
| Geração Final com Áudio |
| </div> |
| </div> |
| </header> |
|
|
| <main class="main-container"> |
| <div class="upload-grid"> |
| <div class="upload-card"> |
| <h2 class="section-title"> |
| <i data-feather="file-text"></i> |
| Roteiro SRT |
| <span class="precision-badge">Obrigatório</span> |
| </h2> |
| <div class="upload-zone" id="srtZone"> |
| <i data-feather="file-text upload-icon"></i> |
| <div class="upload-text">Arraste o arquivo SRT aqui</div> |
| <div class="upload-subtext">ou clique para selecionar</div> |
| </div> |
| <div class="file-list" id="srtFiles"></div> |
| <div class="srt-preview" id="srtPreview" style="display: none;"> |
| <h4> |
| <i data-feather="eye"></i> Pré-visualização SRT: |
| </h4> |
| <div id="srtPreviewContent"></div> |
| </div> |
| </div> |
|
|
| <div class="upload-card audio-card"> |
| <h2 class="section-title"> |
| <i data-feather="mic"></i> |
| Áudio Original |
| <span class="audio-badge">Obrigatório</span> |
| </h2> |
| <div class="upload-zone audio-zone" id="audioZone"> |
| <i data-feather="mic upload-icon audio-icon"></i> |
| <div class="upload-text">Arraste o áudio aqui</div> |
| <div class="upload-subtext">MP3, WAV, M4A • Transcrição Whisper</div> |
| </div> |
| <div class="file-list" id="audioFiles"></div> |
| </div> |
|
|
| <div class="upload-card"> |
| <h2 class="section-title"> |
| <i data-feather="film"></i> |
| Takes Brutos |
| <span class="precision-badge">Múltiplos</span> |
| </h2> |
| <div class="upload-zone" id="videoZone"> |
| <i data-feather="film upload-icon"></i> |
| <div class="upload-text">Arraste os vídeos aqui</div> |
| <div class="upload-subtext">MP4, MOV, WEBM • Análise Frame-by-Frame</div> |
| </div> |
| <div class="file-list" id="videoFiles"></div> |
| </div> |
|
|
| <div class="upload-card audio-card"> |
| <h2 class="section-title"> |
| <i data-feather="brain"></i> |
| Whisper Large |
| <span class="audio-badge">API</span> |
| </h2> |
| <div class="upload-zone audio-zone" id="whisperZone" onclick="editor.configureWhisper()"> |
| <i data-feather="brain upload-icon audio-icon"></i> |
| <div class="upload-text">Configurar Whisper API</div> |
| <div class="upload-subtext">Chave necessária para transcrição</div> |
| </div> |
| <div id="whisperConfig"></div> |
| </div> |
| </div> |
|
|
| <div class="control-panel"> |
| <div class="info-banner audio-banner"> |
| <h3><i data-feather="mic"></i> Geração Integrada com Áudio</h3> |
| <p> |
| <strong>Integração completa:</strong> O sistema agora processa o áudio original, utiliza Whisper Large para |
| transcrição automática e precisa, sincroniza com o roteiro SRT, e gera o vídeo final com áudio perfeitamente alinhado. |
| Todo o processo é automatizado com validação de qualidade e ajustes finos manuais quando necessário. |
| </p> |
| </div> |
|
|
| <div class="info-banner"> |
| <h3><i data-feather="lightbulb"></i> Edição Flexível</h3> |
| <p> |
| <strong>Um ponto crucial sobre a edição:</strong> não precisamos necessariamente de um take para cada bloco. |
| Podemos usar um take que cubra vários blocos, desde que faça sentido com o que o narrador está dizendo. |
| O timing deve ser preciso e a escolha do take deve considerar o contexto, permitindo juntar blocos quando a edição ficar mais natural. |
| </p> |
| </div> |
|
|
| <h2 class="section-title"> |
| <i data-feather="users"></i> |
| Público-Alvo |
| <span class="precision-badge">35+ Anos</span> |
| </h2> |
| <div class="audience-selector"> |
| <div class="audience-option" data-audience="female35"> |
| <div class="audience-title"> |
| <i data-feather="female"></i> |
| Mulheres 35+ |
| </div> |
| <div class="audience-desc"> |
| Elegância, sofisticação, conforto, harmonia, cuidado com detalhes |
| </div> |
| </div> |
| <div class="audience-option" data-audience="male35"> |
| <div class="audience-title"> |
| <i data-feather="male"></i> |
| Homens 35+ |
| </div> |
| <div class="audience-desc"> |
| Resistência, funcionalidade, engenharia, durabilidade, estilo sóbrio |
| </div> |
| </div> |
| </div> |
| <button class="analyze-btn" id="analyzeBtn" disabled> |
| <i data-feather="brain"></i> |
| INICIAR ANÁLISE COMPLETA |
| </button> |
| </div> |
|
|
| <div class="transcription-status" id="transcriptionStatus"> |
| <h3><i data-feather="brain"></i> Processando Transcrição Whisper</h3> |
| <div class="analysis-progress"> |
| <div class="progress-bar"> |
| <div class="progress-fill" id="transcriptionProgress" style="width: 0%"></div> |
| </div> |
| <div id="transcriptionText">0% - Iniciando transcrição...</div> |
| </div> |
| </div> |
|
|
| <div class="loading-section" id="loadingSection"> |
| <h2 class="section-title"> |
| <i data-feather="settings"></i> |
| Análise Completa com Integração de Áudio |
| </h2> |
| <div class="analysis-progress"> |
| <div class="progress-bar"> |
| <div class="progress-fill" id="progressFill" style="width: 0%"></div> |
| </div> |
| <div id="progressText">0% - Iniciando análise...</div> |
| </div> |
| <div class="analysis-steps"> |
| <div class="step-card" id="step1"> |
| <i data-feather="mic"></i> |
| <div>1. Transcrição Whisper</div> |
| </div> |
| <div class="step-card" id="step2"> |
| <i data-feather="refresh-cw"></i> |
| <div>2. Sincronização Áudio-SRT</div> |
| </div> |
| <div class="step-card" id="step3"> |
| <i data-feather="film"></i> |
| <div>3. Análise de Takes</div> |
| </div> |
| <div class="step-card" id="step4"> |
| <i data-feather="search"></i> |
| <div>4. Análise Visual</div> |
| </div> |
| <div class="step-card" id="step5"> |
| <i data-feather="layers"></i> |
| <div>5. Agrupamento Inteligente</div> |
| </div> |
| <div class="step-card" id="step6"> |
| <i data-feather="link"></i> |
| <div>6. Otimização de Fluxo</div> |
| </div> |
| <div class="step-card" id="step7"> |
| <i data-feather="clock"></i> |
| <div>7. Sincronização Precisa</div> |
| </div> |
| <div class="step-card" id="step8"> |
| <i data-feather="heart"></i> |
| <div>8. Validação Emocional</div> |
| </div> |
| <div class="step-card" id="step9"> |
| <i data-feather="scissors"></i> |
| <div>9. Montagem com Áudio</div> |
| </div> |
| <div class="step-card" id="step10"> |
| <i data-feather="download"></i> |
| <div>10. Entrega Final</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="results-section" id="resultsSection"> |
| <h2 class="section-title"> |
| <i data-feather="check-circle"></i> |
| Análise Concluída - Vídeo Final Gerado |
| </h2> |
| |
| <div class="whisper-status"> |
| <h3><i data-feather="brain"></i> Métricas da Transcrição Whisper</h3> |
| <div class="whisper-metrics" id="whisperMetrics"> |
| <div class="whisper-metric"> |
| <div class="whisper-metric-value" id="whisperAccuracy">0%</div> |
| <div class="whisper-metric-label">Precisão</div> |
| </div> |
| <div class="whisper-metric"> |
| <div class="whisper-metric-value" id="whisperWords">0</div> |
| <div class="whisper-metric-label">Palavras</div> |
| </div> |
| <div class="whisper-metric"> |
| <div class="whisper-metric-value" id="whisperDuration">0s</div> |
| <div class="whisper-metric-label">Duração</div> |
| </div> |
| <div class="whisper-metric"> |
| <div class="whisper-metric-value" id="whisperConfidence">0%</div> |
| <div class="whisper-metric-label">Confiança</div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="stats-grid"> |
| <div class="stat-card"> |
| <div class="stat-number" id="totalBlocks">0</div> |
| <div class="stat-label">Blocos SRT</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" id="totalTakes">0</div> |
| <div class="stat-label">Takes Utilizados</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" id="groupedBlocks">0</div> |
| <div class="stat-label">Blocos Agrupados</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" id="flowScore">0%</div> |
| <div class="stat-label">Fluidez</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" id="syncAccuracy">100%</div> |
| <div class="stat-label">Sincronia Áudio</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" id="efficiency">0%</div> |
| <div class="stat-label">Eficiência</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" id="audioQuality">0%</div> |
| <div class="stat-label">Qualidade Áudio</div> |
| </div> |
| <div class="stat-card"> |
| <div class="stat-number" id="finalDuration">0s</div> |
| <div class="stat-label">Duração Final</div> |
| </div> |
| </div> |
|
|
| <div class="timeline-container"> |
| <div class="timeline-header"> |
| <h3>Timeline Final com Áudio Sincronizado</h3> |
| <div> |
| <span class="precision-indicator-small"> |
| <i data-feather="crosshair"></i> |
| ±0.2s |
| </span> |
| <span class="flow-indicator"> |
| <i data-feather="droplet"></i> |
| Fluxo Otimizado |
| </span> |
| <span class="audio-indicator-small"> |
| <i data-feather="volume-2"></i> |
| Áudio Integrado |
| </span> |
| </div> |
| </div> |
| <div class="timeline-ruler" id="timelineRuler"></div> |
| <div class="timeline-takes" id="timelineTakes"></div> |
| </div> |
|
|
| <div class="blocks-container" id="blocksContainer"></div> |
|
|
| <div class="export-section"> |
| <h3 class="section-title"> |
| <i data-feather="download"></i> |
| Exportação Completa com Áudio |
| </h3> |
| <div class="export-buttons"> |
| <button class="export-btn" onclick="editor.previewFinalVideo()"> |
| <i data-feather="play"></i> |
| Preview Completo |
| </button> |
| <button class="export-btn audio-export" onclick="editor.exportFinalVideo()"> |
| <i data-feather="video"></i> |
| Vídeo Final (.mp4) |
| </button> |
| <button class="export-btn audio-export" onclick="editor.exportAudioOnly()"> |
| <i data-feather="music"></i> |
| Áudio Processado (.mp3) |
| </button> |
| <button class="export-btn" onclick="exportReport()"> |
| <i data-feather="file-text"></i> |
| Relatório Completo |
| </button> |
| <button class="export-btn" onclick="exportTranscription()"> |
| <i data-feather="message-square"></i> |
| Transcrição Whisper |
| </button> |
| <button class="export-btn" onclick="exportTimeline()"> |
| <i data-feather="clock"></i> |
| Timeline Detalhada |
| </button> |
| <button class="export-btn" onclick="exportProjectFile()"> |
| <i data-feather="folder"></i> |
| Projeto Completo |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <div class="video-preview-modal" id="videoPreviewModal"> |
| <div class="preview-content"> |
| <div class="preview-header"> |
| <h2><i data-feather="play-circle"></i> Preview do Vídeo Final Completo</h2> |
| <button onclick="editor.closePreview()"> |
| <i data-feather="x"></i> |
| </button> |
| </div> |
| <div class="preview-video-container"> |
| <video id="previewFinalVideo" class="preview-video" controls></video> |
| </div> |
| <div class="preview-controls"> |
| <button class="export-btn audio-export" onclick="editor.exportFinalVideo()"> |
| <i data-feather="download"></i> |
| Baixar Vídeo Completo |
| </button> |
| <button class="export-btn audio-export" onclick="editor.exportAudioOnly()"> |
| <i data-feather="headphones"></i> |
| Baixar Áudio Separado |
| </button> |
| <button class="export-btn" onclick="exportProjectFile()"> |
| <i data-feather="save"></i> |
| Salvar Projeto |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="export-progress" id="exportProgress"> |
| <h3><i data-feather="settings"></i> Processando Exportação</h3> |
| <div class="analysis-progress" style="margin: 1.5rem 0;"> |
| <div class="progress-bar"> |
| <div class="progress-fill" id="exportProgressFill" style="width: 0%"></div> |
| </div> |
| <div id="exportProgressText">0% - Iniciando...</div> |
| </div> |
| </div> |
|
|
| <script src="script.js"></script> |
| <script>feather.replace();</script> |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| </body> |
| </html> |
