更新用户前端

app.py

@@ -97,6 +97,20 @@ APP_CSS = """
     color: #475569;
     font-size: 15px;
 }
+.voicegate-links a {
+    display: inline-block;
+    margin: 4px 10px 4px 0;
+}
+.voicegate-section {
+    border: 1px solid #e5e7eb;
+    border-radius: 8px;
+    padding: 14px;
+    background: #ffffff;
+}
+.voicegate-section h3 {
+    margin: 0 0 8px;
+    font-size: 16px;
+}
 .voicegate-note {
     color: #475569;
     font-size: 13px;
@@ -823,53 +837,78 @@ def voicegate_user_run(audio_path: str | None, target_language: str, tts_trim_st
         return None, "\n".join(lines), None, None, "", ""
 
 
-with gr.Blocks(title="VoiceGate", css=APP_CSS) as demo:
+with gr.Blocks(title="VoiceGate") as demo:
     gr.HTML(
         """
         <section class="voicegate-hero">
           <h1>VoiceGate</h1>
-          <p>Upload an audio clip, choose a target language, and generate translated dubbing while preserving the original ambience.</p>
+          <p>Cross-language dubbing for audio and video. VoiceGate combines ASR, LLM translation, multilingual TTS, subtitle timing alignment, and vocal/background separation to generate translated speech while preserving the original ambience.</p>
         </section>
         """
     )
     with gr.Tab("Translate"):
         gr.Markdown(
             """
+            VoiceGate is built with VoxCPM2 and ComfyUI. It supports multilingual dubbing for content localization, video translation, education, narration, and creator workflows. The pipeline extracts timed subtitles, translates them, generates target-language speech, aligns each speech segment back to the subtitle timeline, and mixes it with the original background audio.
+            """
+        )
+        gr.HTML(
+            """
+            <div class="voicegate-links">
+              <a href="https://www.runninghub.ai/ai-detail/2062442306350964737?inviteCode=rh-v1455" target="_blank">Online app - audio</a>
+              <a href="https://www.runninghub.ai/ai-detail/2062446982618238978?inviteCode=rh-v1455" target="_blank">Online app - video</a>
+              <a href="https://www.runninghub.ai/post/2062432233125928961?inviteCode=rh-v1455" target="_blank">ComfyUI workflow - audio</a>
+              <a href="https://www.runninghub.ai/post/2062445363042283522?inviteCode=rh-v1455" target="_blank">ComfyUI workflow - video</a>
+            </div>
+            """
+        )
+        gr.Markdown(
+            """
+            **How to use**
+
             1. Upload a short audio clip.
-            2. Pick the language you want the speech translated into.
-            3. Generate the dubbed audio and review the original and translated subtitles.
+            2. Choose the target language.
+            3. Generate the translated dubbing and review the original and translated subtitles.
+
+            The estimated processing time is roughly equal to the duration of the uploaded audio once the Space is warm. The first run after a rebuild can take longer while the environment and models are prepared.
             """
         )
         with gr.Row():
             with gr.Column(scale=5):
-                user_audio = gr.Audio(label="Upload audio", type="filepath")
-                user_target_language = gr.Dropdown(
-                    label="Target language",
-                    choices=TARGET_LANGUAGES,
-                    value="English",
-                )
-                with gr.Accordion("Advanced audio cleanup", open=False):
-                    user_tts_trim_start = gr.Slider(
-                        label="TTS segment trim start",
-                        minimum=0.0,
-                        maximum=1.0,
-                        value=0.0,
-                        step=0.05,
-                        info=(
-                            "Skips the first n seconds of each generated TTS segment. "
-                            "Increase this if the beginning of each generated speech segment has noise."
-                        ),
+                with gr.Group(elem_classes=["voicegate-section"]):
+                    gr.Markdown("### Input")
+                    user_audio = gr.Audio(label="Upload audio", type="filepath")
+                    user_target_language = gr.Dropdown(
+                        label="Target language",
+                        choices=TARGET_LANGUAGES,
+                        value="English",
                     )
-                user_run = gr.Button("Generate translated dubbing", variant="primary")
+                    with gr.Accordion("Advanced audio cleanup", open=False):
+                        user_tts_trim_start = gr.Slider(
+                            label="TTS segment trim start",
+                            minimum=0.0,
+                            maximum=1.0,
+                            value=0.0,
+                            step=0.05,
+                            info=(
+                                "Skips the first n seconds of each generated TTS segment. "
+                                "Use this to remove short noises that may appear at the beginning of generated speech segments."
+                            ),
+                        )
+                    user_run = gr.Button("Generate translated dubbing", variant="primary")
             with gr.Column(scale=6):
-                user_output_audio = gr.Audio(label="Translated dubbing audio", type="filepath")
-                with gr.Row():
-                    user_source_file = gr.File(label="Original subtitle file")
-                    user_translated_file = gr.File(label="Translated subtitle file")
-        with gr.Row():
-            user_source_text = gr.Textbox(label="Original subtitles", lines=8)
-            user_translated_text = gr.Textbox(label="Translated subtitles", lines=8)
-        user_status = gr.Textbox(label="Status", lines=14, elem_classes=["voicegate-status"])
+                with gr.Group(elem_classes=["voicegate-section"]):
+                    gr.Markdown("### Output")
+                    user_output_audio = gr.Audio(label="Translated dubbing audio", type="filepath")
+                    with gr.Row():
+                        user_source_file = gr.File(label="Original subtitle file")
+                        user_translated_file = gr.File(label="Translated subtitle file")
+                    with gr.Row():
+                        user_source_text = gr.Textbox(label="Original subtitles", lines=8)
+                        user_translated_text = gr.Textbox(label="Translated subtitles", lines=8)
+        with gr.Group(elem_classes=["voicegate-section"]):
+            gr.Markdown("### Log")
+            user_status = gr.Textbox(label="Status", lines=14, elem_classes=["voicegate-status"])
         user_run.click(
             fn=voicegate_user_run,
             inputs=[user_audio, user_target_language, user_tts_trim_start],
@@ -922,4 +961,4 @@ with gr.Blocks(title="VoiceGate", css=APP_CSS) as demo:
 
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(css=APP_CSS)