omar1232/Advanced_Audio_Visualizer

1<!DOCTYPE html>2<html lang="en">3<head>4    <meta charset="UTF-8">5    <meta name="viewport" content="width=device-width, initial-scale=1.0">6    <title>Audio Transcriptor</title>7    <style>8        body {9            font-family: Arial, sans-serif;10            background: #1a1a2e;11            color: #fff;12            text-align: center;13            padding: 20px;14        }15        .container {16            max-width: 600px;17            margin: 0 auto;18            background: #16213e;19            padding: 20px;20            border-radius: 10px;21            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);22        }23        h1 {24            margin-bottom: 20px;25        }26        #language, #transcription {27            margin: 10px 0;28            padding: 10px;29            background: #0f172a;30            border-radius: 5px;31        }32        #downloadLink {33            display: inline-block;34            margin-top: 10px;35            padding: 10px 20px;36            background: #00b4db;37            color: #fff;38            text-decoration: none;39            border-radius: 5px;40        }41        #downloadLink:hover {42            background: #0083b0;43        }44    </style>45</head>46<body>47    <div class="container">48        <h1>Audio Transcriptor</h1>49        <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>50        <div id="language">Detected Language: Waiting...</div>51        <div id="transcription">Transcription: Waiting...</div>52        <a id="downloadLink" style="display: none;" href="#" download>Download Transcription</a>53    </div>54 55    <script>56        async function fetchTranscription() {57            try {58                const response = await fetch('https://huggingface.co/spaces/omar1232/Advanced_Audio_Visualizer/api/predict', {59                    method: 'POST',60                    headers: { 'Content-Type': 'application/json' },61                    body: JSON.stringify({ fn_index: 0, data: [null, null] }) // Adjust fn_index based on Gradio API62                });63                const result = await response.json();64                const [language, transcription, textFile] = result.data;65 66                // Update UI67                document.getElementById('language').textContent = `Detected Language: ${language || 'Unknown'}`;68                document.getElementById('transcription').textContent = `Transcription: ${transcription || 'No transcription available'}`;69                70                // Update download link71                if (textFile) {72                    const downloadLink = document.getElementById('downloadLink');73                    downloadLink.href = textFile;74                    downloadLink.style.display = 'inline-block';75                    downloadLink.textContent = 'Download Transcription';76                }77            } catch (error) {78                console.error('Error fetching transcription:', error);79            }80        }81 82        // Poll every 1 second83        setInterval(fetchTranscription, 1000);84    </script>85</body>86</html>