jahruz67/wisp-open
1
0
Fork 0
mirror of https://github.com/jahruz67/wisp-open.git synced 2026-08-08 18:14:08 +00:00
Code Issues Packages Projects Releases 2 Wiki Activity
Files
9d4d279a873ce1e583f2db15918f5614e38b27eb
wisp-open/frontend/dist/index.html
T

192 lines
9.1 KiB
HTML
Raw Blame History

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<title>Wisp Settings</title>
<script type="module" crossorigin src="/assets/index.fbf781c1.js"></script>
<link rel="stylesheet" href="/assets/index.6e77aa4d.css">
</head>
<body>
<div id="app" class="container">
<!-- Header -->
<div class="flex-between" style="margin-bottom: 28px;">
<h1>Settings</h1>
<div id="appVersion" style="color: var(--text-2); font-size: 12px; font-weight: 500;">—</div>
</div>
<div id="saveStatus" class="save-status">Saved</div>
<!-- Settings Form -->
<div id="settingsForm">
<div class="section-group-label">Authentication</div>
<!-- API Key -->
<div class="section">
<label>Groq API Key</label>
<div class="form-control">
<div class="flex-row">
<div class="input-wrapper">
<input type="password" id="apiKey" placeholder="gsk_...">
<button class="eye-btn" onclick="toggleApiKey()" id="eyeBtn">👁️</button>
</div>
<button onclick="saveApiKey()">Save</button>
</div>
</div>
<p class="hint">Get your free key at <a href="https://console.groq.com/keys" target="_blank" style="color: var(--accent);">console.groq.com/keys</a></p>
</div>
<div class="section-group-label">Input</div>
<!-- Linux Wayland Hotkey Command -->
<div class="section" id="linuxPressSection" style="display: none;">
<label>System Hotkey Command (Linux)</label>
<div class="form-control">
<div class="flex-row">
<div class="input-wrapper">
<input type="text" id="linuxPressCommand" readonly>
</div>
<button onclick="copyLinuxPressCommand()">Copy</button>
</div>
</div>
<p class="hint">GNOME: Settings -> Keyboard -> Custom Shortcuts -> Add a shortcut using the copied command.</p>
<p class="hint">KDE: System Settings -> Shortcuts -> Command/URL -> Add a shortcut using the copied command.</p>
</div>
<!-- Microphone -->
<div class="section">
<label>Microphone</label>
<select id="micDevice" onchange="saveMicDevice()" class="form-control">
<option value="default">System Default</option>
</select>
</div>
<div class="section-group-label">Transcription</div>
<!-- Whisper Model -->
<div class="section">
<label>Whisper Model</label>
<select id="whisperModel" onchange="saveWhisperModel()" class="form-control">
<option value="whisper-large-v3-turbo">whisper-large-v3-turbo (Recommended)</option>
<option value="whisper-large-v3">whisper-large-v3</option>
</select>
</div>
<!-- Language -->
<div class="section">
<label>Language</label>
<select id="language" onchange="saveLanguage()" class="form-control">
<option value="auto">Auto-Detect</option>
<option value="en">English (en)</option>
<option value="es">Spanish (es)</option>
</select>
<p class="hint">Specifying language reduces latency and improves accuracy.</p>
</div>
<div class="section-group-label">AI Refinement</div>
<!-- AI Model -->
<div class="section">
<label>AI Model</label>
<select id="aiModel" onchange="saveAiModel()" class="form-control">
<option value="None">None — skip refinement</option>
<option value="openai/gpt-oss-120b-high">openai/gpt-oss-120b (high reasoning)</option>
<option value="openai/gpt-oss-120b">openai/gpt-oss-120b (low reasoning)</option>
<option value="openai/gpt-oss-20b-high">openai/gpt-oss-20b (high reasoning)</option>
<option value="openai/gpt-oss-20b">openai/gpt-oss-20b (low reasoning)</option>
<option value="llama-3.3-70b-versatile">llama-3.3-70b-versatile</option>
<option value="llama-3.1-8b-instant">llama-3.1-8b-instant (faster)</option>
</select>
</div>
<!-- AI Prompt -->
<div class="section">
<label>System Prompt</label>
<textarea id="aiPrompt" rows="3" placeholder="Custom instructions for text refinement..." class="form-control"></textarea>
<div style="text-align: right; margin-top: 10px;">
<button onclick="savePrompt()">Save Prompt</button>
</div>
</div>
<div class="section-group-label">System</div>
<!-- Startup -->
<div class="section flex-between">
<div>
<span id="startupLabel" style="font-weight: 500;">Run on System Startup</span>
<p class="hint" style="margin-top: 4px; margin-bottom: 0;">Launch automatically when you log in.</p>
</div>
<label class="flex-row" style="margin: 0; cursor: pointer;">
<input type="checkbox" id="startupToggle" onchange="toggleStartup()" style="width: auto;">
</label>
</div>
<!-- History -->
<div class="section">
<div class="flex-between" style="margin-bottom: 12px;">
<label style="margin: 0;">Transcription History</label>
<button onclick="clearHistory()" class="btn-link">Clear all</button>
</div>
<div id="historyList" class="history-list">
<div style="text-align: center; color: var(--text-2); padding: 24px 0; font-size: 13px;">No history yet.</div>
</div>
</div>
<!-- Offline Whisper -->
<div id="offlineWhisperSection" class="section" style="margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--border);">
<label>Offline Whisper</label>
<!-- Connection Status -->
<div id="connectionStatus" style="margin-bottom: 14px; padding: 9px 14px; border-radius: 7px; text-align: center; font-size: 13px;">
Checking connection...
</div>
<!-- Whisper Status -->
<div id="whisperSection">
<div id="whisperNotInstalled">
<p class="hint" style="margin-bottom: 14px;">
Install offline transcription for use without internet. Uses GPU acceleration if available.
</p>
<div style="margin-bottom: 14px;">
<label style="font-size: 12px; color: var(--text-2); margin-bottom: 6px;">Model Size</label>
<select id="whisperModelSelect" class="form-control">
<option value="tiny">Tiny (75 MB) — Fastest</option>
<option value="base">Base (150 MB) — Fast</option>
<option value="small" selected>Small (500 MB) — Recommended</option>
<option value="medium">Medium (1.5 GB) — Best Quality</option>
</select>
</div>
<button onclick="installWhisper()" id="installBtn">
Install Offline Whisper
</button>
</div>
<div id="whisperInstalled" style="display: none;">
<div style="background: var(--green-dim); border: 1px solid rgba(61, 186, 110, 0.25); border-radius: 7px; padding: 13px 16px; margin-bottom: 14px;">
<div style="color: var(--green); font-weight: 500; font-size: 13px;">✓ Offline Whisper installed</div>
<div style="font-size: 12px; color: var(--text-2); margin-top: 4px;">
Model: <span id="installedModel">—</span>
</div>
</div>
<p class="hint" style="margin-bottom: 14px;">
Select "Local — Whisper" in the Whisper Model dropdown above to use offline transcription.
</p>
<button onclick="uninstallWhisper()" class="btn-danger">
Uninstall Offline Whisper
</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink