Spaces:

omar1232
/

Advanced_Audio_Visualizer

Sleeping

App Files Files Community

omar1232 commited on Apr 23, 2025

Commit

489a593

1 Parent(s): cd95b46

Add index.html and ensure all files are included

Browse files

Files changed (3) hide show

app.py +117 -0
index.html +162 -0
requirements.txt +0 -0

app.py CHANGED Viewed

	@@ -0,0 +1,117 @@

+import gradio as gr
+import numpy as np
+import librosa
+import soundfile as sf
+import json
+import websocket
+import threading
+import time
+from io import BytesIO
+# Global variables for WebSocket communication
+ws = None
+clients = []
+# WebSocket server to send visualization data to frontend
+def start_websocket_server():
+    def on_open(ws):
+        print("WebSocket server opened")
+        clients.append(ws)
+    def on_close(ws):
+        print("WebSocket server closed")
+        clients.remove(ws)
+    def on_message(ws, message):
+        print(f"Received: {message}")
+    global ws
+    ws = websocket.WebSocketApp("ws://localhost:8765",
+                                on_open=on_open,
+                                on_message=on_message,
+                                on_close=on_close)
+    threading.Thread(target=ws.run_forever, daemon=True).start()
+# Process audio file or recording
+def process_audio(audio_input, sample_rate=44100):
+    # Handle Gradio audio input (tuple of (sample_rate, numpy_array))
+    if isinstance(audio_input, tuple):
+        sr, audio_data = audio_input
+    else:
+        # Load audio file
+        audio_data, sr = librosa.load(audio_input, sr=sample_rate)
+    # Extract frequency data (spectrogram)
+    fft = np.abs(librosa.stft(audio_data))
+    freq_data = np.mean(fft, axis=1)[:200]  # Average across time, take first 200 bins
+    # Beat detection
+    tempo, beats = librosa.beat.beat_track(y=audio_data, sr=sr)
+    beat_times = librosa.frames_to_time(beats, sr=sr)
+    # Prepare visualization data
+    vis_data = {
+        "frequencies": freq_data.tolist(),
+        "beat_times": beat_times.tolist(),
+        "volume": float(np.mean(np.abs(audio_data)) * 100)
+    }
+    # Send data to connected WebSocket clients
+    if ws and clients:
+        for client in clients:
+            try:
+                client.send(json.dumps(vis_data))
+            except:
+                pass
+    return vis_data, audio_data, sr
+# Gradio interface function
+def audio_visualizer(audio_file, audio_record):
+    if audio_file:
+        vis_data, audio_data, sr = process_audio(audio_file)
+    elif audio_record:
+        vis_data, audio_data, sr = process_audio(audio_record)
+    else:
+        return "Please upload an audio file or record audio."
+    # Save audio to a temporary file for playback
+    temp_audio = BytesIO()
+    sf.write(temp_audio, audio_data, sr, format='wav')
+    temp_audio.seek(0)
+    return vis_data, temp_audio
+# Start WebSocket server
+start_websocket_server()
+# 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.")
+    with gr.Row():
+        audio_file = gr.Audio(sources=["upload"], type="filepath", label="Upload Audio")
+        audio_record = gr.Audio(sources=["microphone"], type="numpy", label="Record Audio")
+    with gr.Row():
+        vis_output = gr.JSON(label="Visualization Data")
+        audio_output = gr.Audio(label="Audio Playback", type="filepath")
+    with gr.Row():
+        submit = gr.Button("Visualize")
+        clear = gr.Button("Clear")
+    submit.click(
+        fn=audio_visualizer,
+        inputs=[audio_file, audio_record],
+        outputs=[vis_output, audio_output]
+    )
+    clear.click(
+        fn=lambda: (None, None),
+        inputs=[],
+        outputs=[audio_file, audio_record]
+    )
+# Launch Gradio app
+demo.launch()

index.html ADDED Viewed

	@@ -0,0 +1,162 @@

+<!DOCTYPE html>
+<html lang="en">
+<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>

requirements.txt ADDED Viewed

File without changes