Rename app.py to app.js

app.js

@@ -0,0 +1,398 @@
+/**
+ * 自动绕过 shadowRoot 的 querySelector
+ * @param {string} selector - 要查询的 CSS 选择器
+ * @returns {Element|null} - 匹配的元素或 null 如果未找到
+ */
+function deepQuerySelector(selector) {
+  /**
+   * 在指定的根元素或文档对象下深度查询元素
+   * @param {Element|Document} root - 要开始搜索的根元素或文档对象
+   * @param {string} selector - 要查询的 CSS 选择器
+   * @returns {Element|null} - 匹配的元素或 null 如果未找到
+   */
+  function deepSearch(root, selector) {
+    let element = root.querySelector(selector);
+    if (element) {
+      return element;
+    }
+
+    const shadowHosts = root.querySelectorAll('*');
+    for (let i = 0; i < shadowHosts.length; i++) {
+      const host = shadowHosts[i];
+      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;
+
+function gradioApp() {
+  const elems = document.getElementsByTagName('gradio-app');
+  const gradioShadowRoot = elems.length === 0 ? null : elems[0].shadowRoot;
+  return !!gradioShadowRoot ? gradioShadowRoot : document;
+}
+
+let uiUpdateCallbacks = [];
+let msgReceiveCallbacks = [];
+
+function onUiUpdate(callback) {
+  uiUpdateCallbacks.push(callback);
+}
+
+function onMsgReceive(callback) {
+  msgReceiveCallbacks.push(callback);
+}
+
+function runCallback(x, m) {
+  try {
+    x(m);
+  } catch (e) {
+    (console.error || console.log).call(console, e.message, e);
+  }
+}
+
+function executeCallbacks(queue, m) {
+  queue.forEach(function(x) {
+    runCallback(x, m);
+  });
+}
+
+document.addEventListener("DOMContentLoaded", function() {
+  const mutationObserver = new MutationObserver(function(m) {
+    executeCallbacks(uiUpdateCallbacks, m);
+  });
+  mutationObserver.observe(gradioApp(), { childList: true, subtree: true });
+});
+
+function HSVtoRGB(h, s, v) {
+  let r, g, b, i, f, p, q, t;
+  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)
+  };
+}
+
+class MidiVisualizer extends HTMLElement {
+  constructor() {
+    super();
+    this.midiEvents = [];
+    this.activeNotes = [];
+    this.midiTimes = [];
+    this.wrapper = null;
+    this.svg = null;
+    this.timeLine = null;
+    this.config = {
+      noteHeight: 4,
+      beatWidth: 32
+    };
+    this.timePreBeat = 16;
+    this.svgWidth = 0;
+    this.t1 = 0;
+    this.totalTimeMs = 0;
+    this.playTime = 0;
+    this.playTimeMs = 0;
+    this.colorMap = new Map();
+    this.playing = false;
+    this.timer = null;
+    this.init();
+  }
+
+  init() {
+    this.innerHTML = '';
+    const shadow = this.attachShadow({ mode: 'open' });
+    const style = document.createElement('style');
+    const wrapper = document.createElement('div');
+    style.textContent = ".note.active {stroke: black;stroke-width: 0.75;stroke-opacity: 0.75;}";
+    wrapper.style.overflowX = "scroll";
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.style.height = `${this.config.noteHeight * 128}px`;
+    svg.style.width = `${this.svgWidth}px`;
+    const timeLine = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+    timeLine.style.stroke = "green";
+    timeLine.style.strokeWidth = 2;
+    shadow.appendChild(style);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(svg);
+    svg.appendChild(timeLine);
+    this.wrapper = wrapper;
+    this.svg = svg;
+    this.timeLine = timeLine;
+    this.setPlayTime(0);
+  }
+
+  clearMidiEvents() {
+    this.pause();
+    this.midiEvents = [];
+    this.activeNotes = [];
+    this.midiTimes = [];
+    this.t1 = 0;
+    this.colorMap.clear();
+    this.setPlayTime(0);
+    this.totalTimeMs = 0;
+    this.playTimeMs = 0;
+    this.svgWidth = 0;
+    this.svg.innerHTML = '';
+    this.svg.style.width = `${this.svgWidth}px`;
+    this.svg.appendChild(this.timeLine);
+  }
+
+  appendMidiEvent(midiEvent) {
+    if (Array.isArray(midiEvent) && midiEvent.length > 0) {
+      this.t1 += midiEvent[1];
+      let t = this.t1 * this.timePreBeat + midiEvent[2];
+      midiEvent = [midiEvent[0], t].concat(midiEvent.slice(3));
+      if (midiEvent[0] === "note") {
+        let track = midiEvent[2];
+        let duration = midiEvent[3];
+        let channel = midiEvent[4];
+        let pitch = midiEvent[5];
+        let velocity = midiEvent[6];
+        let x = (t / this.timePreBeat) * this.config.beatWidth;
+        let y = (127 - pitch) * this.config.noteHeight;
+        let w = (duration / this.timePreBeat) * this.config.beatWidth;
+        let h = this.config.noteHeight;
+        this.svgWidth = Math.ceil(Math.max(x + w, this.svgWidth));
+        let color = this.getColor(track, channel);
+        let opacity = Math.min(1, velocity / 127 + 0.1).toFixed(2);
+        let rect = this.drawNote(x, y, w, h, `rgba(${color.r}, ${color.g}, ${color.b}, ${opacity})`);
+        midiEvent.push(rect);
+        this.setPlayTime(t);
+        this.wrapper.scrollTo(this.svgWidth - this.wrapper.offsetWidth, 0);
+      }
+      this.midiEvents.push(midiEvent);
+      this.svg.style.width = `${this.svgWidth}px`;
+    }
+  }
+
+  getColor(track, channel) {
+    let key = `${track},${channel}`;
+    let color = this.colorMap.get(key);
+    if (color) {
+      return color;
+    }
+    color = HSVtoRGB(Math.random(), Math.random() * 0.5 + 0.5, 1);
+    this.colorMap.set(key, color);
+    return color;
+  }
+
+  drawNote(x, y, w, h, fill) {
+    if (!this.svg) {
+      return null;
+    }
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.classList.add('note');
+    rect.setAttribute('fill', fill);
+    rect.setAttribute('x', `${Math.round(x)}`);
+    rect.setAttribute('y', `${Math.round(y)}`);
+    rect.setAttribute('width', `${Math.round(w)}`);
+    rect.setAttribute('height', `${Math.round(h)}`);
+    this.svg.appendChild(rect);
+    return rect;
+  }
+
+  finishAppendMidiEvent() {
+    this.pause();
+    let midiEvents = this.midiEvents.sort((a, b) => a[1] - b[1]);
+    let tempo = (60 / 120) * 10 ** 3;
+    let ms = 0;
+    for (let i = 0; i < midiEvents.length; i++) {
+      let midiEvent = midiEvents[i];
+      if (i === 0) {
+        ms = 0;
+      } else {
+        ms += (midiEvent[1] - midiEvents[i - 1][1]) * tempo / this.timePreBeat;
+      }
+      midiEvent.push(ms);
+      this.midiTimes.push(ms);
+    }
+    this.totalTimeMs = ms;
+  }
+
+  getDuration() {
+    return this.totalTimeMs;
+  }
+
+  setPlayTime(t) {
+    if (this.timeLine) {
+      this.playTime = t;
+      let x = (t / this.timePreBeat) * this.config.beatWidth;
+      this.timeLine.setAttribute('x1', x);
+      this.timeLine.setAttribute('x2', x);
+      this.timeLine.setAttribute('y1', 0);
+      this.timeLine.setAttribute('y2', this.config.noteHeight * 128);
+      this.wrapper.scrollTo(Math.max(x - this.wrapper.offsetWidth / 2, 0), 0);
+    }
+  }
+
+  setPlayTimeMs(ms) {
+    if (ms < 0 || ms > this.totalTimeMs) {
+      return;
+    }
+    let i = this.midiTimes.findIndex((t) => t > ms);
+    if (i === -1) {
+      i = this.midiTimes.length;
+    }
+    this.playTimeMs = ms;
+    this.setPlayTime(this.midiEvents[i - 1][1]);
+    let notes = this.activeNotes.filter((note) => {
+      note[7].classList.remove('active');
+      if (note[1] + note[3] * this.timePreBeat > this.playTime) {
+        return true;
+      }
+      return false;
+    });
+    this.activeNotes = notes;
+    let actives = this.midiEvents.filter((event) => event[1] <= this.playTime && this.playTime < event[1] + event[3] * this.timePreBeat);
+    actives.forEach((event) => {
+      event[7].classList.add('active');
+    });
+    this.activeNotes.push(...actives);
+  }
+
+  isPlaying() {
+    return this.playing;
+  }
+
+  play() {
+    if (this.playing) {
+      return;
+    }
+    this.playing = true;
+    let t0 = this.playTimeMs;
+    let start = performance.now();
+    const step = (now) => {
+      this.timer = requestAnimationFrame(step);
+      this.setPlayTimeMs(t0 + now - start);
+      if (t0 + now - start >= this.totalTimeMs) {
+        this.pause();
+      }
+    };
+    this.timer = requestAnimationFrame(step);
+  }
+
+  pause() {
+    if (this.timer) {
+      cancelAnimationFrame(this.timer);
+      this.timer = null;
+    }
+    this.playing = false;
+  }
+}
+
+window.customElements.define('midi-visualizer', MidiVisualizer);
+
+function getProgressBar() {
+  const progressbar = gradioApp().deepQuerySelector('span#prompt_progress span');
+  if (progressbar !== null) {
+    return progressbar;
+  }
+  return { innerHTML: '' };
+}
+
+function getPromptResult() {
+  const promptResult = gradioApp().deepQuerySelector('div#prompt_result');
+  if (promptResult !== null) {
+    return promptResult;
+  }
+  return { innerHTML: '' };
+}
+
+function updateProgressBarHTML(html) {
+  const bar = getProgressBar();
+  if (bar.innerHTML !== html) {
+    bar.innerHTML = html;
+  }
+}
+
+function updateProgressBar(text, value, time) {
+  let percent = !text.includes('%') ? `${Math.round(value * 100)}%` : '';
+  updateProgressBarHTML(`${text} ${percent}`);
+  const result = getPromptResult();
+  result.innerHTML += `<br>${text} ${percent}`;
+}
+
+onUiUpdate(function() {
+  const bar = getProgressBar();
+  if (bar.innerHTML === '') {
+    return;
+  }
+  let str = bar.innerHTML;
+  if (str.includes('Rendering') || str.includes('Generating')) {
+    updateProgressBar(str, 0);
+  } else {
+    const match = str.match(/([0-9.]+)%/);
+    if (match) {
+      const value = parseFloat(match[1]) / 100;
+      updateProgressBar(str, value);
+    }
+  }
+});
+
+function runWhenReady(fn) {
+  const gradioRoot = gradioApp();
+  if (gradioRoot !== null && gradioRoot !== undefined) {
+    fn();
+  } else {
+    const observer = new MutationObserver(function(mutations) {
+      if (gradioRoot !== null && gradioRoot !== undefined) {
+        observer.disconnect();
+        fn();
+      }
+    });
+    observer.observe(document, { childList: true, subtree: true });
+  }
+}
+
+runWhenReady(function() {
+  const progressbar = getProgressBar();
+  if (progressbar !== null) {
+    progressbar.innerHTML = '';
+  }
+});

app.py

@@ -1,41 +0,0 @@
-import gradio as gr
-
-def play_midi(midi_file):
-    # You would use a library like mido to handle the MIDI file
-    # For the purpose of this example, we'll just return the MIDI file path
-    return midi_file.name
-
-css = """
-<style>
-    .note.active {
-        stroke: black;
-        stroke-width: 0.75;
-        stroke-opacity: 0.75;
-    }
-    midi-visualizer {
-        display: block;
-        overflow-x: scroll;
-    }
-</style>
-"""
-
-html = """
-<div id="midi_visualizer_container"></div>
-<audio id="midi_audio" controls>
-    <source src="{{ midi_url }}" type="audio/midi">
-    Your browser does not support the audio element.
-</audio>
-<script>
-    // JavaScript code for handling MIDI visualization and playback
-    // Paste the provided JavaScript code here
-</script>
-"""
-
-with gr.Blocks() as demo:
-    midi_file = gr.File(label="Upload MIDI File", file_count="single", file_types=[".mid"])
-    gr.Markdown(css)
-    midi_url = gr.Variable(value="")
-    gr.Markdown(html)
-    midi_file.change(fn=play_midi, inputs=midi_file, outputs=midi_url)
-
-demo.launch()