Gan, Jimmy
784a67c921
- Update index.html file input to accept audio/*,video/* - Add engine selection dropdown (Local vs Server) in index.html - Implement JS bufferToWav WAV encoder in app.js (Float32Array PCM to 16-bit WAV) - Integrate server-side transcribing route via FormData POST in app.js - Update DEVELOPMENT_RULES.md to mark browser-side extraction as implemented Co-Authored-By: Claude Opus 4.8 <noreply@anthreply.com>
64 lines
2.4 KiB
HTML
64 lines
2.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Media to Text</title>
|
|
<style>
|
|
body { font-family: system-ui; max-width: 800px; margin: 50px auto; padding: 20px; }
|
|
button { padding: 10px 20px; margin: 10px 5px; cursor: pointer; }
|
|
#output { white-space: pre-wrap; border: 1px solid #ccc; padding: 15px; margin: 20px 0; min-height: 100px; }
|
|
#status { color: #666; margin: 10px 0; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Media to Text Converter</h1>
|
|
|
|
<div>
|
|
<label for="language">Language: </label>
|
|
<select id="language">
|
|
<option value="en-US">English</option>
|
|
<option value="es-ES">Spanish</option>
|
|
<option value="fr-FR">French</option>
|
|
<option value="de-DE">German</option>
|
|
<option value="it-IT">Italian</option>
|
|
<option value="pt-BR">Portuguese</option>
|
|
<option value="ru-RU">Russian</option>
|
|
<option value="ja-JP">Japanese</option>
|
|
<option value="ko-KR">Korean</option>
|
|
<option value="zh-CN">Chinese (Simplified)</option>
|
|
<option value="zh-TW">Chinese (Traditional)</option>
|
|
<option value="ar-SA">Arabic</option>
|
|
<option value="hi-IN">Hindi</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div style="margin-top: 10px;">
|
|
<label for="engine">Transcription Engine: </label>
|
|
<select id="engine">
|
|
<option value="local">Local (Offline Browser)</option>
|
|
<option value="server">Server (Whisper Python)</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div style="margin: 20px 0; padding: 20px; border: 2px dashed #ccc; border-radius: 8px;">
|
|
<h3>Upload Media File</h3>
|
|
<p style="color: #666; font-size: 14px;">Upload audio or video file for transcription</p>
|
|
<input type="file" id="file-input" accept="audio/*,video/*">
|
|
<button id="upload-btn" disabled>Convert to Text</button>
|
|
</div>
|
|
|
|
<div style="margin: 20px 0; padding: 20px; border: 2px solid #ccc; border-radius: 8px;">
|
|
<h3>Live Recording</h3>
|
|
<button id="record-btn">Start Recording</button>
|
|
<button id="stop-btn" disabled>Stop Recording</button>
|
|
</div>
|
|
|
|
<div id="status"></div>
|
|
<div id="output"></div>
|
|
<button id="copy-btn" style="display:none">Copy Text</button>
|
|
|
|
<script type="module" src="app.js"></script>
|
|
</body>
|
|
</html>
|