Update app.py

app.py

@@ -2,7 +2,8 @@ import gradio as gr
 import numpy as np
 import librosa
 import soundfile as sf
-from io import BytesIO
+import tempfile
+import os
 
 # Process audio file or recording
 def process_audio(audio_input, sample_rate=44100):
@@ -28,12 +29,12 @@ def process_audio(audio_input, sample_rate=44100):
         "volume": float(np.mean(np.abs(audio_data)) * 100)
     }
 
-    # Save audio to a temporary file for playback
-    temp_audio = BytesIO()
-    sf.write(temp_audio, audio_data, sr, format='wav')
-    temp_audio.seek(0)
+    # Save audio to a temporary file on disk
+    with tempfile.NamedTemporaryFile(delete=False, suffix=".wav") as temp_file:
+        sf.write(temp_file.name, audio_data, sr, format='wav')
+        temp_file_path = temp_file.name
 
-    return vis_data, temp_audio
+    return vis_data, temp_file_path
 
 # Gradio interface function
 def audio_visualizer(audio_file, audio_record):
@@ -90,6 +91,10 @@ visualizer_html = """
             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');
@@ -102,20 +107,37 @@ visualizer_html = """
             }
         }
 
+        // Initial creation of bars
         createBars();
 
+        // 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')`;
+        }
+
         // Function to update visualization
         function updateVisualization(data) {
-            if (!data || !data.frequencies) return;
+            if (!data || !data.frequencies || data.frequencies.length === 0) {
+                resetVisualization();
+                return;
+            }
             const { frequencies } = data;
+            const maxFreq = Math.max(...frequencies);
+            if (maxFreq === 0) {
+                resetVisualization();
+                return;
+            }
             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;
+                const height = (frequencies[i] / maxFreq) * 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))
+                visualizer.clientHeight * (1 - (f / maxFreq))
             ]);
             let wavePath = `path('M0 ${visualizer.clientHeight / 2} `;
             wavePoints.forEach(([x, y]) => {
@@ -143,7 +165,10 @@ visualizer_html = """
                     updateVisualization(data);
                 } catch (e) {
                     console.error('Error parsing visualization data:', e);
+                    resetVisualization();
                 }
+            } else {
+                resetVisualization();
             }
         }, 500);
     });
@@ -179,9 +204,9 @@ with gr.Blocks() as demo:
         outputs=[vis_output, audio_output, vis_data_output]
     )
     clear.click(
-        fn=lambda: (None, None),
+        fn=lambda: (None, None, None),
         inputs=[],
-        outputs=[audio_file, audio_record]
+        outputs=[audio_file, audio_record, vis_data_output]
     )
 
 # Launch Gradio app