feat(audio): Gemini Live API replaces Whisper+GPT+ElevenLabs
Single WebSocket proxy: frontend PCM16 16kHz → backend → Gemini Live API Gemini returns PCM16 24kHz audio + text. Playback via Web Audio API queue. Removed OpenAI/DeepSeek deps. Model: gemini-3.1-flash-live-preview. Voice: Aoede. Streaming bidirectional audio with silence gating.
This commit is contained in:
@@ -27,7 +27,7 @@ export default function App() {
|
||||
sendText,
|
||||
startRecording,
|
||||
stopRecording,
|
||||
livePartial,
|
||||
|
||||
} = useConversation();
|
||||
|
||||
const [currentSceneId, setCurrentSceneId] = useState('cozy-room');
|
||||
@@ -145,7 +145,7 @@ export default function App() {
|
||||
<Notes />
|
||||
</div>
|
||||
<div className="shrink-0">
|
||||
<ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} userName={userName} livePartial={livePartial} />
|
||||
<ChatBubble messages={messages} isKiraSpeaking={isKiraSpeaking} userName={userName} />
|
||||
</div>
|
||||
<div className="shrink-0 flex gap-2">
|
||||
<input
|
||||
|
||||
@@ -11,10 +11,9 @@ interface Props {
|
||||
messages: Message[];
|
||||
isKiraSpeaking: boolean;
|
||||
userName?: string;
|
||||
livePartial?: string;
|
||||
}
|
||||
|
||||
export default function ChatBubble({ messages, isKiraSpeaking, livePartial }: Props) {
|
||||
export default function ChatBubble({ messages, isKiraSpeaking }: Props) {
|
||||
const bottomRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
@@ -28,15 +27,6 @@ export default function ChatBubble({ messages, isKiraSpeaking, livePartial }: Pr
|
||||
<span className={`w-2 h-2 rounded-full ${isKiraSpeaking ? 'bg-kira-pink animate-pulse' : 'bg-kira-mint'}`} />
|
||||
</h3>
|
||||
|
||||
{livePartial && (
|
||||
<div className="mb-2 px-3 py-1.5 bg-kira-lav/20 text-kira-plum/70 text-xs rounded-xl flex items-center gap-2">
|
||||
<span>👂</span>
|
||||
<span className="font-medium">Hearing:</span>
|
||||
<span className="truncate">{livePartial}</span>
|
||||
<span className="animate-pulse">...</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex-1 overflow-y-auto space-y-2 scrollbar-thin pr-1">
|
||||
{messages.length === 0 && (
|
||||
<div className="text-xs text-kira-plum/30 text-center py-6">
|
||||
|
||||
@@ -20,11 +20,35 @@ const USER_ID_KEY = 'kira-user-id';
|
||||
function loadUserId(): string {
|
||||
return localStorage.getItem(USER_ID_KEY) || '';
|
||||
}
|
||||
|
||||
function saveUserId(id: string) {
|
||||
localStorage.setItem(USER_ID_KEY, id);
|
||||
}
|
||||
|
||||
/**
|
||||
* Encode Float32Array (44100 Hz or any rate) to PCM16 mono at 16kHz.
|
||||
* Downsamples by simple nearest-neighbour if source rate != 16000.
|
||||
*/
|
||||
function float32ToPcm16Base64(float32: Float32Array, srcRate: number): string {
|
||||
const targetRate = 16000;
|
||||
const ratio = srcRate / targetRate;
|
||||
const outLen = Math.floor(float32.length / ratio);
|
||||
const pcm = new Int16Array(outLen);
|
||||
|
||||
for (let i = 0; i < outLen; i++) {
|
||||
const s = float32[Math.floor(i * ratio)];
|
||||
const clamped = Math.max(-1, Math.min(1, s));
|
||||
pcm[i] = clamped < 0 ? clamped * 0x8000 : clamped * 0x7FFF;
|
||||
}
|
||||
|
||||
// base64 encode raw PCM16 bytes (little-endian)
|
||||
const bytes = new Uint8Array(pcm.buffer);
|
||||
let binary = '';
|
||||
for (let i = 0; i < bytes.length; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
export function useConversation() {
|
||||
const [messages, setMessages] = useState<Message[]>([]);
|
||||
const [isConnected, setIsConnected] = useState(false);
|
||||
@@ -39,16 +63,17 @@ export function useConversation() {
|
||||
});
|
||||
const [loadingPrefs, setLoadingPrefs] = useState(true);
|
||||
const [micError, setMicError] = useState<string | null>(null);
|
||||
const [livePartial, setLivePartial] = useState<string>('');
|
||||
|
||||
const wsRef = useRef<WebSocket | null>(null);
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
const captureRef = useRef<{ stop: () => void } | null>(null);
|
||||
const recorderRef = useRef<MediaRecorder | null>(null);
|
||||
const streamRef = useRef<MediaStream | null>(null);
|
||||
const audioBufferRef = useRef<Uint8Array[]>([]);
|
||||
const audioCtxRef = useRef<AudioContext | null>(null);
|
||||
const processorRef = useRef<ScriptProcessorNode | null>(null);
|
||||
|
||||
// Audio playback queue
|
||||
const playbackCtxRef = useRef<AudioContext | null>(null);
|
||||
const playbackQueueRef = useRef<ArrayBuffer[]>([]);
|
||||
const isPlayingRef = useRef(false);
|
||||
|
||||
// Connect WebSocket
|
||||
const connect = useCallback(() => {
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) return;
|
||||
setLoadingPrefs(true);
|
||||
@@ -75,22 +100,14 @@ export function useConversation() {
|
||||
try {
|
||||
const msg = JSON.parse(event.data);
|
||||
handleMessage(msg);
|
||||
} catch { /* ignore parse errors */ }
|
||||
} catch { /* ignore */ }
|
||||
};
|
||||
}, []);
|
||||
|
||||
// Audio playback element
|
||||
useEffect(() => {
|
||||
if (!audioRef.current) {
|
||||
audioRef.current = new Audio();
|
||||
audioRef.current.onended = () => setIsKiraSpeaking(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Handle incoming WS messages
|
||||
// Handle incoming messages from backend
|
||||
const handleMessage = useCallback((msg: any) => {
|
||||
switch (msg.type) {
|
||||
case 'identified': {
|
||||
case 'identified':
|
||||
setIdentified(true);
|
||||
setLoadingPrefs(false);
|
||||
if (msg.user_id) saveUserId(msg.user_id);
|
||||
@@ -103,63 +120,40 @@ export function useConversation() {
|
||||
});
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'transcript':
|
||||
addMessage(msg.role === 'user' ? 'user' : 'kira', msg.text);
|
||||
break;
|
||||
|
||||
case 'transcript_delta':
|
||||
if (msg.text) {
|
||||
setLivePartial(msg.text);
|
||||
// Clear after short delay so it doesn't stick (for REST full-text case)
|
||||
setTimeout(() => setLivePartial(''), 1500);
|
||||
}
|
||||
break;
|
||||
|
||||
case 'speaking_start':
|
||||
setIsKiraSpeaking(true);
|
||||
break;
|
||||
|
||||
case 'audio': {
|
||||
// Incoming Opus audio chunk from streaming TTS
|
||||
// Incoming PCM16 24kHz audio from Gemini
|
||||
if (msg.data) {
|
||||
const binary = atob(msg.data);
|
||||
const bytes = new Uint8Array(binary.length);
|
||||
for (let i = 0; i < binary.length; i++) {
|
||||
bytes[i] = binary.charCodeAt(i);
|
||||
}
|
||||
audioBufferRef.current.push(bytes);
|
||||
// Convert PCM16 24kHz to Float32 for Web Audio API
|
||||
const int16 = new Int16Array(bytes.buffer);
|
||||
const float32 = new Float32Array(int16.length);
|
||||
for (let i = 0; i < int16.length; i++) {
|
||||
float32[i] = int16[i] / 32768;
|
||||
}
|
||||
enqueueAudio(float32, 24000);
|
||||
setIsKiraSpeaking(true);
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
case 'speaking_end':
|
||||
case 'turn_complete':
|
||||
setIsKiraSpeaking(false);
|
||||
// Play all accumulated chunks as one blob
|
||||
if (audioBufferRef.current.length > 0 && audioRef.current) {
|
||||
const allChunks = audioBufferRef.current;
|
||||
const totalLen = allChunks.reduce((s, c) => s + c.length, 0);
|
||||
const combined = new Uint8Array(totalLen);
|
||||
let offset = 0;
|
||||
for (const chunk of allChunks) {
|
||||
combined.set(chunk, offset);
|
||||
offset += chunk.length;
|
||||
}
|
||||
// audioBufferRef no longer used for playback (incremental)
|
||||
const blob = new Blob([combined], { type: 'audio/ogg' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
audioRef.current.src = url;
|
||||
audioRef.current.play().catch(() => {});
|
||||
}
|
||||
break;
|
||||
|
||||
case 'interruption':
|
||||
case 'interrupted':
|
||||
setIsKiraSpeaking(false);
|
||||
if (audioRef.current) {
|
||||
audioRef.current.pause();
|
||||
audioRef.current.currentTime = 0;
|
||||
}
|
||||
// Clear playback queue
|
||||
playbackQueueRef.current = [];
|
||||
isPlayingRef.current = false;
|
||||
break;
|
||||
|
||||
case 'error':
|
||||
@@ -168,6 +162,42 @@ export function useConversation() {
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Queue PCM float32 audio for playback
|
||||
const enqueueAudio = useCallback((float32: Float32Array, sampleRate: number) => {
|
||||
playbackQueueRef.current.push(float32.buffer as ArrayBuffer);
|
||||
|
||||
if (!isPlayingRef.current) {
|
||||
playNext();
|
||||
}
|
||||
|
||||
function playNext() {
|
||||
const next = playbackQueueRef.current.shift();
|
||||
if (!next) {
|
||||
isPlayingRef.current = false;
|
||||
return;
|
||||
}
|
||||
isPlayingRef.current = true;
|
||||
|
||||
const ctx = getPlaybackCtx();
|
||||
const float32 = new Float32Array(next as ArrayBuffer);
|
||||
const buf = ctx.createBuffer(1, float32.length, sampleRate);
|
||||
buf.getChannelData(0).set(float32);
|
||||
|
||||
const src = ctx.createBufferSource();
|
||||
src.buffer = buf;
|
||||
src.connect(ctx.destination);
|
||||
src.onended = playNext;
|
||||
src.start();
|
||||
}
|
||||
}, []);
|
||||
|
||||
function getPlaybackCtx(): AudioContext {
|
||||
if (!playbackCtxRef.current) {
|
||||
playbackCtxRef.current = new AudioContext({ sampleRate: 24000 });
|
||||
}
|
||||
return playbackCtxRef.current;
|
||||
}
|
||||
|
||||
const addMessage = useCallback((role: 'user' | 'kira', text: string) => {
|
||||
setMessages((prev) => [
|
||||
...prev,
|
||||
@@ -176,19 +206,16 @@ export function useConversation() {
|
||||
}, []);
|
||||
|
||||
// ── Identity ──
|
||||
|
||||
const identify = useCallback((name: string) => {
|
||||
const userId = `kira-${name.toLowerCase().replace(/[^a-z0-9]/g, '-')}`;
|
||||
saveUserId(userId);
|
||||
setPreferences((p) => ({ ...p, name }));
|
||||
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
wsRef.current.send(JSON.stringify({ type: 'identify', user_id: userId, name }));
|
||||
}
|
||||
}, []);
|
||||
|
||||
// ── Preferences ──
|
||||
|
||||
const setPreference = useCallback((key: string, value: string) => {
|
||||
setPreferences((p) => ({ ...p, [key]: value }));
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN && identified) {
|
||||
@@ -196,17 +223,18 @@ export function useConversation() {
|
||||
}
|
||||
}, [identified]);
|
||||
|
||||
// ── Audio (Realtime PCM16) ──
|
||||
|
||||
// ── Audio capture via ScriptProcessorNode (PCM16 16kHz stream) ──
|
||||
const startRecording = useCallback(async () => {
|
||||
if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
|
||||
if (!navigator.mediaDevices?.getUserMedia) {
|
||||
addMessage('kira', 'Mic requires HTTPS. Try accessing via HTTPS!');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setMicError(null);
|
||||
const stream = await navigator.mediaDevices.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true } });
|
||||
const stream = await navigator.mediaDevices.getUserMedia({
|
||||
audio: { echoCancellation: true, noiseSuppression: true, sampleRate: 48000 },
|
||||
});
|
||||
streamRef.current = stream;
|
||||
|
||||
const ws = wsRef.current;
|
||||
@@ -216,27 +244,32 @@ export function useConversation() {
|
||||
return;
|
||||
}
|
||||
|
||||
// Use MediaRecorder for full utterance blob (Opus/webm) — sent on stop for REST STT
|
||||
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm;codecs=opus' });
|
||||
const chunks: Blob[] = [];
|
||||
mediaRecorder.ondataavailable = (e) => {
|
||||
if (e.data.size > 0) chunks.push(e.data);
|
||||
};
|
||||
mediaRecorder.onstop = () => {
|
||||
if (chunks.length > 0 && ws.readyState === WebSocket.OPEN) {
|
||||
const blob = new Blob(chunks, { type: 'audio/webm' });
|
||||
blob.arrayBuffer().then((buf) => {
|
||||
const base64 = arrayBufferToBase64(buf);
|
||||
ws.send(JSON.stringify({ type: 'audio', data: base64 }));
|
||||
});
|
||||
// Create AudioContext at native sample rate, capture via ScriptProcessor
|
||||
const audioCtx = new AudioContext({ sampleRate: 48000 });
|
||||
audioCtxRef.current = audioCtx;
|
||||
|
||||
const source = audioCtx.createMediaStreamSource(stream);
|
||||
// 4096 buffer size → ~85ms chunks at 48kHz
|
||||
const processor = audioCtx.createScriptProcessor(4096, 1, 1);
|
||||
processorRef.current = processor;
|
||||
|
||||
processor.onaudioprocess = (e) => {
|
||||
if (ws.readyState !== WebSocket.OPEN) return;
|
||||
const float32 = e.inputBuffer.getChannelData(0);
|
||||
// Skip silent frames (reduces network traffic)
|
||||
let maxAbs = 0;
|
||||
for (let i = 0; i < float32.length; i += 4) {
|
||||
const v = Math.abs(float32[i]);
|
||||
if (v > maxAbs) maxAbs = v;
|
||||
}
|
||||
chunks.length = 0;
|
||||
stream.getTracks().forEach((t) => t.stop());
|
||||
streamRef.current = null;
|
||||
setIsRecording(false);
|
||||
if (maxAbs < 0.01) return; // silence gate
|
||||
|
||||
const b64 = float32ToPcm16Base64(float32, audioCtx.sampleRate);
|
||||
ws.send(JSON.stringify({ type: 'audio', data: b64 }));
|
||||
};
|
||||
recorderRef.current = mediaRecorder;
|
||||
mediaRecorder.start();
|
||||
|
||||
source.connect(processor);
|
||||
processor.connect(audioCtx.destination);
|
||||
setIsRecording(true);
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
@@ -246,20 +279,16 @@ export function useConversation() {
|
||||
}, [addMessage]);
|
||||
|
||||
const stopRecording = useCallback(() => {
|
||||
if (recorderRef.current && recorderRef.current.state === 'recording') {
|
||||
recorderRef.current.stop();
|
||||
// onstop will handle sending the blob and cleanup
|
||||
} else {
|
||||
// fallback cleanup
|
||||
streamRef.current?.getTracks().forEach((t) => t.stop());
|
||||
streamRef.current = null;
|
||||
setIsRecording(false);
|
||||
}
|
||||
captureRef.current = null; // legacy
|
||||
processorRef.current?.disconnect();
|
||||
processorRef.current = null;
|
||||
audioCtxRef.current?.close().catch(() => {});
|
||||
audioCtxRef.current = null;
|
||||
streamRef.current?.getTracks().forEach((t) => t.stop());
|
||||
streamRef.current = null;
|
||||
setIsRecording(false);
|
||||
}, []);
|
||||
|
||||
// ── Text ──
|
||||
|
||||
// ── Text input ──
|
||||
const sendText = useCallback((text: string) => {
|
||||
if (!text.trim()) return;
|
||||
if (wsRef.current?.readyState === WebSocket.OPEN) {
|
||||
@@ -272,11 +301,9 @@ export function useConversation() {
|
||||
connect();
|
||||
return () => {
|
||||
wsRef.current?.close();
|
||||
if (recorderRef.current && recorderRef.current.state === 'recording') recorderRef.current.stop();
|
||||
captureRef.current?.stop();
|
||||
streamRef.current?.getTracks().forEach((t) => t.stop());
|
||||
stopRecording();
|
||||
};
|
||||
}, [connect]);
|
||||
}, [connect, stopRecording]);
|
||||
|
||||
return {
|
||||
messages,
|
||||
@@ -287,7 +314,6 @@ export function useConversation() {
|
||||
preferences,
|
||||
loadingPrefs,
|
||||
micError,
|
||||
livePartial,
|
||||
identify,
|
||||
setPreference,
|
||||
sendText,
|
||||
@@ -295,16 +321,3 @@ export function useConversation() {
|
||||
stopRecording,
|
||||
};
|
||||
}
|
||||
|
||||
// ── Helpers ──
|
||||
|
||||
function arrayBufferToBase64(buffer: ArrayBufferLike): string {
|
||||
const bytes = new Uint8Array(buffer);
|
||||
let binary = '';
|
||||
for (let i = 0; i < bytes.length; i++) {
|
||||
binary += String.fromCharCode(bytes[i]);
|
||||
}
|
||||
return btoa(binary);
|
||||
}
|
||||
|
||||
// (Legacy PCM capture removed - MediaRecorder full-blob path is active; eliminates ScriptProcessorNode deprecation)
|
||||
|
||||
Reference in New Issue
Block a user