| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Whisper Container Tester</title> |
| <style> |
| body { font-family: system-ui, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; line-height: 1.6; } |
| .card { border: 1px solid #ccc; padding: 20px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } |
| button { padding: 10px 20px; font-size: 16px; border: none; border-radius: 4px; cursor: pointer; margin-right: 10px; color: white; } |
| .btn-start { background-color: #28a745; } |
| .btn-stop { background-color: #dc3545; } |
| button:disabled { background-color: #6c757d; cursor: not-allowed; } |
| .status { font-weight: bold; margin-top: 15px; } |
| .output { background: #f8f9fa; padding: 15px; border-radius: 4px; margin-top: 15px; border-left: 4px solid #007bff; min-height: 60px; } |
| </style> |
| </head> |
| <body> |
|
|
| <div class="card"> |
| <h2>Whisper Container Tester</h2> |
| <p>Use this file to record audio straight from your microphone and test your Hugging Face Space endpoint directly.</p> |
| |
| <div> |
| <button id="startBtn" class="btn-start">Start Recording</button> |
| <button id="stopBtn" class="btn-stop" disabled>Stop & Transcribe</button> |
| </div> |
|
|
| <div class="status">Status: <span id="statusText">Ready</span></div> |
| |
| <h3>Transcription Result:</h3> |
| <div id="outputText" class="output">Your text will appear here...</div> |
| </div> |
|
|
| <script> |
| |
| const HF_ENDPOINT_URL = "https://hf.space"; |
| |
| |
| |
| const HF_API_TOKEN = ""; |
| |
| let mediaRecorder; |
| let audioChunks = []; |
| |
| const startBtn = document.getElementById('startBtn'); |
| const stopBtn = document.getElementById('stopBtn'); |
| const statusText = document.getElementById('statusText'); |
| const outputText = document.getElementById('outputText'); |
| |
| startBtn.onclick = async () => { |
| audioChunks = []; |
| try { |
| const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); |
| mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' }); |
| |
| mediaRecorder.ondataavailable = (event) => { |
| if (event.data.size > 0) audioChunks.push(event.data); |
| }; |
| |
| mediaRecorder.onstop = async () => { |
| const audioBlob = new Blob(audioChunks, { type: 'audio/webm' }); |
| await sendToWhisperContainer(audioBlob); |
| }; |
| |
| mediaRecorder.start(); |
| statusText.innerText = "Recording... speak into your microphone."; |
| statusText.style.color = "#dc3545"; |
| startBtn.disabled = true; |
| stopBtn.disabled = false; |
| } catch (err) { |
| alert("Microphone access denied or unsupported browser: " + err); |
| } |
| }; |
| |
| stopBtn.onclick = () => { |
| if (mediaRecorder && mediaRecorder.state !== "inactive") { |
| mediaRecorder.stop(); |
| |
| mediaRecorder.stream.getTracks().forEach(track => track.stop()); |
| |
| statusText.innerText = "Uploading audio package to container..."; |
| statusText.style.color = "#007bff"; |
| startBtn.disabled = false; |
| stopBtn.disabled = true; |
| } |
| }; |
| |
| async function sendToWhisperContainer(blob) { |
| const formData = new FormData(); |
| formData.append('file', blob, 'test_recording.webm'); |
| |
| const headers = {}; |
| if (HF_API_TOKEN) { |
| headers['Authorization'] = `Bearer ${HF_API_TOKEN}`; |
| } |
| |
| try { |
| const response = await fetch(HF_ENDPOINT_URL, { |
| method: 'POST', |
| headers: headers, |
| body: formData |
| }); |
| |
| if (!response.ok) { |
| const errDetail = await response.text(); |
| throw new Error(`Server returned code ${response.status}: ${errDetail}`); |
| } |
| |
| const data = await response.json(); |
| statusText.innerText = "Success!"; |
| statusText.style.color = "#28a745"; |
| outputText.innerText = data.text || "[No speech detected in audio]"; |
| } catch (error) { |
| statusText.innerText = "Error occurred."; |
| statusText.style.color = "#dc3545"; |
| outputText.innerText = "Failed to connect to container. Detail: " + error.message; |
| console.error(error); |
| } |
| } |
| </script> |
|
|
| </body> |
| </html> |
|
|
