Deve respeitar esses criterios, === PROJETO ESTRUTURADO PARA ANÁLISE ===

Total de arquivos: 10
Data de geração: 03/02/2026, 16:38:28

--- CONTEÚDO DOS ARQUIVOS ---

Arquivo: modules/silence.py
"from pydub import AudioSegment
from modules.utils import ensure_directory_exists
from modules.conversion import load_audio

def detect_leading_silence_advanced(audio_segment, silence_threshold=-70.0, chunk_size=1):
"""
Detecta o silêncio no início do áudio.

:param audio_segment: AudioSegment a ser analisado
:param silence_threshold: Limiar em dBFS para considerar silêncio
:param chunk_size: Tamanho do chunk para análise em ms
:return: Duração do silêncio detectado em ms
"""
trim_ms = 0
while trim_ms < len(audio_segment):
chunk = audio_segment[trim_ms:trim_ms + chunk_size]
if chunk.dBFS > silence_threshold:
break
trim_ms += chunk_size
return trim_ms

def remove_silence(audio_segment, silence_thresh=-70, min_silence_len=120):
"""
Remove os silêncios do áudio recebido.

:param audio_segment: AudioSegment de entrada
:param silence_thresh: limiar de silêncio em dBFS
:param min_silence_len: duração mínima do silêncio em ms
:return: AudioSegment sem silêncios
"""
start_trim = detect_leading_silence_advanced(audio_segment, silence_thresh)
end_trim = detect_leading_silence_advanced(audio_segment.reverse(), silence_thresh)
trimmed_audio = audio_segment[start_trim:len(audio_segment) - end_trim]
print(f"[SILENCE] Início cortado: {start_trim} ms, Fim cortado: {end_trim} ms")
return trimmed_audio
"

Arquivo: modules/config.py
""""
config.py

Centraliza todas as constantes e parâmetros do sistema, garantindo:
- Imutabilidade das coleções críticas (frozenset).
- Configuração única de limites, tempos e modelo Whisper.
- Facilidade de ajustes sem tocar na lógica de negócio.
"""

from modules.utils import ensure_directory_exists
from modules.conversion import load_audio

# Preposições e conjunções que influenciam a divisão de blocos
PREPOSICOES_CONJUNCOES = frozenset({
"e", "ou", "mas", "por", "com", "para", "pra", "em", "de", "do", "da",
"dos", "das", "no", "na", "nos", "nas", "a", "ao", "aos", "às", "sob",
"sobre", "como"
})

# Alias legível para SHORT_WORDS
SHORT_WORDS = PREPOSICOES_CONJUNCOES

# Palavras que não podem terminar um bloco
SHORT_WORDS_NAO_FINAL = frozenset({"e", "o", "a"})

# Combinações válidas de short words que podem ficar juntas
COMBINACOES_SHORT_VALIDAS = frozenset({
("e", "que"), ("e", "para"), ("ou", "que"), ("que", "para")
})

# Verbos comuns que influenciam regras de corte de bloco
VERBOS_COMUNS = frozenset({
"vai", "faz", "fica", "chega", "compra", "leva", "olha", "vem", "assista",
"corre", "garanta", "pega", "toma", "prova", "muda", "entra", "mostra",
"sai", "pede", "segue", "testa", "curte", "usa", "ganha", "volta",
"deixa", "tenha", "recebe", "aproveita", "veja", "assine", "descubra"
})

# Parâmetros de divisão de tempo para SRT
TEMPO_MIN_BLOCO = 0.01 # segundos mínimos por bloco
ESPACO_MAXIMO = 0.2 # segundos máximos de lacuna entre blocos

# Tamanho máximo de bloco (contagem de caracteres sem pontuação)
MAX_BLOCK_LEN = 6

# Configurações do modelo Whisper
WHISPER_MODEL_NAME = "small" # modelo a ser carregado
WHISPER_DEVICE = "cpu" # dispositivo: "cpu" ou "cuda"
WHISPER_BEAM_SIZE = 5 # beam size para transcrição
"

Arquivo: modules/my_helpers.py
""""
my_helpers.py

Módulo de funções auxiliares:
- NAO_TERMINA: palavras que não podem ficar sozinhas no final de um bloco.
- smart_capitalize: capitaliza apenas a primeira letra de um texto.
- nome_aleatorio: gera nomes únicos com prefixo e extensão customizáveis.
- normaliza_pontuacao: unifica repetições de pontuações e espaços.
- open_editor: abre o editor padrão do sistema para revisão manual.
"""
from modules.utils import ensure_directory_exists
from modules.conversion import load_audio

import os
import re
import random
import string
import subprocess
import platform
import logging
from typing import Set

logger = logging.getLogger(__name__)

# Palavras que nunca ficam sozinhas no final de bloco
NAO_TERMINA = {
'não', 'só', 'sem', 'tá', 'e', 'a', 'têm', 'do', 'da', 'dos', 'das', 'de',
'no', 'na', 'nos', 'nas', 'um', 'uma', 'uns', 'umas', 'por', 'para', 'em',
'com', 'que', 'se', 'mas', 'ou', 'porque', 'como', 'quando', 'onde', 'ao', 'à', 'às'
}

def smart_capitalize(texto: str) -> str:
"""
Capitaliza só a primeira palavra do texto, respeitando nomes próprios já em maiúsculo.
"""
if not texto:
return texto
return texto[0].upper() + texto[1:] if len(texto) > 1 else texto.upper()

# Outras funções utilitárias podem ser colocadas aqui, se necessário.

# Exemplo de uso:
# texto = normaliza_pontuacao('oi!!! tudo bem?? sim.')
# print(texto) # oi! tudo bem? sim.

def nome_aleatorio(ext: str = "srt", prefix: str = "") -> str:
"""
Gera nome aleatório:
- ext: extensão de arquivo (ex: 'srt', 'txt').
- prefix: string prefixada ao início.
Raise:
TypeError: se ext ou prefix não forem str.
"""
if not isinstance(ext, str) or not isinstance(prefix, str):
raise TypeError("ext e prefix devem ser strings.")
letras = ''.join(random.choices(string.ascii_lowercase, k=8))
return f"{prefix}{letras}.{ext}"

def normaliza_pontuacao(texto: str) -> str:
"""
Normaliza múltiplas pontuações consecutivas e espaços:
- !?! vira !
- Espaços duplicados somem
- Remove espaços antes de pontuação
"""
texto = re.sub(r'!+', '!', texto)
texto = re.sub(r'\?+', '?', texto)
texto = re.sub(r'\.+', '.', texto)
texto = re.sub(r' +', ' ', texto)
texto = re.sub(r'\s+([!?.])', r'\1', texto)
return texto.strip()

def open_editor(path: str) -> None:
"""
Abre arquivo no editor padrão:
- macOS: 'open'
- Windows: os.startfile
- Linux: 'xdg-open'
Exceptions são logadas e instruem abertura manual.
"""
sistema = platform.system()
try:
if sistema == "Darwin":
subprocess.call(['open', path])
elif sistema == "Windows":
os.startfile(path) # type: ignore
else:
subprocess.call(['xdg-open', path])
except Exception as e:
logger.exception(f"Falha ao abrir editor para '{path}': {e}")
print(f"Abra manualmente: {path}")
"

Arquivo: modules/text_utils.py
"# -*- coding: utf-8 -*-
"""
text_utils.py — divisão de roteiro em blocos legíveis, sem inventar pontuação.

Objetivo: produzir linhas “respiráveis” para leitura/CapCut, mantendo a pontuação
do roteiro e evitando cortes feios (artigos/preps/fillers no fim de linha).

Regras fortes:
- NUNCA adicionar pontuação que não exista no texto original.
- Sempre quebrar em pontuação forte '!', '?', '.'.
- Um bloco NUNCA termina com palavra tabu nem com palavra curta (<=4).
- Teto de 14 caracteres (sem espaços) por bloco; se exceder, corta para o próximo.
Exceção: pode passar de 14 se a linha tiver apenas **1** palavra.

Heurísticas:
- Preço corrido: "POR <num>" + sequências "E <num>" (cada uma em linha), para se bater '!' no número.
- Materiais: "FEITA/FEITO/..." + "EM" (mesma linha), depois cada item em linha; "E <item>" inicia linha.
- Sujeito curto: "A/O/AS/OS <substantivo> [MARCA]".
- "E ..." inicia linha; "NÃO ..." em linha curta; "NUNCA" sozinho; "ISSO AQUI" junto.
- "QUE ..." inicia linha curta; "NA/NO/NAS/NOS/EM ..." inicia linha curta.
- "CLIQUE EM SAIBA MAIS" → "CLIQUE" / "EM SAIBA" / "MAIS".
"""

import os
import re
import logging
from typing import List, Set, Optional

# Você pode manter MAX_BLOCK_LEN, mas aqui vamos usar 14 como padrão forte:
try:
from modules.config import MAX_BLOCK_LEN
except Exception:
MAX_BLOCK_LEN = 14

from modules.my_helpers import normaliza_pontuacao, NAO_TERMINA, smart_capitalize

logger = logging.getLogger(__name__)

# --------------------
# Vocabulários
# --------------------

TABU_FINAL: Set[str] = set(NAO_TERMINA) | {
'de', 'é', 'do','da','dos','das','em','no','na','nos','nas',
'por','pelo','pela','pelos','pelas',
'para','pra','pro','pros','pras',
'com','sem','ao','aos','à','às',
'num','numa','nuns','numas','dum','duma','duns','dumas',
'sobre','até','e','ou','mas','que','se','como','porque','porquê',
'quando','enquanto','então','o','a','os','as','um','uma','uns','umas',
'me','te','se','não','só','já','também','tanto','aí','né','tá','tipo',
'qualquer', 'nossa', 'nosso', 'nossos', 'nossas'
}

MATERIAL_VERBS = {
'feita','feito','feitas','feitos',
'confeccionada','confeccionado','confeccionadas','confeccionados',
'produzida','produzido','produzidas','produzidos',
'fabricada','fabricado','fabricadas','fabricados',
}

NUMBER_WORDS = {
'zero','um','uma','dois','duas','três','tres','quatro','cinco','seis','sete','oito','nove',
'dez','onze','doze','treze','quatorze','catorze','quinze','dezesseis','dezessete','dezoito','dezenove',
'vinte','trinta','quarenta','cinquenta','sessenta','setenta','oitenta','noventa',
'cem','cento','duzentos','trezentos','quatrocentos','quinhentos','seiscentos',
'setecentos','oitocentos','novecentos','mil','milhão','milhoes','bilhão','bilhoes'
}

# Pontas GENÉRICAS que costumam sinalizar mudança de tópico após listas de materiais
TOPIC_SHIFT_HEADS = {
# artigos/determinantes
'a','o','as','os','um','uma','uns','umas',
# pronomes demonstrativos/comuns
'isso','isto','aquilo','esse','essa','esses','essas','este','esta','estes','estas',
'aquele','aquela','aqueles','aquelas',
# verbos muito comuns (ser/ter/ir)
'é','e','são','foi','será','tem','vai','vamos',
# conectivos gerais
'mas','porém','porem','entretanto','então','entao','agora',
# ganchos de call-to-action/comércio genéricos
'clique','aproveite','promoção','promocao','oferta','atenção','atencao'
}

# --------------------
# Helpers
# --------------------

def _strip_punct(token: str) -> str:
"""Remove pont

README.md

@@ -1,10 +1,13 @@
 ---
-title: Capcutsync Pro
-emoji: 🌍
-colorFrom: green
-colorTo: yellow
+title: CapCutSync Pro 🎬
+colorFrom: red
+colorTo: gray
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/navbar.js

@@ -0,0 +1,67 @@
+class AppNavbar extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.innerHTML = `
+            <nav class="fixed top-0 left-0 right-0 z-50 bg-slate-900/80 backdrop-blur-md border-b border-slate-800 h-16">
+                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-full">
+                    <div class="flex items-center justify-between h-full">
+                        <!-- Logo -->
+                        <div class="flex items-center gap-3">
+                            <div class="w-8 h-8 bg-gradient-to-br from-primary-500 to-secondary-500 rounded-lg flex items-center justify-center shadow-lg shadow-primary-500/20">
+                                <i data-feather="mic" class="w-5 h-5 text-white"></i>
+                            </div>
+                            <div class="flex flex-col">
+                                <span class="text-lg font-bold bg-gradient-to-r from-slate-100 to-slate-300 bg-clip-text text-transparent">
+                                    CapCutSync Pro
+                                </span>
+                                <span class="text-[10px] text-slate-500 uppercase tracking-wider">Pipeline de Áudio</span>
+                            </div>
+                        </div>
+
+                        <!-- Desktop Menu -->
+                        <div class="hidden md:flex items-center gap-6">
+                            <a href="#" class="text-sm text-slate-300 hover:text-white transition-colors flex items-center gap-2">
+                                <i data-feather="book-open" class="w-4 h-4"></i>
+                                Documentação
+                            </a>
+                            <a href="#" class="text-sm text-slate-300 hover:text-white transition-colors flex items-center gap-2">
+                                <i data-feather="github" class="w-4 h-4"></i>
+                                GitHub
+                            </a>
+                            <div class="h-4 w-px bg-slate-700"></div>
+                            <button class="flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-200 rounded-lg text-sm font-medium transition-all border border-slate-700 hover:border-slate-600">
+                                <i data-feather="settings" class="w-4 h-4"></i>
+                                Configurações
+                            </button>
+                        </div>
+
+                        <!-- Mobile Menu Button -->
+                        <button id="mobile-menu-btn" class="md:hidden p-2 text-slate-400 hover:text-white">
+                            <i data-feather="menu" class="w-6 h-6"></i>
+                        </button>
+                    </div>
+                </div>
+                
+                <!-- Mobile Menu -->
+                <div id="mobile-menu" class="hidden md:hidden bg-slate-900 border-t border-slate-800">
+                    <div class="px-4 py-3 space-y-2">
+                        <a href="#" class="block px-3 py-2 text-slate-300 hover:bg-slate-800 rounded-lg text-sm">Documentação</a>
+                        <a href="#" class="block px-3 py-2 text-slate-300 hover:bg-slate-800 rounded-lg text-sm">GitHub</a>
+                        <a href="#" class="block px-3 py-2 text-slate-300 hover:bg-slate-800 rounded-lg text-sm">Configurações</a>
+                    </div>
+                </div>
+            </nav>
+        `;
+
+        // Mobile menu toggle
+        this.querySelector('#mobile-menu-btn').addEventListener('click', () => {
+            const menu = this.querySelector('#mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+    }
+}
+
+customElements.define('app-navbar', AppNavbar);

components/sidebar.js

@@ -0,0 +1,83 @@
+class AppSidebar extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.innerHTML = `
+            <aside class="w-64 bg-slate-900 border-r border-slate-800 h-full overflow-y-auto">
+                <div class="p-4 space-y-6">
+                    
+                    <!-- Pipeline Steps -->
+                    <div>
+                        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3 px-2">Etapas do Pipeline</h3>
+                        <nav class="space-y-1">
+                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg bg-primary-500/10 text-primary-400 border border-primary-500/20">
+                                <i data-feather="upload-cloud" class="w-4 h-4"></i>
+                                Upload
+                                <span class="ml-auto w-2 h-2 rounded-full bg-primary-500"></span>
+                            </a>
+                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
+                                <i data-feather="scissors" class="w-4 h-4"></i>
+                                Remoção de Silêncio
+                            </a>
+                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
+                                <i data-feather="mic" class="w-4 h-4"></i>
+                                Transcrição
+                            </a>
+                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
+                                <i data-feather="align-left" class="w-4 h-4"></i>
+                                Divisão de Texto
+                            </a>
+                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
+                                <i data-feather="anchor" class="w-4 h-4"></i>
+                                Alinhamento
+                            </a>
+                            <a href="#" class="flex items-center gap-3 px-3 py-2.5 text-sm font-medium rounded-lg text-slate-400 hover:bg-slate-800 hover:text-slate-200 transition-colors">
+                                <i data-feather="type" class="w-4 h-4"></i>
+                                Exportar SRT
+                            </a>
+                        </nav>
+                    </div>
+
+                    <!-- Quick Stats -->
+                    <div>
+                        <h3 class="text-xs font-semibold text-slate-500 uppercase tracking-wider mb-3 px-2">Estatísticas Rápidas</h3>
+                        <div class="space-y-3 px-2">
+                            <div class="flex justify-between items-center text-sm">
+                                <span class="text-slate-400">Threshold</span>
+                                <span class="text-slate-200 font-mono">-70dB</span>
+                            </div>
+                            <div class="flex justify-between items-center text-sm">
+                                <span class="text-slate-400">Modelo</span>
+                                <span class="text-secondary-400 font-mono text-xs">small</span>
+                            </div>
+                            <div class="flex justify-between items-center text-sm">
+                                <span class="text-slate-400">Max Block</span>
+                                <span class="text-slate-200 font-mono">14</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Help Card -->
+                    <div class="p-3 rounded-xl bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700">
+                        <div class="flex items-start gap-3">
+                            <div class="w-8 h-8 rounded-lg bg-secondary-500/20 flex items-center justify-center flex-shrink-0">
+                                <i data-feather="help-circle" class="w-4 h-4 text-secondary-400"></i>
+                            </div>
+                            <div>
+                                <h4 class="text-sm font-medium text-slate-200 mb-1">Dica CapCut</h4>
+                                <p class="text-xs text-slate-400 leading-relaxed">
+                                    Use Advance de 70ms e Preroll de 40ms para sincronização perfeita com vídeos verticais.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                </div>
+            </aside>
+        `;
+    }
+}
+
+customElements.define('app-sidebar', AppSidebar);

components/stat-card.js

@@ -0,0 +1,55 @@
+class StatCard extends HTMLElement {
+    static get observedAttributes() {
+        return ['icon', 'label', 'value', 'color'];
+    }
+
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.render();
+    }
+
+    attributeChangedCallback() {
+        this.render();
+    }
+
+    render() {
+        const icon = this.getAttribute('icon') || 'activity';
+        const label = this.getAttribute('label') || 'Label';
+        const value = this.getAttribute('value') || '0';
+        const color = this.getAttribute('color') || 'primary';
+
+        const colorClasses = {
+            primary: 'text-primary-400 bg-primary-500/10 border-primary-500/20',
+            secondary: 'text-secondary-400 bg-secondary-500/10 border-secondary-500/20',
+            green: 'text-emerald-400 bg-emerald-500/10 border-emerald-500/20',
+            red: 'text-red-400 bg-red-500/10 border-red-500/20',
+            slate: 'text-slate-400 bg-slate-500/10 border-slate-500/20'
+        };
+
+        const colorClass = colorClasses[color] || colorClasses.primary;
+
+        this.innerHTML = `
+            <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-lg backdrop-blur-sm hover:border-slate-700 transition-colors">
+                <div class="flex items-start justify-between">
+                    <div>
+                        <p class="text-slate-500 text-xs font-medium uppercase tracking-wider mb-1">${label}</p>
+                        <h4 class="text-2xl font-bold text-slate-100">${value}</h4>
+                    </div>
+                    <div class="w-10 h-10 rounded-xl ${colorClass} flex items-center justify-center border">
+                        <i data-feather="${icon}" class="w-5 h-5"></i>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        // Re-initialize feather icons for this component
+        if (window.feather) {
+            feather.replace();
+        }
+    }
+}
+
+customElements.define('stat-card', StatCard);

components/upload-zone.js

@@ -0,0 +1,112 @@
+class UploadZone extends HTMLElement {
+    constructor() {
+        super();
+        this.dragCounter = 0;
+    }
+
+    connectedCallback() {
+        this.innerHTML = `
+            <div id="drop-zone" class="relative group">
+                <div class="border-2 border-dashed border-slate-700 rounded-2xl p-8 text-center transition-all duration-300 bg-slate-900/50 hover:border-primary-500/50 hover:bg-primary-500/5">
+                    
+                    <!-- Icon -->
+                    <div class="w-16 h-16 mx-auto mb-4 rounded-full bg-slate-800 flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
+                        <i data-feather="upload-cloud" class="w-8 h-8 text-slate-400 group-hover:text-primary-400 transition-colors"></i>
+                    </div>
+                    
+                    <h3 class="text-lg font-semibold text-slate-300 mb-2 group-hover:text-slate-200">
+                        Arraste arquivos de áudio
+                    </h3>
+                    <p class="text-sm text-slate-500 mb-4">
+                        ou <span class="text-primary-400 cursor-pointer hover:underline">clique para selecionar</span>
+                    </p>
+                    
+                    <div class="flex items-center justify-center gap-2 text-xs text-slate-600">
+                        <span class="px-2 py-1 rounded bg-slate-800">MP3</span>
+                        <span class="px-2 py-1 rounded bg-slate-800">WAV</span>
+                        <span class="px-2 py-1 rounded bg-slate-800">M4A</span>
+                        <span class="px-2 py-1 rounded bg-slate-800">FLAC</span>
+                    </div>
+
+                    <!-- Hidden Input -->
+                    <input type="file" id="file-input" multiple accept="audio/*" class="hidden">
+                </div>
+
+                <!-- Processing Overlay -->
+                <div id="upload-overlay" class="absolute inset-0 bg-slate-900/90 backdrop-blur-sm rounded-2xl flex items-center justify-center hidden">
+                    <div class="text-center">
+                        <div class="w-12 h-12 border-4 border-primary-500/30 border-t-primary-500 rounded-full animate-spin mx-auto mb-3"></div>
+                        <p class="text-sm text-slate-300">Analisando áudio...</p>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        this.setupEventListeners();
+    }
+
+    setupEventListeners() {
+        const dropZone = this.querySelector('#drop-zone');
+        const fileInput = this.querySelector('#file-input');
+        const overlay = this.querySelector('#upload-overlay');
+
+        // Click to select
+        dropZone.addEventListener('click', (e) => {
+            if (e.target !== fileInput) {
+                fileInput.click();
+            }
+        });
+
+        fileInput.addEventListener('change', (e) => {
+            this.handleFiles(e.target.files);
+        });
+
+        // Drag and Drop
+        ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            }, false);
+        });
+
+        ['dragenter', 'dragover'].forEach(eventName => {
+            dropZone.addEventListener(eventName, () => {
+                this.dragCounter++;
+                dropZone.classList.add('drag-over');
+            }, false);
+        });
+
+        ['dragleave', 'drop'].forEach(eventName => {
+            dropZone.addEventListener(eventName, () => {
+                this.dragCounter--;
+                if (this.dragCounter === 0) {
+                    dropZone.classList.remove('drag-over');
+                }
+            }, false);
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            this.dragCounter = 0;
+            dropZone.classList.remove('drag-over');
+            
+            const files = e.dataTransfer.files;
+            if (files.length > 0) {
+                // Show overlay briefly for effect
+                overlay.classList.remove('hidden');
+                setTimeout(() => {
+                    overlay.classList.add('hidden');
+                    this.handleFiles(files);
+                }, 500);
+            }
+        });
+    }
+
+    handleFiles(files) {
+        // Dispatch custom event to main app
+        document.dispatchEvent(new CustomEvent('files-uploaded', {
+            detail: { files: Array.from(files) }
+        }));
+    }
+}
+
+customElements.define('upload-zone', UploadZone);

index.html

@@ -1,19 +1,316 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<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>
+                        
+                        <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="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>
+
+                                <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">
+                                        <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">
+                                        <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>
+                        </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
+                        </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>

script.js

@@ -0,0 +1,545 @@
+// CapCutSync Pro - Main Application Logic
+
+class AudioPipeline {
+    constructor() {
+        this.files = [];
+        this.config = {
+            silence: {
+                threshold: -70,
+                minLen: 150,
+                keepSilence: 70
+            },
+            overlap: {
+                base: 190
+            },
+            text: {
+                maxBlockLen: 14,
+                publico: 'M'
+            },
+            srt: {
+                model: 'small',
+                advance: 70,
+                preroll: 40,
+                postroll: 25
+            }
+        };
+        this.isProcessing = false;
+        this.waveformData = [];
+        
+        this.init();
+    }
+
+    init() {
+        this.setupEventListeners();
+        this.setupRangeSliders();
+        this.setupTabs();
+        this.initWaveform();
+        this.startClock();
+    }
+
+    setupEventListeners() {
+        // File Upload via Drag & Drop
+        const uploadZone = document.querySelector('upload-zone');
+        
+        // Process Button
+        document.getElementById('btn-process').addEventListener('click', () => this.startProcessing());
+        
+        // Clear Button
+        document.getElementById('btn-clear').addEventListener('click', () => this.clearAll());
+        
+        // Clear Logs
+        document.getElementById('clear-logs').addEventListener('click', () => {
+            document.getElementById('log-container').innerHTML = '';
+        });
+
+        // Preview Blocks
+        document.getElementById('preview-blocks').addEventListener('click', () => this.previewBlocks());
+
+        // Text input character count
+        document.getElementById('script-text').addEventListener('input', (e) => {
+            document.getElementById('char-count').textContent = `${e.target.value.length} caracteres`;
+        });
+
+        // Waveform controls
+        document.getElementById('play-preview').addEventListener('click', () => this.togglePlayPreview());
+        document.getElementById('reset-view').addEventListener('click', () => this.resetWaveform());
+
+        // Listen for custom events from web components
+        document.addEventListener('files-uploaded', (e) => this.handleFiles(e.detail.files));
+        document.addEventListener('file-removed', (e) => this.removeFile(e.detail.index));
+    }
+
+    setupRangeSliders() {
+        const sliders = [
+            { id: 'silence-threshold', display: 'val-threshold' },
+            { id: 'min-silence', display: 'val-silence' },
+            { id: 'base-overlap', display: 'val-overlap' },
+            { id: 'keep-silence', display: 'val-keep' }
+        ];
+
+        sliders.forEach(({ id, display }) => {
+            const slider = document.getElementById(id);
+            const displayEl = document.getElementById(display);
+            
+            slider.addEventListener('input', (e) => {
+                displayEl.textContent = e.target.value;
+                this.updateConfig();
+            });
+        });
+    }
+
+    setupTabs() {
+        const tabs = document.querySelectorAll('.tab-btn');
+        const contents = document.querySelectorAll('.tab-content');
+
+        tabs.forEach(tab => {
+            tab.addEventListener('click', () => {
+                const target = tab.dataset.tab;
+                
+                // Update active states
+                tabs.forEach(t => {
+                    if (t.dataset.tab === target) {
+                        t.classList.add('text-primary-400', 'border-b-2', 'border-primary-500', 'bg-primary-500/10');
+                        t.classList.remove('text-slate-400');
+                    } else {
+                        t.classList.remove('text-primary-400', 'border-b-2', 'border-primary-500', 'bg-primary-500/10');
+                        t.classList.add('text-slate-400');
+                    }
+                });
+
+                contents.forEach(c => {
+                    if (c.id === `tab-${target}`) {
+                        c.classList.remove('hidden');
+                    } else {
+                        c.classList.add('hidden');
+                    }
+                });
+            });
+        });
+    }
+
+    updateConfig() {
+        this.config.silence.threshold = parseInt(document.getElementById('silence-threshold').value);
+        this.config.silence.minLen = parseInt(document.getElementById('min-silence').value);
+        this.config.silence.keepSilence = parseInt(document.getElementById('keep-silence').value);
+        this.config.overlap.base = parseInt(document.getElementById('base-overlap').value);
+        this.config.text.maxBlockLen = parseInt(document.getElementById('max-block-len').value);
+        this.config.text.publico = document.getElementById('publico').value;
+        this.config.srt.model = document.getElementById('whisper-model').value;
+        this.config.srt.advance = parseInt(document.getElementById('capcut-advance').value);
+    }
+
+    handleFiles(newFiles) {
+        const validFiles = Array.from(newFiles).filter(file => 
+            file.type.startsWith('audio/') || 
+            ['.mp3', '.wav', '.m4a', '.aac', '.flac', '.ogg'].some(ext => 
+                file.name.toLowerCase().endsWith(ext)
+            )
+        );
+
+        if (validFiles.length !== newFiles.length) {
+            this.log('Apenas arquivos de áudio são permitidos', 'warning');
+        }
+
+        this.files = [...this.files, ...validFiles];
+        this.updateFileQueue();
+        this.log(`${validFiles.length} arquivo(s) adicionado(s) à fila`, 'success');
+        
+        // Simulate waveform generation for first file
+        if (validFiles.length > 0) {
+            this.generateMockWaveform();
+            this.updateStats();
+        }
+    }
+
+    removeFile(index) {
+        this.files.splice(index, 1);
+        this.updateFileQueue();
+        this.log('Arquivo removido da fila', 'info');
+        this.updateStats();
+    }
+
+    updateFileQueue() {
+        const container = document.getElementById('file-queue');
+        
+        if (this.files.length === 0) {
+            container.innerHTML = '<p class="text-slate-500 text-sm italic text-center py-8">Nenhum arquivo na fila</p>';
+            return;
+        }
+
+        container.innerHTML = this.files.map((file, index) => `
+            <div class="flex items-center justify-between p-3 bg-slate-800/50 rounded-lg border border-slate-700/50 group hover:border-primary-500/30 transition-colors">
+                <div class="flex items-center gap-3 overflow-hidden">
+                    <div class="w-8 h-8 rounded bg-primary-500/20 flex items-center justify-center text-primary-400 flex-shrink-0">
+                        <i data-feather="music" class="w-4 h-4"></i>
+                    </div>
+                    <div class="min-w-0">
+                        <p class="text-sm text-slate-200 truncate font-medium">${file.name}</p>
+                        <p class="text-xs text-slate-500">${this.formatFileSize(file.size)}</p>
+                    </div>
+                </div>
+                <button onclick="document.dispatchEvent(new CustomEvent('file-removed', {detail: {index: ${index}}}))" 
+                        class="p-1.5 text-slate-500 hover:text-red-400 hover:bg-red-400/10 rounded transition-colors">
+                    <i data-feather="x" class="w-4 h-4"></i>
+                </button>
+            </div>
+        `).join('');
+        
+        feather.replace();
+    }
+
+    formatFileSize(bytes) {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    }
+
+    previewBlocks() {
+        const text = document.getElementById('script-text').value;
+        if (!text.trim()) {
+            this.log('Insira um roteiro primeiro', 'warning');
+            return;
+        }
+
+        // Simulate the Python text splitting logic
+        const blocks = this.simulateTextSplit(text);
+        const container = document.getElementById('blocks-preview');
+        
+        container.classList.remove('hidden');
+        container.innerHTML = blocks.map((block, i) => `
+            <div class="block-item flex items-start gap-3 p-2 rounded bg-slate-900 border border-slate-800 text-sm">
+                <span class="text-primary-500 font-mono text-xs mt-0.5">${i + 1}</span>
+                <span class="text-slate-300">${block}</span>
+                <span class="text-xs text-slate-600 ml-auto whitespace-nowrap">${block.replace(/\s/g, '').length} chars</span>
+            </div>
+        `).join('');
+        
+        this.log(`Roteiro dividido em ${blocks.length} blocos`, 'success');
+    }
+
+    simulateTextSplit(text) {
+        // Simplified version of the Python logic
+        const maxLen = this.config.text.maxBlockLen;
+        const words = text.split(/\s+/);
+        const blocks = [];
+        let current = [];
+        let currentLen = 0;
+
+        const weakWords = ['e', 'ou', 'mas', 'por', 'com', 'para', 'em', 'de', 'do', 'da', 'a', 'o', 'que', 'se'];
+
+        words.forEach(word => {
+            const cleanWord = word.replace(/[^\w\s]/gi, '');
+            const wordLen = cleanWord.length;
+            
+            if (currentLen + wordLen > maxLen && current.length > 0) {
+                // Check if last word is weak (don't end block with weak word)
+                const lastWord = current[current.length - 1].toLowerCase();
+                if (weakWords.includes(lastWord) && words.length > 1) {
+                    // Move weak word to next block
+                    const weak = current.pop();
+                    blocks.push(current.join(' '));
+                    current = [weak, word];
+                    currentLen = weak.length + wordLen;
+                } else {
+                    blocks.push(current.join(' '));
+                    current = [word];
+                    currentLen = wordLen;
+                }
+            } else {
+                current.push(word);
+                currentLen += wordLen;
+            }
+        });
+
+        if (current.length > 0) {
+            blocks.push(current.join(' '));
+        }
+
+        return blocks;
+    }
+
+    async startProcessing() {
+        if (this.files.length === 0) {
+            this.log('Nenhum arquivo para processar', 'error');
+            return;
+        }
+
+        this.isProcessing = true;
+        this.updateStatus('Processando...', 'processing');
+        
+        const btn = document.getElementById('btn-process');
+        btn.disabled = true;
+        btn.classList.add('processing-pulse');
+        btn.innerHTML = `<i data-feather="loader" class="w-4 h-4 animate-spin"></i> Processando...`;
+        feather.replace();
+
+        this.log('Iniciando pipeline de processamento...', 'info');
+        
+        // Simulate pipeline steps
+        const steps = [
+            { msg: 'Carregando áudio e detectando silêncios...', time: 1500, type: 'silence' },
+            { msg: 'Aplicando VAD e removendo pausas longas...', time: 2000, type: 'vad' },
+            { msg: 'Normalizando loudness (LUFS)...', time: 1200, type: 'audio' },
+            { msg: 'Transcrevendo com Whisper...', time: 3000, type: 'whisper' },
+            { msg: 'Dividindo roteiro em blocos inteligentes...', time: 800, type: 'text' },
+            { msg: 'Alinhando âncoras de início/fim...', time: 1500, type: 'align' },
+            { msg: 'Calibrando timestamps para CapCut...', time: 1000, type: 'srt' },
+            { msg: 'Exportando SRT e áudio final...', time: 1200, type: 'export' }
+        ];
+
+        for (const step of steps) {
+            this.log(step.msg, 'info');
+            await this.delay(step.time);
+            
+            // Simulate progress on waveform
+            this.updateWaveformProgress(steps.indexOf(step) / steps.length);
+        }
+
+        this.log('Pipeline concluído com sucesso!', 'success');
+        this.updateStatus('Concluído', 'success');
+        
+        // Reset button
+        btn.disabled = false;
+        btn.classList.remove('processing-pulse');
+        btn.innerHTML = `<i data-feather="zap" class="w-4 h-4"></i> Processar Pipeline`;
+        feather.replace();
+        
+        this.isProcessing = false;
+        
+        // Show download simulation
+        this.showDownloadOptions();
+    }
+
+    delay(ms) {
+        return new Promise(resolve => setTimeout(resolve, ms));
+    }
+
+    updateStatus(text, type) {
+        const statusEl = document.getElementById('stat-status');
+        statusEl.setAttribute('value', text);
+        
+        const colors = {
+            processing: 'secondary',
+            success: 'green',
+            idle: 'secondary'
+        };
+        statusEl.setAttribute('color', colors[type] || 'secondary');
+    }
+
+    log(message, type = 'info') {
+        const container = document.getElementById('log-container');
+        const entry = document.createElement('div');
+        const time = new Date().toLocaleTimeString('pt-BR');
+        
+        entry.className = `log-entry ${type}`;
+        entry.innerHTML = `<span class="text-slate-600">[${time}]</span> <span class="${this.getLogColor(type)}">${message}</span>`;
+        
+        container.appendChild(entry);
+        container.scrollTop = container.scrollHeight;
+    }
+
+    getLogColor(type) {
+        const colors = {
+            info: 'text-primary-400',
+            success: 'text-emerald-400',
+            warning: 'text-secondary-400',
+            error: 'text-red-400'
+        };
+        return colors[type] || 'text-slate-300';
+    }
+
+    clearAll() {
+        this.files = [];
+        this.updateFileQueue();
+        document.getElementById('script-text').value = '';
+        document.getElementById('blocks-preview').classList.add('hidden');
+        this.resetWaveform();
+        this.log('Fila limpa', 'info');
+        this.updateStatus('Ocioso', 'idle');
+    }
+
+    updateStats() {
+        document.getElementById('stat-audios').setAttribute('value', this.files.length.toString());
+        
+        // Calculate total estimated time
+        const totalSeconds = this.files.length * 120; // Mock 2 min per file
+        const mins = Math.floor(totalSeconds / 60);
+        const secs = totalSeconds % 60;
+        document.getElementById('stat-time').setAttribute('value', `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`);
+    }
+
+    startClock() {
+        setInterval(() => {
+            if (!this.isProcessing) {
+                const now = new Date();
+                // Optional: update some clock element if needed
+            }
+        }, 1000);
+    }
+
+    // Waveform Visualization
+    initWaveform() {
+        const canvas = document.getElementById('waveform');
+        const ctx = canvas.getContext('2d');
+        
+        // Set canvas size
+        const resize = () => {
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
+            if (this.waveformData.length === 0) {
+                this.drawEmptyWaveform();
+            } else {
+                this.drawWaveform();
+            }
+        };
+        
+        window.addEventListener('resize', resize);
+        resize();
+    }
+
+    generateMockWaveform() {
+        const points = 200;
+        this.waveformData = [];
+        
+        for (let i = 0; i < points; i++) {
+            // Generate somewhat realistic audio waveform pattern
+            const base = Math.sin(i * 0.1) * 0.3;
+            const noise = Math.random() * 0.4;
+            const envelope = Math.exp(-Math.pow((i - points/2) / (points/4), 2)) * 0.5;
+            this.waveformData.push(base + noise + envelope);
+        }
+        
+        this.drawWaveform();
+        
+        // Update total duration display
+        const mins = Math.floor(this.files.length * 2.5);
+        const secs = Math.floor((this.files.length * 2.5 % 1) * 60);
+        document.getElementById('total-duration').textContent = 
+            `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    drawWaveform() {
+        const canvas = document.getElementById('waveform');
+        const ctx = canvas.getContext('2d');
+        const width = canvas.width;
+        const height = canvas.height;
+        const barWidth = width / this.waveformData.length;
+        
+        ctx.clearRect(0, 0, width, height);
+        
+        // Draw gradient bars
+        const gradient = ctx.createLinearGradient(0, 0, 0, height);
+        gradient.addColorStop(0, '#6366f1');
+        gradient.addColorStop(0.5, '#818cf8');
+        gradient.addColorStop(1, '#c7d2fe');
+        
+        this.waveformData.forEach((value, i) => {
+            const barHeight = value * height * 0.8;
+            const x = i * barWidth;
+            const y = (height - barHeight) / 2;
+            
+            ctx.fillStyle = gradient;
+            ctx.fillRect(x, y, barWidth - 1, barHeight);
+        });
+        
+        // Draw center line
+        ctx.strokeStyle = 'rgba(99, 102, 241, 0.3)';
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(0, height / 2);
+        ctx.lineTo(width, height / 2);
+        ctx.stroke();
+    }
+
+    drawEmptyWaveform() {
+        const canvas = document.getElementById('waveform');
+        const ctx = canvas.getContext('2d');
+        const width = canvas.width;
+        const height = canvas.height;
+        
+        ctx.clearRect(0, 0, width, height);
+        ctx.strokeStyle = '#1e293b';
+        ctx.lineWidth = 2;
+        ctx.setLineDash([5, 5]);
+        ctx.beginPath();
+        ctx.moveTo(0, height / 2);
+        ctx.lineTo(width, height / 2);
+        ctx.stroke();
+        ctx.setLineDash([]);
+    }
+
+    updateWaveformProgress(percent) {
+        if (this.waveformData.length === 0) return;
+        
+        const canvas = document.getElementById('waveform');
+        const ctx = canvas.getContext('2d');
+        
+        // Redraw base
+        this.drawWaveform();
+        
+        // Draw progress overlay
+        const width = canvas.width;
+        const height = canvas.height;
+        const progressWidth = width * percent;
+        
+        ctx.fillStyle = 'rgba(245, 158, 11, 0.2)';
+        ctx.fillRect(0, 0, progressWidth, height);
+        
+        // Progress line
+        ctx.strokeStyle = '#f59e0b';
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.moveTo(progressWidth, 0);
+        ctx.lineTo(progressWidth, height);
+        ctx.stroke();
+    }
+
+    resetWaveform() {
+        this.waveformData = [];
+        this.drawEmptyWaveform();
+        document.getElementById('total-duration').textContent = '00:00:00';
+    }
+
+    togglePlayPreview() {
+        this.log('Preview de áudio não disponível no modo de demonstração', 'warning');
+    }
+
+    showDownloadOptions() {
+        // Create a toast notification for download
+        const toast = document.createElement('div');
+        toast.className = 'fixed top-20 right-6 bg-slate-800 border border-primary-500/30 rounded-xl p-4 shadow-2xl z-50 animate-slide-in';
+        toast.innerHTML = `
+            <div class="flex items-start gap-3">
+                <div class="w-10 h-10 rounded-full bg-primary-500/20 flex items-center justify-center text-primary-400">
+                    <i data-feather="download" class="w-5 h-5"></i>
+                </div>
+                <div>
+                    <h4 class="text-sm font-semibold text-slate-200">Processamento Concluído!</h4>
+                    <p class="text-xs text-slate-400 mt-1">Arquivos prontos para download</p>
+                    <div class="flex gap-2 mt-3">
+                        <button class="px-3 py-1.5 bg-primary-600 hover:bg-primary-500 text-white text-xs rounded-lg transition-colors">
+                            Baixar SRT
+                        </button>
+                        <button class="px-3 py-1.5 bg-slate-700 hover:bg-slate-600 text-slate-200 text-xs rounded-lg transition-colors">
+                            Áudio WAV
+                        </button>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        document.body.appendChild(toast);
+        feather.replace();
+        
+        setTimeout(() => {
+            toast.remove();
+        }, 5000);
+    }
+}
+
+// Initialize App when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+    window.app = new AudioPipeline();
+});

style.css

@@ -1,28 +1,176 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+::-webkit-scrollbar-track {
+    background: #0f172a;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+::-webkit-scrollbar-thumb {
+    background: #334155;
+    border-radius: 4px;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+::-webkit-scrollbar-thumb:hover {
+    background: #475569;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Range Slider Customization */
+input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    cursor: pointer;
 }
+
+input[type="range"]::-webkit-slider-track {
+    background: #1e293b;
+    height: 6px;
+    border-radius: 3px;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    background: #6366f1;
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    margin-top: -6px;
+    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
+    transition: all 0.2s;
+}
+
+input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+    box-shadow: 0 0 15px rgba(99, 102, 241, 0.8);
+}
+
+input[type="range"]::-moz-range-track {
+    background: #1e293b;
+    height: 6px;
+    border-radius: 3px;
+}
+
+input[type="range"]::-moz-range-thumb {
+    background: #6366f1;
+    height: 18px;
+    width: 18px;
+    border-radius: 50%;
+    border: none;
+    box-shadow: 0 0 10px rgba(99, 102, 241, 0.5);
+}
+
+/* Animations */
+@keyframes gradient-shift {
+    0%, 100% { background-position: 0% 50%; }
+    50% { background-position: 100% 50%; }
+}
+
+.animate-gradient {
+    background-size: 200% 200%;
+    animation: gradient-shift 8s ease infinite;
+}
+
+/* Glassmorphism utilities */
+.glass {
+    background: rgba(15, 23, 42, 0.7);
+    backdrop-filter: blur(12px);
+    -webkit-backdrop-filter: blur(12px);
+    border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Waveform Canvas */
+#waveform {
+    image-rendering: pixelated;
+    cursor: crosshair;
+}
+
+/* Tab Transitions */
+.tab-content {
+    transition: opacity 0.3s ease-in-out;
+}
+
+.tab-content.hidden {
+    display: none;
+    opacity: 0;
+}
+
+.tab-content:not(.hidden) {
+    opacity: 1;
+}
+
+/* Block Preview Items */
+.block-item {
+    animation: slideIn 0.3s ease-out;
+}
+
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+/* Log Entries */
+.log-entry {
+    border-left: 2px solid transparent;
+    padding-left: 8px;
+    animation: fadeIn 0.2s ease-out;
+}
+
+.log-entry.info { border-left-color: #6366f1; }
+.log-entry.success { border-left-color: #10b981; }
+.log-entry.warning { border-left-color: #f59e0b; }
+.log-entry.error { border-left-color: #ef4444; }
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .glass {
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+    }
+}
+
+/* Custom Checkbox */
+input[type="checkbox"] {
+    accent-color: #6366f1;
+}
+
+/* Drag over state */
+.drag-over {
+    border-color: #6366f1 !important;
+    background: rgba(99, 102, 241, 0.1) !important;
+}
+
+/* Processing pulse */
+.processing-pulse {
+    position: relative;
+}
+
+.processing-pulse::after {
+    content: '';
+    position: absolute;
+    inset: -2px;
+    border-radius: inherit;
+    background: linear-gradient(45deg, #6366f1, #f59e0b);
+    opacity: 0;
+    z-index: -1;
+    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse-ring {
+    0%, 100% { opacity: 0; transform: scale(1); }
+    50% { opacity: 0.5; transform: scale(1.02); }
+}