Update app.py

app.py

@@ -42,9 +42,113 @@ def audio_visualizer(audio_file, audio_record):
     elif audio_record:
         vis_data, audio_output = process_audio(audio_record)
     else:
-        return "Please upload an audio file or record audio.", None
+        return "Please upload an audio file or record audio.", None, None
 
-    return vis_data, audio_output
+    return vis_data, audio_output, vis_data
+
+# Custom CSS and JavaScript for the visualizer
+visualizer_html = """
+<div class="visualizer-container" id="visualizer" style="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);">
+    <div class="audio-wave" id="audioWave" style="position: absolute; bottom: 0; left: 0; width: 100%; height: 120px; background: linear-gradient(to top, rgba(0, 180, 219, 0.2), transparent);"></div>
+    <div class="loading-spinner" id="loadingSpinner" style="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;"></div>
+</div>
+
+<style>
+    .visualizer-container { 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);
+    }
+    @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>
+
+<script>
+    document.addEventListener('DOMContentLoaded', () => {
+        const visualizer = document.getElementById('visualizer');
+        const audioWave = document.getElementById('audioWave');
+        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();
+
+        // Function to update visualization
+        function updateVisualization(data) {
+            if (!data || !data.frequencies) return;
+            const { frequencies } = data;
+            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`;
+            }
+            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;
+        }
+
+        // Listen for updates from Gradio
+        window.addEventListener('message', (event) => {
+            if (event.data && event.data.vis_data) {
+                updateVisualization(event.data.vis_data);
+            }
+        });
+
+        window.addEventListener('resize', createBars);
+
+        // Poll the hidden JSON output for updates
+        setInterval(() => {
+            const visDataOutput = document.querySelector('#vis_data_output textarea');
+            if (visDataOutput && visDataOutput.value) {
+                try {
+                    const data = JSON.parse(visDataOutput.value);
+                    updateVisualization(data);
+                } catch (e) {
+                    console.error('Error parsing visualization data:', e);
+                }
+            }
+        }, 500);
+    });
+</script>
+"""
 
 # Gradio interface
 with gr.Blocks() as demo:
@@ -59,14 +163,20 @@ with gr.Blocks() as demo:
         vis_output = gr.JSON(label="Visualization Data")
         audio_output = gr.Audio(label="Audio Playback", type="filepath")
 
+    # Hidden output to pass data to JavaScript
+    vis_data_output = gr.JSON(elem_id="vis_data_output", visible=False)
+
     with gr.Row():
         submit = gr.Button("Visualize")
         clear = gr.Button("Clear")
 
+    # Visualizer section
+    gr.HTML(visualizer_html)
+
     submit.click(
         fn=audio_visualizer,
         inputs=[audio_file, audio_record],
-        outputs=[vis_output, audio_output]
+        outputs=[vis_output, audio_output, vis_data_output]
     )
     clear.click(
         fn=lambda: (None, None),