Archived
319 lines
10 KiB
HTML
319 lines
10 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self' http://localhost:3000 https://fonts.googleapis.com https://fonts.gstatic.com; script-src 'self' 'unsafe-inline' http://localhost:3000; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com; connect-src 'self' http://localhost:3000 ws://localhost:3000">
|
|
<title>Settings - Live Transcription</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
height: 100vh;
|
|
overflow-y: auto;
|
|
background: #0a0a0a;
|
|
}
|
|
|
|
.settings-container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.settings-section {
|
|
background: #1a1a1a;
|
|
margin-bottom: 20px;
|
|
padding: 20px;
|
|
border-radius: 8px;
|
|
border: 1px solid #333;
|
|
}
|
|
|
|
.settings-section h3 {
|
|
color: #fff;
|
|
margin-bottom: 15px;
|
|
border-bottom: 1px solid #333;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.settings-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
gap: 15px;
|
|
}
|
|
|
|
.setting-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
|
|
.setting-item label {
|
|
color: #ccc;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.setting-item input,
|
|
.setting-item select {
|
|
padding: 8px;
|
|
border: 1px solid #333;
|
|
background: #2a2a2a;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.setting-item input[type="password"] {
|
|
font-family: monospace;
|
|
}
|
|
|
|
.calibration-section {
|
|
background: #2a2a1a;
|
|
padding: 15px;
|
|
border-radius: 4px;
|
|
border: 1px solid #444;
|
|
}
|
|
|
|
.calibration-controls {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: center;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.calibration-status {
|
|
color: #ccc;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 20px;
|
|
background: #333;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
.progress-fill {
|
|
height: 100%;
|
|
background: linear-gradient(90deg, #4CAF50 0%, #FFC107 50%, #f44336 100%);
|
|
width: 0%;
|
|
transition: width 0.1s ease;
|
|
}
|
|
|
|
.button-group {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: #dc3545;
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #c82333;
|
|
}
|
|
|
|
.btn-success {
|
|
background: #28a745;
|
|
color: white;
|
|
}
|
|
|
|
.btn-success:hover {
|
|
background: #218838;
|
|
}
|
|
|
|
.back-link {
|
|
color: #4CAF50;
|
|
text-decoration: none;
|
|
margin-bottom: 20px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.back-link:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.help-text {
|
|
color: #888;
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="settings-container">
|
|
<button onclick="window.location.href='index.html'" class="btn btn-small" style="margin-bottom: 20px;">← Back to Main</button>
|
|
|
|
<h1 style="color: #fff; margin-bottom: 30px;">Settings</h1>
|
|
|
|
<div class="settings-section">
|
|
<h3>API Configuration</h3>
|
|
<div class="settings-grid">
|
|
<div class="setting-item">
|
|
<label for="openai-key">OpenAI API Key</label>
|
|
<input type="password" id="openai-key" placeholder="Enter your OpenAI API key">
|
|
<div class="help-text">Required for remote Whisper transcription</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<label for="elevenlabs-key">ElevenLabs API Key</label>
|
|
<input type="password" id="elevenlabs-key" placeholder="Enter your ElevenLabs API key">
|
|
<div class="help-text">Required for ElevenLabs Scribe transcription</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<h3>Audio Processing</h3>
|
|
<div class="settings-grid">
|
|
<div class="setting-item">
|
|
<label for="whisper-model">Whisper Model</label>
|
|
<select id="whisper-model">
|
|
<option value="tiny">Tiny (fastest, least accurate)</option>
|
|
<option value="base">Base (good balance)</option>
|
|
<option value="small">Small (more accurate)</option>
|
|
<option value="medium">Medium (high accuracy)</option>
|
|
<option value="large">Large (highest accuracy, slowest)</option>
|
|
</select>
|
|
<div class="help-text">Larger models are more accurate but slower</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<label for="gpu-acceleration">GPU Acceleration</label>
|
|
<select id="gpu-acceleration">
|
|
<option value="none">Disabled (CPU only)</option>
|
|
<option value="cuda">NVIDIA CUDA</option>
|
|
<option value="rocm">AMD ROCm</option>
|
|
<option value="openvino">Intel OpenVINO</option>
|
|
</select>
|
|
<div class="help-text">
|
|
CUDA: NVIDIA GPUs<br>
|
|
ROCm: AMD GPUs (Linux only)<br>
|
|
OpenVINO: Intel Arc/Integrated GPUs
|
|
</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<label for="audio-threshold">Audio Threshold</label>
|
|
<input type="range" id="audio-threshold" min="0.001" max="0.1" step="0.001" value="0.01">
|
|
<span id="threshold-value">0.01</span>
|
|
<div class="help-text">Lower = more sensitive to quiet sounds</div>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<label for="chunk-size">Transcription Speed</label>
|
|
<select id="chunk-size">
|
|
<option value="1000">Very Fast (1s chunks)</option>
|
|
<option value="2000">Fast (2s chunks)</option>
|
|
<option value="3000">Balanced (3s chunks)</option>
|
|
<option value="5000">Quality (5s chunks)</option>
|
|
</select>
|
|
<div class="help-text">Faster = more responsive but may cut off words</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="calibration-section">
|
|
<h4 style="color: #fff; margin-bottom: 10px;">Ambient Noise Calibration</h4>
|
|
<p style="color: #ccc; font-size: 14px;">Calibrate the app to learn your ambient noise level for better threshold detection.</p>
|
|
|
|
<div class="progress-bar">
|
|
<div id="calibration-progress" class="progress-fill"></div>
|
|
</div>
|
|
|
|
<div class="calibration-controls">
|
|
<button id="start-calibration" class="btn btn-primary">Start Calibration</button>
|
|
<button id="stop-calibration" class="btn btn-secondary" disabled>Stop</button>
|
|
<span id="ambient-level">Current: Not calibrated</span>
|
|
</div>
|
|
|
|
<div id="calibration-status" class="calibration-status">
|
|
Click "Start Calibration" and stay quiet for 10 seconds to measure ambient noise.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<h3>Display Settings</h3>
|
|
<div class="settings-grid">
|
|
<div class="setting-item">
|
|
<label for="default-backend">Default Backend</label>
|
|
<select id="default-backend">
|
|
<option value="whisper-local">Whisper (Local)</option>
|
|
<option value="whisper-remote">Whisper (Remote)</option>
|
|
<option value="elevenlabs">ElevenLabs (Scribe)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<label for="text-duration">Text Duration (seconds)</label>
|
|
<input type="number" id="text-duration" min="1" max="60" value="5">
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<label for="text-color">Text Color</label>
|
|
<input type="color" id="text-color" value="#ffffff">
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<label for="bg-color">Background Color</label>
|
|
<input type="color" id="bg-color" value="#000000">
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<label for="font-family">Font Family</label>
|
|
<select id="font-family">
|
|
<optgroup label="System Fonts">
|
|
<option value="Arial, sans-serif">Arial</option>
|
|
<option value="'Times New Roman', serif">Times New Roman</option>
|
|
<option value="'Courier New', monospace">Courier New</option>
|
|
<option value="Georgia, serif">Georgia</option>
|
|
<option value="Verdana, sans-serif">Verdana</option>
|
|
</optgroup>
|
|
<optgroup label="Google Fonts">
|
|
<option value="'Roboto', sans-serif" data-google="Roboto">Roboto</option>
|
|
<option value="'Open Sans', sans-serif" data-google="Open+Sans">Open Sans</option>
|
|
<option value="'Lato', sans-serif" data-google="Lato">Lato</option>
|
|
<option value="'Montserrat', sans-serif" data-google="Montserrat">Montserrat</option>
|
|
<option value="'Poppins', sans-serif" data-google="Poppins">Poppins</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="setting-item">
|
|
<label for="font-size">Font Size</label>
|
|
<input type="range" id="font-size" min="16" max="72" value="32">
|
|
<span id="font-size-value">32px</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="settings-section">
|
|
<h3>Server Settings</h3>
|
|
<div class="settings-grid">
|
|
<div class="setting-item">
|
|
<label for="server-port">Server Port</label>
|
|
<input type="number" id="server-port" min="1000" max="65535" value="3000">
|
|
<div class="help-text">Restart required after changing</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="button-group">
|
|
<button id="save-settings" class="btn btn-success">Save Settings</button>
|
|
<button id="reset-settings" class="btn btn-danger">Reset to Defaults</button>
|
|
<button id="test-connection" class="btn btn-primary">Test API Connections</button>
|
|
<button id="detect-gpu" class="btn btn-primary">Detect GPU</button>
|
|
</div>
|
|
|
|
<div id="status-message" style="margin-top: 20px; padding: 10px; border-radius: 4px; display: none;"></div>
|
|
</div>
|
|
|
|
<script src="js/settings.js"></script>
|
|
</body>
|
|
</html> |