22

app.py

@@ -274,6 +274,23 @@ CUSTOM_CSS = """
     margin: auto !important;
 }
 
+/* ---------- Badge links: no underline, no gap artifacts ---------- */
+#app-header .badges a {
+    text-decoration: none !important;
+    display: inline-block;
+    line-height: 0;
+    margin: 3px 2px;
+}
+#app-header .badges a img,
+#app-header .badges > img {
+    display: inline-block;
+    vertical-align: middle;
+    margin: 0;
+}
+#app-header .badges {
+    line-height: 1.8;
+}
+
 /* ---------- Header / 头部 ---------- */
 #app-header {
     text-align: center;
@@ -374,14 +391,9 @@ CUSTOM_CSS = """
 HEADER_HTML = """
 <div id="app-header" align="center">
   <h1>
-    🎤 <a href="https://github.com/ASLP-lab/YingMusic-Singer" target="_blank">YingMusic-Singer</a>:
-    Controllable Singing Voice Synthesis with Flexible Lyric Manipulation and Annotation-free Melody Guidance
+    🎤 YingMusic-Singer: Controllable Singing Voice Synthesis with Flexible Lyric Manipulation and Annotation-free Melody Guidance
   </h1>
 
-  <div class="lang-links">
-    <a href="">English</a> ｜ <a href="README_ZH.md">中文</a>
-  </div>
-
   <div class="badges" style="margin: 10px 0;">
     <img src="https://img.shields.io/badge/Python-3.10-3776AB?logo=python&logoColor=white" alt="Python">
     <img src="https://img.shields.io/badge/License-CC%20BY--NC--SA%204.0-lightgrey" alt="License">
@@ -488,9 +500,91 @@ def build_ui():
                     lines=5,
                 )
 
+# ---------------------------------------------------------------------------
+# Build the Gradio UI / 构建界面
+# ---------------------------------------------------------------------------
+def build_ui():
+    with gr.Blocks(
+        css=CUSTOM_CSS, title="YingMusic Singer", theme=gr.themes.Base()
+    ) as demo:
+
+        # ---- Header ----
+        gr.HTML(HEADER_HTML)
+        gr.HTML("<hr style='border-color:#30363d; margin: 8px 0 18px;'>")
+
         # ================================================================
-        # ROW 2 – 伴奏分离选项 / Vocal Separation Options
+        # ROW 1 – 音频输入 + 歌词
         # ================================================================
+        with gr.Row(equal_height=True):
+            with gr.Column(scale=1):
+                gr.Markdown("#### 🎙️ 音频输入 / Audio Inputs", elem_classes="section-title")
+                ref_audio = gr.Audio(
+                    label="参考音频 / Reference Audio（提供音色 / provides timbre）",
+                    type="filepath",
+                )
+                melody_audio = gr.Audio(
+                    label="旋律音频 / Melody Audio（提供旋律与时长 / provides melody & duration）",
+                    type="filepath",
+                )
+            with gr.Column(scale=1):
+                gr.Markdown("#### ✏️ 歌词 / Lyrics", elem_classes="section-title")
+                ref_text = gr.Textbox(
+                    label="参考音频歌词 / Reference Text",
+                    placeholder="例如 / e.g.：该体谅的不执着|如果那天我",
+                    lines=5,
+                )
+                target_text = gr.Textbox(
+                    label="目标合成歌词 / Target Text",
+                    placeholder="例如 / e.g.：好多天|看不完你",
+                    lines=5,
+                )
+
+        # ================================================================
+        # ROW 2 – 预设示例 / Example Presets  ← before vocal separation
+        # ================================================================
+        gr.HTML("<hr style='border-color:#30363d; margin: 16px 0 12px;'>")
+        gr.Markdown("#### 🎵 预设示例 / Example Presets", elem_classes="section-title")
+        gr.Markdown(
+            "<small style='color:#8b949e;'>点击任意行自动填入输入区域 / Click any row to auto-fill the inputs above</small>"
+        )
+
+        # Hidden advanced-param components so gr.Examples can reference them
+        # (real sliders rendered inside the accordion below override these values)
+        with gr.Row(visible=False):
+            _sep_flag_ex   = gr.Checkbox(value=True)
+            _mix_flag_ex   = gr.Checkbox(value=False)
+            _sil_ex        = gr.Number(value=0.5)
+            _tshift_ex     = gr.Number(value=0.5)
+            _nfe_ex        = gr.Number(value=32)
+            _cfg_ex        = gr.Number(value=3.0)
+            _seed_ex       = gr.Number(value=-1, precision=0)
+
+        _example_inputs = [
+            ref_audio, melody_audio, ref_text, target_text,
+            _sep_flag_ex, _mix_flag_ex,
+            _sil_ex, _tshift_ex, _nfe_ex, _cfg_ex, _seed_ex,
+        ]
+
+        with gr.Tabs():
+            with gr.Tab("🎼 Melody Control"):
+                gr.Examples(
+                    examples=EXAMPLES_MELODY_CONTROL,
+                    inputs=_example_inputs,
+                    label="Melody Control Examples",
+                    examples_per_page=5,
+                )
+            with gr.Tab("✏️ Lyric Edit"):
+                gr.Examples(
+                    examples=EXAMPLES_LYRIC_EDIT,
+                    inputs=_example_inputs,
+                    label="Lyric Edit Examples",
+                    examples_per_page=5,
+                )
+
+        # ================================================================
+        # ROW 3 – 伴奏分离 / Vocal Separation
+        # ================================================================
+        gr.HTML("<hr style='border-color:#30363d; margin: 16px 0 12px;'>")
         gr.Markdown("#### 🎚️ 伴奏分离 / Vocal Separation", elem_classes="section-title")
         with gr.Row():
             separate_vocals_flag = gr.Checkbox(
@@ -512,7 +606,7 @@ def build_ui():
             )
 
         # ================================================================
-        # ROW 3 – 高级参数（隐藏默认值）/ Advanced Parameters (hidden defaults)
+        # ROW 4 – 高级参数 / Advanced Parameters (collapsible)
         # ================================================================
         with gr.Accordion("⚙️ 高级参数 / Advanced Parameters", open=False):
             with gr.Row():
@@ -540,38 +634,6 @@ def build_ui():
                     info="-1 表示随机 / -1 means random",
                 )
 
-        # All inputs in order expected by synthesize()
-        _all_inputs = [
-            ref_audio, melody_audio, ref_text, target_text,
-            separate_vocals_flag, mix_accompaniment_flag,
-            sil_len_to_end, t_shift, nfe_step, cfg_strength, seed,
-        ]
-
-        # ================================================================
-        # ROW 4 – 预设示例 / Example Presets
-        # ================================================================
-        gr.HTML("<hr style='border-color:#30363d; margin: 20px 0 12px;'>")
-        gr.Markdown("#### 🎵 预设示例 / Example Presets", elem_classes="section-title")
-        gr.Markdown(
-            "<small style='color:#8b949e;'>点击任意行自动填入输入区域 / Click any row to auto-fill the inputs above</small>"
-        )
-
-        with gr.Tabs():
-            with gr.Tab("🎼 Melody Control"):
-                gr.Examples(
-                    examples=EXAMPLES_MELODY_CONTROL,
-                    inputs=_all_inputs,
-                    label="Melody Control Examples",
-                    examples_per_page=5,
-                )
-            with gr.Tab("✏️ Lyric Edit"):
-                gr.Examples(
-                    examples=EXAMPLES_LYRIC_EDIT,
-                    inputs=_all_inputs,
-                    label="Lyric Edit Examples",
-                    examples_per_page=5,
-                )
-
         # ================================================================
         # ROW 5 – 合成按钮与输出 / Run & Output
         # ================================================================
@@ -584,11 +646,18 @@ def build_ui():
             elem_id="output-audio",
         )
 
+        # All inputs for the synthesize() call (uses real sliders, not example placeholders)
+        _all_inputs = [
+            ref_audio, melody_audio, ref_text, target_text,
+            separate_vocals_flag, mix_accompaniment_flag,
+            sil_len_to_end, t_shift, nfe_step, cfg_strength, seed,
+        ]
+
         # ================================================================
         # Event wiring / 事件绑定
         # ================================================================
         separate_vocals_flag.change(
-            fn=lambda sep: gr.update(interactive=sep, value=False if not sep else False),
+            fn=lambda sep: gr.update(interactive=sep, value=False),
             inputs=[separate_vocals_flag],
             outputs=[mix_accompaniment_flag],
         )
@@ -599,13 +668,8 @@ def build_ui():
             outputs=output_audio,
         )
 
-        # ---- 页脚：免责声明 + 使用提示 / Footer: disclaimer + tip ----
+        # ---- 页脚：免责声明 / Footer: disclaimer ----
         gr.HTML(DISCLAIMER_HTML)
-        gr.Markdown(
-            "<center style='color:#6e7681; font-size:0.78rem; margin-top: 4px;'>"
-            "Use <code>|</code> to separate lyric phrases &nbsp;·&nbsp; 用 <code>|</code> 分隔歌词乐句"
-            "</center>",
-        )
 
     return demo