javascript/app.js

function gradioApp() {
    const elems = document.getElementsByTagName('gradio-app')
    const gradioShadowRoot = elems.length == 0 ? null : elems[0].shadowRoot
    return !!gradioShadowRoot ? gradioShadowRoot : document;
}

uiUpdateCallbacks = []
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() {
    var 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;
        }
    })
})();

class MidiVisualizer extends HTMLElement{
    constructor() {
        super();
        this.midiEvents = [];
        this.wrapper = null;
        this.svg = null;
        this.timeLine = null;
        this.config = {
            noteHeight : 4,
            beatWidth: 32
        }
        this.svgWidth = 0;
        this.t1 = 0;
        this.playTime = 0
        this.colorMap = new Map();
        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);
    }

    setPlayTime(t){
        this.playTime = t
        let x = Math.round((t/16)*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}`);
    }

    clearMidiEvents(){
        this.midiEvents = [];
        this.svgWidth = 0
        this.svg.innerHTML = ''
        this.t1 = 0
        this.colorMap.clear()
        this.svg.style.width = `${this.svgWidth}px`;
        this.setPlayTime(0);
        this.svg.appendChild(this.timeLine)
    }

    appendMidiEvent(midiEvent){
        if(midiEvent instanceof Array && midiEvent.length > 0){
            this.midiEvents.push(midiEvent);
            this.t1 += midiEvent[1]
            let t = this.t1*16 + midiEvent[2]
            if(midiEvent[0] === "note"){
                let track = midiEvent[3]
                let duration = midiEvent[4]
                let channel = midiEvent[5]
                let pitch = midiEvent[6]
                let velocity = midiEvent[7]
                let x = (t/16)*this.config.beatWidth
                let y = (127 - pitch)*this.config.noteHeight
                let w = (duration/16)*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)
                this.drawNote(x,y,w,h, `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${opacity})`)
                this.setPlayTime(t);
                this.wrapper.scrollTo(this.svgWidth - this.wrapper.offsetWidth, 0)
            }
            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 = [Math.round(Math.random()*240) + 10, Math.round(Math.random()*240)+ 10, Math.round(Math.random()*240)+ 10];
        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);
        // 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
  }
}

customElements.define('midi-visualizer', MidiVisualizer);

(()=>{
    let midi_visualizer_container_inited = null
    let midi_visualizer = document.createElement('midi-visualizer')
    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;
        }
    })

    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"
        divProgress.appendChild(divInner);
        parentProgressbar.insertBefore(divProgress, progressbarContainer);
    }

    function removeProgressBar(progressbarContainer){
        let parentProgressbar = progressbarContainer.parentNode;
        let divProgress = parentProgressbar.querySelector(".progressDiv");
        parentProgressbar.removeChild(divProgress);
    }

    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}`;
    }

    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.setPlayTime(0)
                removeProgressBar(midi_visualizer_container_inited)
                break;
            default:
        }
    })
})();