fix midi visualizer

app.py

@@ -111,7 +111,15 @@ def create_msg(name, data):
     return {"name": name, "data": data, "uuid": uuid.uuid4().hex}
 
 
+def send_msgs(msgs, msgs_history):
+    msgs_history.append(msgs)
+    if len(msgs_history) > 50:
+        msgs_history.pop(0)
+    return json.dumps(msgs_history)
+
+
 def run(model_name, tab, instruments, drum_kit, mid, midi_events, gen_events, temp, top_p, top_k, allow_cc):
+    msgs_history = []
     mid_seq = []
     gen_events = int(gen_events)
     max_len = gen_events
@@ -146,7 +154,7 @@ def run(model_name, tab, instruments, drum_kit, mid, midi_events, gen_events, te
     init_msgs = [create_msg("visualizer_clear", None)]
     for tokens in mid_seq:
         init_msgs.append(create_msg("visualizer_append", tokenizer.tokens2event(tokens)))
-    yield mid_seq, None, None, init_msgs
+    yield mid_seq, None, None, send_msgs(init_msgs, msgs_history), msgs_history
     model = models[model_name]
     generator = generate(model, mid, max_len=max_len, temp=temp, top_p=top_p, top_k=top_k,
                          disable_patch_change=disable_patch_change, disable_control_change=not allow_cc,
@@ -155,22 +163,22 @@ def run(model_name, tab, instruments, drum_kit, mid, midi_events, gen_events, te
         token_seq = token_seq.tolist()
         mid_seq.append(token_seq)
         event = tokenizer.tokens2event(token_seq)
-        yield mid_seq, None, None, [create_msg("visualizer_append", event), create_msg("progress", [i + 1, gen_events])]
+        yield mid_seq, None, None, send_msgs([create_msg("visualizer_append", event), create_msg("progress", [i + 1, gen_events])], msgs_history), msgs_history
     mid = tokenizer.detokenize(mid_seq)
     with open(f"output.mid", 'wb') as f:
         f.write(MIDI.score2midi(mid))
     audio = synthesis(MIDI.score2opus(mid), soundfont_path)
-    yield mid_seq, "output.mid", (44100, audio), [create_msg("visualizer_end", None)]
+    yield mid_seq, "output.mid", (44100, audio), send_msgs([create_msg("visualizer_end", None)], msgs_history), msgs_history
 
 
-def cancel_run(mid_seq):
+def cancel_run(mid_seq, msgs_history):
     if mid_seq is None:
         return None, None, []
     mid = tokenizer.detokenize(mid_seq)
     with open(f"output.mid", 'wb') as f:
         f.write(MIDI.score2midi(mid))
     audio = synthesis(MIDI.score2opus(mid), soundfont_path)
-    return "output.mid", (44100, audio), [create_msg("visualizer_end", None)]
+    return "output.mid", (44100, audio), send_msgs([create_msg("visualizer_end", None)], msgs_history)
 
 
 def load_javascript(dir="javascript"):
@@ -191,25 +199,6 @@ def load_javascript(dir="javascript"):
     gr.routes.templates.TemplateResponse = template_response
 
 
-# JSMsgReceiver
-Textbox_postprocess_ori = gr.Textbox.postprocess
-
-msg_history = []
-
-
-# the change event may not trigger every time, so send msg history to avoid msg missing.
-def JSMsgReceiver_postprocess(self, y):
-    global msg_history
-    if self.elem_id == "msg_receiver" and y:
-        msg_history.append(y)
-        if len(msg_history) > 50:
-            msg_history = msg_history[1:]
-        y = json.dumps(msg_history)
-    return Textbox_postprocess_ori(self, y)
-
-
-gr.Textbox.postprocess = JSMsgReceiver_postprocess
-
 number2drum_kits = {-1: "None", 0: "Standard", 8: "Room", 16: "Power", 24: "Electric", 25: "TR-808", 32: "Jazz",
                     40: "Blush", 48: "Orchestra"}
 patch2number = {v: k for k, v in MIDI.Number2patch.items()}
@@ -223,8 +212,8 @@ if __name__ == "__main__":
     opt = parser.parse_args()
     soundfont_path = hf_hub_download(repo_id="skytnt/midi-model", filename="soundfont.sf2")
     models_info = {"generic pretrain model": ["skytnt/midi-model", ""],
-                   "j-pop finetune model": ["skytnt/midi-model-ft", "jpop/"],
-                   "touhou finetune model": ["skytnt/midi-model-ft", "touhou/"],
+                   # "j-pop finetune model": ["skytnt/midi-model-ft", "jpop/"],
+                   # "touhou finetune model": ["skytnt/midi-model-ft", "touhou/"],
                    }
     models = {}
     tokenizer = MIDITokenizer()
@@ -247,6 +236,7 @@ if __name__ == "__main__":
                     "(https://colab.research.google.com/github/SkyTNT/midi-model/blob/main/demo.ipynb)"
                     " for faster running and longer generation"
                     )
+        js_msg_history_state = gr.State(value=[])
         js_msg = gr.Textbox(elem_id="msg_receiver", visible=False)
         js_msg.change(None, [js_msg], [], js="""
         (msg_json) =>{
@@ -302,6 +292,7 @@ if __name__ == "__main__":
         run_event = run_btn.click(run, [input_model, tab_select, input_instruments, input_drum_kit, input_midi,
                                         input_midi_events, input_gen_events, input_temp, input_top_p, input_top_k,
                                         input_allow_cc],
-                                  [output_midi_seq, output_midi, output_audio, js_msg])
-        stop_btn.click(cancel_run, output_midi_seq, [output_midi, output_audio, js_msg], cancels=run_event, queue=False)
-    app.queue(2).launch(server_port=opt.port, share=opt.share, inbrowser=True)
+                                  [output_midi_seq, output_midi, output_audio, js_msg, js_msg_history_state],
+                                  concurrency_limit=3)
+        stop_btn.click(cancel_run, [output_midi_seq, js_msg_history_state], [output_midi, output_audio, js_msg], cancels=run_event, queue=False)
+    app.launch(server_port=opt.port, share=opt.share, inbrowser=True)

javascript/app.js

@@ -316,6 +316,10 @@ class MidiVisualizer extends HTMLElement{
         audio.addEventListener("pause", (event)=>{
             this.pause()
         })
+        audio.addEventListener("loadedmetadata", (event)=>{
+            //I don't know why the calculated totalTimeMs is different from audio.duration*10**3
+            this.totalTimeMs = audio.duration*10**3;
+        })
     }
 
     bindWaveformCursor(cursor){