1 files changed, 569 insertions, 0 deletions
diff --git a/tools/mq_editor/app.js b/tools/mq_editor/app.js
new file mode 100644
index 0000000..1c6d548
--- /dev/null
+++ b/tools/mq_editor/app.js
@@ -0,0 +1,569 @@
+// MQ Editor — application glue (extracted from index.html)
+
+// LP: y[n] = k*x[n] + (1-k)*y[n-1]  => -3dB at cos(w) = (2-2k-k²)/(2(1-k))
+function k1ToHz(k, sr) {
+  if (k >= 1.0) return sr / 2;
+  const cosW = (2 - 2*k - k*k) / (2*(1 - k));
+  return Math.acos(clamp(cosW, -1, 1)) * sr / (2 * Math.PI);
+}
+// HP: y[n] = k*(y[n-1]+x[n]-x[n-1])  => -3dB from peak at cos(w) = 2k/(1+k²)
+function k2ToHz(k, sr) {
+  if (k >= 1.0) return 0;
+  const cosW = 2*k / (1 + k*k);
+  return Math.acos(clamp(cosW, -1, 1)) * sr / (2 * Math.PI);
+}
+function fmtHz(f) {
+  return f >= 1000 ? (f/1000).toFixed(1) + 'k' : Math.round(f) + 'Hz';
+}
+function getSR() { return (typeof audioBuffer !== 'undefined' && audioBuffer) ? audioBuffer.sampleRate : 44100; }
+
+// Params dropdown toggle
+(function() {
+  const btn = document.getElementById('paramsBtn');
+  const panel = document.getElementById('paramsPanel');
+  btn.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const open = panel.classList.toggle('open');
+    btn.classList.toggle('params-open', open);
+  });
+  document.addEventListener('click', (e) => {
+    if (!panel.contains(e.target) && e.target !== btn) {
+      panel.classList.remove('open');
+      btn.classList.remove('params-open');
+    }
+  });
+})();
+
+// LP/HP slider live display
+document.getElementById('lpK1').addEventListener('input', function() {
+  const k = parseFloat(this.value);
+  const f = k1ToHz(k, getSR());
+  document.getElementById('lpK1Val').textContent = k >= 1.0 ? 'bypass' : fmtHz(f);
+});
+document.getElementById('hpK2').addEventListener('input', function() {
+  const k = parseFloat(this.value);
+  const f = k2ToHz(k, getSR());
+  document.getElementById('hpK2Val').textContent = k >= 1.0 ? 'bypass' : fmtHz(f);
+});
+
+// Show/hide global resonator params when forceResonator toggled
+document.getElementById('forceResonator').addEventListener('change', function() {
+  document.getElementById('globalResParams').style.display = this.checked ? '' : 'none';
+  if (viewer) viewer.render();
+});
+document.getElementById('globalR').addEventListener('input', function() {
+  document.getElementById('globalRVal').textContent = parseFloat(this.value).toFixed(4);
+  if (viewer) viewer.render();
+});
+document.getElementById('globalGain').addEventListener('input', function() {
+  document.getElementById('globalGainVal').textContent = parseFloat(this.value).toFixed(2);
+  if (viewer) viewer.render();
+});
+document.getElementById('forceRGain').addEventListener('change', () => { if (viewer) viewer.render(); });
+
+let audioBuffer = null;
+let viewer = null;
+let audioContext = null;
+let currentSource = null;
+let extractedPartials = null;
+let stftCache = null;
+let exploreMode = false; // false | 'peak' | 'contour'
+
+function setExploreMode(mode) { // false | 'peak' | 'contour'
+  exploreMode = mode;
+  document.getElementById('exploreBtn').classList.toggle('explore-active', mode === 'peak');
+  document.getElementById('contourBtn').classList.toggle('contour-active', mode === 'contour');
+  if (viewer) viewer.setExploreMode(mode);
+}
+
+// Undo/redo
+const undoStack = [];
+const redoStack = [];
+
+function _updateUndoRedoBtns() {
+  document.getElementById('undoBtn').disabled = undoStack.length === 0;
+  document.getElementById('redoBtn').disabled = redoStack.length === 0;
+}
+
+function pushUndo() {
+  undoStack.push(JSON.parse(JSON.stringify(extractedPartials || [])));
+  redoStack.length = 0;
+  if (undoStack.length > 50) undoStack.shift();
+  _updateUndoRedoBtns();
+}
+
+function refreshPartialsView(selectIdx = -1) {
+  editor.setPartials(extractedPartials);
+  if (viewer) {
+    viewer.setPartials(extractedPartials);
+    viewer.setKeepCount(extractedPartials && extractedPartials.length > 0 ? getKeepCount() : 0);
+    viewer.selectPartial(selectIdx);
+  }
+}
+
+function _applySnapshot(snap) {
+  extractedPartials = snap;
+  refreshPartialsView();
+  _updateUndoRedoBtns();
+}
+
+function undo() {
+  if (!undoStack.length) return;
+  redoStack.push(JSON.parse(JSON.stringify(extractedPartials || [])));
+  _applySnapshot(undoStack.pop());
+}
+
+function redo() {
+  if (!redoStack.length) return;
+  undoStack.push(JSON.parse(JSON.stringify(extractedPartials || [])));
+  _applySnapshot(redoStack.pop());
+}
+
+const wavFile = document.getElementById('wavFile');
+const chooseFileBtn = document.getElementById('chooseFileBtn');
+const extractBtn = document.getElementById('extractBtn');
+const autoSpreadAllBtn = document.getElementById('autoSpreadAllBtn');
+const playBtn = document.getElementById('playBtn');
+const stopBtn = document.getElementById('stopBtn');
+const canvas = document.getElementById('canvas');
+const status = document.getElementById('status');
+const fileLabel = document.getElementById('fileLabel');
+
+const hopSize = document.getElementById('hopSize');
+const threshold = document.getElementById('threshold');
+const prominence = document.getElementById('prominence');
+const freqWeightCb = document.getElementById('freqWeight');
+const birthPersistenceEl = document.getElementById('birthPersistence');
+const deathAgeEl = document.getElementById('deathAge');
+const phaseErrorWeightEl = document.getElementById('phaseErrorWeight');
+const minLengthEl = document.getElementById('minLength');
+const keepPct = document.getElementById('keepPct');
+const keepPctLabel = document.getElementById('keepPctLabel');
+const fftSize = 1024; // Fixed
+
+function getKeepCount() {
+  return Math.max(1, Math.ceil(extractedPartials.length * parseInt(keepPct.value) / 100));
+}
+
+keepPct.addEventListener('input', () => {
+  keepPctLabel.textContent = keepPct.value + '%';
+  if (viewer && extractedPartials) viewer.setKeepCount(getKeepCount());
+});
+
+// --- Editor ---
+const editor = new PartialEditor();
+editor.onPartialDeleted = () => {
+  if (viewer && extractedPartials)
+    viewer.setKeepCount(extractedPartials.length > 0 ? getKeepCount() : 0);
+};
+editor.onBeforeChange = pushUndo;
+
+// Initialize audio context
+function initAudioContext() {
+  if (!audioContext) {
+    audioContext = new (window.AudioContext || window.webkitAudioContext)();
+  }
+}
+
+// Shared: initialize editor from an AudioBuffer
+function loadAudioBuffer(buffer, label) {
+  audioBuffer = buffer;
+  initAudioContext();
+  extractBtn.disabled = false;
+  playBtn.disabled = false;
+  setStatus('Computing STFT cache...', 'info');
+
+  // Reset partials from previous file
+  extractedPartials = null;
+  editor.setPartials(null);
+
+  setTimeout(() => {
+    const signal = audioBuffer.getChannelData(0);
+    stftCache = new STFTCache(signal, audioBuffer.sampleRate, fftSize, Math.max(64, parseInt(hopSize.value) || 64));
+    setStatus(`${label} — ${audioBuffer.duration.toFixed(2)}s, ${audioBuffer.sampleRate}Hz, ${audioBuffer.numberOfChannels}ch (${stftCache.getNumFrames()} frames cached)`, 'info');
+
+    // Pre-compute peak frames so explore mode works immediately (before Extract)
+    const peakFrames = [];
+    for (let i = 0; i < stftCache.getNumFrames(); ++i) {
+      const f = stftCache.getFrameAtIndex(i);
+      peakFrames.push({
+        time: f.time,
+        peaks: detectPeaks(f.squaredAmplitude, f.phase, fftSize, audioBuffer.sampleRate,
+                           parseFloat(threshold.value), freqWeightCb.checked,
+                           parseFloat(prominence.value)),
+      });
+    }
+
+    if (viewer) viewer.destroy();
+    viewer = new SpectrogramViewer(canvas, audioBuffer, stftCache);
+    viewer.setFrames(peakFrames);
+    document.getElementById('exploreBtn').disabled = false;
+    document.getElementById('contourBtn').disabled = false;
+    editor.setViewer(viewer);
+    viewer.onGetSynthOpts   = () => getSynthParams().opts;
+    viewer.onPartialSelect  = (i) => editor.onPartialSelect(i);
+    viewer.onRender        = ()  => editor.onRender();
+    viewer.onBeforeChange  = pushUndo;
+    viewer.onExploreMove = (time, freq) => {
+      let partial = null;
+      if (exploreMode === 'peak') {
+        if (!viewer.frames || viewer.frames.length === 0) return;
+        partial = trackFromSeed(viewer.frames, time, freq, {
+          hopSize: Math.max(64, parseInt(hopSize.value) || 64),
+          sampleRate: audioBuffer.sampleRate,
+          deathAge: parseInt(deathAgeEl.value),
+          phaseErrorWeight: parseFloat(phaseErrorWeightEl.value),
+        });
+      } else if (exploreMode === 'contour') {
+        partial = trackIsoContour(stftCache, time, freq, {
+          sampleRate: audioBuffer.sampleRate,
+          deathAge: parseInt(deathAgeEl.value),
+        });
+      }
+      viewer.setPreviewPartial(partial);
+    };
+    viewer.onExploreCommit = (partial) => {
+      if (!extractedPartials) extractedPartials = [];
+      pushUndo();
+      const {spread} = autodetectSpread(partial, stftCache, fftSize, audioBuffer.sampleRate);
+      if (!partial.harmonics) partial.harmonics = { decay: 0.0, freq_mult: 2.0, jitter: 0.05, spread: 0.02 };
+      partial.harmonics.spread = spread;
+      extractedPartials.unshift(partial);
+      refreshPartialsView(0);
+      setStatus(`${exploreMode}: added partial (${extractedPartials.length} total)`, 'info');
+    };
+  }, 10);
+}
+
+// File chooser button
+chooseFileBtn.addEventListener('click', () => wavFile.click());
+
+// Load WAV file
+wavFile.addEventListener('change', async (e) => {
+  const file = e.target.files[0];
+  if (!file) return;
+
+  fileLabel.textContent = file.name;
+  setStatus('Loading WAV...', 'info');
+  try {
+    const arrayBuffer = await file.arrayBuffer();
+    const ctx = new AudioContext();
+    const buf = await ctx.decodeAudioData(arrayBuffer);
+    loadAudioBuffer(buf, `Loaded: ${file.name}`);
+  } catch (err) {
+    setStatus('Error loading WAV: ' + err.message, 'error');
+    console.error(err);
+  }
+});
+
+// Update cache when hop size changes
+hopSize.addEventListener('change', () => {
+  const val = Math.max(64, parseInt(hopSize.value) || 64);
+  hopSize.value = val;
+  if (stftCache) {
+    setStatus('Updating STFT cache...', 'info');
+    setTimeout(() => {
+      stftCache.setHopSize(val);
+      setStatus(`Cache updated (${stftCache.getNumFrames()} frames)`, 'info');
+      if (viewer) viewer.render();
+    }, 10);
+  }
+});
+
+function runExtraction() {
+  if (!stftCache) return;
+
+  setStatus('Extracting partials...', 'info');
+  extractBtn.disabled = true;
+
+  setTimeout(() => {
+    try {
+      const params = {
+        fftSize: fftSize,
+        hopSize: parseInt(hopSize.value),
+        threshold: parseFloat(threshold.value),
+        prominence: parseFloat(prominence.value),
+        freqWeight: freqWeightCb.checked,
+        birthPersistence: parseInt(birthPersistenceEl.value),
+        deathAge: parseInt(deathAgeEl.value),
+        phaseErrorWeight: parseFloat(phaseErrorWeightEl.value),
+        minLength: parseInt(minLengthEl.value),
+        sampleRate: audioBuffer.sampleRate
+      };
+
+      const result = extractPartials(params, stftCache);
+
+      // Sort by decreasing peak amplitude
+      result.partials.sort((a, b) => {
+        const peakA = a.amps.reduce((m, v) => Math.max(m, v), 0);
+        const peakB = b.amps.reduce((m, v) => Math.max(m, v), 0);
+        return peakB - peakA;
+      });
+
+      extractedPartials = result.partials;
+      autoSpreadAll();
+      viewer.setFrames(result.frames);
+      setStatus(`Extracted ${result.partials.length} partials`, 'info');
+      refreshPartialsView();
+
+    } catch (err) {
+      setStatus('Extraction error: ' + err.message, 'error');
+      console.error(err);
+    }
+    extractBtn.disabled = false;
+    autoSpreadAllBtn.disabled = false;
+    document.getElementById('newPartialBtn').disabled = false;
+    document.getElementById('clearAllBtn').disabled = false;
+    undoStack.length = 0; redoStack.length = 0; _updateUndoRedoBtns();
+  }, 50);
+}
+
+extractBtn.addEventListener('click', () => {
+  if (!audioBuffer) return;
+  runExtraction();
+});
+
+function createNewPartial() {
+  if (!audioBuffer || !extractedPartials) return;
+  pushUndo();
+  const dur = audioBuffer.duration;
+  const newPartial = {
+    times:  [0, dur],
+    freqs:  [440, 440],
+    amps:   [1.0, 1.0],
+    phases: [0, 0],
+    muted:  false,
+    freqCurve: {
+      t0: 0,       t1: dur / 3,     t2: dur * 2 / 3, t3: dur,
+      v0: 440,     v1: 440,         v2: 440,          v3: 440,
+      a0: 1.0,     a1: 1.0,         a2: 1.0,          a3: 1.0,
+    },
+    harmonics: { decay: 0.0, freq_mult: 2.0, jitter: 0.05, spread: 0.02 },
+  };
+  extractedPartials.unshift(newPartial);
+  refreshPartialsView(0);
+}
+
+function clearAllPartials() {
+  if (!extractedPartials || extractedPartials.length === 0) return;
+  pushUndo();
+  extractedPartials = [];
+  refreshPartialsView();
+}
+
+document.getElementById('newPartialBtn').addEventListener('click', createNewPartial);
+document.getElementById('clearAllBtn').addEventListener('click', clearAllPartials);
+document.getElementById('exploreBtn').addEventListener('click', () => setExploreMode(exploreMode === 'peak' ? false : 'peak'));
+document.getElementById('contourBtn').addEventListener('click', () => setExploreMode(exploreMode === 'contour' ? false : 'contour'));
+document.getElementById('undoBtn').addEventListener('click', undo);
+document.getElementById('redoBtn').addEventListener('click', redo);
+
+function autoSpreadAll() {
+  if (!extractedPartials || !stftCache) return;
+  const fs = stftCache.fftSize;
+  const sr = audioBuffer.sampleRate;
+  const defaults = { decay: 0.0, freq_mult: 2.0, jitter: 0.05, spread: 0.02 };
+  for (const p of extractedPartials) {
+    const {spread} = autodetectSpread(p, stftCache, fs, sr);
+    if (!p.harmonics) p.harmonics = { ...defaults };
+    p.harmonics.spread = spread;
+  }
+  if (viewer) viewer.render();
+  const sel = viewer ? viewer.selectedPartial : -1;
+  if (sel >= 0) editor.onPartialSelect(sel);
+  setStatus(`Auto-spread applied to ${extractedPartials.length} partials`, 'info');
+}
+
+autoSpreadAllBtn.addEventListener('click', autoSpreadAll);
+
+threshold.addEventListener('change', () => {
+  if (stftCache) runExtraction();
+});
+
+freqWeightCb.addEventListener('change', () => {
+  if (stftCache) runExtraction();
+});
+
+for (const el of [birthPersistenceEl, deathAgeEl, phaseErrorWeightEl, minLengthEl]) {
+  el.addEventListener('change', () => { if (stftCache) runExtraction(); });
+}
+
+function playAudioBuffer(buffer, statusMsg) {
+  const startTime = audioContext.currentTime;
+  currentSource = audioContext.createBufferSource();
+  currentSource.buffer = buffer;
+  currentSource.connect(audioContext.destination);
+  currentSource.start();
+  currentSource.onended = () => {
+    currentSource = null;
+    playBtn.disabled = false;
+    stopBtn.disabled = true;
+    viewer.setPlayheadTime(-1);
+    setStatus('Stopped', 'info');
+  };
+  playBtn.disabled = true;
+  stopBtn.disabled = false;
+  setStatus(statusMsg, 'info');
+  function tick() {
+    if (!currentSource) return;
+    viewer.setPlayheadTime(audioContext.currentTime - startTime);
+    requestAnimationFrame(tick);
+  }
+  tick();
+}
+
+function stopAudio() {
+  if (currentSource) {
+    try { currentSource.stop(); } catch (e) {}
+    currentSource = null;
+  }
+  if (viewer) viewer.setPlayheadTime(-1);
+  playBtn.disabled = false;
+  stopBtn.disabled = true;
+  setStatus('Stopped', 'info');
+}
+
+function playOriginal() {
+  if (!audioBuffer || !audioContext) return;
+  stopAudio();
+  playAudioBuffer(audioBuffer, 'Playing...');
+}
+
+// Play audio
+playBtn.addEventListener('click', playOriginal);
+
+// Stop audio
+stopBtn.addEventListener('click', () => {
+  stopAudio();
+});
+
+function setStatus(msg, type = '') {
+  status.innerHTML = msg;
+  status.className = type;
+}
+
+function getSynthParams() {
+  const forceResonator = document.getElementById('forceResonator').checked;
+  const lpK1Raw = parseFloat(document.getElementById('lpK1').value);
+  const hpK2Raw = parseFloat(document.getElementById('hpK2').value);
+  return {
+    integratePhase: document.getElementById('integratePhase').checked,
+    opts: {
+      disableJitter:  document.getElementById('disableJitter').checked,
+      disableSpread:  document.getElementById('disableSpread').checked,
+      forceResonator,
+      forceRGain:     forceResonator && document.getElementById('forceRGain').checked,
+      globalR:        parseFloat(document.getElementById('globalR').value),
+      globalGain:     parseFloat(document.getElementById('globalGain').value),
+      k1: lpK1Raw < 1.0 ? lpK1Raw : null,
+      k2: hpK2Raw < 1.0 ? hpK2Raw : null,
+    },
+  };
+}
+
+// Synthesize partials and return an AudioBuffer, trimmed to [t_start-margin, t_end+margin]
+function getAudioBuffer(partials, margin = 0) {
+  const sr = audioBuffer.sampleRate;
+  const {integratePhase, opts} = getSynthParams();
+  const pcm = synthesizeMQ(partials, sr, audioBuffer.duration, integratePhase, opts);
+  let startSample = 0, endSample = pcm.length;
+  if (margin >= 0 && partials.length > 0) {
+    const times = partials.flatMap(p => p.times);
+    const tStart = Math.min(...times);
+    const tEnd   = Math.max(...times);
+    startSample = Math.max(0, Math.floor((tStart - margin) * sr));
+    endSample   = Math.min(pcm.length, Math.ceil((tEnd + margin) * sr));
+  }
+  const trimmed = pcm.subarray(startSample, endSample);
+  const buf = audioContext.createBuffer(1, trimmed.length, sr);
+  buf.getChannelData(0).set(trimmed);
+  return buf;
+}
+
+// Play synthesized audio
+function playSynthesized() {
+  if (!extractedPartials || extractedPartials.length === 0) {
+    setStatus('No partials extracted yet', 'warn');
+    return;
+  }
+  if (!audioBuffer || !audioContext) return;
+
+  stopAudio();
+
+  setStatus('Synthesizing...', 'info');
+
+  const keepCount = getKeepCount();
+  const partialsToUse = extractedPartials.slice(0, keepCount).filter(p => !p.muted);
+  setStatus(`Synthesizing ${partialsToUse.length}/${extractedPartials.length} partials (${keepPct.value}%)...`, 'info');
+
+  if (viewer) {
+    const {integratePhase, opts} = getSynthParams();
+    const pcm = synthesizeMQ(partialsToUse, audioBuffer.sampleRate, audioBuffer.duration,
+                             integratePhase, opts);
+    viewer.setSynthStftCache(new STFTCache(pcm, audioBuffer.sampleRate, fftSize, parseInt(hopSize.value)));
+  }
+
+  const synthBuffer = getAudioBuffer(partialsToUse);
+  playAudioBuffer(synthBuffer, `Playing synthesized (${partialsToUse.length}/${extractedPartials.length} partials, ${keepPct.value}%)...`);
+}
+
+// Keyboard shortcuts
+document.addEventListener('keydown', (e) => {
+  if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+  if (e.ctrlKey && e.code === 'KeyZ' && !e.shiftKey) {
+    e.preventDefault(); undo(); return;
+  } else if (e.ctrlKey && (e.code === 'KeyY' || (e.code === 'KeyZ' && e.shiftKey))) {
+    e.preventDefault(); redo(); return;
+  } else if (e.code === 'KeyN' && !e.ctrlKey && !e.metaKey) {
+    e.preventDefault(); createNewPartial(); return;
+  }
+  if (e.code === 'Digit1') {
+    e.preventDefault();
+    if (!playBtn.disabled) playOriginal();
+  } else if (e.code === 'Digit2') {
+    e.preventDefault();
+    playSynthesized();
+  } else if (e.code === 'Digit3') {
+    e.preventDefault();
+    const sel = viewer ? viewer.selectedPartial : -1;
+    if (sel < 0 || !extractedPartials || !audioBuffer || !audioContext) return;
+    const partial = extractedPartials[sel];
+    if (!partial) return;
+    stopAudio();
+    playAudioBuffer(getAudioBuffer([partial], 0.05), `Playing partial #${sel}...`);
+  } else if (e.code === 'KeyP') {
+    e.preventDefault();
+    if (viewer) viewer.togglePeaks();
+  } else if (e.code === 'KeyA') {
+    e.preventDefault();
+    if (viewer) {
+      viewer.showSynthFFT = !viewer.showSynthFFT;
+      viewer.renderSpectrum();
+    }
+  } else if (e.code === 'KeyE') {
+    e.preventDefault();
+    if (!extractBtn.disabled) extractBtn.click();
+  } else if (e.code === 'KeyX' && !e.ctrlKey && !e.metaKey) {
+    e.preventDefault();
+    if (!document.getElementById('exploreBtn').disabled) setExploreMode(exploreMode === 'peak' ? false : 'peak');
+  } else if (e.code === 'KeyC' && !e.ctrlKey && !e.metaKey) {
+    e.preventDefault();
+    if (!document.getElementById('contourBtn').disabled) setExploreMode(exploreMode === 'contour' ? false : 'contour');
+  } else if (e.code === 'Delete' || e.code === 'Backspace') {
+    e.preventDefault();
+    document.getElementById('deletePartialBtn').click();
+  } else if (e.code === 'Escape') {
+    if (exploreMode) { setExploreMode(false); return; }
+    if (viewer) viewer.selectPartial(-1);
+  }
+});
+
+// Curve tab switching
+document.querySelectorAll('.tab-btn').forEach(btn => {
+  btn.addEventListener('click', () => {
+    document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    document.querySelectorAll('.tab-pane').forEach(p => p.style.display = 'none');
+    document.getElementById('tab' + btn.dataset.tab).style.display = '';
+  });
+});