Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Transformers.js Audio Transcriber</title> | |
| <link rel="stylesheet" href="style.css" /> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>🎤 Audio Transcription with Transformers.js</h1> | |
| <p>Transcribe audio from a URL using Whisper ASR model.</p> | |
| <div class="input-group"> | |
| <label for="audio-url">Audio URL:</label> | |
| <input | |
| type="text" | |
| id="audio-url" | |
| placeholder="https://example.com/audio.wav" | |
| value="https://huggingface.co/datasets/Xenova/transformers.js-docs/resolve/main/jfk.wav" | |
| /> | |
| </div> | |
| <button id="transcribe-btn">Transcribe Audio</button> | |
| <div class="result-area"> | |
| <div class="loading" id="loading">🔄 Loading model and transcribing...</div> | |
| <div class="error" id="error"></div> | |
| <textarea | |
| id="transcription-result" | |
| placeholder="Transcription will appear here..." | |
| readonly | |
| ></textarea> | |
| </div> | |
| </div> | |
| <script type="module" src="index.js"></script> | |
| </body> | |
| </html> |