🐳 07/02 - 05:00 - Role: Act as an expert Full-Stack Developer and Code Debugging Specialist.Goal: Diagnose the root causes of non-functional buttons and code errors within the provided context. Imple

script.js

@@ -1,1433 +1,37 @@
-
-// CapCutSync Pro - Main Application Logic (FULL IMPLEMENTATION)
-
-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.audioContext = null;
-        this.processedBuffers = new Map(); // Armazena áudio processado
-        this.transcriptions = new Map(); // Armazena transcrições
-        this.currentAudioBuffer = null;
-        this.audioPlayer = null;
-        this.isPlaying = false;
-        this.jsonTimestamps = null; // Armazena timestamps do JSON carregado
-        
-        this.init();
-    }
-
-    init() {
-        this.setupEventListeners();
-        this.setupRangeSliders();
-        this.setupTabs();
-        this.initWaveform();
-        this.initAudioContext();
-    }
-
-    initAudioContext() {
-        try {
-            this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
-            this.log('AudioContext inicializado com sucesso', 'success');
-        } catch (e) {
-            this.log('Erro ao inicializar AudioContext: ' + e.message, 'error');
-        }
-    }
-    setupEventListeners() {
-        // 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));
-        
-        // JSON upload handling
-        this.setupJSONUpload();
-    }
-        
-        // Keyboard shortcuts
-        document.addEventListener('keydown', (e) => {
-            if (e.ctrlKey && e.key === 'Enter') {
-                this.startProcessing();
-            }
-        });
-    }
-
-    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', (e) => {
-                e.preventDefault();
-                const target = tab.dataset.tab;
-                
-                // Update active states
-                tabs.forEach(t => {
-                    if (t.dataset.tab === target) {
-                        t.classList.add('border-b-primary-500', 'bg-primary-500/10');
-                        t.classList.remove('text-slate-400');
-                    } else {
-                        t.classList.remove('border-b-primary-500', 'bg-primary-500/10');
-                        t.classList.add('text-slate-400');
-                    }
-                });
-
-                contents.forEach(c => {
-                    c.classList.toggle('hidden', c.id !== `tab-${target}`);
-                });
-
-                // Force redraw
-                const canvas = document.getElementById('waveform');
-                if (canvas) {
-                    setTimeout(() => {
-                        this.drawWaveform();
-                    }, 100);
-                }
-            });
-        });
-
-        // Activate first tab by default
-        if (tabs.length > 0) {
-            tabs[0].click();
+validateAndLoadJson(data, sourceName) {
+        if (!Array.isArray(data)) {
+            throw new Error('Invalid JSON format: Expected array');
         }
-    }
 
-    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);
-    }
-    async 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)
-            )
+        const isValid = data.every(item => 
+            item.text !== undefined && 
+            typeof item.start_time === 'number' && 
+            typeof item.end_time === 'number'
         );
 
-        if (validFiles.length !== newFiles.length) {
-            this.log('Apenas arquivos de áudio são permitidos', 'warning');
-        }
-
-        for (const file of validFiles) {
-            try {
-                this.log(`Carregando ${file.name}...`, 'info');
-                const arrayBuffer = await file.arrayBuffer();
-                const audioBuffer = await this.audioContext.decodeAudioData(arrayBuffer);
-                
-                this.files.push({
-                    file: file,
-                    buffer: audioBuffer,
-                    name: file.name,
-                    size: file.size,
-                    duration: audioBuffer.duration
-                });
-                
-                this.log(`${file.name} carregado (${audioBuffer.duration.toFixed(2)}s)`, 'success');
-            } catch (err) {
-                this.log(`Erro ao carregar ${file.name}: ${err.message}`, 'error');
-            }
-        }
-        
-        this.updateFileQueue();
-        
-        if (validFiles.length > 0 && this.files.length > 0) {
-            this.loadWaveform(this.files[0].buffer);
-            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 cursor-pointer" onclick="window.app.selectFile(${index})">
-                <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.formatDuration(file.duration)} • ${this.formatFileSize(file.file.size)}</p>
-                    </div>
-                </div>
-                <button onclick="event.stopPropagation(); 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();
-    }
-
-    selectFile(index) {
-        if (this.files[index]) {
-            this.loadWaveform(this.files[index].buffer);
-            this.log(`Visualizando: ${this.files[index].name}`, 'info');
+        if (!isValid) {
+            throw new Error('Each item must have: text (string), start_time (number), end_time (number)');
         }
-    }
 
-    formatDuration(seconds) {
-        const mins = Math.floor(seconds / 60);
-        const secs = Math.floor(seconds % 60);
-        return `${mins}:${secs.toString().padStart(2, '0')}`;
-    }
-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;
-        }
-
-        const blocks = this.smartTextSplit(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 hover:border-primary-500/30 transition-colors">
-                <span class="text-primary-500 font-mono text-xs mt-0.5 w-6">${i + 1}</span>
-                <span class="text-slate-300 flex-1">${block.text}</span>
-                <span class="text-xs text-slate-600 whitespace-nowrap">${block.cleanLength} chars</span>
-            </div>
-        `).join('');
-        
-        this.log(`Roteiro dividido em ${blocks.length} blocos inteligentes`, 'success');
-        return blocks;
-    }
-
-    smartTextSplit(text) {
-        const maxLen = this.config.text.maxBlockLen;
-        const publico = this.config.text.publico;
-        
-        // Limpa o texto mantendo pontuação importante
-        const cleanText = text.replace(/\s+/g, ' ').trim();
-        const sentences = cleanText.match(/[^.!?]+[.!?]+[\s$]|[^.!?]+$/g) || [cleanText];
-        
-        const blocks = [];
-        let currentBlock = [];
-        let currentLen = 0;
-        
-        const weakWords = ['e', 'ou', 'mas', 'por', 'com', 'para', 'em', 'de', 'do', 'da', 'a', 'o', 'que', 'se', 'um', 'uma'];
-        const strongStarters = ['E', 'OU', 'MAS', 'PORÉM', 'TODAVIA'];
-        
-        sentences.forEach(sentence => {
-            const words = sentence.trim().split(/\s+/);
-            
-            words.forEach((word, idx) => {
-                const cleanWord = word.replace(/[^\wÀ-ÿ]/g, '');
-                const wordLen = cleanWord.length;
-                
-                // Força nova linha se começar com E/QUE (regra do script original)
-                const isForcedBreak = strongStarters.includes(word.toUpperCase()) && currentBlock.length > 0;
-                
-                if ((currentLen + wordLen > maxLen && currentBlock.length > 0) || isForcedBreak) {
-                    // Verifica se termina com palavra fraca
-                    if (currentBlock.length > 0 && weakWords.includes(currentBlock[currentBlock.length - 1].toLowerCase())) {
-                        const weak = currentBlock.pop();
-                        blocks.push(this.createBlockObj(currentBlock.join(' '), publico));
-                        currentBlock = [weak];
-                        currentLen = weak.replace(/[^\wÀ-ÿ]/g, '').length;
-                    } else {
-                        blocks.push(this.createBlockObj(currentBlock.join(' '), publico));
-                        currentBlock = [];
-                        currentLen = 0;
-                    }
-                }
-                
-                currentBlock.push(word);
-                currentLen += wordLen;
-            });
-        });
-        
-        if (currentBlock.length > 0) {
-            blocks.push(this.createBlockObj(currentBlock.join(' '), publico));
-        }
-        
-        return blocks;
+        this.jsonTimestamps = data;
+        this.updateJsonUI(sourceName, data.length);
     }
 
-    createBlockObj(text, publico) {
-        const cleanText = text.replace(/\s/g, '');
-        // Se público H, converte para uppercase
-        const finalText = publico === 'H' ? text.toUpperCase() : text;
-        return {
-            text: finalText,
-            cleanLength: cleanText.length,
-            clean: cleanText.toLowerCase()
-        };
-    }
-    
-    setupJSONUpload() {
-        // Elementos da interface
-        const uploadTab = document.getElementById('json-upload-tab');
-        const inputTab = document.getElementById('json-input-tab');
-        const uploadSection = document.getElementById('json-upload-section');
-        const textareaSection = document.getElementById('json-textarea-section');
-        const jsonTextarea = document.getElementById('json-textarea');
-        const parseJsonBtn = document.getElementById('parse-json-btn');
-        
-        const jsonZone = document.getElementById('json-upload-zone');
-        const jsonInput = document.getElementById('json-input');
-        const jsonStatus = document.getElementById('json-status');
-        const jsonFilename = document.getElementById('json-filename');
-        const jsonWordsCount = document.getElementById('json-words-count');
-        
-        // Alternar entre tabs
-        uploadTab.addEventListener('click', () => {
-            uploadTab.classList.add('border-b-2', 'border-secondary-500', 'text-secondary-400', 'bg-secondary-500/10');
-            uploadTab.classList.remove('text-slate-400', 'bg-slate-900/70');
-            inputTab.classList.remove('border-b-2', 'border-secondary-500', 'text-secondary-400', 'bg-secondary-500/10');
-            inputTab.classList.add('text-slate-400', 'bg-slate-900/70');
-            uploadSection.classList.remove('hidden');
-            textareaSection.classList.add('hidden');
-        });
-        
-        inputTab.addEventListener('click', () => {
-            inputTab.classList.add('border-b-2', 'border-secondary-500', 'text-secondary-400', 'bg-secondary-500/10');
-            inputTab.classList.remove('text-slate-400', 'bg-slate-900/70');
-            uploadTab.classList.remove('border-b-2', 'border-secondary-500', 'text-secondary-400', 'bg-secondary-500/10');
-            uploadTab.classList.add('text-slate-400', 'bg-slate-900/70');
-            uploadSection.classList.add('hidden');
-            textareaSection.classList.remove('hidden');
-        });
-        
-        // Upload de arquivo (mesma lógica anterior)
-        jsonZone.addEventListener('click', () => jsonInput.click());
-        
-        jsonInput.addEventListener('change', async (e) => {
-            const file = e.target.files[0];
-            if (!file) return;
-            
-            try {
-                const text = await file.text();
-                const data = JSON.parse(text);
-                this.validateAndLoadJson(data, file.name);
-                
-            } catch (error) {
-                this.handleJsonError(error);
-            }
-        });
-        
-        // Drag and drop para JSON
-        jsonZone.addEventListener('dragover', (e) => {
-            e.preventDefault();
-            jsonZone.classList.add('border-secondary-500', 'bg-secondary-500/20');
-        });
-        
-        jsonZone.addEventListener('dragleave', () => {
-            jsonZone.classList.remove('border-secondary-500', 'bg-secondary-500/20');
-        });
-        
-        jsonZone.addEventListener('drop', (e) => {
-            e.preventDefault();
-            jsonZone.classList.remove('border-secondary-500', 'bg-secondary-500/20');
-            
-            const file = e.dataTransfer.files[0];
-            if (file && (file.name.endsWith('.json') || file.type === 'application/json')) {
-                const reader = new FileReader();
-                reader.onload = (event) => {
-                    try {
-                        const data = JSON.parse(event.target.result);
-                        this.validateAndLoadJson(data, file.name);
-                    } catch (error) {
-                        this.handleJsonError(error);
-                    }
-                };
-                reader.readAsText(file);
-            }
-        });
-        
-        // Parse do JSON digitado
-        parseJsonBtn.addEventListener('click', () => {
-            try {
-                const data = JSON.parse(jsonTextarea.value);
-                this.validateAndLoadJson(data, 'JSON digitado');
-                
-                // Mostra feedback visual
-                parseJsonBtn.innerHTML = `<i data-feather="check-circle" class="w-4 h-4 text-emerald-400"></i> JSON Carregado!`;
-                setTimeout(() => {
-                    parseJsonBtn.innerHTML = `<i data-feather="check" class="w-4 h-4"></i> Validar & Carregar JSON`;
-                }, 2000);
-                feather.replace();
-                
-            } catch (error) {
-                parseJsonBtn.innerHTML = `<i data-feather="x" class="w-4 h-4 text-red-400"></i> ${error.message.substring(0, 30)}...`;
-                setTimeout(() => {
-                    parseJsonBtn.innerHTML = `<i data-feather="check" class="w-4 h-4"></i> Validar & Carregar JSON`;
-                }, 2000);
-                feather.replace();
-            }
-        });
-    }
-    
-    validateAndLoadJson(data, sourceName) {
-        // Valida formato do JSON
-        if (!Array.isArray(data)) {
-            throw new Error('JSON deve ser um array');
-        }
-        
-        // Valida estrutura dos itens
-        const valid = data.every(item => 
-            item.hasOwnProperty('text') && 
-            item.hasOwnProperty('start_time') && 
-            item.hasOwnProperty('end_time')
-        );
-        
-        if (!valid) {
-            throw new Error('Cada item deve ter: text, start_time, end_time');
-        }
-        
-        this.jsonTimestamps = data;
-        
-        // Atualiza UI
+    updateJsonUI(filename, wordCount) {
         const jsonStatus = document.getElementById('json-status');
         const jsonFilename = document.getElementById('json-filename');
         const jsonWordsCount = document.getElementById('json-words-count');
-        const jsonZone = document.getElementById('json-upload-zone');
-        
-        jsonStatus.classList.remove('hidden');
-        jsonFilename.textContent = sourceName;
-        jsonWordsCount.textContent = `${data.length} palavras carregadas`;
-        jsonZone.classList.add('border-secondary-500/50', 'bg-secondary-500/10');
-        
-        this.log(`JSON carregado: ${data.length} palavras de ${sourceName}`, 'success');
-    }
-    
-    handleJsonError(error) {
-        this.log(`Erro ao carregar JSON: ${error.message}`, 'error');
-        this.jsonTimestamps = null;
-        
-        const jsonStatus = document.getElementById('json-status');
-        const jsonZone = document.getElementById('json-upload-zone');
-        
-        jsonStatus.classList.add('hidden');
-        jsonZone.classList.remove('border-secondary-500/50', 'bg-secondary-500/10');
-    }
-    async startProcessing() {
-        if (this.files.length === 0) {
-            this.log('Nenhum arquivo para processar', 'error');
-            return;
-        }
-
-        const scriptText = document.getElementById('script-text').value.trim();
-        if (!scriptText && !this.jsonTimestamps) {
-            this.log('Insira o roteiro ou carregue um JSON com timestamps', 'warning');
-            return;
-        }
-        if (!scriptText) {
-            this.log('Insira o roteiro/texto para alinhamento', 'warning');
-            return;
-        }
-        
-        // Verifica se deve usar JSON de timestamps
-        const useJSON = document.getElementById('use-json-timestamps').checked;
-        
-        if (useJSON && !this.jsonTimestamps) {
-            this.log('Marque "Usar JSON" e carregue um arquivo JSON primeiro', 'warning');
-            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 completo...', 'info');
-
-        try {
-            for (let i = 0; i < this.files.length; i++) {
-                const fileData = this.files[i];
-                this.log(`Processando: ${fileData.name}`, 'info');
-                
-                // 1. Detecção e remoção de silêncio real
-                this.log('Etapa 1/5: Detectando e removendo silêncios...', 'info');
-                const processedAudio = await this.removeSilence(fileData.buffer);
-                this.processedBuffers.set(fileData.name, processedAudio);
-                
-                // 2. Usa JSON ou transcreve com Whisper
-                let transcript;
-                if (useJSON && this.jsonTimestamps) {
-                    this.log('Etapa 2/5: Usando JSON de timestamps carregado...', 'info');
-                    transcript = this.createTranscriptFromJSON(this.jsonTimestamps);
-                } else {
-                    this.log('Etapa 2/5: Transcrevendo com Whisper AI...', 'info');
-                    transcript = await this.transcribeWithWhisper(processedAudio.blob);
-                }
-                this.transcriptions.set(fileData.name, transcript);
-                
-                // 3. Divisão inteligente do roteiro
-                this.log('Etapa 3/5: Dividindo roteiro em blocos...', 'info');
-                const blocks = this.smartTextSplit(scriptText);
-                
-                // 4. Alinhamento inteligente
-                this.log('Etapa 4/5: Alinhando blocos com áudio...', 'info');
-                const alignedBlocks = await this.alignBlocksWithTranscript(blocks, transcript, processedAudio);
-                
-                // 5. Geração dos arquivos de exportação
-                this.log('Etapa 5/5: Gerando arquivos de exportação...', 'info');
-                
-                // Verifica quais formatos exportar
-                const exportSRT = document.getElementById('export-srt').checked;
-                const exportJSON = document.getElementById('export-json').checked;
-                const exportBlocks = document.getElementById('export-blocks').checked;
-                
-                if (exportSRT) {
-                    this.log('Gerando SRT...', 'info');
-                    const srtContent = this.generateSRT(alignedBlocks);
-                    this.downloadSRT(srtContent, fileData.name);
-                }
-                
-                if (exportJSON) {
-                    this.log('Gerando JSON com timestamps...', 'info');
-                    const jsonContent = this.generateJSON(alignedBlocks, transcript);
-                    this.downloadJSON(jsonContent, fileData.name);
-                }
-                
-                if (exportBlocks) {
-                    this.log('Gerando arquivo de blocos...', 'info');
-                    const blocksContent = this.generateBlocks(alignedBlocks);
-                    this.downloadBlocks(blocksContent, fileData.name);
-                }
-                
-                // Download do áudio processado (sempre)
-                this.downloadProcessedAudio(processedAudio.blob, fileData.name);
-                
-                this.log(`${fileData.name} processado com sucesso!`, 'success');
-            }
-            
-            this.updateStatus('Concluído', 'success');
-            this.showCompletionModal();
-            
-        } catch (error) {
-            this.log(`Erro no processamento: ${error.message}`, 'error');
-            console.error(error);
-            this.updateStatus('Erro', 'error');
-        } finally {
-            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;
-        }
-    }
-
-    async removeSilence(audioBuffer) {
-        const threshold = parseInt(document.getElementById('silence-threshold').value);
-        const minSilence = parseInt(document.getElementById('min-silence').value) / 1000;
-        const keepSilence = parseInt(document.getElementById('keep-silence').value) / 1000;
-        
-        // Converte para mono para análise
-        const monoBuffer = this.convertToMono(audioBuffer);
-        const data = monoBuffer.getChannelData(0);
-        const sampleRate = audioBuffer.sampleRate;
-        
-        const thresholdAmp = Math.pow(10, threshold / 20);
-        const minSamples = Math.floor(minSilence * sampleRate);
-        const keepSamples = Math.floor(keepSilence * sampleRate);
-        
-        const segments = [];
-        let currentStart = 0;
-        let isSilent = false;
-        let silenceStart = 0;
         
-        // Detecção de silêncio
-        for (let i = 0; i < data.length; i++) {
-            const isSilentSample = Math.abs(data[i]) < thresholdAmp;
+        if (jsonStatus && jsonFilename && jsonWordsCount) {
+            jsonStatus.classList.remove('hidden');
+            jsonFilename.textContent = filename;
+            jsonWordsCount.textContent = `${wordCount} palavras`;
             
-            if (isSilentSample && !isSilent) {
-                silenceStart = i;
-                isSilent = true;
-            } else if (!isSilentSample && isSilent) {
-                const silenceDuration = i - silenceStart;
-                if (silenceDuration > minSamples) {
-                    // Mantém keepSilence no início e fim do silêncio
-                    segments.push({
-                        start: currentStart,
-                        end: Math.max(0, silenceStart - keepSamples)
-                    });
-                    currentStart = Math.min(data.length, i + keepSamples);
-                }
-                isSilent = false;
-            }
+            // Visual feedback
+            const zone = document.getElementById('json-upload-zone');
+            zone.classList.add('border-green-500', 'bg-green-100');
+            setTimeout(() => {
+                zone.classList.remove('border-green-500', 'bg-green-100');
+            }, 1000);
         }
-        
-        // Adiciona último segmento
-        if (currentStart < data.length) {
-            segments.push({
-                start: currentStart,
-                end: data.length
-            });
-        }
-        
-        // Concatena segmentos de áudio
-        let totalLength = 0;
-        segments.forEach(seg => totalLength += (seg.end - seg.start));
-        
-        const newBuffer = this.audioContext.createBuffer(
-            audioBuffer.numberOfChannels,
-            totalLength,
-            sampleRate
-        );
-        
-        let offset = 0;
-        for (const seg of segments) {
-            const segmentLength = seg.end - seg.start;
-            for (let ch = 0; ch < audioBuffer.numberOfChannels; ch++) {
-                const channelData = audioBuffer.getChannelData(ch);
-                const newData = newBuffer.getChannelData(ch);
-                for (let i = 0; i < segmentLength; i++) {
-                    newData[offset + i] = channelData[seg.start + i];
-                }
-            }
-            offset += segmentLength;
-        }
-        
-        // Converte para Blob WAV
-        const wavBlob = await this.audioBufferToWav(newBuffer);
-        
-        return {
-            buffer: newBuffer,
-            blob: wavBlob,
-            segments: segments,
-            originalDuration: audioBuffer.duration,
-            newDuration: newBuffer.duration
-        };
-    }
-
-    convertToMono(buffer) {
-        if (buffer.numberOfChannels === 1) return buffer;
-        
-        const mono = this.audioContext.createBuffer(1, buffer.length, buffer.sampleRate);
-        const data = mono.getChannelData(0);
-        
-        for (let i = 0; i < buffer.length; i++) {
-            let sum = 0;
-            for (let ch = 0; ch < buffer.numberOfChannels; ch++) {
-                sum += buffer.getChannelData(ch)[i];
-            }
-            data[i] = sum / buffer.numberOfChannels;
-        }
-        
-        return mono;
-    }
-
-    audioBufferToWav(buffer) {
-        const length = buffer.length * buffer.numberOfChannels * 2 + 44;
-        const arrayBuffer = new ArrayBuffer(length);
-        const view = new DataView(arrayBuffer);
-        const channels = [];
-        let sample;
-        let offset = 0;
-        let pos = 0;
-        
-        // Escreve WAV header
-        const setUint16 = (data) => {
-            view.setUint16(pos, data, true);
-            pos += 2;
-        }
-        const setUint32 = (data) => {
-            view.setUint32(pos, data, true);
-            pos += 4;
-        }
-        
-        setUint32(0x46464952); // "RIFF"
-        setUint32(length - 8); // file length - 8
-        setUint32(0x45564157); // "WAVE"
-        setUint32(0x20746d66); // "fmt " chunk
-        setUint32(16); // length = 16
-        setUint16(1); // PCM
-        setUint16(buffer.numberOfChannels);
-        setUint32(buffer.sampleRate);
-        setUint32(buffer.sampleRate * 2 * buffer.numberOfChannels); // avg bytes/sec
-        setUint16(buffer.numberOfChannels * 2); // block-align
-        setUint16(16); // 16-bit
-        setUint32(0x61746164); // "data" - chunk
-        setUint32(length - pos - 4); // chunk length
-        
-        // Escreve dados de áudio intercalados
-        for (let i = 0; i < buffer.numberOfChannels; i++) {
-            channels.push(buffer.getChannelData(i));
-        }
-        
-        while (pos < length) {
-            for (let i = 0; i < buffer.numberOfChannels; i++) {
-                sample = Math.max(-1, Math.min(1, channels[i][offset])); // clamp
-                sample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767)|0; // scale
-                view.setInt16(pos, sample, true);
-                pos += 2;
-            }
-            offset++;
-        }
-        
-        return new Blob([arrayBuffer], { type: 'audio/wav' });
-    }
-
-    async transcribeWithWhisper(audioBlob) {
-        // Usa Hugging Face Inference API (gratuita para demonstração)
-        // Em produção, use sua própria API key ou backend
-        try {
-            this.log('Enviando áudio para transcrição...', 'info');
-            
-            // Simulação de delay para API
-            await this.delay(2000);
-            
-            // Para demonstração sem backend, gera transcrição mock realista baseada no áudio
-            // Em produção real, descomente o código abaixo e use uma API real:
-            /*
-            const formData = new FormData();
-            formData.append('audio', audioBlob);
-            
-            const response = await fetch('https://api-inference.huggingface.co/models/openai/whisper-small', {
-                method: 'POST',
-                headers: {
-                    'Authorization': 'Bearer YOUR_TOKEN'
-                },
-                body: audioBlob
-            });
-            
-            const result = await response.json();
-            return this.parseWhisperOutput(result);
-            */
-            
-            // Geração mock realista para demonstração
-            return this.generateRealisticTranscript(audioBlob);
-            
-        } catch (error) {
-            this.log('Erro na transcrição: ' + error.message, 'error');
-            throw error;
-        }
-    }
-
-    createTranscriptFromJSON(jsonTimestamps) {
-        // Cria objeto de transcript a partir do JSON carregado
-        const segments = [];
-        const words = jsonTimestamps.map(item => ({
-            word: item.text,
-            start: item.start_time,
-            end: item.end_time
-        }));
-        
-        // Agrupa palavras em segmentos (3-6 palavras por segmento)
-        let segmentStart = null;
-        let segmentWords = [];
-        
-        words.forEach((w, idx) => {
-            if (segmentStart === null) segmentStart = w.start;
-            segmentWords.push(w.word);
-            
-            if (segmentWords.length >= 3 + Math.floor(Math.random() * 4)) {
-                segments.push({
-                    start: segmentStart,
-                    end: w.end,
-                    text: segmentWords.join(' '),
-                    words: words.filter((_, i) => i >= idx - segmentWords.length + 1 && i <= idx)
-                });
-                segmentStart = null;
-                segmentWords = [];
-            }
-        });
-        
-        // Adiciona último segmento
-        if (segmentWords.length > 0) {
-            const lastWords = words.slice(-segmentWords.length);
-            segments.push({
-                start: lastWords[0].start,
-                end: lastWords[lastWords.length - 1].end,
-                text: segmentWords.join(' '),
-                words: lastWords
-            });
-        }
-        
-        return {
-            segments,
-            text: segments.map(s => s.text).join(' '),
-            words: words
-        };
-    }
-    
-    generateRealisticTranscript(audioBlob) {
-        // Gera segmentos realistas baseados na duração do áudio
-        const duration = audioBlob.size / 16000; // estimativa aproximada
-        const segments = [];
-        const words = [];
-        
-        // Palavras mais variadas para teste
-        const wordBank = [
-            'Para', 'tudo', 'Olha', 'só', 'esse', 'kit', 'de', 'quatro', 'calças', 'capri',
-            'mais', 'lindas', 'por', 'menos', 'de', 'R90', 'Com', 'a', 'união', 'da',
-            'sarja', 'lycra', 'e', 'poliéster', 'ela', 'não', 'amassa', 'não', 'desbota',
-            'tem', 'aquela', 'cintura', 'alta', 'que', 'modela', 'sua', 'silhueta',
-            'sem', 'apertar', 'nada', 'Graças', 'à', 'tecnologia', 'antiodor', 'regulação',
-            'térmica', 'você', 'se', 'mantém', 'fresca', 'segura', 'mesmo', 'na', 'correria',
-            'do', 'dia', 'a', 'dia', 'E', 'olha', 'isso', 'bolsos', 'fundos', 'reais',
-            'zero', 'transparência', 'para', 'você', 'agachar', 'sem', 'medo', 'Mas', 'corre',
-            'mulher', 'A', 'promoção', 'acaba', 'nesse', 'domingo', 'Se', 'não', 'agir',
-            'agora', 'já', 'sabe', 'Clique', 'em', 'Saiba', 'mais', 'e', 'garanta', 'sua'
-        ];
-        
-        let currentTime = 0;
-        let wordIdx = 0;
-        
-        // Gera palavras individuais com timestamps precisos
-        while (currentTime < duration && wordIdx < wordBank.length) {
-            const wordDuration = 0.2 + Math.random() * 0.4; // 200-600ms por palavra
-            const word = wordBank[wordIdx % wordBank.length];
-            
-            words.push({
-                word: word,
-                start: currentTime,
-                end: currentTime + wordDuration
-            });
-            
-            wordIdx++;
-            currentTime += wordDuration + 0.05; // pequeno gap entre palavras
-        }
-        
-        // Cria segmentos agrupando palavras
-        let segmentStart = 0;
-        let segmentWords = [];
-        
-        words.forEach((w, idx) => {
-            segmentWords.push(w.word);
-            
-            // Cria novo segmento a cada 3-6 palavras
-            if (segmentWords.length >= 3 + Math.floor(Math.random() * 4)) {
-                segments.push({
-                    start: segmentStart,
-                    end: w.end,
-                    text: segmentWords.join(' '),
-                    words: words.filter((_, i) => i >= idx - segmentWords.length + 1 && i <= idx)
-                });
-                segmentStart = w.end;
-                segmentWords = [];
-            }
-        });
-        
-        // Adiciona último segmento se restar palavras
-        if (segmentWords.length > 0) {
-            const lastWords = words.slice(-segmentWords.length);
-            segments.push({
-                start: segmentStart,
-                end: lastWords[lastWords.length - 1].end,
-                text: segmentWords.join(' '),
-                words: lastWords
-            });
-        }
-        
-        // Extrai todas as palavras para o JSON
-        const allWords = words.map(w => ({
-            word: w.word,
-            start: w.start,
-            end: w.end
-        }));
-        
-        return { 
-            segments, 
-            text: segments.map(s => s.text).join(' '),
-            words: allWords
-        };
-    }
-
-    async alignBlocksWithTranscript(blocks, transcript, processedAudio) {
-        const advance = parseInt(document.getElementById('capcut-advance').value) / 1000;
-        const preroll = parseInt(document.getElementById('preroll').value) / 1000;
-        const postroll = parseInt(document.getElementById('postroll').value) / 1000;
-        
-        const aligned = [];
-        let lastEndTime = 0;
-        
-        // Algoritmo de alinhamento por similaridade fonética e âncoras
-        for (let i = 0; i < blocks.length; i++) {
-            const block = blocks[i];
-            const blockWords = block.clean.split(/\s+/);
-            
-            // Encontra melhor match no transcript
-            let bestMatch = null;
-            let bestScore = -1;
-            
-            for (const seg of transcript.segments) {
-                if (seg.start < lastEndTime) continue; // Não volta no tempo
-                
-                const segWords = seg.text.toLowerCase().replace(/[^\w\s]/g, '').split(/\s+/);
-                const score = this.calculateSimilarity(blockWords, segWords);
-                
-                if (score > bestScore) {
-                    bestScore = score;
-                    bestMatch = seg;
-                }
-            }
-            
-            if (bestMatch && bestScore > 0.3) { // threshold de similaridade
-                const startTime = Math.max(0, bestMatch.start + advance - preroll);
-                const endTime = Math.min(processedAudio.newDuration, bestMatch.end + advance + postroll);
-                
-                aligned.push({
-                    index: i + 1,
-                    text: block.text,
-                    startTime: startTime,
-                    endTime: endTime,
-                    confidence: bestScore
-                });
-                
-                lastEndTime = endTime;
-            } else {
-                // Se não encontrou match bom, estima baseado no último
-                const estimatedDuration = block.clean.length * 0.08; // ~8ms por caractere
-                const startTime = lastEndTime + 0.1;
-                const endTime = startTime + estimatedDuration;
-                
-                aligned.push({
-                    index: i + 1,
-                    text: block.text,
-                    startTime: startTime,
-                    endTime: Math.min(endTime, processedAudio.newDuration),
-                    confidence: 0,
-                    estimated: true
-                });
-                
-                lastEndTime = endTime;
-            }
-        }
-        
-        this.log(`${aligned.length} blocos alinhados com áudio`, 'success');
-        return aligned;
-    }
-
-    calculateSimilarity(words1, words2) {
-        // Algoritmo simples de similaridade de cosseno entre conjuntos de palavras
-        const set1 = new Set(words1);
-        const set2 = new Set(words2);
-        
-        let intersection = 0;
-        for (const w of set1) {
-            if (set2.has(w)) intersection++;
-        }
-        
-        return intersection / Math.sqrt(set1.size * set2.size);
-    }
-
-    generateSRT(alignedBlocks) {
-        let srt = '';
-        
-        alignedBlocks.forEach((block, idx) => {
-            const start = this.formatSRTTime(block.startTime);
-            const end = this.formatSRTTime(block.endTime);
-            
-            srt += `${idx + 1}\n`;
-            srt += `${start} --> ${end}\n`;
-            srt += `${block.text}\n\n`;
-        });
-        
-        return srt;
-    }
-
-    generateJSON(alignedBlocks, transcript) {
-        // Gera JSON com timestamps palavra-a-palavra
-        const wordTimestamps = [];
-        
-        // Se tiver transcript com palavras individuais (do JSON carregado ou transcrição), usa ele
-        if (transcript && transcript.words) {
-            transcript.words.forEach(word => {
-                wordTimestamps.push({
-                    text: word.word,
-                    start_time: parseFloat(word.start.toFixed(2)),
-                    end_time: parseFloat(word.end.toFixed(2))
-                });
-            });
-        } else {
-            // Caso contrário, expande os blocos em palavras estimadas
-            alignedBlocks.forEach(block => {
-                const words = block.text.split(/\s+/);
-                const blockDuration = block.endTime - block.startTime;
-                const avgWordDuration = blockDuration / words.length;
-                
-                words.forEach((word, idx) => {
-                    wordTimestamps.push({
-                        text: word,
-                        start_time: parseFloat((block.startTime + (idx * avgWordDuration)).toFixed(2)),
-                        end_time: parseFloat((block.startTime + ((idx + 1) * avgWordDuration)).toFixed(2))
-                    });
-                });
-            });
-        }
-        
-        return JSON.stringify(wordTimestamps, null, 2);
-    }
-
-    generateBlocks(alignedBlocks) {
-        // Gera arquivo de texto com blocos separados e metadados
-        let blocksText = '';
-        
-        alignedBlocks.forEach((block, idx) => {
-            const start = this.formatSRTTime(block.startTime);
-            const end = this.formatSRTTime(block.endTime);
-            
-            blocksText += `BLOCO ${idx + 1}\n`;
-            blocksText += `Início: ${start} | Fim: ${end}\n`;
-            blocksText += `Texto: ${block.text}\n`;
-            blocksText += `Caracteres: ${block.text.replace(/\s/g, '').length}\n`;
-            blocksText += `${'─'.repeat(50)}\n\n`;
-        });
-        
-        return blocksText;
-    }
-
-    formatSRTTime(seconds) {
-        const hrs = Math.floor(seconds / 3600);
-        const mins = Math.floor((seconds % 3600) / 60);
-        const secs = Math.floor(seconds % 60);
-        const ms = Math.floor((seconds % 1) * 1000);
-        
-        return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')},${ms.toString().padStart(3, '0')}`;
-    }
-
-    downloadSRT(content, originalFilename) {
-        const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = originalFilename.replace(/\.[^/.]+$/, '') + '.srt';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-        
-        this.log(`SRT baixado: ${a.download}`, 'success');
-    }
-
-    downloadProcessedAudio(blob, originalFilename) {
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = originalFilename.replace(/\.[^/.]+$/, '') + '_processed.wav';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-        
-        this.log(`Áudio processado baixado: ${a.download}`, 'success');
-    }
-
-    downloadJSON(content, originalFilename) {
-        const blob = new Blob([content], { type: 'application/json;charset=utf-8' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = originalFilename.replace(/\.[^/.]+$/, '') + '_timestamps.json';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-        
-        this.log(`JSON baixado: ${a.download}`, 'success');
-    }
-
-    downloadBlocks(content, originalFilename) {
-        const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = originalFilename.replace(/\.[^/.]+$/, '') + '_blocks.txt';
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-        
-        this.log(`Arquivo de blocos baixado: ${a.download}`, 'success');
-    }
-
-    showCompletionModal() {
-        const exportSRT = document.getElementById('export-srt').checked;
-        const exportJSON = document.getElementById('export-json').checked;
-        const exportBlocks = document.getElementById('export-blocks').checked;
-        
-        let formats = [];
-        if (exportSRT) formats.push('SRT');
-        if (exportJSON) formats.push('JSON');
-        if (exportBlocks) formats.push('Blocos');
-        
-        const modal = document.createElement('div');
-        modal.className = 'fixed inset-0 bg-black/80 backdrop-blur-sm flex items-center justify-center z-50 animate-fade-in';
-        modal.innerHTML = `
-            <div class="bg-slate-900 border border-primary-500/30 rounded-2xl p-8 max-w-md w-full mx-4 shadow-2xl transform scale-100 animate-scale-in">
-                <div class="w-16 h-16 bg-primary-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
-                    <i data-feather="check-circle" class="w-8 h-8 text-primary-400"></i>
-                </div>
-                <h3 class="text-xl font-bold text-center text-slate-100 mb-2">Processamento Concluído!</h3>
-                <p class="text-slate-400 text-center mb-6">
-                    Arquivos gerados automaticamente: <span class="text-primary-400 font-medium">${formats.join(', ')}</span>
-                </p>
-                <div class="space-y-2 text-sm text-slate-500 mb-6 bg-slate-950 rounded-lg p-4">
-                    <div class="flex justify-between">
-                        <span>Arquivos processados:</span>
-                        <span class="text-slate-300">${this.files.length}</span>
-                    </div>
-                    <div class="flex justify-between">
-                        <span>Formatos exportados:</span>
-                        <span class="text-emerald-400">${formats.length}</span>
-                    </div>
-                    <div class="flex justify-between">
-                        <span>Taxa de compressão:</span>
-                        <span class="text-secondary-400">~35% menor</span>
-                    </div>
-                </div>
-                <button onclick="this.closest('.fixed').remove()" class="w-full py-3 bg-primary-600 hover:bg-primary-500 text-white rounded-lg font-medium transition-colors">
-                    Fechar
-                </button>
-            </div>
-        `;
-        document.body.appendChild(modal);
-        feather.replace();
-    }
-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.processedBuffers.clear();
-        this.transcriptions.clear();
-        this.updateFileQueue();
-        document.getElementById('script-text').value = '';
-        document.getElementById('blocks-preview').classList.add('hidden');
-        this.resetWaveform();
-        this.log('Fila limpa', 'info');
-        this.updateStats();
-        this.updateStatus('Ocioso', 'idle');
-    }
-    updateStats() {
-        document.getElementById('stat-audios').setAttribute('value', this.files.length.toString());
-        
-        let totalSeconds = 0;
-        this.files.forEach(f => totalSeconds += f.duration);
-        
-        const mins = Math.floor(totalSeconds / 60);
-        const secs = Math.floor(totalSeconds % 60);
-        document.getElementById('stat-time').setAttribute('value', `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`);
-    }
-// Waveform Visualization REAL
-    initWaveform() {
-        const canvas = document.getElementById('waveform');
-        if (!canvas) return;
-        
-        const resize = () => {
-            canvas.width = canvas.offsetWidth;
-            canvas.height = canvas.offsetHeight;
-            canvas.style.width = '100%';
-            canvas.style.height = '128px';
-            if (this.currentAudioBuffer) {
-                this.loadWaveform(this.currentAudioBuffer);
-            } else {
-                this.drawEmptyWaveform();
-            }
-        };
-        
-        window.addEventListener('resize', resize);
-        resize();
-        
-        // Click para seek
-        canvas.addEventListener('click', (e) => {
-            if (!this.currentAudioBuffer) return;
-            const rect = canvas.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const percent = x / rect.width;
-            this.seekAudio(percent);
-        });
-    }
-
-    loadWaveform(audioBuffer) {
-        this.currentAudioBuffer = audioBuffer;
-        const canvas = document.getElementById('waveform');
-        const ctx = canvas.getContext('2d');
-        const width = canvas.width;
-        const height = canvas.height;
-        
-        // Extrai dados de forma de onda
-        const monoBuffer = this.convertToMono(audioBuffer);
-        const data = monoBuffer.getChannelData(0);
-        const step = Math.ceil(data.length / width);
-        
-        this.waveformData = [];
-        for (let i = 0; i < width; i++) {
-            let min = 1.0;
-            let max = -1.0;
-            for (let j = 0; j < step; j++) {
-                const datum = data[i * step + j];
-                if (datum < min) min = datum;
-                if (datum > max) max = datum;
-            }
-            this.waveformData.push({ min, max });
-        }
-        
-        this.drawWaveform();
-        
-        // Atualiza duração total
-        const duration = audioBuffer.duration;
-        const mins = Math.floor(duration / 60);
-        const secs = Math.floor(duration % 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 = 2;
-        const gap = 1;
-        
-        ctx.clearRect(0, 0, width, height);
-        
-        const gradient = ctx.createLinearGradient(0, 0, 0, height);
-        gradient.addColorStop(0, '#6366f1');
-        gradient.addColorStop(0.5, '#818cf8');
-        gradient.addColorStop(1, '#6366f1');
-        
-        ctx.fillStyle = gradient;
-        
-        this.waveformData.forEach((data, i) => {
-            const x = i * (barWidth + gap);
-            const barHeight = (data.max - data.min) * height * 0.8;
-            const y = (height - barHeight) / 2;
-            
-            ctx.fillRect(x, y, barWidth, barHeight);
-        });
-        
-        // Linha central
-        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');
-        
-        this.drawWaveform();
-        
-        const width = canvas.width;
-        const height = canvas.height;
-        const progressWidth = width * percent;
-        
-        ctx.fillStyle = 'rgba(245, 158, 11, 0.3)';
-        ctx.fillRect(0, 0, progressWidth, height);
-        
-        ctx.strokeStyle = '#f59e0b';
-        ctx.lineWidth = 2;
-        ctx.beginPath();
-        ctx.moveTo(progressWidth, 0);
-        ctx.lineTo(progressWidth, height);
-        ctx.stroke();
-    }
-
-    resetWaveform() {
-        this.currentAudioBuffer = null;
-        this.waveformData = [];
-        this.drawEmptyWaveform();
-        document.getElementById('total-duration').textContent = '00:00:00';
-        if (this.audioPlayer) {
-            this.audioPlayer.stop();
-            this.audioPlayer = null;
-        }
-    }
-
-    async togglePlayPreview() {
-        if (!this.currentAudioBuffer) {
-            this.log('Nenhum áudio carregado', 'warning');
-            return;
-        }
-        
-        if (this.isPlaying) {
-            if (this.audioPlayer) {
-                this.audioPlayer.stop();
-                this.isPlaying = false;
-            }
-        } else {
-            const source = this.audioContext.createBufferSource();
-            source.buffer = this.currentAudioBuffer;
-            source.connect(this.audioContext.destination);
-            source.start(0);
-            this.audioPlayer = source;
-            this.isPlaying = true;
-            
-            source.onended = () => {
-                this.isPlaying = false;
-            };
-            
-            // Animação de progresso
-            const startTime = this.audioContext.currentTime;
-            const duration = this.currentAudioBuffer.duration;
-            
-            const animate = () => {
-                if (!this.isPlaying) return;
-                const elapsed = this.audioContext.currentTime - startTime;
-                const progress = Math.min(elapsed / duration, 1);
-                this.updateWaveformProgress(progress);
-                if (progress < 1) requestAnimationFrame(animate);
-            };
-            requestAnimationFrame(animate);
-        }
-    }
-
-    seekAudio(percent) {
-        // Implementação básica de seek
-        this.log(`Seek para ${(percent * 100).toFixed(0)}%`, 'info');
-    }
-    // Funções utilitárias mantidas do código anterior
-}
-
-// Initialize App when DOM is ready
-document.addEventListener('DOMContentLoaded', () => {
-    window.app = new AudioPipeline();
-    feather.replace(); // Garante que ícones sejam renderizados
-});
-
-// Re-render icons when new elements are added
-document.addEventListener('DOMSubtreeModified', () => {
-    if (window.feather) {
-        feather.replace();
-    }
-});
+    }