improved controls

app.py

@@ -1,12 +1,14 @@
-from madmom.features.downbeats import DBNDownBeatTrackingProcessor
+import logging
+import mimetypes
+import numpy as np
+import os
+import torch
 from beat_this.model.postprocessor import Postprocessor
 from flask import Flask, request, jsonify, send_from_directory
 from flask_cors import CORS
-import numpy as np
-import torch
-import logging
-import os
-import mimetypes
+from madmom.features.downbeats import DBNDownBeatTrackingProcessor
+from statistics import median, mode
+from typing import List, Tuple
 
 # Add MIME types for JavaScript and WebAssembly
 mimetypes.add_type('application/javascript', '.js')
@@ -109,10 +111,17 @@ def postprocess_beats():
         downbeats = downbeats.tolist() if isinstance(downbeats, np.ndarray) else downbeats
         beats = beats.tolist() if isinstance(beats, np.ndarray) else beats
 
+        estimated_bpm, detected_beats_per_bar, final_indices = analyze_beats(beats, downbeats)
+        print(f"estimated bpm: {estimated_bpm}, detected beats_per_bar: {detected_beats_per_bar}")
+        print(final_indices)
+
+
         bars = {i: beat for i, beat in enumerate(downbeats)}
 
         return jsonify({
-            "bars": bars
+            "bars": bars,
+            "estimated_bpm": estimated_bpm,
+            "detected_beats_per_bar": detected_beats_per_bar
         })
 
     except Exception as e:
@@ -168,5 +177,105 @@ def process_logits(beat_logits, downbeat_logits, type='minimal',
     return beats, downbeats
 
 
+
+def analyze_beats(beats: List[float], downbeats: List[float]) -> Tuple[float, float, List[int]]:
+    """
+    Analyze beats and downbeats to calculate BPM and clean outliers.
+
+    Args:
+        beats: List of beat positions in seconds
+        downbeats: List of downbeat positions in seconds (first beat of each bar)
+
+    Returns:
+        Tuple containing:
+        - estimated_bpm: Calculated BPM after removing outliers
+        - beats_per_bar: Median bar duration in seconds
+        - valid_bar_indices: Indices of bars that passed all filters
+    """
+
+    # Step 1: Calculate beats per bar and bar durations
+    bar_beats_count = []
+    bar_durations = []
+
+    for i in range(len(downbeats) - 1):
+        # Find beats between current downbeat and next downbeat
+        start_time = downbeats[i]
+        end_time = downbeats[i + 1]
+
+        # Count beats in this bar
+        beats_in_bar = len([beat for beat in beats if start_time <= beat < end_time])
+        bar_beats_count.append(beats_in_bar)
+
+        # Calculate bar duration
+        bar_duration = end_time - start_time
+        bar_durations.append(bar_duration)
+
+    # Handle the last bar (if we have at least one downbeat)
+    if len(downbeats) > 0:
+        last_start = downbeats[-1]
+        # For the last bar, count beats from last downbeat to end of beats list
+        last_beats = len([beat for beat in beats if beat >= last_start])
+        bar_beats_count.append(last_beats)
+
+        # Estimate last bar duration using average beat duration
+        if len(beats) > 1:
+            avg_beat_duration = (beats[-1] - beats[0]) / (len(beats) - 1)
+            last_duration = last_beats * avg_beat_duration
+        else:
+            last_duration = 0
+        bar_durations.append(last_duration)
+
+    # Step 2: Remove bars with outlier beats per bar
+    if bar_beats_count:
+        try:
+            # Find the most common beats per bar value
+            common_beats_per_bar = mode(bar_beats_count)
+
+            # Keep only bars with the common beats per bar
+            valid_bars_bp = []
+            valid_durations_bp = []
+            valid_indices_bp = []
+
+            for i, (beat_count, duration) in enumerate(zip(bar_beats_count, bar_durations)):
+                if beat_count == common_beats_per_bar:
+                    valid_bars_bp.append(beat_count)
+                    valid_durations_bp.append(duration)
+                    valid_indices_bp.append(i)
+        except StatisticsError:
+            # If no clear mode, use median
+            median_beats = median(bar_beats_count)
+            valid_bars_bp = [bc for bc in bar_beats_count if bc == median_beats]
+            valid_durations_bp = [bar_durations[i] for i, bc in enumerate(bar_beats_count) if bc == median_beats]
+            valid_indices_bp = [i for i, bc in enumerate(bar_beats_count) if bc == median_beats]
+    else:
+        return 0, 0, []
+
+    # Step 3: Remove bars with outlier durations
+    if valid_durations_bp:
+        median_duration = median(valid_durations_bp)
+
+        # Calculate reasonable bounds (e.g., ±25% of median)
+        lower_bound = median_duration * 0.75
+        upper_bound = median_duration * 1.25
+
+        final_durations = []
+        final_indices = []
+
+        for i, duration in zip(valid_indices_bp, valid_durations_bp):
+            if lower_bound <= duration <= upper_bound:
+                final_durations.append(duration)
+                final_indices.append(i)
+
+        # Step 4: Calculate average bar duration and convert to BPM
+        if final_durations:
+            avg_bar_duration = sum(final_durations) / len(final_durations)
+            estimated_bpm = 60.0 / (avg_bar_duration / common_beats_per_bar)  # BPM = 60 / (beat duration in seconds)
+
+            return estimated_bpm, common_beats_per_bar, final_indices
+
+    return 0, 0, []
+
+
+
 if __name__ == '__main__':
     app.run(debug=True)

index.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Music Beat Detection</title>
+    <title>Loop Maestro</title>
     <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
     <style>
         * {
@@ -166,34 +166,6 @@
             gap: 10px;
             margin-top: 15px;
         }
-
-        .play-button, .stop-button {
-            padding: 10px 20px;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-            font-weight: bold;
-            transition: all 0.3s;
-        }
-
-        .play-button {
-            background: #4CAF50;
-            color: white;
-        }
-
-        .play-button:hover {
-            background: #45a049;
-        }
-
-        .stop-button {
-            background: #f44336;
-            color: white;
-        }
-
-        .stop-button:hover {
-            background: #d32f2f;
-        }
-
         .form-group {
             margin-bottom: 15px;
         }
@@ -274,15 +246,6 @@
             border-bottom: none;
         }
 
-        .visualizer {
-            height: 100px;
-            background: rgba(0, 0, 0, 0.2);
-            border-radius: 10px;
-            margin-top: 20px;
-            position: relative;
-            overflow: hidden;
-        }
-
         .beat-marker {
             position: absolute;
             bottom: 0;
@@ -368,7 +331,7 @@
 <body>
     <div class="container">
         <header>
-            <h1>Music Beat Detection</h1>
+            <h1>Loop Maestro</h1>
             <p class="subtitle">Upload a song, detect beats and bars, then play specific sections</p>
         </header>
 
@@ -417,15 +380,6 @@
                     <button id="cancelButton" class="cancel-button">Cancel Processing</button>
                 </div>
 
-                <div class="controls">
-                    <button id="playButton" class="play-button" disabled>Play</button>
-                    <button id="stopButton" class="stop-button" disabled>Stop</button>
-                </div>
-
-                <div class="visualizer" id="visualizer">
-                    <div class="current-time" id="currentTime"></div>
-                </div>
-
                 <audio id="audioPlayer" class="audio-player" controls></audio>
             </div>
 
@@ -434,22 +388,14 @@
 
                 <div id="results" class="results">
                     <div class="results-grid">
-                        <div class="result-item">
-                            <div class="result-label">Song Duration</div>
-                            <div id="songDuration" class="result-value">--:--</div>
-                        </div>
-                        <div class="result-item">
-                            <div class="result-label">Detected Beats</div>
-                            <div id="beatCount" class="result-value">0</div>
-                        </div>
-                        <div class="result-item">
-                            <div class="result-label">Detected Downbeats</div>
-                            <div id="downbeatCount" class="result-value">0</div>
-                        </div>
                         <div class="result-item">
                             <div class="result-label">Estimated BPM</div>
                             <div id="estimatedBPM" class="result-value">--</div>
                         </div>
+                        <div class="result-item">
+                            <div class="result-label">Detected Beats Per Bar</div>
+                            <div id="detectedBeatsPerBar" class="result-value">--</div>
+                        </div>
                     </div>
 
                     <h3 style="margin-top: 20px;">Bar Detection Parameters</h3>
@@ -563,12 +509,6 @@
                     audioData[i] = (channel0[i] + channel1[i]) / 2;
                 }
 
-                // Output first 10 values
-                console.log('First 10 values of audioData:');
-                for (let i = 0; i < 10 && i < audioData.length; i++) {
-                    console.log(`[${i}]: ${audioData[i]}`);
-                }
-
                 // Use the ONNX model to compute log mel spectrogram
                 return await this.computeLogMelSpectrogramONNX(audioData);
             }
@@ -780,11 +720,20 @@
 
                     console.log(`Server postprocessing results: ${result.bars ? Object.keys(result.bars).length : 0} bars`);
 
-                    return result.bars || {};
+                    // Return bars along with estimated_bpm and detected_beats_per_bar
+                    return {
+                        bars: result.bars || {},
+                        estimated_bpm: result.estimated_bpm || null,
+                        detected_beats_per_bar: result.detected_beats_per_bar || null
+                    };
                 } catch (error) {
                     console.error("Error in server postprocessing:", error);
                     // Return empty object as fallback
-                    return {};
+                    return {
+                        bars: {},
+                        estimated_bpm: null,
+                        detected_beats_per_bar: null
+                    };
                 }
             }
 
@@ -875,6 +824,8 @@
                 this.audioContext = null;
                 this.logits = null;
                 this.bars = null;
+                this.estimatedBPM = null;
+                this.detectedBeatsPerBar = null;
                 this.isLooping = false;
                 this.audioSource = null;
                 this.isPlayingSection = false;
@@ -964,8 +915,6 @@
                 const uploadArea = document.getElementById('uploadArea');
                 const fileInput = document.getElementById('audioFile');
                 const cancelButton = document.getElementById('cancelButton');
-                const playButton = document.getElementById('playButton');
-                const stopButton = document.getElementById('stopButton');
                 const calculateBarsButton = document.getElementById('calculateBars');
                 const playSectionButton = document.getElementById('playSection');
                 const audioPlayer = document.getElementById('audioPlayer');
@@ -996,13 +945,10 @@
 
                 cancelButton.addEventListener('click', () => this.cancelProcessing());
 
-                playButton.addEventListener('click', () => this.playAudio());
-                stopButton.addEventListener('click', () => this.stopAudio());
-
                 calculateBarsButton.addEventListener('click', () => this.calculateBars());
                 playSectionButton.addEventListener('click', () => this.playSection());
 
-                audioPlayer.addEventListener('timeupdate', () => this.updateVisualizer());
+                audioPlayer.addEventListener('timeupdate', () => this.checkLoop());
                 audioPlayer.addEventListener('ended', () => this.handleAudioEnded());
 
                 loopSectionCheckbox.addEventListener('change', (e) => {
@@ -1089,10 +1035,14 @@
                         updateProgress
                     );
 
+                    // Automatically run logits_to_bars after preprocessing is complete
+                    await updateProgress(95, 'Running bar detection...');
+                    await this.runAutomaticBarDetection();
+
                     // Update UI with results
                     this.updateResultsUI();
 
-                    // Enable the calculate bars button
+                    // Enable the calculate bars button for manual recalculation
                     calculateBarsButton.disabled = false;
 
                     // Show results section
@@ -1125,25 +1075,41 @@
                 }
             }
 
-            updateResultsUI() {
-                // Update song duration
-                const songDuration = document.getElementById('songDuration');
-                songDuration.textContent = this.formatTime(this.audioBuffer.duration);
+            async runAutomaticBarDetection() {
+                const minBPM = parseFloat(document.getElementById('minBPM').value);
+                const maxBPM = parseFloat(document.getElementById('maxBPM').value);
+                const beatsPerBar = parseInt(document.getElementById('beatsPerBar').value);
 
-                // Update beat and downbeat counts
-                const beatCount = document.getElementById('beatCount');
-                const downbeatCount = document.getElementById('downbeatCount');
+                try {
+                    const result = await this.detector.logits_to_bars(
+                        this.logits.prediction_beat,
+                        this.logits.prediction_downbeat,
+                        minBPM,
+                        maxBPM,
+                        beatsPerBar
+                    );
 
-                // Count beats and downbeats (you might need to adjust this based on your logits)
-                const beats = this.logits.prediction_beat.filter(val => val > 1).length;
-                const downbeats = this.logits.prediction_downbeat.filter(val => val > 1).length;
+                    this.bars = result.bars;
+                    this.estimatedBPM = result.estimated_bpm;
+                    this.detectedBeatsPerBar = result.detected_beats_per_bar;
 
-                beatCount.textContent = beats;
-                downbeatCount.textContent = downbeats;
+                    console.log(`Automatic bar detection: BPM=${this.estimatedBPM}, BeatsPerBar=${this.detectedBeatsPerBar}`);
+                } catch (error) {
+                    console.error('Error in automatic bar detection:', error);
+                    // Set default values if detection fails
+                    this.estimatedBPM = null;
+                    this.detectedBeatsPerBar = null;
+                }
+            }
+
+            updateResultsUI() {
+                // Update estimated BPM
+                const estimatedBPM = document.getElementById('estimatedBPM');
+                estimatedBPM.textContent = this.estimatedBPM !== null ? this.estimatedBPM.toFixed(1) : '--';
 
-                // Enable play button
-                document.getElementById('playButton').disabled = false;
-                document.getElementById('stopButton').disabled = false;
+                // Update detected beats per bar
+                const detectedBeatsPerBar = document.getElementById('detectedBeatsPerBar');
+                detectedBeatsPerBar.textContent = this.detectedBeatsPerBar !== null ? this.detectedBeatsPerBar : '--';
 
                 // Set up audio player
                 const audioPlayer = document.getElementById('audioPlayer');
@@ -1151,8 +1117,12 @@
                 const url = URL.createObjectURL(blob);
                 audioPlayer.src = url;
 
-                // Update visualizer
-                this.updateVisualizer();
+                // Display bars if available
+                if (this.bars && Object.keys(this.bars).length > 0) {
+                    this.displayBars();
+                    document.getElementById('barsResults').style.display = 'block';
+                }
+
             }
 
             async calculateBars() {
@@ -1170,7 +1140,7 @@
                 calculateBarsButton.textContent = 'Calculating...';
 
                 try {
-                    this.bars = await this.detector.logits_to_bars(
+                    const result = await this.detector.logits_to_bars(
                         this.logits.prediction_beat,
                         this.logits.prediction_downbeat,
                         minBPM,
@@ -1178,8 +1148,19 @@
                         beatsPerBar
                     );
 
+                    this.bars = result.bars;
+                    this.estimatedBPM = result.estimated_bpm;
+                    this.detectedBeatsPerBar = result.detected_beats_per_bar;
+
                     this.displayBars();
 
+                    // Update the displayed BPM and beats per bar
+                    const estimatedBPM = document.getElementById('estimatedBPM');
+                    estimatedBPM.textContent = this.estimatedBPM !== null ? this.estimatedBPM.toFixed(1) : '--';
+
+                    const detectedBeatsPerBar = document.getElementById('detectedBeatsPerBar');
+                    detectedBeatsPerBar.textContent = this.detectedBeatsPerBar !== null ? this.detectedBeatsPerBar : '--';
+
                     // Show bars results section
                     document.getElementById('barsResults').style.display = 'block';
 
@@ -1276,15 +1257,8 @@
                 }
             }
 
-            updateVisualizer() {
+            checkLoop() {
                 const audioPlayer = document.getElementById('audioPlayer');
-                const currentTime = document.getElementById('currentTime');
-                const visualizer = document.getElementById('visualizer');
-
-                if (audioPlayer.duration > 0) {
-                    const progress = (audioPlayer.currentTime / audioPlayer.duration) * 100;
-                    currentTime.style.left = `${progress}%`;
-                }
 
                 // If playing a section and reached the end, loop if enabled
                 if (this.isPlayingSection && audioPlayer.currentTime >= this.sectionEndTime) {