Add missing Svelte components and stores, fix .gitignore lib/ pattern
The src/lib/ directory was being excluded by a Python .gitignore rule for lib/ (meant for Python's build output). Changed to /lib/ so it only matches root-level lib/ and doesn't block src/lib/. Adds 8 files that were created but missed in the initial commit: - 5 Svelte components (Header, StatusBar, Controls, TranscriptionDisplay, Settings) - 3 TypeScript stores (backend, config, transcriptions) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Developer
4
.gitignore
vendored
4
.gitignore
vendored
@@ -10,8 +10,8 @@ dist/
|
||||
downloads/
|
||||
eggs/
|
||||
.eggs/
|
||||
lib/
|
||||
lib64/
|
||||
/lib/
|
||||
/lib64/
|
||||
parts/
|
||||
sdist/
|
||||
var/
|
||||
|
||||
116
src/lib/components/Controls.svelte
Normal file
116
src/lib/components/Controls.svelte
Normal file
@@ -0,0 +1,116 @@
|
||||
<script lang="ts">
|
||||
import { backendStore } from "$lib/stores/backend";
|
||||
import { transcriptionStore } from "$lib/stores/transcriptions";
|
||||
|
||||
let isTranscribing = $derived(backendStore.appState === "transcribing");
|
||||
let isReady = $derived(
|
||||
backendStore.appState === "ready" || backendStore.appState === "transcribing"
|
||||
);
|
||||
let isLoading = $state(false);
|
||||
|
||||
async function toggleTranscription() {
|
||||
if (isLoading) return;
|
||||
isLoading = true;
|
||||
try {
|
||||
if (isTranscribing) {
|
||||
await backendStore.apiPost("/api/stop");
|
||||
} else {
|
||||
await backendStore.apiPost("/api/start");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to toggle transcription:", err);
|
||||
} finally {
|
||||
isLoading = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function clearTranscriptions() {
|
||||
try {
|
||||
await backendStore.apiPost("/api/clear");
|
||||
transcriptionStore.clearAll();
|
||||
} catch (err) {
|
||||
console.error("Failed to clear:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function saveTranscriptions() {
|
||||
try {
|
||||
// Get transcription text from backend or local store
|
||||
let text: string;
|
||||
try {
|
||||
const data = await backendStore.apiGet<{ text: string }>("/api/transcriptions");
|
||||
text = data.text || transcriptionStore.getPlainText();
|
||||
} catch {
|
||||
text = transcriptionStore.getPlainText();
|
||||
}
|
||||
|
||||
if (!text.trim()) {
|
||||
console.warn("No transcriptions to save");
|
||||
return;
|
||||
}
|
||||
|
||||
// Try Tauri dialog for native save, fall back to browser download
|
||||
try {
|
||||
const { save } = await import("@tauri-apps/plugin-dialog");
|
||||
const filePath = await save({
|
||||
defaultPath: "transcription.txt",
|
||||
filters: [
|
||||
{ name: "Text Files", extensions: ["txt"] },
|
||||
{ name: "All Files", extensions: ["*"] },
|
||||
],
|
||||
});
|
||||
if (filePath) {
|
||||
// Write via backend API
|
||||
await backendStore.apiPost("/api/save-file", { path: filePath, text });
|
||||
}
|
||||
} catch {
|
||||
// Fallback: browser-style download
|
||||
const blob = new Blob([text], { type: "text/plain" });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "transcription.txt";
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Failed to save:", err);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="controls">
|
||||
<button
|
||||
class={isTranscribing ? "danger" : "primary"}
|
||||
onclick={toggleTranscription}
|
||||
disabled={!isReady || isLoading}
|
||||
>
|
||||
{#if isLoading}
|
||||
...
|
||||
{:else if isTranscribing}
|
||||
Stop Transcription
|
||||
{:else}
|
||||
Start Transcription
|
||||
{/if}
|
||||
</button>
|
||||
|
||||
<button onclick={clearTranscriptions} disabled={!backendStore.connected}>
|
||||
Clear
|
||||
</button>
|
||||
|
||||
<button onclick={saveTranscriptions} disabled={!backendStore.connected}>
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 20px;
|
||||
background-color: var(--bg-secondary);
|
||||
border-top: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
82
src/lib/components/Header.svelte
Normal file
82
src/lib/components/Header.svelte
Normal file
@@ -0,0 +1,82 @@
|
||||
<script lang="ts">
|
||||
interface Props {
|
||||
onSettingsClick: () => void;
|
||||
}
|
||||
|
||||
let { onSettingsClick }: Props = $props();
|
||||
</script>
|
||||
|
||||
<header class="app-header">
|
||||
<h1 class="app-title">Local Transcription</h1>
|
||||
<button class="settings-btn" onclick={onSettingsClick} title="Settings">
|
||||
<svg
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
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 0 1
|
||||
0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0
|
||||
0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2
|
||||
2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65
|
||||
1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2
|
||||
0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68
|
||||
15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0
|
||||
0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0
|
||||
0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1
|
||||
2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0
|
||||
0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2
|
||||
2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0
|
||||
1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0
|
||||
2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65
|
||||
0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0
|
||||
1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</header>
|
||||
|
||||
<style>
|
||||
.app-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--text-primary);
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.settings-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
padding: 0;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 8px;
|
||||
background-color: transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease, background-color 0.15s ease;
|
||||
}
|
||||
|
||||
.settings-btn:hover {
|
||||
color: var(--text-primary);
|
||||
background-color: var(--bg-tertiary);
|
||||
}
|
||||
</style>
|
||||
780
src/lib/components/Settings.svelte
Normal file
780
src/lib/components/Settings.svelte
Normal file
@@ -0,0 +1,780 @@
|
||||
<script lang="ts">
|
||||
import { configStore } from "$lib/stores/config";
|
||||
import { backendStore } from "$lib/stores/backend";
|
||||
|
||||
interface Props {
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
let { onClose }: Props = $props();
|
||||
|
||||
// Local copies of config values for editing
|
||||
let userName = $state("");
|
||||
let audioDevice = $state("default");
|
||||
let model = $state("base.en");
|
||||
let language = $state("en");
|
||||
let computeDevice = $state("auto");
|
||||
let computeType = $state("default");
|
||||
let enableRealtime = $state(false);
|
||||
let realtimeModel = $state("tiny.en");
|
||||
let realtimeProcessingPause = $state(0.1);
|
||||
let sileroSensitivity = $state(0.4);
|
||||
let webrtcSensitivity = $state(3);
|
||||
let postSpeechSilence = $state(0.3);
|
||||
let minRecordingLength = $state(0.5);
|
||||
let minGapBetween = $state(0);
|
||||
let continuousMode = $state(false);
|
||||
let showTimestamps = $state(true);
|
||||
let fadeSeconds = $state(10);
|
||||
let maxLines = $state(100);
|
||||
let fontSize = $state(12);
|
||||
let userColor = $state("#4CAF50");
|
||||
let textColor = $state("#FFFFFF");
|
||||
let backgroundColor = $state("#000000");
|
||||
let syncEnabled = $state(false);
|
||||
let syncUrl = $state("");
|
||||
let syncRoom = $state("default");
|
||||
let syncPassphrase = $state("");
|
||||
let remoteMode = $state("local");
|
||||
let remoteServerUrl = $state("");
|
||||
let managedEmail = $state("");
|
||||
let managedPassword = $state("");
|
||||
let autoCheckUpdates = $state(true);
|
||||
|
||||
// Fetched device lists
|
||||
let audioDevices = $state<{ id: string; name: string }[]>([]);
|
||||
let computeDevices = $state<{ id: string; name: string }[]>([]);
|
||||
|
||||
// Model options
|
||||
const modelOptions = [
|
||||
"tiny",
|
||||
"tiny.en",
|
||||
"base",
|
||||
"base.en",
|
||||
"small",
|
||||
"small.en",
|
||||
"medium",
|
||||
"medium.en",
|
||||
"large-v1",
|
||||
"large-v2",
|
||||
"large-v3",
|
||||
];
|
||||
|
||||
const computeTypeOptions = [
|
||||
{ value: "default", label: "Default" },
|
||||
{ value: "int8", label: "int8 (Fastest)" },
|
||||
{ value: "float16", label: "float16 (GPU)" },
|
||||
{ value: "float32", label: "float32 (Best Quality)" },
|
||||
];
|
||||
|
||||
const webrtcOptions = [
|
||||
{ value: 0, label: "0 (Most Sensitive)" },
|
||||
{ value: 1, label: "1" },
|
||||
{ value: 2, label: "2" },
|
||||
{ value: 3, label: "3 (Least Sensitive)" },
|
||||
];
|
||||
|
||||
// Load config values on mount
|
||||
$effect(() => {
|
||||
const cfg = configStore.config;
|
||||
userName = cfg.user.name;
|
||||
audioDevice = cfg.audio.input_device;
|
||||
model = cfg.transcription.model;
|
||||
language = cfg.transcription.language;
|
||||
computeDevice = cfg.transcription.device;
|
||||
computeType = cfg.transcription.compute_type;
|
||||
enableRealtime = cfg.transcription.enable_realtime_transcription;
|
||||
realtimeModel = cfg.transcription.realtime_model;
|
||||
realtimeProcessingPause = cfg.transcription.realtime_processing_pause;
|
||||
sileroSensitivity = cfg.transcription.silero_sensitivity;
|
||||
webrtcSensitivity = cfg.transcription.webrtc_sensitivity;
|
||||
postSpeechSilence = cfg.transcription.post_speech_silence_duration;
|
||||
minRecordingLength = cfg.transcription.min_length_of_recording;
|
||||
minGapBetween = cfg.transcription.min_gap_between_recordings;
|
||||
continuousMode = cfg.transcription.continuous_mode;
|
||||
showTimestamps = cfg.display.show_timestamps;
|
||||
fadeSeconds = cfg.display.fade_after_seconds;
|
||||
maxLines = cfg.display.max_lines;
|
||||
fontSize = cfg.display.font_size;
|
||||
userColor = cfg.display.user_color;
|
||||
textColor = cfg.display.text_color;
|
||||
// Strip alpha from background color for the color picker (only supports 6-char hex)
|
||||
const bgHex = cfg.display.background_color.replace("#", "");
|
||||
backgroundColor = "#" + bgHex.substring(0, 6);
|
||||
syncEnabled = cfg.server_sync.enabled;
|
||||
syncUrl = cfg.server_sync.url;
|
||||
syncRoom = cfg.server_sync.room;
|
||||
syncPassphrase = cfg.server_sync.passphrase;
|
||||
remoteMode = cfg.remote.mode;
|
||||
remoteServerUrl = cfg.remote.server_url;
|
||||
autoCheckUpdates = cfg.updates.auto_check;
|
||||
});
|
||||
|
||||
// Fetch audio devices and compute devices on mount
|
||||
$effect(() => {
|
||||
fetchAudioDevices();
|
||||
fetchComputeDevices();
|
||||
});
|
||||
|
||||
async function fetchAudioDevices() {
|
||||
try {
|
||||
const data = await backendStore.apiGet<{
|
||||
devices: { id: string; name: string }[];
|
||||
}>("/api/audio-devices");
|
||||
audioDevices = data.devices ?? [];
|
||||
} catch {
|
||||
audioDevices = [];
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchComputeDevices() {
|
||||
try {
|
||||
const data = await backendStore.apiGet<{
|
||||
devices: { id: string; name: string }[];
|
||||
}>("/api/compute-devices");
|
||||
computeDevices = data.devices ?? [];
|
||||
} catch {
|
||||
computeDevices = [
|
||||
{ id: "auto", name: "Auto" },
|
||||
{ id: "cpu", name: "CPU" },
|
||||
{ id: "cuda", name: "CUDA (GPU)" },
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
const updates = {
|
||||
user: {
|
||||
name: userName,
|
||||
},
|
||||
audio: {
|
||||
input_device: audioDevice,
|
||||
},
|
||||
transcription: {
|
||||
model,
|
||||
device: computeDevice,
|
||||
language,
|
||||
compute_type: computeType,
|
||||
enable_realtime_transcription: enableRealtime,
|
||||
realtime_model: realtimeModel,
|
||||
realtime_processing_pause: realtimeProcessingPause,
|
||||
silero_sensitivity: sileroSensitivity,
|
||||
webrtc_sensitivity: webrtcSensitivity,
|
||||
post_speech_silence_duration: postSpeechSilence,
|
||||
min_length_of_recording: minRecordingLength,
|
||||
min_gap_between_recordings: minGapBetween,
|
||||
continuous_mode: continuousMode,
|
||||
},
|
||||
display: {
|
||||
show_timestamps: showTimestamps,
|
||||
fade_after_seconds: fadeSeconds,
|
||||
max_lines: maxLines,
|
||||
font_size: fontSize,
|
||||
user_color: userColor,
|
||||
text_color: textColor,
|
||||
background_color: backgroundColor,
|
||||
},
|
||||
server_sync: {
|
||||
enabled: syncEnabled,
|
||||
url: syncUrl,
|
||||
room: syncRoom,
|
||||
passphrase: syncPassphrase,
|
||||
},
|
||||
remote: {
|
||||
mode: remoteMode,
|
||||
server_url: remoteServerUrl,
|
||||
},
|
||||
updates: {
|
||||
auto_check: autoCheckUpdates,
|
||||
},
|
||||
};
|
||||
|
||||
try {
|
||||
await configStore.saveConfig(updates);
|
||||
onClose();
|
||||
} catch (err) {
|
||||
console.error("Failed to save settings:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function handleCancel() {
|
||||
onClose();
|
||||
}
|
||||
|
||||
async function handleCheckUpdates() {
|
||||
try {
|
||||
await backendStore.apiPost("/api/check-updates");
|
||||
} catch (err) {
|
||||
console.error("Failed to check for updates:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleManagedLogin() {
|
||||
try {
|
||||
await backendStore.apiPost("/api/remote/login", {
|
||||
email: managedEmail,
|
||||
password: managedPassword,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Login failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleManagedRegister() {
|
||||
try {
|
||||
await backendStore.apiPost("/api/remote/register", {
|
||||
email: managedEmail,
|
||||
password: managedPassword,
|
||||
});
|
||||
} catch (err) {
|
||||
console.error("Register failed:", err);
|
||||
}
|
||||
}
|
||||
|
||||
function handleOverlayClick(e: MouseEvent) {
|
||||
if ((e.target as HTMLElement).classList.contains("settings-overlay")) {
|
||||
handleCancel();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeydown(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") {
|
||||
handleCancel();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:window onkeydown={handleKeydown} />
|
||||
|
||||
<!-- svelte-ignore a11y_click_events_have_key_events a11y_no_static_element_interactions -->
|
||||
<div class="settings-overlay" role="presentation" onclick={handleOverlayClick}>
|
||||
<div class="settings-panel">
|
||||
<div class="settings-header">
|
||||
<h2>Settings</h2>
|
||||
<button class="close-btn" aria-label="Close settings" onclick={handleCancel}>
|
||||
<svg
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="settings-content">
|
||||
<!-- User Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>User Settings</h3>
|
||||
<div class="field">
|
||||
<label for="user-name">Display Name</label>
|
||||
<input id="user-name" type="text" bind:value={userName} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Audio Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>Audio Settings</h3>
|
||||
<div class="field">
|
||||
<label for="audio-device">Audio Device</label>
|
||||
<select id="audio-device" bind:value={audioDevice}>
|
||||
<option value="default">Default</option>
|
||||
{#each audioDevices as device}
|
||||
<option value={device.id}>{device.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Transcription Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>Transcription Settings</h3>
|
||||
<div class="field">
|
||||
<label for="model">Model</label>
|
||||
<select id="model" bind:value={model}>
|
||||
{#each modelOptions as opt}
|
||||
<option value={opt}>{opt}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="language">Language</label>
|
||||
<input id="language" type="text" bind:value={language} placeholder="en" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="compute-device">Compute Device</label>
|
||||
<select id="compute-device" bind:value={computeDevice}>
|
||||
{#each computeDevices as dev}
|
||||
<option value={dev.id}>{dev.name}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="compute-type">Compute Type</label>
|
||||
<select id="compute-type" bind:value={computeType}>
|
||||
{#each computeTypeOptions as opt}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Realtime Preview -->
|
||||
<section class="settings-section">
|
||||
<h3>Realtime Preview</h3>
|
||||
<div class="field-row">
|
||||
<label for="enable-realtime">Enable Realtime Preview</label>
|
||||
<input
|
||||
id="enable-realtime"
|
||||
type="checkbox"
|
||||
bind:checked={enableRealtime}
|
||||
/>
|
||||
</div>
|
||||
{#if enableRealtime}
|
||||
<div class="field">
|
||||
<label for="realtime-model">Realtime Model</label>
|
||||
<select id="realtime-model" bind:value={realtimeModel}>
|
||||
{#each modelOptions as opt}
|
||||
<option value={opt}>{opt}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="realtime-pause"
|
||||
>Processing Pause: {realtimeProcessingPause.toFixed(2)}s</label
|
||||
>
|
||||
<input
|
||||
id="realtime-pause"
|
||||
type="range"
|
||||
min="0.01"
|
||||
max="1.0"
|
||||
step="0.01"
|
||||
bind:value={realtimeProcessingPause}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- VAD Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>VAD Settings</h3>
|
||||
<div class="field">
|
||||
<label for="silero-sensitivity"
|
||||
>Silero Sensitivity: {sileroSensitivity.toFixed(2)}</label
|
||||
>
|
||||
<input
|
||||
id="silero-sensitivity"
|
||||
type="range"
|
||||
min="0.0"
|
||||
max="1.0"
|
||||
step="0.05"
|
||||
bind:value={sileroSensitivity}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="webrtc-sensitivity">WebRTC Sensitivity</label>
|
||||
<select id="webrtc-sensitivity" bind:value={webrtcSensitivity}>
|
||||
{#each webrtcOptions as opt}
|
||||
<option value={opt.value}>{opt.label}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Timing -->
|
||||
<section class="settings-section">
|
||||
<h3>Timing</h3>
|
||||
<div class="field">
|
||||
<label for="post-speech-silence"
|
||||
>Post-Speech Silence: {postSpeechSilence.toFixed(2)}s</label
|
||||
>
|
||||
<input
|
||||
id="post-speech-silence"
|
||||
type="range"
|
||||
min="0.1"
|
||||
max="3.0"
|
||||
step="0.1"
|
||||
bind:value={postSpeechSilence}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="min-recording"
|
||||
>Min Recording Length: {minRecordingLength.toFixed(2)}s</label
|
||||
>
|
||||
<input
|
||||
id="min-recording"
|
||||
type="range"
|
||||
min="0.1"
|
||||
max="5.0"
|
||||
step="0.1"
|
||||
bind:value={minRecordingLength}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="min-gap"
|
||||
>Min Gap Between Recordings: {minGapBetween.toFixed(2)}s</label
|
||||
>
|
||||
<input
|
||||
id="min-gap"
|
||||
type="range"
|
||||
min="0"
|
||||
max="3.0"
|
||||
step="0.1"
|
||||
bind:value={minGapBetween}
|
||||
/>
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label for="continuous-mode">Continuous Mode</label>
|
||||
<input
|
||||
id="continuous-mode"
|
||||
type="checkbox"
|
||||
bind:checked={continuousMode}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Display Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>Display Settings</h3>
|
||||
<div class="field-row">
|
||||
<label for="show-timestamps">Show Timestamps</label>
|
||||
<input
|
||||
id="show-timestamps"
|
||||
type="checkbox"
|
||||
bind:checked={showTimestamps}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="fade-seconds"
|
||||
>Fade After Seconds: {fadeSeconds} (0 = never)</label
|
||||
>
|
||||
<input
|
||||
id="fade-seconds"
|
||||
type="range"
|
||||
min="0"
|
||||
max="60"
|
||||
step="1"
|
||||
bind:value={fadeSeconds}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="max-lines">Max Lines: {maxLines}</label>
|
||||
<input
|
||||
id="max-lines"
|
||||
type="range"
|
||||
min="10"
|
||||
max="500"
|
||||
step="10"
|
||||
bind:value={maxLines}
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="font-size">Font Size: {fontSize}px</label>
|
||||
<input
|
||||
id="font-size"
|
||||
type="range"
|
||||
min="8"
|
||||
max="32"
|
||||
step="1"
|
||||
bind:value={fontSize}
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Color Settings -->
|
||||
<section class="settings-section">
|
||||
<h3>Color Settings</h3>
|
||||
<div class="field-row">
|
||||
<label for="user-color">User Color</label>
|
||||
<input id="user-color" type="color" bind:value={userColor} />
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label for="text-color">Text Color</label>
|
||||
<input id="text-color" type="color" bind:value={textColor} />
|
||||
</div>
|
||||
<div class="field-row">
|
||||
<label for="bg-color">Background Color</label>
|
||||
<input id="bg-color" type="color" bind:value={backgroundColor} />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Server Sync -->
|
||||
<section class="settings-section">
|
||||
<h3>Server Sync</h3>
|
||||
<div class="field-row">
|
||||
<label for="sync-enabled">Enable Server Sync</label>
|
||||
<input
|
||||
id="sync-enabled"
|
||||
type="checkbox"
|
||||
bind:checked={syncEnabled}
|
||||
/>
|
||||
</div>
|
||||
{#if syncEnabled}
|
||||
<div class="field">
|
||||
<label for="sync-url">Server URL</label>
|
||||
<input
|
||||
id="sync-url"
|
||||
type="url"
|
||||
bind:value={syncUrl}
|
||||
placeholder="http://localhost:3000/api/send"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="sync-room">Room</label>
|
||||
<input id="sync-room" type="text" bind:value={syncRoom} />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="sync-passphrase">Passphrase</label>
|
||||
<input
|
||||
id="sync-passphrase"
|
||||
type="password"
|
||||
bind:value={syncPassphrase}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Remote Transcription -->
|
||||
<section class="settings-section">
|
||||
<h3>Remote Transcription</h3>
|
||||
<div class="radio-group">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="local"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
Local
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="managed"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
Managed
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="remote-mode"
|
||||
value="byok"
|
||||
bind:group={remoteMode}
|
||||
/>
|
||||
BYOK (Bring Your Own Key)
|
||||
</label>
|
||||
</div>
|
||||
{#if remoteMode !== "local"}
|
||||
<div class="field">
|
||||
<label for="remote-url">Server URL</label>
|
||||
<input
|
||||
id="remote-url"
|
||||
type="url"
|
||||
bind:value={remoteServerUrl}
|
||||
placeholder="wss://your-proxy.com"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{#if remoteMode === "managed"}
|
||||
<div class="managed-auth">
|
||||
<div class="field">
|
||||
<label for="managed-email">Email</label>
|
||||
<input
|
||||
id="managed-email"
|
||||
type="email"
|
||||
bind:value={managedEmail}
|
||||
placeholder="email@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="managed-password">Password</label>
|
||||
<input
|
||||
id="managed-password"
|
||||
type="password"
|
||||
bind:value={managedPassword}
|
||||
/>
|
||||
</div>
|
||||
<div class="auth-buttons">
|
||||
<button onclick={handleManagedLogin}>Login</button>
|
||||
<button onclick={handleManagedRegister}>Register</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<!-- Updates -->
|
||||
<section class="settings-section">
|
||||
<h3>Updates</h3>
|
||||
<div class="field-row">
|
||||
<label for="auto-check-updates">Auto-Check for Updates</label>
|
||||
<input
|
||||
id="auto-check-updates"
|
||||
type="checkbox"
|
||||
bind:checked={autoCheckUpdates}
|
||||
/>
|
||||
</div>
|
||||
<button onclick={handleCheckUpdates}>Check Now</button>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<div class="settings-footer">
|
||||
<button onclick={handleCancel}>Cancel</button>
|
||||
<button class="primary" onclick={handleSave}>Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.settings-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.settings-panel {
|
||||
background-color: var(--bg-primary);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 12px;
|
||||
width: 560px;
|
||||
max-width: 95vw;
|
||||
max-height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.settings-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.settings-header h2 {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
background-color: transparent;
|
||||
color: var(--text-secondary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.settings-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.settings-section {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.settings-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.settings-section h3 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--accent-blue);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 6px;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.field label {
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.field-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.field-row label {
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.radio-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: var(--text-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.managed-auth {
|
||||
margin-top: 8px;
|
||||
padding: 12px;
|
||||
background-color: var(--bg-secondary);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.auth-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.settings-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid var(--border-color);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
</style>
|
||||
106
src/lib/components/StatusBar.svelte
Normal file
106
src/lib/components/StatusBar.svelte
Normal file
@@ -0,0 +1,106 @@
|
||||
<script lang="ts">
|
||||
import { backendStore } from "$lib/stores/backend";
|
||||
import { configStore } from "$lib/stores/config";
|
||||
|
||||
let statusColor = $derived.by(() => {
|
||||
switch (backendStore.appState) {
|
||||
case "initializing":
|
||||
return "#ff9800";
|
||||
case "ready":
|
||||
return "#4caf50";
|
||||
case "transcribing":
|
||||
return "#f44336";
|
||||
case "error":
|
||||
return "#f44336";
|
||||
default:
|
||||
return "#888";
|
||||
}
|
||||
});
|
||||
|
||||
let isPulsing = $derived(backendStore.appState === "transcribing");
|
||||
let userName = $derived(configStore.config.user.name);
|
||||
</script>
|
||||
|
||||
<div class="status-bar">
|
||||
<div class="status-left">
|
||||
<span
|
||||
class="status-indicator"
|
||||
class:pulsing={isPulsing}
|
||||
style="background-color: {statusColor}"
|
||||
></span>
|
||||
<span class="state-message">{backendStore.stateMessage}</span>
|
||||
</div>
|
||||
<div class="status-right">
|
||||
{#if backendStore.deviceInfo}
|
||||
<span class="device-info">{backendStore.deviceInfo}</span>
|
||||
<span class="separator">|</span>
|
||||
{/if}
|
||||
<span class="user-name">{userName}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.status-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 6px 20px;
|
||||
background-color: var(--bg-secondary);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
font-size: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.status-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.status-indicator {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.status-indicator.pulsing {
|
||||
animation: pulse 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.7;
|
||||
box-shadow: 0 0 0 6px rgba(244, 67, 54, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.state-message {
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
.device-info {
|
||||
color: var(--text-secondary);
|
||||
}
|
||||
|
||||
.separator {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.user-name {
|
||||
color: var(--accent-green);
|
||||
font-weight: 500;
|
||||
}
|
||||
</style>
|
||||
110
src/lib/components/TranscriptionDisplay.svelte
Normal file
110
src/lib/components/TranscriptionDisplay.svelte
Normal file
@@ -0,0 +1,110 @@
|
||||
<script lang="ts">
|
||||
import { transcriptionStore } from "$lib/stores/transcriptions";
|
||||
import { configStore } from "$lib/stores/config";
|
||||
|
||||
let container: HTMLDivElement | undefined = $state();
|
||||
let showTimestamps = $derived(configStore.config.display.show_timestamps);
|
||||
let items = $derived(transcriptionStore.items);
|
||||
|
||||
$effect(() => {
|
||||
// Trigger on items length change to auto-scroll
|
||||
const _len = items.length;
|
||||
if (container) {
|
||||
requestAnimationFrame(() => {
|
||||
if (container) {
|
||||
container.scrollTop = container.scrollHeight;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="transcription-display" bind:this={container}>
|
||||
{#each items as item (item.id)}
|
||||
<div class="transcription-item" class:preview={item.isPreview}>
|
||||
{#if showTimestamps && item.timestamp}
|
||||
<span class="timestamp">[{item.timestamp}]</span>
|
||||
{/if}
|
||||
{#if item.userName}
|
||||
<span class="user-name">{item.userName}:</span>
|
||||
{/if}
|
||||
{#if item.isPreview}
|
||||
<span class="preview-indicator">[...]</span>
|
||||
{/if}
|
||||
<span class="text">{item.text}</span>
|
||||
</div>
|
||||
{:else}
|
||||
<div class="empty-state">
|
||||
Transcriptions will appear here...
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.transcription-display {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 12px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.transcription-item {
|
||||
padding: 6px 10px;
|
||||
border-radius: 4px;
|
||||
background-color: rgba(255, 255, 255, 0.03);
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.transcription-item.preview {
|
||||
font-style: italic;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
margin-right: 8px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
color: #4caf50;
|
||||
font-weight: 700;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.preview-indicator {
|
||||
color: #888;
|
||||
font-size: 0.85em;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--text-muted);
|
||||
font-size: 15px;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
266
src/lib/stores/backend.ts
Normal file
266
src/lib/stores/backend.ts
Normal file
@@ -0,0 +1,266 @@
|
||||
/**
|
||||
* Backend store - manages WebSocket connection and REST API communication
|
||||
* with the Python backend server running on localhost.
|
||||
*
|
||||
* The backend port defaults to 8081 but can be updated at runtime via
|
||||
* `setPort()`. The WebSocket connects to /ws/control for real-time push
|
||||
* of transcriptions, previews, and state changes.
|
||||
*/
|
||||
|
||||
export type ConnectionState = "connecting" | "connected" | "disconnected" | "error";
|
||||
export type AppState = "initializing" | "ready" | "transcribing" | "reloading" | "error";
|
||||
|
||||
interface BackendState {
|
||||
port: number;
|
||||
connectionState: ConnectionState;
|
||||
appState: AppState;
|
||||
stateMessage: string;
|
||||
deviceInfo: string;
|
||||
wsConnection: WebSocket | null;
|
||||
version: string;
|
||||
lastError: string;
|
||||
}
|
||||
|
||||
let state = $state<BackendState>({
|
||||
port: 8081,
|
||||
connectionState: "disconnected",
|
||||
appState: "initializing",
|
||||
stateMessage: "Connecting to backend...",
|
||||
deviceInfo: "",
|
||||
wsConnection: null,
|
||||
version: "1.4.0",
|
||||
lastError: "",
|
||||
});
|
||||
|
||||
let reconnectTimer: ReturnType<typeof setTimeout> | null = null;
|
||||
let reconnectAttempts = 0;
|
||||
const MAX_RECONNECT_DELAY_MS = 30_000;
|
||||
const BASE_RECONNECT_DELAY_MS = 1_000;
|
||||
|
||||
// ── URL helpers ──────────────────────────────────────────────────────
|
||||
|
||||
function apiUrl(path: string): string {
|
||||
const normalised = path.startsWith("/") ? path : `/${path}`;
|
||||
return `http://localhost:${state.port}${normalised}`;
|
||||
}
|
||||
|
||||
async function apiFetch(path: string, options?: RequestInit): Promise<Response> {
|
||||
const url = apiUrl(path);
|
||||
const method = options?.method?.toUpperCase() ?? "GET";
|
||||
const headers = new Headers(options?.headers);
|
||||
if (method !== "GET" && !headers.has("Content-Type")) {
|
||||
headers.set("Content-Type", "application/json");
|
||||
}
|
||||
return fetch(url, { ...options, headers });
|
||||
}
|
||||
|
||||
// ── WebSocket management ─────────────────────────────────────────────
|
||||
|
||||
function connectWebSocket() {
|
||||
// Tear down any existing connection
|
||||
disconnect();
|
||||
|
||||
state.connectionState = "connecting";
|
||||
reconnectAttempts = 0;
|
||||
|
||||
_openSocket();
|
||||
}
|
||||
|
||||
function _openSocket() {
|
||||
const wsUrl = `ws://localhost:${state.port}/ws/control`;
|
||||
|
||||
try {
|
||||
const ws = new WebSocket(wsUrl);
|
||||
|
||||
ws.onopen = () => {
|
||||
state.connectionState = "connected";
|
||||
state.lastError = "";
|
||||
reconnectAttempts = 0;
|
||||
if (reconnectTimer) {
|
||||
clearTimeout(reconnectTimer);
|
||||
reconnectTimer = null;
|
||||
}
|
||||
};
|
||||
|
||||
ws.onmessage = (event) => {
|
||||
try {
|
||||
const data = JSON.parse(event.data);
|
||||
handleWebSocketMessage(data);
|
||||
} catch {
|
||||
// ignore parse errors
|
||||
}
|
||||
};
|
||||
|
||||
ws.onclose = () => {
|
||||
state.wsConnection = null;
|
||||
if (state.connectionState !== "disconnected") {
|
||||
state.connectionState = "error";
|
||||
state.stateMessage = "Disconnected from backend";
|
||||
_scheduleReconnect();
|
||||
}
|
||||
};
|
||||
|
||||
ws.onerror = () => {
|
||||
state.lastError = "WebSocket error";
|
||||
// onclose fires after this, which handles reconnect
|
||||
};
|
||||
|
||||
state.wsConnection = ws;
|
||||
} catch {
|
||||
state.connectionState = "error";
|
||||
state.stateMessage = "Failed to connect";
|
||||
_scheduleReconnect();
|
||||
}
|
||||
}
|
||||
|
||||
function _scheduleReconnect() {
|
||||
if (reconnectTimer) return;
|
||||
|
||||
const delay = Math.min(
|
||||
BASE_RECONNECT_DELAY_MS * Math.pow(2, reconnectAttempts),
|
||||
MAX_RECONNECT_DELAY_MS,
|
||||
);
|
||||
reconnectAttempts++;
|
||||
|
||||
reconnectTimer = setTimeout(() => {
|
||||
reconnectTimer = null;
|
||||
if (state.connectionState !== "disconnected") {
|
||||
state.connectionState = "connecting";
|
||||
_openSocket();
|
||||
}
|
||||
}, delay);
|
||||
}
|
||||
|
||||
function disconnect() {
|
||||
if (reconnectTimer) {
|
||||
clearTimeout(reconnectTimer);
|
||||
reconnectTimer = null;
|
||||
}
|
||||
state.connectionState = "disconnected";
|
||||
if (state.wsConnection) {
|
||||
const ws = state.wsConnection;
|
||||
ws.onclose = null;
|
||||
ws.onerror = null;
|
||||
ws.close();
|
||||
state.wsConnection = null;
|
||||
}
|
||||
}
|
||||
|
||||
// ── WebSocket message handling ───────────────────────────────────────
|
||||
|
||||
function handleWebSocketMessage(data: Record<string, unknown>) {
|
||||
// Handle state changes locally
|
||||
if (data.type === "state_changed") {
|
||||
if (data.state) {
|
||||
state.appState = data.state as AppState;
|
||||
}
|
||||
if (data.message) {
|
||||
state.stateMessage = data.message as string;
|
||||
}
|
||||
}
|
||||
|
||||
if (data.type === "error") {
|
||||
state.lastError = (data.message as string) ?? "Unknown error";
|
||||
}
|
||||
|
||||
// Dispatch to window for other stores (transcriptions, etc.)
|
||||
if (data.type === "transcription") {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("backend:transcription", { detail: data })
|
||||
);
|
||||
} else if (data.type === "preview") {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("backend:preview", { detail: data })
|
||||
);
|
||||
} else if (data.type === "credits_low") {
|
||||
window.dispatchEvent(
|
||||
new CustomEvent("backend:credits_low", { detail: data })
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ── Port management ──────────────────────────────────────────────────
|
||||
|
||||
function setPort(newPort: number) {
|
||||
if (newPort === state.port) return;
|
||||
state.port = newPort;
|
||||
// Reconnect with new port if we had a connection
|
||||
if (state.connectionState !== "disconnected") {
|
||||
connectWebSocket();
|
||||
}
|
||||
}
|
||||
|
||||
// ── Typed REST helpers ───────────────────────────────────────────────
|
||||
|
||||
async function apiGet<T = unknown>(path: string): Promise<T> {
|
||||
const resp = await apiFetch(path);
|
||||
if (!resp.ok) throw new Error(`GET ${path} failed: ${resp.status}`);
|
||||
return resp.json();
|
||||
}
|
||||
|
||||
async function apiPost<T = unknown>(
|
||||
path: string,
|
||||
body?: unknown
|
||||
): Promise<T> {
|
||||
const resp = await apiFetch(path, {
|
||||
method: "POST",
|
||||
body: body !== undefined ? JSON.stringify(body) : undefined,
|
||||
});
|
||||
if (!resp.ok) throw new Error(`POST ${path} failed: ${resp.status}`);
|
||||
return resp.json();
|
||||
}
|
||||
|
||||
async function apiPut<T = unknown>(
|
||||
path: string,
|
||||
body?: unknown
|
||||
): Promise<T> {
|
||||
const resp = await apiFetch(path, {
|
||||
method: "PUT",
|
||||
body: body !== undefined ? JSON.stringify(body) : undefined,
|
||||
});
|
||||
if (!resp.ok) throw new Error(`PUT ${path} failed: ${resp.status}`);
|
||||
return resp.json();
|
||||
}
|
||||
|
||||
// ── Public API ───────────────────────────────────────────────────────
|
||||
|
||||
export const backendStore = {
|
||||
get port() {
|
||||
return state.port;
|
||||
},
|
||||
get connectionState() {
|
||||
return state.connectionState;
|
||||
},
|
||||
get connected() {
|
||||
return state.connectionState === "connected";
|
||||
},
|
||||
get appState() {
|
||||
return state.appState;
|
||||
},
|
||||
get stateMessage() {
|
||||
return state.stateMessage;
|
||||
},
|
||||
get deviceInfo() {
|
||||
return state.deviceInfo;
|
||||
},
|
||||
get version() {
|
||||
return state.version;
|
||||
},
|
||||
get lastError() {
|
||||
return state.lastError;
|
||||
},
|
||||
get apiBaseUrl() {
|
||||
return `http://localhost:${state.port}`;
|
||||
},
|
||||
get wsUrl() {
|
||||
return `ws://localhost:${state.port}/ws/control`;
|
||||
},
|
||||
setPort,
|
||||
connect: connectWebSocket,
|
||||
disconnect,
|
||||
apiUrl,
|
||||
apiFetch,
|
||||
apiGet,
|
||||
apiPost,
|
||||
apiPut,
|
||||
};
|
||||
243
src/lib/stores/config.ts
Normal file
243
src/lib/stores/config.ts
Normal file
@@ -0,0 +1,243 @@
|
||||
/**
|
||||
* Config store - manages application configuration loaded from
|
||||
* and saved to the Python backend via the backend store's API helpers.
|
||||
*
|
||||
* The backend accepts PUT /api/config with `{ settings: { "dot.key": value } }`.
|
||||
*/
|
||||
|
||||
import { backendStore } from "$lib/stores/backend";
|
||||
|
||||
export interface AppConfig {
|
||||
user: {
|
||||
name: string;
|
||||
id: string;
|
||||
};
|
||||
audio: {
|
||||
input_device: string;
|
||||
sample_rate: number;
|
||||
};
|
||||
transcription: {
|
||||
model: string;
|
||||
device: string;
|
||||
language: string;
|
||||
compute_type: string;
|
||||
enable_realtime_transcription: boolean;
|
||||
realtime_model: string;
|
||||
realtime_processing_pause: number;
|
||||
silero_sensitivity: number;
|
||||
silero_use_onnx: boolean;
|
||||
webrtc_sensitivity: number;
|
||||
post_speech_silence_duration: number;
|
||||
min_length_of_recording: number;
|
||||
min_gap_between_recordings: number;
|
||||
pre_recording_buffer_duration: number;
|
||||
beam_size: number;
|
||||
initial_prompt: string;
|
||||
no_log_file: boolean;
|
||||
continuous_mode: boolean;
|
||||
};
|
||||
server_sync: {
|
||||
enabled: boolean;
|
||||
url: string;
|
||||
room: string;
|
||||
passphrase: string;
|
||||
};
|
||||
display: {
|
||||
show_timestamps: boolean;
|
||||
max_lines: number;
|
||||
font_source: string;
|
||||
font_family: string;
|
||||
websafe_font: string;
|
||||
google_font: string;
|
||||
custom_font_file: string;
|
||||
font_size: number;
|
||||
theme: string;
|
||||
fade_after_seconds: number;
|
||||
user_color: string;
|
||||
text_color: string;
|
||||
background_color: string;
|
||||
};
|
||||
web_server: {
|
||||
port: number;
|
||||
host: string;
|
||||
};
|
||||
remote: {
|
||||
mode: string;
|
||||
server_url: string;
|
||||
auth_token: string;
|
||||
byok_api_key: string;
|
||||
deepgram_model: string;
|
||||
language: string;
|
||||
fallback_to_local: boolean;
|
||||
};
|
||||
updates: {
|
||||
auto_check: boolean;
|
||||
gitea_url: string;
|
||||
owner: string;
|
||||
repo: string;
|
||||
skipped_versions: string[];
|
||||
last_check: string;
|
||||
check_interval_hours: number;
|
||||
};
|
||||
}
|
||||
|
||||
function getDefaultConfig(): AppConfig {
|
||||
return {
|
||||
user: { name: "User", id: "" },
|
||||
audio: { input_device: "default", sample_rate: 16000 },
|
||||
transcription: {
|
||||
model: "base.en",
|
||||
device: "auto",
|
||||
language: "en",
|
||||
compute_type: "default",
|
||||
enable_realtime_transcription: false,
|
||||
realtime_model: "tiny.en",
|
||||
realtime_processing_pause: 0.1,
|
||||
silero_sensitivity: 0.4,
|
||||
silero_use_onnx: true,
|
||||
webrtc_sensitivity: 3,
|
||||
post_speech_silence_duration: 0.3,
|
||||
min_length_of_recording: 0.5,
|
||||
min_gap_between_recordings: 0,
|
||||
pre_recording_buffer_duration: 0.2,
|
||||
beam_size: 5,
|
||||
initial_prompt: "",
|
||||
no_log_file: true,
|
||||
continuous_mode: false,
|
||||
},
|
||||
server_sync: {
|
||||
enabled: false,
|
||||
url: "http://localhost:3000/api/send",
|
||||
room: "default",
|
||||
passphrase: "",
|
||||
},
|
||||
display: {
|
||||
show_timestamps: true,
|
||||
max_lines: 100,
|
||||
font_source: "System Font",
|
||||
font_family: "Courier",
|
||||
websafe_font: "Arial",
|
||||
google_font: "Roboto",
|
||||
custom_font_file: "",
|
||||
font_size: 12,
|
||||
theme: "dark",
|
||||
fade_after_seconds: 10,
|
||||
user_color: "#4CAF50",
|
||||
text_color: "#FFFFFF",
|
||||
background_color: "#000000B3",
|
||||
},
|
||||
web_server: { port: 8080, host: "127.0.0.1" },
|
||||
remote: {
|
||||
mode: "local",
|
||||
server_url: "",
|
||||
auth_token: "",
|
||||
byok_api_key: "",
|
||||
deepgram_model: "nova-2",
|
||||
language: "en-US",
|
||||
fallback_to_local: true,
|
||||
},
|
||||
updates: {
|
||||
auto_check: true,
|
||||
gitea_url: "https://repo.anhonesthost.net",
|
||||
owner: "streamer-tools",
|
||||
repo: "local-transcription",
|
||||
skipped_versions: [],
|
||||
last_check: "",
|
||||
check_interval_hours: 24,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
let config = $state<AppConfig>(getDefaultConfig());
|
||||
let loading = $state(false);
|
||||
let error = $state("");
|
||||
|
||||
/**
|
||||
* Fetch the full configuration tree from the backend.
|
||||
* GET /api/config
|
||||
*/
|
||||
async function fetchConfig(): Promise<void> {
|
||||
loading = true;
|
||||
error = "";
|
||||
|
||||
try {
|
||||
const data = await backendStore.apiGet<Record<string, unknown>>("/api/config");
|
||||
// Deep merge with defaults to ensure all keys exist
|
||||
config = deepMerge(getDefaultConfig(), data) as AppConfig;
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : String(err);
|
||||
console.error("[config] fetchConfig failed:", error);
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function deepMerge(target: Record<string, unknown>, source: Record<string, unknown>): Record<string, unknown> {
|
||||
const result = { ...target };
|
||||
for (const key of Object.keys(source)) {
|
||||
if (
|
||||
source[key] &&
|
||||
typeof source[key] === "object" &&
|
||||
!Array.isArray(source[key]) &&
|
||||
target[key] &&
|
||||
typeof target[key] === "object" &&
|
||||
!Array.isArray(target[key])
|
||||
) {
|
||||
result[key] = deepMerge(
|
||||
target[key] as Record<string, unknown>,
|
||||
source[key] as Record<string, unknown>
|
||||
);
|
||||
} else {
|
||||
result[key] = source[key];
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Send a batch of setting updates to the backend.
|
||||
* PUT /api/config with body `{ settings: { "dot.key": value, ... } }`
|
||||
*
|
||||
* Keys use dot-notation, e.g. `{ "transcription.model": "small.en" }`.
|
||||
*
|
||||
* Returns the response payload on success, or throws on failure.
|
||||
*/
|
||||
async function updateConfig(
|
||||
settings: Record<string, unknown>,
|
||||
): Promise<{ status: string; message: string; engine_reloaded: boolean }> {
|
||||
loading = true;
|
||||
error = "";
|
||||
|
||||
try {
|
||||
const result = await backendStore.apiPut<{
|
||||
status: string;
|
||||
message: string;
|
||||
engine_reloaded: boolean;
|
||||
}>("/api/config", { settings });
|
||||
|
||||
// Refresh the local config tree so the UI stays in sync
|
||||
await fetchConfig();
|
||||
|
||||
return result;
|
||||
} catch (err) {
|
||||
error = err instanceof Error ? err.message : String(err);
|
||||
console.error("[config] updateConfig failed:", error);
|
||||
throw err;
|
||||
} finally {
|
||||
loading = false;
|
||||
}
|
||||
}
|
||||
|
||||
export const configStore = {
|
||||
get config() {
|
||||
return config;
|
||||
},
|
||||
get loading() {
|
||||
return loading;
|
||||
},
|
||||
get error() {
|
||||
return error;
|
||||
},
|
||||
fetchConfig,
|
||||
updateConfig,
|
||||
};
|
||||
109
src/lib/stores/transcriptions.ts
Normal file
109
src/lib/stores/transcriptions.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
/**
|
||||
* Transcriptions store - manages the list of transcription items
|
||||
* received from the backend via WebSocket.
|
||||
*/
|
||||
|
||||
export interface TranscriptionItem {
|
||||
id: string;
|
||||
text: string;
|
||||
userName: string;
|
||||
timestamp: string;
|
||||
isPreview: boolean;
|
||||
}
|
||||
|
||||
let items = $state<TranscriptionItem[]>([]);
|
||||
let nextId = 0;
|
||||
|
||||
function generateId(): string {
|
||||
return `t-${Date.now()}-${nextId++}`;
|
||||
}
|
||||
|
||||
function addTranscription(data: {
|
||||
text?: string;
|
||||
user_name?: string;
|
||||
timestamp?: string;
|
||||
}) {
|
||||
// When a final transcription arrives, remove any existing preview
|
||||
const previewIndex = items.findIndex((item) => item.isPreview);
|
||||
if (previewIndex !== -1) {
|
||||
items.splice(previewIndex, 1);
|
||||
}
|
||||
|
||||
items.push({
|
||||
id: generateId(),
|
||||
text: data.text ?? "",
|
||||
userName: data.user_name ?? "",
|
||||
timestamp: data.timestamp ?? "",
|
||||
isPreview: false,
|
||||
});
|
||||
|
||||
// Keep a reasonable limit
|
||||
if (items.length > 500) {
|
||||
items.splice(0, items.length - 500);
|
||||
}
|
||||
}
|
||||
|
||||
function setPreview(data: {
|
||||
text?: string;
|
||||
user_name?: string;
|
||||
timestamp?: string;
|
||||
}) {
|
||||
const existingIndex = items.findIndex((item) => item.isPreview);
|
||||
const previewItem: TranscriptionItem = {
|
||||
id: existingIndex !== -1 ? items[existingIndex].id : generateId(),
|
||||
text: data.text ?? "",
|
||||
userName: data.user_name ?? "",
|
||||
timestamp: data.timestamp ?? "",
|
||||
isPreview: true,
|
||||
};
|
||||
|
||||
if (existingIndex !== -1) {
|
||||
items[existingIndex] = previewItem;
|
||||
} else {
|
||||
items.push(previewItem);
|
||||
}
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
items.length = 0;
|
||||
}
|
||||
|
||||
function getPlainText(): string {
|
||||
return items
|
||||
.filter((item) => !item.isPreview)
|
||||
.map((item) => {
|
||||
let line = "";
|
||||
if (item.timestamp) line += `[${item.timestamp}] `;
|
||||
if (item.userName) line += `${item.userName}: `;
|
||||
line += item.text;
|
||||
return line;
|
||||
})
|
||||
.join("\n");
|
||||
}
|
||||
|
||||
// Listen for backend events
|
||||
if (typeof window !== "undefined") {
|
||||
window.addEventListener("backend:transcription", ((e: CustomEvent) => {
|
||||
addTranscription(e.detail);
|
||||
}) as EventListener);
|
||||
|
||||
window.addEventListener("backend:preview", ((e: CustomEvent) => {
|
||||
setPreview(e.detail);
|
||||
}) as EventListener);
|
||||
}
|
||||
|
||||
export const transcriptionStore = {
|
||||
get items() {
|
||||
return items;
|
||||
},
|
||||
get currentPreview(): TranscriptionItem | null {
|
||||
return items.find((item) => item.isPreview) ?? null;
|
||||
},
|
||||
get transcriptions(): TranscriptionItem[] {
|
||||
return items.filter((item) => !item.isPreview);
|
||||
},
|
||||
addTranscription,
|
||||
setPreview,
|
||||
clearAll,
|
||||
getPlainText,
|
||||
};
|
||||
Reference in New Issue
Block a user