Spaces:
Running
Running
| <html lang="pt-BR" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CapCutSync Pro - Pipeline de Áudio Inteligente</title> | |
| <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236366f1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' y1='19' x2='12' y2='22'/%3E%3C/svg%3E"> | |
| <link rel="stylesheet" href="style.css"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 50: '#eef2ff', | |
| 100: '#e0e7ff', | |
| 200: '#c7d2fe', | |
| 300: '#a5b4fc', | |
| 400: '#818cf8', | |
| 500: '#6366f1', | |
| 600: '#4f46e5', | |
| 700: '#4338ca', | |
| 800: '#3730a3', | |
| 900: '#312e81', | |
| 950: '#1e1b4b', | |
| }, | |
| secondary: { | |
| 50: '#fffbeb', | |
| 100: '#fef3c7', | |
| 200: '#fde68a', | |
| 300: '#fcd34d', | |
| 400: '#fbbf24', | |
| 500: '#f59e0b', | |
| 600: '#d97706', | |
| 700: '#b45309', | |
| 800: '#92400e', | |
| 900: '#78350f', | |
| 950: '#451a03', | |
| } | |
| }, | |
| animation: { | |
| 'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite', | |
| 'wave': 'wave 1.5s ease-in-out infinite', | |
| }, | |
| keyframes: { | |
| wave: { | |
| '0%, 100%': { transform: 'scaleY(1)' }, | |
| '50%': { transform: 'scaleY(1.5)' }, | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body class="bg-slate-950 text-slate-100 font-sans antialiased overflow-x-hidden"> | |
| <app-navbar></app-navbar> | |
| <div class="flex h-screen pt-16"> | |
| <app-sidebar id="sidebar" class="hidden md:block"></app-sidebar> | |
| <main class="flex-1 overflow-y-auto bg-slate-950/50 backdrop-blur-sm p-4 md:p-6 lg:p-8"> | |
| <div class="max-w-7xl mx-auto space-y-6"> | |
| <!-- Header Stats --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-8"> | |
| <stat-card icon="file-audio" label="Áudios Processados" value="0" id="stat-audios"></stat-card> | |
| <stat-card icon="clock" label="Tempo Total" value="00:00" id="stat-time"></stat-card> | |
| <stat-card icon="activity" label="Status" value="Ocioso" color="secondary" id="stat-status"></stat-card> | |
| <stat-card icon="cpu" label="Pipeline" value="Pronto" id="stat-pipeline"></stat-card> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Left Column: Upload & Files --> | |
| <div class="lg:col-span-1 space-y-6"> | |
| <upload-zone></upload-zone> | |
| <!-- JSON Upload Zone --> | |
| <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl backdrop-blur-md"> | |
| <h3 class="text-lg font-semibold text-slate-200 mb-4 flex items-center gap-2"> | |
| <i data-feather="code" class="w-5 h-5 text-secondary-400"></i> | |
| Upload JSON de Timestamps | |
| </h3> | |
| <div id="json-upload-zone" class="border-2 border-dashed border-slate-700 rounded-xl p-4 text-center transition-all duration-300 bg-slate-800/50 hover:border-secondary-500/50 hover:bg-secondary-500/5 cursor-pointer"> | |
| <input type="file" id="json-input" accept=".json" class="hidden"> | |
| <i data-feather="upload" class="w-6 h-6 text-slate-500 mx-auto mb-2"></i> | |
| <p class="text-sm text-slate-400">Arraste ou clique para enviar JSON</p> | |
| <p class="text-xs text-slate-600 mt-1">Formato: array com text, start_time, end_time</p> | |
| </div> | |
| <div id="json-status" class="mt-3 hidden"> | |
| <div class="flex items-center gap-2 text-sm text-emerald-400"> | |
| <i data-feather="check-circle" class="w-4 h-4"></i> | |
| <span id="json-filename">carregado.json</span> | |
| </div> | |
| <p class="text-xs text-slate-500 mt-1" id="json-words-count">0 palavras</p> | |
| </div> | |
| </div> | |
| <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl backdrop-blur-md"> | |
| <h3 class="text-lg font-semibold text-slate-200 mb-4 flex items-center gap-2"> | |
| <i data-feather="folder" class="w-5 h-5 text-primary-400"></i> | |
| Arquivos na Fila | |
| </h3> | |
| <div id="file-queue" class="space-y-2 max-h-64 overflow-y-auto pr-2"> | |
| <p class="text-slate-500 text-sm italic text-center py-8">Nenhum arquivo na fila</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Center Column: Configuration --> | |
| <div class="lg:col-span-2 space-y-6"> | |
| <!-- Tabs --> | |
| <div class="bg-slate-900/80 border border-slate-800 rounded-2xl overflow-hidden shadow-xl backdrop-blur-md"> | |
| <div class="flex border-b border-slate-800"> | |
| <button class="tab-btn flex-1 py-4 px-6 text-sm font-medium text-primary-400 border-b-2 border-primary-500 bg-primary-500/10" data-tab="silence"> | |
| Silêncio & Áudio | |
| </button> | |
| <button class="tab-btn flex-1 py-4 px-6 text-sm font-medium text-slate-400 hover:text-slate-200 transition-colors" data-tab="text"> | |
| Texto & Blocos | |
| </button> | |
| <button class="tab-btn flex-1 py-4 px-6 text-sm font-medium text-slate-400 hover:text-slate-200 transition-colors" data-tab="srt"> | |
| SRT & Alinhamento | |
| </button> | |
| </div> | |
| <!-- Tab Content: Silence --> | |
| <div id="tab-silence" class="tab-content p-6 space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300">Threshold de Silêncio (dB)</label> | |
| <div class="flex items-center gap-3"> | |
| <input type="range" id="silence-threshold" min="-80" max="-40" value="-70" | |
| class="flex-1 h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-primary-500"> | |
| <span class="text-sm font-mono text-primary-400 w-12 text-right" id="val-threshold">-70</span> | |
| </div> | |
| <p class="text-xs text-slate-500">Valores mais altos = mais sensível</p> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300">Min. Silêncio (ms)</label> | |
| <div class="flex items-center gap-3"> | |
| <input type="range" id="min-silence" min="50" max="500" value="150" | |
| class="flex-1 h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-primary-500"> | |
| <span class="text-sm font-mono text-primary-400 w-12 text-right" id="val-silence">150</span> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300">Overlap Base (ms)</label> | |
| <div class="flex items-center gap-3"> | |
| <input type="range" id="base-overlap" min="50" max="300" value="190" | |
| class="flex-1 h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-primary-500"> | |
| <span class="text-sm font-mono text-primary-400 w-12 text-right" id="val-overlap">190</span> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300">Keep Silence (ms)</label> | |
| <div class="flex items-center gap-3"> | |
| <input type="range" id="keep-silence" min="0" max="200" value="70" | |
| class="flex-1 h-2 bg-slate-700 rounded-lg appearance-none cursor-pointer accent-primary-500"> | |
| <span class="text-sm font-mono text-primary-400 w-12 text-right" id="val-keep">70</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex items-center gap-4 pt-4 border-t border-slate-800"> | |
| <label class="flex items-center gap-2 cursor-pointer"> | |
| <input type="checkbox" id="normalize-lufs" checked class="w-4 h-4 rounded border-slate-600 text-primary-500 focus:ring-primary-500 bg-slate-800"> | |
| <span class="text-sm text-slate-300">Normalizar LUFS</span> | |
| </label> | |
| <label class="flex items-center gap-2 cursor-pointer"> | |
| <input type="checkbox" id="use-vad" checked class="w-4 h-4 rounded border-slate-600 text-primary-500 focus:ring-primary-500 bg-slate-800"> | |
| <span class="text-sm text-slate-300">Detecção VAD</span> | |
| </label> | |
| </div> | |
| </div> | |
| <!-- Tab Content: Text --> | |
| <div id="tab-text" class="tab-content hidden p-6 space-y-6"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300">Máx. Caracteres/Bloco</label> | |
| <input type="number" id="max-block-len" value="14" | |
| class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-slate-200 focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none"> | |
| <p class="text-xs text-slate-500">Limite duro (sem espaços)</p> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300">Público Alvo</label> | |
| <select id="publico" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-slate-200 focus:ring-2 focus:ring-primary-500 outline-none"> | |
| <option value="M">Padrão (M)</option> | |
| <option value="H">Homens (H - uppercase)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300">Roteiro/Transcrição</label> | |
| <textarea id="script-text" rows="6" placeholder="Cole aqui o roteiro para divisão em blocos..." | |
| class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-3 text-slate-200 placeholder-slate-500 focus:ring-2 focus:ring-primary-500 focus:border-transparent outline-none resize-none font-mono text-sm"></textarea> | |
| <div class="flex justify-between text-xs text-slate-500"> | |
| <span>Regras automáticas: E/QUE iniciam blocos</span> | |
| <span id="char-count">0 caracteres</span> | |
| </div> | |
| </div> | |
| <button id="preview-blocks" class="w-full py-2 px-4 bg-slate-800 hover:bg-slate-700 text-slate-300 rounded-lg transition-colors text-sm font-medium flex items-center justify-center gap-2"> | |
| <i data-feather="grid" class="w-4 h-4"></i> | |
| Pré-visualizar Blocos | |
| </button> | |
| <div id="blocks-preview" class="hidden space-y-2 max-h-48 overflow-y-auto p-3 bg-slate-950 rounded-lg border border-slate-800"> | |
| <!-- Blocks will appear here --> | |
| </div> | |
| </div> | |
| <!-- Tab Content: SRT --> | |
| <div id="tab-srt" class="tab-content hidden p-6 space-y-6"> | |
| <div class="flex items-center gap-3 p-3 bg-secondary-900/20 border border-secondary-700/30 rounded-lg mb-4"> | |
| <input type="checkbox" id="use-json-timestamps" class="w-4 h-4 rounded border-slate-600 text-secondary-500 focus:ring-secondary-500 bg-slate-700"> | |
| <div> | |
| <label for="use-json-timestamps" class="text-sm font-medium text-slate-200 cursor-pointer">Usar JSON de Timestamps carregado</label> | |
| <p class="text-xs text-slate-500">Pula a transcrição e usa os timestamps do JSON enviado</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300">Modelo Whisper</label> | |
| <select id="whisper-model" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-slate-200 outline-none" ${''}> | |
| <option value="small">Small (balanceado)</option> | |
| <option value="medium">Medium (preciso)</option> | |
| <option value="tiny">Tiny (rápido)</option> | |
| </select> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300">Calibração CapCut (ms)</label> | |
| <input type="number" id="capcut-advance" value="70" | |
| class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-slate-200 outline-none"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300">Preroll (ms)</label> | |
| <input type="number" id="preroll" value="40" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-slate-200 outline-none"> | |
| </div> | |
| <div class="space-y-2"> | |
| <label class="text-sm font-medium text-slate-300">Postroll (ms)</label> | |
| <input type="number" id="postroll" value="25" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-slate-200 outline-none"> | |
| </div> | |
| </div> | |
| <!-- Export Format Selection --> | |
| <div class="space-y-3 pt-4 border-t border-slate-800"> | |
| <label class="text-sm font-medium text-slate-300 flex items-center gap-2"> | |
| <i data-feather="download" class="w-4 h-4 text-secondary-400"></i> | |
| Formato de Exportação | |
| </label> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-3"> | |
| <label class="flex items-center gap-3 p-3 bg-slate-800 rounded-lg border border-slate-700 hover:border-primary-500/50 cursor-pointer transition-all"> | |
| <input type="checkbox" id="export-srt" checked class="w-4 h-4 rounded border-slate-600 text-primary-500 focus:ring-primary-500 bg-slate-700"> | |
| <div> | |
| <span class="text-sm font-medium text-slate-200">SRT</span> | |
| <p class="text-xs text-slate-500">Legendas padrão</p> | |
| </div> | |
| </label> | |
| <label class="flex items-center gap-3 p-3 bg-slate-800 rounded-lg border border-slate-700 hover:border-secondary-500/50 cursor-pointer transition-all"> | |
| <input type="checkbox" id="export-json" checked class="w-4 h-4 rounded border-slate-600 text-secondary-500 focus:ring-secondary-500 bg-slate-700"> | |
| <div> | |
| <span class="text-sm font-medium text-slate-200">JSON</span> | |
| <p class="text-xs text-slate-500">Timestamps palavra-a-palavra</p> | |
| </div> | |
| </label> | |
| <label class="flex items-center gap-3 p-3 bg-slate-800 rounded-lg border border-slate-700 hover:border-emerald-500/50 cursor-pointer transition-all"> | |
| <input type="checkbox" id="export-blocks" checked class="w-4 h-4 rounded border-slate-600 text-emerald-500 focus:ring-emerald-500 bg-slate-700"> | |
| <div> | |
| <span class="text-sm font-medium text-slate-200">Blocos</span> | |
| <p class="text-xs text-slate-500">Texto separado</p> | |
| </div> | |
| </label> | |
| </div> | |
| </div> | |
| <div class="bg-primary-900/20 border border-primary-700/30 rounded-lg p-4"> | |
| <h4 class="text-sm font-medium text-primary-300 mb-2 flex items-center gap-2"> | |
| <i data-feather="info" class="w-4 h-4"></i> | |
| Alinhamento Inteligente | |
| </h4> | |
| <p class="text-xs text-primary-200/70 leading-relaxed"> | |
| Usa âncoras de primeira e última palavra forte para alinnar blocos do roteiro com timestamps do Whisper. | |
| Similaridade fonética + sufixo para matching tolerante. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Visualizer --> | |
| <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-6 shadow-xl backdrop-blur-md"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="text-lg font-semibold text-slate-200 flex items-center gap-2"> | |
| <i data-feather="bar-chart-2" class="w-5 h-5 text-secondary-400"></i> | |
| Visualizador de Forma de Onda | |
| </h3> | |
| <div class="flex gap-2"> | |
| <button id="play-preview" class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 transition-colors" title="Play/Pause"> | |
| <i data-feather="play" class="w-4 h-4"></i> | |
| </button> | |
| <button id="reset-view" class="p-2 rounded-lg bg-slate-800 hover:bg-slate-700 text-slate-300 transition-colors" title="Resetar visualização"> | |
| <i data-feather="maximize" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <canvas id="waveform" class="w-full h-32 bg-slate-950 rounded-lg border border-slate-800"></canvas> | |
| <div class="flex justify-between mt-2 text-xs text-slate-500 font-mono"> | |
| <span>00:00:00</span> | |
| <span id="total-duration">00:00:00</span> | |
| </div> | |
| <p class="text-xs text-slate-600 mt-2 text-center">Clique no waveform para seek • Arquivos na fila são clicáveis para visualização</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Action Bar --> | |
| <div class="fixed bottom-6 left-1/2 transform -translate-x-1/2 z-40"> | |
| <div class="bg-slate-900/90 backdrop-blur-md border border-slate-700 rounded-full px-6 py-3 shadow-2xl flex items-center gap-4"> | |
| <button id="btn-clear" class="px-4 py-2 text-sm text-slate-400 hover:text-slate-200 transition-colors"> | |
| Limpar | |
| </button> | |
| <div class="w-px h-6 bg-slate-700"></div> | |
| <button id="btn-process" class="px-6 py-2 bg-gradient-to-r from-primary-600 to-primary-500 hover:from-primary-500 hover:to-primary-400 text-white rounded-full text-sm font-semibold shadow-lg shadow-primary-500/25 transition-all transform hover:scale-105 flex items-center gap-2"> | |
| <i data-feather="zap" class="w-4 h-4"></i> | |
| Processar Pipeline (Ctrl+Enter) | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Logs Panel --> | |
| <div class="bg-black/40 border border-slate-800 rounded-2xl p-4 font-mono text-xs h-48 overflow-hidden flex flex-col"> | |
| <div class="flex items-center justify-between mb-2 pb-2 border-b border-slate-800"> | |
| <span class="text-slate-400 uppercase tracking-wider text-xs font-bold">Console de Logs</span> | |
| <button id="clear-logs" class="text-slate-500 hover:text-slate-300"> | |
| <i data-feather="trash-2" class="w-3 h-3"></i> | |
| </button> | |
| </div> | |
| <div id="log-container" class="flex-1 overflow-y-auto space-y-1 text-slate-300"> | |
| <div class="text-slate-500">[SYSTEM] CapCutSync Pro v2.0 inicializado...</div> | |
| <div class="text-slate-500">[SYSTEM] Aguardando arquivos de áudio...</div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <!-- Web Components --> | |
| <script src="components/navbar.js"></script> | |
| <script src="components/sidebar.js"></script> | |
| <script src="components/upload-zone.js"></script> | |
| <script src="components/stat-card.js"></script> | |
| <!-- Main Logic --> | |
| <script src="script.js"></script> | |
| <script>feather.replace();</script> | |
| <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> | |
| </body> | |
| </html> |