loukai-app 0.3.0

package/src/renderer/lib/cdgraphics-wrapper.js

@@ -0,0 +1,16 @@
+// Wrapper to load cdgraphics as a global variable
+// Since cdgraphics uses ES modules, we need to load it dynamically
+
+(async function () {
+  try {
+    // Import the ES module
+    const module = await import('./cdgraphics.js');
+
+    // Make it available globally
+    window.CDGraphics = module.default;
+
+    console.log('💿 CDGraphics library loaded');
+  } catch (error) {
+    console.error('💿 Failed to load CDGraphics:', error);
+  }
+})();

package/src/renderer/lib/cdgraphics.js

@@ -0,0 +1,299 @@
+class p {
+  WIDTH = 300;
+  HEIGHT = 216;
+  DISPLAY_WIDTH = 288;
+  DISPLAY_HEIGHT = 192;
+  DISPLAY_BOUNDS = [6, 12, 294, 204];
+  TILE_WIDTH = 6;
+  TILE_HEIGHT = 12;
+  hOffset = 0;
+  vOffset = 0;
+  keyColor = null;
+  bgColor = null;
+  borderColor = null;
+  clut = new Array(16).fill([0, 0, 0]);
+  pixels = new Uint8ClampedArray(this.WIDTH * this.HEIGHT).fill(0);
+  buffer = new Uint8ClampedArray(this.WIDTH * this.HEIGHT).fill(0);
+  imageData = new ImageData(this.WIDTH, this.HEIGHT);
+  backgroundRGBA = [0, 0, 0, 0];
+  contentBounds = [0, 0, 0, 0];
+  constructor() {
+    this.init();
+  }
+  init() {
+    ((this.hOffset = 0),
+      (this.vOffset = 0),
+      (this.keyColor = null),
+      (this.bgColor = null),
+      (this.borderColor = null),
+      (this.clut = new Array(16).fill([0, 0, 0])),
+      (this.pixels = new Uint8ClampedArray(this.WIDTH * this.HEIGHT).fill(0)),
+      (this.buffer = new Uint8ClampedArray(this.WIDTH * this.HEIGHT).fill(0)),
+      (this.imageData = new ImageData(this.WIDTH, this.HEIGHT)),
+      (this.backgroundRGBA = [0, 0, 0, 0]),
+      (this.contentBounds = [0, 0, 0, 0]));
+  }
+  setCLUTEntry(t, s, o, i) {
+    this.clut[t] = [s * 17, o * 17, i * 17];
+  }
+  renderFrame({ forceKey: t = !1 } = {}) {
+    const [s, o, i, e] = [0, 0, this.WIDTH, this.HEIGHT];
+    let [n, l, h, a] = [this.WIDTH, this.HEIGHT, 0, 0],
+      _ = !1;
+    for (let c = o; c < e; c++)
+      for (let D = s; D < i; D++) {
+        let C;
+        if (
+          this.borderColor !== null &&
+          (D < this.DISPLAY_BOUNDS[0] ||
+            c < this.DISPLAY_BOUNDS[1] ||
+            D >= this.DISPLAY_BOUNDS[2] ||
+            c >= this.DISPLAY_BOUNDS[3])
+        )
+          C = this.borderColor;
+        else {
+          const E = D + this.hOffset,
+            O = c + this.vOffset,
+            d = E + O * this.WIDTH;
+          C = this.pixels[d];
+        }
+        const [L, A, H] = this.clut[C],
+          u = C === this.keyColor || (t && (C === this.bgColor || this.bgColor == null)),
+          T = 4 * (D + c * this.WIDTH);
+        ((this.imageData.data[T] = L),
+          (this.imageData.data[T + 1] = A),
+          (this.imageData.data[T + 2] = H),
+          (this.imageData.data[T + 3] = u ? 0 : 255),
+          u || ((_ = !0), n > D && (n = D), l > c && (l = c), h < D && (h = D), a < c && (a = c)));
+      }
+    ((this.contentBounds = _ || !t ? [n, l, h + 1, a + 1] : [0, 0, 0, 0]),
+      (this.backgroundRGBA =
+        this.bgColor === null
+          ? [0, 0, 0, t ? 0 : 1]
+          : [...this.clut[this.bgColor], this.bgColor === this.keyColor || t ? 0 : 1]));
+  }
+}
+class S {
+  color;
+  repeat;
+  constructor(t) {
+    ((this.color = t[4] & 15), (this.repeat = t[5] & 15));
+  }
+  execute(t) {
+    (t.pixels.fill(this.color),
+      (t.bgColor = this.color),
+      (t.borderColor = null),
+      (t.hOffset = 0),
+      (t.vOffset = 0));
+  }
+}
+class g {
+  color;
+  constructor(t) {
+    this.color = t[4] & 15;
+  }
+  execute(t) {
+    t.borderColor = this.color;
+  }
+}
+class f {
+  // some players check bytes[doff+1] & 0x20 and ignores if it is set (?)
+  colors;
+  row;
+  column;
+  pixels;
+  constructor(t) {
+    ((this.colors = [t[4] & 15, t[5] & 15]),
+      (this.row = t[6] & 31),
+      (this.column = t[7] & 63),
+      (this.pixels = t.slice(8, 20)));
+  }
+  /* blit a tile */
+  execute(t) {
+    const s = this.column * t.TILE_WIDTH,
+      o = this.row * t.TILE_HEIGHT;
+    if (s + 6 > t.WIDTH || o + 12 > t.HEIGHT) {
+      console.log(`TileBlock out of bounds (${this.row},${this.column})`);
+      return;
+    }
+    for (let i = 0; i < 12; i++) {
+      const e = this.pixels[i];
+      for (let n = 0; n < 6; n++) {
+        const l = this.colors[(e >> (5 - n)) & 1],
+          h = s + n + (o + i) * t.WIDTH;
+        this.op(t, h, l);
+      }
+    }
+  }
+  op(t, s, o) {
+    t.pixels[s] = o;
+  }
+}
+class R extends f {
+  op(t, s, o) {
+    t.pixels[s] = t.pixels[s] ^ o;
+  }
+}
+class I {
+  color;
+  hCmd;
+  hOffset;
+  vCmd;
+  vOffset;
+  constructor(t) {
+    this.color = t[4] & 15;
+    const s = t[5] & 63;
+    ((this.hCmd = (s & 48) >> 4), (this.hOffset = s & 7));
+    const o = t[6] & 63;
+    ((this.vCmd = (o & 48) >> 4), (this.vOffset = o & 15));
+  }
+  execute(t) {
+    ((t.hOffset = Math.min(this.hOffset, 5)), (t.vOffset = Math.min(this.vOffset, 11)));
+    let s = 0;
+    this.hCmd === 2 ? (s = t.TILE_WIDTH) : this.hCmd === 1 && (s = -t.TILE_WIDTH);
+    let o = 0;
+    if (
+      (this.vCmd === 2 ? (o = t.TILE_HEIGHT) : this.vCmd === 1 && (o = -t.TILE_HEIGHT),
+      s === 0 && o === 0)
+    )
+      return;
+    let i, e;
+    for (let l = 0; l < t.WIDTH; l++)
+      for (let h = 0; h < t.HEIGHT; h++)
+        ((i = l + s), (e = h + o), (t.buffer[l + h * t.WIDTH] = this.getPixel(t, i, e)));
+    const n = t.pixels;
+    ((t.pixels = t.buffer), (t.buffer = n));
+  }
+  getPixel(t, s, o) {
+    return s > 0 && s < t.WIDTH && o > 0 && o < t.HEIGHT ? t.pixels[s + o * t.WIDTH] : this.color;
+  }
+}
+class m extends I {
+  getPixel(t, s, o) {
+    return (
+      (s = (s + t.WIDTH) % t.WIDTH),
+      (o = (o + t.HEIGHT) % t.HEIGHT),
+      t.pixels[s + o * t.WIDTH]
+    );
+  }
+}
+class P {
+  index;
+  constructor(t) {
+    this.index = t[4] & 15;
+  }
+  execute(t) {
+    t.keyColor = this.index;
+  }
+}
+class G {
+  colors;
+  constructor(t) {
+    this.colors = Array(8);
+    for (let s = 0; s < 8; s++) {
+      const o = 4 + 2 * s;
+      let i = (t[o] & 63) << 6;
+      i += t[o + 1] & 63;
+      const e = [
+        i >> 8,
+        // red
+        (i & 240) >> 4,
+        // green
+        i & 15,
+        // blue
+      ];
+      this.colors[s] = e;
+    }
+  }
+  execute(t) {
+    for (let s = 0; s < 8; s++)
+      t.setCLUTEntry(s + this.clutOffset, this.colors[s][0], this.colors[s][1], this.colors[s][2]);
+  }
+  get clutOffset() {
+    return 0;
+  }
+}
+class B extends G {
+  get clutOffset() {
+    return 8;
+  }
+}
+class W {
+  COMMAND_MASK = 63;
+  CDG_COMMAND = 9;
+  BY_TYPE = {
+    1: S,
+    2: g,
+    6: f,
+    20: I,
+    24: m,
+    28: P,
+    30: G,
+    31: B,
+    38: R,
+  };
+  bytes;
+  numPackets;
+  pc;
+  constructor(t) {
+    ((this.bytes = new Uint8Array(t)), (this.numPackets = t.byteLength / 24), (this.pc = -1));
+  }
+  // determine packet we should be at, based on spec
+  // of 4 packets per sector @ 75 sectors per second
+  parseThrough(t) {
+    const s = Math.floor(300 * t),
+      o = [];
+    for (
+      this.pc > s && ((this.pc = -1), (o.isRestarting = !0));
+      this.pc < s && this.pc < this.numPackets;
+
+    ) {
+      this.pc++;
+      const i = this.pc * 24,
+        e = this.parse(this.bytes.slice(i, i + 24));
+      e && o.push(e);
+    }
+    return o;
+  }
+  parse(t) {
+    if ((t[0] & this.COMMAND_MASK) === this.CDG_COMMAND) {
+      const s = t[1] & this.COMMAND_MASK,
+        o = this.BY_TYPE[s];
+      return typeof o < 'u'
+        ? new o(t)
+        : (console.log(`Unknown CDG instruction (instruction = ${s})`), !1);
+    }
+    return !1;
+  }
+}
+class b {
+  /** @internal */
+  ctx;
+  /** @internal */
+  parser;
+  /** @internal */
+  forceKey;
+  /** Instantiates a new renderer with the given CD+G file data. The data must be an `ArrayBuffer`, which can be had via the `Response` of a `fetch()`. */
+  constructor(t) {
+    if (!(t instanceof ArrayBuffer)) throw new Error('buffer must be an ArrayBuffer');
+    ((this.ctx = new p()), (this.parser = new W(t)));
+  }
+  /** Renders the frame at the given time index. */
+  render(t, s = {}) {
+    if (isNaN(t) || t < 0) throw new Error(`Invalid time: ${t}`);
+    const o = this.parser.parseThrough(t),
+      i = !!o.length || !!o.isRestarting || s.forceKey !== this.forceKey;
+    ((this.forceKey = s.forceKey), o.isRestarting && this.ctx.init());
+    for (const e of o) e.execute(this.ctx);
+    return (
+      i && this.ctx.renderFrame(s),
+      {
+        imageData: this.ctx.imageData,
+        isChanged: i,
+        backgroundRGBA: this.ctx.backgroundRGBA,
+        contentBounds: this.ctx.contentBounds,
+      }
+    );
+  }
+}
+export { b as default };

package/src/renderer/public/js/autoTuneWorklet.js

@@ -0,0 +1,224 @@
+class AutoTuneProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+
+    // Auto-tune parameters
+    this.enabled = false;
+    this.strength = 0.5; // 0-1 range
+    this.speed = 0.05; // How quickly to correct pitch
+    this.targetPitch = null;
+    this.currentKey = 'C';
+
+    // Pitch detection
+    this.sampleRate = 44100;
+    this.bufferSize = 2048;
+    this.buffer = new Float32Array(this.bufferSize);
+    this.bufferIndex = 0;
+
+    // Musical notes in Hz (A4 = 440Hz)
+    this.noteFrequencies = {
+      C: [65.41, 130.81, 261.63, 523.25, 1046.5],
+      'C#': [69.3, 138.59, 277.18, 554.37, 1108.73],
+      D: [73.42, 146.83, 293.66, 587.33, 1174.66],
+      'D#': [77.78, 155.56, 311.13, 622.25, 1244.51],
+      E: [82.41, 164.81, 329.63, 659.25, 1318.51],
+      F: [87.31, 174.61, 349.23, 698.46, 1396.91],
+      'F#': [92.5, 185.0, 369.99, 739.99, 1479.98],
+      G: [98.0, 196.0, 392.0, 783.99, 1567.98],
+      'G#': [103.83, 207.65, 415.3, 830.61, 1661.22],
+      A: [110.0, 220.0, 440.0, 880.0, 1760.0],
+      'A#': [116.54, 233.08, 466.16, 932.33, 1864.66],
+      B: [123.47, 246.94, 493.88, 987.77, 1975.53],
+    };
+
+    // Scales for key detection
+    this.scales = {
+      C: ['C', 'D', 'E', 'F', 'G', 'A', 'B'],
+      G: ['G', 'A', 'B', 'C', 'D', 'E', 'F#'],
+      D: ['D', 'E', 'F#', 'G', 'A', 'B', 'C#'],
+      A: ['A', 'B', 'C#', 'D', 'E', 'F#', 'G#'],
+      E: ['E', 'F#', 'G#', 'A', 'B', 'C#', 'D#'],
+      B: ['B', 'C#', 'D#', 'E', 'F#', 'G#', 'A#'],
+      F: ['F', 'G', 'A', 'A#', 'C', 'D', 'E'],
+      'A#': ['A#', 'C', 'D', 'D#', 'F', 'G', 'A'],
+      'D#': ['D#', 'F', 'G', 'G#', 'A#', 'C', 'D'],
+      'G#': ['G#', 'A#', 'C', 'C#', 'D#', 'F', 'G'],
+      'C#': ['C#', 'D#', 'F', 'F#', 'G#', 'A#', 'B'],
+      'F#': ['F#', 'G#', 'A#', 'B', 'C#', 'D#', 'F'],
+    };
+
+    // Phase vocoder for pitch shifting
+    this.fftSize = 2048;
+    this.hopSize = this.fftSize / 4;
+    this.analysisWindow = this.createWindow(this.fftSize);
+    this.synthesisWindow = this.createWindow(this.fftSize);
+
+    // Overlap-add buffers
+    this.inputBuffer = new Float32Array(this.fftSize);
+    this.outputBuffer = new Float32Array(this.fftSize);
+    this.overlapBuffer = new Float32Array(this.fftSize);
+
+    // Debug logging
+    this.frameCount = 0;
+    this.lastLogTime = 0;
+
+    // Handle parameter changes from main thread
+    this.port.onmessage = (event) => {
+      if (event.data.type === 'setEnabled') {
+        this.enabled = event.data.value;
+      } else if (event.data.type === 'setStrength') {
+        this.strength = event.data.value / 100; // Convert from 0-100 to 0-1
+      } else if (event.data.type === 'setSpeed') {
+        this.speed = event.data.value / 100; // Convert from 1-100 to 0.01-1
+      } else if (event.data.type === 'setKey') {
+        this.currentKey = event.data.value;
+      }
+    };
+  }
+
+  createWindow(size) {
+    const window = new Float32Array(size);
+    for (let i = 0; i < size; i++) {
+      // Hann window
+      window[i] = 0.5 * (1 - Math.cos((2 * Math.PI * i) / (size - 1)));
+    }
+    return window;
+  }
+
+  detectPitch(buffer) {
+    // Simple autocorrelation-based pitch detection
+    const minPeriod = Math.floor(this.sampleRate / 800); // 800 Hz max
+    const maxPeriod = Math.floor(this.sampleRate / 80); // 80 Hz min
+
+    let maxCorrelation = 0;
+    let bestPeriod = 0;
+
+    for (let period = minPeriod; period < maxPeriod; period++) {
+      let correlation = 0;
+      for (let i = 0; i < buffer.length - period; i++) {
+        correlation += buffer[i] * buffer[i + period];
+      }
+
+      if (correlation > maxCorrelation) {
+        maxCorrelation = correlation;
+        bestPeriod = period;
+      }
+    }
+
+    if (bestPeriod > 0 && maxCorrelation > 0.01) {
+      return this.sampleRate / bestPeriod;
+    }
+
+    return null;
+  }
+
+  findNearestNote(frequency) {
+    if (!frequency) return null;
+
+    const scaleNotes = this.scales[this.currentKey] || this.scales['C'];
+    let minDiff = Infinity;
+    let nearestNote = null;
+    let nearestFreq = null;
+
+    for (const note of scaleNotes) {
+      const frequencies = this.noteFrequencies[note];
+      for (const freq of frequencies) {
+        const diff = Math.abs(frequency - freq);
+        if (diff < minDiff) {
+          minDiff = diff;
+          nearestNote = note;
+          nearestFreq = freq;
+        }
+      }
+    }
+
+    return { note: nearestNote, frequency: nearestFreq };
+  }
+
+  processWithRobotEffect(inputSample) {
+    // Create a robotic auto-tune effect using wave shaping
+    // This is more audible than true pitch shifting but gives the characteristic sound
+
+    // Hard clip the signal for a more digital sound
+    let processed = Math.max(-1, Math.min(1, inputSample * 2));
+
+    // Add harmonic distortion for the "robotic" quality
+    processed = Math.sin(processed * Math.PI);
+
+    // Quantize to create stepped pitch effect
+    const steps = 16; // Number of quantization levels
+    processed = Math.round(processed * steps) / steps;
+
+    // Mix with original based on strength
+    return inputSample * (1 - this.strength) + processed * this.strength;
+  }
+
+  process(inputs, outputs, _parameters) {
+    const input = inputs[0];
+    const output = outputs[0];
+
+    if (!input || !input[0]) {
+      return true;
+    }
+
+    const inputChannel = input[0];
+    const outputChannel = output[0];
+
+    if (!this.enabled) {
+      // Pass through unprocessed
+      outputChannel.set(inputChannel);
+      return true;
+    }
+
+    // Fill detection buffer
+    for (let i = 0; i < inputChannel.length; i++) {
+      this.buffer[this.bufferIndex++] = inputChannel[i];
+
+      if (this.bufferIndex >= this.bufferSize) {
+        // Detect pitch
+        const detectedPitch = this.detectPitch(this.buffer);
+
+        if (detectedPitch) {
+          const nearest = this.findNearestNote(detectedPitch);
+          if (nearest) {
+            // Calculate pitch shift factor
+            const shiftFactor = nearest.frequency / detectedPitch;
+
+            // Log pitch detection every second
+            this.frameCount++;
+            const now = Date.now();
+            if (now - this.lastLogTime > 1000) {
+              this.lastLogTime = now;
+            }
+
+            // Smooth the pitch correction based on speed parameter
+            if (this.targetPitch) {
+              this.targetPitch = this.targetPitch * (1 - this.speed) + shiftFactor * this.speed;
+            } else {
+              this.targetPitch = shiftFactor;
+            }
+          }
+        }
+
+        // Reset buffer
+        this.bufferIndex = 0;
+        this.buffer.fill(0);
+      }
+    }
+
+    // Apply auto-tune effect
+    // For now, use the robotic effect which is more immediately audible
+    for (let i = 0; i < outputChannel.length; i++) {
+      outputChannel[i] = this.processWithRobotEffect(inputChannel[i]);
+    }
+
+    // Log that we're processing
+    if (this.frameCount % 1000 === 0) {
+      // Debug logging disabled for performance
+    }
+
+    return true;
+  }
+}
+
+registerProcessor('auto-tune-processor', AutoTuneProcessor);

package/src/renderer/public/js/micPitchDetectorWorklet.js

@@ -0,0 +1,137 @@
+/**
+ * Microphone Pitch Detector AudioWorklet
+ * Detects fundamental frequency from microphone input
+ * Sends pitch data to main thread for auto-tune and coaching display
+ */
+
+class MicPitchDetectorProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+
+    // Pitch detection parameters
+    this.sampleRate = 48000; // Will be updated from options
+    this.bufferSize = 2048;
+    this.buffer = new Float32Array(this.bufferSize);
+    this.bufferIndex = 0;
+
+    // Detection rate throttling
+    this.detectionCount = 0;
+    this.detectionInterval = 4; // Detect every 4 buffers (~46ms at 48kHz)
+
+    // Last detected pitch for smoothing
+    this.lastPitch = null;
+    this.smoothingFactor = 0.7; // Exponential smoothing
+
+    // Minimum signal threshold to avoid detecting noise
+    this.minSignalThreshold = 0.01;
+
+    // Handle messages from main thread
+    this.port.onmessage = (event) => {
+      if (event.data.type === 'setSampleRate') {
+        this.sampleRate = event.data.value;
+      } else if (event.data.type === 'setDetectionInterval') {
+        this.detectionInterval = event.data.value;
+      }
+    };
+  }
+
+  /**
+   * Detect pitch using autocorrelation
+   * Returns frequency in Hz or null if no pitch detected
+   */
+  detectPitch(buffer) {
+    // Check signal strength first
+    let sumSquares = 0;
+    for (let i = 0; i < buffer.length; i++) {
+      sumSquares += buffer[i] * buffer[i];
+    }
+    const rms = Math.sqrt(sumSquares / buffer.length);
+
+    if (rms < this.minSignalThreshold) {
+      return null; // Signal too weak
+    }
+
+    // Autocorrelation-based pitch detection
+    // Vocal range: ~80 Hz (E2) to ~800 Hz (G5)
+    const minPeriod = Math.floor(this.sampleRate / 800); // 800 Hz max
+    const maxPeriod = Math.floor(this.sampleRate / 80); // 80 Hz min
+
+    let maxCorrelation = 0;
+    let bestPeriod = 0;
+
+    // Calculate autocorrelation for each possible period
+    for (let period = minPeriod; period < maxPeriod; period++) {
+      let correlation = 0;
+      for (let i = 0; i < buffer.length - period; i++) {
+        correlation += buffer[i] * buffer[i + period];
+      }
+
+      if (correlation > maxCorrelation) {
+        maxCorrelation = correlation;
+        bestPeriod = period;
+      }
+    }
+
+    // Require minimum correlation strength
+    const correlationThreshold = sumSquares * 0.3;
+    if (bestPeriod > 0 && maxCorrelation > correlationThreshold) {
+      const frequency = this.sampleRate / bestPeriod;
+
+      // Apply exponential smoothing
+      if (this.lastPitch !== null) {
+        return this.lastPitch * this.smoothingFactor + frequency * (1 - this.smoothingFactor);
+      }
+      return frequency;
+    }
+
+    return null;
+  }
+
+  process(inputs, outputs) {
+    const input = inputs[0];
+    const output = outputs[0];
+
+    if (!input || !input[0]) {
+      return true;
+    }
+
+    const inputChannel = input[0];
+
+    // Pass through audio unchanged
+    if (output && output[0]) {
+      output[0].set(inputChannel);
+    }
+
+    // Fill detection buffer
+    for (let i = 0; i < inputChannel.length; i++) {
+      this.buffer[this.bufferIndex++] = inputChannel[i];
+
+      if (this.bufferIndex >= this.bufferSize) {
+        // Buffer full - perform detection (throttled)
+        this.detectionCount++;
+        if (this.detectionCount >= this.detectionInterval) {
+          this.detectionCount = 0;
+
+          const detectedPitch = this.detectPitch(this.buffer);
+
+          // Update last pitch for smoothing
+          this.lastPitch = detectedPitch;
+
+          // Send pitch data to main thread
+          this.port.postMessage({
+            type: 'pitch',
+            frequency: detectedPitch,
+            timestamp: Date.now(),
+          });
+        }
+
+        // Reset buffer
+        this.bufferIndex = 0;
+      }
+    }
+
+    return true;
+  }
+}
+
+registerProcessor('mic-pitch-detector', MicPitchDetectorProcessor);