Реалізація автоматичної генерації субтитрів у реальному часі (Live Captions) Live Captions відображають субтитри в момент промови - для онлайн-трансляцій, відеоконференцій, публічних заходів. Ключовий параметр: затримка між виголошенням та появою субтитру (мета: <2 секунди). ### Архітектура Live Captions системи```
Microphone/Stream → WebSocket → STT → Formatter → WebSocket → Browser/Display
↓ (partial+final)
16kHz PCM 100-500ms latency
### Серверна частина з WebSocketpython
from fastapi import FastAPI, WebSocket
from faster_whisper import WhisperModel
import asyncio
import numpy as np
app = FastAPI() model = WhisperModel("medium", device="cuda", compute_type="float16")
@app.websocket("/live-captions") async def live_captions(websocket: WebSocket): await websocket.accept() clients: set[WebSocket] = set() clients.add(websocket)
audio_buffer = bytearray()
last_partial = ""
async for chunk in websocket.iter_bytes():
audio_buffer.extend(chunk)
# Обрабатываем каждые 2 секунды
if len(audio_buffer) >= 32000 * 2: # 2 sec @ 16kHz
audio_array = np.frombuffer(audio_buffer, dtype=np.int16).astype(np.float32) / 32768.0
segments, _ = model.transcribe(audio_array, language="ru")
partial_text = " ".join(seg.text.strip() for seg in segments)
if partial_text != last_partial:
last_partial = partial_text
await websocket.send_json({
"type": "partial",
"text": partial_text,
"timestamp": asyncio.get_event_loop().time()
})
audio_buffer = bytearray()
### Клієнтська відображка (React)tsx
const LiveCaptions: React.FC = () => {
const [captions, setCaptions] = useState<string[]>([]);
useEffect(() => { const ws = new WebSocket('wss://api.example.com/live-captions');
ws.onmessage = (event) => {
const data = JSON.parse(event.data);
if (data.type === 'final') {
setCaptions(prev => [...prev.slice(-4), data.text]);
}
};
return () => ws.close();
}, []);
return ( <div className="captions-overlay"> {captions.map((caption, i) => ( <p key={i} className={i === captions.length - 1 ? 'current' : 'previous'}> {caption}
))}