Update app.py

app.py

@@ -43,134 +43,170 @@ 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, None
+        return "Please upload an audio file or record audio.", None
 
-    return vis_data, audio_output, vis_data
+    return vis_data, audio_output
 
 # 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>
+<canvas id="visualizerCanvas" style="width: 100%; height: 500px; background: #1a1a2e; border-radius: 16px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);"></canvas>
 
 <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%; }
+    canvas {
+        display: block;
+        max-width: 800px;
+        margin: 0 auto;
     }
 </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;
-            if (containerWidth === 0) {
-                console.warn('Visualizer container width is 0, retrying on resize');
-                return;
-            }
-            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);
-            }
+        const canvas = document.getElementById('visualizerCanvas');
+        const ctx = canvas.getContext('2d');
+        let audioElement = null;
+        let data = { frequencies: [], beat_times: [], volume: 0 };
+        let particles = [];
+        let lastBeatIndex = 0;
+
+        // Set canvas size to match its CSS size
+        function resizeCanvas() {
+            canvas.width = canvas.offsetWidth;
+            canvas.height = canvas.offsetHeight;
         }
+        resizeCanvas();
+        window.addEventListener('resize', resizeCanvas);
+
+        // Particle class for beat effects
+        class Particle {
+            constructor(x, y, radius, speedX, speedY) {
+                this.x = x;
+                this.y = y;
+                this.radius = radius;
+                this.speedX = speedX;
+                this.speedY = speedY;
+                this.alpha = 1;
+            }
 
-        // Initial creation of bars
-        createBars();
+            update() {
+                this.x += this.speedX;
+                this.y += this.speedY;
+                this.alpha -= 0.02;
+            }
 
-        // Reset visualization
-        function resetVisualization() {
-            bars.forEach(bar => {
-                bar.style.height = '0px';
-            });
-            audioWave.style.clipPath = `path('M0 ${visualizer.clientHeight / 2} L${visualizer.clientWidth} ${visualizer.clientHeight / 2} Z')`;
+            draw() {
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
+                ctx.fillStyle = `rgba(0, 180, 219, ${this.alpha})`;
+                ctx.fill();
+            }
         }
 
-        // Function to update visualization
-        function updateVisualization(data) {
-            if (!data || !data.frequencies || data.frequencies.length === 0) {
-                resetVisualization();
-                return;
-            }
-            const { frequencies } = data;
-            const maxFreq = Math.max(...frequencies);
-            if (maxFreq === 0) {
-                resetVisualization();
-                return;
+        // Spawn particles on beats
+        function spawnParticles(volume) {
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            const particleCount = Math.floor(volume / 2) + 5; // More particles for higher volume
+            for (let i = 0; i < particleCount; i++) {
+                const angle = Math.random() * Math.PI * 2;
+                const speed = Math.random() * 5 + 2;
+                const speedX = Math.cos(angle) * speed;
+                const speedY = Math.sin(angle) * speed;
+                const radius = Math.random() * 5 + 2;
+                particles.push(new Particle(centerX, centerY, radius, speedX, speedY));
             }
-            const freqCount = Math.min(frequencies.length, barCount);
-            for (let i = 0; i < freqCount; i++) {
-                const height = (frequencies[i] / maxFreq) * visualizer.clientHeight * 0.8;
-                bars[i].style.height = `${height}px`;
+        }
+
+        // Check for beats based on audio playback time
+        function checkBeats() {
+            if (!audioElement || !data.beat_times) return;
+            const currentTime = audioElement.currentTime;
+            for (let i = lastBeatIndex; i < data.beat_times.length; i++) {
+                if (currentTime >= data.beat_times[i]) {
+                    spawnParticles(data.volume);
+                    lastBeatIndex = i + 1;
+                } else {
+                    break;
+                }
             }
-            const wavePoints = frequencies.map((f, i) => [
-                (i / frequencies.length) * visualizer.clientWidth,
-                visualizer.clientHeight * (1 - (f / maxFreq))
-            ]);
-            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);
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+
+            // Clear canvas
+            ctx.fillStyle = 'rgba(26, 26, 46, 0.8)';
+            ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+            // Center of the canvas
+            const centerX = canvas.width / 2;
+            const centerY = canvas.height / 2;
+            const radius = Math.min(canvas.width, canvas.height) * 0.2;
+
+            // Draw glowing center circle (pulsing with volume)
+            const glowRadius = radius * (1 + data.volume / 100);
+            const gradient = ctx.createRadialGradient(centerX, centerY, 0, centerX, centerY, glowRadius);
+            gradient.addColorStop(0, `rgba(0, 180, 219, ${0.5 + data.volume / 200})`);
+            gradient.addColorStop(1, 'rgba(0, 180, 219, 0)');
+            ctx.beginPath();
+            ctx.arc(centerX, centerY, glowRadius, 0, Math.PI * 2);
+            ctx.fillStyle = gradient;
+            ctx.fill();
+
+            // Draw circular spectrum
+            const freqCount = data.frequencies.length;
+            const barCount = 100; // Number of bars in the circle
+            const angleStep = (Math.PI * 2) / barCount;
+            for (let i = 0; i < barCount; i++) {
+                const freqIndex = Math.floor((i / barCount) * freqCount);
+                const freqValue = freqIndex < freqCount ? data.frequencies[freqIndex] : 0;
+                const maxFreq = Math.max(...data.frequencies) || 1;
+                const barLength = (freqValue / maxFreq) * 100 + 20; // Scale bar length
+                const angle = i * angleStep;
+
+                const x1 = centerX + Math.cos(angle) * radius;
+                const y1 = centerY + Math.sin(angle) * radius;
+                const x2 = centerX + Math.cos(angle) * (radius + barLength);
+                const y2 = centerY + Math.sin(angle) * (radius + barLength);
+
+                ctx.beginPath();
+                ctx.moveTo(x1, y1);
+                ctx.lineTo(x2, y2);
+                ctx.strokeStyle = `hsl(${i * (360 / barCount)}, 80%, 50%)`;
+                ctx.lineWidth = 2;
+                ctx.stroke();
             }
-        });
 
-        window.addEventListener('resize', createBars);
+            // Update and draw particles
+            particles = particles.filter(p => p.alpha > 0);
+            particles.forEach(particle => {
+                particle.update();
+                particle.draw();
+            });
+
+            // Check for beats
+            checkBeats();
+        }
 
-        // Poll the hidden JSON output for updates
+        // Start animation
+        animate();
+
+        // Poll the visible JSON output for updates
         setInterval(() => {
-            const visDataOutput = document.querySelector('#vis_data_output textarea');
+            const visDataOutput = document.querySelector('div[label="Visualization Data"] textarea');
+            audioElement = document.querySelector('audio'); // Get the audio player
             if (visDataOutput && visDataOutput.value) {
                 try {
-                    const data = JSON.parse(visDataOutput.value);
-                    updateVisualization(data);
+                    data = JSON.parse(visDataOutput.value);
                 } catch (e) {
                     console.error('Error parsing visualization data:', e);
-                    resetVisualization();
+                    data = { frequencies: [], beat_times: [], volume: 0 };
                 }
             } else {
-                resetVisualization();
+                data = { frequencies: [], beat_times: [], volume: 0 };
+                lastBeatIndex = 0; // Reset beat index
             }
-        }, 500);
+        }, 100); // Poll more frequently for smoother animations
     });
 </script>
 """
@@ -178,7 +214,7 @@ visualizer_html = """
 # Gradio interface
 with gr.Blocks() as demo:
     gr.Markdown("# Advanced Audio Visualizer")
-    gr.Markdown("Upload an audio file or record audio to visualize frequencies and beats.")
+    gr.Markdown("Upload an audio file or record audio to visualize frequencies and beats with dynamic effects.")
 
     with gr.Row():
         audio_file = gr.Audio(sources=["upload"], type="filepath", label="Upload Audio")
@@ -188,9 +224,6 @@ 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")
@@ -201,12 +234,12 @@ with gr.Blocks() as demo:
     submit.click(
         fn=audio_visualizer,
         inputs=[audio_file, audio_record],
-        outputs=[vis_output, audio_output, vis_data_output]
+        outputs=[vis_output, audio_output]
     )
     clear.click(
-        fn=lambda: (None, None, None),
+        fn=lambda: (None, None),
         inputs=[],
-        outputs=[audio_file, audio_record, vis_data_output]
+        outputs=[audio_file, audio_record]
     )
 
 # Launch Gradio app