Hynes/Void-Homelab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(dross): voice Phase 2a — local whisper transcribe + mic (2.12.0)

Browse Source 
faster-whisper (small.en, GPU+CPU fallback) on CT 102 → POST
/api/voice/transcribe (multer→whisper client) → mic in the bubble
records (MediaRecorder), uploads, drops the transcript into the input
to review-and-send. Infra scripts in deploy/whisper/. Retention (P2b)
next. NOTE: mic needs a secure context (the https domain), not the LAN IP.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
root
2026-06-10 01:00:10 +10:00
parent fc1e93a58f
commit e29bacbda1
10 changed files with 196 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
public/components/dross_bubble.js
View File

@@ -22,8 +22,9 @@ export async function renderDrossBubble() {
const input = el('textarea', { rows: 1, placeholder: 'Ask Dross…' });
const sendBtn = el('button', { class: 'dross-send', title: 'Send' },
el('span', { html: '<svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 2 11 13M22 2l-7 20-4-9-9-4 20-7z"/></svg>' }));
const mic = el('button', { class: 'dross-mic', disabled: true, title: 'Voice arrives in Phase 2' },
el('span', { html: '<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="8" y1="22" x2="16" y2="22"/></svg>' }), 'Hold to talk');
const micLabel = el('span', {}, 'Tap to record');
const mic = el('button', { class: 'dross-mic', title: 'Record a voice note' },
el('span', { html: '<svg viewBox="0 0 24 24" width="22" height="22" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><line x1="12" y1="18" x2="12" y2="22"/><line x1="8" y1="22" x2="16" y2="22"/></svg>' }), micLabel);
const closeBtn = el('button', { class: 'dross-x', title: 'Close' }, '⤬');
const header = el('div', { class: 'dross-hd' }, drossAvatar(cfg.avatar, 30),
el('div', { class: 'dross-who' }, 'Dross', el('small', {}, 'always here, regrettably')), closeBtn);
@@ -62,6 +63,47 @@ export async function renderDrossBubble() {
drag(fab, fab, true); drag(header, panel, false);
// ---- voice: tap mic to record, tap again to stop → transcribe → review-and-send ----
let media = null, chunks = [], recording = false;
function setMic(label, rec) { micLabel.textContent = label; mic.classList.toggle('rec', !!rec); }
async function startRec() {
try {
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
chunks = [];
const opt = (window.MediaRecorder && MediaRecorder.isTypeSupported('audio/webm;codecs=opus'))
? { mimeType: 'audio/webm;codecs=opus' } : {};
media = new MediaRecorder(stream, opt);
media.ondataavailable = (e) => { if (e.data && e.data.size) chunks.push(e.data); };
media.onstop = async () => {
stream.getTracks().forEach(t => t.stop());
await sendClip(new Blob(chunks, { type: media.mimeType || 'audio/webm' }));
};
media.start();
recording = true; setMic('● Recording… tap to stop', true);
} catch {
setMic('Mic blocked', false); setTimeout(() => setMic('Tap to record', false), 1800);
}
}
function stopRec() {
if (media && recording) { recording = false; setMic('Transcribing…', false); media.stop(); }
}
async function sendClip(blob) {
try {
const fd = new FormData(); fd.append('audio', blob, 'clip.webm');
const res = await fetch('/api/voice/transcribe', {
method: 'POST', headers: { Authorization: 'Bearer ' + (localStorage.getItem('void_token') || '') }, body: fd
});
if (!res.ok) throw new Error('stt');
const { text } = await res.json();
setMic('Tap to record', false);
if (text) { input.value = input.value ? (input.value + ' ' + text) : text; input.focus(); }
// voiceMode 'handsfree'/'action' (Phase 2b+) would branch here.
} catch {
setMic('Transcribe failed', false); setTimeout(() => setMic('Tap to record', false), 2000);
}
}
mic.addEventListener('click', () => recording ? stopRec() : startRec());
window.addEventListener('dross-settings-changed', async () => {
try { cfg = { ...cfg, ...(await api.get('/api/dross/settings')) }; } catch { return; }
applyAccent(fab, cfg.accent); applyAccent(panel, cfg.accent);

2
public/style.css
View File

@@ -765,6 +765,8 @@ body.drawer-open #scrim { opacity: 1; pointer-events: auto; }
.dross-btnrow{display:flex;gap:10px}
.dross-mic{flex:1;height:50px;border-radius:12px;border:1px solid var(--dross-dim);background:var(--dross-soft);color:var(--dross-glow);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-ui);font-size:13px}
.dross-mic[disabled]{opacity:.5;cursor:not-allowed}
.dross-mic.rec{background:#3a1010;border-color:var(--accent);color:#fff;animation:dross-rec 1.2s infinite}
@keyframes dross-rec{0%,100%{box-shadow:0 0 0 0 rgba(255,79,46,.5)}50%{box-shadow:0 0 0 8px rgba(255,79,46,0)}}
.dross-send{width:64px;height:50px;border-radius:12px;border:1px solid var(--dross-dim);background:linear-gradient(180deg,var(--dross),var(--dross-dim));color:#fff;cursor:pointer;display:grid;place-items:center}
.dross-collapse{display:flex;align-items:center;justify-content:center;gap:8px;height:34px;cursor:pointer;color:var(--muted);
font-family:var(--font-ui);font-size:11px;letter-spacing:.12em;text-transform:uppercase;background:#0b0810;border-top:1px solid var(--border)}