Upload 4 files

app.js

@@ -119,8 +119,11 @@ const midiFileStatsEl = document.querySelector("#midiFileStats");
 const midiStartBarInput = document.querySelector("#midiStartBar");
 const midiStartBarValue = document.querySelector("#midiStartBarValue");
 const midiStartBarTimeEl = document.querySelector("#midiStartBarTime");
+const midiBpmModeGroup = document.querySelector("#midiBpmModeGroup");
+const midiBpmModeButtons = midiBpmModeGroup ? midiBpmModeGroup.querySelectorAll(".toggle-btn") : [];
 
 let midiSeedActive = false;
+let midiBpmMode = "lock";
 let midiTokens = [];
 let midiStartBar = 0;
 let midiFileName = "";
@@ -777,7 +780,8 @@ async function start() {
       bpm: Number(tempoEl.textContent || 120),
       midiSeedActive: midiSeedActive,
       midiTokens: midiSeedActive ? midiTokens : [],
-      midiStartBar: midiStartBar
+      midiStartBar: midiStartBar,
+      midiBpmMode: midiBpmMode
     });
   });
   
@@ -788,6 +792,7 @@ async function start() {
   if (modelFileInput) modelFileInput.disabled = true;
   if (vocabFileInput) vocabFileInput.disabled = true;
   toggleButtons.forEach(btn => btn.disabled = true);
+  midiBpmModeButtons.forEach(btn => btn.disabled = true);
   midiFileInput.disabled = true;
   midiStartBarInput.disabled = true;
   
@@ -815,6 +820,7 @@ function stop() {
   if (modelFileInput) modelFileInput.disabled = false;
   if (vocabFileInput) vocabFileInput.disabled = false;
   toggleButtons.forEach(btn => btn.disabled = false);
+  midiBpmModeButtons.forEach(btn => btn.disabled = false);
   midiFileInput.disabled = false;
   midiStartBarInput.disabled = false;
   if (synth) {
@@ -1488,6 +1494,17 @@ toggleButtons.forEach(btn => {
   });
 });
 
+midiBpmModeButtons.forEach(btn => {
+  btn.addEventListener("click", () => {
+    if (btn.disabled) return;
+    
+    midiBpmModeButtons.forEach(b => b.classList.remove("active"));
+    btn.classList.add("active");
+    
+    midiBpmMode = btn.dataset.value;
+  });
+});
+
 midiFileInput.addEventListener("change", async (e) => {
   const file = e.target.files?.[0];
   if (!file) return;

index.html

@@ -149,6 +149,14 @@
                   <input id="midiStartBar" type="range" min="0" max="0" step="1" value="0" />
                 </div>
                 <p id="midiStartBarTime" class="midi-info-subtext"></p>
+                
+                <div class="toggle-group-container" style="margin-top: 14px;">
+                  <span class="toggle-group-label" style="font-size: 0.72rem; margin-bottom: 6px; display: block; color: var(--color-text-muted);">MIDI Playback Tempo Mode</span>
+                  <div class="toggle-group" id="midiBpmModeGroup">
+                    <button type="button" class="toggle-btn active" data-value="lock">Lock MIDI BPM</button>
+                    <button type="button" class="toggle-btn" data-value="model">Follow Model BPM</button>
+                  </div>
+                </div>
               </div>
             </div>
           </section>

worker.js

@@ -25,6 +25,7 @@ let numLayers = 2;
 let temperature = 0.85;
 let topK = 40;
 let currentBpm = 120;
+let midiBpmMode = "lock";
 
 // Seeding settings
 let midiSeedActive = false;
@@ -194,7 +195,7 @@ function makeAbcParser() {
       if (this.pending?.type === "tempoHeader") {
         const bpm = Number(String(token).split("=").pop());
         if (Number.isFinite(bpm) && bpm >= 40 && bpm <= 220) {
-          if (!midiSeedActive || isWarmingUp) {
+          if (!midiSeedActive || isWarmingUp || midiBpmMode === "model") {
             currentBpm = bpm;
             self.postMessage({ action: "tempo", bpm: bpm });
           }
@@ -263,7 +264,7 @@ function makeEventParser() {
       if (token.startsWith("BPM_")) {
         const bpm = Number(token.slice(4));
         if (Number.isFinite(bpm) && bpm >= 40 && bpm <= 220) {
-          if (!midiSeedActive || isWarmingUp) {
+          if (!midiSeedActive || isWarmingUp || midiBpmMode === "model") {
             currentBpm = bpm;
             self.postMessage({ action: "tempo", bpm: bpm });
           }
@@ -428,6 +429,7 @@ self.onmessage = async function (e) {
         midiSeedActive = data.midiSeedActive;
         midiTokens = data.midiTokens;
         midiStartBar = data.midiStartBar;
+        midiBpmMode = data.midiBpmMode || "lock";
         
         parser = makeParser();
         parser.reset();