Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Audio Transcriptor</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| background: #1a1a2e; | |
| color: #fff; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| background: #16213e; | |
| padding: 20px; | |
| border-radius: 10px; | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); | |
| } | |
| h1 { | |
| margin-bottom: 20px; | |
| } | |
| #language, #transcription { | |
| margin: 10px 0; | |
| padding: 10px; | |
| background: #0f172a; | |
| border-radius: 5px; | |
| } | |
| #downloadLink { | |
| display: inline-block; | |
| margin-top: 10px; | |
| padding: 10px 20px; | |
| background: #00b4db; | |
| color: #fff; | |
| text-decoration: none; | |
| border-radius: 5px; | |
| } | |
| #downloadLink:hover { | |
| background: #0083b0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Audio Transcriptor</h1> | |
| <p>Visit the Gradio app to upload or record audio: <a href="https://huggingface.co/spaces/omar1232/Advanced_Audio_Visualizer" target="_blank">Link</a></p> | |
| <div id="language">Detected Language: Waiting...</div> | |
| <div id="transcription">Transcription: Waiting...</div> | |
| <a id="downloadLink" style="display: none;" href="#" download>Download Transcription</a> | |
| </div> | |
| <script> | |
| async function fetchTranscription() { | |
| try { | |
| const response = await fetch('https://huggingface.co/spaces/omar1232/Advanced_Audio_Visualizer/api/predict', { | |
| method: 'POST', | |
| headers: { 'Content-Type': 'application/json' }, | |
| body: JSON.stringify({ fn_index: 0, data: [null, null] }) // Adjust fn_index based on Gradio API | |
| }); | |
| const result = await response.json(); | |
| const [language, transcription, textFile] = result.data; | |
| // Update UI | |
| document.getElementById('language').textContent = `Detected Language: ${language || 'Unknown'}`; | |
| document.getElementById('transcription').textContent = `Transcription: ${transcription || 'No transcription available'}`; | |
| // Update download link | |
| if (textFile) { | |
| const downloadLink = document.getElementById('downloadLink'); | |
| downloadLink.href = textFile; | |
| downloadLink.style.display = 'inline-block'; | |
| downloadLink.textContent = 'Download Transcription'; | |
| } | |
| } catch (error) { | |
| console.error('Error fetching transcription:', error); | |
| } | |
| } | |
| // Poll every 1 second | |
| setInterval(fetchTranscription, 1000); | |
| </script> | |
| </body> | |
| </html> |