Update app.py

app.py

@@ -3,12 +3,15 @@ import time
 import gradio as gr
 from gradio_client import Client
 
+# ==========================================
+# 配置区域
+# ==========================================
 # 请确保这里的 Space ID 是你部署后端的真实 ID (格式: Username/SpaceName)
 PRIVATE_SPACE_ID = "Yoyo2004/Longstory-backend"
 HF_TOKEN = os.environ.get("HF_TOKEN")
 
 # ==========================================
-# 1. CSS 样式设计 (电子书风格)
+# 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&family=Inter:wght@400;600&display=swap');
@@ -134,7 +137,7 @@ body, .gradio-container {
     box-shadow: none !important;
 }
 
-/* --- 右侧电子书 (保持原样微调) --- */
+/* --- 右侧电子书 --- */
 .book-container {
     background-color: var(--paper-bg);
     padding: 60px 80px;
@@ -150,14 +153,32 @@ body, .gradio-container {
     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; }
+.chapter-header {
+    text-align: center; margin-bottom: 40px; padding-bottom: 20px;
+    border-bottom: 2px solid rgba(139, 69, 19, 0.2);
+}
+.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);
+}
+.chapter-content { font-size: 1.2em; text-align: justify; }
+.chapter-content p { 
+    margin-bottom: 1.5em; 
+    text-indent: 2em; 
+}
+.page-footer { text-align: center; margin-top: 60px; font-size: 0.9em; color: #a0aec0; font-family: sans-serif; }
+.nav-row { margin-top: 20px; display: flex; justify-content: center; gap: 20px; }
+.nav-btn { background: white !important; border: 1px solid #e2e8f0 !important; color: #4a5568 !important; width: 150px !important; }
 .nav-btn:hover { background: #f7fafc !important; border-color: #cbd5e0 !important; }
 
 /* 移动端适配 */
 @media (max-width: 768px) {
     .book-container { padding: 30px 20px; min-height: 500px; }
     .control-panel { padding: 15px !important; }
+    .chapter-title { font-size: 1.8em; }
 }
 """
 
@@ -175,7 +196,7 @@ def render_book_page(story_data, page_index):
         <div class='book-container' style='display:flex;align-items:center;justify-content:center;color:#999'>
             <div style='text-align:center;'>
                 <h3>📖 等待故事生成...</h3>
-                <p>Wait for content generation...</p>
+                <p>Waiting for generation...</p>
             </div>
         </div>
         """
@@ -192,7 +213,6 @@ def render_book_page(story_data, page_index):
     content = chapter.get("content", "")
     
     # 4. 格式化正文 (将换行符 \n 转为 HTML 段落 <p>)
-    # 过滤掉空行，给每段加上 <p>
     paragraphs = [p.strip() for p in content.split('\n') if p.strip()]
     content_html = "".join([f"<p>{p}</p>" for p in paragraphs])
     
@@ -218,7 +238,7 @@ def render_book_page(story_data, page_index):
 # ==========================================
 def bridge_to_backend(premise):
     if not premise.strip():
-        yield "⚠️ 请输入故事梗概...", None, None, None, [], None
+        yield "⚠️ 请输入故事梗概...", None, None, None, [], render_book_page([], 0)
         return
 
     # 初始化日志
@@ -240,10 +260,9 @@ def bridge_to_backend(premise):
         start_time = time.time()
         for result in job:
             elapsed = int(time.time() - start_time)
-            current_log = log_buffer + f"\n[+{elapsed}s] 后端处理中... (Processing)"
-            
-            # 解析后端返回的 Tuple (对应后端 app.py 的 return)
+            # 这里的 result 是一个 tuple，对应后端的返回值
             # [0]Log, [1]Outline, [2]Plan, [3]Personas(HTML), [4]Story(List[Dict])
+            
             backend_log = result[0]
             outline = result[1]
             plan = result[2]
@@ -254,19 +273,15 @@ def bridge_to_backend(premise):
             book_html = render_book_page(story_list, 0)
             
             # 更新所有组件
-            # story_state 存原始数据，story_display 存渲染后的 HTML
             yield backend_log, outline, plan, personas_html, story_list, book_html
 
     except Exception as e:
         error_msg = f"❌ 前端连接错误: {str(e)}"
         yield error_msg, None, None, None, [], render_book_page([], 0)
 
-
 # ==========================================
 # 4. 前端 UI 布局 (Blocks)
 # ==========================================
-# ... (前面的 imports 和 rendering 函数保持不变)
-
 with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"), css=custom_css, title="LongStory Agent") as demo:
     
     # --- 状态管理 ---
@@ -310,7 +325,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
                 # 2. 灵感卡片 (Examples)
                 gr.HTML('<div class="examples-container"><div class="examples-label">⚡ Quick Inspirations</div></div>')
                 
-                # 定义 Examples，注意这里只放 text，不放 label，CSS 会把它变成卡片
+                # 定义 Examples
                 example_prompts = [
                     ["高中时互相看不顺眼的死对头，十年后在公司并购案谈判桌上重逢，一个是冷血收购方，一个是绝境求生的CEO。"],
                     ["天生'废灵根'的宗门弃徒，在被逐出师门当晚，意外捡到一个能听见万物心声的黑色小鼎。"],
@@ -374,15 +389,25 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
                     persona_output = gr.HTML(label="Character Cards")
 
     # ==========================================
-    # 事件交互 (保持不变)
+    # 5. 事件交互逻辑
     # ==========================================
+    
+    # A. 提交生成
     submit_btn.click(
         fn=bridge_to_backend,
         inputs=[premise_input],
-        outputs=[log_output, outline_output, plan_output, persona_output, story_state, story_display],
+        outputs=[
+            log_output,     # [0] 日志
+            outline_output, # [1] 大纲
+            plan_output,    # [2] 规划
+            persona_output, # [3] 人设HTML
+            story_state,    # [4] 故事状态 (List)
+            story_display   # [5] 故事显示 (HTML)
+        ],
         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)
@@ -392,6 +417,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
         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])