update musicxml viz

app.py

@@ -7,16 +7,17 @@ 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 base64
 
 # 加载环境变量
 load_dotenv()
 MUSICGEN_API_URL = os.getenv("MUSICGEN_API_URL")
+VEROVIO_API_URL = os.getenv("VEROVIO_API_URL")
 
 # 确保输出目录存在
 Path("output").mkdir(exist_ok=True)
 
-def wav_to_musicxml(wav_path: str, timestamp: str) -> str:
+
+def wav_to_musicxml(wav_path: str, timestamp: str) -> Path:
     output_dir = Path("output")
 
     # 清理旧 MIDI 文件
@@ -44,33 +45,30 @@ def wav_to_musicxml(wav_path: str, timestamp: str) -> str:
     musicxml_path = output_dir / f"generated_{timestamp}.musicxml"
     score.write("musicxml", fp=musicxml_path)
 
-    with open(musicxml_path, "r", encoding="utf-8") as f:
-        musicxml_content = f.read()
-
-    return musicxml_content
+    return musicxml_path
 
 
-def render_musicxml_html(musicxml_content: str) -> str:
-    musicxml_b64 = base64.b64encode(musicxml_content.encode("utf-8")).decode("utf-8")
+def render_musicxml_via_verovio_api(musicxml_path: Path) -> str:
+    if not VEROVIO_API_URL:
+        return "❌ 未配置 VEROVIO_API_URL"
 
-    html = f"""
-    <div id="verovio-container"></div>
-    <script type="module">
-        import 'https://www.verovio.org/javascript/app/verovio-app.js';
+    try:
+        with open(musicxml_path, "rb") as f:
+            files = {'file': f}
+            response = requests.post(VEROVIO_API_URL, files=files)
+    except Exception as e:
+        return f"❌ 调用 Verovio API 失败: {e}"
 
-        const container = document.getElementById('verovio-container');
-        const app = new Verovio.App(container, {{
-            defaultView: 'responsive',
-            defaultZoom: 3,
-            enableResponsive: true,
-            enableDocument: false
-        }});
+    if response.status_code != 200:
+        return f"❌ Verovio API 错误 {response.status_code}: {response.text}"
 
-        const musicxml = atob("{musicxml_b64}");
-        app.loadData(musicxml);
-    </script>
-    """
-    return html
+    try:
+        svg = response.json()["svg"]
+        svg_b64 = base64.b64encode(svg.encode("utf-8")).decode("utf-8")
+        html = f'<img src="data:image/svg+xml;base64,{svg_b64}" style="width:100%; max-height:600px;" />'
+        return html
+    except Exception as e:
+        return f"⚠️ SVG 解析失败：{e}"
 
 
 def generate_music_and_score(melody_file, prompt):
@@ -97,13 +95,13 @@ def generate_music_and_score(melody_file, prompt):
 
     # Step 2: 转 MusicXML
     try:
-        musicxml_content = wav_to_musicxml(wav_out_path, timestamp)
+        musicxml_path = wav_to_musicxml(wav_out_path, timestamp)
     except Exception as e:
         return wav_out_path, f"⚠️ 音乐生成成功，但乐谱转换失败：{e}"
 
-    # Step 3: 生成 HTML
-    verovio_html = render_musicxml_html(musicxml_content)
-    return wav_out_path, verovio_html
+    # Step 3: 生成 SVG via Verovio API
+    html = render_musicxml_via_verovio_api(musicxml_path)
+    return wav_out_path, html
 
 
 demo = gr.Interface(
@@ -114,10 +112,10 @@ demo = gr.Interface(
     ],
     outputs=[
         gr.Audio(type="filepath", label="🎵 生成的音乐"),
-        gr.HTML(label="🎼 乐谱预览 (Verovio)")
+        gr.HTML(label="🎼 乐谱预览（由 Verovio 渲染）")
     ],
     title="🎵 MusicGen + 乐谱生成器",
-    description="上传哼唱音频和描述，生成音乐并以 Verovio 可视化乐谱（纯 JS）"
+    description="上传哼唱音频和描述，生成音乐并以 Verovio 渲染 SVG 乐谱"
 )
 
 if __name__ == "__main__":