Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Speech Transcriber with Transformers.js</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>🎙️ Speech Transcriber</h1> | |
| <p>Upload an audio file or use a sample to transcribe speech using Transformers.js (Whisper Tiny EN).</p> | |
| <!-- Audio Input --> | |
| <div class="input-section"> | |
| <label for="audioInput">Choose an audio file:</label> | |
| <input type="file" id="audioInput" accept="audio/*" /> | |
| <button id="useSample">Or Use Sample Audio</button> | |
| </div> | |
| <!-- Options --> | |
| <div class="options-section"> | |
| <label>Transcription Mode:</label> | |
| <div class="options"> | |
| <label><input type="radio" name="mode" value="normal" checked /> Normal</label> | |
| <label><input type="radio" name="mode" value="chunks" /> With Chunks</label> | |
| <label><input type="radio" name="mode" value="words" /> Word-level Timestamps</label> | |
| </div> | |
| </div> | |
| <!-- Audio Player --> | |
| <div class="player-section"> | |
| <audio id="player" controls></audio> | |
| </div> | |
| <!-- Status --> | |
| <div id="status">Ready to transcribe.</div> | |
| <!-- Output --> | |
| <div class="output-section"> | |
| <h2>Transcription Result</h2> | |
| <pre id="output"></pre> | |
| </div> | |
| </div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |