move styles/js to separate files; icons & manifest

README.md

@@ -6,7 +6,7 @@ colorTo: gray
 sdk: docker
 pinned: false
 license: mit
-short_description: Upload a song, detect beats and bars, then loop bars
+short_description: Upload a song, detect beats and bars, then loop any part
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
@@ -16,4 +16,10 @@ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-
 ```
 python app.py
 ```
-open in browser: http://localhost:5000/
+open in browser: http://localhost:5000/
+
+## Todo's
+- Use wasm for logits to bars
+- Upbeat (0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5)
+- Countdown option
+- About info popup

css/styles.css

@@ -0,0 +1,467 @@
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+}
+
+body {
+    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
+    color: white;
+    min-height: 100vh;
+    padding: 20px;
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+}
+
+header {
+    text-align: center;
+    margin-bottom: 30px;
+    padding: 20px;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 15px;
+    backdrop-filter: blur(10px);
+}
+
+h1 {
+    font-size: 2.5rem;
+    margin-bottom: 10px;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.subtitle {
+    font-size: 1.2rem;
+    opacity: 0.9;
+}
+
+.app-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 20px;
+}
+
+@media (max-width: 900px) {
+    .app-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+.card {
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 15px;
+    padding: 20px;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.card h2 {
+    margin-bottom: 15px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.upload-area {
+    border: 2px dashed rgba(255, 255, 255, 0.3);
+    border-radius: 10px;
+    padding: 40px 20px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    margin-bottom: 20px;
+}
+
+.upload-area:hover, .upload-area.dragover {
+    background: rgba(255, 255, 255, 0.1);
+    border-color: rgba(255, 255, 255, 0.5);
+}
+
+.upload-area.disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.upload-icon {
+    font-size: 48px;
+    margin-bottom: 10px;
+}
+
+.file-input {
+    display: none;
+}
+
+.loading {
+    margin-top: 20px;
+}
+
+.progress-bar {
+    height: 20px;
+    background: rgba(255, 255, 255, 0.1);
+    border-radius: 10px;
+    overflow: hidden;
+    margin-bottom: 10px;
+}
+
+.progress-fill {
+    height: 100%;
+    width: 0%;
+    background: linear-gradient(90deg, #4CAF50, #45a049);
+    border-radius: 10px;
+    transition: width 0.3s ease;
+}
+
+.progress-text {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.9rem;
+}
+
+.cancel-button {
+    background: #f44336;
+    color: white;
+    border: none;
+    padding: 8px 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    margin-top: 10px;
+    transition: background 0.3s;
+}
+
+.cancel-button:hover {
+    background: #d32f2f;
+}
+
+.server-status {
+    padding: 10px;
+    border-radius: 5px;
+    margin-bottom: 15px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.server-online {
+    background: rgba(76, 175, 80, 0.3);
+    border: 1px solid rgba(76, 175, 80, 0.5);
+}
+
+.server-offline {
+    background: rgba(255, 152, 0, 0.3);
+    border: 1px solid rgba(255, 152, 0, 0.5);
+}
+
+.form-group {
+    margin-bottom: 15px;
+}
+
+label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+}
+
+input[type="number"] {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.1);
+    color: white;
+}
+
+input[type="checkbox"] {
+    margin-right: 8px;
+}
+
+.bar-selection {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+    margin-bottom: 15px;
+}
+
+.bar-selection .form-group {
+    margin-bottom: 0;
+}
+
+#player-container {
+    height: auto;
+}
+
+.bar-selection input {
+    flex: 1;
+}
+
+.results {
+    display: none;
+    margin-top: 20px;
+}
+
+.results-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+}
+
+.result-item {
+    background: rgba(0, 0, 0, 0.2);
+    padding: 10px;
+    border-radius: 5px;
+}
+
+.result-label {
+    font-size: 0.9rem;
+    opacity: 0.8;
+}
+
+.result-value {
+    font-size: 1.1rem;
+    font-weight: bold;
+}
+
+.bars-list {
+    max-height: 200px;
+    overflow-y: auto;
+    margin-top: 10px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 5px;
+    padding: 10px;
+}
+
+.bar-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.bar-item:last-child {
+    border-bottom: none;
+}
+
+
+.section-player {
+    margin-top: 20px;
+    padding-top: 15px;
+    border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.action-button {
+    background: #2196F3;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 5px;
+    cursor: pointer;
+    font-weight: bold;
+    transition: background 0.3s;
+    margin-top: 10px;
+}
+
+.action-button:hover {
+    background: #1976D2;
+}
+
+.action-button:disabled {
+    background: rgba(255, 255, 255, 0.2);
+    cursor: not-allowed;
+}
+
+.init-progress {
+    margin-top: 20px;
+    padding: 15px;
+    background: rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+}
+
+.init-complete {
+    background: rgba(76, 175, 80, 0.2);
+    border: 1px solid rgba(76, 175, 80, 0.5);
+    padding: 10px;
+    border-radius: 5px;
+    text-align: center;
+    margin-top: 15px;
+    display: none;
+}
+
+/*Styles AudioStretchPlayer*/
+.audio-stretch-player {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    padding: 15px;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    color: white;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    overflow: visible;
+}
+
+.player-header {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    margin-bottom: 15px;
+    padding-bottom: 12px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    flex-shrink: 0;
+}
+
+.play-stop-btn {
+    background: #2196F3;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background 0.3s;
+    font-size: 16px;
+    flex-shrink: 0;
+}
+
+.play-stop-btn:hover {
+    background: #1976D2;
+}
+
+.playback-slider-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+}
+
+.playback-slider {
+    flex: 1;
+    height: 4px;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.2);
+    outline: none;
+    -webkit-appearance: none;
+    min-width: 0;
+}
+
+.playback-slider::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #2196F3;
+    cursor: pointer;
+    border: 2px solid white;
+}
+
+.playback-slider::-moz-range-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: #2196F3;
+    cursor: pointer;
+    border: 2px solid white;
+}
+
+.time-display {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.8);
+    min-width: 45px;
+    text-align: center;
+    flex-shrink: 0;
+}
+
+
+.controls-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column; /* <-- stack rows vertically */
+    align-items: flex-start;
+    gap: 12px;              /* spacing between rows */
+    width: 100%;
+}
+
+.control-row {
+    display: flex;
+    flex-direction: column; /* Label on line 1, slider+number on line 2 */
+    gap: 6px;
+    width: 100%;
+}
+
+.control-label {
+    font-size: 0.8rem;
+    color: rgba(255, 255, 255, 0.8);
+}
+
+.control-input-line {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+}
+
+.control-slider {
+    flex: 1;
+    height: 4px;
+    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.2);
+    outline: none;
+    -webkit-appearance: none;
+    min-width: 0;
+}
+
+.control-input {
+    min-width: 70px;
+    max-width: 70px;
+    flex-shrink: 0;
+}
+
+.control-slider.blue::-webkit-slider-thumb {
+    background: #2196F3;
+}
+
+.control-slider.red::-webkit-slider-thumb {
+    background: #FF9800;
+}
+
+.control-slider.blue::-moz-range-thumb {
+    background: #2196F3;
+}
+
+.control-slider.red::-moz-range-thumb {
+    background: #FF9800;
+}
+
+.control-input:focus {
+    outline: none;
+    border-color: #2196F3;
+}
+
+
+.hidden {
+    display: none !important;
+}
+
+.file-input {
+    display: none;
+}

index.html

@@ -4,348 +4,24 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Loop Maestro</title>
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96"/>
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg"/>
+    <link rel="shortcut icon" href="/favicon.ico"/>
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/>
+    <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>
-    <style>
-
-        /* Chrome, Safari, Edge, Opera */
-        input::-webkit-outer-spin-button,
-        input::-webkit-inner-spin-button {
-          -webkit-appearance: none;
-          margin: 0;
-        }
-
-        /* Firefox */
-        input[type=number] {
-          -moz-appearance: textfield;
-        }
-
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        }
-
-        body {
-            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
-            color: white;
-            min-height: 100vh;
-            padding: 20px;
-        }
-
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-        }
-
-        header {
-            text-align: center;
-            margin-bottom: 30px;
-            padding: 20px;
-            background: rgba(0, 0, 0, 0.3);
-            border-radius: 15px;
-            backdrop-filter: blur(10px);
-        }
-
-        h1 {
-            font-size: 2.5rem;
-            margin-bottom: 10px;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
-        }
-
-        .subtitle {
-            font-size: 1.2rem;
-            opacity: 0.9;
-        }
-
-        .app-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 20px;
-        }
-
-        @media (max-width: 900px) {
-            .app-grid {
-                grid-template-columns: 1fr;
-            }
-        }
-
-        .card {
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 15px;
-            padding: 20px;
-            backdrop-filter: blur(10px);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .card h2 {
-            margin-bottom: 15px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-        }
-
-        .upload-area {
-            border: 2px dashed rgba(255, 255, 255, 0.3);
-            border-radius: 10px;
-            padding: 40px 20px;
-            text-align: center;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            margin-bottom: 20px;
-        }
-
-        .upload-area:hover, .upload-area.dragover {
-            background: rgba(255, 255, 255, 0.1);
-            border-color: rgba(255, 255, 255, 0.5);
-        }
-
-        .upload-area.disabled {
-            opacity: 0.5;
-            cursor: not-allowed;
-            pointer-events: none;
-        }
-
-        .upload-icon {
-            font-size: 48px;
-            margin-bottom: 10px;
-        }
-
-        .file-input {
-            display: none;
-        }
-
-        .loading {
-            margin-top: 20px;
-        }
-
-        .progress-bar {
-            height: 20px;
-            background: rgba(255, 255, 255, 0.1);
-            border-radius: 10px;
-            overflow: hidden;
-            margin-bottom: 10px;
-        }
-
-        .progress-fill {
-            height: 100%;
-            width: 0%;
-            background: linear-gradient(90deg, #4CAF50, #45a049);
-            border-radius: 10px;
-            transition: width 0.3s ease;
-        }
-
-        .progress-text {
-            display: flex;
-            justify-content: space-between;
-            font-size: 0.9rem;
-        }
-
-        .cancel-button {
-            background: #f44336;
-            color: white;
-            border: none;
-            padding: 8px 15px;
-            border-radius: 5px;
-            cursor: pointer;
-            margin-top: 10px;
-            transition: background 0.3s;
-        }
-
-        .cancel-button:hover {
-            background: #d32f2f;
-        }
-
-        .server-status {
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 15px;
-            text-align: center;
-            font-weight: bold;
-        }
-
-        .server-online {
-            background: rgba(76, 175, 80, 0.3);
-            border: 1px solid rgba(76, 175, 80, 0.5);
-        }
-
-        .server-offline {
-            background: rgba(255, 152, 0, 0.3);
-            border: 1px solid rgba(255, 152, 0, 0.5);
-        }
-
-        .controls {
-            display: flex;
-            gap: 10px;
-            margin-top: 15px;
-        }
-
-        .form-group {
-            margin-bottom: 15px;
-        }
-
-        label {
-            display: block;
-            margin-bottom: 5px;
-            font-weight: bold;
-        }
-
-        input[type="number"] {
-            width: 100%;
-            padding: 10px;
-            border-radius: 5px;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            background: rgba(255, 255, 255, 0.1);
-            color: white;
-        }
-
-        input[type="checkbox"] {
-            margin-right: 8px;
-        }
-
-        .bar-selection {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-            margin-bottom: 15px;
-        }
-
-        .bar-selection .form-group {
-            margin-bottom: 0;
-        }
-
-        #player-container {
-            height: auto;
-        }
-
-        .bar-selection input {
-            flex: 1;
-        }
-
-        .results {
-            display: none;
-            margin-top: 20px;
-        }
-
-        .results-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-        }
-
-        .result-item {
-            background: rgba(0, 0, 0, 0.2);
-            padding: 10px;
-            border-radius: 5px;
-        }
-
-        .result-label {
-            font-size: 0.9rem;
-            opacity: 0.8;
-        }
-
-        .result-value {
-            font-size: 1.1rem;
-            font-weight: bold;
-        }
-
-        .bars-list {
-            max-height: 200px;
-            overflow-y: auto;
-            margin-top: 10px;
-            background: rgba(0, 0, 0, 0.2);
-            border-radius: 5px;
-            padding: 10px;
-        }
-
-        .bar-item {
-            display: flex;
-            justify-content: space-between;
-            padding: 5px 0;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-        }
-
-        .bar-item:last-child {
-            border-bottom: none;
-        }
-
-        .beat-marker {
-            position: absolute;
-            bottom: 0;
-            width: 3px;
-            height: 30px;
-            background: #4CAF50;
-        }
-
-        .downbeat-marker {
-            position: absolute;
-            bottom: 0;
-            width: 3px;
-            height: 50px;
-            background: #FF9800;
-        }
-
-        .section-player {
-            margin-top: 20px;
-            padding-top: 15px;
-            border-top: 1px solid rgba(255, 255, 255, 0.2);
-        }
-
-        .checkbox-group {
-            display: flex;
-            align-items: center;
-            margin-top: 10px;
-        }
-
-        .action-button {
-            background: #2196F3;
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 5px;
-            cursor: pointer;
-            font-weight: bold;
-            transition: background 0.3s;
-            margin-top: 10px;
-        }
-
-        .action-button:hover {
-            background: #1976D2;
-        }
-
-        .action-button:disabled {
-            background: rgba(255, 255, 255, 0.2);
-            cursor: not-allowed;
-        }
-
-        .init-progress {
-            margin-top: 20px;
-            padding: 15px;
-            background: rgba(0, 0, 0, 0.2);
-            border-radius: 10px;
-        }
-
-        .init-complete {
-            background: rgba(76, 175, 80, 0.2);
-            border: 1px solid rgba(76, 175, 80, 0.5);
-            padding: 10px;
-            border-radius: 5px;
-            text-align: center;
-            margin-top: 15px;
-            display: none;
-        }
-    </style>
 </head>
 <body>
 <div class="container">
     <header>
         <h1>Loop Maestro</h1>
-        <p class="subtitle">Upload a song, detect beats and bars, then loop bars</p>
+        <p class="subtitle">Upload a song, detect beats and bars, then loop any part</p>
     </header>
 
     <div class="app-grid">
         <div class="card">
-            <h2>Upload & Play</h2>
+            <h2>Upload & Loop</h2>
 
             <div id="serverStatus" class="server-status" style="display: none;">
                 Checking server status...
@@ -460,368 +136,7 @@
 
 <script type="module">
     import AudioStretchPlayer from '/js/AudioStretchPlayer.js';
-
-
-    class BeatDetector {
-        constructor() {
-            this.beatSession = null;
-            this.melSession = null;
-            this.sampleRate = 22050;
-            this.chunkSize = 1500;
-            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(
-                    './beat_model.onnx',
-                    {executionProviders: ['wasm']}
-                );
-
-                if (progressCallback) await progressCallback(50, "Loading spectrogram model...");
-
-                this.melSession = await ort.InferenceSession.create(
-                    './log_mel_spec.onnx',
-                    {executionProviders: ['wasm']}
-                );
-
-                if (progressCallback) await progressCallback(100, "Models loaded successfully!");
-
-                console.log("ONNX models loaded successfully");
-                return true;
-            } catch (error) {
-                console.error("Failed to load models:", error);
-                if (progressCallback) await progressCallback(0, "Failed to load models");
-                return false;
-            }
-        }
-
-        cancel() {
-            this.isCancelled = true;
-        }
-
-        resetCancellation() {
-            this.isCancelled = false;
-        }
-
-        // Audio preprocessing using the log_mel_spec.onnx model
-        async preprocessAudio(audioBuffer) {
-            const originalSampleRate = audioBuffer.sampleRate;
-            console.info('originalSampleRate :', originalSampleRate);
-            // Get data from both channels
-            const channel0 = audioBuffer.getChannelData(0);
-            const channel1 = audioBuffer.getChannelData(1);
-
-            // Calculate mean of both channels
-            let audioData = new Float32Array(channel0.length);
-            for (let i = 0; i < channel0.length; i++) {
-                audioData[i] = (channel0[i] + channel1[i]) / 2;
-            }
-
-            // Use the ONNX model to compute log mel spectrogram
-            return await this.computeLogMelSpectrogramONNX(audioData);
-        }
-
-        async computeLogMelSpectrogramONNX(audioData) {
-            if (!this.melSession) {
-                throw new Error("Log Mel Spectrogram model not initialized");
-            }
-
-            // Prepare input tensor without batch dimension
-            const inputTensor = new ort.Tensor('float32', audioData, [audioData.length]);
-
-            try {
-                // Run inference
-                const results = await this.melSession.run({
-                    'input': inputTensor
-                });
-
-                // Extract the log mel spectrogram from the output
-                const outputName = Object.keys(results)[0];
-                const logMelOutput = results[outputName];
-
-                // Convert 2D output to array format
-                const spectrogram = [];
-                const numFrames = logMelOutput.dims[0];
-                const numMels = logMelOutput.dims[1];
-
-                for (let i = 0; i < numFrames; i++) {
-                    const frame = [];
-                    for (let j = 0; j < numMels; j++) {
-                        frame.push(logMelOutput.data[i * numMels + j]);
-                    }
-                    spectrogram.push(frame);
-                }
-
-                console.log(`Log mel spectrogram computed: ${spectrogram.length} frames, ${spectrogram[0].length} mel bands`);
-                return spectrogram;
-            } catch (error) {
-                console.error("Error computing log mel spectrogram:", error);
-                throw error;
-            }
-        }
-
-        splitIntoChunks(spectrogram, chunkSize, borderSize, avoidShortEnd = true) {
-            const chunks = [];
-            const starts = [];
-
-            // Generate start positions similar to Python's np.arange
-            let startPositions = [];
-            for (let i = -borderSize; i < spectrogram.length - borderSize; i += chunkSize - 2 * borderSize) {
-                startPositions.push(i);
-            }
-
-            // Adjust last start position if avoidShortEnd is true and piece is long enough
-            if (avoidShortEnd && spectrogram.length > chunkSize - 2 * borderSize && startPositions.length > 0) {
-                startPositions[startPositions.length - 1] = spectrogram.length - (chunkSize - borderSize);
-            }
-
-            // Process each start position
-            for (const start of startPositions) {
-                const chunkStart = Math.max(0, start);
-                const chunkEnd = Math.min(spectrogram.length, start + chunkSize);
-
-                // Extract the chunk
-                let chunk = spectrogram.slice(chunkStart, chunkEnd);
-
-                // Calculate padding needed (similar to Python's zeropad)
-                const leftPad = Math.max(0, -start);
-                const rightPad = Math.max(0, Math.min(borderSize, start + chunkSize - spectrogram.length));
-
-                // Apply padding if needed
-                if (leftPad > 0 || rightPad > 0) {
-                    const paddedChunk = [];
-
-                    // Add left padding
-                    for (let i = 0; i < leftPad; i++) {
-                        paddedChunk.push(new Array(128).fill(0)); // Assuming 128 bins like in your Python code
-                    }
-
-                    // Add the actual chunk data
-                    paddedChunk.push(...chunk);
-
-                    // Add right padding
-                    for (let i = 0; i < rightPad; i++) {
-                        paddedChunk.push(new Array(128).fill(0));
-                    }
-
-                    chunks.push(paddedChunk);
-                } else {
-                    chunks.push(chunk);
-                }
-
-                starts.push(start);
-            }
-
-            return {chunks, starts};
-        }
-
-        async processAudio(audioBuffer, progressCallback = null) {
-            if (!this.beatSession) {
-                throw new Error("Beat model not initialized");
-            }
-
-            // Reset cancellation flag
-            this.resetCancellation();
-
-            // Preprocess audio using ONNX model
-            if (progressCallback) await progressCallback(0, "Detecting beats ...");
-            const spectrogram = await this.preprocessAudio(audioBuffer);
-
-            // Check for cancellation
-            if (this.isCancelled) throw new Error("Processing cancelled");
-
-            const {chunks, starts} = this.splitIntoChunks(spectrogram, this.chunkSize, this.borderSize);
-
-            // Store predictions for each chunk
-            const predChunks = [];
-
-            // Process each chunk with progress updates
-            for (let i = 0; i < chunks.length; i++) {
-                // Check for cancellation
-                if (this.isCancelled) throw new Error("Processing cancelled");
-
-                const chunk = chunks[i];
-                const start = starts[i];
-
-                // Convert to tensor format
-                const inputTensor = new ort.Tensor('float32',
-                    this.flattenArray(chunk),
-                    [1, chunk.length, 128]
-                );
-
-                // Run inference
-                const results = await this.beatSession.run({
-                    'input': inputTensor
-                });
-
-                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
-                const beatPred = Array.from(results.beat.data);
-                const downbeatPred = Array.from(results.downbeat.data);
-
-                // Store chunk predictions
-                predChunks.push({
-                    beat: beatPred,
-                    downbeat: downbeatPred
-                });
-            }
-
-            if (this.isCancelled) throw new Error("Processing cancelled");
-
-            if (progressCallback) await progressCallback(95, "Post processing beats ...");
-            // Aggregate predictions
-            const aggregated = this.aggregatePrediction(
-                predChunks,
-                starts,
-                spectrogram.length,
-                this.chunkSize,
-                this.borderSize,
-                'keep_first'
-            );
-
-            if (this.isCancelled) throw new Error("Processing cancelled");
-
-            if (progressCallback) await progressCallback(100, "Complete!");
-
-            return {
-                prediction_beat: aggregated.beat,
-                prediction_downbeat: aggregated.downbeat,
-            };
-        }
-
-        // 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',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    },
-                    body: JSON.stringify({
-                        beat_logits: beatLogits,
-                        downbeat_logits: downbeatLogits,
-                        min_bpm: min_bpm,
-                        max_bpm: max_bpm,
-                        beats_per_bar: beats_per_bar,
-                    })
-                });
-
-                if (!response.ok) {
-                    throw new Error(`Server returned ${response.status}: ${response.statusText}`);
-                }
-
-                const result = await response.json();
-
-                if (result.error) {
-                    throw new Error(`Server error: ${result.error}`);
-                }
-
-                console.log(`Server postprocessing results: ${result.bars ? Object.keys(result.bars).length : 0} 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 {
-                    bars: {},
-                    estimated_bpm: null,
-                    detected_beats_per_bar: null
-                };
-            }
-        }
-
-        // Check server status
-        async checkServerStatus() {
-            try {
-                const response = await fetch(`${this.serverUrl}/health`, {
-                    method: 'GET',
-                    headers: {
-                        'Content-Type': 'application/json',
-                    }
-                });
-
-                return response.ok;
-            } catch (error) {
-                console.warn("Server health check failed:", error);
-                return false;
-            }
-        }
-
-        aggregatePrediction(predChunks, starts, fullSize, chunkSize, borderSize, overlapMode) {
-            let processedChunks = predChunks;
-
-            // Remove borders if borderSize > 0
-            if (borderSize > 0) {
-                processedChunks = predChunks.map(pchunk => ({
-                    beat: pchunk.beat.slice(borderSize, -borderSize),
-                    downbeat: pchunk.downbeat.slice(borderSize, -borderSize)
-                }));
-            }
-
-            // Initialize arrays with very low values (equivalent to -1000.0 in Python)
-            const piecePredictionBeat = new Array(fullSize).fill(-1000.0);
-            const piecePredictionDownbeat = new Array(fullSize).fill(-1000.0);
-
-            // Prepare iteration based on overlap mode
-            let chunksToProcess = processedChunks;
-            let startsToProcess = starts;
-
-            if (overlapMode === "keep_first") {
-                // Process in reverse order so earlier predictions overwrite later ones
-                chunksToProcess = [...processedChunks].reverse();
-                startsToProcess = [...starts].reverse();
-            }
-
-            // Aggregate predictions
-            for (let i = 0; i < chunksToProcess.length; i++) {
-                const start = startsToProcess[i];
-                const pchunk = chunksToProcess[i];
-
-                const effectiveStart = start + borderSize;
-                const effectiveEnd = start + chunkSize - borderSize;
-
-                // Copy predictions to the appropriate positions
-                for (let j = 0; j < pchunk.beat.length; j++) {
-                    const pos = effectiveStart + j;
-                    if (pos < fullSize) {
-                        piecePredictionBeat[pos] = pchunk.beat[j];
-                        piecePredictionDownbeat[pos] = pchunk.downbeat[j];
-                    }
-                }
-            }
-
-            return {
-                beat: piecePredictionBeat,
-                downbeat: piecePredictionDownbeat
-            };
-        }
-
-        flattenArray(arr) {
-            const flat = [];
-            for (let i = 0; i < arr.length; i++) {
-                for (let j = 0; j < arr[i].length; j++) {
-                    flat.push(arr[i][j]);
-                }
-            }
-            return flat;
-        }
-    }
+    import BeatDetector from '/js/BeatDetector.js';
 
     class BeatDetectionApp {
         constructor() {

js/AudioStretchPlayer.js

@@ -54,175 +54,6 @@ export default class AudioStretchPlayer {
 
     createHTML() {
         this.container.innerHTML = `
-    <style>
-        .audio-stretch-player {
-            width: 100%;
-            height: 100%;
-            border-radius: 10px;
-            padding: 15px;
-            backdrop-filter: blur(10px);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            color: white;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            display: flex;
-            flex-direction: column;
-            box-sizing: border-box;
-            overflow: visible;
-        }
-
-        .player-header {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin-bottom: 15px;
-            padding-bottom: 12px;
-            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
-            flex-shrink: 0;
-        }
-
-        .play-stop-btn {
-            background: #2196F3;
-            color: white;
-            border: none;
-            border-radius: 50%;
-            width: 40px;
-            height: 40px;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            transition: background 0.3s;
-            font-size: 16px;
-            flex-shrink: 0;
-        }
-
-        .play-stop-btn:hover {
-            background: #1976D2;
-        }
-
-        .playback-slider-container {
-            flex: 1;
-            display: flex;
-            align-items: center;
-            gap: 8px;
-            min-width: 0;
-        }
-
-        .playback-slider {
-            flex: 1;
-            height: 4px;
-            border-radius: 2px;
-            background: rgba(255, 255, 255, 0.2);
-            outline: none;
-            -webkit-appearance: none;
-            min-width: 0;
-        }
-
-        .playback-slider::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            background: #2196F3;
-            cursor: pointer;
-            border: 2px solid white;
-        }
-
-        .playback-slider::-moz-range-thumb {
-            width: 14px;
-            height: 14px;
-            border-radius: 50%;
-            background: #2196F3;
-            cursor: pointer;
-            border: 2px solid white;
-        }
-
-        .time-display {
-            font-size: 0.8rem;
-            color: rgba(255, 255, 255, 0.8);
-            min-width: 45px;
-            text-align: center;
-            flex-shrink: 0;
-        }
-
-
-        .controls-panel {
-            flex: 1;
-            display: flex;
-            flex-direction: column; /* <-- stack rows vertically */
-            align-items: flex-start;
-            gap: 12px;              /* spacing between rows */
-            width: 100%;  
-        }
-        
-        .control-row {
-            display: flex;
-            flex-direction: column; /* Label on line 1, slider+number on line 2 */
-            gap: 6px;
-            width: 100%; 
-        }
-        
-        .control-label {
-            font-size: 0.8rem;
-            color: rgba(255, 255, 255, 0.8);
-        }
-        
-        .control-input-line {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-            width: 100%; 
-        }
-        
-        .control-slider {
-            flex: 1;
-            height: 4px;
-            border-radius: 2px;
-            background: rgba(255, 255, 255, 0.2);
-            outline: none;
-            -webkit-appearance: none;
-            min-width: 0; 
-        }
-        
-        .control-input {
-            min-width: 70px;
-            max-width: 70px;
-            flex-shrink: 0;
-        }
-        
-        .control-slider.blue::-webkit-slider-thumb {
-            background: #2196F3;
-        }
-        
-        .control-slider.red::-webkit-slider-thumb {
-            background: #FF9800;
-        }
-        
-        .control-slider.blue::-moz-range-thumb {
-            background: #2196F3;
-        }
-        
-        .control-slider.red::-moz-range-thumb {
-            background: #FF9800;
-        }
-        
-        .control-input:focus {
-            outline: none;
-            border-color: #2196F3;
-        }
-
-
-        .hidden {
-            display: none !important;
-        }
-
-        .file-input {
-            display: none;
-        }
-    </style>
-</head>
-<body>
     <div class="audio-stretch-player">
         <div class="player-header">
             <button class="play-stop-btn" id="playstop">

js/BeatDetector.js

@@ -0,0 +1,361 @@
+export default class BeatDetector {
+    constructor() {
+        this.beatSession = null;
+        this.melSession = null;
+        this.sampleRate = 22050;
+        this.chunkSize = 1500;
+        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(
+                './beat_model.onnx',
+                {executionProviders: ['wasm']}
+            );
+
+            if (progressCallback) await progressCallback(50, "Loading spectrogram model...");
+
+            this.melSession = await ort.InferenceSession.create(
+                './log_mel_spec.onnx',
+                {executionProviders: ['wasm']}
+            );
+
+            if (progressCallback) await progressCallback(100, "Models loaded successfully!");
+
+            console.log("ONNX models loaded successfully");
+            return true;
+        } catch (error) {
+            console.error("Failed to load models:", error);
+            if (progressCallback) await progressCallback(0, "Failed to load models");
+            return false;
+        }
+    }
+
+    cancel() {
+        this.isCancelled = true;
+    }
+
+    resetCancellation() {
+        this.isCancelled = false;
+    }
+
+    // Audio preprocessing using the log_mel_spec.onnx model
+    async preprocessAudio(audioBuffer) {
+        const originalSampleRate = audioBuffer.sampleRate;
+        console.info('originalSampleRate :', originalSampleRate);
+        // Get data from both channels
+        const channel0 = audioBuffer.getChannelData(0);
+        const channel1 = audioBuffer.getChannelData(1);
+
+        // Calculate mean of both channels
+        let audioData = new Float32Array(channel0.length);
+        for (let i = 0; i < channel0.length; i++) {
+            audioData[i] = (channel0[i] + channel1[i]) / 2;
+        }
+
+        // Use the ONNX model to compute log mel spectrogram
+        return await this.computeLogMelSpectrogramONNX(audioData);
+    }
+
+    async computeLogMelSpectrogramONNX(audioData) {
+        if (!this.melSession) {
+            throw new Error("Log Mel Spectrogram model not initialized");
+        }
+
+        // Prepare input tensor without batch dimension
+        const inputTensor = new ort.Tensor('float32', audioData, [audioData.length]);
+
+        try {
+            // Run inference
+            const results = await this.melSession.run({
+                'input': inputTensor
+            });
+
+            // Extract the log mel spectrogram from the output
+            const outputName = Object.keys(results)[0];
+            const logMelOutput = results[outputName];
+
+            // Convert 2D output to array format
+            const spectrogram = [];
+            const numFrames = logMelOutput.dims[0];
+            const numMels = logMelOutput.dims[1];
+
+            for (let i = 0; i < numFrames; i++) {
+                const frame = [];
+                for (let j = 0; j < numMels; j++) {
+                    frame.push(logMelOutput.data[i * numMels + j]);
+                }
+                spectrogram.push(frame);
+            }
+
+            console.log(`Log mel spectrogram computed: ${spectrogram.length} frames, ${spectrogram[0].length} mel bands`);
+            return spectrogram;
+        } catch (error) {
+            console.error("Error computing log mel spectrogram:", error);
+            throw error;
+        }
+    }
+
+    splitIntoChunks(spectrogram, chunkSize, borderSize, avoidShortEnd = true) {
+        const chunks = [];
+        const starts = [];
+
+        // Generate start positions similar to Python's np.arange
+        let startPositions = [];
+        for (let i = -borderSize; i < spectrogram.length - borderSize; i += chunkSize - 2 * borderSize) {
+            startPositions.push(i);
+        }
+
+        // Adjust last start position if avoidShortEnd is true and piece is long enough
+        if (avoidShortEnd && spectrogram.length > chunkSize - 2 * borderSize && startPositions.length > 0) {
+            startPositions[startPositions.length - 1] = spectrogram.length - (chunkSize - borderSize);
+        }
+
+        // Process each start position
+        for (const start of startPositions) {
+            const chunkStart = Math.max(0, start);
+            const chunkEnd = Math.min(spectrogram.length, start + chunkSize);
+
+            // Extract the chunk
+            let chunk = spectrogram.slice(chunkStart, chunkEnd);
+
+            // Calculate padding needed (similar to Python's zeropad)
+            const leftPad = Math.max(0, -start);
+            const rightPad = Math.max(0, Math.min(borderSize, start + chunkSize - spectrogram.length));
+
+            // Apply padding if needed
+            if (leftPad > 0 || rightPad > 0) {
+                const paddedChunk = [];
+
+                // Add left padding
+                for (let i = 0; i < leftPad; i++) {
+                    paddedChunk.push(new Array(128).fill(0)); // Assuming 128 bins like in your Python code
+                }
+
+                // Add the actual chunk data
+                paddedChunk.push(...chunk);
+
+                // Add right padding
+                for (let i = 0; i < rightPad; i++) {
+                    paddedChunk.push(new Array(128).fill(0));
+                }
+
+                chunks.push(paddedChunk);
+            } else {
+                chunks.push(chunk);
+            }
+
+            starts.push(start);
+        }
+
+        return {chunks, starts};
+    }
+
+    async processAudio(audioBuffer, progressCallback = null) {
+        if (!this.beatSession) {
+            throw new Error("Beat model not initialized");
+        }
+
+        // Reset cancellation flag
+        this.resetCancellation();
+
+        // Preprocess audio using ONNX model
+        if (progressCallback) await progressCallback(0, "Detecting beats ...");
+        const spectrogram = await this.preprocessAudio(audioBuffer);
+
+        // Check for cancellation
+        if (this.isCancelled) throw new Error("Processing cancelled");
+
+        const {chunks, starts} = this.splitIntoChunks(spectrogram, this.chunkSize, this.borderSize);
+
+        // Store predictions for each chunk
+        const predChunks = [];
+
+        // Process each chunk with progress updates
+        for (let i = 0; i < chunks.length; i++) {
+            // Check for cancellation
+            if (this.isCancelled) throw new Error("Processing cancelled");
+
+            const chunk = chunks[i];
+            const start = starts[i];
+
+            // Convert to tensor format
+            const inputTensor = new ort.Tensor('float32',
+                this.flattenArray(chunk),
+                [1, chunk.length, 128]
+            );
+
+            // Run inference
+            const results = await this.beatSession.run({
+                'input': inputTensor
+            });
+
+            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
+            const beatPred = Array.from(results.beat.data);
+            const downbeatPred = Array.from(results.downbeat.data);
+
+            // Store chunk predictions
+            predChunks.push({
+                beat: beatPred,
+                downbeat: downbeatPred
+            });
+        }
+
+        if (this.isCancelled) throw new Error("Processing cancelled");
+
+        if (progressCallback) await progressCallback(95, "Post processing beats ...");
+        // Aggregate predictions
+        const aggregated = this.aggregatePrediction(
+            predChunks,
+            starts,
+            spectrogram.length,
+            this.chunkSize,
+            this.borderSize,
+            'keep_first'
+        );
+
+        if (this.isCancelled) throw new Error("Processing cancelled");
+
+        if (progressCallback) await progressCallback(100, "Complete!");
+
+        return {
+            prediction_beat: aggregated.beat,
+            prediction_downbeat: aggregated.downbeat,
+        };
+    }
+
+    // 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',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    beat_logits: beatLogits,
+                    downbeat_logits: downbeatLogits,
+                    min_bpm: min_bpm,
+                    max_bpm: max_bpm,
+                    beats_per_bar: beats_per_bar,
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`Server returned ${response.status}: ${response.statusText}`);
+            }
+
+            const result = await response.json();
+
+            if (result.error) {
+                throw new Error(`Server error: ${result.error}`);
+            }
+
+            console.log(`Server postprocessing results: ${result.bars ? Object.keys(result.bars).length : 0} 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 {
+                bars: {},
+                estimated_bpm: null,
+                detected_beats_per_bar: null
+            };
+        }
+    }
+
+    // Check server status
+    async checkServerStatus() {
+        try {
+            const response = await fetch(`${this.serverUrl}/health`, {
+                method: 'GET',
+                headers: {
+                    'Content-Type': 'application/json',
+                }
+            });
+
+            return response.ok;
+        } catch (error) {
+            console.warn("Server health check failed:", error);
+            return false;
+        }
+    }
+
+    aggregatePrediction(predChunks, starts, fullSize, chunkSize, borderSize, overlapMode) {
+        let processedChunks = predChunks;
+
+        // Remove borders if borderSize > 0
+        if (borderSize > 0) {
+            processedChunks = predChunks.map(pchunk => ({
+                beat: pchunk.beat.slice(borderSize, -borderSize),
+                downbeat: pchunk.downbeat.slice(borderSize, -borderSize)
+            }));
+        }
+
+        // Initialize arrays with very low values (equivalent to -1000.0 in Python)
+        const piecePredictionBeat = new Array(fullSize).fill(-1000.0);
+        const piecePredictionDownbeat = new Array(fullSize).fill(-1000.0);
+
+        // Prepare iteration based on overlap mode
+        let chunksToProcess = processedChunks;
+        let startsToProcess = starts;
+
+        if (overlapMode === "keep_first") {
+            // Process in reverse order so earlier predictions overwrite later ones
+            chunksToProcess = [...processedChunks].reverse();
+            startsToProcess = [...starts].reverse();
+        }
+
+        // Aggregate predictions
+        for (let i = 0; i < chunksToProcess.length; i++) {
+            const start = startsToProcess[i];
+            const pchunk = chunksToProcess[i];
+
+            const effectiveStart = start + borderSize;
+            const effectiveEnd = start + chunkSize - borderSize;
+
+            // Copy predictions to the appropriate positions
+            for (let j = 0; j < pchunk.beat.length; j++) {
+                const pos = effectiveStart + j;
+                if (pos < fullSize) {
+                    piecePredictionBeat[pos] = pchunk.beat[j];
+                    piecePredictionDownbeat[pos] = pchunk.downbeat[j];
+                }
+            }
+        }
+
+        return {
+            beat: piecePredictionBeat,
+            downbeat: piecePredictionDownbeat
+        };
+    }
+
+    flattenArray(arr) {
+        const flat = [];
+        for (let i = 0; i < arr.length; i++) {
+            for (let j = 0; j < arr[i].length; j++) {
+                flat.push(arr[i][j]);
+            }
+        }
+        return flat;
+    }
+}

site.webmanifest

@@ -0,0 +1,34 @@
+{
+  "theme_color": "#54264d",
+  "background_color": "#ca5a39",
+  "icons": [
+    {
+      "purpose": "maskable",
+      "sizes": "192x192",
+      "src": "/web-app-manifest-192x192.png",
+      "type": "image/png"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "purpose": "any",
+      "sizes": "512x512",
+      "src": "icon512_rounded.png",
+      "type": "image/png"
+    }
+  ],
+  "orientation": "any",
+  "display": "standalone",
+  "dir": "auto",
+  "lang": "en-US",
+  "name": "Loop Maestro",
+  "short_name": "Loop Maestro",
+  "start_url": "https://jorisvaneyghen-loop-maestro.hf.space/",
+  "scope": "https://jorisvaneyghen-loop-maestro.hf.space/",
+  "description": "Upload a song, detect beats and bars, then loop bars",
+  "id": "https://jorisvaneyghen-loop-maestro.hf.space/"
+}