mirror of
https://github.com/jahruz67/wisp-open.git
synced 2026-08-08 18:14:08 +00:00
189 lines
9.1 KiB
HTML
189 lines
9.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport">
|
|
<title>wis-free-v3 Settings</title>
|
|
|
|
<script type="module" crossorigin src="/assets/index.33b5a8c3.js"></script>
|
|
<link rel="stylesheet" href="/assets/index.9197445a.css">
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" class="container">
|
|
<!-- Header -->
|
|
<div class="flex-between" style="margin-bottom: 30px;">
|
|
<h1 style="margin: 0;">wis-free-v3 Settings</h1>
|
|
<div style="color: var(--text-muted); font-size: 12px;">v1.0.0</div>
|
|
</div>
|
|
|
|
<div id="saveStatus" class="save-status">Settings Saved!</div>
|
|
|
|
<!-- Settings Form -->
|
|
<div id="settingsForm">
|
|
|
|
<!-- 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 style="font-size: 12px; color: var(--text-muted); margin-top: 8px;">
|
|
Get your free API key at <a href="https://console.groq.com/keys" target="_blank"
|
|
style="color: var(--primary);">console.groq.com/keys</a>
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Shortcut -->
|
|
<div class="section">
|
|
<label>Shortcut (Hold to Record)</label>
|
|
<div class="form-control">
|
|
<div class="flex-row">
|
|
<div class="input-wrapper">
|
|
<input type="text" id="shortcutInput" placeholder="Click Record to set..." readonly>
|
|
</div>
|
|
<button onclick="recordShortcut()" id="recordBtn">Record</button>
|
|
</div>
|
|
</div>
|
|
<p style="font-size: 12px; color: var(--text-muted); margin-top: 8px;">
|
|
Click Record, then press your desired key combination (e.g., Ctrl+X)
|
|
</p>
|
|
</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>Transcription Language</label>
|
|
<select id="language" onchange="saveLanguage()" class="form-control">
|
|
<option value="en">English (en)</option>
|
|
<option value="es">Spanish (es)</option>
|
|
</select>
|
|
<p style="font-size: 11px; color: var(--text-muted); margin-top: 5px;">Specifying language reduces latency and improves accuracy.</p>
|
|
</div>
|
|
|
|
<!-- AI Model -->
|
|
<div class="section">
|
|
<label>AI Model (Text Refinement)</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>
|
|
|
|
<!-- Microphone -->
|
|
<div class="section">
|
|
<label>Microphone</label>
|
|
<select id="micDevice" onchange="saveMicDevice()" class="form-control">
|
|
<option value="default">System Default</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- AI Prompt -->
|
|
<div class="section">
|
|
<label>AI Prompt (System Message)</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>
|
|
|
|
<!-- Startup -->
|
|
<div class="section flex-between">
|
|
<span style="font-weight: 500;">Run on Windows Startup</span>
|
|
<label class="flex-row" style="margin: 0; cursor: pointer;">
|
|
<input type="checkbox" id="startupToggle" onchange="toggleStartup()" style="width: auto;">
|
|
<span>Enable</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- History -->
|
|
<div class="section">
|
|
<div class="flex-between" style="margin-bottom: 10px;">
|
|
<label style="margin: 0;">Transcription History</label>
|
|
<button onclick="clearHistory()"
|
|
style="background: transparent; color: #f87171; padding: 0; font-size: 12px;">Clear</button>
|
|
</div>
|
|
<div id="historyList" class="history-list">
|
|
<div style="text-align: center; color: var(--text-muted); padding: 20px;">No history yet.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Offline Mode -->
|
|
<div class="section"
|
|
style="margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--border-color);">
|
|
<label>Offline Whisper</label>
|
|
|
|
<!-- Online/Offline Status -->
|
|
<div id="connectionStatus"
|
|
style="margin-bottom: 15px; padding: 10px; border-radius: 8px; text-align: center;">
|
|
Checking connection...
|
|
</div>
|
|
|
|
<!-- Whisper Status -->
|
|
<div id="whisperSection">
|
|
<div id="whisperNotInstalled">
|
|
<p style="font-size: 13px; color: var(--text-muted); margin-bottom: 15px;">
|
|
Install offline transcription for use without internet. Uses GPU acceleration if available.
|
|
</p>
|
|
<div style="margin-bottom: 15px;">
|
|
<label style="font-size: 12px;">Model Size:</label>
|
|
<select id="whisperModelSelect" style="margin-top: 5px;" 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) - High Quality</option>
|
|
</select>
|
|
</div>
|
|
<button onclick="installWhisper()" id="installBtn"
|
|
style="background: linear-gradient(135deg, #6366f1, #8b5cf6); padding: 12px 24px; font-size: 14px; width: 100%;">
|
|
🚀 Install Offline Whisper
|
|
</button>
|
|
</div>
|
|
|
|
<div id="whisperInstalled" style="display: none;">
|
|
<div
|
|
style="background: rgba(34, 197, 94, 0.1); border: 1px solid rgba(34, 197, 94, 0.3); border-radius: 8px; padding: 15px; margin-bottom: 15px;">
|
|
<div style="color: #22c55e; font-weight: 500;">✓ Offline Whisper Installed</div>
|
|
<div style="font-size: 12px; color: var(--text-muted); margin-top: 5px;">
|
|
Model: <span id="installedModel">-</span>
|
|
</div>
|
|
</div>
|
|
<p style="font-size: 12px; color: var(--text-muted); margin-bottom: 15px;">
|
|
Select "Local - Whisper" in the Whisper Model dropdown above to use offline transcription.
|
|
</p>
|
|
<button onclick="uninstallWhisper()"
|
|
style="background: transparent; border: 1px solid #f87171; color: #f87171; padding: 10px 20px; font-size: 13px;">
|
|
🗑️ Uninstall Offline Whisper
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html> |