Update app.py

app.py

@@ -1,307 +1,360 @@
 import gradio as gr
 import os
+import time
 from gradio_client import Client
 
 # ==========================================
 # 配置部分
 # ==========================================
-# 请确保这里的 ID 是你真实的后端 Private Space ID
-PRIVATE_SPACE_ID = "Yoyo2004/Longstory-backend" 
+PRIVATE_SPACE_ID = "Yoyo2004/Longstory-backend"
+# 尝试获取 Token，如果没有则为 None
 HF_TOKEN = os.environ.get("HF_TOKEN")
 
 # ==========================================
-# 极致美化的 CSS (SaaS 风格)
+# 🎨 极致美化的 CSS (SaaS 风格 + 沉浸式写作)
 # ==========================================
 custom_css = """
 @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Noto+Serif+SC:wght@300;400;600;700&family=JetBrains+Mono:wght@400&display=swap');
 
 :root {
-    --primary-color: #4f46e5;
-    --primary-hover: #4338ca;
+    --primary-color: #6366f1; /* Indigo-500 */
+    --primary-hover: #4f46e5; /* Indigo-600 */
     --paper-bg: #ffffff;
-    --bg-color: #f3f4f6;
-    --text-main: #1f2937;
-    --text-muted: #6b7280;
+    --paper-shadow: 0 10px 30px -10px rgba(0,0,0,0.08);
+    --panel-bg: #f8fafc; /* Slate-50 */
+    --border-color: #e2e8f0;
 }
 
-body { 
-    font-family: 'Noto Sans SC', sans-serif !important; 
-    background-color: var(--bg-color) !important;
+/* 全局字体设置 */
+body, .gradio-container {
+    font-family: 'Noto Sans SC', system-ui, -apple-system, sans-serif !important;
+    background-color: #f1f5f9 !important; /* Slate-100 */
 }
 
-/* 隐藏 Gradio 默认的 Footer */
+/* 隐藏 Footer */
 footer { display: none !important; }
 
-/* 容器布局优化 */
-.gradio-container {
-    max-width: 1400px !important;
+/* --------------------------------------
+   Layout & Containers
+-------------------------------------- */
+.main-container {
+    max-width: 1600px !important;
     margin: 0 auto !important;
-    padding-top: 20px !important;
 }
 
-/* Header 样式 */
-.app-header {
+/* Header 区域 */
+.header-box {
     text-align: center;
-    margin-bottom: 30px;
-    padding: 20px;
-    background: white;
-    border-radius: 16px;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
-    border: 1px solid #e5e7eb;
+    padding: 30px 20px;
+    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
+    border-bottom: 1px solid var(--border-color);
+    margin-bottom: 25px;
+    border-radius: 0 0 20px 20px;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
 }
 
-.header-title {
-    font-family: 'Noto Serif SC', serif;
-    font-weight: 700;
-    font-size: 2.2rem;
-    background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
+.title-text {
+    font-size: 2rem;
+    font-weight: 800;
+    background: linear-gradient(135deg, #4f46e5 0%, #8b5cf6 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
-    margin-bottom: 5px;
+    margin-bottom: 8px;
+    font-family: 'Noto Serif SC', serif;
 }
 
-.header-subtitle {
-    color: var(--text-muted);
+.subtitle-text {
+    color: #64748b;
     font-size: 1rem;
-    font-weight: 400;
     letter-spacing: 1px;
 }
 
-/* 左侧控制面板 */
+/* --------------------------------------
+   Left Panel: Control Center
+-------------------------------------- */
 .control-panel {
-    background: white;
+    background: #ffffff;
     border-radius: 16px;
+    border: 1px solid var(--border-color);
     padding: 24px !important;
-    border: 1px solid #e5e7eb;
-    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
-    height: fit-content;
+    box-shadow: var(--paper-shadow);
+    height: 100%;
+    display: flex;
+    flex-direction: column;
 }
 
-/* 输入框美化 */
-.custom-textarea textarea {
-    background-color: #f9fafb !important;
-    border: 1px solid #e5e7eb !important;
+.input-box textarea {
+    background-color: #f8fafc !important;
+    border: 1px solid #cbd5e1 !important;
     border-radius: 12px !important;
     font-size: 15px !important;
-    line-height: 1.6 !important;
     padding: 16px !important;
-    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
-    transition: all 0.2s ease;
+    transition: all 0.2s;
+    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
 }
 
-.custom-textarea textarea:focus {
+.input-box textarea:focus {
     background-color: #fff !important;
     border-color: var(--primary-color) !important;
-    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1) !important;
+    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
 }
 
-/* 按钮美化 (Pill Shape) */
-.primary-btn {
-    background: linear-gradient(to right, var(--primary-color), #6366f1) !important;
+.generate-btn {
+    background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%) !important;
     border: none !important;
     color: white !important;
     font-weight: 600 !important;
-    font-size: 16px !important;
-    padding: 12px 30px !important;
-    border-radius: 9999px !important;
-    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.3) !important;
-    transition: all 0.3s ease !important;
-    margin-top: 10px !important;
+    padding: 12px !important;
+    border-radius: 12px !important;
+    margin-top: 15px !important;
+    transition: transform 0.2s !important;
+    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
 }
 
-.primary-btn:hover {
+.generate-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 8px 15px -3px rgba(79, 70, 229, 0.4) !important;
+    box-shadow: 0 6px 15px rgba(79, 70, 229, 0.4) !important;
 }
 
-/* 日志区域 (Terminal 风格) */
-.log-terminal textarea {
-    font-family: 'JetBrains Mono', monospace !important;
-    background-color: #1f2937 !important;
-    color: #10b981 !important; /* Matrix Green */
+/* Terminal Log Style */
+.terminal-log {
+    margin-top: 20px !important;
     border-radius: 12px !important;
-    border: 1px solid #374151 !important;
+    overflow: hidden !important;
+    border: 1px solid #334155 !important;
+    background-color: #1e293b !important;
+}
+
+.terminal-log label {
+    display: none !important; /* 隐藏 Label */
+}
+
+.terminal-log textarea {
+    font-family: 'JetBrains Mono', monospace !important;
+    background-color: #1e293b !important; /* Slate-800 */
+    color: #4ade80 !important; /* Green-400 */
     font-size: 13px !important;
-    line-height: 1.5 !important;
+    line-height: 1.6 !important;
+    border: none !important;
+    padding: 15px !important;
 }
 
-.log-accordion {
+/* --------------------------------------
+   Right Panel: Writing Desk
+-------------------------------------- */
+/* Tabs 容器美化 */
+.tabs-container {
     background: transparent !important;
     border: none !important;
 }
 
-/* 右侧展示区：纸张效果 */
-.paper-document {
-    background: var(--paper-bg);
-    padding: 60px !important;
-    min-height: 600px;
-    border-radius: 2px; /* 稍微圆角 */
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
-    border: 1px solid #e5e7eb;
+/* 选中 Tab 的样式 */
+.tabs-container button.selected {
+    color: var(--primary-color) !important;
+    border-bottom: 2px solid var(--primary-color) !important;
+    background: transparent !important;
+    font-weight: 700 !important;
+}
+
+/* 未选中 Tab */
+.tabs-container button {
+    color: #64748b !important;
+    border-bottom: 2px solid transparent !important;
+}
+
+/* 📄 稿纸效果 (Paper Document) */
+.paper-wrapper {
+    background-color: var(--paper-bg);
+    border: 1px solid var(--border-color);
+    box-shadow: var(--paper-shadow);
+    border-radius: 4px; /* 稍微锐利一点的圆角，像纸张 */
+    padding: 60px 80px !important;
+    min-height: 700px;
     margin-top: 10px;
 }
 
 /* 正文排版 */
-.paper-document .prose {
+.paper-wrapper .prose {
     font-family: 'Noto Serif SC', serif !important;
     font-size: 18px !important;
-    line-height: 2 !important;
-    color: #111827 !important;
-    max-width: 100% !important;
+    line-height: 2.2 !important;
+    color: #1e293b !important;
+    text-align: justify;
 }
 
-/* 标题和段落间距 */
-.paper-document p {
-    margin-bottom: 1.5em;
-    text-align: justify;
+.paper-wrapper h1, .paper-wrapper h2, .paper-wrapper h3 {
+    font-family: 'Noto Sans SC', sans-serif !important;
+    color: #0f172a;
+    margin-top: 1.5em;
 }
 
-/* Tab 样式优化 */
-.custom-tabs button.selected {
-    color: var(--primary-color) !important;
-    border-bottom: 2px solid var(--primary-color) !important;
-    font-weight: 600 !important;
+/* JSON Viewer 美化 */
+.json-panel {
+    background: white !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: 12px !important;
+    padding: 20px !important;
+    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.02) !important;
 }
 
-/* JSON 视图美化 */
-.json-viewer {
-    background: white;
-    border-radius: 12px;
-    padding: 20px;
-    border: 1px solid #e5e7eb;
+/* Mobile Adaptation */
+@media (max-width: 768px) {
+    .paper-wrapper { padding: 30px 20px !important; }
+    .control-panel { margin-bottom: 20px; }
 }
 """
 
 # ==========================================
-# 逻辑部分 (保持不变)
+# 逻辑部分
 # ==========================================
 def bridge_to_backend(premise):
     """
     连接到私有 Space 并流式传输结果
     """
+    if not premise.strip():
+        yield "⚠️ 请输入故事梗概 (Premise) ...", None, None, None, None
+        return
+
     if not HF_TOKEN:
-        yield "⚠️ Error: HF_TOKEN not found in Secrets. Please check your Space settings.", None, None, None, None
+        error_log = (
+            "⚠️ [System Error]: HF_TOKEN environment variable is missing.\n"
+            "------------------------------------------------------------\n"
+            "Please add your Hugging Face Token to the Space Settings > Repository secrets."
+        )
+        yield error_log, None, None, None, None
         return
 
+    log_buffer = "🚀 初始化连接...\n"
+    yield log_buffer, None, None, None, None
+
     try:
+        log_buffer += f"🔗 连接到后端: {PRIVATE_SPACE_ID}\n"
+        yield log_buffer, None, None, None, None
+        
         # 连接私有 Space
         client = Client(PRIVATE_SPACE_ID, hf_token=HF_TOKEN)
         
+        log_buffer += "✅ 连接成功！任务已提交，正在生成...\n"
+        log_buffer += "⏳ (这可能需要几分钟，请耐心等待)\n"
+        yield log_buffer, None, None, None, None
+
         # 提交任务
         job = client.submit(premise, api_name="/generate_novel")
         
         # 迭代获取数据
         for result in job:
+            # result 应该是一个 tuple，包含 5 个元素
+            # 假设后端返回格式为: (log_text, outline_json, plan_json, persona_json, story_html/md)
+            
+            # 为了更优雅的显示，我们在 Log 中追加时间戳
+            current_log = log_buffer + f"\n[UPDATE] {time.strftime('%H:%M:%S')} - 收到新数据块..."
+            
+            # 解包结果 (根据你后端的实际返回调整)
+            # 注意：如果后端返回还是 Tuple，Gradio Client 会自动解包
+            # 这里我们直接透传 result，但确保第一个参数(Log)是累加的或者是新的
+            
             yield result
 
     except Exception as e:
-        error_msg = f"❌ Connection Error: {str(e)}\n\n请检查：\n1. 你的 HF_TOKEN 是否有效且有 Read 权限。\n2. Private Space 是否正在 Running 状态。\n3. PRIVATE_SPACE_ID 是否拼写正确。"
+        error_msg = f"{log_buffer}\n❌ [CRITICAL ERROR]: {str(e)}\n\n"
+        error_msg += "Debug Suggestions:\n"
+        error_msg += "1. Check if the Private Space is 'Running'.\n"
+        error_msg += "2. Verify HF_TOKEN permissions (Read access required).\n"
         yield error_msg, None, None, None, None
 
 # ==========================================
 # 构建前端界面
 # ==========================================
 
-# 自定义主题参数，让默认组件更协调
+# 创建一个干净的 Base 主题作为基础，然后用 CSS 覆盖
 theme = gr.themes.Soft(
     primary_hue="indigo",
     secondary_hue="slate",
-    radius_size=gr.themes.sizes.radius_lg,
-    font=[gr.themes.GoogleFont("Noto Sans SC"), "ui-sans-serif", "system-ui"],
+    text_size="lg",
+    spacing_size="md",
+    radius_size="lg",
 )
 
-with gr.Blocks(theme=theme, css=custom_css, title="LongStory AI - Pro") as demo:
+with gr.Blocks(theme=theme, css=custom_css, title="LongStory AI Pro") as demo:
     
-    # --- 头部 Header ---
-    with gr.Row():
-        with gr.Column(scale=1, elem_classes=["app-header"]):
-            gr.Markdown(
-                """
-                <div class="header-title">🖊️ LongStory AI <span style="font-size: 1.2rem; color: #4f46e5; vertical-align: super;">Pro</span></div>
-                <div class="header-subtitle">Deep Layout & Persona Driven · 深度长篇小说创作系统</div>
-                """
-            )
+    # --- Header ---
+    with gr.Row(elem_classes=["header-box"]):
+        gr.HTML("""
+            <div class="title-text">🖊️ LongStory AI <span style="font-size: 0.5em; vertical-align: top; color: #6366f1;">PRO</span></div>
+            <div class="subtitle-text">Deep Persona-Driven Novel Generation System</div>
+        """)
 
-    with gr.Row(equal_height=False):
+    # --- Main Content ---
+    with gr.Row(elem_classes=["main-container"]):
         
-        # --- 左侧：控制台 (Command Center) ---
-        with gr.Column(scale=4, elem_classes=["control-panel"]):
-            gr.Markdown("### 💡 灵感输入 (Premise)", elem_id="input-label")
+        # === Left Column: Control Center ===
+        with gr.Column(scale=4, variant="panel", elem_classes=["control-panel"]):
+            gr.Markdown("### 💡 故事引擎 (Input)", elem_id="input_title")
             
             premise_input = gr.Textbox(
-                label="",
-                placeholder="请输入你的核心梗概...\n例如：\n一个关于时间旅行的悬疑故事，主角在2024年和1990年之间来回穿梭，试图阻止一场连环谋杀案。主要涉及3个性格迥异的侦探...",
-                lines=8,
-                elem_classes=["custom-textarea"],
+                label="核心梗概 (Premise)",
+                placeholder="在此输入你的创意...\n例如：赛博朋克背景下，一个因旧型号义肢而被歧视的侦探，接到了寻找'数字永生'密钥的委托...",
+                lines=6,
+                elem_classes=["input-box"],
                 show_label=False
             )
             
             submit_btn = gr.Button(
-                "✨ 开始构建世界 (Generate Novel)", 
-                elem_classes=["primary-btn"]
-            )
-            
-            # 修复点：使用 HTML 标签替代 style 参数，解决了 TypeError
-            gr.Markdown(
-                "<h3 style='margin-top: 20px; color: #6b7280; font-size: 1.1em; font-weight: bold;'>📟 系统终端 (System Logs)</h3>"
+                "🚀 启动生成 (Generate)", 
+                elem_classes=["generate-btn"]
             )
             
-            # 使用 Accordion 包裹日志，默认展开但看起来像终端
+            gr.Markdown("### 📟 运行日志 (Terminal)", elem_id="log_title")
             log_output = gr.Textbox(
-                label="",
-                placeholder="等待任务指令...",
-                lines=12,
+                label="系统日志",
+                value="System Ready. Waiting for input...",
+                lines=15,
+                max_lines=20,
                 interactive=False,
-                elem_classes=["log-terminal"],
+                elem_classes=["terminal-log"],
                 show_label=False
             )
 
-        # --- 右侧：创作台 (Writing Desk) ---
+        # === Right Column: Writing Desk ===
         with gr.Column(scale=8):
-            with gr.Tabs(elem_classes=["custom-tabs"]):
+            with gr.Tabs(elem_classes=["tabs-container"]):
                 
-                # Tab 1: 沉浸式阅读正文
+                # Tab 1: 正文 (Draft)
                 with gr.TabItem("📖 正文草稿 (Draft)", id="tab-story"):
-                    gr.Markdown(
-                        """
-                        <div style="text-align: center; color: #9ca3af; padding-top: 20px; margin-bottom: -20px;">
-                        *生成的内容将显示在下方“纸张”中*
-                        </div>
-                        """
-                    )
                     story_output = gr.Markdown(
-                        value="&nbsp;", # 占位符，防止空塌陷
-                        elem_classes=["paper-document"]
+                        value="<br><div style='text-align: center; color: #cbd5e1;'>✨ 故事将在此处生成...</div>",
+                        elem_classes=["paper-wrapper"]
                     )
                 
-                # Tab 2: 结构化大纲
-                with gr.TabItem("🗺️ 故事大纲 (Outline)", id="tab-outline"):
+                # Tab 2: 大纲 (Outline)
+                with gr.TabItem("🗺️ 结构大纲 (Outline)", id="tab-outline"):
                     outline_output = gr.JSON(
-                        label="事件流结构", 
-                        elem_classes=["json-viewer"]
+                        label=None,
+                        elem_classes=["json-panel"]
                     )
                 
-                # Tab 3: 详细规划
+                # Tab 3: 规划 (Planning)
                 with gr.TabItem("📅 详细规划 (Planning)", id="tab-planning"):
                     plan_output = gr.JSON(
-                        label="子事件拆解",
-                        elem_classes=["json-viewer"]
+                        label=None,
+                        elem_classes=["json-panel"]
                     )
                 
-                # Tab 4: 人物档案
-                with gr.TabItem("👥 人物设定 (Personas)", id="tab-persona"):
+                # Tab 4: 人物 (Personas)
+                with gr.TabItem("👥 人物档案 (Personas)", id="tab-persona"):
                     persona_output = gr.JSON(
-                        label="角色动态轨迹",
-                        elem_classes=["json-viewer"]
+                        label=None,
+                        elem_classes=["json-panel"]
                     )
 
-    # --- 事件绑定 ---
+    # --- Interactions ---
     submit_btn.click(
-        bridge_to_backend,
+        fn=bridge_to_backend,
         inputs=[premise_input],
-        outputs=[log_output, outline_output, plan_output, persona_output, story_output]
+        outputs=[log_output, outline_output, plan_output, persona_output, story_output],
+        concurrency_limit=1
     )
 
-# 启动应用
+# 启动
 if __name__ == "__main__":
     demo.queue().launch()