feat: implement full UPDATE.md review — critical fixes, UI upgrade, infra hardening
Critical frontend bugs: - Add TrackSubscribed/attach() for agent audio playback - Fix decodeToString TypeError with TextDecoder - XSS fix: innerHTML -> textContent in addMessage - Fresh token on reconnect retry Agent fixes: - GemmaLLM subclass with reasoning_content fallback wrapper - Disable Gemma 4 thinking mode via chat_template_kwargs (6.8s -> 0.5s) - Remove duplicate session-level LLM - Replace global _active_session with closure-based handler - asyncio.create_task instead of deprecated get_event_loop - Explicit silero VAD, topic filter on voice-control Infra: - supervisord: all programs log to /dev/stdout - Dockerfile: uv sync --frozen with committed uv.lock - nginx config moved to real file, token_server.py no longer served - entrypoint.sh: cert persisted, only regenerated on IP change - compose: healthcheck + cert volume - token_server: CORS removed, room pinned to voice-room UI upgrade: - Orb UI with state machine (idle/connecting/listening/thinking/speaking) - Streaming transcripts via lk.transcription text streams - Barge-in hint, thinking chip, audio visualizer - Glassmorphism, chat bubbles, settings sheet, light mode - PWA manifest, favicon, wake-lock, safe-area insets - localStorage conversation history Docs: AGENTS.md drift fixed
This commit is contained in:
Shane
+469
-70
@@ -9,32 +9,429 @@ const LIVEKIT_URL = `${window.location.protocol === "https:" ? "wss" : "ws"}://$
|
||||
const ROOM_NAME = "voice-room";
|
||||
const AGENT_NAME = "voice-assistant";
|
||||
|
||||
const VOICES = [
|
||||
{ id: "en-US-AvaNeural", name: "Ava", tag: "DragonHD" },
|
||||
{ id: "en-US-JennyNeural", name: "Jenny" },
|
||||
{ id: "en-US-GuyNeural", name: "Guy" },
|
||||
{ id: "en-US-AndrewNeural", name: "Andrew" },
|
||||
{ id: "en-US-AriaNeural", name: "Aria" },
|
||||
{ id: "en-US-EmmaNeural", name: "Emma" },
|
||||
{ id: "en-US-EricNeural", name: "Eric" },
|
||||
{ id: "en-US-BrianNeural", name: "Brian" },
|
||||
{ id: "en-US-AshleyNeural", name: "Ashley" },
|
||||
{ id: "en-US-RichardNeural", name: "Richard" },
|
||||
{ id: "en-US-TinaNeural", name: "Tina" },
|
||||
{ id: "en-US-SteffanNeural", name: "Steffan" },
|
||||
];
|
||||
|
||||
const HISTORY_KEY = "voice_history";
|
||||
const HISTORY_MAX = 50;
|
||||
|
||||
// ── State ───────────────────────────────────────────────────────────────────
|
||||
let room = null;
|
||||
let agentParticipant = null;
|
||||
let uiState = "idle"; // idle | connecting | listening | thinking | speaking
|
||||
let micLevel = 0; // 0..1, smoothed
|
||||
let agentAudioLevel = 0; // 0..1, smoothed
|
||||
let userSpeaking = false; // local VAD-ish flag from mic level
|
||||
let wakeLock = null;
|
||||
|
||||
// ── DOM ─────────────────────────────────────────────────────────────────────
|
||||
const startBtn = document.getElementById("startBtn");
|
||||
const stopBtn = document.getElementById("stopBtn");
|
||||
const statusEl = document.getElementById("status");
|
||||
const messagesEl = document.getElementById("messages");
|
||||
const voiceSelect = document.getElementById("voiceSelect");
|
||||
const orbEl = document.getElementById("orb");
|
||||
const stateLabelEl = document.getElementById("stateLabel");
|
||||
const thinkingChipEl = document.getElementById("thinkingChip");
|
||||
const bargeHintEl = document.getElementById("bargeHint");
|
||||
const micMeterFillEl = document.getElementById("micMeterFill");
|
||||
const settingsBtn = document.getElementById("settingsBtn");
|
||||
const settingsSheet = document.getElementById("settingsSheet");
|
||||
const sheetBackdrop = document.getElementById("sheetBackdrop");
|
||||
const closeSheetBtn = document.getElementById("closeSheetBtn");
|
||||
const voiceListEl = document.getElementById("voiceList");
|
||||
const clearBtn = document.getElementById("clearBtn");
|
||||
|
||||
// ── Voice switching ─────────────────────────────────────────────────────────
|
||||
voiceSelect.addEventListener("change", () => {
|
||||
const voice = voiceSelect.value;
|
||||
if (room && agentParticipant) {
|
||||
sendVoiceMessage(voice);
|
||||
addMessage("system", `Voice changed to ${voice}`);
|
||||
} else {
|
||||
localStorage.setItem("preferred_voice", voice);
|
||||
// ── Audio analysers (mic + remote agent audio) ─────────────────────────────
|
||||
let micCtx = null;
|
||||
let micAnalyser = null;
|
||||
let micBuf = null;
|
||||
let remoteCtx = null;
|
||||
let remoteAnalyser = null;
|
||||
let remoteFreqBuf = null;
|
||||
|
||||
function setupMicAnalyser() {
|
||||
try {
|
||||
const pub = room.localParticipant.getTrackPublication(LivekitClient.Track.Source.Microphone);
|
||||
const mst = pub && pub.track && pub.track.mediaStreamTrack;
|
||||
if (mst) {
|
||||
micCtx = new AudioContext();
|
||||
micAnalyser = micCtx.createAnalyser();
|
||||
micAnalyser.fftSize = 512;
|
||||
micBuf = new Float32Array(micAnalyser.fftSize);
|
||||
micCtx.createMediaStreamSource(new MediaStream([mst])).connect(micAnalyser);
|
||||
}
|
||||
} catch (e) { /* fall back to SDK audioLevel in the meter loop */ }
|
||||
}
|
||||
|
||||
function setupRemoteAudioAnalyser(audioEl) {
|
||||
try {
|
||||
if (!audioEl.srcObject) return;
|
||||
remoteCtx = new AudioContext();
|
||||
remoteAnalyser = remoteCtx.createAnalyser();
|
||||
remoteAnalyser.fftSize = 256;
|
||||
remoteFreqBuf = new Uint8Array(remoteAnalyser.frequencyBinCount);
|
||||
remoteCtx.createMediaStreamSource(audioEl.srcObject).connect(remoteAnalyser);
|
||||
} catch (e) { /* analyser optional */ }
|
||||
}
|
||||
|
||||
function teardownAudio() {
|
||||
for (const ctx of [micCtx, remoteCtx]) {
|
||||
if (ctx && ctx.state !== "closed") ctx.close().catch(() => {});
|
||||
}
|
||||
micCtx = micAnalyser = micBuf = null;
|
||||
remoteCtx = remoteAnalyser = remoteFreqBuf = null;
|
||||
}
|
||||
|
||||
function readMicLevel() {
|
||||
let level = 0;
|
||||
if (micAnalyser && micBuf) {
|
||||
micAnalyser.getFloatTimeDomainData(micBuf);
|
||||
for (let i = 0; i < micBuf.length; i++) level = Math.max(level, Math.abs(micBuf[i]));
|
||||
} else if (room && room.localParticipant) {
|
||||
level = room.localParticipant.audioLevel || 0;
|
||||
}
|
||||
// Smooth so the orb pulses rather than flickers
|
||||
micLevel = micLevel * 0.6 + level * 0.4;
|
||||
return micLevel;
|
||||
}
|
||||
|
||||
function readAgentAudioLevel() {
|
||||
let level = 0;
|
||||
if (remoteAnalyser && remoteFreqBuf) {
|
||||
remoteAnalyser.getByteFrequencyData(remoteFreqBuf);
|
||||
for (let i = 0; i < remoteFreqBuf.length; i++) level = Math.max(level, remoteFreqBuf[i]);
|
||||
level /= 255;
|
||||
} else if (agentParticipant && agentParticipant.audioLevel !== undefined) {
|
||||
level = agentParticipant.audioLevel || 0;
|
||||
}
|
||||
agentAudioLevel = agentAudioLevel * 0.6 + level * 0.4;
|
||||
return agentAudioLevel;
|
||||
}
|
||||
|
||||
// ── State machine ───────────────────────────────────────────────────────────
|
||||
const STATE_LABELS = {
|
||||
idle: "Idle",
|
||||
connecting: "Connecting",
|
||||
listening: "Listening",
|
||||
thinking: "Thinking",
|
||||
speaking: "Speaking",
|
||||
};
|
||||
|
||||
function setState(next) {
|
||||
if (next === uiState) return;
|
||||
uiState = next;
|
||||
orbEl.dataset.state = next;
|
||||
stateLabelEl.textContent = STATE_LABELS[next] || next;
|
||||
|
||||
// Thinking timer: show the "thinking..." chip if it lingers past 2s
|
||||
if (next === "thinking") {
|
||||
thinkingChipEl.hidden = true;
|
||||
setTimeout(() => {
|
||||
if (uiState === "thinking") thinkingChipEl.hidden = false;
|
||||
}, 2000);
|
||||
} else {
|
||||
thinkingChipEl.hidden = true;
|
||||
}
|
||||
|
||||
// Barge-in hint only while the agent is speaking
|
||||
bargeHintEl.hidden = next !== "speaking";
|
||||
|
||||
if (next === "idle") {
|
||||
micLevel = 0;
|
||||
agentAudioLevel = 0;
|
||||
userSpeaking = false;
|
||||
}
|
||||
}
|
||||
|
||||
function inferState() {
|
||||
if (!room || !room.localParticipant) return "idle";
|
||||
if (!agentParticipant) return "connecting";
|
||||
readMicLevel();
|
||||
readAgentAudioLevel();
|
||||
userSpeaking = micLevel > 0.035;
|
||||
if (agentAudioLevel > 0.02) return "speaking";
|
||||
if (userSpeaking) return "listening";
|
||||
// Not speaking, agent silent: stay in thinking until audio arrives,
|
||||
// otherwise settle back to listening.
|
||||
if (uiState === "thinking" || uiState === "speaking") return "thinking";
|
||||
return "listening";
|
||||
}
|
||||
|
||||
// ── Visual loop: drives orb + meter + state inference ───────────────────────
|
||||
let visualTimer = null;
|
||||
function startVisualLoop() {
|
||||
if (visualTimer) clearInterval(visualTimer);
|
||||
visualTimer = setInterval(() => {
|
||||
if (!room || !room.localParticipant) return;
|
||||
setState(inferState());
|
||||
|
||||
// Mic meter (thin bar under the status line)
|
||||
micMeterFillEl.style.width = `${Math.min(100, Math.round(micLevel * 250))}%`;
|
||||
|
||||
// Orb pulse: scale/opacity from whichever stream is active
|
||||
if (uiState === "speaking") {
|
||||
orbEl.style.setProperty("--pulse-scale", (1 + agentAudioLevel * 0.35).toFixed(3));
|
||||
orbEl.style.setProperty("--pulse-opacity", Math.min(1, 0.55 + agentAudioLevel).toFixed(3));
|
||||
} else if (uiState === "listening" && userSpeaking) {
|
||||
orbEl.style.setProperty("--pulse-scale", (1 + micLevel * 0.4).toFixed(3));
|
||||
orbEl.style.setProperty("--pulse-opacity", Math.min(1, 0.5 + micLevel).toFixed(3));
|
||||
} else {
|
||||
orbEl.style.setProperty("--pulse-scale", "1");
|
||||
orbEl.style.setProperty("--pulse-opacity", "");
|
||||
}
|
||||
|
||||
// Agent audio visualizer bars on the latest agent bubble
|
||||
const viz = messagesEl.querySelector(".message-row.agent:last-of-type .audio-viz");
|
||||
if (viz) {
|
||||
let level = 0;
|
||||
if (remoteAnalyser && remoteFreqBuf) {
|
||||
for (let i = 0; i < remoteFreqBuf.length; i++) level = Math.max(level, remoteFreqBuf[i]);
|
||||
level /= 255;
|
||||
}
|
||||
const bars = viz.children;
|
||||
for (let i = 0; i < bars.length; i++) {
|
||||
// Per-bar phase offset so the bars dance rather than move in lockstep
|
||||
const h = Math.max(0.15, level * (0.6 + 0.4 * Math.sin(Date.now() / 120 + i * 1.3)));
|
||||
bars[i].style.height = `${h * 100}%`;
|
||||
}
|
||||
}
|
||||
}, 80);
|
||||
}
|
||||
|
||||
function stopVisualLoop() {
|
||||
if (visualTimer) clearInterval(visualTimer);
|
||||
visualTimer = null;
|
||||
micMeterFillEl.style.width = "0%";
|
||||
orbEl.style.setProperty("--pulse-scale", "1");
|
||||
orbEl.style.setProperty("--pulse-opacity", "");
|
||||
}
|
||||
|
||||
// ── Conversation history (localStorage) ─────────────────────────────────────
|
||||
function loadHistory() {
|
||||
try {
|
||||
const raw = localStorage.getItem(HISTORY_KEY);
|
||||
if (!raw) return [];
|
||||
const arr = JSON.parse(raw);
|
||||
return Array.isArray(arr) ? arr.slice(-HISTORY_MAX) : [];
|
||||
} catch (e) { return []; }
|
||||
}
|
||||
|
||||
function persistHistory() {
|
||||
try {
|
||||
localStorage.setItem(HISTORY_KEY, JSON.stringify(history.slice(-HISTORY_MAX)));
|
||||
} catch (e) { /* storage full or unavailable */ }
|
||||
}
|
||||
|
||||
let history = loadHistory();
|
||||
|
||||
function renderMessage(msg) {
|
||||
const wrap = document.createElement("div");
|
||||
wrap.className = `message-row ${msg.role}`;
|
||||
wrap.dataset.ts = msg.ts || "";
|
||||
|
||||
if (msg.role === "agent") {
|
||||
const dot = document.createElement("span");
|
||||
dot.className = "avatar-dot";
|
||||
wrap.appendChild(dot);
|
||||
}
|
||||
|
||||
const bubble = document.createElement("div");
|
||||
bubble.className = "bubble";
|
||||
bubble.textContent = msg.text || "";
|
||||
if (msg.role === "agent") {
|
||||
const viz = document.createElement("span");
|
||||
viz.className = "audio-viz";
|
||||
for (let i = 0; i < 5; i++) viz.appendChild(document.createElement("i"));
|
||||
bubble.appendChild(viz);
|
||||
}
|
||||
wrap.appendChild(bubble);
|
||||
messagesEl.appendChild(wrap);
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
}
|
||||
|
||||
function addMessage(role, text) {
|
||||
const msg = { role, text, ts: Date.now() };
|
||||
history.push(msg);
|
||||
persistHistory();
|
||||
renderMessage(msg);
|
||||
return msg;
|
||||
}
|
||||
|
||||
// Partial transcripts render greyed and update in place until a final arrives.
|
||||
function addPartial(role, text) {
|
||||
const rows = messagesEl.querySelectorAll(".message-row.partial");
|
||||
let last = null;
|
||||
for (const r of rows) last = r;
|
||||
if (last && last.dataset.role === role) {
|
||||
last.querySelector(".bubble").textContent = text;
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
return;
|
||||
}
|
||||
const wrap = document.createElement("div");
|
||||
wrap.className = `message-row ${role} partial`;
|
||||
wrap.dataset.role = role;
|
||||
if (role === "agent") {
|
||||
const dot = document.createElement("span");
|
||||
dot.className = "avatar-dot";
|
||||
wrap.appendChild(dot);
|
||||
}
|
||||
const bubble = document.createElement("div");
|
||||
bubble.className = "bubble partial";
|
||||
bubble.textContent = text;
|
||||
wrap.appendChild(bubble);
|
||||
messagesEl.appendChild(wrap);
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
}
|
||||
|
||||
function clearPartials() {
|
||||
messagesEl.querySelectorAll(".message-row.partial").forEach((el) => el.remove());
|
||||
}
|
||||
|
||||
function renderHistory() {
|
||||
messagesEl.innerHTML = "";
|
||||
for (const msg of history) renderMessage(msg);
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
}
|
||||
|
||||
clearBtn.addEventListener("click", () => {
|
||||
history = [];
|
||||
persistHistory();
|
||||
clearPartials();
|
||||
renderHistory();
|
||||
});
|
||||
|
||||
// Restore saved voice preference
|
||||
const savedVoice = localStorage.getItem("preferred_voice");
|
||||
if (savedVoice) {
|
||||
voiceSelect.value = savedVoice;
|
||||
renderHistory();
|
||||
|
||||
// ── Transcripts ─────────────────────────────────────────────────────────────
|
||||
// Primary: livekit-agents built-in text stream (word-by-word when available).
|
||||
function registerTranscriptionStream(rm) {
|
||||
try {
|
||||
rm.registerTextStreamHandler("lk.transcription", async (reader, participantInfo) => {
|
||||
const text = await reader.readAll();
|
||||
if (!text || !text.trim()) return;
|
||||
const attrs = (reader.info && reader.info.attributes) || {};
|
||||
const trackId = attrs["lk.transcribed_track_id"] || "";
|
||||
// Distinguish user vs agent by the transcribed track's owner.
|
||||
let role = "agent";
|
||||
if (participantInfo && participantInfo.identity === AGENT_NAME) {
|
||||
role = "agent";
|
||||
} else if (trackId) {
|
||||
for (const p of rm.remoteParticipants.values()) {
|
||||
const pub = p.getTrackPublication(trackId);
|
||||
if (pub) { role = isAgent(p) ? "agent" : "user"; break; }
|
||||
}
|
||||
}
|
||||
addMessage(role, text.trim());
|
||||
});
|
||||
} catch (e) {
|
||||
// Older SDKs may not support registerTextStreamHandler — the data
|
||||
// channel handler below still covers transcripts.
|
||||
console.warn("text stream registration failed:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// Secondary: agent publishes {type:"transcript"} on topic "transcript".
|
||||
function handleDataPacket(payload, participant, topic) {
|
||||
try {
|
||||
const msg = JSON.parse(new TextDecoder().decode(payload));
|
||||
if (msg.type === "transcript") {
|
||||
addMessage(msg.role || "agent", msg.text);
|
||||
}
|
||||
// set_voice messages flow the other way; nothing to do client-side.
|
||||
} catch (e) {
|
||||
console.warn("bad data packet", e);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Voice settings sheet ────────────────────────────────────────────────────
|
||||
function currentVoiceId() {
|
||||
const saved = localStorage.getItem("preferred_voice");
|
||||
return VOICES.some((v) => v.id === saved) ? saved : VOICES[0].id;
|
||||
}
|
||||
|
||||
function renderVoiceList() {
|
||||
voiceListEl.innerHTML = "";
|
||||
const active = currentVoiceId();
|
||||
for (const v of VOICES) {
|
||||
const card = document.createElement("div");
|
||||
card.className = "voice-card" + (v.id === active ? " active" : "");
|
||||
card.dataset.voice = v.id;
|
||||
|
||||
const name = document.createElement("span");
|
||||
name.className = "voice-name";
|
||||
name.textContent = v.name + (v.tag ? ` (${v.tag})` : "");
|
||||
|
||||
const previewBtn = document.createElement("button");
|
||||
previewBtn.className = "btn btn-ghost voice-preview";
|
||||
previewBtn.setAttribute("aria-label", `Preview ${v.name}`);
|
||||
previewBtn.title = "Preview (coming soon)";
|
||||
// TODO: play a short Azure TTS sample for this voice.
|
||||
previewBtn.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
addMessage("system", `Preview for ${v.name} is not wired up yet.`);
|
||||
});
|
||||
|
||||
card.appendChild(name);
|
||||
card.appendChild(previewBtn);
|
||||
card.addEventListener("click", () => selectVoice(v.id));
|
||||
voiceListEl.appendChild(card);
|
||||
}
|
||||
}
|
||||
|
||||
function selectVoice(voiceId) {
|
||||
localStorage.setItem("preferred_voice", voiceId);
|
||||
renderVoiceList();
|
||||
if (room && agentParticipant) {
|
||||
sendVoiceMessage(voiceId);
|
||||
const v = VOICES.find((x) => x.id === voiceId);
|
||||
addMessage("system", `Voice changed to ${v ? v.name : voiceId}`);
|
||||
}
|
||||
}
|
||||
|
||||
function openSheet() {
|
||||
renderVoiceList();
|
||||
sheetBackdrop.hidden = false;
|
||||
settingsSheet.classList.add("open");
|
||||
}
|
||||
|
||||
function closeSheet() {
|
||||
settingsSheet.classList.remove("open");
|
||||
sheetBackdrop.hidden = true;
|
||||
}
|
||||
|
||||
settingsBtn.addEventListener("click", openSheet);
|
||||
closeSheetBtn.addEventListener("click", closeSheet);
|
||||
sheetBackdrop.addEventListener("click", closeSheet);
|
||||
document.addEventListener("keydown", (e) => {
|
||||
if (e.key === "Escape") closeSheet();
|
||||
});
|
||||
|
||||
// ── Wake lock ───────────────────────────────────────────────────────────────
|
||||
async function acquireWakeLock() {
|
||||
try {
|
||||
if ("wakeLock" in navigator) {
|
||||
wakeLock = await navigator.wakeLock.request("screen");
|
||||
}
|
||||
} catch (e) { /* not critical */ }
|
||||
}
|
||||
|
||||
function releaseWakeLock() {
|
||||
if (wakeLock) {
|
||||
wakeLock.release().catch(() => {});
|
||||
wakeLock = null;
|
||||
}
|
||||
}
|
||||
|
||||
// ── Agent detection ─────────────────────────────────────────────────────────
|
||||
@@ -63,7 +460,7 @@ function markAgentFound(rm, participant) {
|
||||
agentParticipant = participant;
|
||||
statusEl.textContent = "Agent connected — speak now";
|
||||
// Send current voice selection to the agent
|
||||
sendVoiceMessage(voiceSelect.value, rm);
|
||||
sendVoiceMessage(currentVoiceId(), rm);
|
||||
}
|
||||
|
||||
function createRoom(token) {
|
||||
@@ -77,18 +474,49 @@ function createRoom(token) {
|
||||
if (isAgent(participant)) markAgentFound(newRoom, participant);
|
||||
});
|
||||
|
||||
// Listen for transcripts from the agent
|
||||
newRoom.on(RoomEvent.DataReceived, (payload) => {
|
||||
try {
|
||||
const msg = JSON.parse(payload.decodeToString());
|
||||
if (msg.type === "transcript") {
|
||||
addMessage(msg.role || "agent", msg.text);
|
||||
}
|
||||
} catch (e) {
|
||||
// Ignore non-JSON data
|
||||
// Attach and play incoming audio tracks (agent TTS)
|
||||
newRoom.on(RoomEvent.TrackSubscribed, (track, publication, participant) => {
|
||||
if (track.kind === LivekitClient.Track.Kind.Audio) {
|
||||
const el = track.attach();
|
||||
el.id = `audio-${participant.identity}`;
|
||||
document.body.appendChild(el);
|
||||
// Remote audio analyser drives the orb + visualizer while speaking
|
||||
setupRemoteAudioAnalyser(el);
|
||||
}
|
||||
});
|
||||
|
||||
newRoom.on(RoomEvent.TrackUnsubscribed, (track) => {
|
||||
track.detach().forEach((el) => el.remove());
|
||||
});
|
||||
|
||||
// Browsers block audio playback until a user gesture; show an unlock
|
||||
// button if the page loads without one.
|
||||
newRoom.on(RoomEvent.AudioPlaybackStatusChanged, () => {
|
||||
if (!newRoom.canPlaybackAudio) {
|
||||
const existing = document.getElementById("audioUnlockBtn");
|
||||
if (!existing) {
|
||||
const btn = document.createElement("button");
|
||||
btn.id = "audioUnlockBtn";
|
||||
btn.className = "btn btn-primary";
|
||||
btn.textContent = "Tap to enable audio";
|
||||
btn.style.cssText = "position:fixed;bottom:2rem;left:50%;transform:translateX(-50%);z-index:999;padding:1rem 2rem;font-size:1.1rem;border-radius:999px;box-shadow:0 4px 24px rgba(0,0,0,.5)";
|
||||
btn.onclick = () => { newRoom.startAudio(); btn.remove(); };
|
||||
document.body.appendChild(btn);
|
||||
}
|
||||
} else {
|
||||
const existing = document.getElementById("audioUnlockBtn");
|
||||
if (existing) existing.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Live text stream (word-by-word transcripts)
|
||||
registerTranscriptionStream(newRoom);
|
||||
|
||||
// Data channel: transcripts (secondary source) + voice control
|
||||
newRoom.on(RoomEvent.DataReceived, (payload, participant, kind, topic) => {
|
||||
handleDataPacket(payload, participant, topic);
|
||||
});
|
||||
|
||||
// Guard with `=== room` so a stale (retry-discarded) connection cannot
|
||||
// clobber UI state of the active one.
|
||||
newRoom.on(RoomEvent.ConnectionQualityChanged, (participant, quality) => {
|
||||
@@ -99,7 +527,11 @@ function createRoom(token) {
|
||||
|
||||
newRoom.on(RoomEvent.Disconnected, () => {
|
||||
if (newRoom !== room) return;
|
||||
teardownAudio();
|
||||
stopVisualLoop();
|
||||
releaseWakeLock();
|
||||
statusEl.textContent = "Disconnected";
|
||||
setState("idle");
|
||||
startBtn.disabled = false;
|
||||
stopBtn.disabled = true;
|
||||
agentParticipant = null;
|
||||
@@ -135,12 +567,15 @@ function waitForAgent(timeoutMs) {
|
||||
|
||||
startBtn.addEventListener("click", async () => {
|
||||
try {
|
||||
setState("connecting");
|
||||
statusEl.textContent = "Connecting...";
|
||||
await acquireWakeLock();
|
||||
|
||||
// Get a signed access token from the token endpoint
|
||||
const token = await fetchToken(ROOM_NAME);
|
||||
|
||||
room = await createRoom(token);
|
||||
await room.startAudio();
|
||||
|
||||
// The agent is dispatched when we join. If it misses the dispatch
|
||||
// (e.g. the server just started and the worker wasn't ready yet),
|
||||
@@ -152,7 +587,8 @@ startBtn.addEventListener("click", async () => {
|
||||
room = null; // detach first so its Disconnected handler
|
||||
agentParticipant = null; // cannot clobber the UI
|
||||
await stale.disconnect();
|
||||
room = await createRoom(token);
|
||||
const freshToken = await fetchToken(ROOM_NAME);
|
||||
room = await createRoom(freshToken);
|
||||
if (!(await waitForAgent(15000))) {
|
||||
throw new Error("Assistant did not join — reload the page and try again");
|
||||
}
|
||||
@@ -165,14 +601,14 @@ startBtn.addEventListener("click", async () => {
|
||||
startBtn.disabled = true;
|
||||
stopBtn.disabled = false;
|
||||
|
||||
// Live mic level readout: if this stays at 0 while you talk, the
|
||||
// phone is not capturing audio (iOS quirk), and the problem is on
|
||||
// the device side, not the server.
|
||||
startMicMeter();
|
||||
setupMicAnalyser();
|
||||
startVisualLoop();
|
||||
|
||||
} catch (err) {
|
||||
console.error("Connection failed:", err);
|
||||
statusEl.textContent = `Error: ${err.message}`;
|
||||
setState("idle");
|
||||
releaseWakeLock();
|
||||
}
|
||||
});
|
||||
|
||||
@@ -183,7 +619,12 @@ stopBtn.addEventListener("click", () => {
|
||||
room = null;
|
||||
agentParticipant = null;
|
||||
}
|
||||
teardownAudio();
|
||||
stopVisualLoop();
|
||||
releaseWakeLock();
|
||||
document.querySelectorAll('[id^="audio-"]').forEach(el => el.remove());
|
||||
statusEl.textContent = "Disconnected";
|
||||
setState("idle");
|
||||
startBtn.disabled = false;
|
||||
stopBtn.disabled = true;
|
||||
});
|
||||
@@ -210,45 +651,3 @@ function sendVoiceMessage(voice, targetRoom) {
|
||||
reliable: true,
|
||||
});
|
||||
}
|
||||
|
||||
// ── Helper: live mic level readout (diagnostic) ─────────────────────────────
|
||||
function startMicMeter() {
|
||||
const el = document.getElementById("micLevel");
|
||||
if (!el) return;
|
||||
let audioCtx = null;
|
||||
let analyser = null;
|
||||
try {
|
||||
const pub = room.localParticipant.getTrackPublication(LivekitClient.Track.Source.Microphone);
|
||||
const mst = pub && pub.track && pub.track.mediaStreamTrack;
|
||||
if (mst) {
|
||||
audioCtx = new AudioContext();
|
||||
analyser = audioCtx.createAnalyser();
|
||||
analyser.fftSize = 512;
|
||||
audioCtx.createMediaStreamSource(new MediaStream([mst])).connect(analyser);
|
||||
}
|
||||
} catch (e) { /* fall back to SDK audioLevel below */ }
|
||||
|
||||
const buf = analyser ? new Float32Array(analyser.fftSize) : null;
|
||||
window.micMeterTimer = setInterval(() => {
|
||||
if (!room || !room.localParticipant) { clearInterval(window.micMeterTimer); return; }
|
||||
let level = 0;
|
||||
if (analyser) {
|
||||
analyser.getFloatTimeDomainData(buf);
|
||||
for (let i = 0; i < buf.length; i++) level = Math.max(level, Math.abs(buf[i]));
|
||||
} else {
|
||||
level = room.localParticipant.audioLevel;
|
||||
}
|
||||
el.textContent = `mic: ${Math.round(level * 100)}%`;
|
||||
el.style.color = level > 0.02 ? "#4ade80" : "#94a3b8";
|
||||
}, 300);
|
||||
}
|
||||
|
||||
// ── Helper: add a message to the transcript ─────────────────────────────────
|
||||
function addMessage(role, text) {
|
||||
const div = document.createElement("div");
|
||||
div.className = `message ${role}`;
|
||||
const label = role === "user" ? "You" : role === "agent" ? "Assistant" : "System";
|
||||
div.innerHTML = `<span class="role">${label}</span> ${text}`;
|
||||
messagesEl.appendChild(div);
|
||||
messagesEl.scrollTop = messagesEl.scrollHeight;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,9 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
|
||||
<defs>
|
||||
<radialGradient id="g" cx="35%" cy="30%" r="75%">
|
||||
<stop offset="0%" stop-color="#60a5fa"/>
|
||||
<stop offset="100%" stop-color="#a78bfa"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<circle cx="32" cy="32" r="28" fill="url(#g)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 309 B |
+37
-21
@@ -2,8 +2,11 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
||||
<meta name="theme-color" content="#09090b">
|
||||
<title>Voice Assistant</title>
|
||||
<link rel="manifest" href="manifest.json">
|
||||
<link rel="icon" type="image/svg+xml" href="favicon.svg">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
@@ -13,38 +16,51 @@
|
||||
<p class="subtitle">Azure Speech + Gemma LLM, real-time conversation</p>
|
||||
</header>
|
||||
|
||||
<div class="orb-stage">
|
||||
<div class="orb" id="orb" data-state="idle">
|
||||
<div class="orb-core"></div>
|
||||
<div class="orb-ring"></div>
|
||||
</div>
|
||||
<div class="orb-labels">
|
||||
<span class="state-label" id="stateLabel">Idle</span>
|
||||
<span class="thinking-chip" id="thinkingChip" hidden>thinking…</span>
|
||||
<span class="barge-hint" id="bargeHint" hidden>tap or speak to interrupt</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<button id="startBtn" class="btn btn-primary">Start Conversation</button>
|
||||
<button id="stopBtn" class="btn btn-danger" disabled>Stop</button>
|
||||
</div>
|
||||
|
||||
<div class="voice-panel">
|
||||
<label for="voiceSelect">Voice:</label>
|
||||
<select id="voiceSelect">
|
||||
<option value="en-US-AvaNeural" selected>Ava (DragonHD)</option>
|
||||
<option value="en-US-JennyNeural">Jenny</option>
|
||||
<option value="en-US-GuyNeural">Guy</option>
|
||||
<option value="en-US-AndrewNeural">Andrew</option>
|
||||
<option value="en-US-AriaNeural">Aria</option>
|
||||
<option value="en-US-EmmaNeural">Emma</option>
|
||||
<option value="en-US-EricNeural">Eric</option>
|
||||
<option value="en-US-BrianNeural">Brian</option>
|
||||
<option value="en-US-AshleyNeural">Ashley</option>
|
||||
<option value="en-US-RichardNeural">Richard</option>
|
||||
<option value="en-US-TinaNeural">Tina</option>
|
||||
<option value="en-US-SteffanNeural">Steffan</option>
|
||||
</select>
|
||||
<button id="settingsBtn" class="btn btn-icon" aria-label="Voice settings" title="Voice settings">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 1 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 1 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 1 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 1 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="status" id="status">Disconnected</div>
|
||||
<div class="status" id="micLevel" style="font-size: 0.8em;"></div>
|
||||
<div class="mic-meter" id="micLevel" aria-hidden="true"><span class="mic-meter-fill" id="micMeterFill"></span></div>
|
||||
|
||||
<div class="transcript" id="transcript">
|
||||
<div class="transcript-header">Conversation</div>
|
||||
<div class="transcript-header">
|
||||
<span>Conversation</span>
|
||||
<button id="clearBtn" class="btn btn-ghost" title="Clear conversation">Clear</button>
|
||||
</div>
|
||||
<div id="messages"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings sheet (voice picker) -->
|
||||
<div class="sheet-backdrop" id="sheetBackdrop" hidden></div>
|
||||
<div class="settings-sheet" id="settingsSheet" role="dialog" aria-modal="true" aria-label="Voice settings">
|
||||
<div class="sheet-handle"></div>
|
||||
<div class="sheet-header">
|
||||
<h2>Voice</h2>
|
||||
<button id="closeSheetBtn" class="btn btn-ghost" aria-label="Close">
|
||||
<svg viewBox="0 0 24 24" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M18 6 6 18M6 6l12 12"></path></svg>
|
||||
</button>
|
||||
</div>
|
||||
<div class="voice-list" id="voiceList"></div>
|
||||
</div>
|
||||
|
||||
<script src="livekit-client.umd.js"></script>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "Voice Assistant",
|
||||
"short_name": "Voice",
|
||||
"description": "Real-time voice assistant — Azure Speech + Gemma LLM",
|
||||
"start_url": "/",
|
||||
"display": "standalone",
|
||||
"background_color": "#09090b",
|
||||
"theme_color": "#09090b",
|
||||
"icons": [
|
||||
{
|
||||
"src": "favicon.svg",
|
||||
"sizes": "any",
|
||||
"type": "image/svg+xml",
|
||||
"purpose": "any"
|
||||
}
|
||||
]
|
||||
}
|
||||
+407
-61
@@ -1,14 +1,48 @@
|
||||
:root {
|
||||
--bg: #09090b;
|
||||
--panel: rgba(255, 255, 255, 0.05);
|
||||
--panel-strong: rgba(255, 255, 255, 0.08);
|
||||
--border: rgba(255, 255, 255, 0.09);
|
||||
--text: #e4e4e7;
|
||||
--text-dim: #a1a1aa;
|
||||
--text-faint: #71717a;
|
||||
--accent-1: #60a5fa;
|
||||
--accent-2: #a78bfa;
|
||||
--user-bubble: rgba(96, 165, 250, 0.14);
|
||||
--agent-bubble: rgba(167, 139, 250, 0.14);
|
||||
--danger: #ef4444;
|
||||
color-scheme: dark;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg: #fafafa;
|
||||
--panel: rgba(0, 0, 0, 0.04);
|
||||
--panel-strong: rgba(0, 0, 0, 0.07);
|
||||
--border: rgba(0, 0, 0, 0.1);
|
||||
--text: #18181b;
|
||||
--text-dim: #52525b;
|
||||
--text-faint: #a1a1aa;
|
||||
--user-bubble: rgba(37, 99, 235, 0.1);
|
||||
--agent-bubble: rgba(124, 58, 237, 0.1);
|
||||
color-scheme: light;
|
||||
}
|
||||
}
|
||||
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { height: 100%; }
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
background: #0f1117;
|
||||
color: #e4e4e7;
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
padding: 2rem 1rem;
|
||||
padding: calc(2rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right))
|
||||
calc(2rem + env(safe-area-inset-bottom)) calc(1rem + env(safe-area-inset-left));
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -18,28 +52,143 @@ body {
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #60a5fa, #a78bfa);
|
||||
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #71717a;
|
||||
color: var(--text-faint);
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* ── Orb ─────────────────────────────────────────────────────────────────── */
|
||||
.orb-stage {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 1.75rem;
|
||||
}
|
||||
|
||||
.orb {
|
||||
--pulse-scale: 1;
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
.orb-core {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
border-radius: 50%;
|
||||
background: radial-gradient(circle at 35% 30%, var(--accent-1), var(--accent-2) 70%);
|
||||
box-shadow:
|
||||
0 0 60px 8px color-mix(in srgb, var(--accent-2) 45%, transparent),
|
||||
inset 0 0 30px rgba(255, 255, 255, 0.15);
|
||||
transform: scale(var(--pulse-scale));
|
||||
transition: box-shadow 0.3s ease;
|
||||
animation: breathe 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.orb-ring {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
border-radius: 50%;
|
||||
border: 1px solid color-mix(in srgb, var(--accent-2) 35%, transparent);
|
||||
opacity: var(--pulse-opacity, 0.35);
|
||||
transform: scale(var(--pulse-scale));
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
/* Per-state glow */
|
||||
.orb[data-state="idle"] .orb-core {
|
||||
filter: saturate(0.5) brightness(0.75);
|
||||
box-shadow: 0 0 30px 4px color-mix(in srgb, var(--accent-2) 25%, transparent);
|
||||
}
|
||||
|
||||
.orb[data-state="connecting"] .orb-core {
|
||||
animation-duration: 1.6s;
|
||||
filter: saturate(0.8) brightness(0.9);
|
||||
}
|
||||
|
||||
.orb[data-state="listening"] .orb-core {
|
||||
box-shadow: 0 0 70px 12px color-mix(in srgb, var(--accent-1) 55%, transparent),
|
||||
inset 0 0 30px rgba(255, 255, 255, 0.18);
|
||||
}
|
||||
|
||||
.orb[data-state="thinking"] .orb-core {
|
||||
animation-duration: 2s;
|
||||
filter: saturate(1.1) brightness(1.05);
|
||||
box-shadow: 0 0 75px 14px color-mix(in srgb, var(--accent-2) 60%, transparent),
|
||||
inset 0 0 30px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.orb[data-state="speaking"] .orb-core {
|
||||
animation: none;
|
||||
box-shadow: 0 0 90px 18px color-mix(in srgb, var(--accent-1) 65%, transparent),
|
||||
inset 0 0 34px rgba(255, 255, 255, 0.22);
|
||||
}
|
||||
|
||||
@keyframes breathe {
|
||||
0%, 100% { transform: scale(calc(var(--pulse-scale) * 1)); }
|
||||
50% { transform: scale(calc(var(--pulse-scale) * 1.05)); }
|
||||
}
|
||||
|
||||
.orb-labels {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
margin-top: 1rem;
|
||||
min-height: 3.6rem;
|
||||
}
|
||||
|
||||
.state-label {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.thinking-chip {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 999px;
|
||||
background: var(--panel-strong);
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text-dim);
|
||||
animation: chipPulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes chipPulse {
|
||||
0%, 100% { opacity: 0.55; }
|
||||
50% { opacity: 1; }
|
||||
}
|
||||
|
||||
.barge-hint {
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-faint);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
/* ── Controls ────────────────────────────────────────────────────────────── */
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
align-items: center;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -50,6 +199,7 @@ h1 {
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
@@ -68,7 +218,7 @@ h1 {
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #ef4444;
|
||||
background: var(--danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
@@ -76,98 +226,294 @@ h1 {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.voice-panel {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
justify-content: center;
|
||||
margin-bottom: 1.5rem;
|
||||
padding: 1rem;
|
||||
background: #1c1e26;
|
||||
border-radius: 8px;
|
||||
.btn-icon {
|
||||
display: grid;
|
||||
place-items: center;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
padding: 0;
|
||||
border-radius: 50%;
|
||||
background: var(--panel);
|
||||
color: var(--text-dim);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.voice-panel label {
|
||||
font-weight: 600;
|
||||
color: #a1a1aa;
|
||||
.btn-icon:hover {
|
||||
color: var(--text);
|
||||
background: var(--panel-strong);
|
||||
}
|
||||
|
||||
.voice-panel select {
|
||||
padding: 0.5rem 1rem;
|
||||
background: #27272a;
|
||||
color: #e4e4e7;
|
||||
border: 1px solid #3f3f46;
|
||||
.btn-ghost {
|
||||
background: transparent;
|
||||
color: var(--text-faint);
|
||||
padding: 0.4rem 0.75rem;
|
||||
font-size: 0.8rem;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.voice-panel select:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
.btn-ghost:hover {
|
||||
color: var(--text);
|
||||
background: var(--panel-strong);
|
||||
}
|
||||
|
||||
/* ── Status + mic meter ──────────────────────────────────────────────────── */
|
||||
.status {
|
||||
text-align: center;
|
||||
padding: 0.75rem;
|
||||
background: #1c1e26;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 8px;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-bottom: 0.6rem;
|
||||
font-size: 0.9rem;
|
||||
color: #a1a1aa;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.mic-meter {
|
||||
height: 4px;
|
||||
background: var(--panel-strong);
|
||||
border-radius: 2px;
|
||||
margin-bottom: 1.5rem;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.mic-meter-fill {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 0%;
|
||||
background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
|
||||
border-radius: 2px;
|
||||
transition: width 0.1s linear;
|
||||
}
|
||||
|
||||
/* ── Transcript ──────────────────────────────────────────────────────────── */
|
||||
.transcript {
|
||||
background: #1c1e26;
|
||||
border-radius: 8px;
|
||||
background: var(--panel);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
max-height: 50vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.transcript-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: 700;
|
||||
color: #a1a1aa;
|
||||
color: var(--text-dim);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.85rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.message {
|
||||
padding: 0.6rem 0.8rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 6px;
|
||||
.message-row {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 0.6rem;
|
||||
position: relative;
|
||||
animation: msgIn 120ms ease-out;
|
||||
}
|
||||
|
||||
@keyframes msgIn {
|
||||
from { opacity: 0; transform: translateY(6px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.message-row.user {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.avatar-dot {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, var(--accent-1), var(--accent-2));
|
||||
flex-shrink: 0;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.bubble {
|
||||
max-width: 78%;
|
||||
padding: 0.6rem 0.9rem;
|
||||
border-radius: 14px;
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message.user {
|
||||
background: #1e3a5f;
|
||||
border-left: 3px solid #3b82f6;
|
||||
.message-row.user .bubble {
|
||||
background: var(--user-bubble);
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
|
||||
.message.agent {
|
||||
background: #2d1f4e;
|
||||
border-left: 3px solid #a78bfa;
|
||||
.message-row.agent .bubble {
|
||||
background: var(--agent-bubble);
|
||||
border-bottom-left-radius: 4px;
|
||||
}
|
||||
|
||||
.message.system {
|
||||
background: #27272a;
|
||||
color: #71717a;
|
||||
font-style: italic;
|
||||
font-size: 0.85rem;
|
||||
.bubble.partial {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.role {
|
||||
/* Timestamps on hover (CSS only, from data-ts attribute) */
|
||||
.message-row::after {
|
||||
content: attr(data-ts);
|
||||
position: absolute;
|
||||
bottom: -1.1rem;
|
||||
font-size: 0.68rem;
|
||||
color: var(--text-faint);
|
||||
opacity: 0;
|
||||
transition: opacity 0.15s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.message-row:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.message-row.user::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.message-row.agent::after {
|
||||
left: 2rem;
|
||||
}
|
||||
|
||||
/* ── Agent audio visualizer (bars on latest agent bubble) ─────────────────── */
|
||||
.audio-viz {
|
||||
display: inline-flex;
|
||||
align-items: flex-end;
|
||||
gap: 2px;
|
||||
height: 14px;
|
||||
margin-left: 0.6rem;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.audio-viz i {
|
||||
width: 3px;
|
||||
height: 15%;
|
||||
border-radius: 2px;
|
||||
background: linear-gradient(180deg, var(--accent-2), var(--accent-1));
|
||||
opacity: 0.8;
|
||||
transition: height 0.08s linear;
|
||||
}
|
||||
|
||||
/* ── Settings sheet (voice picker) ───────────────────────────────────────── */
|
||||
.sheet-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
z-index: 90;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.sheet-backdrop:not([hidden]) {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.settings-sheet {
|
||||
position: fixed;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translate(-50%, 100%);
|
||||
width: 100%;
|
||||
max-width: 680px;
|
||||
max-height: 75vh;
|
||||
background: var(--panel-strong);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--border);
|
||||
border-bottom: none;
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 0.75rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
|
||||
z-index: 100;
|
||||
transition: transform 0.25s cubic-bezier(0.32, 0.72, 0, 1);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings-sheet.open {
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
.sheet-handle {
|
||||
width: 36px;
|
||||
height: 4px;
|
||||
border-radius: 2px;
|
||||
background: var(--border);
|
||||
margin: 0 auto 0.75rem;
|
||||
}
|
||||
|
||||
.sheet-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sheet-header h2 {
|
||||
font-size: 1.1rem;
|
||||
font-weight: 700;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.message.user .role { color: #60a5fa; }
|
||||
.message.agent .role { color: #a78bfa; }
|
||||
.voice-list {
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding-right: 0.25rem;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.transcript::-webkit-scrollbar { width: 6px; }
|
||||
.transcript::-webkit-scrollbar-track { background: transparent; }
|
||||
.transcript::-webkit-scrollbar-thumb { background: #3f3f46; border-radius: 3px; }
|
||||
.voice-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 10px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--border);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.voice-card:hover {
|
||||
background: var(--panel-strong);
|
||||
}
|
||||
|
||||
.voice-card.active {
|
||||
border-color: color-mix(in srgb, var(--accent-2) 60%, transparent);
|
||||
background: var(--agent-bubble);
|
||||
}
|
||||
|
||||
.voice-name {
|
||||
font-size: 0.95rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* ── Scrollbar ───────────────────────────────────────────────────────────── */
|
||||
.transcript::-webkit-scrollbar,
|
||||
.voice-list::-webkit-scrollbar { width: 6px; }
|
||||
.transcript::-webkit-scrollbar-track,
|
||||
.voice-list::-webkit-scrollbar-track { background: transparent; }
|
||||
.transcript::-webkit-scrollbar-thumb,
|
||||
.voice-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
||||
|
||||
/* ── Reduced motion ──────────────────────────────────────────────────────── */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.orb-core,
|
||||
.thinking-chip,
|
||||
.message-row,
|
||||
.settings-sheet,
|
||||
.sheet-backdrop,
|
||||
.audio-viz i,
|
||||
.mic-meter-fill {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
+1
-9
@@ -66,25 +66,17 @@ class Handler(BaseHTTPRequestHandler):
|
||||
|
||||
length = int(self.headers.get("Content-Length", 0))
|
||||
body = json.loads(self.rfile.read(length) or b"{}")
|
||||
room_name = body.get("room", "voice-room")
|
||||
room_name = "voice-room"
|
||||
identity = body.get("identity") or f"user-{uuid.uuid4().hex[:8]}"
|
||||
|
||||
token = make_token(room_name, identity)
|
||||
resp = json.dumps({"token": token}).encode()
|
||||
self.send_response(200)
|
||||
self.send_header("Content-Type", "application/json")
|
||||
self.send_header("Access-Control-Allow-Origin", "*")
|
||||
self.send_header("Content-Length", str(len(resp)))
|
||||
self.end_headers()
|
||||
self.wfile.write(resp)
|
||||
|
||||
def do_OPTIONS(self):
|
||||
self.send_response(204)
|
||||
self.send_header("Access-Control-Allow-Origin", "*")
|
||||
self.send_header("Access-Control-Allow-Methods", "POST, OPTIONS")
|
||||
self.send_header("Access-Control-Allow-Headers", "Content-Type")
|
||||
self.end_headers()
|
||||
|
||||
def log_message(self, format, *args):
|
||||
pass # silence request logging
|
||||
|
||||
|
||||
Reference in New Issue
Block a user