Spaces:

jorisvaneyghen
/

loop_maestro

Sleeping

App Files Files Community

jorisvaneyghen commited on Nov 12, 2025

Commit

ee88cac

1 Parent(s): b9af2f7

run python code (logits_to_bars) in browser

Browse files

Files changed (4) hide show

app.py +10 -10
index.html +4 -1
js/BeatDetector.js +66 -2
sw.js +5 -4

app.py CHANGED Viewed

@@ -7,7 +7,7 @@ from beat_this.model.postprocessor import Postprocessor
 from flask import Flask, request, jsonify, send_from_directory
 from flask_cors import CORS
 from madmom.features.downbeats import DBNDownBeatTrackingProcessor
-from statistics import median, mode
 from typing import List, Tuple
 # Add MIME types for JavaScript and WebAssembly
@@ -101,7 +101,7 @@ def postprocess_beats():
             return jsonify({"error": "Beat and downbeat logits must have the same length"}), 400
         # Process the logits to extract beat and downbeat timings
-        beats, downbeats = process_logits(beat_logits, downbeat_logits, type='dbn',
                    beats_per_bar=beats_per_bar,
                    min_bpm=min_bpm,
                    max_bpm=max_bpm)
@@ -156,14 +156,14 @@ def process_logits(beat_logits, downbeat_logits, type='minimal',
         Tuple of (beats, downbeats) where each is an array of timings in seconds
     """
     frames2beats = Postprocessor(type=type)
-    # if type == 'dbn' and (beats_per_bar != [3, 4] or min_bpm != 55.0 or max_bpm != 215.0):
-    #     frames2beats.dbb = DBNDownBeatTrackingProcessor(
-    #         beats_per_bar=beats_per_bar,
-    #         min_bpm=min_bpm,
-    #         max_bpm=max_bpm,
-    #         fps=50,
-    #         transition_lambda=100,
-    #     )
     # Convert numpy arrays to PyTorch tensors

 from flask import Flask, request, jsonify, send_from_directory
 from flask_cors import CORS
 from madmom.features.downbeats import DBNDownBeatTrackingProcessor
+from statistics import median, mode, StatisticsError
 from typing import List, Tuple
 # Add MIME types for JavaScript and WebAssembly
             return jsonify({"error": "Beat and downbeat logits must have the same length"}), 400
         # Process the logits to extract beat and downbeat timings
+        beats, downbeats = process_logits(beat_logits, downbeat_logits, type='minimal',
                    beats_per_bar=beats_per_bar,
                    min_bpm=min_bpm,
                    max_bpm=max_bpm)
         Tuple of (beats, downbeats) where each is an array of timings in seconds
     """
     frames2beats = Postprocessor(type=type)
+    if type == 'dbn' and (beats_per_bar != [3, 4] or min_bpm != 55.0 or max_bpm != 215.0):
+        frames2beats.dbb = DBNDownBeatTrackingProcessor(
+            beats_per_bar=beats_per_bar,
+            min_bpm=min_bpm,
+            max_bpm=max_bpm,
+            fps=50,
+            transition_lambda=100,
+        )
     # Convert numpy arrays to PyTorch tensors

index.html CHANGED Viewed

@@ -11,6 +11,7 @@
     <link rel="manifest" href="/site.webmanifest"/>
     <link rel="stylesheet" href="css/styles.css"/>
     <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
 </head>
 <body>
 <div class="container">
@@ -181,8 +182,10 @@
             // Show initialization progress
             this.showInitProgress();
             // Initialize the detector with progress updates
-            const success = await this.detector.init(this.updateInitProgress.bind(this));
             if (success) {
                 this.hideInitProgress();

     <link rel="manifest" href="/site.webmanifest"/>
     <link rel="stylesheet" href="css/styles.css"/>
     <script src="https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.29.0/full/pyodide.js"></script>
 </head>
 <body>
 <div class="container">
             // Show initialization progress
             this.showInitProgress();
+            let pyodide = await loadPyodide();
             // Initialize the detector with progress updates
+            const success = await this.detector.init(pyodide, this.updateInitProgress.bind(this));
             if (success) {
                 this.hideInitProgress();

js/BeatDetector.js CHANGED Viewed

@@ -7,12 +7,18 @@ export default class BeatDetector {
         this.borderSize = 6;
         this.serverUrl = ''; // Update this to your server URL
         this.isCancelled = false;
     }
-    async init(progressCallback = null) {
         try {
             if (progressCallback) await progressCallback(10, "Loading beat detection model...");
             // Load beat and mel spectrogram models (no postprocessor needed)
             this.beatSession = await ort.InferenceSession.create(
@@ -38,6 +44,39 @@ export default class BeatDetector {
         }
     }
     cancel() {
         this.isCancelled = true;
     }
@@ -200,7 +239,7 @@ export default class BeatDetector {
             await new Promise(resolve => setTimeout(resolve, 0));
             // Update progress
-            const progress = Math.floor( ((i+1) / chunks.length) * 95);
             if (progressCallback) await progressCallback(progress, `Detecting beats ...  ${i + 1}/${chunks.length}...`);
             // Extract predictions
@@ -239,6 +278,31 @@ export default class BeatDetector {
     // Use Python server for postprocessing
     async logits_to_bars(beatLogits, downbeatLogits, min_bpm, max_bpm, beats_per_bar) {
         try {
             const response = await fetch(`${this.serverUrl}/logits_to_bars`, {
                 method: 'POST',

         this.borderSize = 6;
         this.serverUrl = ''; // Update this to your server URL
         this.isCancelled = false;
+        this.pyodide = null;
     }
+    async init(pyodide, progressCallback = null) {
+        this.pyodide = pyodide;
         try {
             if (progressCallback) await progressCallback(10, "Loading beat detection model...");
+            await this.initializePyodide()
+            if (progressCallback) await progressCallback(25, "Loading beat detection model...");
             // Load beat and mel spectrogram models (no postprocessor needed)
             this.beatSession = await ort.InferenceSession.create(
         }
     }
+    async initializePyodide() {
+        try {
+            // Load required Python packages
+            await this.pyodide.loadPackage(["numpy", "micropip"]);
+            // Load the custom Python code
+            await this.loadPythonCode();
+            console.log("Pyodide initialized successfully");
+        } catch (error) {
+            console.error("Error initializing Pyodide:", error);
+        }
+    }
+    async loadPythonCode() {
+        try {
+            // Fetch the Python code from the URL
+            const response = await fetch('/logits_to_bars.py');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const pythonCode = await response.text();
+            // Load the Python code into Pyodide
+            await this.pyodide.runPythonAsync(pythonCode);
+            console.log('Python code loaded successfully from /logits_to_bars.py');
+        } catch (error) {
+            console.error('Error loading Python code:', error);
+        }
+    }
     cancel() {
         this.isCancelled = true;
     }
             await new Promise(resolve => setTimeout(resolve, 0));
             // Update progress
+            const progress = Math.floor(((i + 1) / chunks.length) * 95);
             if (progressCallback) await progressCallback(progress, `Detecting beats ...  ${i + 1}/${chunks.length}...`);
             // Extract predictions
     // Use Python server for postprocessing
     async logits_to_bars(beatLogits, downbeatLogits, min_bpm, max_bpm, beats_per_bar) {
+        // Call the Python function
+        const result = await this.pyodide.runPythonAsync(`
+import json
+beat_logits = ${JSON.stringify(beatLogits)}
+downbeat_logits = ${JSON.stringify(downbeatLogits)}
+beats_per_bar = ${beats_per_bar}
+min_bpm = ${min_bpm}
+max_bpm = ${max_bpm}
+result = logits_to_bars(beat_logits, downbeat_logits, beats_per_bar, min_bpm, max_bpm)
+json.dumps(result)
+`);
+        console.log(result);
+        // Parse and display the result
+        const resultObj = JSON.parse(result);
+        return {
+            bars: resultObj.bars || {},
+            estimated_bpm: resultObj.estimated_bpm || null,
+            detected_beats_per_bar: resultObj.detected_beats_per_bar || null
+        };
+    }
+    async logits_to_bars_online(beatLogits, downbeatLogits, min_bpm, max_bpm, beats_per_bar) {
         try {
             const response = await fetch(`${this.serverUrl}/logits_to_bars`, {
                 method: 'POST',

sw.js CHANGED Viewed

@@ -1,7 +1,8 @@
-// A version for your cache. Change this to force an update.
-const CACHE_NAME = 'my-pwa-cache-v1';
-// List of files to cache immediately during the install step.
 const urlsToCache = [
     '/',
     '/css/styles.css',
@@ -17,7 +18,7 @@ const urlsToCache = [
     '/web-app-manifest-512x512.png',
     '/log_mel_spec.onnx',
     '/beat_model.onnx',
-    'https://cdn.jsdelivr.net/npm/onnxruntime-web/dist/ort.min.js'
 ];

+// Use a version that you can update with each release
+const APP_VERSION = '0.1.1';
+const CACHE_NAME = `my-pwa-cache-${APP_VERSION}`;
+// List of files to cache
 const urlsToCache = [
     '/',
     '/css/styles.css',
     '/web-app-manifest-512x512.png',
     '/log_mel_spec.onnx',
     '/beat_model.onnx',
+    '/logits_to_bars.py',
 ];