Update app.py

app.py

@@ -11,84 +11,153 @@ HF_TOKEN = os.environ.get("HF_TOKEN")
 # 1. CSS 样式设计 (电子书风格)
 # ==========================================
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;700&family=JetBrains+Mono:wght@400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@400;700&family=JetBrains+Mono:wght@400&family=Inter:wght@400;600&display=swap');
 
 :root {
     --primary-color: #4f46e5;
+    --primary-hover: #4338ca;
     --paper-bg: #fdf6e3;
     --text-ink: #2c3e50;
+    --glass-bg: rgba(255, 255, 255, 0.95);
+    --border-radius: 12px;
 }
 
 body, .gradio-container {
     font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif !important;
-    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) !important;
+    background: linear-gradient(135deg, #eef2f3 0%, #8e9eab 100%) !important;
     background-attachment: fixed !important;
 }
 
-/* 通用布局 */
-.header-box { text-align: center; padding: 20px; background: rgba(255,255,255,0.9); border-radius: 16px; margin-bottom: 20px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
-.title-text { font-size: 2rem; font-weight: 800; font-family: 'Noto Serif SC', serif; color: #1f2937; }
-.subtitle-text { color: #6b7280; letter-spacing: 1px; text-transform: uppercase; font-size: 0.9rem; }
+/* --- 通用容器 --- */
+.header-box { text-align: center; padding: 25px; background: var(--glass-bg); border-radius: 16px; margin-bottom: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.08); backdrop-filter: blur(10px); }
+.title-text { font-size: 2.2rem; font-weight: 800; font-family: 'Noto Serif SC', serif; color: #1a202c; letter-spacing: -0.5px; }
+.subtitle-text { color: #718096; letter-spacing: 1.5px; text-transform: uppercase; font-size: 0.85rem; font-weight: 600; margin-top: 5px; }
+.title-badge { display: inline-block; background: #000; color: #fff; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; vertical-align: super; margin-left: 5px; }
 
-/* 控制面板 */
-.control-panel { background: rgba(255,255,255,0.9); padding: 20px !important; border-radius: 16px; }
-.generate-btn { background: linear-gradient(90deg, #4f46e5, #7c3aed) !important; color: white !important; font-weight: 600; margin-top: 15px; }
-.terminal-log textarea { font-family: 'JetBrains Mono', monospace !important; background: #1e1e1e !important; color: #a9b7c6 !important; border-radius: 8px; font-size: 12px; }
+/* --- 左侧控制面板 --- */
+.control-panel { 
+    background: var(--glass-bg); 
+    padding: 24px !important; 
+    border-radius: 16px; 
+    border: 1px solid rgba(255,255,255,0.6);
+    box-shadow: 0 8px 32px rgba(0,0,0,0.05); 
+}
 
-/* --- 📖 电子书阅读器核心样式 --- */
-.book-container {
-    background-color: var(--paper-bg); /* 羊皮纸底色 */
-    padding: 60px 80px;
-    min-height: 700px;
-    border-radius: 8px 16px 16px 8px;
-    box-shadow: 
-        inset 20px 0 50px rgba(0,0,0,0.05), /* 书脊阴影 */
-        10px 10px 30px rgba(0,0,0,0.1);     /* 外部投影 */
-    font-family: 'Noto Serif SC', serif; /* 衬线字体，更有文学感 */
-    color: var(--text-ink);
-    position: relative;
-    margin-top: 10px;
-    line-height: 2.0; /* 宽松行高 */
+/* 1. 输入框美化 */
+.input-label { font-weight: 700; color: #4a5568; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
+.input-box textarea { 
+    background: #f8fafc !important; 
+    border: 2px solid #e2e8f0 !important; 
+    border-radius: var(--border-radius) !important;
+    transition: all 0.3s ease;
+    padding: 12px !important;
+    font-size: 14px !important;
+}
+.input-box textarea:focus { 
+    border-color: var(--primary-color) !important; 
+    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important; 
+    background: #fff !important;
 }
 
-/* 书页左侧装饰线 */
-.book-container::before {
-    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
-    background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
+/* 2. Examples (灵感卡片) 深度定制 */
+.examples-container { margin-top: 15px; }
+.examples-label { font-size: 0.85rem; color: #a0aec0; font-weight: 600; margin-bottom: 10px; text-transform: uppercase; }
+
+/* 隐藏原有表格边框，改为卡片式 */
+.examples-table table { border-collapse: separate !important; border-spacing: 0 8px !important; }
+.examples-table thead { display: none; } /* 隐藏表头 */
+.examples-table tbody tr { 
+    background: #fff; 
+    box-shadow: 0 2px 5px rgba(0,0,0,0.05); 
+    border-radius: 8px; 
+    cursor: pointer;
+    transition: transform 0.2s, box-shadow 0.2s;
+    border: 1px solid #edf2f7;
 }
+.examples-table tbody tr:hover { 
+    transform: translateY(-2px); 
+    box-shadow: 0 5px 12px rgba(0,0,0,0.1); 
+    border-color: var(--primary-color);
+}
+.examples-table td { padding: 12px 15px !important; font-size: 13px !important; color: #4a5568 !important; line-height: 1.5 !important; border: none !important; }
 
-/* 章节标题设计 */
-.chapter-header {
-    text-align: center; margin-bottom: 40px; padding-bottom: 20px;
-    border-bottom: 2px solid rgba(139, 69, 19, 0.2);
+/* 3. 按钮设计 */
+.generate-btn { 
+    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important; 
+    color: white !important; 
+    font-weight: 600; 
+    border-radius: 12px !important;
+    padding: 12px !important;
+    font-size: 1.1rem !important;
+    letter-spacing: 0.5px;
+    box-shadow: 0 4px 15px rgba(79, 70, 229, 0.4);
+    transition: all 0.3s ease;
 }
-.chapter-subtitle { font-size: 0.9em; color: #8b4513; opacity: 0.6; font-style: italic; margin-bottom: 5px; }
-.chapter-title { 
-    font-size: 2.4em; 
-    font-weight: 700; 
-    color: #8b4513; /* 深棕色标题 */
-    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
+.generate-btn:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.6);
+    filter: brightness(110%);
 }
 
-/* 正文段落 */
-.chapter-content { font-size: 1.2em; text-align: justify; }
-.chapter-content p { 
-    margin-bottom: 1.5em; 
-    text-indent: 2em; /* 首行缩进 */
+/* 4. 终端 (Terminal) 窗口风格 */
+.terminal-wrapper {
+    margin-top: 25px;
+    background: #1e1e1e;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
+}
+.terminal-header {
+    background: #2d2d2d;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    border-bottom: 1px solid #333;
 }
+/* 红黄绿 按钮模拟 */
+.dot { width: 10px; height: 10px; border-radius: 50%; }
+.dot-red { background: #ff5f56; }
+.dot-yellow { background: #ffbd2e; }
+.dot-green { background: #27c93f; }
+.terminal-title { color: #888; font-size: 10px; margin-left: auto; font-family: sans-serif; }
 
-/* 页脚 */
-.page-footer { text-align: center; margin-top: 60px; font-size: 0.9em; color: #a0aec0; font-family: sans-serif; }
+.terminal-log textarea { 
+    font-family: 'JetBrains Mono', monospace !important; 
+    background: #1e1e1e !important; 
+    color: #4ade80 !important; /* 骇客绿 */
+    border: none !important; 
+    border-radius: 0 0 10px 10px !important; 
+    font-size: 11px !important; 
+    line-height: 1.4 !important;
+    padding: 10px !important;
+    box-shadow: none !important;
+}
 
-/* 翻页按钮容器 */
-.nav-row { margin-top: 20px; display: flex; justify-content: center; gap: 20px; }
-.nav-btn { width: 120px !important; border-radius: 30px !important; }
+/* --- 右侧电子书 (保持原样微调) --- */
+.book-container {
+    background-color: var(--paper-bg);
+    padding: 60px 80px;
+    min-height: 750px;
+    border-radius: 8px 16px 16px 8px;
+    box-shadow: inset 20px 0 50px rgba(0,0,0,0.05), 10px 10px 30px rgba(0,0,0,0.1);
+    font-family: 'Noto Serif SC', serif;
+    color: var(--text-ink);
+    position: relative;
+    line-height: 2.0;
+}
+.book-container::before {
+    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
+    background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
+}
+.chapter-title { font-size: 2.4em; font-weight: 700; color: #8b4513; margin-bottom: 10px; }
+.nav-btn { background: white !important; border: 1px solid #e2e8f0 !important; color: #4a5568 !important; }
+.nav-btn:hover { background: #f7fafc !important; border-color: #cbd5e0 !important; }
 
 /* 移动端适配 */
 @media (max-width: 768px) {
-    .book-container { padding: 30px 20px; }
-    .chapter-title { font-size: 1.8em; }
-    .chapter-content { font-size: 1.1em; }
+    .book-container { padding: 30px 20px; min-height: 500px; }
+    .control-panel { padding: 15px !important; }
 }
 """
 
@@ -196,105 +265,124 @@ def bridge_to_backend(premise):
 # ==========================================
 # 4. 前端 UI 布局 (Blocks)
 # ==========================================
-with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="LongStory Agent") as demo:
+# ... (前面的 imports 和 rendering 函数保持不变)
+
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"), css=custom_css, title="LongStory Agent") as demo:
     
-    # --- 状态管理 (State) ---
-    # story_state: 存储完整的小说章节列表 (List[Dict])
-    # page_state: 存储当前阅读的页码 (int)
+    # --- 状态管理 ---
     story_state = gr.State([])
     page_state = gr.State(0)
 
     # --- 顶部标题 ---
     with gr.Row(elem_classes=["header-box"]):
         gr.HTML("""
-            <div class="title-wrapper">
-                <div class="title-text">LongStory AI</div>
-                <div class="title-badge">PRO</div>
+            <div style="display:flex; flex-direction:column; align-items:center;">
+                <div class="title-wrapper">
+                    <span class="title-text">LongStory AI</span>
+                    <span class="title-badge">PRO</span>
+                </div>
+                <div class="subtitle-text">Deep Persona-Driven Recursive Novel Generation</div>
             </div>
-            <div class="subtitle-text">Deep Persona-Driven Recursive Novel Generation System</div>
         """)
 
     with gr.Row(elem_classes=["main-container"]):
         
-        # --- 左侧：控制面板 ---
-        with gr.Column(scale=4, elem_classes=["control-panel-col"]):
+        # === 左侧：控制中心 ===
+        with gr.Column(scale=3, elem_classes=["control-panel-col"]):
             with gr.Column(elem_classes=["control-panel"]):
-                gr.Markdown("### 💡 故事梗概 (Story Premise)", elem_id="input_title")
+                
+                # 1. 标题与输入区
+                gr.HTML("""
+                <div class="input-label">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 0 1 4 4v14a3 3 0 0 0-3-3H2z"></path><path d="M22 3h-6a4 4 0 0 0-4 4v14a3 3 0 0 1 3-3h7z"></path></svg>
+                    Story Premise
+                </div>
+                """)
                 
                 premise_input = gr.Textbox(
-                    label="输入你的创意...", show_label=False,
-                    placeholder="例如：赛博朋克背景下，一个因旧型号义肢而被歧视的侦探...",
-                    lines=6, elem_classes=["input-box"]
+                    label="Premise", 
+                    show_label=False,
+                    placeholder="在此输入你的故事创意，越详细越好...\n例如：赛博朋克背景下，一个因旧型号义肢而被歧视的侦探...",
+                    lines=5, 
+                    elem_classes=["input-box"]
                 )
                 
-                with gr.Group(elem_classes=["examples-table"]):
-                    gr.Examples(
-                        examples=[
-                            ["高中时互相看不顺眼的死对头，一个是高冷学霸，一个是调皮体育生。十年后的同学聚会上..."],
-                            ["天生'废灵根'的宗门弃徒，在被逐出师门当晚，意外捡到一个黑色小鼎..."]
-                        ],
-                        inputs=premise_input,
-                        label="⚡ 快速灵感"
-                    )
+                # 2. 灵感卡片 (Examples)
+                gr.HTML('<div class="examples-container"><div class="examples-label">⚡ Quick Inspirations</div></div>')
+                
+                # 定义 Examples，注意这里只放 text，不放 label，CSS 会把它变成卡片
+                example_prompts = [
+                    ["高中时互相看不顺眼的死对头，十年后在公司并购案谈判桌上重逢，一个是冷血收购方，一个是绝境求生的CEO。"],
+                    ["天生'废灵根'的宗门弃徒，在被逐出师门当晚，意外捡到一个能听见万物心声的黑色小鼎。"],
+                    ["一觉醒来，人类全部消失，只剩下我和我养的猫。第三天，猫开口对我说话了。"]
+                ]
+                
+                gr.Examples(
+                    examples=example_prompts,
+                    inputs=premise_input,
+                    label=None,
+                    elem_classes=["examples-table"] # 关键：应用新的卡片 CSS
+                )
                 
+                # 3. 启动按钮
                 submit_btn = gr.Button(
-                    "🚀 启动生成 (GENERATE)", 
+                    "✨ 开始生成 (GENERATE)", 
                     elem_classes=["generate-btn"]
                 )
                 
-                # 终端日志样式
-                gr.HTML("<div style='margin-top:20px;color:#888;font-size:12px;'>TERMINAL OUTPUT</div>")
+                # 4. 终端日志窗口 (伪装成 IDE 终端)
+                gr.HTML("""
+                <div class="terminal-wrapper">
+                    <div class="terminal-header">
+                        <div class="dot dot-red"></div>
+                        <div class="dot dot-yellow"></div>
+                        <div class="dot dot-green"></div>
+                        <div class="terminal-title">agent_core.exe</div>
+                    </div>
+                """)
                 log_output = gr.Textbox(
-                    label="System Log", lines=12, interactive=False, 
-                    elem_classes=["terminal-log"], show_label=False, value="> System Ready."
+                    label="System Log", 
+                    lines=10, 
+                    interactive=False, 
+                    elem_classes=["terminal-log"], 
+                    show_label=False, 
+                    value="> System initialized.\n> Waiting for user input..."
                 )
+                gr.HTML("</div>") # Close terminal-wrapper
 
-        # --- 右侧：内容展示区 ---
-        with gr.Column(scale=8):
+        # === 右侧：内容展示区 ===
+        with gr.Column(scale=7):
             with gr.Tabs(elem_classes=["tabs-container"]):
                 
-                # Tab 1: 电子书阅读器 (重点优化)
-                with gr.TabItem("📖 正文 (Reader)", id="tab-story"):
-                    # 用于显示渲染后的 HTML
+                # Tab 1: 电子书
+                with gr.TabItem("📖 正文阅读", id="tab-story"):
                     story_display = gr.HTML(label="Book View")
-                    
-                    # 翻页按钮
                     with gr.Row(elem_classes=["nav-row"]):
-                        prev_btn = gr.Button("← 上一章", elem_classes=["nav-btn"])
-                        next_btn = gr.Button("下一章 →", elem_classes=["nav-btn"])
+                        prev_btn = gr.Button("← Previous Chapter", elem_classes=["nav-btn"])
+                        next_btn = gr.Button("Next Chapter →", elem_classes=["nav-btn"])
 
                 # Tab 2: 大纲
-                with gr.TabItem("🗺️ 大纲 (Outline)", id="tab-outline"):
-                    outline_output = gr.JSON(label=None, elem_classes=["json-panel"])
+                with gr.TabItem("🗺️ 故事大纲", id="tab-outline"):
+                    outline_output = gr.JSON(label="Structure Data")
                 
                 # Tab 3: 规划
-                with gr.TabItem("📅 规划 (Plan)", id="tab-planning"):
-                    plan_output = gr.JSON(label=None, elem_classes=["json-panel"])
+                with gr.TabItem("📅 剧情规划", id="tab-planning"):
+                    plan_output = gr.JSON(label="Event Planning")
                 
-                # Tab 4: 人设 (HTML 卡片)
-                with gr.TabItem("👥 档案 (Personas)", id="tab-persona"):
-                    persona_output = gr.HTML(label=None, elem_classes=["html-panel"])
+                # Tab 4: 人设
+                with gr.TabItem("👥 人物档案", id="tab-persona"):
+                    persona_output = gr.HTML(label="Character Cards")
 
     # ==========================================
-    # 5. 事件交互逻辑
+    # 事件交互 (保持不变)
     # ==========================================
-
-    # A. 点击生成按钮
     submit_btn.click(
         fn=bridge_to_backend,
         inputs=[premise_input],
-        outputs=[
-            log_output,      # 1. 日志
-            outline_output,  # 2. 大纲
-            plan_output,     # 3. 规划
-            persona_output,  # 4. 人设(HTML)
-            story_state,     # 5. 故事数据(Hidden State)
-            story_display    # 6. 故事显示(HTML)
-        ],
+        outputs=[log_output, outline_output, plan_output, persona_output, story_state, story_display],
         concurrency_limit=1
     )
 
-    # B. 翻页逻辑函数 (纯前端交互，不需要请求后端)
     def go_prev(story_data, current_page):
         new_page = max(0, current_page - 1)
         return new_page, render_book_page(story_data, new_page)
@@ -304,18 +392,8 @@ with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="LongStory Agent")
         new_page = min(len(story_data) - 1, current_page + 1)
         return new_page, render_book_page(story_data, new_page)
 
-    # C. 绑定翻页按钮
-    prev_btn.click(
-        fn=go_prev,
-        inputs=[story_state, page_state],
-        outputs=[page_state, story_display]
-    )
-    
-    next_btn.click(
-        fn=go_next,
-        inputs=[story_state, page_state],
-        outputs=[page_state, story_display]
-    )
+    prev_btn.click(fn=go_prev, inputs=[story_state, page_state], outputs=[page_state, story_display])
+    next_btn.click(fn=go_next, inputs=[story_state, page_state], outputs=[page_state, story_display])
 
 if __name__ == "__main__":
     demo.queue().launch()