diff --git a/app.py b/app.py index 3e054ba..88906a3 100644 --- a/app.py +++ b/app.py @@ -597,31 +597,20 @@ gradio-app, box-sizing: border-box !important; } -/* 核心内容容器居中 */ +/* 核心内容容器居中 — 最大宽度 1800px */ .gradio-container { background: #0f1419 !important; color: #eef2f7 !important; font-size: 15px !important; width: 100% !important; - max-width: min(1200px, 94vw) !important; + max-width: min(1800px, 96vw) !important; margin-left: auto !important; margin-right: auto !important; - padding: 16px clamp(12px, 3vw, 32px) !important; + padding: 16px clamp(12px, 2vw, 28px) !important; box-sizing: border-box !important; float: none !important; } -/* 带鱼屏 / 超宽屏 */ -@media (min-width: 1920px) { - .gradio-container { max-width: min(1280px, 82vw) !important; } -} -@media (min-width: 2560px) { - .gradio-container { max-width: min(1360px, 68vw) !important; } -} -@media (min-width: 3440px) { - .gradio-container { max-width: 1440px !important; } -} - /* 平板 */ @media (max-width: 1024px) { .gradio-container { @@ -656,8 +645,9 @@ gradio-app, .pipeline-output-row > div, .oneclick-input-grid, .oneclick-input-grid > div, - .oneclick-result-grid, - .oneclick-result-grid > div { + .oneclick-bottom-grid, + .oneclick-bottom-grid > div, + .oneclick-toolbar { flex-direction: column !important; width: 100% !important; } @@ -1045,72 +1035,144 @@ gradio-app, border-bottom: 3px solid #3b82f6 !important; } -/* 一键生成：单页工作区 */ +/* 一键生成：1800 宽单页工作区 */ .oneclick-panel { - border: 1px solid #374151 !important; - border-radius: 12px !important; - padding: 16px 18px 18px !important; - background: #111827 !important; + border: 1px solid #2d3748 !important; + border-radius: 14px !important; + padding: 0 !important; + background: #0f1419 !important; width: 100% !important; box-sizing: border-box !important; + overflow: hidden !important; } -.oneclick-hint { - color: #94a3b8 !important; - font-size: 0.88rem !important; - margin: 0 0 12px 0 !important; +.oneclick-panel > .block, +.oneclick-panel > .form { + background: transparent !important; + border: none !important; + box-shadow: none !important; padding: 0 !important; + margin: 0 !important; +} +.oneclick-hero { + padding: 14px 20px !important; + background: linear-gradient(90deg, #1e3a5f 0%, #1a2332 100%) !important; + border-bottom: 1px solid #374151 !important; + color: #e2e8f0 !important; + font-size: 0.95rem !important; + letter-spacing: 0.02em !important; +} +.oneclick-hero em { + color: #93c5fd !important; + font-style: normal !important; + font-weight: 600 !important; +} +.oneclick-hero-sep { color: #64748b !important; margin: 0 6px !important; } +.oneclick-body { + padding: 16px 20px 20px !important; } -.oneclick-hint p { margin: 0 !important; color: #94a3b8 !important; } .oneclick-input-grid { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: stretch !important; - gap: 12px !important; + gap: 16px !important; width: 100% !important; - margin-bottom: 10px !important; + margin-bottom: 14px !important; } .oneclick-input-grid > .column, .oneclick-input-grid > .gr-column { flex: 1 1 0 !important; min-width: 0 !important; } +.oneclick-card { + background: #1a2332 !important; + border: 1px solid #374151 !important; + border-radius: 10px !important; + padding: 10px 12px 12px !important; + height: 100% !important; + box-sizing: border-box !important; +} +.oneclick-card .block-label, +.oneclick-card .label-wrap span { + color: #cbd5e1 !important; + font-size: 0.88rem !important; +} .oneclick-input-grid .audio-container, .oneclick-input-grid .upload-container { - min-height: 200px !important; + min-height: 220px !important; + border: 1px dashed #4b5563 !important; + border-radius: 8px !important; + background: #111827 !important; } .oneclick-input-grid textarea { - min-height: 200px !important; + min-height: 220px !important; + border-radius: 8px !important; } -.oneclick-options-row { +.oneclick-toolbar { + display: flex !important; + flex-wrap: wrap !important; align-items: center !important; - gap: 12px !important; - margin: 4px 0 10px !important; + gap: 12px 16px !important; + padding: 12px 14px !important; + margin-bottom: 14px !important; + background: #111827 !important; + border: 1px solid #374151 !important; + border-radius: 10px !important; } -.oneclick-options-row .accordion, -.oneclick-options-row .gr-accordion { +.oneclick-toolbar .block { margin: 0 !important; padding: 0 !important; } +.oneclick-toolbar .accordion, +.oneclick-toolbar .gr-accordion { + flex: 1 1 280px !important; margin: 0 !important; - width: 100% !important; + border: 1px solid #4b5563 !important; + border-radius: 8px !important; } -.oneclick-result-grid { +.oneclick-toolbar .accordion > .label-wrap, +.oneclick-toolbar .gr-accordion .label-wrap { + background: #1a2332 !important; + padding: 8px 12px !important; + min-height: unset !important; +} +.oneclick-run-btn { + flex: 0 0 auto !important; + min-width: 180px !important; +} +.oneclick-run-btn button { + width: 100% !important; + padding: 12px 20px !important; + font-size: 1rem !important; + border-radius: 8px !important; +} +.oneclick-bottom-grid { display: flex !important; flex-direction: row !important; - gap: 12px !important; + gap: 16px !important; width: 100% !important; + margin-bottom: 14px !important; } -.oneclick-result-grid > .column, -.oneclick-result-grid > .gr-column { +.oneclick-bottom-grid > .column, +.oneclick-bottom-grid > .gr-column { flex: 1 1 0 !important; min-width: 0 !important; } -.oneclick-result-grid textarea { - min-height: 140px !important; +.oneclick-bottom-grid textarea { + min-height: 160px !important; + border-radius: 8px !important; } -@media (max-width: 768px) { +.oneclick-panel .tts-player-block { + margin-top: 4px !important; +} +.oneclick-panel .accordion { + border-radius: 10px !important; + margin-top: 8px !important; +} +@media (max-width: 900px) { .oneclick-input-grid, - .oneclick-result-grid { + .oneclick-bottom-grid, + .oneclick-toolbar { flex-direction: column !important; } + .oneclick-run-btn { width: 100% !important; } } .gradio-container button.primary, @@ -1393,63 +1455,69 @@ def build_app() -> gr.Blocks: # ---- Tab 1: 一键生成（默认首页）---- with gr.Tab("一键生成"): with gr.Group(elem_classes=["oneclick-panel"]): - gr.Markdown( - "上传录音或粘贴转写 → 自动 **识别 · 润色 · 合成**", - elem_classes=["oneclick-hint"], + gr.HTML( + '
' + "上传录音或粘贴转写" + '→' + "自动 识别 · 润色 · 合成" + "
" ) - with gr.Row(elem_classes=["oneclick-input-grid"]): - with gr.Column(scale=1, min_width=200): - pipe_audio = gr.Audio( - label="复盘录音", - type="filepath", - sources=["upload", "microphone"], - ) - with gr.Column(scale=1, min_width=200): - pipe_manual = gr.Textbox( - label="或手动输入转写（跳过识别）", - lines=6, - placeholder="已有转写可直接粘贴，留空则 Whisper 识别", - elem_classes=["bright-input"], - ) - with gr.Row(elem_classes=["oneclick-options-row"]): - skip_polish_cb = gr.Checkbox( - label="跳过 Gemma4 润色（仅测试 TTS）", - value=False, - scale=0, - ) - with gr.Column(scale=1): - with gr.Accordion("🎚️ 配音音色", open=False): - pipe_voice = gr.Radio( - label="配音音色（本地 ChatTTS）", - choices=voice_choice_labels(), - value=default_voice_label(), - elem_classes=["voice-radio"], + with gr.Column(elem_classes=["oneclick-body"]): + with gr.Row(elem_classes=["oneclick-input-grid"]): + with gr.Column(scale=1, elem_classes=["oneclick-card"]): + pipe_audio = gr.Audio( + label="复盘录音", + type="filepath", + sources=["upload", "microphone"], ) - pipeline_btn = gr.Button( - "▶ 启动全流程", variant="primary", size="lg" - ) - pipeline_log = gr.Textbox( - label="流水线日志", lines=3, interactive=False - ) - with gr.Row(elem_classes=["oneclick-result-grid"]): - with gr.Column(scale=1): - pipe_raw = gr.Textbox(label="转写原文", lines=5) - with gr.Column(scale=1): - pipe_polished = gr.Textbox(label="润色稿", lines=5) - pipe_player = _voice_player_block() - with gr.Accordion("📂 配音历史", open=False): - with gr.Row(): - history_select = gr.Dropdown( - label="历史配音", - choices=list_voice_history(), - value=None, - interactive=True, - scale=4, + with gr.Column(scale=1, elem_classes=["oneclick-card"]): + pipe_manual = gr.Textbox( + label="或手动输入转写（跳过识别）", + lines=8, + placeholder="已有转写可直接粘贴，留空则 Whisper 识别", + elem_classes=["bright-input"], + ) + with gr.Row(elem_classes=["oneclick-toolbar"]): + skip_polish_cb = gr.Checkbox( + label="跳过 Gemma4 润色", + value=False, + scale=0, ) - history_refresh_btn = gr.Button( - "🔄 刷新", scale=0, min_width=100 - ) - history_player = _voice_player_block() + with gr.Column(scale=1): + with gr.Accordion("🎚️ 配音音色", open=False): + pipe_voice = gr.Radio( + label="", + choices=voice_choice_labels(), + value=default_voice_label(), + elem_classes=["voice-radio"], + ) + with gr.Column(scale=0, min_width=180, elem_classes=["oneclick-run-btn"]): + pipeline_btn = gr.Button( + "▶ 启动全流程", variant="primary" + ) + with gr.Row(elem_classes=["oneclick-bottom-grid"]): + with gr.Column(scale=1): + pipeline_log = gr.Textbox( + label="流水线日志", lines=6, interactive=False + ) + with gr.Column(scale=1): + pipe_raw = gr.Textbox(label="转写原文", lines=6) + with gr.Column(scale=1): + pipe_polished = gr.Textbox(label="润色稿", lines=6) + pipe_player = _voice_player_block() + with gr.Accordion("📂 配音历史", open=False): + with gr.Row(): + history_select = gr.Dropdown( + label="历史配音", + choices=list_voice_history(), + value=None, + interactive=True, + scale=4, + ) + history_refresh_btn = gr.Button( + "🔄 刷新", scale=0, min_width=100 + ) + history_player = _voice_player_block() # ---- Tab 2: 分步流水线 ---- with gr.Tab("分步流水线"):