4b- funcional con interfaz web y Vosk

 

Proyecto 100% funcional con interfaz web y Vosk en tiempo real (sin errores)

馃П Requisitos previos

  1. Python instalado (recomendado Python 3.10 o 3.11)

  2. FFmpeg no es necesario

  3. Tener el modelo de Vosk descargado:
    馃摝 vosk-model-small-es-0.42

馃搧 Estructura correcta del proyecto

Copia exactamente esta estructura:

cpp
gpt-vosk_webcontrol/
├── app.py
├── transcriptor.py
├── models/
│   └── vosk-model-small-es-0.42/
├── templates/
│   └── index.html
├── static/
│   └── script.js

馃 Paso 1: C贸digo de transcriptor.py

python
import queue
import sounddevice as sd
from vosk import Model, KaldiRecognizer
import json
import threading

class Transcriptor:
    def __init__(self, socketio, model_path="models/vosk-model-small-es-0.42", sample_rate=16000):
        self.sample_rate = sample_rate
        self.q = queue.Queue()
        self.model = Model(model_path)
        self.recognizer = KaldiRecognizer(self.model, self.sample_rate)
        self.thread = None
        self.running = False
        self.transcripcion = ""
        self.socketio = socketio

    def _callback(self, indata, frames, time, status):
        if status:
            print("⚠️", status)
        self.q.put(bytes(indata))

    def _procesar_audio(self):
        with sd.RawInputStream(samplerate=self.sample_rate, blocksize=4000, dtype='int16',
                               channels=1, callback=self._callback):
            print("馃帳 Transcripci贸n iniciada...")
            last_partial = ""
            while self.running:
                try:
                    data = self.q.get(timeout=0.5)
                    if self.recognizer.AcceptWaveform(data):
                        result = json.loads(self.recognizer.Result())
                        texto = result.get("text", "")
                        if texto:
                            self.transcripcion += texto + " "
                            self.socketio.emit("texto_final", texto)
                    else:
                        parcial = json.loads(self.recognizer.PartialResult()).get("partial", "")
                        if parcial and parcial != last_partial:
                            self.socketio.emit("texto_parcial", parcial)
                            last_partial = parcial
                except queue.Empty:
                    continue

    def iniciar(self):
        if self.running:
            return
        self.running = True
        self.transcripcion = ""
        self.thread = threading.Thread(target=self._procesar_audio, daemon=True)
        self.thread.start()

    def detener(self):
        self.running = False
        if self.thread:
            self.thread.join()

    def obtener_transcripcion(self):
        return self.transcripcion.strip()

馃 Paso 2: C贸digo de app.py

python
from flask import Flask, render_template
from flask_socketio import SocketIO
from transcriptor import Transcriptor
import eventlet

eventlet.monkey_patch()

app = Flask(__name__)
socketio = SocketIO(app, cors_allowed_origins="*", async_mode='eventlet')

transcriptor = Transcriptor(socketio)

@app.route('/')
def index():
    print("✅ P谩gina cargada")
    return render_template("index.html")

@socketio.on("iniciar")
def handle_iniciar():
    print("馃幀 Iniciando transcripci贸n")
    transcriptor.iniciar()

@socketio.on("detener")
def handle_detener():
    print("馃洃 Deteniendo transcripci贸n")
    transcriptor.detener()
    socketio.emit("texto_final", transcriptor.obtener_transcripcion())

if __name__ == "__main__":
    print("馃殌 Servidor iniciado en http://localhost:5000")
    socketio.run(app, host="0.0.0.0", port=5000)

馃 Paso 3: C贸digo de templates/index.html

html
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Dictado de Voz</title>
  <style>
    body { font-family: Arial; padding: 2rem; }
    button { margin: 1rem 1rem 0 0; padding: 1rem; font-size: 1rem; }
    textarea { width: 100%; height: 200px; font-size: 1.1rem; margin-top: 1rem; }
    #parcial { font-style: italic; color: gray; margin-top: 0.5rem; }
  </style>
</head>
<body>
  <h1>馃帣️ Dictado de Voz con Vosk</h1>
  <button onclick="iniciar()">Iniciar</button>
  <button onclick="detener()">Detener</button>
  <div id="estado">Estado: Inactivo</div>
  <div id="parcial">⏳ ...</div>
  <textarea id="texto" readonly></textarea>
  <script src="https://cdn.socket.io/4.5.4/socket.io.min.js"></script>
  <script src="/static/script.js"></script>
</body>
</html>

馃 Paso 4: C贸digo de static/script.js

javascript
const socket = io();
const texto = document.getElementById("texto");
const parcial = document.getElementById("parcial");
const estado = document.getElementById("estado");

function iniciar() {
  socket.emit("iniciar");
  estado.textContent = "Estado: Escuchando...";
  parcial.textContent = "⏳ ...";
  texto.value = "";
}

function detener() {
  socket.emit("detener");
  estado.textContent = "Estado: Detenido";
}

socket.on("texto_parcial", data => {
  parcial.textContent = "⏳ " + data;
});

socket.on("texto_final", data => {
  texto.value += data + " ";
  parcial.textContent = "⏳ ...";
});

✅ Paso 5: Instala dependencias

bash
pip install flask flask-socketio eventlet vosk sounddevice

✅ Paso 6: Ejecuta

bash
python app.py

Abre http://localhost:5000 en tu navegador.

馃И ¿No funciona?

Si no ves ning煤n mensaje o el navegador no se abre:

  1. Confirma que el modelo est谩 en models/vosk-model-small-es-0.42/

  2. Ejecuta:

bash
python app.py > salida.txt 2>&1
notepad salida.txt

y dime qu茅 aparece all铆 para ayudarte.

¿Te lo puedo empaquetar en .zip con todo listo para usar?

Comentarios

Publicar un comentario

Entradas m谩s populares de este blog

b-Web Speech API

Aqu铆 tienes un ejemplo completo de un dictador de voz en tiempo real usando la Web Speech API , que convierte audio en texto en vivo. Este ejemplo incluye: Un bot贸n para iniciar/detener el dictado. Transcripci贸n en vivo en una caja de texto. Soporte para espa帽ol ( es-MX o es-ES ). ✅ HTML + JavaScript (funciona en navegadores compatibles como Chrome) html CopiarEditar <!DOCTYPE html> <html lang="es"> <head>   <meta charset="UTF-8">   <title>Dictador de Voz - Web Speech API</title>   <style>     body {       font-family: Arial, sans-serif;       padding: 2rem;       background-color: #f0f0f0;     }     #texto {       width: 100%;       height: 200px;       padding: 1rem;  ...
Leer m谩s

captura video con audio del sistema (como m煤sica o sonidos del navegador) pero sin usar el micr贸fono

  Aqu铆 tienes una versi贸n que captura video con audio del sistema (como m煤sica o sonidos del navegador) pero sin usar el micr贸fono: Aqu铆 tienes una versi贸n que captura video con audio del sistema (como m煤sica o sonidos del navegador) pero sin usar el micr贸fono: html <! DOCTYPE html > < html lang = " es " > < head > < meta charset = " UTF-8 " > < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " > < title > Grabaci贸n de Video con Audio del Sistema </ title > < style > body { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; padding: 20px; background-color: #f5f5f5; } #videoElement { width: 100%; max-width: 640px; background-color: #333; margin: 20px 0; ...
Leer m谩s

EL audio lo envia el navegador-Transcripci贸n de Voz con Whisper

  Explicaci贸n del C贸digo de Transcripci贸n de Voz con Whisper Este proyecto es un sistema de transcripci贸n de voz en tiempo real que utiliza: Whisper  (modelo de IA de OpenAI para reconocimiento de voz) Flask  (backend en Python) Web Audio API  (para capturar audio del navegador) Socket.IO  (para comunicaci贸n en tiempo real) Estructura del Proyecto text Copy Download proyecto/ ├── app.py # Servidor backend ├── templates/ │ └── index.html # Interfaz web └── static/ └── script.js # L贸gica del cliente Requisitos para ejecutarlo Python 3.7+ FFmpeg  (debe estar instalado y accesible en el PATH) Dependencias de Python  (instalables con pip) Instalaci贸n Instala las dependencias: bash Copy Download pip install flask flask-socketio eventlet openai-whisper Aseg煤rate de tener FFmpeg instalado: bash Copy Download ffmpeg -version Explicaci贸n detallada del c贸digo 1. app.py (Backend) python Copy Download import whisper import tempfile from flask ...
Leer m谩s