dekun/Trading_Studio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Widen layout to 1800px and polish one-click page design

Browse Source 
Set container max-width to 1800px, redesign one-click tab with hero bar, card inputs, toolbar row, and three-column output grid.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
dekun
2026-06-12 19:31:18 +08:00
parent d63cb318b2
commit 56f14206dd
1 changed files with 166 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app.py
+166 -98
View File
@@ -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(
'<div class="oneclick-hero">'
"上传录音或粘贴转写"
'<span class="oneclick-hero-sep">→</span>'
"自动 <em>识别 · 润色 · 合成</em>"
"</div>"
)
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("分步流水线"):