Create app.js

javascript/app.js

@@ -0,0 +1,372 @@
+const MIDI_OUTPUT_BATCH_SIZE = 4; // Automatically set by Python backend, do not change.
+
+// Utility to query elements across shadow DOM
+function deepQuerySelector(selector) {
+  function deepSearch(root, selector) {
+    let element = root.querySelector(selector);
+    if (element) return element;
+    const shadowHosts = root.querySelectorAll('*');
+    for (let host of shadowHosts) {
+      if (host.shadowRoot) {
+        element = deepSearch(host.shadowRoot, selector);
+        if (element) return element;
+      }
+    }
+    return null;
+  }
+  return deepSearch(this, selector);
+}
+Element.prototype.deepQuerySelector = deepQuerySelector;
+Document.prototype.deepQuerySelector = deepQuerySelector;
+
+// Get Gradio app root
+function gradioApp() {
+  const elems = document.getElementsByTagName('gradio-app');
+  const gradioShadowRoot = elems.length ? elems[0].shadowRoot : null;
+  return gradioShadowRoot || document;
+}
+
+// Callback registries
+const uiUpdateCallbacks = [];
+const msgReceiveCallbacks = [];
+
+function onUiUpdate(callback) {
+  uiUpdateCallbacks.push(callback);
+}
+
+function onMsgReceive(callback) {
+  msgReceiveCallbacks.push(callback);
+}
+
+function runCallback(callback, data) {
+  try {
+    callback(data);
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+function executeCallbacks(queue, data) {
+  queue.forEach((callback) => runCallback(callback, data));
+}
+
+// Observe DOM changes
+document.addEventListener("DOMContentLoaded", () => {
+  const observer = new MutationObserver((mutations) => {
+    executeCallbacks(uiUpdateCallbacks, mutations);
+  });
+  observer.observe(gradioApp(), { childList: true, subtree: true });
+});
+
+// HSV to RGB conversion for note coloring
+function HSVtoRGB(h, s, v) {
+  let r, g, b, i = Math.floor(h * 6), f = h * 6 - i, p = v * (1 - s), q = v * (1 - f * s), t = v * (1 - (1 - f) * s);
+  switch (i % 6) {
+    case 0: r = v; g = t; b = p; break;
+    case 1: r = q; g = v; b = p; break;
+    case 2: r = p; g = v; b = t; break;
+    case 3: r = p; g = q; b = v; break;
+    case 4: r = t; g = p; b = v; break;
+    case 5: r = v; g = p; b = q; break;
+  }
+  return { r: Math.round(r * 255), g: Math.round(g * 255), b: Math.round(b * 255) };
+}
+
+// Detect mobile devices
+function isMobile() {
+  return /iPhone|iPad|iPod|Android|Windows Phone/i.test(navigator.userAgent);
+}
+
+// MIDI Visualizer Custom Element
+class MidiVisualizer extends HTMLElement {
+  constructor() {
+    super();
+    this.midiEvents = [];
+    this.activeNotes = [];
+    this.midiTimes = [];
+    this.trackMap = new Map();
+    this.patches = Array(16).fill().map(() => [[0, 0]]);
+    this.config = { noteHeight: isMobile() ? 1 : 4, beatWidth: isMobile() ? 16 : 32 };
+    this.timePreBeat = 16;
+    this.svgWidth = 0;
+    this.t1 = 0;
+    this.totalTimeMs = 0;
+    this.playTime = 0;
+    this.playTimeMs = 0;
+    this.lastUpdateTime = 0;
+    this.colorMap = new Map();
+    this.playing = false;
+    this.version = "v2";
+    this.init();
+  }
+
+  init() {
+    this.innerHTML = '';
+    const shadow = this.attachShadow({ mode: 'open' });
+    const style = document.createElement("style");
+    style.textContent = ".note.active {stroke: black; stroke-width: 0.75; stroke-opacity: 0.75;}";
+    const container = document.createElement('div');
+    container.style.display = "flex";
+    container.style.height = `${this.config.noteHeight * 128 + 25}px`;
+    const pianoRoll = document.createElement('div');
+    pianoRoll.style.overflowX = "scroll";
+    pianoRoll.style.flexGrow = "1";
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.style.height = `${this.config.noteHeight * 128}px`;
+    const timeLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    timeLine.style.stroke = "green";
+    timeLine.style.strokeWidth = isMobile() ? "1" : "2";
+
+    shadow.appendChild(style);
+    shadow.appendChild(container);
+    container.appendChild(pianoRoll);
+    pianoRoll.appendChild(svg);
+    svg.appendChild(timeLine);
+
+    this.container = container;
+    this.pianoRoll = pianoRoll;
+    this.svg = svg;
+    this.timeLine = timeLine;
+    for (let i = 0; i < 128; i++) {
+      this.colorMap.set(i, HSVtoRGB(i / 128, 1, 1));
+    }
+    this.setPlayTime(0);
+  }
+
+  getTrack(tr, cl) {
+    const id = tr * 16 + cl;
+    let track = this.trackMap.get(id);
+    if (!track) {
+      const color = this.colorMap.get((this.trackMap.size * 53) % 128);
+      track = { id, tr, cl, svg: document.createElementNS('http://www.w3.org/2000/svg', 'g'), color };
+      this.svg.appendChild(track.svg);
+      this.trackMap.set(id, track);
+    }
+    return track;
+  }
+
+  clearMidiEvents() {
+    this.midiEvents = [];
+    this.activeNotes = [];
+    this.midiTimes = [];
+    this.trackMap.clear();
+    this.patches = Array(16).fill().map(() => [[0, 0]]);
+    this.t1 = 0;
+    this.setPlayTime(0);
+    this.totalTimeMs = 0;
+    this.playTimeMs = 0;
+    this.lastUpdateTime = 0;
+    this.svgWidth = 0;
+    this.svg.innerHTML = '';
+    this.svg.appendChild(this.timeLine);
+    this.svg.style.width = `${this.svgWidth}px`;
+  }
+
+  appendMidiEvent(midiEvent) {
+    if (Array.isArray(midiEvent) && midiEvent.length > 0) {
+      this.t1 += midiEvent[1];
+      const t = this.t1 * this.timePreBeat + midiEvent[2];
+      midiEvent = [midiEvent[0], t].concat(midiEvent.slice(3));
+      if (midiEvent[0] === "note") {
+        const track = midiEvent[2];
+        const channel = midiEvent[3];
+        const pitch = midiEvent[4];
+        const velocity = midiEvent[5];
+        const duration = midiEvent[6];
+        const visTrack = this.getTrack(track, channel);
+        const x = (t / this.timePreBeat) * this.config.beatWidth;
+        const y = (127 - pitch) * this.config.noteHeight;
+        const w = (duration / this.timePreBeat) * this.config.beatWidth;
+        const h = this.config.noteHeight;
+        this.svgWidth = Math.ceil(Math.max(x + w, this.svgWidth));
+        const opacity = Math.min(1, velocity / 127 + 0.1).toFixed(2);
+        const rect = this.drawNote(visTrack, x, y, w, h, opacity);
+        midiEvent.push(rect);
+        this.setPlayTime(t);
+        this.pianoRoll.scrollTo(this.svgWidth - this.pianoRoll.offsetWidth, 0);
+      }
+      this.midiEvents.push(midiEvent);
+      this.svg.style.width = `${this.svgWidth}px`;
+    }
+  }
+
+  drawNote(track, x, y, w, h, opacity) {
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.classList.add('note');
+    const color = track.color;
+    rect.setAttribute('fill', `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity})`);
+    rect.setAttribute('x', `${Math.round(x)}`);
+    rect.setAttribute('y', `${Math.round(y)}`);
+    rect.setAttribute('width', `${Math.round(w)}`);
+    rect.setAttribute('height', `${Math.round(h)}`);
+    track.svg.appendChild(rect);
+    return rect;
+  }
+
+  finishAppendMidiEvent() {
+    this.midiEvents.sort((a, b) => a[1] - b[1]);
+    let tempo = (60 / 120) * 1000;
+    let ms = 0;
+    let lastT = 0;
+    this.midiTimes.push({ ms, t: 0, tempo });
+    this.midiEvents.forEach((midiEvent) => {
+      const t = midiEvent[1];
+      ms += ((t - lastT) / this.timePreBeat) * tempo;
+      if (midiEvent[0] === "note") {
+        this.totalTimeMs = Math.max(this.totalTimeMs, ms + (midiEvent[6] / this.timePreBeat) * tempo);
+      } else {
+        this.totalTimeMs = Math.max(this.totalTimeMs, ms);
+      }
+      lastT = t;
+    });
+  }
+
+  setPlayTime(t) {
+    this.playTime = t;
+    const x = Math.round((t / this.timePreBeat) * this.config.beatWidth);
+    this.timeLine.setAttribute('x1', `${x}`);
+    this.timeLine.setAttribute('y1', '0');
+    this.timeLine.setAttribute('x2', `${x}`);
+    this.timeLine.setAttribute('y2', `${this.config.noteHeight * 128}`);
+    this.pianoRoll.scrollTo(Math.max(0, x - this.pianoRoll.offsetWidth / 2), 0);
+
+    if (this.playing && Date.now() - this.lastUpdateTime > 50) {
+      const activeNotes = [];
+      this.removeActiveNotes(this.activeNotes);
+      this.midiEvents.forEach((midiEvent) => {
+        if (midiEvent[0] === "note") {
+          const time = midiEvent[1];
+          const duration = midiEvent[6];
+          const note = midiEvent[midiEvent.length - 1];
+          if (time <= this.playTime && time + duration >= this.playTime) {
+            activeNotes.push(note);
+          }
+        }
+      });
+      this.addActiveNotes(activeNotes);
+      this.lastUpdateTime = Date.now();
+    }
+  }
+
+  addActiveNotes(notes) {
+    notes.forEach((note) => {
+      this.activeNotes.push(note);
+      note.classList.add('active');
+    });
+  }
+
+  removeActiveNotes(notes) {
+    notes.forEach((note) => {
+      const idx = this.activeNotes.indexOf(note);
+      if (idx > -1) this.activeNotes.splice(idx, 1);
+      note.classList.remove('active');
+    });
+  }
+
+  play() {
+    this.playing = true;
+  }
+
+  pause() {
+    this.removeActiveNotes(this.activeNotes);
+    this.playing = false;
+  }
+
+  bindAudioPlayer(audio) {
+    this.pause();
+    audio.addEventListener("play", () => this.play());
+    audio.addEventListener("pause", () => this.pause());
+    audio.addEventListener("loadedmetadata", () => {
+      this.totalTimeMs = audio.duration * 1000;
+    });
+    audio.addEventListener("timeupdate", () => {
+      this.setPlayTimeMs(audio.currentTime * 1000);
+    });
+  }
+}
+
+customElements.define('midi-visualizer', MidiVisualizer);
+
+// Setup visualizers and progress bar
+(() => {
+  const midiVisualizers = Array.from({ length: MIDI_OUTPUT_BATCH_SIZE }, () => document.createElement('midi-visualizer'));
+  midiVisualizers.forEach((visualizer, idx) => {
+    onUiUpdate(() => {
+      const app = gradioApp();
+      const container = app.querySelector(`#midi_visualizer_container_${idx}`);
+      if (container && !container.contains(visualizer)) {
+        container.appendChild(visualizer);
+      }
+      const audio = app.querySelector(`#midi_audio_${idx} audio`);
+      if (audio) {
+        visualizer.bindAudioPlayer(audio);
+      }
+    });
+  });
+
+  let hasProgressBar = false;
+  let outputTabsInited = null;
+  onUiUpdate(() => {
+    const app = gradioApp();
+    const outputTabs = app.querySelector("#output_tabs");
+    if (outputTabs && outputTabsInited !== outputTabs) {
+      outputTabsInited = outputTabs;
+    }
+  });
+
+  function createProgressBar() {
+    const parent = outputTabsInited.parentNode;
+    const divProgress = document.createElement('div');
+    divProgress.className = 'progressDiv';
+    divProgress.style.width = "100%";
+    divProgress.style.background = "#b4c0cc";
+    divProgress.style.borderRadius = "8px";
+    const divInner = document.createElement('div');
+    divInner.className = 'progress';
+    divInner.style.color = "white";
+    divInner.style.background = "#0060df";
+    divInner.style.textAlign = "right";
+    divInner.style.fontWeight = "bold";
+    divInner.style.borderRadius = "8px";
+    divInner.style.height = "20px";
+    divInner.style.lineHeight = "20px";
+    divInner.style.paddingRight = "8px";
+    divInner.style.width = "0%";
+    divProgress.appendChild(divInner);
+    parent.insertBefore(divProgress, outputTabsInited);
+    hasProgressBar = true;
+    return divInner;
+  }
+
+  function setProgressBar(progress, total) {
+    if (!hasProgressBar) createProgressBar();
+    const divInner = gradioApp().querySelector(".progress");
+    if (divInner) {
+      divInner.style.width = `${(progress / total) * 100}%`;
+      divInner.textContent = `${progress}/${total}`;
+    }
+  }
+
+  onMsgReceive((msgs) => {
+    msgs.forEach((msg) => {
+      const { name, data } = msg;
+      const idx = data[0];
+      const visualizer = midiVisualizers[idx];
+      switch (name) {
+        case "visualizer_clear":
+          visualizer.clearMidiEvents();
+          break;
+        case "visualizer_append":
+          data[1].forEach((event) => visualizer.appendMidiEvent(event));
+          break;
+        case "visualizer_end":
+          visualizer.finishAppendMidiEvent();
+          visualizer.setPlayTime(0);
+          break;
+        case "progress":
+          setProgressBar(data[0], data[1]);
+          break;
+      }
+    });
+  });
+})();