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
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>
|
||||
Reference in New Issue
Block a user