teste claude 1

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -1,15 +1,35 @@
-FROM python:3.9-slim
+FROM python:3.10-slim
 
+# Instalar dependências do sistema
+RUN apt-get update && apt-get install -y \
+    ffmpeg \
+    git \
+    wget \
+    build-essential \
+    && rm -rf /var/lib/apt/lists/*
+
+# Definir diretório de trabalho
 WORKDIR /app
 
+# Copiar arquivos de dependências
 COPY requirements.txt .
+
+# Instalar dependências Python
 RUN pip install --no-cache-dir -r requirements.txt
 
+# Copiar código da aplicação
 COPY . .
 
-# Criar diretórios com permissão total de escrita
-RUN mkdir -p /data/uploads && chmod -R 777 /data/uploads
-RUN mkdir -p /data/transcriptions && chmod -R 777 /data/transcriptions
+# Criar diretórios necessários
+RUN mkdir -p uploads outputs templates
 
+# Definir variáveis de ambiente
+ENV FLASK_APP=app.py
+ENV FLASK_ENV=production
+ENV PYTHONUNBUFFERED=1
+
+# Porta padrão do Hugging Face Spaces
 EXPOSE 7860
-CMD ["python", "app.py"]
+
+# Comando para executar a aplicação
+CMD ["python", "app.py"]

app.py

@@ -1,145 +1,146 @@
-from flask import Flask, render_template, request, jsonify, send_file
+from flask import Flask, render_template, request, jsonify, send_file, flash, redirect, url_for
 import os
-import torch
-import whisperx
+import subprocess
 import json
-from datetime import datetime
+from werkzeug.utils import secure_filename
+import threading
+import time
 
 app = Flask(__name__)
-app.config['MAX_CONTENT_LENGTH'] = 100 * 1024 * 1024  # 100MB máx
+app.secret_key = 'transcricao_audio_key_2024'
 
-# Novos caminhos válidos no Hugging Face
-UPLOAD_FOLDER = '/data/uploads'
-TRANSCRIPTIONS_FOLDER = '/data/transcriptions'
-SCORE_MINIMO = 0.5
+# Configurações
+UPLOAD_FOLDER = 'uploads'
+OUTPUT_FOLDER = 'outputs'
+ALLOWED_EXTENSIONS = {'mp3', 'wav', 'mp4', 'm4a', 'flac', 'ogg'}
 
-# Criar pastas com permissão
-for folder in [UPLOAD_FOLDER, TRANSCRIPTIONS_FOLDER]:
-    os.makedirs(folder, exist_ok=True)
+# Criar pastas se não existirem
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(OUTPUT_FOLDER, exist_ok=True)
 
-@app.route('/')
-def index():
-    return render_template('index.html')
-
-@app.route('/api/transcribe', methods=['POST'])
-def transcribe():
-    try:
-        if 'audio' not in request.files:
-            return jsonify({'error': 'Nenhum arquivo de áudio enviado'}), 400
-
-        audio_file = request.files['audio']
-        filename = request.form.get('filename', f'transcricao_{datetime.now().strftime("%Y%m%d_%H%M%S")}')
-        filename = "".join(c for c in filename if c.isalnum() or c in (' ', '-', '_')).rstrip()
-
-        temp_path = os.path.join(UPLOAD_FOLDER, f"temp_{datetime.now().strftime('%Y%m%d_%H%M%S')}_{audio_file.filename}")
-        audio_file.save(temp_path)
-
-        device = "cuda" if torch.cuda.is_available() else "cpu"
-        compute_type = "float16" if device == "cuda" else "int8"
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['OUTPUT_FOLDER'] = OUTPUT_FOLDER
+app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  # 500MB max
 
-        model = whisperx.load_model("medium", device, compute_type=compute_type, language="pt")
-        audio = whisperx.load_audio(temp_path)
-        result = model.transcribe(audio)
+# Status dos processamentos
+processing_status = {}
 
-        align_model, metadata = whisperx.load_align_model(language_code="pt", device=device)
-        aligned = whisperx.align(result["segments"], align_model, metadata, audio, device)
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
 
-        words = []
-        for word in aligned["word_segments"]:
-            if word["score"] < SCORE_MINIMO or not word["word"].strip():
-                continue
-            words.append({
-                "word": word["word"].capitalize(),
-                "start": round(word["start"], 3),
-                "end": round(word["end"], 3),
-                "score": round(word["score"], 3)
-            })
-
-        output = {
-            "metadata": {
-                "total_words": len(words),
-                "arquivo": filename,
-                "modelo": "WhisperX medium",
-                "created_at": datetime.now().isoformat()
-            },
-            "words": words
-        }
-
-        json_filename = f"{filename}.json"
-        json_path = os.path.join(TRANSCRIPTIONS_FOLDER, json_filename)
-        with open(json_path, 'w', encoding='utf-8') as f:
-            json.dump(output, f, ensure_ascii=False, indent=2)
-
-        if os.path.exists(temp_path):
-            os.remove(temp_path)
-
-        return jsonify({
-            'success': True,
-            'filename': json_filename,
-            'word_count': len(words),
-            'duration': max(w['end'] for w in words) if words else 0
-        })
-
-    except Exception as e:
-        return jsonify({'error': f'Erro na transcrição: {str(e)}'}), 500
-
-@app.route('/api/transcriptions', methods=['GET'])
-def list_transcriptions():
+def run_transcription(audio_path, job_id):
+    """Executa a transcrição em background"""
     try:
-        files = []
-        for filename in os.listdir(TRANSCRIPTIONS_FOLDER):
-            if filename.endswith('.json'):
-                filepath = os.path.join(TRANSCRIPTIONS_FOLDER, filename)
-                stat = os.stat(filepath)
-                try:
-                    with open(filepath, 'r', encoding='utf-8') as f:
-                        data = json.load(f)
-                        metadata = data.get('metadata', {})
-                except:
-                    metadata = {}
-                files.append({
-                    'filename': filename,
-                    'name': filename.replace('.json', ''),
-                    'size': stat.st_size,
-                    'created': datetime.fromtimestamp(stat.st_mtime).isoformat(),
-                    'word_count': metadata.get('total_words', 0)
-                })
-        files.sort(key=lambda x: x['created'], reverse=True)
-        return jsonify(files)
+        processing_status[job_id]['status'] = 'processing'
+        processing_status[job_id]['message'] = 'Iniciando transcrição...'
+        
+        # Executar o script de transcrição
+        result = subprocess.run(
+            ['python', 'transcriptor.py', audio_path],
+            capture_output=True,
+            text=True,
+            cwd='.'
+        )
+        
+        if result.returncode == 0:
+            # Encontrar o arquivo JSON gerado
+            base_name = os.path.splitext(os.path.basename(audio_path))[0]
+            json_file = f"{base_name}_transcricao.json"
+            
+            if os.path.exists(json_file):
+                # Mover para pasta de outputs
+                output_path = os.path.join(OUTPUT_FOLDER, json_file)
+                os.rename(json_file, output_path)
+                
+                processing_status[job_id]['status'] = 'completed'
+                processing_status[job_id]['message'] = 'Transcrição concluída com sucesso!'
+                processing_status[job_id]['output_file'] = json_file
+            else:
+                processing_status[job_id]['status'] = 'error'
+                processing_status[job_id]['message'] = 'Arquivo JSON não foi gerado'
+        else:
+            processing_status[job_id]['status'] = 'error'
+            processing_status[job_id]['message'] = f'Erro na transcrição: {result.stderr}'
+            
     except Exception as e:
-        return jsonify({'error': str(e)}), 500
+        processing_status[job_id]['status'] = 'error'
+        processing_status[job_id]['message'] = f'Erro interno: {str(e)}'
 
-@app.route('/api/transcription/<filename>')
-def get_transcription(filename):
-    try:
-        filepath = os.path.join(TRANSCRIPTIONS_FOLDER, filename)
-        if not os.path.exists(filepath):
-            return jsonify({'error': 'Arquivo não encontrado'}), 404
-        with open(filepath, 'r', encoding='utf-8') as f:
-            return jsonify(json.load(f))
-    except Exception as e:
-        return jsonify({'error': str(e)}), 500
-
-@app.route('/api/download/<filename>')
-def download_transcription(filename):
-    try:
-        filepath = os.path.join(TRANSCRIPTIONS_FOLDER, filename)
-        if not os.path.exists(filepath):
-            return jsonify({'error': 'Arquivo não encontrado'}), 404
-        return send_file(filepath, as_attachment=True)
-    except Exception as e:
-        return jsonify({'error': str(e)}), 500
+@app.route('/')
+def index():
+    return render_template('index.html')
 
-@app.route('/api/delete/<filename>', methods=['DELETE'])
-def delete_transcription(filename):
+@app.route('/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        flash('Nenhum arquivo selecionado')
+        return redirect(request.url)
+    
+    file = request.files['file']
+    if file.filename == '':
+        flash('Nenhum arquivo selecionado')
+        return redirect(request.url)
+    
+    if file and allowed_file(file.filename):
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        file.save(filepath)
+        
+        # Criar job ID único
+        job_id = f"{int(time.time())}_{filename}"
+        processing_status[job_id] = {
+            'status': 'queued',
+            'message': 'Aguardando processamento...',
+            'filename': filename
+        }
+        
+        # Iniciar transcrição em background
+        thread = threading.Thread(target=run_transcription, args=(filepath, job_id))
+        thread.daemon = True
+        thread.start()
+        
+        return render_template('processing.html', job_id=job_id, filename=filename)
+    
+    else:
+        flash('Formato de arquivo não suportado. Use: MP3, WAV, MP4, M4A, FLAC, OGG')
+        return redirect(url_for('index'))
+
+@app.route('/status/<job_id>')
+def check_status(job_id):
+    if job_id in processing_status:
+        return jsonify(processing_status[job_id])
+    else:
+        return jsonify({'status': 'not_found', 'message': 'Job não encontrado'})
+
+@app.route('/download/<filename>')
+def download_file(filename):
     try:
-        filepath = os.path.join(TRANSCRIPTIONS_FOLDER, filename)
-        if not os.path.exists(filepath):
-            return jsonify({'error': 'Arquivo não encontrado'}), 404
-        os.remove(filepath)
-        return jsonify({'success': True})
+        file_path = os.path.join(OUTPUT_FOLDER, filename)
+        if os.path.exists(file_path):
+            return send_file(file_path, as_attachment=True)
+        else:
+            flash('Arquivo não encontrado')
+            return redirect(url_for('index'))
     except Exception as e:
-        return jsonify({'error': str(e)}), 500
+        flash(f'Erro ao baixar arquivo: {str(e)}')
+        return redirect(url_for('index'))
+
+@app.route('/results')
+def results():
+    """Página para listar todos os resultados disponíveis"""
+    output_files = []
+    if os.path.exists(OUTPUT_FOLDER):
+        for filename in os.listdir(OUTPUT_FOLDER):
+            if filename.endswith('.json'):
+                filepath = os.path.join(OUTPUT_FOLDER, filename)
+                file_stats = os.stat(filepath)
+                output_files.append({
+                    'name': filename,
+                    'size': round(file_stats.st_size / 1024, 2),  # KB
+                    'modified': time.ctime(file_stats.st_mtime)
+                })
+    
+    return render_template('results.html', files=output_files)
 
 if __name__ == '__main__':
-    app.run(host='0.0.0.0', port=7860)
+    app.run(host='0.0.0.0', port=7860, debug=False)

readme_md.md

@@ -0,0 +1,165 @@
+# 🎙️ Transcritor de Áudio com WhisperX
+
+Sistema completo de transcrição de áudio usando WhisperX com interface web, otimizado para Hugging Face Spaces.
+
+## 🚀 Funcionalidades
+
+- **Transcrição de alta qualidade** com WhisperX modelo "medium"
+- **Alinhamento temporal preciso** de palavras
+- **Correção gramatical** automática com PTT5
+- **Interface web intuitiva** com drag & drop
+- **Suporte a múltiplos formatos** de áudio (MP3, WAV, MP4, M4A, FLAC, OGG)
+- **Processamento em background** com status em tempo real
+- **Download de resultados** em formato JSON
+
+## 📁 Estrutura do Projeto
+
+```
+/
+├── app.py                 # Aplicação Flask principal
+├── transcriptor.py        # Script de transcrição adaptado
+├── requirements.txt       # Dependências Python
+├── Dockerfile            # Container Docker
+├── README.md             # Este arquivo
+└── templates/            # Templates HTML
+    ├── index.html        # Página inicial
+    ├── processing.html   # Status de processamento
+    └── results.html      # Lista de resultados
+```
+
+## 🐳 Deploy no Hugging Face Spaces
+
+### 1. Criar Novo Space
+
+1. Acesse [Hugging Face Spaces](https://huggingface.co/spaces)
+2. Clique em "Create new Space"
+3. Configure:
+   - **Space name**: `transcricao-audio` (ou nome de sua preferência)
+   - **SDK**: Docker
+   - **Hardware**: GPU T4 small (recomendado) ou CPU basic
+
+### 2. Fazer Upload dos Arquivos
+
+Faça upload de todos os arquivos na seguinte estrutura:
+
+```
+seu-space/
+├── app.py
+├── transcriptor.py
+├── requirements.txt
+├── Dockerfile
+├── README.md
+└── templates/
+    ├── index.html
+    ├── processing.html
+    └── results.html
+```
+
+### 3. Configurar o Space
+
+No arquivo `README.md` do seu space (diferente deste), adicione o header:
+
+```yaml
+---
+title: Transcritor de Áudio
+emoji: 🎙️
+colorFrom: blue
+colorTo: purple
+sdk: docker
+pinned: false
+---
+```
+
+## 💻 Execução Local
+
+### Com Docker:
+
+```bash
+# Build da imagem
+docker build -t transcriptor .
+
+# Executar container
+docker run -p 7860:7860 transcriptor
+```
+
+### Sem Docker:
+
+```bash
+# Instalar dependências
+pip install -r requirements.txt
+
+# Executar aplicação
+python app.py
+```
+
+Acesse: `http://localhost:7860`
+
+## 📊 Como Usar
+
+1. **Upload**: Arraste ou selecione um arquivo de áudio
+2. **Processamento**: Acompanhe o status em tempo real
+3. **Download**: Baixe o arquivo JSON com a transcrição
+
+## 📋 Formato de Saída
+
+O arquivo JSON gerado contém:
+
+```json
+{
+  "metadata": {
+    "total_words": 150,
+    "arquivo": "audio.mp3",
+    "modelo": "WhisperX medium",
+    "correcao_gramatical": true
+  },
+  "words": [
+    {
+      "word": "Palavra",
+      "start": 1.234,
+      "end": 1.567,
+      "score": 0.95
+    }
+  ]
+}
+```
+
+## ⚙️ Configurações
+
+### Parâmetros Ajustáveis (transcriptor.py):
+- `LANGUAGE`: Idioma da transcrição (padrão: "pt")
+- `SCORE_MINIMO`: Score mínimo para aceitar palavras (padrão: 0.5)
+- `TERMO_FIXO`: Lista de termos que não são corrigidos
+- `MODEL_NAME`: Modelo de correção gramatical
+
+### Limites da Aplicação:
+- Tamanho máximo de arquivo: 500MB
+- Formatos suportados: MP3, WAV, MP4, M4A, FLAC, OGG
+
+## 🔧 Solução de Problemas
+
+### Erro de Memória:
+- Reduza o tamanho do arquivo de áudio
+- Use GPU no Hugging Face Spaces
+
+### Transcrição com Erros:
+- Ajuste `SCORE_MINIMO` para filtrar palavras de baixa confiança
+- Verifique qualidade do áudio original
+
+### Modelo não Carrega:
+- Verifique conexão com internet
+- Aguarde download dos modelos na primeira execução
+
+## 📝 Notas Importantes
+
+- **Primeira execução**: Pode demorar devido ao download dos modelos
+- **Processamento**: Tempo varia conforme duração do áudio e hardware
+- **Armazenamento**: Arquivos são mantidos temporariamente no container
+- **Privacidade**: Áudios são processados localmente no container
+
+## 🤝 Contribuições
+
+Sugestões e melhorias são bem-vindas! Este projeto foi desenvolvido para facilitar a transcrição de áudios com alta qualidade.
+
+## 📄 Licença
+
+Este projeto está disponível sob a licença MIT.

requirements.txt

@@ -1,5 +1,10 @@
-flask
-torch
-whisperx
-transformers
-huggingface-hub
+torch>=2.0.0
+torchaudio>=2.0.0
+whisperx>=3.1.0
+transformers>=4.30.0
+flask>=2.3.0
+werkzeug>=2.3.0
+numpy>=1.24.0
+librosa>=0.10.0
+soundfile>=0.12.0
+ffmpeg-python>=0.2.0

static/main.js

@@ -1,106 +0,0 @@
-// Trocar seções do menu lateral
-document.querySelectorAll(".nav-item").forEach(item => {
-    item.addEventListener("click", () => {
-        document.querySelectorAll(".nav-item").forEach(i => i.classList.remove("active"));
-        document.querySelectorAll(".content-section").forEach(section => section.classList.remove("active"));
-        item.classList.add("active");
-        document.getElementById(item.dataset.section + "-section").classList.add("active");
-    });
-});
-
-// Gerenciar seleção de áudio e botão de transcrição
-const fileInput = document.getElementById("audio-file");
-const transcribeBtn = document.getElementById("transcribe-btn");
-let selectedAudio = null;
-
-fileInput.addEventListener("change", () => {
-    if (fileInput.files.length > 0) {
-        selectedAudio = fileInput.files[0];
-        transcribeBtn.disabled = false;
-    }
-});
-
-transcribeBtn.addEventListener("click", () => {
-    if (!selectedAudio) return;
-
-    const nameInput = document.getElementById("transcription-name").value || "transcricao";
-    const progressContainer = document.getElementById("progress-container");
-    const progressFill = document.getElementById("progress-fill");
-    const progressText = document.getElementById("progress-text");
-
-    const formData = new FormData();
-    formData.append("audio", selectedAudio);
-    formData.append("filename", nameInput);
-
-    transcribeBtn.disabled = true;
-    progressContainer.style.display = "block";
-    progressFill.style.width = "30%";
-    progressText.textContent = "Enviando áudio...";
-
-    fetch("/api/transcribe", {
-        method: "POST",
-        body: formData
-    })
-    .then(res => res.json())
-    .then(data => {
-        if (data.success) {
-            progressFill.style.width = "100%";
-            progressText.textContent = "Transcrição concluída!";
-            loadTranscriptions();
-        } else {
-            progressText.textContent = "Erro: " + (data.error || "falha ao transcrever");
-        }
-    })
-    .catch(err => {
-        progressText.textContent = "Erro: " + err.message;
-    })
-    .finally(() => {
-        transcribeBtn.disabled = false;
-        setTimeout(() => {
-            progressContainer.style.display = "none";
-            progressFill.style.width = "0%";
-        }, 4000);
-    });
-});
-
-// Carregar transcrições
-function loadTranscriptions() {
-    fetch("/api/transcriptions")
-    .then(res => res.json())
-    .then(data => {
-        const filesList = document.getElementById("files-list");
-        filesList.innerHTML = "";
-        data.forEach(file => {
-            const item = document.createElement("div");
-            item.className = "file-item";
-            item.innerHTML = `
-                <div class="file-info">
-                    <div class="file-icon"><i class="fas fa-file-alt"></i></div>
-                    <div class="file-details">
-                        <h4>${file.name}</h4>
-                        <p class="file-meta">${file.word_count} palavras • ${new Date(file.created).toLocaleString()}</p>
-                    </div>
-                </div>
-                <div class="file-actions">
-                    <button class="action-btn download" onclick="downloadFile('${file.filename}')"><i class="fas fa-download"></i></button>
-                    <button class="action-btn delete" onclick="deleteFile('${file.filename}')"><i class="fas fa-trash"></i></button>
-                </div>
-            `;
-            filesList.appendChild(item);
-        });
-    });
-}
-
-function deleteFile(filename) {
-    fetch(`/api/delete/${filename}`, { method: "DELETE" })
-    .then(res => res.json())
-    .then(() => loadTranscriptions());
-}
-
-function downloadFile(filename) {
-    window.open(`/api/download/${filename}`, "_blank");
-}
-
-document.getElementById("refresh-files-btn").addEventListener("click", loadTranscriptions);
-
-// TODO: Carregar VSL com sincronização hipnótica (próxima etapa!)

templates/index.html

@@ -1,675 +1,314 @@
 <!DOCTYPE html>
 <html lang="pt-BR">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>VSL Ultra Pro - Transcrição e Geração</title>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap" rel="stylesheet">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Processando - Transcritor de Áudio</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-
-        body {
-            font-family: 'Inter', sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            min-height: 100vh;
-            color: #333;
-        }
-
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 20px;
+      }
+
+      .container {
+        background: white;
+        padding: 40px;
+        border-radius: 20px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        max-width: 500px;
+        width: 100%;
+        text-align: center;
+      }
+
+      h1 {
+        color: #333;
+        margin-bottom: 30px;
+        font-size: 2rem;
+      }
+
+      .file-info {
+        background: #f8f9fa;
+        padding: 20px;
+        border-radius: 10px;
+        margin-bottom: 30px;
+      }
+
+      .file-name {
+        font-weight: bold;
+        color: #333;
+        font-size: 1.1rem;
+      }
+
+      .status-container {
+        margin: 30px 0;
+      }
+
+      .spinner {
+        width: 60px;
+        height: 60px;
+        border: 6px solid #f3f3f3;
+        border-top: 6px solid #667eea;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin: 0 auto 20px;
+      }
+
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+
+      .status-text {
+        font-size: 1.1rem;
+        color: #666;
+        margin-bottom: 10px;
+      }
+
+      .status-message {
+        color: #333;
+        font-weight: 500;
+      }
+
+      .progress-bar {
+        width: 100%;
+        height: 8px;
+        background: #eee;
+        border-radius: 4px;
+        margin: 20px 0;
+        overflow: hidden;
+      }
+
+      .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #667eea, #764ba2);
+        width: 0%;
+        transition: width 0.5s ease;
+        animation: pulse 2s infinite;
+      }
+
+      @keyframes pulse {
+        0% {
+          opacity: 0.6;
+        }
+        50% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0.6;
+        }
+      }
+
+      .btn {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 12px 30px;
+        border: none;
+        border-radius: 25px;
+        font-size: 1rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        text-decoration: none;
+        display: inline-block;
+        margin: 10px;
+      }
+
+      .btn:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
+      }
+
+      .btn-success {
+        background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+      }
+
+      .btn-secondary {
+        background: #6c757d;
+      }
+
+      .success-icon {
+        font-size: 4rem;
+        color: #28a745;
+        margin-bottom: 20px;
+      }
+
+      .error-icon {
+        font-size: 4rem;
+        color: #dc3545;
+        margin-bottom: 20px;
+      }
+
+      .result-info {
+        background: #d4edda;
+        border: 1px solid #c3e6cb;
+        padding: 15px;
+        border-radius: 10px;
+        margin: 20px 0;
+      }
+
+      .error-info {
+        background: #f8d7da;
+        border: 1px solid #f5c6cb;
+        padding: 15px;
+        border-radius: 10px;
+        margin: 20px 0;
+        color: #721c24;
+      }
+
+      .hidden {
+        display: none !important;
+      }
+
+      @media (max-width: 600px) {
         .container {
-            display: flex;
-            height: 100vh;
-        }
-
-        /* Sidebar */
-        .sidebar {
-            width: 300px;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            border-right: 1px solid rgba(255, 255, 255, 0.2);
-            padding: 30px 25px;
-            overflow-y: auto;
-        }
-
-        .logo {
-            text-align: center;
-            margin-bottom: 40px;
-        }
-
-        .logo h1 {
-            font-size: 24px;
-            font-weight: 700;
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            margin-bottom: 5px;
-        }
-
-        .logo p {
-            font-size: 12px;
-            color: #666;
-            font-weight: 500;
-        }
-
-        .nav-section {
-            margin-bottom: 30px;
-        }
-
-        .nav-title {
-            font-size: 14px;
-            font-weight: 600;
-            color: #666;
-            margin-bottom: 15px;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-        }
-
-        .nav-item {
-            display: flex;
-            align-items: center;
-            padding: 12px 15px;
-            margin-bottom: 8px;
-            border-radius: 10px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-weight: 500;
-        }
-
-        .nav-item:hover {
-            background: rgba(102, 126, 234, 0.1);
-            transform: translateX(5px);
-        }
-
-        .nav-item.active {
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            color: white;
-            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-        }
-
-        .nav-item i {
-            margin-right: 12px;
-            width: 20px;
-            font-size: 16px;
-        }
-
-        /* Main Content */
-        .main-content {
-            flex: 1;
-            padding: 30px;
-            overflow-y: auto;
-        }
-
-        .content-section {
-            display: none;
-            background: rgba(255, 255, 255, 0.95);
-            backdrop-filter: blur(10px);
-            border-radius: 20px;
-            padding: 30px;
-            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
-            height: calc(100vh - 60px);
-        }
-
-        .content-section.active {
-            display: block;
-        }
-
-        .section-title {
-            font-size: 28px;
-            font-weight: 700;
-            margin-bottom: 10px;
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-
-        .section-description {
-            color: #666;
-            margin-bottom: 30px;
-            font-size: 16px;
-        }
-
-        /* Upload Area */
-        .upload-area {
-            border: 2px dashed #ddd;
-            border-radius: 15px;
-            padding: 40px;
-            text-align: center;
-            margin-bottom: 30px;
-            transition: all 0.3s ease;
-            background: rgba(102, 126, 234, 0.05);
-        }
-
-        .upload-area:hover {
-            border-color: #667eea;
-            background: rgba(102, 126, 234, 0.1);
-        }
-
-        .upload-area.dragover {
-            border-color: #667eea;
-            background: rgba(102, 126, 234, 0.15);
-            transform: scale(1.02);
-        }
-
-        .upload-icon {
-            font-size: 48px;
-            color: #667eea;
-            margin-bottom: 20px;
-        }
-
-        .upload-text {
-            font-size: 18px;
-            font-weight: 600;
-            margin-bottom: 10px;
-        }
-
-        .upload-subtext {
-            color: #666;
-            margin-bottom: 20px;
-        }
-
-        .file-input {
-            display: none;
-        }
-
-        .upload-btn {
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            color: white;
-            padding: 12px 30px;
-            border: none;
-            border-radius: 25px;
-            cursor: pointer;
-            font-weight: 600;
-            transition: all 0.3s ease;
-        }
-
-        .upload-btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 20px rgba(102, 126, 234, 0.3);
-        }
-
-        /* Form Controls */
-        .form-group {
-            margin-bottom: 20px;
-        }
-
-        .form-label {
-            display: block;
-            font-weight: 600;
-            margin-bottom: 8px;
-            color: #333;
-        }
-
-        .form-input {
-            width: 100%;
-            padding: 12px 15px;
-            border: 2px solid #eee;
-            border-radius: 10px;
-            font-size: 16px;
-            transition: all 0.3s ease;
-        }
-
-        .form-input:focus {
-            outline: none;
-            border-color: #667eea;
-            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-        }
-
-        /* Buttons */
-        .btn {
-            padding: 12px 24px;
-            border: none;
-            border-radius: 10px;
-            cursor: pointer;
-            font-weight: 600;
-            transition: all 0.3s ease;
-            display: inline-flex;
-            align-items: center;
-            gap: 8px;
-        }
-
-        .btn-primary {
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            color: white;
-        }
-
-        .btn-secondary {
-            background: #f8f9fa;
-            color: #666;
-            border: 2px solid #eee;
-        }
-
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-        }
-
-        /* Progress Bar */
-        .progress-container {
-            margin: 20px 0;
-            display: none;
-        }
-
-        .progress-bar {
-            width: 100%;
-            height: 6px;
-            background: #eee;
-            border-radius: 3px;
-            overflow: hidden;
+          padding: 30px 20px;
+          margin: 10px;
         }
 
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            width: 0%;
-            transition: width 0.3s ease;
-        }
-
-        .progress-text {
-            text-align: center;
-            margin-top: 10px;
-            font-weight: 600;
-            color: #667eea;
-        }
-
-        /* Files List */
-        .files-list {
-            margin-top: 30px;
-        }
-
-        .file-item {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 15px;
-            background: rgba(102, 126, 234, 0.05);
-            border-radius: 10px;
-            margin-bottom: 10px;
-            transition: all 0.3s ease;
-        }
-
-        .file-item:hover {
-            background: rgba(102, 126, 234, 0.1);
-            transform: translateX(5px);
-        }
-
-        .file-info {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-        }
-
-        .file-icon {
-            width: 40px;
-            height: 40px;
-            background: linear-gradient(135deg, #667eea, #764ba2);
-            border-radius: 10px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: white;
-            font-size: 16px;
-        }
-
-        .file-details h4 {
-            font-size: 16px;
-            font-weight: 600;
-            margin-bottom: 4px;
-        }
-
-        .file-meta {
-            font-size: 12px;
-            color: #666;
-        }
-
-        .file-actions {
-            display: flex;
-            gap: 10px;
-        }
-
-        .action-btn {
-            width: 35px;
-            height: 35px;
-            border: none;
-            border-radius: 8px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: all 0.3s ease;
-        }
-
-        .action-btn.download {
-            background: #28a745;
-            color: white;
-        }
-
-        .action-btn.delete {
-            background: #dc3545;
-            color: white;
-        }
-
-        .action-btn.use {
-            background: #667eea;
-            color: white;
-        }
-
-        /* VSL Generator */
-        .vsl-controls {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 20px;
-            margin-bottom: 30px;
-        }
-
-        .control-group {
-            background: rgba(102, 126, 234, 0.05);
-            padding: 20px;
-            border-radius: 15px;
-        }
-
-        .audio-player {
-            width: 100%;
-            margin: 10px 0;
-        }
-
-        /* VSL Preview */
-        .vsl-preview {
-            background: white;
-            border-radius: 15px;
-            padding: 40px;
-            min-height: 500px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            font-family: 'Open Sans', sans-serif;
-            font-size: 42px;
-            line-height: 1.4;
-            text-align: center;
-            white-space: pre-line;
-            color: #000;
-            position: relative;
-            overflow: hidden;
-        }
-
-        .vsl-preview.fullscreen {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100vw;
-            height: 100vh;
-            margin: 0;
-            padding: 60px;
-            border-radius: 0;
-            background: white;
-            z-index: 9999;
-            font-size: 64px;
-        }
-
-        .vsl-preview.fullscreen.hd {
-            width: 1920px;
-            height: 1080px;
-            transform-origin: top left;
-            transform: scale(0.9);
-        }
-
-        .bold-black {
-            font-weight: 700;
-            color: #000;
-        }
-
-        .bold-red {
-            font-weight: 700;
-            color: #e74c3c;
-        }
-
-        /* Controls Row */
-        .controls-row {
-            display: flex;
-            gap: 15px;
-            margin-bottom: 20px;
-            flex-wrap: wrap;
-        }
-
-        /* Responsive */
-        @media (max-width: 768px) {
-            .container {
-                flex-direction: column;
-            }
-            
-            .sidebar {
-                width: 100%;
-                height: auto;
-                padding: 20px;
-            }
-            
-            .main-content {
-                padding: 20px;
-            }
-            
-            .vsl-controls {
-                grid-template-columns: 1fr;
-            }
-            
-            .controls-row {
-                flex-direction: column;
-            }
-            
-            .vsl-preview {
-                font-size: 24px;
-                min-height: 300px;
-                padding: 20px;
-            }
-        }
-
-        /* Loading Animation */
-        .loading {
-            display: inline-block;
-            width: 20px;
-            height: 20px;
-            border: 3px solid rgba(255, 255, 255, 0.3);
-            border-radius: 50%;
-            border-top-color: white;
-            animation: spin 1s ease-in-out infinite;
-        }
-
-        @keyframes spin {
-            to { transform: rotate(360deg); }
-        }
-
-        /* Notifications */
-        .notification {
-            position: fixed;
-            top: 20px;
-            right: 20px;
-            padding: 15px 20px;
-            border-radius: 10px;
-            color: white;
-            font-weight: 600;
-            z-index: 10000;
-            transform: translateX(400px);
-            transition: transform 0.3s ease;
-        }
-
-        .notification.show {
-            transform: translateX(0);
-        }
-
-        .notification.success {
-            background: #28a745;
-        }
-
-        .notification.error {
-            background: #dc3545;
-        }
-
-        .notification.info {
-            background: #17a2b8;
+        h1 {
+          font-size: 1.6rem;
         }
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="container">
-        <!-- Sidebar -->
-        <div class="sidebar">
-            <div class="logo">
-                <h1>VSL Ultra Pro</h1>
-                <p>Transcrição e Geração Profissional</p>
-            </div>
-
-            <div class="nav-section">
-                <div class="nav-title">Ferramentas</div>
-                <div class="nav-item active" data-section="transcribe">
-                    <i class="fas fa-microphone"></i>
-                    <span>Transcrever Áudio</span>
-                </div>
-                <div class="nav-item" data-section="generate">
-                    <i class="fas fa-video"></i>
-                    <span>Gerar VSL</span>
-                </div>
-            </div>
-
-            <div class="nav-section">
-                <div class="nav-title">Arquivos</div>
-                <div class="nav-item" data-section="files">
-                    <i class="fas fa-folder"></i>
-                    <span>Transcrições</span>
-                </div>
-            </div>
+      <h1 id="page-title">🎙️ Processando Transcrição</h1>
+
+      <div class="file-info">
+        <div class="file-name">📄 {{ filename }}</div>
+      </div>
+
+      <!-- Estado: Processando -->
+      <div id="processing-state" class="status-container">
+        <div class="spinner"></div>
+        <div class="status-text">Status:</div>
+        <div class="status-message" id="status-message">
+          Aguardando processamento...
         </div>
-
-        <!-- Main Content -->
-        <div class="main-content">
-            <!-- Transcribe Section -->
-            <div class="content-section active" id="transcribe-section">
-                <h1 class="section-title">Transcrever Áudio</h1>
-                <p class="section-description">Faça upload do seu áudio e obtenha uma transcrição precisa com timestamps</p>
-
-                <div class="upload-area" id="upload-area">
-                    <div class="upload-icon">
-                        <i class="fas fa-cloud-upload-alt"></i>
-                    </div>
-                    <div class="upload-text">Arraste seu arquivo de áudio aqui</div>
-                    <div class="upload-subtext">ou clique para selecionar (MP3, WAV, M4A)</div>
-                    <input type="file" id="audio-file" class="file-input" accept="audio/*">
-                    <button class="upload-btn" onclick="document.getElementById('audio-file').click()">
-                        Selecionar Arquivo
-                    </button>
-                </div>
-
-                <div class="form-group">
-                    <label class="form-label">Nome da Transcrição</label>
-                    <input type="text" id="transcription-name" class="form-input" placeholder="Digite um nome para sua transcrição">
-                </div>
-
-                <div class="progress-container" id="progress-container">
-                    <div class="progress-bar">
-                        <div class="progress-fill" id="progress-fill"></div>
-                    </div>
-                    <div class="progress-text" id="progress-text">Processando...</div>
-                </div>
-
-                <div class="controls-row">
-                    <button class="btn btn-primary" id="transcribe-btn" disabled>
-                        <i class="fas fa-microphone"></i>
-                        <span>Iniciar Transcrição</span>
-                    </button>
-                </div>
-            </div>
-
-            <!-- Generate VSL Section -->
-            <div class="content-section" id="generate-section">
-                <h1 class="section-title">Gerar VSL</h1>
-                <p class="section-description">Crie sua Video Sales Letter com sincronização perfeita</p>
-
-                <div class="vsl-controls">
-                    <div class="control-group">
-                        <label class="form-label">Transcrição (JSON)</label>
-                        <input type="file" id="json-file" class="form-input" accept=".json">
-                    </div>
-                    <div class="control-group">
-                        <label class="form-label">Áudio de Narração</label>
-                        <input type="file" id="vsl-audio" class="form-input" accept="audio/*">
-                        <audio controls id="audio-player" class="audio-player"></audio>
-                    </div>
-                </div>
-
-                <div class="controls-row">
-                    <button class="btn btn-primary" id="start-sync-btn" disabled>
-                        <i class="fas fa-play"></i>
-                        Iniciar Apresentação
-                    </button>
-                    <button class="btn btn-secondary" id="fullscreen-btn">
-                        <i class="fas fa-expand"></i>
-                        Tela Cheia
-                    </button>
-                    <button class="btn btn-secondary" id="hd-btn">
-                        <i class="fas fa-tv"></i>
-                        Modo 1080p
-                    </button>
-                </div>
-
-                <div class="vsl-preview" id="vsl-preview">
-                    <p>Carregue uma transcrição e áudio para começar</p>
-                </div>
-            </div>
-
-            <!-- Files Section -->
-            <div class="content-section" id="files-section">
-                <h1 class="section-title">Transcrições Salvas</h1>
-                <p class="section-description">Gerencie suas transcrições e utilize-as em seus projetos</p>
-
-                <div class="controls-row">
-                    <button class="btn btn-primary" id="refresh-files-btn">
-                        <i class="fas fa-sync"></i>
-                        Atualizar Lista
-                    </button>
-                </div>
-
-                <div class="files-list" id="files-list">
-                    <!-- Files will be loaded here -->
-                </div>
-            </div>
+        <div class="progress-bar">
+          <div
+            class="progress-fill"
+            id="progress-fill"
+            style="width: 20%"
+          ></div>
         </div>
+      </div>
+
+      <!-- Estado: Concluído -->
+      <div id="success-state" class="status-container hidden">
+        <div class="success-icon">✅</div>
+        <div class="status-text">Transcrição concluída!</div>
+        <div class="result-info">
+          <div>Arquivo gerado: <span id="output-filename"></span></div>
+        </div>
+        <a href="#" class="btn btn-success" id="download-btn">
+          📥 Baixar Transcrição
+        </a>
+      </div>
+
+      <!-- Estado: Erro -->
+      <div id="error-state" class="status-container hidden">
+        <div class="error-icon">❌</div>
+        <div class="status-text">Erro no processamento</div>
+        <div class="error-info">
+          <div id="error-message">Ocorreu um erro durante a transcrição.</div>
+        </div>
+      </div>
+
+      <!-- Botões de navegação -->
+      <div style="margin-top: 30px">
+        <a href="/" class="btn btn-secondary">🔙 Nova Transcrição</a>
+        <a href="/results" class="btn btn-secondary">📂 Ver Resultados</a>
+      </div>
     </div>
 
     <script>
-        // Global variables
-        let currentSlides = [];
-        let currentAudio = null;
-        let isPlaying = false;
-        let animationId = null;
-
-        // Important words for highlighting
-        const importantWords = new Set([
-            'DOR', 'PESO', 'VERGONHA', 'TRISTEZA', 'SOFRIMENTO', 'CULPA', 'FRACASSO',
-            'LIMITE', 'BALANÇA', 'FOME', 'FRACA', 'TRANCAR', 'ROUBEI', 'FUGIR',
-            'TRISTE', 'COMPULSÃO', 'AUTOESTIMA', 'REALIDADE', 'ESCONDER', 'MENTIRA',
-            'DIETAS', 'EFEITO SANFONA', 'EXCESSO', 'RESULTADO', 'ESFORÇO', 'ENERGIA',
-            'MUDANÇA', 'ESCOLHA', 'RENASCIMENTO', 'ESPERANÇA', 'CONQUISTA',
-            'TRANSFORMAÇÃO', 'CORAGEM', 'SOLUÇÃO', 'FUNCIONA', 'EMAGRECER', 'ALIMENTAR',
-            'VIDA', 'SAÚDE', 'LIBERDADE', 'VERDADE', 'MILAGRE', 'EMOÇÃO', 'SUPORTE',
-            'JEJUM', 'PERSONAL', 'METABOLISMO', 'SAUDÁVEL', 'LEVE', 'SE OLHAR', 'VER',
-            'SORRIR', 'ORGULHO', 'MERECE', 'BRASILEIRA', 'REAL', 'CAMINHO', 'PASSO',
-            'PLANO', 'REFEIÇÕES', 'PRAIA', 'ESCONDERIJO', 'CONSCIÊNCIA', 'RESPOSTA',
-            'DESAFIO', 'COBRIR', 'RECOMEÇO', 'REJEIÇÃO', 'RECOMPENSA', 'DECISÃO',
-            'ACEITAÇÃO', 'VITÓRIA', 'SUPERAÇÃO', 'MOTIVAÇÃO', 'PROGRESSO'
-        ]);
-
-        const veryImportantWords = new Set([
-            'NUNCA MAIS', 'DEFINITIVAMENTE', 'LIBERTAR', 'INSUPORTÁVEL',
-            'CICLO SEM FIM', 'TRANSFORMAÇÃO', 'MUDAR TUDO', 'A VERDADE', 'É AGORA',
-            'O MOMENTO', 'DECISÃO', 'A RESPOSTA', 'ME LIBERTAR', 'O COMEÇO',
-            'FOI ALI QUE TUDO MUDOU', 'NADA MUDA', 'A CULPA NÃO É SUA', 'VOCÊ MERECE',
-            'SIMPLES E ACESSÍVEL', 'É HOJE', 'ÚLTIMA CHANCE', 'AGIR AGORA',
-            'VIDA NOVA', 'LIBERDADE', 'CAMINHO CERTO', 'NUNCA MAIS VOU VIVER ASSIM',
-            'EU ROUBEI', 'GORDA', 'TRAVEI', 'GORDINHA', 'PAZ', 'SÓ QUEM SENTE SABE',
-            'NÃO AGUENTO MAIS', 'CHEGA', 'ACORDEI', 'EU DECIDI', 'FOI NAQUELE MOMENTO',
-            'REALIZEI MEU SONHO', 'FUI ALÉM', 'É POSSÍVEL', 'É REAL',
-            'ME VI NO ESPELHO', 'ME EMOCIONEI', 'TUDO MUDOU', 'O DIA QUE VIREI A CHAVE',
-            'NUNCA', 'MAIS', 'PERDER', 'TUDO', 'ATERRORIZAVA', 'FRACASSA',
+      const jobId = "{{ job_id }}";
+      let progressWidth = 20;
+
+      const processingState = document.getElementById("processing-state");
+      const successState = document.getElementById("success-state");
+      const errorState = document.getElementById("error-state");
+      const statusMessage = document.getElementById("status-message");
+      const progressFill = document.getElementById("progress-fill");
+      const pageTitle = document.getElementById("page-title");
+      const downloadBtn = document.getElementById("download-btn");
+      const outputFilename = document.getElementById("output-filename");
+      const errorMessage = document.getElementById("error-message");
+
+      // Atualizar progresso visual
+      function updateProgress() {
+        progressWidth += Math.random() * 5;
+        if (progressWidth > 95) progressWidth = 95;
+        progressFill.style.width = progressWidth + "%";
+      }
+
+      // Verificar status periodicamente
+      function checkStatus() {
+        fetch(`/status/${jobId}`)
+          .then((response) => response.json())
+          .then((data) => {
+            statusMessage.textContent = data.message || "Processando...";
+
+            if (data.status === "completed") {
+              // Sucesso
+              processingState.classList.add("hidden");
+              successState.classList.remove("hidden");
+              pageTitle.textContent = "✅ Transcrição Concluída!";
+
+              if (data.output_file) {
+                outputFilename.textContent = data.output_file;
+                downloadBtn.href = `/download/${data.output_file}`;
+              }
+
+              progressFill.style.width = "100%";
+            } else if (data.status === "error") {
+              // Erro
+              processingState.classList.add("hidden");
+              errorState.classList.remove("hidden");
+              pageTitle.textContent = "❌ Erro na Transcrição";
+              errorMessage.textContent = data.message || "Erro desconhecido";
+            } else if (data.status === "processing") {
+              // Ainda processando
+              updateProgress();
+              setTimeout(checkStatus, 3000);
+            } else {
+              // Status desconhecido, continuar verificando
+              setTimeout(checkStatus, 2000);
+            }
+          })
+          .catch((error) => {
+            console.error("Erro ao verificar status:", error);
+            setTimeout(checkStatus, 5000);
+          });
+      }
+
+      // Iniciar verificação
+      setTimeout(checkStatus, 1000);
+
+      // Atualizar progresso visual periodicamente
+      const progressInterval = setInterval(() => {
+        if (!processingState.classList.contains("hidden")) {
+          updateProgress();
+        } else {
+          clearInterval(progressInterval);
+        }
+      }, 2000);
+    </script>
+  </body>
+</html>

templates/processing.html

@@ -0,0 +1,238 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Processando - Transcritor de Áudio</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 20px;
+        }
+        
+        .container {
+            background: white;
+            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+            max-width: 500px;
+            width: 100%;
+            text-align: center;
+        }
+        
+        h1 {
+            color: #333;
+            margin-bottom: 30px;
+            font-size: 2rem;
+        }
+        
+        .file-info {
+            background: #f8f9fa;
+            padding: 20px;
+            border-radius: 10px;
+            margin-bottom: 30px;
+        }
+        
+        .file-name {
+            font-weight: bold;
+            color: #333;
+            font-size: 1.1rem;
+        }
+        
+        .status-container {
+            margin: 30px 0;
+        }
+        
+        .spinner {
+            width: 60px;
+            height: 60px;
+            border: 6px solid #f3f3f3;
+            border-top: 6px solid #667eea;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 20px;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+        
+        .status-text {
+            font-size: 1.1rem;
+            color: #666;
+            margin-bottom: 10px;
+        }
+        
+        .status-message {
+            color: #333;
+            font-weight: 500;
+        }
+        
+        .progress-bar {
+            width: 100%;
+            height: 8px;
+            background: #eee;
+            border-radius: 4px;
+            margin: 20px 0;
+            overflow: hidden;
+        }
+        
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #667eea, #764ba2);
+            width: 0%;
+            transition: width 0.5s ease;
+            animation: pulse 2s infinite;
+        }
+        
+        @keyframes pulse {
+            0% { opacity: 0.6; }
+            50% { opacity: 1; }
+            100% { opacity: 0.6; }
+        }
+        
+        .btn {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            color: white;
+            padding: 12px 30px;
+            border: none;
+            border-radius: 25px;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-decoration: none;
+            display: inline-block;
+            margin: 10px;
+        }
+        
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
+        }
+        
+        .btn-success {
+            background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
+        }
+        
+        .btn-secondary {
+            background: #6c757d;
+        }
+        
+        .success-icon {
+            font-size: 4rem;
+            color: #28a745;
+            margin-bottom: 20px;
+        }
+        
+        .error-icon {
+            font-size: 4rem;
+            color: #dc3545;
+            margin-bottom: 20px;
+        }
+        
+        .result-info {
+            background: #d4edda;
+            border: 1px solid #c3e6cb;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 20px 0;
+        }
+        
+        .error-info {
+            background: #f8d7da;
+            border: 1px solid #f5c6cb;
+            padding: 15px;
+            border-radius: 10px;
+            margin: 20px 0;
+            color: #721c24;
+        }
+        
+        .hidden {
+            display: none !important;
+        }
+        
+        @media (max-width: 600px) {
+            .container {
+                padding: 30px 20px;
+                margin: 10px;
+            }
+            
+            h1 {
+                font-size: 1.6rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1 id="page-title">🎙️ Processando Transcrição</h1>
+        
+        <div class="file-info">
+            <div class="file-name">📄 {{ filename }}</div>
+        </div>
+        
+        <!-- Estado: Processando -->
+        <div id="processing-state" class="status-container">
+            <div class="spinner"></div>
+            <div class="status-text">Status:</div>
+            <div class="status-message" id="status-message">Aguardando processamento...</div>
+            <div class="progress-bar">
+                <div class="progress-fill" id="progress-fill" style="width: 20%;"></div>
+            </div>
+        </div>
+        
+        <!-- Estado: Concluído -->
+        <div id="success-state" class="status-container hidden">
+            <div class="success-icon">✅</div>
+            <div class="status-text">Transcrição concluída!</div>
+            <div class="result-info">
+                <div>Arquivo gerado: <span id="output-filename"></span></div>
+            </div>
+            <a href="#" class="btn btn-success" id="download-btn">
+                📥 Baixar Transcrição
+            </a>
+        </div>
+        
+        <!-- Estado: Erro -->
+        <div id="error-state" class="status-container hidden">
+            <div class="error-icon">❌</div>
+            <div class="status-text">Erro no processamento</div>
+            <div class="error-info">
+                <div id="error-message">Ocorreu um erro durante a transcrição.</div>
+            </div>
+        </div>
+        
+        <!-- Botões de navegação -->
+        <div style="margin-top: 30px;">
+            <a href="/" class="btn btn-secondary">🔙 Nova Transcrição</a>
+            <a href="/results" class="btn btn-secondary">📂 Ver Resultados</a>
+        </div>
+    </div>
+
+    <script>
+        const jobId = '{{ job_id }}';
+        let progressWidth = 20;
+        
+        const processingState = document.getElementById('processing-state');
+        const successState = document.getElementById('success-state');
+        const errorState = document.getElementById('error-state');
+        const statusMessage = document.getElementById('status-message');
+        const progressFill = document.getElementById('progress-fill');
+        const pageTitle = document.getElementById('page-title');
+        const downloadBtn = document.getElementById('download-btn');
+        const outputFilename = document.getElementById('output-filename');
+        const errorMessage = document.getElementById('error-message');
+
+        // Atualizar

templates/results.html

@@ -0,0 +1,275 @@
+<!DOCTYPE html>
+<html lang="pt-BR">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Resultados - Transcritor de Áudio</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      body {
+        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        min-height: 100vh;
+        padding: 20px;
+      }
+
+      .container {
+        max-width: 800px;
+        margin: 0 auto;
+        background: white;
+        border-radius: 20px;
+        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+      }
+
+      .header {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 30px;
+        text-align: center;
+      }
+
+      h1 {
+        font-size: 2rem;
+        margin-bottom: 10px;
+      }
+
+      .subtitle {
+        opacity: 0.9;
+        font-size: 1.1rem;
+      }
+
+      .content {
+        padding: 30px;
+      }
+
+      .no-results {
+        text-align: center;
+        padding: 60px 20px;
+        color: #666;
+      }
+
+      .no-results-icon {
+        font-size: 4rem;
+        margin-bottom: 20px;
+        opacity: 0.5;
+      }
+
+      .files-grid {
+        display: grid;
+        gap: 20px;
+        margin-top: 20px;
+      }
+
+      .file-card {
+        background: #f8f9fa;
+        border: 2px solid #e9ecef;
+        border-radius: 15px;
+        padding: 20px;
+        transition: all 0.3s ease;
+        position: relative;
+      }
+
+      .file-card:hover {
+        border-color: #667eea;
+        transform: translateY(-2px);
+        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+      }
+
+      .file-info {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        gap: 15px;
+      }
+
+      .file-details {
+        flex: 1;
+        min-width: 200px;
+      }
+
+      .file-name {
+        font-size: 1.1rem;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 8px;
+        word-break: break-all;
+      }
+
+      .file-meta {
+        display: flex;
+        gap: 20px;
+        color: #666;
+        font-size: 0.9rem;
+        flex-wrap: wrap;
+      }
+
+      .meta-item {
+        display: flex;
+        align-items: center;
+        gap: 5px;
+      }
+
+      .file-actions {
+        display: flex;
+        gap: 10px;
+      }
+
+      .btn {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        padding: 10px 20px;
+        border: none;
+        border-radius: 20px;
+        font-size: 0.9rem;
+        cursor: pointer;
+        transition: all 0.3s ease;
+        text-decoration: none;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+      }
+
+      .btn:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+      }
+
+      .btn-secondary {
+        background: #6c757d;
+      }
+
+      .btn-small {
+        padding: 8px 15px;
+        font-size: 0.85rem;
+      }
+
+      .navigation {
+        text-align: center;
+        margin-top: 30px;
+        padding-top: 30px;
+        border-top: 1px solid #eee;
+      }
+
+      .stats {
+        background: #e8f4fd;
+        border-radius: 10px;
+        padding: 20px;
+        margin-bottom: 30px;
+        text-align: center;
+      }
+
+      .stats-number {
+        font-size: 2rem;
+        font-weight: bold;
+        color: #667eea;
+      }
+
+      .stats-label {
+        color: #666;
+        margin-top: 5px;
+      }
+
+      @media (max-width: 600px) {
+        .container {
+          margin: 10px;
+          border-radius: 15px;
+        }
+
+        .header {
+          padding: 20px;
+        }
+
+        h1 {
+          font-size: 1.6rem;
+        }
+
+        .content {
+          padding: 20px;
+        }
+
+        .file-info {
+          flex-direction: column;
+          align-items: flex-start;
+        }
+
+        .file-actions {
+          width: 100%;
+          justify-content: flex-end;
+        }
+
+        .file-meta {
+          flex-direction: column;
+          gap: 8px;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container">
+      <div class="header">
+        <h1>📂 Resultados das Transcrições</h1>
+        <p class="subtitle">Arquivos JSON gerados pelo sistema</p>
+      </div>
+
+      <div class="content">
+        {% if files %}
+        <div class="stats">
+          <div class="stats-number">{{ files|length }}</div>
+          <div class="stats-label">
+            {% if files|length == 1 %} arquivo disponível {% else %} arquivos
+            disponíveis {% endif %}
+          </div>
+        </div>
+
+        <div class="files-grid">
+          {% for file in files %}
+          <div class="file-card">
+            <div class="file-info">
+              <div class="file-details">
+                <div class="file-name">📄 {{ file.name }}</div>
+                <div class="file-meta">
+                  <div class="meta-item">
+                    <span>📏</span>
+                    <span>{{ file.size }} KB</span>
+                  </div>
+                  <div class="meta-item">
+                    <span>📅</span>
+                    <span>{{ file.modified }}</span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="file-actions">
+                <a href="/download/{{ file.name }}" class="btn btn-small">
+                  📥 Baixar
+                </a>
+              </div>
+            </div>
+          </div>
+          {% endfor %}
+        </div>
+        {% else %}
+        <div class="no-results">
+          <div class="no-results-icon">📭</div>
+          <h3>Nenhuma transcrição encontrada</h3>
+          <p>Você ainda não transcreveu nenhum arquivo de áudio.</p>
+        </div>
+        {% endif %}
+
+        <div class="navigation">
+          <a href="/" class="btn"> 🎙️ Nova Transcrição </a>
+          <a href="javascript:location.reload()" class="btn btn-secondary">
+            🔄 Atualizar Lista
+          </a>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>

transcriptor.py

@@ -0,0 +1,107 @@
+import torch
+import whisperx
+import json
+import sys
+import os
+from transformers import AutoTokenizer, AutoModelForSeq2SeqLM, pipeline
+import warnings
+warnings.filterwarnings("ignore")
+
+def main():
+    # === VERIFICAR ARGUMENTOS ===
+    if len(sys.argv) != 2:
+        print("Uso: python transcriptor.py <arquivo_audio>")
+        sys.exit(1)
+    
+    AUDIO_PATH = sys.argv[1]
+    
+    # Verificar se arquivo existe
+    if not os.path.exists(AUDIO_PATH):
+        print(f"[ERRO] Arquivo não encontrado: {AUDIO_PATH}")
+        sys.exit(1)
+    
+    # Gerar nome do JSON baseado no áudio
+    base_name = os.path.splitext(os.path.basename(AUDIO_PATH))[0]
+    OUTPUT_JSON = f"{base_name}_transcricao.json"
+    
+    # === CONFIGURAÇÕES ===
+    LANGUAGE = "pt"
+    TERMO_FIXO = ["CETOX", "CETOX31", "WhisperX", "VSL"]
+    MODEL_NAME = "unicamp-dl/ptt5-base-portuguese-vocab"
+    SCORE_MINIMO = 0.5
+
+    # === SETUP DISPOSITIVO ===
+    device = "cuda" if torch.cuda.is_available() else "cpu"
+    compute_type = "float16" if device == "cuda" else "int8"
+    print(f"[INFO] Usando dispositivo: {device.upper()}")
+
+    # === TRANSCRIÇÃO COM WHISPERX ===
+    print("[INFO] Carregando modelo WhisperX...")
+    model = whisperx.load_model("medium", device, compute_type=compute_type, language=LANGUAGE)
+
+    print("[INFO] Carregando áudio e transcrevendo...")
+    audio = whisperx.load_audio(AUDIO_PATH)
+    result = model.transcribe(audio)
+
+    print("[INFO] Carregando modelo de alinhamento...")
+    align_model, metadata = whisperx.load_align_model(language_code=LANGUAGE, device=device)
+
+    print("[INFO] Alinhando palavras com precisão...")
+    aligned = whisperx.align(result["segments"], align_model, metadata, audio, device)
+
+    # === CORREÇÃO GRAMATICAL COM PTT5 ===
+    print("[INFO] Carregando corretor gramatical...")
+    try:
+        tokenizer = AutoTokenizer.from_pretrained(MODEL_NAME)
+        model_corr = AutoModelForSeq2SeqLM.from_pretrained(MODEL_NAME)
+        corretor = pipeline("text2text-generation", model=model_corr, tokenizer=tokenizer, device=0 if device == "cuda" else -1)
+        corretor_disponivel = True
+    except Exception as e:
+        print(f"[AVISO] Correção desativada: {e}")
+        corretor_disponivel = False
+
+    def corrigir(palavra):
+        if not palavra.strip() or palavra.upper() in [t.upper() for t in TERMO_FIXO] or palavra.isnumeric():
+            return palavra
+        if not corretor_disponivel:
+            return palavra.capitalize()
+        try:
+            entrada = f"corrigir gramática: {palavra}"
+            saida = corretor(entrada, max_length=40, do_sample=False, num_beams=1)[0]["generated_text"]
+            return saida.strip().capitalize() or palavra.capitalize()
+        except:
+            return palavra.capitalize()
+
+    # === PROCESSAR RESULTADO FINAL ===
+    print("[INFO] Processando palavras...")
+    resultado = []
+    for word in aligned["word_segments"]:
+        if word["score"] < SCORE_MINIMO or not word["word"].strip():
+            continue
+        corrigida = corrigir(word["word"])
+        resultado.append({
+            "word": corrigida,
+            "start": round(word["start"], 3),
+            "end": round(word["end"], 3),
+            "score": round(word["score"], 3)
+        })
+
+    # === SALVAR EM JSON ===
+    output = {
+        "metadata": {
+            "total_words": len(resultado),
+            "arquivo": AUDIO_PATH,
+            "modelo": "WhisperX medium",
+            "correcao_gramatical": corretor_disponivel
+        },
+        "words": resultado
+    }
+    
+    with open(OUTPUT_JSON, "w", encoding="utf-8") as f:
+        json.dump(output, f, ensure_ascii=False, indent=2)
+
+    print(f"[SUCESSO] Transcrição salva em {OUTPUT_JSON} com {len(resultado)} palavras!")
+    return OUTPUT_JSON
+
+if __name__ == "__main__":
+    main()