Update app.py

app.py

@@ -81,44 +81,168 @@ TARGET_LANGUAGES = [
     "Vietnamese",
 ]
 APP_CSS = """
-.voicegate-hero {
-    border: 1px solid #e5e7eb;
+:root {
+    --vg-primary: #6366c7;
+    --vg-primary-dark: #5255b5;
+    --vg-ink: #171827;
+    --vg-muted: #667085;
+    --vg-line: #eceef5;
+    --vg-soft: #f6f7fb;
+}
+:root:root:root:root main {
+    max-width: 1160px;
+}
+:root:root:root:root .gradio-container {
+    overflow: unset;
+}
+.voicegate-shell {
+    gap: 16px;
+}
+.voicegate-card {
+    background: #ffffff;
+    border: 1px solid var(--vg-line);
     border-radius: 8px;
-    padding: 22px 24px;
-    background: #f8fafc;
+    padding: 12px;
+}
+.voicegate-intro {
+    margin: 10px 0 12px;
+    padding: 18px;
+    border-color: rgba(99, 102, 199, 0.24);
+    background: linear-gradient(180deg, #ffffff 0%, #f8f8ff 100%);
 }
-.voicegate-hero h1 {
-    margin: 0 0 8px;
+.voicegate-kicker {
+    color: var(--vg-primary);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0;
+    text-transform: uppercase;
+}
+.voicegate-intro h1 {
+    margin: 6px 0 8px;
+    color: var(--vg-ink);
     font-size: 30px;
-    line-height: 1.15;
+    line-height: 1.12;
+    letter-spacing: 0;
 }
-.voicegate-hero p {
+.voicegate-intro p {
+    max-width: 760px;
     margin: 0;
-    color: #475569;
-    font-size: 15px;
+    color: var(--vg-muted);
+    font-size: 14px;
+    line-height: 1.6;
 }
-.voicegate-links a {
-    display: inline-block;
-    margin: 4px 10px 4px 0;
+.voicegate-link-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+    margin-top: 14px;
 }
-.voicegate-section {
-    border: 1px solid #e5e7eb;
-    border-radius: 8px;
-    padding: 14px;
+.voicegate-link-row a {
+    display: inline-flex;
+    min-height: 34px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid rgba(99, 102, 199, 0.34);
+    border-radius: 6px;
+    padding: 6px 12px;
+    color: var(--vg-primary) !important;
+    background: #ffffff;
+    font-size: 13px;
+    font-weight: 650;
+    text-decoration: none;
+}
+.voicegate-link-row a:hover {
+    border-color: var(--vg-primary);
+    background: #f4f4ff;
+}
+.voicegate-card-label {
+    display: inline-flex;
+    align-items: center;
+    margin: 0 0 10px;
+    border-radius: 6px;
+    padding: 5px 8px;
+    background: #ececf1;
+    color: var(--vg-ink);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0;
+    text-transform: uppercase;
+}
+.voicegate-card-label .voicegate-tag {
+    margin-left: 8px;
+    border-radius: 999px;
+    padding: 2px 7px;
+    color: var(--vg-primary);
     background: #ffffff;
+    font-size: 12px;
+    font-weight: 700;
+    text-transform: none;
+}
+.voicegate-card .block,
+.voicegate-card .form,
+.voicegate-card textarea,
+.voicegate-card input {
+    border-color: var(--vg-line) !important;
+    border-width: 1px !important;
+    box-shadow: none !important;
 }
-.voicegate-section h3 {
-    margin: 0 0 8px;
-    font-size: 16px;
+.voicegate-card .block {
+    border: 1px solid var(--vg-line) !important;
 }
-.voicegate-note {
-    color: #475569;
+.voicegate-card .block:hover,
+.voicegate-card .block:focus-within {
+    border-color: rgba(99, 102, 199, 0.34) !important;
+}
+.voicegate-card textarea {
     font-size: 13px;
 }
+.voicegate-run-card button.primary,
+.voicegate-run-card .primary {
+    width: 100%;
+    background: var(--vg-primary) !important;
+    border-color: var(--vg-primary) !important;
+    color: #ffffff !important;
+}
+.voicegate-run-card button.primary:hover,
+.voicegate-run-card .primary:hover {
+    background: var(--vg-primary-dark) !important;
+    border-color: var(--vg-primary-dark) !important;
+}
+.voicegate-downloads {
+    gap: 10px;
+}
+.voicegate-downloads button,
+.voicegate-downloads a {
+    width: 100%;
+}
 .voicegate-status textarea {
     font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
     font-size: 12px;
 }
+:root:root:root:root input[type="range"] {
+    accent-color: var(--vg-primary);
+}
+:root:root:root:root input[type="range"]::-moz-range-thumb,
+:root:root:root:root input[type="range"]::-webkit-slider-thumb {
+    background: var(--vg-primary);
+    box-shadow: none;
+}
+:root:root:root:root .tab-container button.selected,
+:root:root:root:root button[role="tab"][aria-selected="true"] {
+    color: var(--vg-primary);
+    border-color: var(--vg-primary);
+}
+:root:root:root:root footer {
+    display: none;
+}
+@media (max-width: 760px) {
+    .voicegate-intro h1 {
+        font-size: 26px;
+    }
+    .voicegate-link-row a {
+        flex: 1 1 46%;
+    }
+}
 """
 
 
@@ -134,6 +258,49 @@ def gpu_status_lines() -> list[str]:
     return lines
 
 
+def voicegate_theme() -> gr.Theme:
+    primary = gr.themes.Color(
+        name="voicegate",
+        c50="#f5f5ff",
+        c100="#ececff",
+        c200="#dadaff",
+        c300="#b8b9fb",
+        c400="#9193ee",
+        c500="#6366c7",
+        c600="#5255b5",
+        c700="#444695",
+        c800="#393b78",
+        c900="#313262",
+        c950="#1f2040",
+    )
+    return gr.themes.Base(
+        primary_hue=primary,
+        secondary_hue=gr.themes.colors.neutral,
+        radius_size=gr.themes.sizes.radius_sm,
+        font=[gr.themes.GoogleFont("Open Sans"), "ui-sans-serif", "system-ui", "sans-serif"],
+    ).set(
+        background_fill_primary="*neutral_100",
+        background_fill_secondary="*neutral_50",
+        block_background_fill="white",
+        block_border_width="0",
+        block_label_background_fill="*neutral_100",
+        block_label_border_width="none",
+        block_label_margin="0.5rem",
+        block_label_radius="*radius_sm",
+        block_label_text_color="*neutral_700",
+        block_label_text_size="*text_sm",
+        block_label_text_weight="600",
+        block_padding="0.5rem",
+        border_color_primary="transparent",
+        button_primary_background_fill="*primary_500",
+        button_primary_background_fill_hover="*primary_600",
+        button_primary_text_color="white",
+        input_background_fill="*neutral_50",
+        shadow_drop="none",
+        slider_color="*primary_500",
+    )
+
+
 def wait_for_comfy(timeout: float = 180) -> dict[str, Any]:
     deadline = time.time() + timeout
     last_error = ""
@@ -837,46 +1004,31 @@ 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") as demo:
-    gr.HTML(
-        """
-        <section class="voicegate-hero">
-          <h1>VoiceGate</h1>
-          <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.Blocks(title="VoiceGate", fill_width=True) as demo:
     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. 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.
+            <section class="voicegate-card voicegate-intro">
+              <div class="voicegate-kicker">ComfyUI workflow · multilingual dubbing</div>
+              <h1>VoiceGate</h1>
+              <p>
+                VoiceGate turns speech clips into translated dubbing with timed subtitles and preserved ambience.
+                The warm-run time is usually close to the uploaded audio duration. First runs after rebuilds can
+                take longer while models are prepared.
+              </p>
+              <div class="voicegate-link-row">
+                <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>
+            </section>
             """
         )
-        with gr.Row():
-            with gr.Column(scale=5):
-                with gr.Group(elem_classes=["voicegate-section"]):
-                    gr.Markdown("### Input")
+        with gr.Row(elem_classes=["voicegate-shell"]):
+            with gr.Column(scale=4, min_width=300):
+                with gr.Group(elem_classes=["voicegate-card"]):
+                    gr.HTML('<div class="voicegate-card-label">Input <span class="voicegate-tag">required</span></div>')
                     user_audio = gr.Audio(label="Upload audio", type="filepath")
                     user_target_language = gr.Dropdown(
                         label="Target language",
@@ -895,20 +1047,22 @@ with gr.Blocks(title="VoiceGate") as demo:
                                 "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):
-                with gr.Group(elem_classes=["voicegate-section"]):
-                    gr.Markdown("### Output")
+                    with gr.Group(elem_classes=["voicegate-run-card"]):
+                        user_run = gr.Button("Generate translated dubbing", variant="primary")
+            with gr.Column(scale=8, min_width=420):
+                with gr.Group(elem_classes=["voicegate-card"]):
+                    gr.HTML('<div class="voicegate-card-label">Output <span class="voicegate-tag">audio + subtitles</span></div>')
                     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"])
+                    with gr.Row(elem_classes=["voicegate-downloads"]):
+                        user_source_file = gr.DownloadButton("Download original subtitles", size="sm")
+                        user_translated_file = gr.DownloadButton("Download translated subtitles", size="sm")
+                    with gr.Accordion("Subtitle preview", open=False):
+                        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-card"]):
+            with gr.Accordion("Log", open=False):
+                user_status = gr.Textbox(label="Status", lines=12, elem_classes=["voicegate-status"])
         user_run.click(
             fn=voicegate_user_run,
             inputs=[user_audio, user_target_language, user_tts_trim_start],
@@ -961,4 +1115,4 @@ with gr.Blocks(title="VoiceGate") as demo:
 
 
 if __name__ == "__main__":
-    demo.launch(css=APP_CSS)
+    demo.launch(theme=voicegate_theme(), css=APP_CSS)