Update app.py

app.py

@@ -249,4 +249,110 @@ body {
 
 # 创建Gradio界面
 with gr.Blocks(css=custom_css) as demo:
-    with gr.Column(elem
+    with gr.Column(elem_classes="container"):
+        with gr.Column(elem_classes="header-container"):
+            gr.HTML("""
+            <div>
+                <span class="logo-pulse">🧠</span>
+                <h1>MiniMind AI</h1>
+                <p>强大的自然语言处理模型，为您提供智能对话体验</p>
+            </div>
+            """)
+        
+        with gr.Column(elem_classes="main-card"):
+            with gr.Row():
+                with gr.Column(scale=1, elem_classes="input-area"):
+                    input_text = gr.Textbox(
+                        label="您的问题",
+                        placeholder="请在此输入您的问题或指令...",
+                        lines=5,
+                        elem_id="input-box"
+                    )
+                    
+                    with gr.Row():
+                        submit_btn = gr.Button("🚀 生成回答", elem_classes="button-primary")
+                        clear_btn = gr.Button("🗑️ 清除历史", elem_classes="button-secondary")
+                    
+                    with gr.Accordion("⚙️ 高级参数设置", open=False, elem_classes="accordion"):
+                        max_length = gr.Slider(
+                            minimum=10, maximum=2048, value=512, step=1,
+                            label="最大生成长度",
+                            info="控制生成文本的最大长度",
+                            elem_classes="slider-container"
+                        )
+                        temperature = gr.Slider(
+                            minimum=0.1, maximum=1.5, value=0.85, step=0.01,
+                            label="温度系数",
+                            info="较高的值会使输出更加随机，较低的值使输出更加确定",
+                            elem_classes="slider-container"
+                        )
+                        top_p = gr.Slider(
+                            minimum=0.1, maximum=1.0, value=0.85, step=0.01,
+                            label="Top-p 采样",
+                            info="控制词汇选择的多样性",
+                            elem_classes="slider-container"
+                        )
+                        history_cnt = gr.Slider(
+                            minimum=0, maximum=10, value=0, step=2,
+                            label="历史对话轮数",
+                            info="考虑多少轮历史对话作为上下文",
+                            elem_classes="slider-container"
+                        )
+                
+                with gr.Column(scale=1, elem_classes="output-area"):
+                    output_text = gr.Textbox(
+                        label="AI 回答",
+                        lines=25,
+                        elem_id="output-box"
+                    )
+                    clear_output = gr.Textbox(
+                        label="状态",
+                        value="系统就绪，等待您的输入...",
+                        elem_classes="status-box"
+                    )
+        
+        with gr.Column(elem_classes="footer"):
+            gr.HTML("""
+            <div>
+                <p>MiniMind 模型演示 | 基于先进的自然语言处理技术</p>
+                <p>运行环境：<span id="device-info"></span></p>
+            </div>
+            <script>
+                document.getElementById('device-info').innerText = 
+                    navigator.userAgent.includes('Mobile') ? '移动设备' : '桌面设备';
+                
+                // 添加输入动画效果
+                document.addEventListener('DOMContentLoaded', function() {
+                    const inputBox = document.getElementById('input-box');
+                    const outputBox = document.getElementById('output-box');
+                    
+                    if(inputBox) {
+                        inputBox.addEventListener('focus', function() {
+                            this.style.transform = 'translateY(-2px)';
+                            this.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
+                        });
+                        
+                        inputBox.addEventListener('blur', function() {
+                            this.style.transform = 'translateY(0)';
+                            this.style.boxShadow = '0 1px 3px rgba(0, 0, 0, 0.1)';
+                        });
+                    }
+                });
+            </script>
+            """)
+    
+    # 设置事件
+    submit_btn.click(
+        fn=generate_text,
+        inputs=[input_text, max_length, temperature, top_p, history_cnt],
+        outputs=output_text
+    )
+    
+    clear_btn.click(
+        fn=clear_history,
+        inputs=[],
+        outputs=clear_output
+    )
+
+# 启动应用
+demo.launch()