🐳 07/02 - 04:42 - mas assim cara, eu devo mandar o json, precisamente, sem precisar passar pela opção de transcrever o audio que enviar, mas que deve separar do jeito que estao nas regras

index.html

@@ -82,6 +82,27 @@
                     <div class="lg:col-span-1 space-y-6">
                         <upload-zone></upload-zone>
                         
+                        <!-- JSON Upload Zone -->
+                        <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl backdrop-blur-md">
+                            <h3 class="text-lg font-semibold text-slate-200 mb-4 flex items-center gap-2">
+                                <i data-feather="code" class="w-5 h-5 text-secondary-400"></i>
+                                Upload JSON de Timestamps
+                            </h3>
+                            <div id="json-upload-zone" class="border-2 border-dashed border-slate-700 rounded-xl p-4 text-center transition-all duration-300 bg-slate-800/50 hover:border-secondary-500/50 hover:bg-secondary-500/5 cursor-pointer">
+                                <input type="file" id="json-input" accept=".json" class="hidden">
+                                <i data-feather="upload" class="w-6 h-6 text-slate-500 mx-auto mb-2"></i>
+                                <p class="text-sm text-slate-400">Arraste ou clique para enviar JSON</p>
+                                <p class="text-xs text-slate-600 mt-1">Formato: array com text, start_time, end_time</p>
+                            </div>
+                            <div id="json-status" class="mt-3 hidden">
+                                <div class="flex items-center gap-2 text-sm text-emerald-400">
+                                    <i data-feather="check-circle" class="w-4 h-4"></i>
+                                    <span id="json-filename">carregado.json</span>
+                                </div>
+                                <p class="text-xs text-slate-500 mt-1" id="json-words-count">0 palavras</p>
+                            </div>
+                        </div>
+                        
                         <div class="bg-slate-900/80 border border-slate-800 rounded-2xl p-5 shadow-xl backdrop-blur-md">
                             <h3 class="text-lg font-semibold text-slate-200 mb-4 flex items-center gap-2">
                                 <i data-feather="folder" class="w-5 h-5 text-primary-400"></i>
@@ -204,10 +225,18 @@
 
                             <!-- Tab Content: SRT -->
                             <div id="tab-srt" class="tab-content hidden p-6 space-y-6">
+                                <div class="flex items-center gap-3 p-3 bg-secondary-900/20 border border-secondary-700/30 rounded-lg mb-4">
+                                    <input type="checkbox" id="use-json-timestamps" class="w-4 h-4 rounded border-slate-600 text-secondary-500 focus:ring-secondary-500 bg-slate-700">
+                                    <div>
+                                        <label for="use-json-timestamps" class="text-sm font-medium text-slate-200 cursor-pointer">Usar JSON de Timestamps carregado</label>
+                                        <p class="text-xs text-slate-500">Pula a transcrição e usa os timestamps do JSON enviado</p>
+                                    </div>
+                                </div>
+                                
                                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                     <div class="space-y-2">
                                         <label class="text-sm font-medium text-slate-300">Modelo Whisper</label>
-                                        <select id="whisper-model" class="w-full bg-slate-800 border border-slate-700 rounded-lg px-4 py-2 text-slate-200 outline-none">
+                                        <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>

script.js

@@ -32,6 +32,7 @@ class AudioPipeline {
         this.currentAudioBuffer = null;
         this.audioPlayer = null;
         this.isPlaying = false;
+        this.jsonTimestamps = null; // Armazena timestamps do JSON carregado
         
         this.init();
     }
@@ -80,6 +81,10 @@ class AudioPipeline {
         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') {
@@ -323,6 +328,81 @@ formatFileSize(bytes) {
             clean: cleanText.toLowerCase()
         };
     }
+    
+    setupJSONUpload() {
+        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');
+        
+        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);
+                
+                // 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
+                jsonStatus.classList.remove('hidden');
+                jsonFilename.textContent = file.name;
+                jsonWordsCount.textContent = `${data.length} palavras carregadas`;
+                jsonZone.classList.add('border-secondary-500/50', 'bg-secondary-500/10');
+                
+                this.log(`JSON carregado: ${data.length} palavras`, 'success');
+                
+            } catch (error) {
+                this.log(`Erro ao carregar JSON: ${error.message}`, 'error');
+                this.jsonTimestamps = null;
+                jsonStatus.classList.add('hidden');
+                jsonZone.classList.remove('border-secondary-500/50', 'bg-secondary-500/10');
+            }
+        });
+        
+        // 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')) {
+                const dataTransfer = new DataTransfer();
+                dataTransfer.items.add(file);
+                jsonInput.files = dataTransfer.files;
+                jsonInput.dispatchEvent(new Event('change'));
+            }
+        });
+    }
     async startProcessing() {
         if (this.files.length === 0) {
             this.log('Nenhum arquivo para processar', 'error');
@@ -334,6 +414,14 @@ formatFileSize(bytes) {
             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');
@@ -356,9 +444,15 @@ formatFileSize(bytes) {
                 const processedAudio = await this.removeSilence(fileData.buffer);
                 this.processedBuffers.set(fileData.name, processedAudio);
                 
-                // 2. Transcrição real com Whisper (Hugging Face)
-                this.log('Etapa 2/5: Transcrevendo com Whisper AI...', 'info');
-                const transcript = await this.transcribeWithWhisper(processedAudio.blob);
+                // 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
@@ -604,6 +698,53 @@ formatFileSize(bytes) {
         }
     }
 
+    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
@@ -784,7 +925,7 @@ formatFileSize(bytes) {
         // Gera JSON com timestamps palavra-a-palavra
         const wordTimestamps = [];
         
-        // Se tiver transcript com palavras individuais, usa ele
+        // Se tiver transcript com palavras individuais (do JSON carregado ou transcrição), usa ele
         if (transcript && transcript.words) {
             transcript.words.forEach(word => {
                 wordTimestamps.push({