Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ASR Transcription App</title> | |
| <style> | |
| body { | |
| font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; | |
| margin: 0; | |
| padding: 20px; | |
| background-color: #011227; | |
| color: #333; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| box-sizing: border-box; | |
| } | |
| .container { | |
| max-width: 650px; | |
| width: 100%; | |
| margin: auto; | |
| background: linear-gradient(135deg, #ffffff, #f0f8ff); | |
| padding: 40px; | |
| border-radius: 12px; | |
| box-shadow: 0 5px 20px rgba(0,0,0,0.1); | |
| border: 1px solid #d0e0f0; | |
| } | |
| h1 { | |
| text-align: center; | |
| color: #0056b3; | |
| margin-bottom: 30px; | |
| font-size: 2em; | |
| } | |
| .form-group { | |
| margin-bottom: 25px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 8px; | |
| font-weight: bold; | |
| color: #555; | |
| } | |
| input[type="file"] { | |
| display: block; | |
| width: 100%; | |
| padding: 12px; | |
| border: 1px solid #a7d0e0; | |
| border-radius: 6px; | |
| box-sizing: border-box; | |
| background-color: #fcfdff; | |
| cursor: pointer; | |
| } | |
| input[type="file"]::-webkit-file-upload-button { | |
| background-color: #007bff; | |
| color: white; | |
| padding: 8px 15px; | |
| border: none; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| margin-right: 15px; | |
| transition: background-color 0.2s ease; | |
| } | |
| input[type="file"]::-webkit-file-upload-button:hover { | |
| background-color: #0056b3; | |
| } | |
| button { | |
| background-color: #28a745; | |
| color: white; | |
| padding: 15px 25px; | |
| border: none; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| font-size: 1.1em; | |
| width: 100%; | |
| transition: background-color 0.2s ease, transform 0.1s ease; | |
| } | |
| button:hover { | |
| background-color: #218838; | |
| transform: translateY(-2px); | |
| } | |
| button:disabled { | |
| background-color: #cccccc; | |
| cursor: not-allowed; | |
| } | |
| #loading { | |
| text-align: center; | |
| margin-top: 30px; | |
| font-weight: bold; | |
| color: #007bff; | |
| font-size: 1.1em; | |
| display: none; /* Hidden by default */ | |
| } | |
| #response-card { | |
| margin-top: 30px; | |
| padding: 20px; | |
| background-color: #f8fafd; | |
| border: 1px solid #d0e0f0; | |
| border-radius: 8px; | |
| min-height: 80px; | |
| box-shadow: inset 0 1px 3px rgba(0,0,0,0.05); | |
| } | |
| #response-card strong { | |
| color: #0056b3; | |
| display: block; | |
| margin-bottom: 10px; | |
| font-size: 1.1em; | |
| } | |
| #transcriptionOutput { | |
| white-space: pre-wrap; /* Preserve whitespace and line breaks */ | |
| word-wrap: break-word; /* Break long words */ | |
| font-size: 1.05em; | |
| color: #333; | |
| } | |
| .error { | |
| color: #dc3545; | |
| font-weight: bold; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Audio Transcription</h1> | |
| <form id="uploadForm"> | |
| <div class="form-group"> | |
| <label for="audioFile">Select an audio or video file:</label> | |
| <input type="file" id="audioFile" name="file" accept="audio/*,video/*"> | |
| </div> | |
| <button type="submit" id="submitButton">Transcribe Audio</button> | |
| </form> | |
| <div id="loading">Processing... Please wait, this might take a moment.</div> | |
| <div id="response-card"> | |
| <strong>Transcription Output:</strong> | |
| <span id="transcriptionOutput"></span> | |
| </div> | |
| </div> | |
| <script> | |
| const uploadForm = document.getElementById('uploadForm'); | |
| const audioFile = document.getElementById('audioFile'); | |
| const loadingDiv = document.getElementById('loading'); | |
| const transcriptionOutput = document.getElementById('transcriptionOutput'); | |
| const submitButton = document.getElementById('submitButton'); | |
| uploadForm.addEventListener('submit', async (event) => { | |
| event.preventDefault(); // Prevent default form submission | |
| transcriptionOutput.textContent = ''; // Clear previous output | |
| transcriptionOutput.classList.remove('error'); // Remove error styling | |
| loadingDiv.style.display = 'block'; // Show loading text | |
| submitButton.disabled = true; // Disable button during processing | |
| const file = audioFile.files[0]; | |
| if (!file) { | |
| transcriptionOutput.textContent = 'Please select an audio or video file.'; | |
| transcriptionOutput.classList.add('error'); | |
| loadingDiv.style.display = 'none'; | |
| submitButton.disabled = false; | |
| return; | |
| } | |
| const formData = new FormData(); | |
| formData.append('file', file); // 'file' must match the parameter name in your FastAPI endpoint | |
| try { | |
| // Use a relative path to the API endpoint | |
| const response = await fetch('/transcribefile/', { | |
| method: 'POST', | |
| body: formData, | |
| // fetch will automatically set the 'Content-Type' header correctly for FormData | |
| }); | |
| if (response.ok) { // Check if HTTP status is 2xx (e.g., 200 OK) | |
| const data = await response.json(); | |
| transcriptionOutput.textContent = data.rnnt_transcription || 'No transcription found.'; | |
| } else { | |
| // Handle API errors (e.g., 400 Bad Request, 500 Internal Server Error) | |
| let errorMessage = `Error: ${response.status} - ${response.statusText}`; | |
| try { | |
| const errorData = await response.json(); // FastAPI often returns JSON for errors | |
| if (errorData.detail) { | |
| errorMessage = `Error: ${response.status} - ${errorData.detail}`; | |
| } else { | |
| errorMessage = `Error: ${response.status} - ${JSON.stringify(errorData)}`; | |
| } | |
| } catch (e) { | |
| // If response is not JSON, use raw text | |
| const rawText = await response.text(); | |
| errorMessage = `Error: ${response.status} - ${rawText.substring(0, 200)}...`; // Limit length | |
| } | |
| transcriptionOutput.textContent = errorMessage; | |
| transcriptionOutput.classList.add('error'); | |
| console.error('API Error:', errorMessage); | |
| } | |
| } catch (error) { | |
| // Handle network errors (e.g., server unreachable) | |
| transcriptionOutput.textContent = `Network error: ${error.message}. Please check your connection or try again.`; | |
| transcriptionOutput.classList.add('error'); | |
| console.error('Fetch error:', error); | |
| } finally { | |
| loadingDiv.style.display = 'none'; // Hide loading text | |
| submitButton.disabled = false; // Re-enable button | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |