Smarter downloads (#18)

* Clean up CPP submodules

* Download model weights once only

* Fix batch job

* Only register service-worker when user downloads weights

* Adjust service-worker

.gitmodules

@@ -1,16 +1,7 @@
-[submodule "vendor/libnyquist"]
-	path = vendor/libnyquist
-	url = https://github.com/ddiakopoulos/libnyquist
 [submodule "vendor/wav-file-encoder"]
 	path = vendor/wav-file-encoder
 	url = https://github.com/chdh/wav-file-encoder
-[submodule "vendor/eigen"]
-	path = vendor/eigen
-	url = https://gitlab.com/libeigen/eigen.git
 [submodule "vendor/demucs"]
 	path = vendor/demucs
 	url = https://github.com/sevagh/demucs
 	branch = release_v4
-[submodule "vendor/demucs.cpp"]
-	path = vendor/demucs.cpp
-	url = https://github.com/sevagh/demucs.cpp

README.md

@@ -14,23 +14,6 @@ A [free static website](https://freemusicdemixer.com) for client-side music demi
 
 ### Dev instructions
 
-Clone the repo with submodules:
-```
-git clone --recurse-submodules https://github.com/sevagh/free-music-demixer
-```
-
-To generate a weights file with Python, first create a Python venv, then:
-```
-python -m pip install -r ./scripts/requirements.txt
-python ./scripts/convert-demucs-pth-to-ggml.py ./models/ # htdemucs 4s
-python ./scripts/convert-demucs-pth-to-ggml.py --six-source ./models/ # htdemucs 6s
-```
-
-Build for WebAssembly with Emscripten using `emcmake`:
-```
-mkdir -p build-wasm && cd build-wasm && emcmake cmake -DCMAKE_BUILD_TYPE=Release .. && make
-```
-
 The [wav-file-encoder](https://github.com/chdh/wav-file-encoder) project has been vendored in; I manually compiled the Typescript file to Javascript with these commands:
 ```
 npm install typescript

docs/assets/css/style.scss

@@ -195,9 +195,9 @@ div.mdx-container {
   align-self: flex-end;
 }
 
-#mdx-unified-app a {
-  color: #70DB93;
-}
+//#mdx-unified-app a {
+//  color: #70DB93;
+//}
 
 .output-link-container {
   display: flex;
@@ -208,6 +208,7 @@ div.mdx-container {
   margin: 2vh auto; /* Auto horizontal margins for centering and 2vh vertical margin */
   padding: 2%;
   //background-color: rgba(0, 64, 128, 1.0); /* Light cyan background color with 50% opacity */
+  background-color: white;
   border-radius: 10px; /* Rounded corners */
   color: #e0ffff; /* Text color - Light Cyan */
   overflow: auto; /* Will add a scrollbar if the content overflows */
@@ -868,3 +869,22 @@ input[type="file"]:disabled, label:disabled {
 .btn-github, .btn-gold-github {
   font-size: 15px;
 }
+
+.styled-link {
+    display: inline-block;
+    height: 50px; /* Match the height of your images */
+    border: 1.5px solid #636363; /* Add a border for a button-like appearance */
+    color: #3b3b3b; /* Choose the color of the text */
+    // add left text border
+    padding: 12px 5px; /* Add padding to the left and right */
+    font-weight: bold; /* Make the text bold */
+    text-align: center; /* Center the text horizontally */
+    text-decoration: none; /* Remove the underline from the link */
+    box-sizing: border-box; /* Include padding and border in the width */
+    //vertical-align: middle; /* Align inline-block elements vertically */
+    vertical-align: top; /* Align inline-block elements vertically */
+}
+
+.styled-link:hover {
+    text-decoration: none; /* Ensure the underline doesn't appear on hover */
+}

docs/index.md

@@ -22,8 +22,7 @@ Unlike similar products, **it's free to use and doesn't store your data.** All p
 
 If you love this free site and want to support it via brand sponsorship or other ideas, contact me by [e-mail](mailto:[email protected]) or through our [Instagram account](https://www.instagram.com/freemusicdemixer/)!
 
-<a href="https://theresanaiforthat.com/ai/free-music-demixer/?ref=featured&v=691965" target="_blank"><img height="50" src="https://media.theresanaiforthat.com/featured3.png" alt="theresanaiforthat-promo"></a> <a href="https://www.instagram.com/freemusicdemixer/" target="_blank"><img src="/assets/images/ig_banner.webp" height="50" alt="freemusicdemixer-instagram"/></a>
-
+<a href="https://theresanaiforthat.com/ai/free-music-demixer/?ref=featured&v=691965" target="_blank"><img height="50" src="https://media.theresanaiforthat.com/featured3.png" alt="theresanaiforthat-promo"></a> <a href="https://www.instagram.com/freemusicdemixer/" target="_blank"><img src="/assets/images/ig_banner.webp" height="50" alt="freemusicdemixer-instagram"/></a> <a href="https://arktan.com" target="_blank" class="styled-link"> <img src="/assets/images/arktan_logo.webp" height="12px"/> Featured on Arktan.com</a>
 
 ## Demo
 
@@ -125,7 +124,7 @@ To cancel the running job, refresh the page
 
 ## Disclaimers and updates
 
-* ⚠️ We take code quality seriously! For bugs or requests, [open a GitHub issue](https://github.com/sevagh/free-music-demixer/issues), or message us [on Instagram](https://www.instagram.com/freemusicdemixer) or by [e-mail](mailto:[email protected]).
+* ⚠️ We take code quality seriously! For bugs or requests, [open a GitHub issue](https://github.com/sevagh/free-music-demixer/issues), or message us [on Instagram](https://www.instagram.com/freemusicdemixer) or by [e-mail](mailto:[email protected])
 * 💻 If you experience crashes, try a different **MAX MEMORY** setting (lower or higher!)
 * ⚖️ 📄 Model weights and outputs are governed by the <a href="https://github.com/facebookresearch/demucs/issues/327#issuecomment-1134828611">Meta Research license</a>
 * Input files can be almost any audio format, but the outputs are always stereo wav files @ 44100 Hz

docs/main.js

@@ -19,10 +19,6 @@ const registerServiceWorker = async () => {
   }
 };
 
-if ('serviceWorker' in navigator) {
-    registerServiceWorker();
-}
-
 const SAMPLE_RATE = 44100;
 const OVERLAP_S = 0.75;
 
@@ -179,6 +175,7 @@ let NUM_WORKERS = 4;
 let workers;
 let workerProgress;
 let selectedModel;
+let dlModelBuffers;
 
 let processedSegments = new Array(NUM_WORKERS); // Global accumulator for processed segments
 let completedSegments = 0; // Counter for processed segments
@@ -230,7 +227,7 @@ function initWorkers() {
             } else if (e.data.msg === 'PROCESSING_DONE') {
                 // Handle the processed segment
                 // Collect and stitch segments
-                processedSegments[i] = e.data.data;
+                processedSegments[i] = e.data.waveforms;
                 let originalLength = e.data.originalLength;
                 completedSegments +=1;
                 workers[i].terminate();
@@ -292,26 +289,30 @@ function initWorkers() {
                 }
             }
         };
-        workers[i].postMessage({msg: 'LOAD_WASM', model: selectedModel});
+        workers[i].postMessage({
+            msg: 'LOAD_WASM',
+            model: selectedModel,
+            modelBuffers: dlModelBuffers
+        });
     }
 };
 
 function fetchAndCacheFiles(model) {
-    let modelFile = "";
+    let modelFiles = [];
     if (model === 'demucs-4s') {
-        modelFile = `assets/models/ggml-model-htdemucs-4s-f16.bin`;
+        // append ggml-model-htdemucs-4s-f16.bin to modelFiles
+        modelFiles.push('ggml-model-htdemucs-4s-f16.bin');
     } else if (model === 'demucs-6s') {
-        modelFile = `assets/models/ggml-model-htdemucs-6s-f16.bin`;
+        modelFiles.push('ggml-model-htdemucs-6s-f16.bin');
     }
 
-    const filesToFetch = [
-        'demucs.wasm',
-        'demucs.js',
-        modelFile
-    ];
+    // prepend raw gh url to all modelFiles
+    modelFiles = modelFiles.map(file =>
+        `assets/models/${file}`
+    )
 
     // Map each file to a fetch request and then process the response
-    const fetchPromises = filesToFetch.map(file =>
+    const fetchPromises = modelFiles.map(file =>
         fetch(file).then(response => {
             if (!response.ok) {
                 throw new Error(`Failed to fetch ${file}`);
@@ -323,10 +324,10 @@ function fetchAndCacheFiles(model) {
 }
 
 function initModel() {
+    registerServiceWorker();
     fetchAndCacheFiles(selectedModel)
         .then(buffers => { // buffers are the downloaded file contents
-            writeJsLog("Fetched and cached model files");
-            writeJsLog(`Selected model: ${selectedModel}`);
+            writeJsLog(`Fetching and caching model files for selected model: ${selectedModel}`);
 
             // Process buffers if needed, e.g., initialize WASM module
 
@@ -338,6 +339,8 @@ function initModel() {
             document.getElementById('audio-upload').disabled = false;
             document.getElementById('batch-upload').disabled = true;
             document.getElementById('load-and-demix').disabled = false;
+
+            dlModelBuffers = buffers;
         })
         .catch(error => {
             writeJsLog(`Error in fetching model files: ${error}`);
@@ -722,11 +725,20 @@ document.addEventListener("DOMContentLoaded", function() {
     let checkbox = document.getElementById("toggleDevLogs");
     let devLogs = document.getElementById("devLogs");
 
+    // Check localStorage for the saved checkbox state
+    const isChecked = localStorage.getItem("showDevLogs") === "true";
+
+    // Apply the saved state
+    checkbox.checked = isChecked;
+    devLogs.classList.toggle("hidden", !isChecked); // Hide if not checked
+
     checkbox.addEventListener("change", function() {
         if (checkbox.checked) {
             devLogs.classList.remove("hidden");
+            localStorage.setItem("showDevLogs", "true"); // Save state as checked
         } else {
             devLogs.classList.add("hidden");
+            localStorage.setItem("showDevLogs", "false"); // Save state as unchecked
         }
     });
 

docs/service-worker.js

@@ -1,7 +1,5 @@
-const CACHE_NAME = "v20240115";
+const CACHE_NAME = "v20240213";
 const RESOURCES_TO_PRELOAD = [
-  "demucs.js",
-  "demucs.wasm",
   "assets/models/ggml-model-htdemucs-4s-f16.bin",
   "assets/models/ggml-model-htdemucs-6s-f16.bin"
 ];
@@ -36,9 +34,14 @@ self.addEventListener("activate", (event) => {
 });
 
 self.addEventListener("fetch", (event) => {
-  event.respondWith(
-    caches.match(event.request).then((response) => {
-      return response || fetch(event.request);
-    })
-  );
+  // Check if the request is for a .bin file
+  if (event.request.url.endsWith('.bin')) {
+    event.respondWith(
+      caches.match(event.request)
+        .then((response) => response || fetch(event.request))
+    );
+  } else {
+    // For non-.bin files, just fetch from the network
+    event.respondWith(fetch(event.request));
+  }
 });