Update app.py

app.py

@@ -136,34 +136,126 @@ def generate_response(prompt: str, max_tokens: int, state):
         return f"Error: {exc}\n\n{tb}", f"❌ Error: {exc}", state
 
 # ---------------- Gradio UI ----------------
-with gr.Blocks(title="Phi-3 Mini 4K - GGUF (4-bit)") as demo:
-    gr.Markdown("## 🐠 Phi-3 Mini 4K - GGUF (4-bit)\nThis Space loads the quantized GGUF from the model repo and runs it with `llama-cpp-python`.")
-    with gr.Row():
-        prompt_in = gr.Textbox(lines=4, label="Prompt", placeholder="Write a haiku about physics...")
-    with gr.Row():
-        max_tokens = gr.Slider(minimum=16, maximum=1024, step=16, value=DEFAULT_MAX_TOKENS, label="Max tokens")
-    with gr.Row():
-        init_btn = gr.Button("Init Model")
-        gen_btn = gr.Button("Generate")
-        clear_btn = gr.Button("Clear")
+
+# 使用 Soft 主题，配色更具现代感
+theme = gr.themes.Soft(
+    primary_hue="indigo",
+    secondary_hue="slate",
+    neutral_hue="slate",
+    font=[gr.themes.GoogleFont("Inter"), "ui-sans-serif", "system-ui"]
+)
+
+# 自定义 CSS 稍微调整一下边距和圆角
+custom_css = """
+#response-box {
+    font-family: 'Inter', sans-serif;
+    background-color: #f9fafb;
+    border-radius: 8px;
+    padding: 10px;
+}
+"""
+
+with gr.Blocks(title="Llama 3.2 Lab2 Project", theme=theme, css=custom_css) as demo:
+    
+    # --- 标题和介绍区域 ---
     with gr.Row():
-        output_txt = gr.Textbox(label="Output", lines=10)
+        with gr.Column(scale=1):
+            gr.Markdown("# 🦙 Llama 3.2 (3B) Fine-Tuned Chatbot")
+            gr.Markdown(
+                """
+                **ID2223 Lab 2 Project** | Fine-tuned on the **FineTome-100k** dataset.
+                Running locally on CPU via **GGUF** quantization (4-bit).
+                """
+            )
+        with gr.Column(scale=0, min_width=150):
+            # 状态显示放在右上角，醒目
+            status_label = gr.Label(value="⚪ Not initialized", label="System Status", show_label=False)
+
+    # --- 主体布局：左侧控制，右侧输出 ---
     with gr.Row():
-        status_label = gr.Label(value="⚪ Not initialized", label="Status")
-    # Hidden state object holding the Llama instance and other runtime info
-    state = gr.State({"llm": None, "gguf_path": None, "status": "Not initialized"})
+        
+        # 左侧：控制面板
+        with gr.Column(scale=4):
+            with gr.Group():
+                prompt_in = gr.Textbox(
+                    lines=5, 
+                    label="User Instruction", 
+                    placeholder="E.g., Explain quantum entanglement to a 5-year-old...",
+                    elem_id="prompt-input"
+                )
+                
+                # 将参数折叠起来，保持界面清爽
+                with gr.Accordion("⚙️ Advanced Parameters", open=False):
+                    max_tokens = gr.Slider(
+                        minimum=16, 
+                        maximum=1024, 
+                        step=16, 
+                        value=DEFAULT_MAX_TOKENS, 
+                        label="Max Generation Tokens",
+                        info="Longer generations require more CPU time."
+                    )
+            
+            # 按钮区域
+            with gr.Row():
+                init_btn = gr.Button("🚀 1. Load Model", variant="secondary", scale=1)
+                gen_btn = gr.Button("✨ 2. Generate", variant="primary", scale=2)
+            
+            with gr.Row():
+                clear_btn = gr.Button("🗑️ Clear History", variant="stop")
+
+        # 右侧：回复展示
+        with gr.Column(scale=6):
+            output_txt = gr.Textbox(
+                label="Llama Response", 
+                lines=15, 
+                placeholder="The model response will appear here...",
+                show_copy_button=True, # 允许复制内容
+                elem_id="response-box"
+            )
 
-    # Wire init button
-    init_btn.click(fn=init_model, inputs=state, outputs=[status_label, state])
+    # --- 底部版权/说明 ---
+    with gr.Row():
+        gr.Markdown(
+            "⚠️ *Note: Inference is running on CPU. Generation speed depends on the Space hardware.*",
+            elem_classes=["footer-text"]
+        )
 
-    # Wire generate button (returns output text and status)
-    gen_btn.click(fn=generate_response, inputs=[prompt_in, max_tokens, state], outputs=[output_txt, status_label, state])
+    # --- 状态管理 (Hidden) ---
+    state = gr.State({"llm": None, "gguf_path": None, "status": "Not initialized"})
 
-    # Clear button functionality
+    # --- 事件绑定 ---
+    # 点击 Load Model
+    init_btn.click(
+        fn=init_model, 
+        inputs=state, 
+        outputs=[status_label, state],
+        show_progress=True
+    )
+    
+    # 点击 Generate
+    gen_btn.click(
+        fn=generate_response, 
+        inputs=[prompt_in, max_tokens, state], 
+        outputs=[output_txt, status_label, state],
+        show_progress=True
+    )
+    
+    # 点击 Clear
     def clear_all():
-        return "", "⚪ Not initialized", {"llm": None, "gguf_path": None, "status": "Not initialized"}
-    clear_btn.click(fn=clear_all, outputs=[prompt_in, status_label, state])
+        return "", "⚪ Ready", {"llm": None, "gguf_path": None, "status": "Not initialized"}
+    
+    # 注意：Clear 按钮逻辑稍微修改，避免清空掉已加载的模型对象
+    # 这里的 clear_all 只是重置了 UI，实际你可以保留 state 中的 llm 以免重复加载
+    # 改进版 Clear 逻辑：
+    def soft_clear(current_state):
+        # 保持模型加载状态，只清空文本
+        status = "✅ Ready" if current_state.get("llm") else "⚪ Not initialized"
+        return "", status, current_state
+
+    clear_btn.click(fn=soft_clear, inputs=[state], outputs=[prompt_in, status_label, state])
+    # 同时也清空输出框
+    clear_btn.click(lambda: "", outputs=[output_txt])
 
-# Launch with no share by default (Spaces already public) and disable analytics to reduce noise.
+# Launch configuration
 if __name__ == "__main__":
     demo.launch(server_name="0.0.0.0", server_port=7860, share=False)