Spaces:

omar1232
/

Advanced_Audio_Visualizer

Sleeping

App Files Files Community

omar1232 commited on Apr 23, 2025

Commit

ea2069e

verified ·

1 Parent(s): 4c13763

Update index.html

Browse files

Files changed (1) hide show

index.html +63 -139

index.html CHANGED Viewed

@@ -3,160 +3,84 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Advanced Audio Visualizer with Gradio</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-    <script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
     <style>
-        .visualizer-container {
-            position: relative;
-            width: 100%;
-            height: 500px;
-            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
-            border-radius: 16px;
-            overflow: hidden;
-            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
-            transition: background 0.5s;
         }
-        .bar {
-            position: absolute;
-            bottom: 0;
-            background: linear-gradient(to top, #00b4db, #0083b0);
-            border-radius: 6px 6px 0 0;
-            transition: height 0.1s cubic-bezier(0.4, 0, 0.2, 1);
         }
-        .audio-wave {
-            position: absolute;
-            bottom: 0;
-            left: 0;
-            width: 100%;
-            height: 120px;
-            background: linear-gradient(to top, rgba(0, 180, 219, 0.2), transparent);
-            transition: clip-path 0.1s;
         }
-        .loading-spinner {
-            display: none;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            border: 4px solid rgba(255,255,255,0.3);
-            border-top: 4px solid #00b4db;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            animation: spin 1s linear infinite;
         }
-        @keyframes spin {
-            0% { transform: translate(-50%, -50%) rotate(0deg); }
-            100% { transform: translate(-50%, -50%) rotate(360deg); }
         }
-        .bg-animated {
-            animation: gradient 15s ease infinite;
-            background-size: 400% 400%;
-        }
-        @keyframes gradient {
-            0% { background-position: 0% 50%; }
-            50% { background-position: 100% 50%; }
-            100% { background-position: 0% 50%; }
         }
     </style>
 </head>
-<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center justify-center p-6">
-    <div class="max-w-6xl w-full">
-        <h1 class="text-5xl font-extrabold text-center bg-gradient-to-r from-cyan-400 to-pink-500 bg-clip-text text-transparent mb-6">
-            Advanced Audio Visualizer
-        </h1>
-        <p class="text-gray-300 text-center mb-8 font-medium">Visualize audio frequencies using Gradio</p>
-        <div class="visualizer-container mb-8 bg-animated" id="visualizer" style="background: linear-gradient(135deg, #1a1a2e, #16213e, #2a2a4e, #1a1a2e);">
-            <div class="audio-wave" id="audioWave"></div>
-            <div class="loading-spinner" id="loadingSpinner"></div>
-        </div>
-        <div class="mt-6">
-            <iframe src="https://huggingface.co/spaces/omar1232/Advanced_Audio_Visualizer" width="100%" height="500" frameborder="0"></iframe>
-        </div>
     </div>
     <script>
-        document.addEventListener('DOMContentLoaded', () => {
-            const visualizer = document.getElementById('visualizer');
-            const audioWave = document.getElementById('audioWave');
-            const loadingSpinner = document.getElementById('loadingSpinner');
-            let bars = [];
-            const barCount = 80;
-            const barSpacing = 2;
-            // Create bars
-            function createBars() {
-                visualizer.querySelectorAll('.bar').forEach(bar => bar.remove());
-                bars = [];
-                const containerWidth = visualizer.clientWidth;
-                const barWidth = (containerWidth / barCount) - barSpacing;
-                for (let i = 0; i < barCount; i++) {
-                    const bar = document.createElement('div');
-                    bar.className = 'bar';
-                    bar.style.left = `${i * (barWidth + barSpacing)}px`;
-                    bar.style.width = `${barWidth}px`;
-                    bar.style.height = '0px';
-                    visualizer.appendChild(bar);
-                    bars.push(bar);
-                }
-            }
-            createBars();
-            // Poll Gradio API for visualization data
-            setInterval(async () => {
-                try {
-                    // Fetch the latest visualization data from Gradio's JSON output
-                    const response = await fetch('https://huggingface.co/spaces/omar1232/Advanced_Audio_Visualizer/api/predict', {
-                        method: 'POST',
-                        headers: { 'Content-Type': 'application/json' },
-                        body: JSON.stringify({ data: [] }) // Adjust based on Gradio API
-                    });
-                    const data = await response.json();
-                    if (data && data.data && data.data[0]) {
-                        updateVisualization(data.data[0]); // First output is JSON
-                    }
-                } catch (error) {
-                    console.error('Error fetching data:', error);
-                }
-            }, 500); // Poll every 500ms
-            function updateVisualization(data) {
-                const { frequencies } = data;
-                // Update bars
-                const freqCount = Math.min(frequencies.length, barCount);
-                for (let i = 0; i < freqCount; i++) {
-                    const height = (frequencies[i] / Math.max(...frequencies)) * visualizer.clientHeight * 0.8;
-                    bars[i].style.height = `${height}px`;
                 }
-                // Update waveform
-                const wavePoints = frequencies.map((f, i) => [
-                    (i / frequencies.length) * visualizer.clientWidth,
-                    visualizer.clientHeight * (1 - f / Math.max(...frequencies))
-                ]);
-                let wavePath = `path('M0 ${visualizer.clientHeight / 2} `;
-                wavePoints.forEach(([x, y]) => {
-                    wavePath += `L${x} ${y} `;
-                });
-                wavePath += `L${visualizer.clientWidth} ${visualizer.clientHeight / 2} Z')`;
-                audioWave.style.clipPath = wavePath;
             }
-            window.addEventListener('resize', createBars);
-        });
     </script>
 </body>
 </html>

 <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 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>