update musicxml viz

app.py

@@ -7,7 +7,7 @@ from pathlib import Path
 from basic_pitch.inference import predict_and_save
 from basic_pitch import ICASSP_2022_MODEL_PATH
 from music21 import converter
-import shutil
+import base64
 
 # 加载环境变量
 load_dotenv()
@@ -15,19 +15,15 @@ MUSICGEN_API_URL = os.getenv("MUSICGEN_API_URL")
 
 # 确保输出目录存在
 Path("output").mkdir(exist_ok=True)
-Path("static").mkdir(exist_ok=True)
 
-def wav_to_midi_and_musicxml(wav_path: str, timestamp: str) -> Path:
-    """
-    将 wav 文件转换为 MIDI 和 MusicXML
-    """
+def wav_to_musicxml(wav_path: str, timestamp: str) -> str:
     output_dir = Path("output")
 
     # 清理旧 MIDI 文件
     for f in output_dir.glob("*_basic_pitch.mid"):
         f.unlink()
 
-    # 生成 MIDI
+    # 使用 basic-pitch 生成 MIDI
     predict_and_save(
         audio_path_list=[wav_path],
         output_directory=str(output_dir),
@@ -48,32 +44,43 @@ def wav_to_midi_and_musicxml(wav_path: str, timestamp: str) -> Path:
     musicxml_path = output_dir / f"generated_{timestamp}.musicxml"
     score.write("musicxml", fp=musicxml_path)
 
-    return musicxml_path
-
-def build_verovio_iframe(musicxml_path: Path) -> str:
-    static_dir = Path("static")
-    static_dir.mkdir(exist_ok=True)
-    target = static_dir / musicxml_path.name
-    shutil.copy(musicxml_path, target)
-
-    return f"""
-    <iframe
-        src="/verovio.html?load=static/{target.name}"
-        width="100%"
-        height="500px"
-        style="border: none;"
-    ></iframe>
+    with open(musicxml_path, "r", encoding="utf-8") as f:
+        musicxml_content = f.read()
+
+    return musicxml_content
+
+
+def render_musicxml_html(musicxml_content: str) -> str:
+    musicxml_b64 = base64.b64encode(musicxml_content.encode("utf-8")).decode("utf-8")
+
+    html = f"""
+    <div id="verovio-container"></div>
+    <script type="module">
+        import 'https://www.verovio.org/javascript/app/verovio-app.js';
+
+        const container = document.getElementById('verovio-container');
+        const app = new Verovio.App(container, {{
+            defaultView: 'responsive',
+            defaultZoom: 3,
+            enableResponsive: true,
+            enableDocument: false
+        }});
+
+        const musicxml = atob("{musicxml_b64}");
+        app.loadData(musicxml);
+    </script>
     """
+    return html
 
 
 def generate_music_and_score(melody_file, prompt):
     if not MUSICGEN_API_URL:
-        return None, "❌ 未配置 API URL，请检查 .env 文件"
+        return None, "❌ 未配置 MUSICGEN_API_URL，请检查 .env 文件"
 
     timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
     wav_out_path = f"output/generated_{timestamp}.wav"
 
-    # 1. 调用 MusicGen 接口
+    # Step 1: 调用 MusicGen API
     try:
         with open(melody_file, "rb") as f:
             files = {"melody": ("hum.wav", f, "audio/wav")}
@@ -85,21 +92,20 @@ def generate_music_and_score(melody_file, prompt):
     if response.status_code != 200:
         return None, f"❌ API 错误 {response.status_code}: {response.text}"
 
-    # 保存生成的 wav
     with open(wav_out_path, "wb") as out:
         out.write(response.content)
 
-    # 2. wav → midi → musicxml
+    # Step 2: 转 MusicXML
     try:
-        musicxml_path = wav_to_midi_and_musicxml(wav_out_path, timestamp)
+        musicxml_content = wav_to_musicxml(wav_out_path, timestamp)
     except Exception as e:
         return wav_out_path, f"⚠️ 音乐生成成功，但乐谱转换失败：{e}"
 
-    # 3. 构造 iframe
-    iframe_html = build_verovio_iframe(musicxml_path)
-    return wav_out_path, iframe_html
+    # Step 3: 生成 HTML
+    verovio_html = render_musicxml_html(musicxml_content)
+    return wav_out_path, verovio_html
+
 
-# Gradio 接口
 demo = gr.Interface(
     fn=generate_music_and_score,
     inputs=[
@@ -111,7 +117,7 @@ demo = gr.Interface(
         gr.HTML(label="🎼 乐谱预览 (Verovio)")
     ],
     title="🎵 MusicGen + 乐谱生成器",
-    description="上传一段哼唱 (.wav) 和文字描述，自动生成音乐，并以 Verovio 可视化乐谱。"
+    description="上传哼唱音频和描述，生成音乐并以 Verovio 可视化乐谱（纯 JS）"
 )
 
 if __name__ == "__main__":