redesign: 深色古朴风 UI，左右分栏，serif 字体，精神动力学气质

main.py

@@ -250,34 +250,331 @@ def download_all_sessions():
     return [str(f) for f in files]
 
 
-with gr.Blocks(title="Freud-Zero MVP") as app:
-    gr.Markdown("# Freud-Zero MVP")
-    gr.Markdown("精神动力学取向回应性咨询师 · 自我揭露深度追踪")
-
-    with gr.Row():
-        btn_start = gr.Button("开始新会话", variant="primary")
-        btn_end = gr.Button("结束会话", variant="stop")
-
-    chatbot = gr.Chatbot(label="对话", height=480, type="messages")
-
-    with gr.Row():
-        user_input = gr.Textbox(placeholder="说你想说的……", show_label=False, scale=4)
-        btn_send = gr.Button("发送", scale=1)
-
-    status_output = gr.Markdown(value="### 🧠 SESSION MONITOR\n\n> 等待开始会话…")
-
-    with gr.Accordion("研究者面板", open=False):
+CSS = """
+/* ── 全局 ── */
+body, .gradio-container {
+    background-color: #0e0c0a !important;
+    font-family: 'Georgia', 'Palatino Linotype', serif !important;
+    color: #d4cbbf !important;
+}
+footer { display: none !important; }
+.gradio-container { max-width: 100% !important; padding: 0 !important; }
+
+/* ── 标题区 ── */
+#app-header {
+    border-bottom: 1px solid #2a221a;
+    padding: 1.6rem 2rem 1.2rem;
+    display: flex;
+    align-items: baseline;
+    gap: 1.5rem;
+}
+#app-header h1 {
+    font-size: 1.2rem;
+    font-weight: normal;
+    letter-spacing: 0.4em;
+    color: #c9a84c;
+    text-transform: uppercase;
+    margin: 0;
+}
+#app-header p {
+    font-size: 0.72rem;
+    color: #5a5044;
+    letter-spacing: 0.12em;
+    margin: 0;
+    font-style: italic;
+}
+
+/* ── 主布局 ── */
+#main-row { gap: 0 !important; min-height: 640px; }
+#chat-col { border-right: 1px solid #1e1810; }
+#monitor-col { background: #09080700; }
+
+/* ── 控制栏 ── */
+#ctrl-row {
+    padding: 0.7rem 1.4rem;
+    border-bottom: 1px solid #1a150f;
+    gap: 0.5rem !important;
+    background: #09080700;
+}
+#btn-start, #btn-end {
+    background: transparent !important;
+    border: 1px solid #2a221a !important;
+    border-radius: 0 !important;
+    color: #5a5044 !important;
+    font-family: 'Georgia', serif !important;
+    font-size: 0.7rem !important;
+    letter-spacing: 0.15em;
+    padding: 0.35rem 1rem !important;
+    box-shadow: none !important;
+    transition: border-color 0.2s, color 0.2s;
+}
+#btn-start:hover { border-color: #c9a84c !important; color: #c9a84c !important; }
+#btn-end:hover   { border-color: #6b1a1a !important; color: #9b3a3a !important; }
+
+/* ── 聊天框 ── */
+#chatbox {
+    background: #0e0c0a !important;
+    border: none !important;
+    border-radius: 0 !important;
+}
+/* 消息容器 */
+#chatbox .bubble-wrap { padding: 1rem 1.4rem; }
+/* 用户 */
+#chatbox .user .message {
+    background: #171209 !important;
+    border: none !important;
+    border-left: 2px solid #6b1a1a !important;
+    border-radius: 0 !important;
+    color: #d8cfc0 !important;
+    font-size: 0.88rem;
+    line-height: 1.8;
+    padding: 0.6rem 1rem !important;
+    margin-left: 2rem !important;
+    box-shadow: none !important;
+}
+/* 助手 */
+#chatbox .bot .message {
+    background: #0b0906 !important;
+    border: none !important;
+    border-left: 2px solid #c9a84c !important;
+    border-radius: 0 !important;
+    color: #b8af9f !important;
+    font-size: 0.88rem;
+    line-height: 2;
+    padding: 0.6rem 1rem !important;
+    margin-right: 2rem !important;
+    font-style: italic;
+    box-shadow: none !important;
+}
+/* 隐藏头像 */
+#chatbox .avatar-container { display: none !important; }
+
+/* ── 输入行 ── */
+#input-row {
+    padding: 0.8rem 1.4rem;
+    border-top: 1px solid #1a150f;
+    gap: 0.6rem !important;
+    background: #0b0906;
+    align-items: flex-end !important;
+}
+#user-input { border: none !important; background: transparent !important; }
+#user-input label { display: none !important; }
+#user-input textarea {
+    background: transparent !important;
+    border: none !important;
+    border-bottom: 1px solid #2a221a !important;
+    border-radius: 0 !important;
+    color: #d4cbbf !important;
+    font-family: 'Georgia', serif !important;
+    font-size: 0.88rem;
+    padding: 0.4rem 0 !important;
+    box-shadow: none !important;
+    resize: none;
+}
+#user-input textarea:focus {
+    border-bottom-color: #c9a84c !important;
+    box-shadow: none !important;
+    outline: none !important;
+}
+#user-input textarea::placeholder { color: #3a3028 !important; }
+#btn-send {
+    background: transparent !important;
+    border: 1px solid #2a221a !important;
+    border-radius: 0 !important;
+    color: #5a5044 !important;
+    font-family: 'Georgia', serif !important;
+    font-size: 0.7rem !important;
+    letter-spacing: 0.15em;
+    padding: 0.35rem 1rem !important;
+    box-shadow: none !important;
+    min-width: 56px;
+    transition: border-color 0.2s, color 0.2s;
+}
+#btn-send:hover { border-color: #c9a84c !important; color: #c9a84c !important; }
+
+/* ── 右侧监控面板 ── */
+#monitor-panel {
+    padding: 1.2rem 1.1rem;
+    height: 100%;
+    overflow-y: auto;
+    border-left: 1px solid #1e1810;
+}
+#monitor-panel .prose { font-family: 'Georgia', serif !important; }
+#monitor-panel .prose h3 {
+    font-size: 0.6rem !important;
+    font-weight: normal;
+    letter-spacing: 0.4em;
+    color: #c9a84c !important;
+    text-transform: uppercase;
+    border-bottom: 1px solid #1e1810;
+    padding-bottom: 0.5rem;
+    margin-bottom: 1rem;
+}
+#monitor-panel .prose h4 {
+    font-size: 0.6rem !important;
+    font-weight: normal;
+    letter-spacing: 0.25em;
+    color: #6b1a1a !important;
+    text-transform: uppercase;
+    margin: 1.2rem 0 0.5rem;
+}
+#monitor-panel .prose table {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: 0.74rem;
+}
+#monitor-panel .prose td {
+    padding: 0.22rem 0.3rem;
+    border-bottom: 1px solid #161210;
+    vertical-align: top;
+    color: #7a7060;
+}
+#monitor-panel .prose td:first-child {
+    color: #4a4038;
+    white-space: nowrap;
+    padding-right: 0.6rem;
+    width: 40%;
+}
+#monitor-panel .prose td strong { color: #9a9080 !important; }
+#monitor-panel .prose blockquote {
+    border-left: 2px solid #2a221a;
+    margin: 0.6rem 0;
+    padding: 0.4rem 0.7rem;
+    color: #7a7060 !important;
+    font-style: italic;
+    font-size: 0.76rem;
+}
+#monitor-panel .prose code {
+    background: #151210 !important;
+    color: #b09040 !important;
+    font-family: 'Courier New', monospace !important;
+    font-size: 0.7rem;
+    padding: 0.05rem 0.3rem;
+    border-radius: 0;
+}
+#monitor-panel .prose hr {
+    border: none;
+    border-top: 1px solid #1a1510;
+    margin: 0.9rem 0;
+}
+#monitor-panel .prose strong { color: #9a9080 !important; }
+#monitor-panel .prose details summary {
+    color: #4a4038;
+    cursor: pointer;
+    font-size: 0.68rem;
+    letter-spacing: 0.08em;
+}
+#monitor-panel .prose em { color: #5a5044; }
+
+/* ── 研究者折叠面板 ── */
+#researcher-accordion {
+    background: transparent !important;
+    border: none !important;
+    border-top: 1px solid #1a150f !important;
+    border-radius: 0 !important;
+    margin-top: 0 !important;
+}
+#researcher-accordion > .label-wrap {
+    padding: 0.6rem 1.4rem !important;
+    background: transparent !important;
+}
+#researcher-accordion > .label-wrap span {
+    font-family: 'Georgia', serif !important;
+    font-size: 0.65rem !important;
+    letter-spacing: 0.3em;
+    color: #3a3028 !important;
+    text-transform: uppercase;
+}
+#researcher-accordion .icon { color: #3a3028 !important; }
+#log-display label { display: none !important; }
+#log-display textarea {
+    background: #080706 !important;
+    border: 1px solid #1a150f !important;
+    border-radius: 0 !important;
+    color: #4a4038 !important;
+    font-family: 'Courier New', monospace !important;
+    font-size: 0.7rem !important;
+    line-height: 1.6;
+}
+"""
+
+INIT_STATUS = """\
+### ◈ Session Monitor
+
+*Psychoanalytic Depth Tracking*
+
+---
+
+> 等待会话开始…
+
+"""
+
+with gr.Blocks(title="Freud · Zero", css=CSS) as app:
+
+    # ── 标题 ──
+    gr.HTML("""
+    <div id="app-header">
+        <h1>Freud · Zero</h1>
+        <p>Psychodynamic Counselling System &nbsp;·&nbsp; 精神动力学取向 &nbsp;·&nbsp; 自我揭露深度追踪</p>
+    </div>
+    """)
+
+    # ── 主布局：左右分栏 ──
+    with gr.Row(elem_id="main-row"):
+
+        # 左：聊天区
+        with gr.Column(scale=3, elem_id="chat-col"):
+
+            with gr.Row(elem_id="ctrl-row"):
+                btn_start = gr.Button("⬡  新会话", elem_id="btn-start", scale=0)
+                btn_end   = gr.Button("○  结束",   elem_id="btn-end",   scale=0)
+
+            chatbot = gr.Chatbot(
+                label="", height=520,
+                type="messages",
+                elem_id="chatbox",
+                show_label=False,
+                avatar_images=(None, None),
+            )
+
+            with gr.Row(elem_id="input-row"):
+                user_input = gr.Textbox(
+                    placeholder="说你想说的……",
+                    show_label=False,
+                    lines=1,
+                    scale=6,
+                    elem_id="user-input",
+                )
+                btn_send = gr.Button("发送", scale=1, elem_id="btn-send")
+
+        # 右：监控面板
+        with gr.Column(scale=2, elem_id="monitor-col"):
+            status_output = gr.Markdown(
+                value=INIT_STATUS,
+                elem_id="monitor-panel",
+            )
+
+    # ── 研究者面板 ──
+    with gr.Accordion("◈  研究者面板", open=False, elem_id="researcher-accordion"):
         with gr.Row():
-            btn_view = gr.Button("查看所有会话记录")
-            btn_download = gr.Button("下载日志文件")
-        log_display = gr.Textbox(label="会话日志", lines=20, interactive=False)
-        file_output = gr.File(label="日志文件")
+            btn_view     = gr.Button("查看记录",  elem_id="btn-start")
+            btn_download = gr.Button("下载日志",  elem_id="btn-end")
+        log_display = gr.Textbox(label="", lines=20, interactive=False, elem_id="log-display")
+        file_output = gr.File(label="")
 
-    # 绑定事件
+    # ── 事件绑定 ──
     btn_start.click(start_session, outputs=[chatbot, status_output])
     btn_end.click(end_session, outputs=[status_output])
-    btn_send.click(chat, inputs=[user_input, chatbot], outputs=[chatbot, user_input, status_output, log_display])
-    user_input.submit(chat, inputs=[user_input, chatbot], outputs=[chatbot, user_input, status_output, log_display])
+    btn_send.click(
+        chat,
+        inputs=[user_input, chatbot],
+        outputs=[chatbot, user_input, status_output, log_display],
+    )
+    user_input.submit(
+        chat,
+        inputs=[user_input, chatbot],
+        outputs=[chatbot, user_input, status_output, log_display],
+    )
     btn_view.click(view_sessions, outputs=[log_display])
     btn_download.click(download_all_sessions, outputs=[file_output])