Upload index.js with huggingface_hub

index.js

@@ -0,0 +1,515 @@
+/**
+ * app.js
+ *
+ * Browser-based mini-DAW demo with:
+ * - Simple 4-track Web Audio drum step sequencer
+ * - Text-based "piano roll" notes area
+ * - AI Song Starter powered by transformers.js running in a Web Worker
+ *
+ * This is intentionally focused: in a real implementation you would plug
+ * this UI and audio engine into the much larger architecture described
+ * in the technical spec (cloud sync, collaboration, Web3, etc.).
+ */
+
+const GRID_STEPS = 16;
+const TRACKS = [
+  { name: "Kick", freq: 60, trackIndex: 0 },
+  { name: "Snare", freq: 180, trackIndex: 1 },
+  { name: "Hi-hat", freq: 4000, trackIndex: 2 },
+  { name: "Bass", freq: 90, trackIndex: 3 }, // simple bass thump
+];
+
+// Simple in-memory "project" state
+const state = {
+  grid: Array(TRACKS.length)
+    .fill(null)
+    .map(() => Array(GRID_STEPS).fill(false)),
+  bpm: 90,
+  isPlaying: false,
+  currentStep: 0,
+  audio: {
+    ctx: null,
+    masterGain: null,
+    trackGains: [],
+    metronomeGain: null,
+  },
+};
+
+// DOM references
+const gridEl = document.getElementById("step-grid");
+const playBtn = document.getElementById("play-btn");
+const stopBtn = document.getElementById("stop-btn");
+const clearGridBtn = document.getElementById("clear-grid-btn");
+const bpmInput = document.getElementById("project-bpm");
+const metronomeToggle = document.getElementById("metronome-toggle");
+const exportJsonBtn = document.getElementById("export-json-btn");
+const downloadLink = document.getElementById("download-link");
+
+// AI panel refs
+const aiGenreInput = document.getElementById("ai-genre");
+const aiMoodInput = document.getElementById("ai-mood");
+const aiTaskSelect = document.getElementById("ai-task");
+const aiOutput = document.getElementById("ai-output");
+const aiError = document.getElementById("ai-error");
+const aiGenerateBtn = document.getElementById("generate-idea-btn");
+const modelStatus = document.getElementById("model-status");
+const modelProgress = document.getElementById("model-progress");
+const progressText = document.getElementById("model-progress-text");
+const progressBarInner = document.getElementById("model-progress-bar-inner");
+const exampleChips = document.querySelectorAll(".chip");
+
+// Melody notes area (text-based "piano roll")
+const melodyNotesArea = document.getElementById("melody-notes");
+
+// Audio scheduling
+let nextNoteTime = 0;
+let stepTimerId = null;
+
+/**
+ * AUDIO ENGINE
+ */
+function ensureAudioContext() {
+  if (state.audio.ctx) return;
+  const ctx = new (window.AudioContext || window.webkitAudioContext)();
+  const masterGain = ctx.createGain();
+  masterGain.gain.value = 0.9;
+  masterGain.connect(ctx.destination);
+
+  const trackGains = TRACKS.map(() => {
+    const g = ctx.createGain();
+    g.gain.value = 0.8;
+    g.connect(masterGain);
+    return g;
+  });
+
+  const metGain = ctx.createGain();
+  metGain.gain.value = 0.0;
+  metGain.connect(masterGain);
+
+  state.audio.ctx = ctx;
+  state.audio.masterGain = masterGain;
+  state.audio.trackGains = trackGains;
+  state.audio.metronomeGain = metGain;
+}
+
+function triggerDrum(trackIndex, time) {
+  const ctx = state.audio.ctx;
+  const freq = TRACKS[trackIndex].freq;
+
+  if (trackIndex === 0) {
+    // Kick: short decaying sine
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.type = "sine";
+    osc.frequency.setValueAtTime(freq, time);
+    osc.frequency.exponentialRampToValueAtTime(40, time + 0.1);
+    gain.gain.setValueAtTime(0.9, time);
+    gain.gain.exponentialRampToValueAtTime(0.001, time + 0.2);
+    osc.connect(gain);
+    gain.connect(state.audio.trackGains[trackIndex]);
+    osc.start(time);
+    osc.stop(time + 0.25);
+  } else if (trackIndex === 1) {
+    // Snare: noise + high tone
+    const noiseBuf = ctx.createBuffer(1, ctx.sampleRate * 0.2, ctx.sampleRate);
+    const data = noiseBuf.getChannelData(0);
+    for (let i = 0; i < data.length; i++) {
+      data[i] = (Math.random() * 2 - 1) * 0.5;
+    }
+    const noise = ctx.createBufferSource();
+    noise.buffer = noiseBuf;
+
+    const noiseGain = ctx.createGain();
+    noiseGain.gain.setValueAtTime(0.7, time);
+    noiseGain.gain.exponentialRampToValueAtTime(0.001, time + 0.2);
+
+    const bandpass = ctx.createBiquadFilter();
+    bandpass.type = "bandpass";
+    bandpass.frequency.value = 1800;
+    bandpass.Q.value = 0.5;
+
+    noise.connect(bandpass);
+    bandpass.connect(noiseGain);
+    noiseGain.connect(state.audio.trackGains[trackIndex]);
+
+    noise.start(time);
+    noise.stop(time + 0.25);
+  } else if (trackIndex === 2) {
+    // Hi-hat: high-pass noise
+    const noiseBuf = ctx.createBuffer(1, ctx.sampleRate * 0.08, ctx.sampleRate);
+    const data = noiseBuf.getChannelData(0);
+    for (let i = 0; i < data.length; i++) {
+      data[i] = (Math.random() * 2 - 1) * 0.4;
+    }
+    const noise = ctx.createBufferSource();
+    noise.buffer = noiseBuf;
+
+    const hp = ctx.createBiquadFilter();
+    hp.type = "highpass";
+    hp.frequency.value = 7000;
+    const g = ctx.createGain();
+    g.gain.setValueAtTime(0.5, time);
+    g.gain.exponentialRampToValueAtTime(0.001, time + 0.08);
+
+    noise.connect(hp);
+    hp.connect(g);
+    g.connect(state.audio.trackGains[trackIndex]);
+
+    noise.start(time);
+    noise.stop(time + 0.1);
+  } else if (trackIndex === 3) {
+    // Bass thump
+    const osc = ctx.createOscillator();
+    const gain = ctx.createGain();
+    osc.type = "sawtooth";
+    osc.frequency.setValueAtTime(freq, time);
+    gain.gain.setValueAtTime(0.35, time);
+    gain.gain.exponentialRampToValueAtTime(0.001, time + 0.25);
+    osc.connect(gain);
+    gain.connect(state.audio.trackGains[trackIndex]);
+    osc.start(time);
+    osc.stop(time + 0.3);
+  }
+}
+
+function triggerMetronome(time, isBarStart) {
+  if (!metronomeToggle.checked) return;
+  const ctx = state.audio.ctx;
+  const osc = ctx.createOscillator();
+  const gain = ctx.createGain();
+  osc.type = "square";
+  osc.frequency.value = isBarStart ? 2200 : 1400;
+  gain.gain.setValueAtTime(isBarStart ? 0.45 : 0.28, time);
+  gain.gain.exponentialRampToValueAtTime(0.001, time + 0.05);
+  osc.connect(gain);
+  gain.connect(state.audio.metronomeGain);
+  osc.start(time);
+  osc.stop(time + 0.08);
+}
+
+function scheduleNextStep() {
+  if (!state.isPlaying || !state.audio.ctx) return;
+
+  const secondsPerBeat = 60 / state.bpm;
+  const stepDuration = secondsPerBeat / 4; // 16th note
+  const ctx = state.audio.ctx;
+
+  while (nextNoteTime < ctx.currentTime + 0.1) {
+    const stepIndex = state.currentStep;
+    const isBarStart = stepIndex % 4 === 0;
+
+    // Schedule metronome
+    triggerMetronome(nextNoteTime, isBarStart);
+
+    // Schedule tracks if active
+    for (let t = 0; t < TRACKS.length; t++) {
+      if (state.grid[t][stepIndex]) {
+        triggerDrum(t, nextNoteTime);
+      }
+    }
+
+    // Visual highlight
+    highlightStep(stepIndex);
+
+    // Advance
+    state.currentStep = (state.currentStep + 1) % GRID_STEPS;
+    nextNoteTime += stepDuration;
+  }
+
+  stepTimerId = requestAnimationFrame(scheduleNextStep);
+}
+
+function startPlayback() {
+  ensureAudioContext();
+  if (state.isPlaying) return;
+  const ctx = state.audio.ctx;
+  if (ctx.state === "suspended") ctx.resume();
+
+  state.isPlaying = true;
+  nextNoteTime = ctx.currentTime + 0.05;
+  state.currentStep = 0;
+  scheduleNextStep();
+}
+
+function stopPlayback() {
+  state.isPlaying = false;
+  if (stepTimerId) cancelAnimationFrame(stepTimerId);
+  stepTimerId = null;
+  clearStepHighlight();
+}
+
+/**
+ * GRID UI
+ */
+function buildGrid() {
+  gridEl.innerHTML = "";
+  gridEl.style.setProperty("--grid-cols", GRID_STEPS);
+  for (let trackIndex = 0; trackIndex < TRACKS.length; trackIndex++) {
+    for (let step = 0; step < GRID_STEPS; step++) {
+      const cell = document.createElement("div");
+      cell.className = "step-cell";
+      cell.dataset.track = String(trackIndex);
+      cell.dataset.step = String(step);
+      cell.addEventListener("click", onGridCellClick);
+      gridEl.appendChild(cell);
+    }
+  }
+}
+
+function onGridCellClick(e) {
+  const cell = e.currentTarget;
+  const trackIndex = Number(cell.dataset.track);
+  const step = Number(cell.dataset.step);
+  state.grid[trackIndex][step] = !state.grid[trackIndex][step];
+  cell.classList.toggle("active", state.grid[trackIndex][step]);
+  // One-shot preview when clicking while stopped
+  if (!state.isPlaying) {
+    ensureAudioContext();
+    triggerDrum(trackIndex, state.audio.ctx.currentTime + 0.01);
+  }
+}
+
+function highlightStep(stepIndex) {
+  const cells = gridEl.querySelectorAll(".step-cell");
+  cells.forEach((cell) => {
+    const s = Number(cell.dataset.step);
+    if (s === stepIndex) {
+      cell.style.boxShadow = "0 0 0 1px rgba(159,210,123,0.9), 0 0 12px rgba(159,210,123,0.7)";
+    } else {
+      cell.style.boxShadow = "none";
+    }
+  });
+}
+
+function clearStepHighlight() {
+  const cells = gridEl.querySelectorAll(".step-cell");
+  cells.forEach((cell) => (cell.style.boxShadow = "none"));
+}
+
+/**
+ * TRACK CONTROLS (mute/solo/gain)
+ */
+function initTrackControls() {
+  const muteButtons = document.querySelectorAll(".mute-btn");
+  const soloButtons = document.querySelectorAll(".solo-btn");
+  const faders = document.querySelectorAll('.track-faders input[type="range"]');
+
+  muteButtons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const trackIndex = Number(btn.dataset.track);
+      btn.classList.toggle("active");
+      updateTrackGains();
+    });
+  });
+
+  soloButtons.forEach((btn) => {
+    btn.addEventListener("click", () => {
+      const trackIndex = Number(btn.dataset.track);
+      btn.classList.toggle("active");
+      updateTrackGains();
+    });
+  });
+
+  faders.forEach((fader) => {
+    fader.addEventListener("input", () => {
+      const trackIndex = Number(fader.dataset.track);
+      const value = Number(fader.value);
+      ensureAudioContext();
+      state.audio.trackGains[trackIndex].gain.value = value;
+    });
+  });
+}
+
+function updateTrackGains() {
+  ensureAudioContext();
+  const mutes = document.querySelectorAll(".mute-btn");
+  const solos = document.querySelectorAll(".solo-btn");
+  const faders = document.querySelectorAll('.track-faders input[type="range"]');
+
+  const soloed = new Set(
+    Array.from(solos)
+      .filter((b) => b.classList.contains("active"))
+      .map((b) => Number(b.dataset.track))
+  );
+
+  for (let i = 0; i < TRACKS.length; i++) {
+    const isMuted = Array.from(mutes).some(
+      (b) => Number(b.dataset.track) === i && b.classList.contains("active")
+    );
+    const hasSolo = soloed.size > 0;
+    const isSoloed = soloed.has(i);
+    const baseGain =
+      Number(
+        Array.from(faders).find((f) => Number(f.dataset.track) === i)?.value ?? 0.8
+      ) || 0.8;
+
+    let gain = baseGain;
+    if (hasSolo && !isSoloed) {
+      gain = 0;
+    } else if (isMuted) {
+      gain = 0;
+    }
+    state.audio.trackGains[i].gain.value = gain;
+  }
+}
+
+/**
+ * EXPORT (simple JSON snapshot, illustrating serialization)
+ */
+function exportProjectJson() {
+  const project = {
+    title: document.getElementById("project-title").value || "Untitled Web DAW Sketch",
+    bpm: state.bpm,
+    bars: 4,
+    gridSteps: GRID_STEPS,
+    tracks: TRACKS.map((t, i) => ({
+      name: t.name,
+      index: i,
+      pattern: state.grid[i],
+    })),
+    melodyNotes: melodyNotesArea.value,
+    aiNotes: aiOutput.value,
+    createdAt: new Date().toISOString(),
+  };
+
+  const blob = new Blob([JSON.stringify(project, null, 2)], {
+    type: "application/json",
+  });
+  const url = URL.createObjectURL(blob);
+  const filename = `${(project.title || "project").replace(/\s+/g, "_")}.json`;
+
+  downloadLink.href = url;
+  downloadLink.download = filename;
+  downloadLink.click();
+
+  setTimeout(() => URL.revokeObjectURL(url), 10000);
+}
+
+/**
+ * AI WORKER / TRANSFORMERS.JS
+ */
+
+// Web worker instance
+let aiWorker = null;
+let modelReady = false;
+
+function initWorker() {
+  aiWorker = new Worker("worker.js", { type: "module" });
+
+  aiWorker.onmessage = (event) => {
+    const { type, payload } = event.data || {};
+    switch (type) {
+      case "status":
+        handleWorkerStatus(payload);
+        break;
+      case "progress":
+        handleWorkerProgress(payload);
+        break;
+      case "ready":
+        modelReady = true;
+        modelStatus.textContent = "Model loaded – you can now generate ideas.";
+        modelStatus.className = "status status-ok";
+        aiGenerateBtn.disabled = false;
+        aiGenerateBtn.textContent = "Generate AI idea";
+        modelProgress.classList.add("hidden");
+        break;
+      case "result":
+        handleWorkerResult(payload);
+        break;
+      case "error":
+        handleWorkerError(payload);
+        break;
+      default:
+        break;
+    }
+  };
+
+  aiWorker.onerror = (e) => {
+    console.error("Worker error:", e);
+    aiError.textContent =
+      "Worker error while loading transformers.js. Check console for details.";
+    aiError.classList.remove("hidden");
+    modelStatus.textContent = "Error initializing model.";
+    modelStatus.className = "status status-error";
+    aiGenerateBtn.disabled = true;
+  };
+}
+
+function handleWorkerStatus(message) {
+  modelStatus.textContent = message;
+}
+
+function handleWorkerProgress({ loaded, total }) {
+  if (!total || total <= 0) return;
+  const pct = Math.round((loaded / total) * 100);
+  progressText.textContent = `${pct}%`;
+  progressBarInner.style.width = `${pct}%`;
+  modelProgress.classList.remove("hidden");
+}
+
+function handleWorkerResult({ text }) {
+  aiGenerateBtn.disabled = false;
+  aiGenerateBtn.textContent = "Generate AI idea";
+  aiError.classList.add("hidden");
+
+  const trimmed = text.trim();
+  aiOutput.value = trimmed;
+  // Simple heuristic: if chord or drum idea, also drop into melody notes area as a sketch
+  if (aiTaskSelect.value === "chords" || aiTaskSelect.value === "melody") {
+    melodyNotesArea.value = trimmed;
+  }
+}
+
+function handleWorkerError({ error }) {
+  console.error("AI error:", error);
+  aiGenerateBtn.disabled = false;
+  aiGenerateBtn.textContent = "Generate AI idea";
+  aiError.textContent = error || "Unknown error from AI worker.";
+  aiError.classList.remove("hidden");
+}
+
+function triggerAIGeneration() {
+  if (!aiWorker || !modelReady) return;
+  aiError.classList.add("hidden");
+
+  const genre = (aiGenreInput.value || "lofi hip hop").trim();
+  const mood = (aiMoodInput.value || "chill").trim();
+  const task = aiTaskSelect.value;
+
+  const bpm = Number(bpmInput.value) || 90;
+  const key = (document.getElementById("project-key").value || "C minor").trim();
+
+  let prompt;
+  if (task === "chords") {
+    prompt = `You are an expert music theory assistant for beatmakers. Suggest a 4-bar chord progression in ${key} for a ${genre} track with a ${mood} vibe at ${bpm} BPM.
+Return ONLY a compact, bar-by-bar text description, one bar per line. Example format:
+Bar 1: Cmin7 - Gmin7
+Bar 2: Ebmaj7 - Fmin7
+Bar 3: Abmaj7 - Gmin7
+Bar 4: turnaround...`;
+  } else if (task === "drums") {
+    prompt = `You are a drum programmer helping a producer. Suggest a 1-bar, 16-step drum pattern for a ${genre} beat (${mood}, ${bpm} BPM).
+Use a compact ASCII grid with K (kick), S (snare), H (hi-hat), . for rest, grouped by 4 steps per beat. Example:
+Kick : K..K .... K..K ....
+Snare: .... S... .... S...
+Hat  : H.H. H.H. H.H. H.H.`;
+  } else if (task === "melody") {
+    prompt = `You are a melody writer. Based on ${genre} with a ${mood} vibe in ${key} at ${bpm} BPM,
+suggest a simple 2-bar hook melody. Return a clear, text-only description like:
+Bar 1: notes (timing), e.g. C4 (1&), D4 (1e), ...
+Bar 2: ...`;
+  } else if (task === "arrangement") {
+    prompt = `You are a modern music producer. For a ${genre} track with a ${mood} vibe in ${key} at ${bpm} BPM,
+suggest a simple A/B arrangement for 16 bars. Example:
+Bars 1-4: Intro (filtered drums, no bass)
+Bars 5-8: A-section (full drums, bass, chords)
+Bars 9-12: B-section (add lead, remove hi-hats)
+Bars 13-16: Drop / outro.`;
+  } else if (task === "mix") {
+    prompt = `You are an AI mix engineer. The user has a beat in ${genre} (${mood}, ${bpm} BPM, key ${key}).
+Give concise bullet-point mixing tips focusing on kick, bass, drums bus, and main melody.
+Keep it short, text-only.`;
+  }
+
+  aiGenerateBtn.disabled = true;
+  aiGenerateBtn