diff --git a/app.py b/app.py index 7dcadbe..a2bcd09 100644 --- a/app.py +++ b/app.py @@ -643,17 +643,19 @@ gradio-app, gap: 6px !important; } .gradio-container .tab-nav button { - flex: 1 1 28% !important; - min-width: 88px !important; - padding: 8px 8px !important; - font-size: 0.8rem !important; + flex: 1 1 25% !important; + min-width: 0 !important; + padding: 8px 6px !important; + font-size: 0.82rem !important; } .status-row, .status-row > div, .pipeline-steps, .pipeline-steps > div, .pipeline-output-row, - .pipeline-output-row > div { + .pipeline-output-row > div, + .pipeline-input-row, + .pipeline-input-row > div { flex-direction: column !important; width: 100% !important; } @@ -1023,6 +1025,51 @@ gradio-app, font-size: 0.95rem !important; padding: 10px 18px !important; } +/* 主导航 Tab 均匀分布 */ +.gradio-container .main-nav-tabs > .tab-nav, +.gradio-container .tabs.main-nav-tabs > .tab-nav { + display: flex !important; + width: 100% !important; + gap: 0 !important; +} +.gradio-container .main-nav-tabs > .tab-nav button, +.gradio-container .tabs.main-nav-tabs > .tab-nav button { + flex: 1 1 25% !important; + min-width: 0 !important; + text-align: center !important; + justify-content: center !important; + border-radius: 0 !important; +} +/* 一键生成:上传区与转写区等大 */ +.pipeline-input-row { + align-items: stretch !important; + gap: 12px !important; +} +.pipeline-input-row > .gr-column, +.pipeline-input-row > div { + flex: 1 1 50% !important; + min-width: 0 !important; + width: 50% !important; + display: flex !important; + flex-direction: column !important; +} +.pipeline-input-row .block, +.pipeline-input-row .form { + flex: 1 1 auto !important; + height: 100% !important; +} +.pipeline-input-row .audio-container, +.pipeline-input-row .upload-container { + flex: 1 1 auto !important; + min-height: 220px !important; + display: flex !important; + flex-direction: column !important; + justify-content: center !important; +} +.pipeline-input-row textarea { + min-height: 220px !important; + height: 100% !important; +} .gradio-container .tab-nav button.selected { color: #ffffff !important; background: #1e3a5f !important; @@ -1305,34 +1352,38 @@ def build_app() -> gr.Blocks: with gr.Blocks( title="Trading Studio | 交易复盘配音中控", ) as demo: - with gr.Tabs(): + with gr.Tabs(elem_classes=["main-nav-tabs"]): # ---- Tab 1: 一键生成(默认首页)---- with gr.Tab("一键生成"): gr.HTML(MIC_HINT_HTML) gr.Markdown( "上传碎碎念录音,系统自动完成 **识别 → 润色 → 合成** 全流程。" ) - with gr.Row(): + with gr.Row(equal_height=True, elem_classes=["pipeline-input-row"]): pipe_audio = gr.Audio( label="复盘录音", type="filepath", sources=["upload", "microphone"], + scale=1, ) pipe_manual = gr.Textbox( label="或手动输入转写(跳过识别)", - lines=4, + lines=8, placeholder="若已有转写文本,可直接粘贴,留空则走 Whisper 识别", + scale=1, + elem_classes=["bright-input"], ) skip_polish_cb = gr.Checkbox( label="跳过 Gemma4 润色(仅测试 TTS)", value=False, ) - pipe_voice = gr.Radio( - label="配音音色(本地 ChatTTS)", - choices=voice_choice_labels(), - value=default_voice_label(), - elem_classes=["voice-radio"], - ) + with gr.Accordion("🎚️ 配音音色", open=False): + pipe_voice = gr.Radio( + label="配音音色(本地 ChatTTS)", + choices=voice_choice_labels(), + value=default_voice_label(), + elem_classes=["voice-radio"], + ) pipeline_btn = gr.Button("▶ 启动全流程", variant="primary", size="lg") pipeline_log = gr.Textbox(label="流水线日志", lines=6, interactive=False) with gr.Row(elem_classes=["pipeline-output-row"]): @@ -1370,7 +1421,7 @@ def build_app() -> gr.Blocks: "" "本机显卡合成,无需 API。润色完成后在此选音色并点合成。" ) - with gr.Accordion("🎚️ 选择配音音色", open=True): + with gr.Accordion("🎚️ 配音音色", open=False): tts_voice = gr.Radio( label="配音音色(本地 ChatTTS)", choices=voice_choice_labels(),