Widen layout to 1800px and polish one-click page design
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
@@ -597,31 +597,20 @@ gradio-app,
|
|||||||
box-sizing: border-box !important;
|
box-sizing: border-box !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 核心内容容器居中 */
|
/* 核心内容容器居中 — 最大宽度 1800px */
|
||||||
.gradio-container {
|
.gradio-container {
|
||||||
background: #0f1419 !important;
|
background: #0f1419 !important;
|
||||||
color: #eef2f7 !important;
|
color: #eef2f7 !important;
|
||||||
font-size: 15px !important;
|
font-size: 15px !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
max-width: min(1200px, 94vw) !important;
|
max-width: min(1800px, 96vw) !important;
|
||||||
margin-left: auto !important;
|
margin-left: auto !important;
|
||||||
margin-right: 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;
|
box-sizing: border-box !important;
|
||||||
float: none !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) {
|
@media (max-width: 1024px) {
|
||||||
.gradio-container {
|
.gradio-container {
|
||||||
@@ -656,8 +645,9 @@ gradio-app,
|
|||||||
.pipeline-output-row > div,
|
.pipeline-output-row > div,
|
||||||
.oneclick-input-grid,
|
.oneclick-input-grid,
|
||||||
.oneclick-input-grid > div,
|
.oneclick-input-grid > div,
|
||||||
.oneclick-result-grid,
|
.oneclick-bottom-grid,
|
||||||
.oneclick-result-grid > div {
|
.oneclick-bottom-grid > div,
|
||||||
|
.oneclick-toolbar {
|
||||||
flex-direction: column !important;
|
flex-direction: column !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
@@ -1045,72 +1035,144 @@ gradio-app,
|
|||||||
border-bottom: 3px solid #3b82f6 !important;
|
border-bottom: 3px solid #3b82f6 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 一键生成：单页工作区 */
|
/* 一键生成：1800 宽单页工作区 */
|
||||||
.oneclick-panel {
|
.oneclick-panel {
|
||||||
border: 1px solid #374151 !important;
|
border: 1px solid #2d3748 !important;
|
||||||
border-radius: 12px !important;
|
border-radius: 14px !important;
|
||||||
padding: 16px 18px 18px !important;
|
padding: 0 !important;
|
||||||
background: #111827 !important;
|
background: #0f1419 !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
box-sizing: border-box !important;
|
box-sizing: border-box !important;
|
||||||
|
overflow: hidden !important;
|
||||||
}
|
}
|
||||||
.oneclick-hint {
|
.oneclick-panel > .block,
|
||||||
color: #94a3b8 !important;
|
.oneclick-panel > .form {
|
||||||
font-size: 0.88rem !important;
|
background: transparent !important;
|
||||||
margin: 0 0 12px 0 !important;
|
border: none !important;
|
||||||
|
box-shadow: none !important;
|
||||||
padding: 0 !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 {
|
.oneclick-input-grid {
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-direction: row !important;
|
flex-direction: row !important;
|
||||||
flex-wrap: nowrap !important;
|
flex-wrap: nowrap !important;
|
||||||
align-items: stretch !important;
|
align-items: stretch !important;
|
||||||
gap: 12px !important;
|
gap: 16px !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
margin-bottom: 10px !important;
|
margin-bottom: 14px !important;
|
||||||
}
|
}
|
||||||
.oneclick-input-grid > .column,
|
.oneclick-input-grid > .column,
|
||||||
.oneclick-input-grid > .gr-column {
|
.oneclick-input-grid > .gr-column {
|
||||||
flex: 1 1 0 !important;
|
flex: 1 1 0 !important;
|
||||||
min-width: 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 .audio-container,
|
||||||
.oneclick-input-grid .upload-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 {
|
.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;
|
align-items: center !important;
|
||||||
gap: 12px !important;
|
gap: 12px 16px !important;
|
||||||
margin: 4px 0 10px !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-toolbar .block { margin: 0 !important; padding: 0 !important; }
|
||||||
.oneclick-options-row .gr-accordion {
|
.oneclick-toolbar .accordion,
|
||||||
|
.oneclick-toolbar .gr-accordion {
|
||||||
|
flex: 1 1 280px !important;
|
||||||
margin: 0 !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;
|
display: flex !important;
|
||||||
flex-direction: row !important;
|
flex-direction: row !important;
|
||||||
gap: 12px !important;
|
gap: 16px !important;
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
|
margin-bottom: 14px !important;
|
||||||
}
|
}
|
||||||
.oneclick-result-grid > .column,
|
.oneclick-bottom-grid > .column,
|
||||||
.oneclick-result-grid > .gr-column {
|
.oneclick-bottom-grid > .gr-column {
|
||||||
flex: 1 1 0 !important;
|
flex: 1 1 0 !important;
|
||||||
min-width: 0 !important;
|
min-width: 0 !important;
|
||||||
}
|
}
|
||||||
.oneclick-result-grid textarea {
|
.oneclick-bottom-grid textarea {
|
||||||
min-height: 140px !important;
|
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-input-grid,
|
||||||
.oneclick-result-grid {
|
.oneclick-bottom-grid,
|
||||||
|
.oneclick-toolbar {
|
||||||
flex-direction: column !important;
|
flex-direction: column !important;
|
||||||
}
|
}
|
||||||
|
.oneclick-run-btn { width: 100% !important; }
|
||||||
}
|
}
|
||||||
|
|
||||||
.gradio-container button.primary,
|
.gradio-container button.primary,
|
||||||
@@ -1393,49 +1455,55 @@ def build_app() -> gr.Blocks:
|
|||||||
# ---- Tab 1: 一键生成（默认首页）----
|
# ---- Tab 1: 一键生成（默认首页）----
|
||||||
with gr.Tab("一键生成"):
|
with gr.Tab("一键生成"):
|
||||||
with gr.Group(elem_classes=["oneclick-panel"]):
|
with gr.Group(elem_classes=["oneclick-panel"]):
|
||||||
gr.Markdown(
|
gr.HTML(
|
||||||
"上传录音或粘贴转写 → 自动 **识别 · 润色 · 合成**",
|
'<div class="oneclick-hero">'
|
||||||
elem_classes=["oneclick-hint"],
|
"上传录音或粘贴转写"
|
||||||
|
'<span class="oneclick-hero-sep">→</span>'
|
||||||
|
"自动 <em>识别 · 润色 · 合成</em>"
|
||||||
|
"</div>"
|
||||||
)
|
)
|
||||||
|
with gr.Column(elem_classes=["oneclick-body"]):
|
||||||
with gr.Row(elem_classes=["oneclick-input-grid"]):
|
with gr.Row(elem_classes=["oneclick-input-grid"]):
|
||||||
with gr.Column(scale=1, min_width=200):
|
with gr.Column(scale=1, elem_classes=["oneclick-card"]):
|
||||||
pipe_audio = gr.Audio(
|
pipe_audio = gr.Audio(
|
||||||
label="复盘录音",
|
label="复盘录音",
|
||||||
type="filepath",
|
type="filepath",
|
||||||
sources=["upload", "microphone"],
|
sources=["upload", "microphone"],
|
||||||
)
|
)
|
||||||
with gr.Column(scale=1, min_width=200):
|
with gr.Column(scale=1, elem_classes=["oneclick-card"]):
|
||||||
pipe_manual = gr.Textbox(
|
pipe_manual = gr.Textbox(
|
||||||
label="或手动输入转写（跳过识别）",
|
label="或手动输入转写（跳过识别）",
|
||||||
lines=6,
|
lines=8,
|
||||||
placeholder="已有转写可直接粘贴，留空则 Whisper 识别",
|
placeholder="已有转写可直接粘贴，留空则 Whisper 识别",
|
||||||
elem_classes=["bright-input"],
|
elem_classes=["bright-input"],
|
||||||
)
|
)
|
||||||
with gr.Row(elem_classes=["oneclick-options-row"]):
|
with gr.Row(elem_classes=["oneclick-toolbar"]):
|
||||||
skip_polish_cb = gr.Checkbox(
|
skip_polish_cb = gr.Checkbox(
|
||||||
label="跳过 Gemma4 润色（仅测试 TTS）",
|
label="跳过 Gemma4 润色",
|
||||||
value=False,
|
value=False,
|
||||||
scale=0,
|
scale=0,
|
||||||
)
|
)
|
||||||
with gr.Column(scale=1):
|
with gr.Column(scale=1):
|
||||||
with gr.Accordion("🎚️ 配音音色", open=False):
|
with gr.Accordion("🎚️ 配音音色", open=False):
|
||||||
pipe_voice = gr.Radio(
|
pipe_voice = gr.Radio(
|
||||||
label="配音音色（本地 ChatTTS）",
|
label="",
|
||||||
choices=voice_choice_labels(),
|
choices=voice_choice_labels(),
|
||||||
value=default_voice_label(),
|
value=default_voice_label(),
|
||||||
elem_classes=["voice-radio"],
|
elem_classes=["voice-radio"],
|
||||||
)
|
)
|
||||||
|
with gr.Column(scale=0, min_width=180, elem_classes=["oneclick-run-btn"]):
|
||||||
pipeline_btn = gr.Button(
|
pipeline_btn = gr.Button(
|
||||||
"▶ 启动全流程", variant="primary", size="lg"
|
"▶ 启动全流程", variant="primary"
|
||||||
)
|
)
|
||||||
|
with gr.Row(elem_classes=["oneclick-bottom-grid"]):
|
||||||
|
with gr.Column(scale=1):
|
||||||
pipeline_log = gr.Textbox(
|
pipeline_log = gr.Textbox(
|
||||||
label="流水线日志", lines=3, interactive=False
|
label="流水线日志", lines=6, interactive=False
|
||||||
)
|
)
|
||||||
with gr.Row(elem_classes=["oneclick-result-grid"]):
|
|
||||||
with gr.Column(scale=1):
|
with gr.Column(scale=1):
|
||||||
pipe_raw = gr.Textbox(label="转写原文", lines=5)
|
pipe_raw = gr.Textbox(label="转写原文", lines=6)
|
||||||
with gr.Column(scale=1):
|
with gr.Column(scale=1):
|
||||||
pipe_polished = gr.Textbox(label="润色稿", lines=5)
|
pipe_polished = gr.Textbox(label="润色稿", lines=6)
|
||||||
pipe_player = _voice_player_block()
|
pipe_player = _voice_player_block()
|
||||||
with gr.Accordion("📂 配音历史", open=False):
|
with gr.Accordion("📂 配音历史", open=False):
|
||||||
with gr.Row():
|
with gr.Row():
|
||||||
|
|||||||
Reference in New Issue
Block a user