Update app.py

app.py

@@ -17,9 +17,9 @@ 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');
 
 :root {
-    --primary-color: #4f46e5;
-    --paper-bg: #fdf6e3;
-    --glass-bg: rgba(255, 255, 255, 0.95);
+    --primary-color: #4f46e5; /* indigo 靛蓝色 */
+    --paper-bg: #fdf6e3; /* 米黄色 */
+    --glass-bg: rgba(255, 255, 255, 0.95); /* 半透明白 */
 }
 
 body, .gradio-container {
@@ -32,7 +32,6 @@ body, .gradio-container {
 .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 { 
@@ -43,7 +42,7 @@ body, .gradio-container {
     box-shadow: 0 8px 32px rgba(0,0,0,0.05); 
 }
 
-/* 输入框与按钮美化 (保留之前的样式，此处略微精简以节省篇幅，功能不变) */
+/* 输入框与按钮 */
 .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: 12px !important; padding: 12px !important; }
 .input-box textarea:focus { border-color: var(--primary-color) !important; background: #fff !important; }
@@ -124,17 +123,13 @@ body, .gradio-container {
 
 .page-footer { height: 50px; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; color: #999; border-top: 1px dashed rgba(0,0,0,0.05); z-index: 2; }
 
-/* =========================================
-   Navigation Buttons (Refined)
-   ========================================= */
-
-/* 1. 侧边箭头 (极简风格) */
+/* 1. 侧边箭头*/
 .arrow-btn {
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
-    color: #cbd5e0 !important; /* 默认很浅的灰色 */
-    font-size: 3rem !important; /* 字体加大 */
+    color: #cbd5e0 !important;
+    font-size: 3rem !important;
     font-weight: 200 !important;
     padding: 0 !important;
     height: 100% !important;
@@ -144,7 +139,7 @@ body, .gradio-container {
     justify-content: center !important;
     transition: all 0.2s ease !important;
 }
-/* Hover 时只变色，不加背景，保持清爽 */
+/* Hover */
 .arrow-btn:hover {
     color: var(--primary-color) !important; 
     transform: scale(1.1);
@@ -188,12 +183,11 @@ def paginate_story(story_data, chars_per_page=600):
         return [], []
 
     flat_pages = []
-    chapter_start_indices = [] # 记录 [Chapter 1起始页index, Chapter 2起始页index, ...]
+    chapter_start_indices = [] # 记录 Chapter i 的起始页 index
     
     current_global_page_index = 0
 
     for chapter in story_data:
-        # 记录当前章是从第几页开始的
         chapter_start_indices.append(current_global_page_index)
 
         title = chapter.get("title", "")
@@ -301,14 +295,13 @@ def render_book_page(flat_pages, page_index):
 # ==========================================
 def bridge_to_backend(premise):
     if not premise.strip():
-        # yield error
         yield "⚠️ 请输入故事梗概...", None, None, None, [], [], render_book_page([], 0)
         return
 
     log_buffer = "🚀 初始化前端连接...\n"
     initial_html = render_book_page([], 0)
     
-    # Yield 初始状态 [log, outline, plan, personas, pages, chap_indices, html]
+    # 初始状态 [log, outline, plan, personas, pages, chap_indices, html]
     yield log_buffer, None, None, None, [], [], initial_html
 
     try:
@@ -342,15 +335,14 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
     # --- 状态管理 ---
     story_pages_state = gr.State([])      # 所有的页面 List[Dict]
     chapter_indices_state = gr.State([])  # 每一章起始页的 index List[int]
-    current_page_state = gr.State(0)      # 当前在第几页
+    current_page_state = gr.State(0)      # 当前页面
 
     # --- 顶部标题 ---
     with gr.Row(elem_classes=["header-box"]):
         gr.HTML("""
             <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>
+                    <span class="title-text">LongStory Agent</span>
                 </div>
                 <div class="subtitle-text">Deep Persona-Driven Recursive Novel Generation</div>
             </div>
@@ -369,7 +361,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
                 """)
                 premise_input = gr.Textbox(label="Premise", show_label=False, lines=5, elem_classes=["input-box"], placeholder="输入故事创意...")
                 
-                # 2. 灵感卡片
+                # Examples
                 gr.HTML('<div class="examples-container"><div class="examples-label">⚡ 快速开始 (Quick Inspirations)</div></div>')
                 
                 example_prompts = [
@@ -395,19 +387,15 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
         with gr.Column(scale=8):
             with gr.Tabs(elem_classes=["tabs-container"]):
                 
-                # Tab 1: 电子书 (核心修改区域)
+                # Tab 1: 正文
                 with gr.TabItem("📖 正文阅读", id="tab-story"):
-                    
-                    # 1. 阅读区：[左箭] [书] [右箭]
-                    # equal_height=True 保证高度对其
-                    # gap=0 去除列间隙，让箭头紧贴
                     with gr.Row(elem_classes=["book-reader-row"], equal_height=True):
                         
-                        # 左侧箭头：缩小宽度 (min_width=40)，去掉间距
+                        # 左侧箭头
                         with gr.Column(scale=1, min_width=40, elem_classes=["arrow-col"]):
                             btn_prev_page = gr.Button("‹", elem_classes=["arrow-btn"])
                         
-                        # 书本核心
+                        # 核心内容
                         with gr.Column(scale=15):
                             story_display = gr.HTML(label="Book View", value=render_book_page([], 0))
                         
@@ -415,17 +403,24 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
                         with gr.Column(scale=1, min_width=40, elem_classes=["arrow-col"]):
                             btn_next_page = gr.Button("›", elem_classes=["arrow-btn"])
                     
-                    # 2. 章节导航区：放在书本下方
+                    # 2. 章节导航
                     with gr.Row(elem_classes=["chapter-nav-row"]):
                         btn_prev_chap = gr.Button("⏮️ 上一章", elem_classes=["chapter-nav-btn"])
                         # 占位符，把按钮挤到两边或中间
                         # gr.Spacer() 
                         btn_next_chap = gr.Button("⏭️ 下一章", elem_classes=["chapter-nav-btn"])
 
-                # Tab 2-4
-                with gr.TabItem("🗺️ 大纲"): outline_output = gr.JSON(label="Structure")
-                with gr.TabItem("📅 规划"): plan_output = gr.JSON(label="Plan")
-                with gr.TabItem("👥 人设"): persona_output = gr.HTML(label="Personas")
+                # Tab 2: 大纲
+                with gr.TabItem("🗺️ 故事大纲", id="tab-outline"):
+                    outline_output = gr.JSON(label="Structure Data")
+                
+                # Tab 3: 规划
+                with gr.TabItem("📅 剧情规划", id="tab-planning"):
+                    plan_output = gr.JSON(label="Event Planning")
+                
+                # Tab 4: 人设
+                with gr.TabItem("👥 人物档案", id="tab-persona"):
+                    persona_output = gr.HTML(label="Character Cards")
 
     # ==========================================
     # 5. 事件交互