Update app.py

app.py

@@ -1,166 +1,304 @@
-import os
 import gradio as gr
+import os
 from gradio_client import Client
 
+# ==========================================
+# 配置部分
+# ==========================================
+# 请确保这里的 ID 是你真实的后端 Private Space ID
 PRIVATE_SPACE_ID = "Yoyo2004/Longstory-backend" 
-
 HF_TOKEN = os.environ.get("HF_TOKEN")
 
+# ==========================================
+# 极致美化的 CSS (SaaS 风格)
+# ==========================================
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;700&family=Noto+Serif+SC:wght@400;700&display=swap');
+@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');
 
-body { font-family: 'Noto Sans SC', sans-serif !important; }
+:root {
+    --primary-color: #4f46e5;
+    --primary-hover: #4338ca;
+    --paper-bg: #ffffff;
+    --bg-color: #f3f4f6;
+    --text-main: #1f2937;
+    --text-muted: #6b7280;
+}
 
-.container { max-width: 1200px; margin: 0 auto; }
+body { 
+    font-family: 'Noto Sans SC', sans-serif !important; 
+    background-color: var(--bg-color) !important;
+}
+
+/* 隐藏 Gradio 默认的 Footer */
+footer { display: none !important; }
+
+/* 容器布局优化 */
+.gradio-container {
+    max-width: 1400px !important;
+    margin: 0 auto !important;
+    padding-top: 20px !important;
+}
+
+/* Header 样式 */
+.app-header {
+    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;
+}
 
-/* 标题样式 */
 .header-title {
     font-family: 'Noto Serif SC', serif;
     font-weight: 700;
-    font-size: 2.5rem;
-    color: #2d3436;
-    margin-bottom: 0.5rem;
+    font-size: 2.2rem;
+    background: linear-gradient(135deg, #4f46e5 0%, #818cf8 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    margin-bottom: 5px;
 }
+
 .header-subtitle {
-    color: #636e72;
-    font-size: 1.1rem;
-    margin-bottom: 2rem;
+    color: var(--text-muted);
+    font-size: 1rem;
+    font-weight: 400;
+    letter-spacing: 1px;
+}
+
+/* 左侧控制面板 */
+.control-panel {
+    background: white;
+    border-radius: 16px;
+    padding: 24px !important;
+    border: 1px solid #e5e7eb;
+    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
+    height: fit-content;
 }
 
 /* 输入框美化 */
-textarea {
-    border: 2px solid #dfe6e9 !important;
+.custom-textarea textarea {
+    background-color: #f9fafb !important;
+    border: 1px solid #e5e7eb !important;
     border-radius: 12px !important;
-    transition: all 0.3s ease;
-    font-size: 16px !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;
 }
-textarea:focus {
-    border-color: #74b9ff !important;
-    box-shadow: 0 0 10px rgba(116, 185, 255, 0.2) !important;
+
+.custom-textarea 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;
 }
 
-/* 按钮美化 */
-#generate-btn {
-    background: linear-gradient(135deg, #6c5ce7, #a29bfe) !important;
-    border: none;
-    color: white;
-    font-weight: bold;
-    font-size: 18px;
-    padding: 12px 24px;
-    border-radius: 30px;
-    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.4);
-    transition: transform 0.2s;
+/* 按钮美化 (Pill Shape) */
+.primary-btn {
+    background: linear-gradient(to right, var(--primary-color), #6366f1) !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;
 }
-#generate-btn:hover {
+
+.primary-btn:hover {
     transform: translateY(-2px);
-    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.6);
+    box-shadow: 0 8px 15px -3px rgba(79, 70, 229, 0.4) !important;
 }
 
-/* 输出区域卡片化 */
-.output-card {
-    background: white;
-    border: 1px solid #f1f2f6;
-    border-radius: 16px;
-    padding: 20px;
-    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
+/* 日志区域 (Terminal 风格) */
+.log-terminal textarea {
+    font-family: 'JetBrains Mono', monospace !important;
+    background-color: #1f2937 !important;
+    color: #10b981 !important; /* Matrix Green */
+    border-radius: 12px !important;
+    border: 1px solid #374151 !important;
+    font-size: 13px !important;
+    line-height: 1.5 !important;
 }
 
-/* 小说正文阅读模式 */
-.story-content {
-    font-family: 'Noto Serif SC', serif;
-    line-height: 1.8;
-    font-size: 18px;
-    color: #2d3436;
-    background-color: #fafafa;
-    padding: 40px;
-    border-radius: 8px;
-    border-left: 5px solid #6c5ce7;
+.log-accordion {
+    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;
+    margin-top: 10px;
+}
+
+/* 正文排版 */
+.paper-document .prose {
+    font-family: 'Noto Serif SC', serif !important;
+    font-size: 18px !important;
+    line-height: 2 !important;
+    color: #111827 !important;
+    max-width: 100% !important;
+}
+
+/* 标题和段落间距 */
+.paper-document p {
+    margin-bottom: 1.5em;
+    text-align: justify;
+}
+
+/* Tab 样式优化 */
+.custom-tabs button.selected {
+    color: var(--primary-color) !important;
+    border-bottom: 2px solid var(--primary-color) !important;
+    font-weight: 600 !important;
+}
+
+/* JSON 视图美化 */
+.json-viewer {
+    background: white;
+    border-radius: 12px;
+    padding: 20px;
+    border: 1px solid #e5e7eb;
 }
 """
 
 # ==========================================
-# 客户端连接逻辑
+# 逻辑部分 (保持不变)
 # ==========================================
 def bridge_to_backend(premise):
     """
     连接到私有 Space 并流式传输结果
     """
     if not HF_TOKEN:
-        yield "⚠️ Error: HF_TOKEN not found in Secrets.", None, None, None, None
+        yield "⚠️ Error: HF_TOKEN not found in Secrets. Please check your Space settings.", None, None, None, None
         return
 
     try:
         # 连接私有 Space
         client = Client(PRIVATE_SPACE_ID, hf_token=HF_TOKEN)
         
-        # 提交任务 (使用 generate_novel 函数)
-        # 注意：这里的 fn_index 或 api_name 取决于后端 Gradio 的自动命名，
-        # 通常如果后端只有一个函数，可以直接用 submit
+        # 提交任务
         job = client.submit(premise, api_name="/generate_novel")
         
-        # 迭代获取生成器产生的数据
+        # 迭代获取数据
         for result in job:
-            # result 是一个元组，对应后端的 outputs
-            # (log, outline, plan, persona, story)
             yield result
 
     except Exception as e:
-        yield f"❌ Connection Error: {str(e)}", None, None, None, None
-
+        error_msg = f"❌ Connection Error: {str(e)}\n\n请检查：\n1. 你的 HF_TOKEN 是否有效且有 Read 权限。\n2. Private Space 是否正在 Running 状态。\n3. PRIVATE_SPACE_ID 是否拼写正确。"
+        yield error_msg, None, None, None, None
 
 # ==========================================
 # 构建前端界面
 # ==========================================
-with gr.Blocks(theme=gr.themes.Soft(), css=custom_css, title="LongStory AI") as demo:
-    
-    with gr.Row(elem_classes=["container"]):
-        with gr.Column(scale=1):
-            gr.Markdown("# 🖊️ LongStory AI", elem_classes=["header-title"])
-            gr.Markdown("智能长篇小说辅助创作系统 · Deep Layout & Persona Driven", elem_classes=["header-subtitle"])
+
+# 自定义主题参数，让默认组件更协调
+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"],
+)
+
+with gr.Blocks(theme=theme, css=custom_css, title="LongStory AI - Pro") as demo:
     
-    with gr.Row(elem_classes=["container"]):
-        # 左侧控制栏
-        with gr.Column(scale=1, min_width=300):
-            with gr.Group():
-                premise_input = gr.Textbox(
-                    label="💡 小说核心梗概 (Premise)", 
-                    placeholder="例如：构造一个长篇青春校园小说, 事件覆盖从刚刚入学报道到高考之前...",
-                    lines=6
-                )
-                submit_btn = gr.Button("✨ 开始创作 (Generate)", elem_id="generate-btn")
+    # --- 头部 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>
+                """
+            )
+
+    with gr.Row(equal_height=False):
+        
+        # --- 左侧：控制台 (Command Center) ---
+        with gr.Column(scale=4, elem_classes=["control-panel"]):
+            gr.Markdown("### 💡 灵感输入 (Premise)", elem_id="input-label")
+            
+            premise_input = gr.Textbox(
+                label="",
+                placeholder="请输入你的核心梗概...\n例如：\n一个关于时间旅行的悬疑故事，主角在2024年和1990年之间来回穿梭，试图阻���一场连环谋杀案。主要涉及3个性格迥异的侦探...",
+                lines=8,
+                elem_classes=["custom-textarea"],
+                show_label=False
+            )
+            
+            submit_btn = gr.Button(
+                "✨ 开始构建世界 (Generate Novel)", 
+                elem_classes=["primary-btn"]
+            )
             
-            # 日志区
-            with gr.Accordion("构建日志 (System Logs)", open=True):
-                log_output = gr.Textbox(label="实时进度", lines=10, interactive=False, show_label=False)
-
-        # 右侧展示栏
-        with gr.Column(scale=2, min_width=500):
-            with gr.Tabs():
-                # Tab 1: 最终正文
-                with gr.TabItem("📖 正文草稿 (Draft)"):
+            gr.Markdown("### 📟 系统终端 (System Logs)", style="margin-top: 20px; color: #6b7280;")
+            
+            # 使用 Accordion 包裹日志，默认展开但看起来像终端
+            log_output = gr.Textbox(
+                label="",
+                placeholder="等待任务指令...",
+                lines=12,
+                interactive=False,
+                elem_classes=["log-terminal"],
+                show_label=False
+            )
+
+        # --- 右侧：创作台 (Writing Desk) ---
+        with gr.Column(scale=8):
+            with gr.Tabs(elem_classes=["custom-tabs"]):
+                
+                # Tab 1: 沉浸式阅读正文
+                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="等待生成...", 
-                        elem_classes=["story-content"]
+                        value="&nbsp;", # 占位符，防止空塌陷
+                        elem_classes=["paper-document"]
                     )
                 
-                # Tab 2: 大纲
-                with gr.TabItem("🗺️ 故事大纲 (Outline)"):
-                    outline_output = gr.JSON(label="事件流 (Event Flow)")
+                # Tab 2: 结构化大纲
+                with gr.TabItem("🗺️ 故事大纲 (Outline)", id="tab-outline"):
+                    outline_output = gr.JSON(
+                        label="事件流结构", 
+                        elem_classes=["json-viewer"]
+                    )
                 
-                # Tab 3: 细纲
-                with gr.TabItem("📅 详细规划 (Planning)"):
-                    plan_output = gr.JSON(label="子事件 (Sub-events)")
+                # Tab 3: 详细规划
+                with gr.TabItem("📅 详细规划 (Planning)", id="tab-planning"):
+                    plan_output = gr.JSON(
+                        label="子事件拆解",
+                        elem_classes=["json-viewer"]
+                    )
                 
-                # Tab 4: 人物
-                with gr.TabItem("👥 人物设定 (Personas)"):
-                    persona_output = gr.JSON(label="人物弧光 (Character Arc)")
+                # Tab 4: 人物档案
+                with gr.TabItem("👥 人物设定 (Personas)", id="tab-persona"):
+                    persona_output = gr.JSON(
+                        label="角色动态轨迹",
+                        elem_classes=["json-viewer"]
+                    )
 
-    # 事件绑定
+    # --- 事件绑定 ---
     submit_btn.click(
         bridge_to_backend,
         inputs=[premise_input],
         outputs=[log_output, outline_output, plan_output, persona_output, story_output]
     )
 
+# 启动应用
 if __name__ == "__main__":
     demo.queue().launch()