Upload 4 files

app.js

@@ -122,10 +122,7 @@ const midiStartBarTimeEl = document.querySelector("#midiStartBarTime");
 const midiBpmModeGroup = document.querySelector("#midiBpmModeGroup");
 const midiBpmModeButtons = midiBpmModeGroup ? midiBpmModeGroup.querySelectorAll(".toggle-btn") : [];
 
-let midiSeedActive = false;
-let bachSeedActive = false;
-let bachSymphonyActive = true;
-let bachSymphony2HandActive = false;
+let activePlayingStyle = "bach_symphony";
 let midiBpmMode = "lock";
 let midiTokens = [];
 let midiStartBar = 0;
@@ -767,7 +764,7 @@ async function start() {
   queue = [];
   generatedEvents = 0;
   visualNotes = [];
-  if (tempoEl) tempoEl.textContent = midiSeedActive ? String(Math.round(midiBpm)) : "120";
+  if (tempoEl) tempoEl.textContent = (activePlayingStyle === "midi") ? String(Math.round(midiBpm)) : "120";
   
   setStatus("Warming AI model prompt...", "buffering");
   
@@ -779,13 +776,10 @@ async function start() {
       temperature: Math.max(0.05, Number(tempInput.value)),
       topK: Math.max(1, Number(topKInput.value)),
       bpm: Number(tempoEl.textContent || 120),
-      midiSeedActive: midiSeedActive,
-      midiTokens: midiSeedActive ? midiTokens : [],
+      playingStyle: activePlayingStyle,
+      midiTokens: (activePlayingStyle === "midi") ? midiTokens : [],
       midiStartBar: midiStartBar,
-      midiBpmMode: midiBpmMode,
-      bachSeedActive: bachSeedActive,
-      bachSymphonyActive: bachSymphonyActive,
-      bachSymphony2HandActive: bachSymphony2HandActive
+      midiBpmMode: midiBpmMode
     });
   });
   
@@ -1488,36 +1482,11 @@ toggleButtons.forEach(btn => {
     btn.classList.add("active");
     
     const value = btn.dataset.value;
+    activePlayingStyle = value;
     if (value === "midi") {
-      midiSeedActive = true;
       midiSeedControls.style.display = "block";
-      bachSeedActive = false;
-      bachSymphonyActive = false;
-      bachSymphony2HandActive = false;
-    } else if (value === "bach") {
-      midiSeedActive = false;
-      midiSeedControls.style.display = "none";
-      bachSeedActive = true;
-      bachSymphonyActive = false;
-      bachSymphony2HandActive = false;
-    } else if (value === "bach_symphony") {
-      midiSeedActive = false;
-      midiSeedControls.style.display = "none";
-      bachSeedActive = false;
-      bachSymphonyActive = true;
-      bachSymphony2HandActive = false;
-    } else if (value === "bach_symphony_2hand") {
-      midiSeedActive = false;
-      midiSeedControls.style.display = "none";
-      bachSeedActive = false;
-      bachSymphonyActive = false;
-      bachSymphony2HandActive = true;
     } else {
-      midiSeedActive = false;
       midiSeedControls.style.display = "none";
-      bachSeedActive = false;
-      bachSymphonyActive = false;
-      bachSymphony2HandActive = false;
     }
   });
 });

index.html

@@ -196,6 +196,12 @@
               <button type="button" class="toggle-btn" data-value="bach">Bach</button>
               <button type="button" class="toggle-btn active" data-value="bach_symphony">Grand Symphony</button>
               <button type="button" class="toggle-btn" data-value="bach_symphony_2hand">Grand Symphony (2-Hand)</button>
+              <button type="button" class="toggle-btn" data-value="mozart">Mozart</button>
+              <button type="button" class="toggle-btn" data-value="chopin">Chopin</button>
+              <button type="button" class="toggle-btn" data-value="debussy">Debussy</button>
+              <button type="button" class="toggle-btn" data-value="beethoven">Beethoven</button>
+              <button type="button" class="toggle-btn" data-value="satie">Satie</button>
+              <button type="button" class="toggle-btn" data-value="dark">Dark</button>
             </div>
             
             <!-- MIDI Seeding Controls (Expandable if active) -->

styles.css

@@ -368,6 +368,24 @@ body {
   flex-direction: column;
   gap: 20px;
   min-width: 0;
+  overflow-y: auto;
+  max-height: 100%;
+  padding-right: 4px;
+}
+
+/* Custom Scrollbar for Sidebar Column */
+.sidebar-column::-webkit-scrollbar {
+  width: 4px;
+}
+.sidebar-column::-webkit-scrollbar-track {
+  background: transparent;
+}
+.sidebar-column::-webkit-scrollbar-thumb {
+  background-color: rgba(255, 255, 255, 0.08);
+  border-radius: 4px;
+}
+.sidebar-column::-webkit-scrollbar-thumb:hover {
+  background-color: rgba(255, 255, 255, 0.15);
 }
 
 .info-sidebar {

worker.js

@@ -27,13 +27,10 @@ let currentBpm = 120;
 let midiBpmMode = "lock";
 
 // Seeding settings
-let midiSeedActive = false;
-let bachSeedActive = false;
+let playingStyle = "default";
 let midiTokens = [];
 let midiStartBar = 0;
 let isWarmingUp = false;
-let bachSymphonyActive = false;
-let bachSymphony2HandActive = false;
 
 // Temporal queues for gathering parsed events
 let tempQueue = [];
@@ -180,7 +177,7 @@ function makeEventParser() {
       if (token.startsWith("BPM_")) {
         const bpm = Number(token.slice(4));
         if (Number.isFinite(bpm) && bpm >= 40 && bpm <= 220) {
-          if (!midiSeedActive || isWarmingUp || midiBpmMode === "model") {
+          if (playingStyle !== "midi" || isWarmingUp || midiBpmMode === "model") {
             currentBpm = bpm;
             self.postMessage({ action: "tempo", bpm: bpm });
           }
@@ -270,9 +267,9 @@ async function warmPrompt() {
   c = zeroState();
   
   let allTokensStr;
-  if (midiSeedActive && midiTokens.length > 0) {
+  if (playingStyle === "midi" && midiTokens.length > 0) {
     allTokensStr = getTokensUpToBar(midiTokens, midiStartBar);
-  } else if (bachSeedActive) {
+  } else if (playingStyle === "bach") {
     allTokensStr = [
       "BOS", "BPM_100", "GRID_64",
       "BAR",
@@ -285,7 +282,7 @@ async function warmPrompt() {
       "POS_24", "NOTE_74", "DUR_16", "VEL_6",
       "BAR"
     ];
-  } else if (bachSymphonyActive) {
+  } else if (playingStyle === "bach_symphony") {
     allTokensStr = [
       "BOS", "BPM_120", "GRID_64",
       "BAR",
@@ -336,7 +333,7 @@ async function warmPrompt() {
       "NOTE_74", "DUR_32", "VEL_7",
       "BAR"
     ];
-  } else if (bachSymphony2HandActive) {
+  } else if (playingStyle === "bach_symphony_2hand") {
     allTokensStr = [
       "BOS", "BPM_120", "GRID_64",
       "BAR",
@@ -413,6 +410,140 @@ async function warmPrompt() {
       "NOTE_74", "DUR_32", "VEL_7",
       "BAR"
     ];
+  } else if (playingStyle === "mozart") {
+    allTokensStr = [
+      "BOS", "BPM_132", "GRID_64",
+      "BAR",
+      // Bright G-major chamber-style opening inspired by Mozart's serenades.
+      "POS_0", "NOTE_55", "DUR_8", "VEL_6",
+      "NOTE_67", "DUR_8", "VEL_6",
+      "POS_8", "NOTE_74", "DUR_4", "VEL_7",
+      "POS_12", "NOTE_71", "DUR_4", "VEL_6",
+      "POS_16", "NOTE_79", "DUR_8", "VEL_7",
+      "POS_24", "NOTE_78", "DUR_4", "VEL_6",
+      "POS_28", "NOTE_76", "DUR_4", "VEL_6",
+      "POS_32", "NOTE_74", "DUR_8", "VEL_7",
+      "POS_40", "NOTE_72", "DUR_4", "VEL_6",
+      "POS_44", "NOTE_71", "DUR_4", "VEL_6",
+      "POS_48", "NOTE_69", "DUR_8", "VEL_6",
+      "POS_56", "NOTE_67", "DUR_8", "VEL_7",
+      "BAR",
+      "POS_0", "NOTE_60", "DUR_16", "VEL_5",
+      "NOTE_64", "DUR_16", "VEL_5",
+      "NOTE_69", "DUR_16", "VEL_5",
+      "POS_16", "NOTE_72", "DUR_4", "VEL_6",
+      "POS_20", "NOTE_76", "DUR_4", "VEL_6",
+      "POS_24", "NOTE_81", "DUR_8", "VEL_7",
+      "POS_32", "NOTE_79", "DUR_4", "VEL_6",
+      "POS_36", "NOTE_78", "DUR_4", "VEL_6",
+      "POS_40", "NOTE_76", "DUR_4", "VEL_6",
+      "POS_44", "NOTE_74", "DUR_4", "VEL_6",
+      "POS_48", "NOTE_71", "DUR_8", "VEL_6",
+      "POS_56", "NOTE_67", "DUR_8", "VEL_7",
+      "BAR"
+    ];
+  } else if (playingStyle === "chopin") {
+    allTokensStr = [
+      "BOS", "BPM_68", "GRID_64",
+      "BAR",
+      // Original C-minor nocturne texture: rolling bass beneath a lyrical upper line.
+      "POS_0", "NOTE_36", "DUR_16", "VEL_4", "NOTE_72", "DUR_12", "VEL_6",
+      "POS_8", "NOTE_43", "DUR_8", "VEL_4",
+      "POS_12", "NOTE_75", "DUR_8", "VEL_6",
+      "POS_16", "NOTE_48", "DUR_8", "VEL_4",
+      "POS_24", "NOTE_51", "DUR_8", "VEL_4", "NOTE_77", "DUR_12", "VEL_6",
+      "POS_32", "NOTE_39", "DUR_16", "VEL_4", "NOTE_79", "DUR_16", "VEL_7",
+      "POS_40", "NOTE_46", "DUR_8", "VEL_4",
+      "POS_48", "NOTE_51", "DUR_8", "VEL_4", "NOTE_77", "DUR_8", "VEL_6",
+      "POS_56", "NOTE_55", "DUR_8", "VEL_4", "NOTE_75", "DUR_8", "VEL_5",
+      "BAR",
+      "POS_0", "NOTE_41", "DUR_16", "VEL_4", "NOTE_72", "DUR_16", "VEL_6",
+      "POS_8", "NOTE_48", "DUR_8", "VEL_4",
+      "POS_16", "NOTE_53", "DUR_8", "VEL_4", "NOTE_74", "DUR_8", "VEL_6",
+      "POS_24", "NOTE_56", "DUR_8", "VEL_4", "NOTE_75", "DUR_8", "VEL_6",
+      "POS_32", "NOTE_43", "DUR_16", "VEL_4", "NOTE_79", "DUR_12", "VEL_7",
+      "POS_40", "NOTE_50", "DUR_8", "VEL_4",
+      "POS_44", "NOTE_77", "DUR_8", "VEL_6",
+      "POS_48", "NOTE_55", "DUR_8", "VEL_4",
+      "POS_56", "NOTE_60", "DUR_8", "VEL_4", "NOTE_75", "DUR_8", "VEL_5",
+      "BAR"
+    ];
+  } else if (playingStyle === "debussy") {
+    allTokensStr = [
+      "BOS", "BPM_74", "GRID_64",
+      "BAR",
+      // Original impressionist sketch: open fifths and slowly shifting parallel colors.
+      "POS_0", "NOTE_38", "DUR_32", "VEL_3", "NOTE_57", "DUR_16", "VEL_4", "NOTE_62", "DUR_16", "VEL_4", "NOTE_69", "DUR_16", "VEL_5",
+      "POS_16", "NOTE_59", "DUR_16", "VEL_4", "NOTE_64", "DUR_16", "VEL_4", "NOTE_71", "DUR_16", "VEL_5",
+      "POS_32", "NOTE_45", "DUR_32", "VEL_3", "NOTE_61", "DUR_16", "VEL_4", "NOTE_66", "DUR_16", "VEL_4", "NOTE_73", "DUR_16", "VEL_5",
+      "POS_48", "NOTE_64", "DUR_16", "VEL_4", "NOTE_69", "DUR_16", "VEL_4", "NOTE_76", "DUR_16", "VEL_5",
+      "BAR",
+      "POS_0", "NOTE_40", "DUR_32", "VEL_3", "NOTE_59", "DUR_16", "VEL_4", "NOTE_64", "DUR_16", "VEL_4", "NOTE_71", "DUR_16", "VEL_5",
+      "POS_16", "NOTE_61", "DUR_16", "VEL_4", "NOTE_66", "DUR_16", "VEL_4", "NOTE_73", "DUR_16", "VEL_5",
+      "POS_32", "NOTE_43", "DUR_32", "VEL_3", "NOTE_62", "DUR_16", "VEL_4", "NOTE_67", "DUR_16", "VEL_4", "NOTE_74", "DUR_16", "VEL_5",
+      "POS_48", "NOTE_66", "DUR_16", "VEL_4", "NOTE_71", "DUR_16", "VEL_4", "NOTE_78", "DUR_16", "VEL_5",
+      "BAR"
+    ];
+  } else if (playingStyle === "beethoven") {
+    allTokensStr = [
+      "BOS", "BPM_126", "GRID_64",
+      "BAR",
+      // Original dramatic sonata gesture: compact motif, octave bass, accented response.
+      "POS_0", "NOTE_36", "DUR_8", "VEL_7", "NOTE_48", "DUR_8", "VEL_7", "NOTE_67", "DUR_4", "VEL_7",
+      "POS_4", "NOTE_70", "DUR_4", "VEL_7",
+      "POS_8", "NOTE_68", "DUR_8", "VEL_8",
+      "POS_16", "NOTE_43", "DUR_8", "VEL_6", "NOTE_55", "DUR_8", "VEL_6", "NOTE_65", "DUR_4", "VEL_7",
+      "POS_20", "NOTE_68", "DUR_4", "VEL_7",
+      "POS_24", "NOTE_67", "DUR_8", "VEL_8",
+      "POS_32", "NOTE_39", "DUR_8", "VEL_7", "NOTE_51", "DUR_8", "VEL_7", "NOTE_63", "DUR_4", "VEL_7",
+      "POS_36", "NOTE_67", "DUR_4", "VEL_7",
+      "POS_40", "NOTE_72", "DUR_8", "VEL_8",
+      "POS_48", "NOTE_44", "DUR_8", "VEL_6", "NOTE_56", "DUR_8", "VEL_6", "NOTE_70", "DUR_4", "VEL_7",
+      "POS_52", "NOTE_68", "DUR_4", "VEL_7",
+      "POS_56", "NOTE_67", "DUR_8", "VEL_8",
+      "BAR",
+      "POS_0", "NOTE_41", "DUR_16", "VEL_7", "NOTE_53", "DUR_16", "VEL_7", "NOTE_65", "DUR_8", "VEL_7",
+      "POS_8", "NOTE_68", "DUR_4", "VEL_7",
+      "POS_12", "NOTE_72", "DUR_4", "VEL_8",
+      "POS_16", "NOTE_77", "DUR_8", "VEL_8",
+      "POS_24", "NOTE_75", "DUR_8", "VEL_7",
+      "POS_32", "NOTE_43", "DUR_16", "VEL_7", "NOTE_55", "DUR_16", "VEL_7", "NOTE_74", "DUR_8", "VEL_7",
+      "POS_40", "NOTE_72", "DUR_8", "VEL_7",
+      "POS_48", "NOTE_67", "DUR_16", "VEL_8", "NOTE_72", "DUR_16", "VEL_8", "NOTE_75", "DUR_16", "VEL_8",
+      "BAR"
+    ];
+  } else if (playingStyle === "satie") {
+    allTokensStr = [
+      "BOS", "BPM_62", "GRID_64",
+      "BAR",
+      // Original sparse meditation: low bass, suspended chords, unhurried melody.
+      "POS_0", "NOTE_38", "DUR_32", "VEL_3", "NOTE_69", "DUR_20", "VEL_5",
+      "POS_16", "NOTE_57", "DUR_24", "VEL_3", "NOTE_62", "DUR_24", "VEL_3", "NOTE_65", "DUR_24", "VEL_3",
+      "POS_32", "NOTE_45", "DUR_32", "VEL_3", "NOTE_72", "DUR_16", "VEL_5",
+      "POS_48", "NOTE_55", "DUR_24", "VEL_3", "NOTE_60", "DUR_24", "VEL_3", "NOTE_64", "DUR_24", "VEL_3",
+      "BAR",
+      "POS_0", "NOTE_40", "DUR_32", "VEL_3", "NOTE_71", "DUR_20", "VEL_5",
+      "POS_16", "NOTE_59", "DUR_24", "VEL_3", "NOTE_64", "DUR_24", "VEL_3", "NOTE_67", "DUR_24", "VEL_3",
+      "POS_32", "NOTE_43", "DUR_32", "VEL_3", "NOTE_74", "DUR_16", "VEL_5",
+      "POS_48", "NOTE_57", "DUR_24", "VEL_3", "NOTE_62", "DUR_24", "VEL_3", "NOTE_66", "DUR_24", "VEL_3",
+      "BAR"
+    ];
+  } else if (playingStyle === "dark") {
+    allTokensStr = [
+      "BOS", "BPM_76", "GRID_64",
+      "BAR",
+      // Original dark prelude: chromatic bass motion and tense minor voicings.
+      "POS_0", "NOTE_33", "DUR_16", "VEL_6", "NOTE_45", "DUR_16", "VEL_6", "NOTE_60", "DUR_12", "VEL_5", "NOTE_64", "DUR_12", "VEL_5",
+      "POS_16", "NOTE_32", "DUR_16", "VEL_6", "NOTE_44", "DUR_16", "VEL_6", "NOTE_59", "DUR_12", "VEL_5", "NOTE_63", "DUR_12", "VEL_5",
+      "POS_32", "NOTE_31", "DUR_16", "VEL_7", "NOTE_43", "DUR_16", "VEL_7", "NOTE_58", "DUR_12", "VEL_5", "NOTE_62", "DUR_12", "VEL_5",
+      "POS_48", "NOTE_30", "DUR_16", "VEL_7", "NOTE_42", "DUR_16", "VEL_7", "NOTE_57", "DUR_12", "VEL_6", "NOTE_61", "DUR_12", "VEL_6",
+      "BAR",
+      "POS_0", "NOTE_29", "DUR_16", "VEL_7", "NOTE_41", "DUR_16", "VEL_7", "NOTE_56", "DUR_12", "VEL_5", "NOTE_60", "DUR_12", "VEL_5",
+      "POS_16", "NOTE_34", "DUR_16", "VEL_6", "NOTE_46", "DUR_16", "VEL_6", "NOTE_61", "DUR_12", "VEL_5", "NOTE_65", "DUR_12", "VEL_5",
+      "POS_32", "NOTE_35", "DUR_16", "VEL_6", "NOTE_47", "DUR_16", "VEL_6", "NOTE_62", "DUR_12", "VEL_5", "NOTE_66", "DUR_12", "VEL_5",
+      "POS_48", "NOTE_36", "DUR_16", "VEL_7", "NOTE_48", "DUR_16", "VEL_7", "NOTE_60", "DUR_16", "VEL_6", "NOTE_63", "DUR_16", "VEL_6",
+      "BAR"
+    ];
   } else {
     allTokensStr = ["BOS", "BPM_120", "GRID_64", "BAR", "POS_0"];
   }
@@ -483,13 +614,10 @@ self.onmessage = async function (e) {
         temperature = data.temperature;
         topK = data.topK;
         currentBpm = data.bpm;
-        midiSeedActive = data.midiSeedActive;
+        playingStyle = data.playingStyle || "default";
         midiTokens = data.midiTokens;
         midiStartBar = data.midiStartBar;
         midiBpmMode = data.midiBpmMode || "lock";
-        bachSeedActive = data.bachSeedActive || false;
-        bachSymphonyActive = data.bachSymphonyActive || false;
-        bachSymphony2HandActive = data.bachSymphony2HandActive || false;
         
         parser = makeParser();
         parser.reset();