Update app.py

app.py

@@ -4,14 +4,13 @@ import gradio as gr
 from gradio_client import Client
 
 # ==========================================
-# 配置区域
+# 0. 配置区域
 # ==========================================
-# 请确保这里的 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');
@@ -186,7 +185,7 @@ body, .gradio-container {
 """
 
 # ==========================================
-# 2. 渲染辅助函数 (Python)
+# 2. 渲染辅助函数
 # ==========================================
 def render_book_page(story_data, page_index):
     """
@@ -237,7 +236,7 @@ def render_book_page(story_data, page_index):
     return html
 
 # ==========================================
-# 3. 后端连接逻辑 (Gradio Client)
+# 3. 后端连接
 # ==========================================
 def bridge_to_backend(premise):
     if not premise.strip():
@@ -283,10 +282,9 @@ def bridge_to_backend(premise):
         yield error_msg, None, None, None, [], render_book_page([], 0)
 
 # ==========================================
-# 4. 前端 UI 布局 (Blocks)
+# 4. 前端 UI 布局
 # ==========================================
 with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"), css=custom_css, title="LongStory Agent") as demo:
-    
     # --- 状态管理 ---
     story_state = gr.State([])
     page_state = gr.State(0)
@@ -306,7 +304,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
     with gr.Row(elem_classes=["main-container"]):
         
         # === 左侧：控制中心 ===
-        with gr.Column(scale=3, elem_classes=["control-panel-col"]):
+        with gr.Column(scale=4, elem_classes=["control-panel-col"]):
             with gr.Column(elem_classes=["control-panel"]):
                 
                 # 1. 标题与输入区
@@ -320,15 +318,14 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
                 premise_input = gr.Textbox(
                     label="Premise", 
                     show_label=False,
-                    placeholder="在此输入你的故事创意，越详细越好...\n例如：赛博朋克背景下，一个因旧型号义肢而被歧视的侦探...",
+                    placeholder="在此输入你的故事创意...\n例如：赛博朋克背景下，一个因旧型号义肢而被歧视的侦探...",
                     lines=5, 
                     elem_classes=["input-box"]
                 )
                 
                 # 2. 灵感卡片 (Examples)
-                gr.HTML('<div class="examples-container"><div class="examples-label">⚡ Quick Inspirations</div></div>')
+                gr.HTML('<div class="examples-container"><div class="examples-label">⚡ 快速开始 (Quick Inspirations)</div></div>')
                 
-                # 定义 Examples
                 example_prompts = [
                     ["高中时互相看不顺眼的死对头，十年后在公司并购案谈判桌上重逢，一个是冷血收购方，一个是绝境求生的CEO。"],
                     ["天生'废灵根'的宗门弃徒，在被逐出师门当晚，意外捡到一个能听见万物心声的黑色小鼎。"],
@@ -343,17 +340,15 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
                         examples=example_prompts,
                         inputs=premise_input,
                         label=None
-                        # 注意：移除了这里的 elem_classes 参数
                     )
-                # --- 修复结束 ---
-                
+                    
                 # 3. 启动按钮
                 submit_btn = gr.Button(
                     "✨ 开始生成 (GENERATE)", 
                     elem_classes=["generate-btn"]
                 )
                 
-                # 4. 终端日志窗口 (伪装成 IDE 终端)
+                # 4. 终端日志
                 gr.HTML("""
                 <div class="terminal-wrapper">
                     <div class="terminal-header">
@@ -373,16 +368,16 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="indigo", neutral_hue="slate"),
                 )
                 gr.HTML("</div>") # Close terminal-wrapper
 
-        # === 右侧：内容展示区 ===
-        with gr.Column(scale=7):
+        # === 右侧：内容展示 ===
+        with gr.Column(scale=8):
             with gr.Tabs(elem_classes=["tabs-container"]):
                 
                 # 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("← Previous Chapter", elem_classes=["nav-btn"])
-                        next_btn = gr.Button("Next Chapter →", 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("🗺️ 故事大纲", id="tab-outline"):
@@ -425,7 +420,6 @@ 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])