Update app.py

app.py

@@ -1,406 +1,321 @@
 import os
-import json
-import random
 import time
-import base64
-import io
-import traceback
 import gradio as gr
-from huggingface_hub import InferenceClient
+from gradio_client import Client
 
-# 假设这些是你上传的 storywriter 库
-from storywriter import (
-    OutlineAgent,
-    PlanningAgent,
-    WritingAgent,
-)
-from storywriter.planning_agent import (
-    PersonaTrajectoryAgent,
-    SubeventDynamicsAligner
-)
+# 请确保这里的 Space ID 是你部署后端的真实 ID (格式: Username/SpaceName)
+PRIVATE_SPACE_ID = "Yoyo2004/Longstory-backend"
+HF_TOKEN = os.environ.get("HF_TOKEN")
 
 # ==========================================
-# 图像生成辅助类
+# 1. CSS 样式设计 (电子书风格)
 # ==========================================
-class ImageGenerator:
-    def __init__(self, token=None):
-        self.token = token
-        self.model_id = "cagliostrolab/animagine-xl-3.1"
-        self.client = InferenceClient(model=self.model_id, token=token)
-
-    def _translate_prompt(self, text):
-        mapping = {
-            "男": "1boy, male", "女": "1girl, female", "少年": "young boy", "少女": "young girl",
-            "青年": "young adult", "长发": "long hair", "短发": "short hair", "眼镜": "glasses",
-            "帅气": "handsome", "美丽": "beautiful", "可爱": "cute", "冷酷": "cool",
-            "阳光": "cheerful", "校服": "school uniform",
-        }
-        for k, v in mapping.items():
-            text = text.replace(k, v)
-        return text
-
-    def generate_persona_image_base64(self, name, description):
-        if not self.token:
-            print(f"⚠️ No token found for {name}")
-            return None
-        
-        eng_description = self._translate_prompt(description)
-        prompt = (
-            f"anime style, character design, masterpiece, best quality, "
-            f"solo, upper body, portrait, looking at viewer, "
-            f"{eng_description}, "
-            f"white background, simple background, flat color"
-        )
-        negative_prompt = "lowres, bad anatomy, bad hands, text, error, missing fingers, extra digit, fewer digits, cropped, worst quality, low quality, normal quality, jpeg artifacts, signature, watermark, username, blurry, background elements, multiple views"
-
-        print(f"🎨 Generating for {name}...")
-        max_retries = 2
-        for attempt in range(max_retries + 1):
-            try:
-                image = self.client.text_to_image(
-                    prompt,
-                    negative_prompt=negative_prompt,
-                    height=1024,
-                    width=832,
-                    guidance_scale=7.0,
-                )
-                buffered = io.BytesIO()
-                image.save(buffered, format="PNG")
-                img_str = base64.b64encode(buffered.getvalue()).decode("utf-8")
-                return f"data:image/png;base64,{img_str}"
-            except Exception as e:
-                print(f"⚠️ Attempt {attempt+1} failed for {name}: {e}")
-                if attempt == max_retries:
-                    traceback.print_exc()
-                    return None
-                time.sleep(2)
-
-# ==========================================
-# UI 渲染辅助函数 (人物卡片)
-# ==========================================
-def render_persona_html(personas_data, image_map=None, generation_started=False):
-    if not personas_data: return ""
-    personas_list = personas_data.get("personas", []) if isinstance(personas_data, dict) else personas_data
-    if not personas_list: return "<div style='padding:20px; color: #666;'>暂无人物数据</div>"
-
-    html = """
-    <style>
-        .persona-container { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; font-family: 'Noto Sans SC', sans-serif; }
-        .persona-card { width: 300px; background: #fff; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.08); overflow: hidden; border: 1px solid #f3f4f6; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; }
-        .persona-card:hover { transform: translateY(-4px); box-shadow: 0 12px 20px rgba(0,0,0,0.12); }
-        .card-img-wrapper { width: 100%; height: 360px; background: #f9fafb; display: flex; align-items: center; justify-content: center; overflow: hidden; border-bottom: 1px solid #eee; }
-        .card-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
-        .card-img:hover { transform: scale(1.03); }
-        .card-placeholder { color: #9ca3af; font-size: 0.9rem; font-style: italic; text-align: center; padding: 20px; }
-        .card-content { padding: 15px; flex-grow: 1; display: flex; flex-direction: column; }
-        .card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
-        .card-name { font-size: 1.3rem; font-weight: 800; color: #111827; }
-        .card-age { font-size: 0.8rem; color: #6b7280; background: #f3f4f6; padding: 2px 8px; border-radius: 12px; }
-        .card-role-badge { align-self: flex-start; display: inline-block; padding: 3px 8px; border-radius: 6px; background: #e0e7ff; color: #4f46e5; font-size: 0.75rem; font-weight: 600; margin-bottom: 10px; }
-        .card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; }
-        .card-tag { font-size: 0.7rem; background: #f3f4f6; color: #4b5563; padding: 2px 6px; border-radius: 99px; border: 1px solid #e5e7eb; }
-        .card-section { margin-bottom: 6px; font-size: 0.85rem; color: #374151; line-height: 1.5; }
-        .label { font-weight: 700; color: #1f2937; margin-right: 4px; }
-    </style>
-    <div class='persona-container'>
-    """
-    
-    MAX_IMAGES = 3
-    for idx, p in enumerate(personas_list):
-        name = p.get("name", "Unknown")
-        basic = p.get("basic", {})
-        role, age, gender = basic.get("role", "N/A"), basic.get("age_stage", "Unknown"), basic.get("gender", "")
-        appearance, status = basic.get("appearance", "No description."), basic.get("initial_status", "")
-        archetypes = basic.get("archetype", []) if isinstance(basic.get("archetype"), list) else []
-        tags_html = "".join([f"<span class='card-tag'>#{t}</span>" for t in archetypes[:4]])
-
-        img_src = image_map.get(name, "") if image_map else ""
-        placeholder_text = "No Image" if idx >= MAX_IMAGES else ("Generating Art..." if generation_started else "Waiting...")
-        img_html = f"<div class='card-img-wrapper'><img src='{img_src}' class='card-img' alt='{name}'></div>" if img_src else f"<div class='card-img-wrapper'><div class='card-placeholder'>{placeholder_text}</div></div>"
-
-        html += f"""
-        <div class="persona-card">{img_html}<div class="card-content">
-            <div class="card-header"><div class="card-name">{name}</div><div class="card-age">{age} {gender}</div></div>
-            <div class="card-role-badge">{role}</div><div class="card-tags">{tags_html}</div>
-            <div class="card-section"><span class="label">外貌:</span>{appearance[:40]}...</div>
-        </div></div>"""
-    return html + "</div>"
+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');
+
+:root {
+    --primary-color: #4f46e5;
+    --paper-bg: #fdf6e3;
+    --text-ink: #2c3e50;
+}
+
+body, .gradio-container {
+    font-family: 'Inter', 'Noto Sans SC', system-ui, sans-serif !important;
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 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; }
+
+/* 控制面板 */
+.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; }
+
+/* --- 📖 电子书阅读器核心样式 --- */
+.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; /* 宽松行高 */
+}
+
+/* 书页左侧装饰线 */
+.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-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 { width: 120px !important; border-radius: 30px !important; }
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+    .book-container { padding: 30px 20px; }
+    .chapter-title { font-size: 1.8em; }
+    .chapter-content { font-size: 1.1em; }
+}
+"""
 
 # ==========================================
-# UI 渲染辅助函数 (电子书)
+# 2. 渲染辅助函数 (Python)
 # ==========================================
 def render_book_page(story_data, page_index):
+    """
+    将章节数据渲染成 HTML。
+    story_data: List[Dict] -> [{"title": "Chapter 1", "content": "..."}]
+    """
+    # 1. 空状态处理
     if not story_data or not isinstance(story_data, list) or len(story_data) == 0:
-        return "<div style='text-align:center; padding: 50px; color: #999;'><i>等待故事生成...</i></div>"
+        return """
+        <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>
+            </div>
+        </div>
+        """
+    
+    # 2. 页码边界检查
+    total_pages = len(story_data)
+    page_index = max(0, min(page_index, total_pages - 1))
     
-    page_index = max(0, min(page_index, len(story_data) - 1))
+    # 3. 获取当前章节数据
     chapter = story_data[page_index]
+    
+    # 兼容后端可能返回的字典 key (title/content)
     title = chapter.get("title", f"Chapter {page_index + 1}")
     content = chapter.get("content", "")
     
-    paragraphs = content.split('\n')
-    content_html = "".join([f"<p>{p.strip()}</p>" for p in paragraphs if p.strip()])
-
+    # 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])
+    
+    # 5. 组装 HTML
     html = f"""
-    <style>
-        .book-wrapper {{
-            background-color: #fdf6e3; padding: 60px 80px; border-radius: 8px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.1); font-family: 'Noto Serif SC', serif;
-            color: #2c3e50; min-height: 600px; max-width: 800px; margin: 0 auto; position: relative;
-        }}
-        .book-wrapper::before {{
-            content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
-            background: linear-gradient(to right, rgba(0,0,0,0.1), transparent);
-        }}
-        .chapter-title {{
-            font-size: 2.2em; font-weight: 800; text-align: center; margin-bottom: 40px;
-            color: #8b4513; border-bottom: 2px solid rgba(139, 69, 19, 0.2); padding-bottom: 20px;
-        }}
-        .chapter-content p {{
-            font-size: 1.15em; line-height: 1.8; margin-bottom: 1.2em; text-align: justify; text-indent: 2em;
-        }}
-        .page-number {{ text-align: center; margin-top: 40px; font-size: 0.9em; color: #888; }}
-    </style>
-    <div class="book-wrapper">
-        <div class="chapter-title">{title}</div>
-        <div class="chapter-content">{content_html}</div>
-        <div class="page-number">- {page_index + 1} / {len(story_data)} -</div>
+    <div class="book-container">
+        <div class="chapter-header">
+            <div class="chapter-subtitle">Generated Novel</div>
+            <div class="chapter-title">{title}</div>
+        </div>
+        <div class="chapter-content">
+            {content_html}
+        </div>
+        <div class="page-footer">
+            - Page {page_index + 1} of {total_pages} -
+        </div>
     </div>
     """
     return html
 
 # ==========================================
-# 核心生成逻辑
+# 3. 后端连接逻辑 (Gradio Client)
 # ==========================================
-def generate_novel(premise):
-    msg = "🚀 [Backend] Process initialized...\n"
-    print(msg.strip())
-    current_log = msg
-    
-    current_outline = None
-    current_plan = None
-    current_personas = None 
-    current_story = None # 将存储结构化数据
-    persona_images_map = {}
-
-    yield current_log, current_outline, current_plan, current_personas, current_story
-
-    if not premise or not premise.strip():
-        msg = "❌ Error: Premise is empty.\n"
-        current_log += msg
-        yield current_log, current_outline, current_plan, current_personas, current_story
+def bridge_to_backend(premise):
+    if not premise.strip():
+        yield "⚠️ 请输入故事梗概...", None, None, None, [], None
         return
-        
-    hf_token = os.environ.get("HF_TOKEN")
-    img_gen = ImageGenerator(token=hf_token)
-
-    # --- Phase 1: Outline & Art ---
-    msg = f"📝 [1/5] Generating outline & initial profiles...\n"
-    print(msg.strip())
-    current_log += msg
-    yield current_log, current_outline, current_plan, current_personas, current_story
 
-    try:
-        outline_agent = OutlineAgent()
-        outline_outputs = outline_agent.run_full_outline(premise=premise, max_retries=5)
-        
-        refined_events_text = outline_outputs["refined_events_text"]
-        try: current_outline = json.loads(refined_events_text) 
-        except: current_outline = {"raw_text": refined_events_text}
-
-        profiles_json_text = outline_outputs.get("profiles_json", "{}")
-        personas_raw_data = {}
-        try:
-            personas_raw_data = json.loads(profiles_json_text)
-            current_personas = render_persona_html(personas_raw_data, persona_images_map, generation_started=True)
-        except:
-            current_personas = f"<pre>{profiles_json_text}</pre>"
-
-        msg = "✅ [1/5] Outline generated. Starting Art Generation...\n"
-        print(msg.strip())
-        current_log += msg
-        yield current_log, current_outline, current_plan, current_personas, current_story
-
-        # 生成图片 (Phase 1)
-        if hf_token and isinstance(personas_raw_data, dict):
-            p_list = personas_raw_data.get("personas", [])
-            if isinstance(p_list, list):
-                for i, p in enumerate(p_list[:3]):
-                    name = p.get("name", "Unknown")
-                    basic = p.get("basic", {})
-                    desc_prompt = f"{basic.get('gender','')}, {basic.get('age_stage','')}, {basic.get('appearance','')}"
-                    if name not in persona_images_map:
-                        img_b64 = img_gen.generate_persona_image_base64(name, desc_prompt)
-                        if img_b64:
-                            persona_images_map[name] = img_b64
-                            msg = f"  -> Generated: {name}\n"
-                            print(msg.strip())
-                            current_log += msg
-                            current_personas = render_persona_html(personas_raw_data, persona_images_map, generation_started=True)
-                            yield current_log, current_outline, current_plan, current_personas, current_story
-                        else:
-                            msg = f"  -> Failed to generate: {name}\n"
-                            print(msg.strip())
-                            current_log += msg
-        elif not hf_token:
-            msg = "⚠️ [Art] HF_TOKEN missing. Skipping Art.\n"
-            print(msg.strip())
-            current_log += msg
-            yield current_log, current_outline, current_plan, current_personas, current_story
-
-    except Exception as e:
-        msg = f"❌ [Error in Phase 1]: {str(e)}\n"
-        print(msg.strip())
-        traceback.print_exc()
-        current_log += msg
-        yield current_log, current_outline, current_plan, current_personas, current_story
-        return
-
-    # --- Phase 2: Plan ---
-    msg = "📅 [2/5] Splitting events into sub-events...\n"
-    print(msg.strip())
-    current_log += msg
-    yield current_log, current_outline, current_plan, current_personas, current_story
-
-    try:
-        events_json_input = current_outline if isinstance(current_outline, dict) else {}
-        temp_dir = "/tmp/longstory_cache"
-        os.makedirs(temp_dir, exist_ok=True)
-        planner = PlanningAgent()
-        plan_stats = planner.plan_from_events_json(
-            events_json=events_json_input, output_dir=temp_dir, file_id="temp", premise=premise
-        )
-        current_plan = plan_stats.get("subevents_json", {})
-        msg = "✅ [2/5] Planning complete.\n"
-        print(msg.strip())
-        current_log += msg
-        yield current_log, current_outline, current_plan, current_personas, current_story
-    except Exception as e:
-        msg = f"❌ [Error in Phase 2]: {str(e)}\n"
-        print(msg.strip())
-        traceback.print_exc()
-        current_log += msg
-        yield current_log, current_outline, current_plan, current_personas, current_story
-        return
-
-    # --- Phase 3: Persona Refinement ---
-    msg = "👥 [3/5] Refining Personas (Text Only)...\n"
-    print(msg.strip())
-    current_log += msg
-    yield current_log, current_outline, current_plan, current_personas, current_story
+    # 初始化日志
+    log_buffer = "🚀 初始化前端连接...\n"
+    # 初始状态：空故事列表，以及渲染好的“等待中”HTML
+    empty_story = []
+    initial_html = render_book_page([], 0)
+    
+    # Yield 初始状态 [log, outline, plan, personas, story_state, story_view]
+    yield log_buffer, None, None, None, empty_story, initial_html
 
     try:
-        persona_agent = PersonaTrajectoryAgent()
-        personas_data = persona_agent.build_personas(premise=premise, events_json=current_outline, subevents_json=current_plan)
-        current_personas = render_persona_html(personas_data, persona_images_map, generation_started=True)
-        yield current_log, current_outline, current_plan, current_personas, current_story
+        log_buffer += f"🔗 连接后端 Space: {PRIVATE_SPACE_ID}...\n"
+        client = Client(PRIVATE_SPACE_ID, hf_token=HF_TOKEN)
         
-        aligner = SubeventDynamicsAligner()
-        enriched_subevents = aligner.align(premise=premise, events_json=current_outline, subevents_json=current_plan, personas=personas_data)
-        current_plan = enriched_subevents
-        msg = "✅ [3/5] Personas refined & Plan enriched.\n"
-        print(msg.strip())
-        current_log += msg
-        yield current_log, current_outline, current_plan, current_personas, current_story
-
-    except Exception as e:
-        msg = f"❌ [Error in Phase 3]: {str(e)}\n"
-        print(msg.strip())
-        traceback.print_exc()
-        current_log += msg
-        yield current_log, current_outline, current_plan, current_personas, current_story
-        return
-
-    # --- Phase 4: Writing (结构化 JSON 输出) ---
-    msg = "✍️ [4/5] Writing chapters (Stream starting)...\n"
-    print(msg.strip())
-    current_log += msg
-    current_story = [{"title": "系统消息", "content": "正在撰写正文，请稍候... (Writing in progress)"}]
-    yield current_log, current_outline, current_plan, current_personas, current_story
-
-    try:
-        writer = WritingAgent()
-        outputs = writer.write_from_subevents_json(events_json=current_outline, subevents_json=current_plan, personas=personas_data if 'personas_data' in locals() else {}, max_turns=500)
+        # 提交任务
+        job = client.submit(premise, api_name="/generate_novel")
         
-        structured_story = []
-        if isinstance(outputs, dict):
-            for title, content in outputs.items():
-                structured_story.append({"title": str(title), "content": str(content)})
-        elif isinstance(outputs, list):
-            for i, content in enumerate(outputs):
-                structured_story.append({"title": f"Chapter {i+1}", "content": str(content)})
-        else:
-            structured_story.append({"title": "全文", "content": str(outputs)})
+        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)
+            # [0]Log, [1]Outline, [2]Plan, [3]Personas(HTML), [4]Story(List[Dict])
+            backend_log = result[0]
+            outline = result[1]
+            plan = result[2]
+            personas_html = result[3]
+            story_list = result[4] 
             
-        current_story = structured_story
-        msg = "🎉 [Done] Generation complete!\n"
-        print(msg.strip())
-        current_log += msg
-        yield current_log, current_outline, current_plan, current_personas, current_story
+            # 关键：拿到 story_list 后，立即渲染第一页 (page_index=0)
+            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:
-        msg = f"❌ [Error in Phase 4]: {str(e)}\n"
-        print(msg.strip())
-        traceback.print_exc()
-        current_log += msg
-        current_story = [{"title": "Error", "content": f"Generation Failed: {str(e)}"}]
-        yield current_log, current_outline, current_plan, current_personas, current_story
+        error_msg = f"❌ 前端连接错误: {str(e)}"
+        yield error_msg, None, None, None, [], render_book_page([], 0)
+
 
 # ==========================================
-# Debug UI
+# 4. 前端 UI 布局 (Blocks)
 # ==========================================
-with gr.Blocks(title="Backend Service") as demo:
-    gr.Markdown("## 🔒 LongStory Backend API")
-    premise_in = gr.Textbox(label="Input Premise")
+with gr.Blocks(theme=gr.themes.Soft(), 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():
-        with gr.Column(scale=1):
-            log_box = gr.Textbox(label="Logs", lines=10)
-            outline_box = gr.JSON(label="Outline", visible=False)
-            plan_box = gr.JSON(label="Plan", visible=False)
-            persona_box = gr.HTML(label="Personas Card")
-            
-        with gr.Column(scale=2):
-            gr.Markdown("### 📖 故事预览 (E-Reader Mode)")
-            story_display = gr.HTML(label="Story Reader", min_height=600)
-            with gr.Row():
-                prev_btn = gr.Button("← 上一章")
-                next_btn = gr.Button("下一章 →")
-
-    story_json_connector = gr.JSON(visible=False, label="Story Data Connector")
+    # --- 顶部标题 ---
+    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>
+            <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(elem_classes=["control-panel"]):
+                gr.Markdown("### 💡 故事梗概 (Story Premise)", elem_id="input_title")
+                
+                premise_input = gr.Textbox(
+                    label="输入你的创意...", show_label=False,
+                    placeholder="例如：赛博朋克背景下，一个因旧型号义肢而被歧视的侦探...",
+                    lines=6, elem_classes=["input-box"]
+                )
+                
+                with gr.Group(elem_classes=["examples-table"]):
+                    gr.Examples(
+                        examples=[
+                            ["高中时互相看不顺眼的死对头，一个是高冷学霸，一个是调皮体育生。十年后的同学聚会上..."],
+                            ["天生'废灵根'的宗门弃徒，在被逐出师门当晚，意外捡到一个黑色小鼎..."]
+                        ],
+                        inputs=premise_input,
+                        label="⚡ 快速灵感"
+                    )
+                
+                submit_btn = gr.Button(
+                    "🚀 启动生成 (GENERATE)", 
+                    elem_classes=["generate-btn"]
+                )
+                
+                # 终端日志样式
+                gr.HTML("<div style='margin-top:20px;color:#888;font-size:12px;'>TERMINAL OUTPUT</div>")
+                log_output = gr.Textbox(
+                    label="System Log", lines=12, interactive=False, 
+                    elem_classes=["terminal-log"], show_label=False, value="> System Ready."
+                )
 
-    btn = gr.Button("Run Generation", variant="primary")
-    
-    btn.click(
-        fn=generate_novel, 
-        inputs=premise_in, 
-        outputs=[log_box, outline_box, plan_box, persona_box, story_json_connector], 
-        api_name="generate_novel"
+        # --- 右侧：内容展示区 ---
+        with gr.Column(scale=8):
+            with gr.Tabs(elem_classes=["tabs-container"]):
+                
+                # Tab 1: 电子书阅读器 (重点优化)
+                with gr.TabItem("📖 正文 (Reader)", id="tab-story"):
+                    # 用于显示渲染后的 HTML
+                    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"])
+
+                # Tab 2: 大纲
+                with gr.TabItem("🗺️ 大纲 (Outline)", id="tab-outline"):
+                    outline_output = gr.JSON(label=None, elem_classes=["json-panel"])
+                
+                # Tab 3: 规划
+                with gr.TabItem("📅 规划 (Plan)", id="tab-planning"):
+                    plan_output = gr.JSON(label=None, elem_classes=["json-panel"])
+                
+                # Tab 4: 人设 (HTML 卡片)
+                with gr.TabItem("👥 档案 (Personas)", id="tab-persona"):
+                    persona_output = gr.HTML(label=None, elem_classes=["html-panel"])
+
+    # ==========================================
+    # 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)
+        ],
+        concurrency_limit=1
     )
 
-    def update_reader(story_data, page):
-        return render_book_page(story_data, page)
-
-    story_json_connector.change(
-        fn=lambda x: (x, 0, render_book_page(x, 0)),
-        inputs=[story_json_connector],
-        outputs=[story_state, page_state, story_display]
+    # 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)
+
+    def go_next(story_data, current_page):
+        if not story_data: return current_page, render_book_page([], 0)
+        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]
     )
-
-    def go_prev(story, page):
-        new_page = max(0, page - 1)
-        return new_page, render_book_page(story, new_page)
-
-    def go_next(story, page):
-        if not story: return page, ""
-        new_page = min(len(story) - 1, page + 1)
-        return new_page, render_book_page(story, new_page)
-
-    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(default_concurrency_limit=1, max_size=5).launch()
+    demo.queue().launch()