jimmy/nas-tools
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: add voice mode (STT/TTS) to terminal page

Browse Source
This commit is contained in:
Gan, Jimmy
2026-02-26 15:35:43 +08:00
parent cbb4f8286b
commit 9c5dbcdb37
2 changed files with 176 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dashboard/frontend/src/routes/Terminal.svelte
+41 -2
View File
@@ -1,5 +1,6 @@
<script>
import { onDestroy } from "svelte";
import { VoiceSession } from "../lib/voice.js";
const hosts = [
{ id: "nas", label: "NAS" },
@@ -10,6 +11,7 @@
let tabs = $state([]);
let activeTab = $state(null);
let showMenu = $state(false);
let voiceTick = $state(0);
let tabCounter = 0;
const tabData = new Map();
@@ -24,6 +26,7 @@
function closeTab(id) {
const d = tabData.get(id);
if (d) {
d.voice?.destroy();
d.ro?.disconnect();
d.ws?.close();
d.term?.dispose();
@@ -87,11 +90,15 @@
const ro = new ResizeObserver(() => { fit.fit(); sendSize(); });
ro.observe(el);
tabData.set(tabId, { ws, term, ro, el });
const voice = new VoiceSession(() => { voiceTick++; });
voice.attach(term, ws);
tabData.set(tabId, { ws, term, ro, el, voice });
})();
}
onDestroy(() => tabData.forEach((d) => { d.ro?.disconnect(); d.ws?.close(); d.term?.dispose(); }));
function activeVoice() { return voiceTick >= 0 && tabData.get(activeTab)?.voice; }
onDestroy(() => tabData.forEach((d) => { d.voice?.destroy(); d.ro?.disconnect(); d.ws?.close(); d.term?.dispose(); }));
</script>
<div class="space-y-2">
<h1 class="text-2xl font-bold text-surface-900 tracking-tight">Terminal</h1>
@@ -135,6 +142,38 @@
</div>
{/if}
</div>
{#if activeTab && tabs.find(t => t.id === activeTab)?.connected}
{@const v = activeVoice()}
{#if v}
<div class="ml-auto flex items-center gap-1">
<button
class="px-2 py-1 rounded text-sm transition-colors {v.ttsEnabled ? (v.speaking ? 'text-indigo-400' : 'text-emerald-400') : 'text-surface-500 hover:text-surface-300'}"
title={v.ttsEnabled ? 'Disable TTS' : 'Enable TTS'}
onclick={() => { v.toggleTts(); voiceTick++; }}
>
{#if !v.ttsEnabled}
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><line x1="23" y1="9" x2="17" y2="15"/><line x1="17" y1="9" x2="23" y2="15"/></svg>
{:else if v.speaking}
<svg class="w-4 h-4 animate-pulse" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/><path d="M19.07 4.93a10 10 0 010 14.14"/></svg>
{:else}
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M11 5L6 9H2v6h4l5 4V5z"/><path d="M15.54 8.46a5 5 0 010 7.07"/></svg>
{/if}
</button>
<button
class="px-2 py-1 rounded text-sm transition-colors {v.listening ? 'text-rose-400 animate-pulse' : 'text-surface-500 hover:text-surface-300'}"
title={v.listening ? 'Stop mic' : 'Start mic'}
onclick={() => { v.toggleMic(); voiceTick++; }}
>
<svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 1a3 3 0 00-3 3v8a3 3 0 006 0V4a3 3 0 00-3-3z"/><path d="M19 10v2a7 7 0 01-14 0v-2"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="8" y1="23" x2="16" y2="23"/></svg>
</button>
<button
class="px-1.5 py-0.5 rounded text-xs font-medium transition-colors text-surface-400 hover:text-surface-200 hover:bg-surface-800"
title="Switch language"
onclick={() => { v.cycleLang(); voiceTick++; }}
>{v.langLabel}</button>
</div>
{/if}
{/if}
</div>
{#if !tabs.length}