Archived
118 lines
4.8 KiB
HTML
118 lines
4.8 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>Live Transcription</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link id="google-font-link" rel="stylesheet" href="">
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<div id="controls" class="controls">
|
|
<div class="header">
|
|
<h3>Live Transcription</h3>
|
|
<button id="settings-btn" class="btn btn-small">⚙️ Settings</button>
|
|
</div>
|
|
|
|
<div class="control-panel">
|
|
<div class="control-group">
|
|
<label>Backend:</label>
|
|
<select id="backend-select">
|
|
<option value="whisper-local">Whisper (Local)</option>
|
|
<option value="whisper-remote">Whisper (Remote)</option>
|
|
<option value="elevenlabs">ElevenLabs (Scribe)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Text Duration (seconds):</label>
|
|
<input type="number" id="duration-input" min="1" max="60" value="5">
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Transcription Speed:</label>
|
|
<select id="chunk-size-select">
|
|
<option value="1000">Very Fast (1s chunks)</option>
|
|
<option value="2000" selected>Fast (2s chunks)</option>
|
|
<option value="3000">Balanced (3s chunks)</option>
|
|
<option value="5000">Quality (5s chunks)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Text Color:</label>
|
|
<input type="color" id="color-input" value="#ffffff">
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Background Color:</label>
|
|
<input type="color" id="bg-color-input" value="#000000">
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Font Family:</label>
|
|
<select id="font-select">
|
|
<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>
|
|
<option value="'Trebuchet MS', sans-serif">Trebuchet MS</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>
|
|
<option value="'Raleway', sans-serif" data-google="Raleway">Raleway</option>
|
|
</optgroup>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Font Size:</label>
|
|
<input type="range" id="font-size-input" min="16" max="72" value="32">
|
|
<span id="font-size-display">32px</span>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<button id="start-btn" class="btn btn-primary">Start Recording</button>
|
|
<button id="stop-btn" class="btn btn-secondary" disabled>Stop Recording</button>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Audio Level:</label>
|
|
<div class="audio-level-container">
|
|
<div id="audio-level-bar" class="audio-level-bar">
|
|
<div id="audio-level-fill" class="audio-level-fill"></div>
|
|
</div>
|
|
<span id="audio-level-text">0%</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<label>Queue Status:</label>
|
|
<div id="queue-status">Queue: 0, Running: 0</div>
|
|
</div>
|
|
|
|
<div class="control-group">
|
|
<button id="toggle-display-btn" class="btn">Open Display Window</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="transcription-display" class="transcription-display">
|
|
<div id="transcription-text"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="http://localhost:3000/socket.io/socket.io.js"></script>
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html> |