Update javascript/app.js

javascript/app.js

@@ -1,187 +1,207 @@
 function gradioApp() {
-    const elems = document.getElementsByTagName('gradio-app')
-    const gradioShadowRoot = elems.length == 0 ? null : elems[0].shadowRoot
-    return !!gradioShadowRoot ? gradioShadowRoot : document;
+  const elems = document.getElementsByTagName('gradio-app');
+  const gradioShadowRoot = elems.length === 0 ? null : elems[0].shadowRoot;
+  return !!gradioShadowRoot ? gradioShadowRoot : document;
 }
 
-uiUpdateCallbacks = []
-msgReceiveCallbacks = []
+const uiUpdateCallbacks = [];
+const msgReceiveCallbacks = [];
 
-function onUiUpdate(callback){
-    uiUpdateCallbacks.push(callback)
+function onUiUpdate(callback) {
+  uiUpdateCallbacks.push(callback);
 }
 
-function onMsgReceive(callback){
-    msgReceiveCallbacks.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 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)})
+  queue.forEach(function (x) {
+    runCallback(x, m);
+  });
 }
 
-document.addEventListener("DOMContentLoaded", function() {
-    var mutationObserver = new MutationObserver(function(m){
-        executeCallbacks(uiUpdateCallbacks, m);
-    });
-    mutationObserver.observe( gradioApp(), { childList:true, subtree:true })
+document.addEventListener('DOMContentLoaded', function () {
+  const mutationObserver = new MutationObserver(function (m) {
+    executeCallbacks(uiUpdateCallbacks, m);
+  });
+  mutationObserver.observe(gradioApp(), { childList: true, subtree: true });
 });
 
-(()=>{
-    let mse_receiver_inited = null
-    onUiUpdate(()=>{
-        let app = gradioApp()
-        let msg_receiver = app.querySelector("#msg_receiver");
-        if(!!msg_receiver && mse_receiver_inited !== msg_receiver){
-            let mutationObserver = new MutationObserver(function(ms){
-                ms.forEach((m)=>{
-                    m.addedNodes.forEach((node)=>{
-                        if(node.nodeName === "P"){
-                            let obj = JSON.parse(node.innerText);
-                            if(obj instanceof Array){
-                                obj.forEach((o)=>{executeCallbacks(msgReceiveCallbacks, o);});
-                            }else{
-                                executeCallbacks(msgReceiveCallbacks, obj);
-                            }
-                        }
-                    })
-                })
-            });
-            mutationObserver.observe( msg_receiver, {childList:true, subtree:true, characterData:true})
-            console.log("receiver init");
-            mse_receiver_inited = msg_receiver;
-        }
-    })
-})()
+(function () {
+  let mse_receiver_inited = null;
+  onUiUpdate(() => {
+    const app = gradioApp();
+    const msg_receiver = app.querySelector('#msg_receiver');
+    if (!!msg_receiver && mse_receiver_inited !== msg_receiver) {
+      const mutationObserver = new MutationObserver(function (ms) {
+        ms.forEach((m) => {
+          m.addedNodes.forEach((node) => {
+            if (node.nodeName === 'P') {
+              const obj = JSON.parse(node.innerText);
+              if (obj instanceof Array) {
+                obj.forEach((o) => {
+                  executeCallbacks(msgReceiveCallbacks, o);
+                });
+              } else {
+                executeCallbacks(msgReceiveCallbacks, obj);
+              }
+            }
+          });
+        });
+      });
+      mutationObserver.observe(msg_receiver, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
+      console.log('receiver init');
+      mse_receiver_inited = msg_receiver;
+    }
+  });
+})();
 
 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)
-    };
+  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.tickPreBeat = 500
-        this.svgWidth = 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.colorMap.clear()
-        this.setPlayTime(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(midiEvent instanceof Array && midiEvent.length > 0){
-            if(midiEvent[0] === "note"){
-                let t = midiEvent[1]
-                let duration = midiEvent[2]
-                let channel = midiEvent[3]
-                let pitch = midiEvent[4]
-                let velocity = midiEvent[5]
-                let x = (t/this.tickPreBeat)*this.config.beatWidth
-                let y = (127 - pitch)*this.config.noteHeight
-                let w = (duration/this.tickPreBeat)*this.config.beatWidth
-                let h = this.config.noteHeight
-                this.svgWidth = Math.ceil(Math.max(x + w, this.svgWidth))
-                let color = this.getColor(0, 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`;
-        }
-
+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.tickPreBeat = 500;
+    this.svgWidth = 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.colorMap.clear();
+    this.setPlayTime(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 (midiEvent instanceof Array && midiEvent.length > 0) {
+      if (midiEvent[0] === 'note') {
+        const t = midiEvent[1];
+        const duration = midiEvent[2];
+        const channel = midiEvent[3];
+        const pitch = midiEvent[4];
+        const velocity = midiEvent[5];
+        const x = (t / this.tickPreBeat) * this.config.beatWidth;
+        const y = (127 - pitch) * this.config.noteHeight;
+        const w = (duration / this.tickPreBeat) * this.config.beatWidth;
+        const h = this.config.noteHeight;
+        this.svgWidth = Math.ceil(Math.max(x + w, this.svgWidth));
+        const color = this.getColor(0, channel);
+        const opacity = (Math.min(1, velocity / 127 + 0.1)).toFixed(2);
+        const 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) {
+  getColor(track, channel) {
     const colors = [
-        [255, 0, 0],      // Red
-        [255, 255, 0],    // Yellow
-        [0, 128, 0],      // Green
-        [0, 255, 255],    // Cyan
-        [0, 0, 255],      // Blue
-        [255, 192, 203],  // Pink
-        [255, 165, 0],    // Orange
-        [128, 0, 128],    // Purple
-        [128, 128, 128],  // Gray
-        [255, 255, 255],  // White
-        [255, 215, 0],    // Gold
-        [192, 192, 192]   // Silver
+      [255, 0, 0], // Red
+      [255, 255, 0], // Yellow
+      [0, 128, 0], // Green
+      [0, 255, 255], // Cyan
+      [0, 0, 255], // Blue
+      [255, 192, 203], // Pink
+      [255, 165, 0], // Orange
+      [128, 0, 128], // Purple
+      [128, 128, 128], // Gray
+      [255, 255, 255], // White
+      [255, 215, 0], // Gold
+      [192, 192, 192], // Silver
     ];
 
     // Calculate an index based on the track and channel
@@ -192,225 +212,218 @@ class MidiVisualizer extends HTMLElement{
 
     // Return the RGB color in the format "rgb(r, g, b)"
     return { r, g, b };
+  }
 
+  drawNote(x, y, w, h, fill) {
+    if (!this.svg) {
+      return null;
     }
-
-
-    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);
-        // Round values to the nearest integer to avoid partially filled pixels.
-        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
-        let lastT = 0
-        this.midiTimes.push({ms:ms, t: 0, tempo: tempo})
-        midiEvents.forEach((midiEvent)=>{
-            let t = midiEvent[1]
-            ms += ((t- lastT) / this.tickPreBeat) * tempo
-            if(midiEvent[0]==="set_tempo"){
-                tempo = midiEvent[2]
-                this.midiTimes.push({ms:ms, t: t, tempo: tempo})
-            }
-            lastT = t
-        })
-    }
-
-    setPlayTime(t){
-        this.playTime = t
-        let x = Math.round((t/this.tickPreBeat)*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.wrapper.scrollTo(Math.max(0, x - this.wrapper.offsetWidth/2), 0)
-
-        if(this.playing){
-            let activeNotes = []
-            this.removeActiveNotes(this.activeNotes)
-            this.midiEvents.forEach((midiEvent)=>{
-                if(midiEvent[0] === "note"){
-                    let time = midiEvent[1]
-                    let duration = midiEvent[2]
-                    let note = midiEvent[midiEvent.length - 1]
-                    if(time <=this.playTime && time+duration>= this.playTime){
-                        activeNotes.push(note)
-                    }
-                }
-            })
-            this.addActiveNotes(activeNotes)
-        }
-    }
-
-    setPlayTimeMs(ms){
-        this.playTimeMs = ms
-        let playTime = 0
-        for(let i =0;i<this.midiTimes.length;i++){
-            let midiTime = this.midiTimes[i]
-            if(midiTime.ms>=ms){
-                break;
-            }
-            playTime = midiTime.t + (ms-midiTime.ms) * this.tickPreBeat / midiTime.tempo
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.classList.add('note');
+    rect.setAttribute('fill', fill);
+    // Round values to the nearest integer to avoid partially filled pixels.
+    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();
+    const midiEvents = this.midiEvents.sort((a, b) => a[1] - b[1]);
+    let tempo = (60 / 120) * 10 ** 3;
+    let ms = 0;
+    let lastT = 0;
+    this.midiTimes.push({ ms: ms, t: 0, tempo: tempo });
+    midiEvents.forEach((midiEvent) => {
+      const t = midiEvent[1];
+      ms += ((t - lastT) / this.tickPreBeat) * tempo;
+      if (midiEvent[0] === 'set_tempo') {
+        tempo = midiEvent[2];
+        this.midiTimes.push({ ms: ms, t: t, tempo: tempo });
+      }
+      lastT = t;
+    });
+  }
+
+  setPlayTime(t) {
+    this.playTime = t;
+    const x = Math.round((t / this.tickPreBeat) * 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.wrapper.scrollTo(Math.max(0, x - this.wrapper.offsetWidth / 2), 0);
+
+    if (this.playing) {
+      const activeNotes = [];
+      this.removeActiveNotes(this.activeNotes);
+      this.midiEvents.forEach((midiEvent) => {
+        if (midiEvent[0] === 'note') {
+          const time = midiEvent[1];
+          const duration = midiEvent[2];
+          const note = midiEvent[midiEvent.length - 1];
+          if (time <= this.playTime && time + duration >= this.playTime) {
+            activeNotes.push(note);
+          }
         }
-        this.setPlayTime(playTime)
-    }
-
-    addActiveNotes(notes){
-        notes.forEach((note)=>{
-            this.activeNotes.push(note)
-            note.classList.add('active');
-        });
-    }
-
-    removeActiveNotes(notes){
-        notes.forEach((note)=>{
-            let idx = this.activeNotes.indexOf(note)
-            if(idx>-1)
-                this.activeNotes.splice(idx, 1);
-            note.classList.remove('active');
-        });
+      });
+      this.addActiveNotes(activeNotes);
     }
-
-    play(){
-        this.playing = true;
-        this.timer = setInterval(() => {
-            this.setPlayTimeMs(this.playTimeMs + 10)
-        }, 10);
-    }
-
-    pause(){
-        if(!!this.timer)
-            clearInterval(this.timer)
-        this.removeActiveNotes(this.activeNotes)
-        this.timer = null;
-        this.playing = false;
+  }
+
+  setPlayTimeMs(ms) {
+    this.playTimeMs = ms;
+    let playTime = 0;
+    for (let i = 0; i < this.midiTimes.length; i++) {
+      const midiTime = this.midiTimes[i];
+      if (midiTime.ms >= ms) {
+        break;
+      }
+      playTime = midiTime.t + ((ms - midiTime.ms) * this.tickPreBeat) / midiTime.tempo;
     }
+    this.setPlayTime(playTime);
+  }
 
+  addActiveNotes(notes) {
+    notes.forEach((note) => {
+      this.activeNotes.push(note);
+      note.classList.add('active');
+    });
+  }
 
-    bindAudioPlayer(audio){
-        this.pause()
-        audio.addEventListener("play", (event)=>{
-            this.play()
-        })
-        audio.addEventListener("pause", (event)=>{
-            this.pause()
-        })
-        audio.addEventListener("timeupdate", (event)=>{
-            this.setPlayTimeMs(event.target.currentTime*10**3)
-        })
-    }
+  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;
+    this.timer = setInterval(() => {
+      this.setPlayTimeMs(this.playTimeMs + 10);
+    }, 10);
+  }
+
+  pause() {
+    if (!!this.timer) clearInterval(this.timer);
+    this.removeActiveNotes(this.activeNotes);
+    this.timer = null;
+    this.playing = false;
+  }
+
+  bindAudioPlayer(audio) {
+    this.pause();
+    audio.addEventListener('play', (event) => {
+      this.play();
+    });
+    audio.addEventListener('pause', (event) => {
+      this.pause();
+    });
+    audio.addEventListener('timeupdate', (event) => {
+      this.setPlayTimeMs(event.target.currentTime * 10 ** 3);
+    });
+  }
 }
 
 customElements.define('midi-visualizer', MidiVisualizer);
 
-(()=>{
-    let midi_visualizer_container_inited = null
-    let midi_audio_inited = null;
-    let midi_visualizer = document.createElement('midi-visualizer')
-
-    if(window.innerWidth < 300){ 
-        midi_visualizer.config.noteHeight = 1
-        midi_visualizer.config.beatWidth = 8
-    }else if(window.innerWidth < 600){
-        midi_visualizer.config.noteHeight = 2
-        midi_visualizer.config.beatWidth = 16
-    }else if(window.innerWidth < 1280){
-        midi_visualizer.config.noteHeight = 4
-        midi_visualizer.config.beatWidth = 32
-    }else {
-        midi_visualizer.config.noteHeight = 4
-        midi_visualizer.config.beatWidth = 64
-    }
-    midi_visualizer.svg.style.height = `${midi_visualizer.config.noteHeight*128}px`; //reload svg height
-
-    onUiUpdate((m)=>{
-        let app = gradioApp()
-        let midi_visualizer_container = app.querySelector("#midi_visualizer_container");
-        if(!!midi_visualizer_container && midi_visualizer_container_inited!== midi_visualizer_container){
-            midi_visualizer_container.appendChild(midi_visualizer)
-            midi_visualizer_container_inited = midi_visualizer_container;
-        }
-        let midi_audio = app.querySelector("#midi_audio > audio");
-        if(!!midi_audio && midi_audio_inited!==midi_audio){
-            midi_visualizer.bindAudioPlayer(midi_audio)
-            midi_audio_inited = midi_audio
-        }
-    })
-
-    function createProgressBar(progressbarContainer){
-        let parentProgressbar = progressbarContainer.parentNode;
-        let divProgress = document.createElement('div');
-        divProgress.className='progressDiv';
-        let rect = progressbarContainer.getBoundingClientRect();
-        divProgress.style.width = rect.width + "px";
-        divProgress.style.background = "#b4c0cc";
-        divProgress.style.borderRadius = "8px";
-        let 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);
-        parentProgressbar.insertBefore(divProgress, progressbarContainer);
+(function () {
+  let midi_visualizer_container_inited = null;
+  let midi_audio_inited = null;
+  const midi_visualizer = document.createElement('midi-visualizer');
+
+  if (window.innerWidth < 300) {
+    midi_visualizer.config.noteHeight = 1;
+    midi_visualizer.config.beatWidth = 8;
+  } else if (window.innerWidth < 600) {
+    midi_visualizer.config.noteHeight = 2;
+    midi_visualizer.config.beatWidth = 16;
+  } else if (window.innerWidth < 1280) {
+    midi_visualizer.config.noteHeight = 4;
+    midi_visualizer.config.beatWidth = 32;
+  } else {
+    midi_visualizer.config.noteHeight = 4;
+    midi_visualizer.config.beatWidth = 64;
+  }
+  midi_visualizer.svg.style.height = `${midi_visualizer.config.noteHeight * 128}px`; // Reload svg height
+
+  onUiUpdate((m) => {
+    const app = gradioApp();
+    const midi_visualizer_container = app.querySelector('#midi_visualizer_container');
+    if (!!midi_visualizer_container && midi_visualizer_container_inited !== midi_visualizer_container) {
+      midi_visualizer_container.appendChild(midi_visualizer);
+      midi_visualizer_container_inited = midi_visualizer_container;
     }
-
-    function removeProgressBar(progressbarContainer){
-        let parentProgressbar = progressbarContainer.parentNode;
-        let divProgress = parentProgressbar.querySelector(".progressDiv");
-        parentProgressbar.removeChild(divProgress);
+    const midi_audio = app.querySelector('#midi_audio > audio');
+    if (!!midi_audio && midi_audio_inited !== midi_audio) {
+      midi_visualizer.bindAudioPlayer(midi_audio);
+      midi_audio_inited = midi_audio;
     }
-
-    function setProgressBar(progressbarContainer, progress, total){
-        let parentProgressbar = progressbarContainer.parentNode;
-        let divProgress = parentProgressbar.querySelector(".progressDiv");
-        let divInner = parentProgressbar.querySelector(".progress");
-        if(total===0)
-            total = 1;
-        divInner.style.width = `${(progress/total)*100}%`;
-        divInner.textContent = `${progress}/${total}`;
+  });
+
+  function createProgressBar(progressbarContainer) {
+    const parentProgressbar = progressbarContainer.parentNode;
+    const divProgress = document.createElement('div');
+    divProgress.className = 'progressDiv';
+    const rect = progressbarContainer.getBoundingClientRect();
+    divProgress.style.width = rect.width + 'px';
+    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);
+    parentProgressbar.insertBefore(divProgress, progressbarContainer);
+  }
+
+  function removeProgressBar(progressbarContainer) {
+    const parentProgressbar = progressbarContainer.parentNode;
+    const divProgress = parentProgressbar.querySelector('.progressDiv');
+    parentProgressbar.removeChild(divProgress);
+  }
+
+  function setProgressBar(progressbarContainer, progress, total) {
+    const parentProgressbar = progressbarContainer.parentNode;
+    const divProgress = parentProgressbar.querySelector('.progressDiv');
+    const divInner = parentProgressbar.querySelector('.progress');
+    if (total === 0) total = 1;
+    divInner.style.width = `${(progress / total) * 100}%`;
+    divInner.textContent = `${progress}/${total}`;
+  }
+
+  onMsgReceive((msg) => {
+    switch (msg.name) {
+      case 'visualizer_clear':
+        midi_visualizer.clearMidiEvents();
+        createProgressBar(midi_visualizer_container_inited);
+        break;
+      case 'visualizer_append':
+        midi_visualizer.appendMidiEvent(msg.data);
+        break;
+      case 'progress':
+        const progress = msg.data[0];
+        const total = msg.data[1];
+        setProgressBar(midi_visualizer_container_inited, progress, total);
+        break;
+      case 'visualizer_end':
+        midi_visualizer.finishAppendMidiEvent();
+        midi_visualizer.setPlayTime(0);
+        removeProgressBar(midi_visualizer_container_inited);
+        break;
+      default:
     }
-
-    onMsgReceive((msg)=>{
-        switch (msg.name) {
-            case "visualizer_clear":
-                midi_visualizer.clearMidiEvents();
-                createProgressBar(midi_visualizer_container_inited)
-                break;
-            case "visualizer_append":
-                midi_visualizer.appendMidiEvent(msg.data);
-                break;
-            case "progress":
-                let progress = msg.data[0]
-                let total = msg.data[1]
-                setProgressBar(midi_visualizer_container_inited, progress, total)
-                break;
-            case "visualizer_end":
-                midi_visualizer.finishAppendMidiEvent()
-                midi_visualizer.setPlayTime(0);
-                removeProgressBar(midi_visualizer_container_inited);
-                break;
-            default:
-        }
-    })
-})();
+  });
+})();