Enhancement: Add file upload, localize to Chinese, improve UI

.gitattributes

@@ -0,0 +1,35 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+*.saved_model filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

README.md

@@ -14,15 +14,18 @@ short_description: 城市脉动智能体 - 智慧交通与出行优化 SaaS
 ## 项目简介
 **Urban Flow Agent** 是一个专注于智慧交通与城市出行优化的 SaaS 平台。它利用 AI 智能体技术，结合实时数据分析，为城市管理者和物流运营商提供交通流量监控、拥堵预警、信号灯优化建议以及突发事件应急响应方案。
 
+本项目已实现**逻辑闭环**，支持**数据上传 -> 实时分析 -> AI 决策 -> 报告生成**的全流程操作。
+
 ## 核心功能
-1.  **交通全景雷达 (Traffic Radar)**: 实时监控城市交通流量、平均车速和拥堵指数（通过 ECharts 可视化展示）。
-2.  **智能事件侦测 (Incident Scout)**: 利用 AI 分析模拟的交通数据，识别潜在的交通事故或异常拥堵。
-3.  **信号优化专家 (Signal Optima)**: 基于当前流量，由 AI 智能体生成交通信号灯配时优化方案。
-4.  **出行智囊团 (Mobility AI)**: 集成 SiliconFlow 大模型，提供自然语言交互的交通咨询和决策支持。
+1.  **交通全景雷达 (Traffic Radar)**: 实时监控城市交通流量、平均车速和拥堵指数（ECharts 可视化）。
+2.  **数据闭环管理 (Data Loop)**: 支持上传本地交通数据文件（JSON/CSV），系统自动解析并更新大屏指标，实现从数据源到决策端的无缝衔接。
+3.  **智能事件侦测 (Incident Scout)**: 利用 AI 分析交通数据，识别潜在的交通事故或异常拥堵风险。
+4.  **信号优化专家 (Signal Optima)**: 基于当前流量，由 AI 智能体生成具体的交通信号灯配时优化方案（精确到秒）。
+5.  **出行智囊团 (Mobility AI)**: 集成 SiliconFlow 大模型，提供自然语言交互的交通咨询，支持中文对话。
 
 ## 技术栈
-- **后端**: Python Flask
-- **前端**: Vue.js 3 + Tailwind CSS + ECharts
+- **后端**: Python Flask (支持文件上传、CORS、Mock 模式)
+- **前端**: Vue.js 3 + Tailwind CSS + ECharts (响应式布局、中文界面)
 - **AI 模型**: SiliconFlow API (Qwen/Qwen2.5-7B-Instruct)
 - **部署**: Docker / Hugging Face Spaces
 
@@ -52,10 +55,10 @@ docker build -t urban-flow-agent .
 docker run -p 7860:7860 urban-flow-agent
 ```
 
-## 商业价值
-- **政府/交管**: 提升城市交通效率，减少拥堵，降低碳排放。
-- **物流公司**: 优化配送路线，规避拥堵区域，降低运输成本。
-- **车联网**: 为自动驾驶车辆提供宏观路况数据支持。
+## 功能演示
+- **上传数据**: 点击右上角"上传数据"按钮，导入您的交通监测日志。
+- **智能问答**: 在下方对话框输入"当前哪里最堵？"或"如何优化市中心交通？"。
+- **Mock 模式**: 当 API 额度耗尽或网络不佳时，系统自动切换至本地模拟专家模式，保证演示不中断。
 
 ## 许可证
 MIT License

app.py

@@ -5,6 +5,7 @@ import time
 import requests
 from flask import Flask, render_template, request, jsonify, send_from_directory
 from flask_cors import CORS
+from werkzeug.utils import secure_filename
 
 app = Flask(__name__)
 CORS(app)
@@ -12,16 +13,23 @@ CORS(app)
 # Configuration
 app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB
 app.config['JSON_AS_ASCII'] = False
+app.config['UPLOAD_FOLDER'] = 'uploads'
+
+# Ensure upload folder exists
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
 
 # API Key Configuration
 # In production, use environment variables: os.environ.get("SILICONFLOW_API_KEY")
 SILICONFLOW_API_KEY = os.environ.get("SILICONFLOW_API_KEY", "sk-vimuseiptfbomzegyuvmebjzooncsqbyjtlddrfodzcdskgi")
 SILICONFLOW_API_URL = "https://api.siliconflow.cn/v1/chat/completions"
 
+# Global context to store uploaded data or latest traffic state
+traffic_context = {}
+
 # Mock Data Generator
 def generate_traffic_data():
-    """Generate mock traffic data for the dashboard."""
-    districts = ["Downtown", "North District", "Tech Park", "Harbor Area", "West End"]
+    """Generate mock traffic data for the dashboard (Chinese)."""
+    districts = ["市中心", "北区", "科技园", "港口区", "西区"]
     data = {
         "timestamp": time.strftime("%H:%M:%S"),
         "congestion_index": round(random.uniform(1.0, 9.9), 1),
@@ -31,11 +39,23 @@ def generate_traffic_data():
     }
     
     for district in districts:
+        status_map = {
+            "Smooth": "畅通",
+            "Moderate": "缓行",
+            "Congested": "拥堵",
+            "Heavy Congestion": "严重拥堵"
+        }
+        raw_status = random.choice(list(status_map.keys()))
         data["district_status"].append({
             "name": district,
             "flow": random.randint(500, 3000), # vehicles per hour
-            "status": random.choice(["Smooth", "Moderate", "Congested", "Heavy Congestion"])
+            "status": raw_status,
+            "status_cn": status_map[raw_status]
         })
+    
+    # Update global context
+    global traffic_context
+    traffic_context = data
     return data
 
 @app.route('/')
@@ -46,25 +66,58 @@ def index():
 def get_traffic_data():
     return jsonify(generate_traffic_data())
 
+@app.route('/api/upload', methods=['POST'])
+def upload_file():
+    if 'file' not in request.files:
+        return jsonify({"error": "没有文件部分"}), 400
+    file = request.files['file']
+    if file.filename == '':
+        return jsonify({"error": "未选择文件"}), 400
+    
+    if file:
+        filename = secure_filename(file.filename)
+        filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+        try:
+            file.save(filepath)
+        except Exception as e:
+            return jsonify({"error": f"保存文件失败: {str(e)}"}), 500
+        
+        # Simple processing logic
+        msg = f"文件 {filename} 上传成功。"
+        if filename.lower().endswith('.json'):
+            try:
+                with open(filepath, 'r', encoding='utf-8') as f:
+                    data = json.load(f)
+                    # Try to merge into context if structure matches
+                    if 'congestion_index' in data:
+                        global traffic_context
+                        traffic_context.update(data)
+                        msg += " 交通数据已更新。"
+            except Exception as e:
+                msg += f" 但解析JSON失败: {str(e)}"
+                
+        return jsonify({"message": msg, "filename": filename})
+
 @app.route('/api/chat', methods=['POST'])
 def chat():
     data = request.json
     user_message = data.get('message', '')
-    context_data = data.get('context', {})
+    # Use global context if available, else client provided context
+    context_data = traffic_context if traffic_context else data.get('context', {})
     
     if not user_message:
         return jsonify({"error": "No message provided"}), 400
 
-    # System Prompt with Context
-    system_prompt = f"""You are 'Urban Flow', an AI expert in Smart City Traffic Management and Urban Mobility.
-    Current Traffic Context:
-    - Congestion Index: {context_data.get('congestion_index', 'N/A')}
-    - Average Speed: {context_data.get('avg_speed', 'N/A')} km/h
-    - Active Incidents: {context_data.get('active_incidents', 'N/A')}
+    # System Prompt with Context (Chinese)
+    system_prompt = f"""你是一个名为'Urban Flow'的智慧城市交通管理AI专家。
+    当前交通状况:
+    - 拥堵指数: {context_data.get('congestion_index', 'N/A')}
+    - 平均车速: {context_data.get('avg_speed', 'N/A')} km/h
+    - 活跃事件: {context_data.get('active_incidents', 'N/A')}
     
-    Your role is to analyze traffic situations, suggest signal optimization strategies, and provide mobility advice.
-    Be professional, concise, and data-driven. Use Markdown for formatting.
-    If asked about 'optimizing signals', suggest specific adjustments (e.g., 'Increase Green Time at North Main St by 15s').
+    你的角色是分析交通状况，提出信号优化策略和出行建议。
+    请保持专业、简洁，并用数据说话。使用Markdown格式回复。
+    如果被问及'优化信号灯'，请提出具体的调整建议（例如：'建议将市中心主干道的绿灯时间延长15秒'）。
     """
 
     payload = {
@@ -85,31 +138,39 @@ def chat():
     try:
         # Mock Mode Fallback logic (Network resilience)
         try:
-            response = requests.post(SILICONFLOW_API_URL, json=payload, headers=headers, timeout=10)
+            response = requests.post(SILICONFLOW_API_URL, json=payload, headers=headers, timeout=5)
             response.raise_for_status()
             ai_response = response.json()['choices'][0]['message']['content']
         except Exception as e:
             print(f"API Error: {e}. Switching to Mock Mode.")
             # Fallback Mock Response
             time.sleep(1) # Simulate delay
-            ai_response = f"""**[Mock Mode Active]** Network unavailable.
+            ai_response = f"""**[模拟模式已激活]** 网络连接不可用。
             
-            Based on the current congestion index of **{context_data.get('congestion_index', 'N/A')}**, here is my analysis:
+            根据当前拥堵指数 **{context_data.get('congestion_index', 'N/A')}**，我的分析如下：
             
-            1. **Signal Optimization**: Suggest extending green light duration in **Downtown** sector by 20%.
-            2. **Route Advisory**: Recommend diverting heavy freight traffic to the Outer Ring Road.
-            3. **Incident Response**: Deploy drone units to monitor the West End intersection.
+            1. **信号优化**: 建议延长 **市中心** 区域绿灯时长 20%。
+            2. **路线建议**: 建议重型货车绕行外环路。
+            3. **事件响应**: 派遣无人机巡查西区路口。
             
-            *Note: Connect to the internet and verify API key for live AI analysis.*"""
+            *注意: 请检查网络连接和API密钥以获取实时AI分析。*"""
 
         return jsonify({"response": ai_response})
 
     except Exception as e:
         return jsonify({"error": str(e)}), 500
 
+@app.errorhandler(413)
+def request_entity_too_large(error):
+    return jsonify({"error": "文件太大，超过限制 (16MB)"}), 413
+
 @app.errorhandler(404)
 def page_not_found(e):
-    return jsonify({"error": "Endpoint not found"}), 404
+    return jsonify({"error": "未找到该资源 (404)"}), 404
+
+@app.errorhandler(500)
+def internal_server_error(e):
+    return jsonify({"error": "服务器内部错误 (500)"}), 500
 
 if __name__ == '__main__':
     app.run(host='0.0.0.0', port=7860, debug=True)

templates/index.html

@@ -22,85 +22,122 @@
         .markdown-body p { margin-bottom: 0.5em; }
         .markdown-body strong { font-weight: bold; }
         .echart-container { width: 100%; height: 300px; }
+        /* Custom Scrollbar */
+        ::-webkit-scrollbar { width: 8px; }
+        ::-webkit-scrollbar-track { background: #f1f1f1; }
+        ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
+        ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
     </style>
 </head>
 <body class="bg-gray-50 text-gray-900 font-sans">
-    <div id="app" v-cloak class="min-h-screen flex flex-col max-w-5xl mx-auto shadow-xl bg-white">
+    <div id="app" v-cloak class="min-h-screen flex flex-col max-w-6xl mx-auto shadow-xl bg-white">
         
         <!-- Header -->
         <header class="bg-white border-b border-gray-200 p-4 sticky top-0 z-50 flex items-center justify-between">
             <div class="flex items-center space-x-3">
-                <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white text-xl">
+                <div class="w-10 h-10 bg-blue-600 rounded-lg flex items-center justify-center text-white text-xl shadow-lg">
                     <i class="fa-solid fa-traffic-light"></i>
                 </div>
                 <div>
                     <h1 class="text-xl font-bold tracking-tight text-gray-900">Urban Flow Agent</h1>
-                    <p class="text-xs text-gray-500">城市脉动 · 智慧交通 SaaS</p>
+                    <p class="text-xs text-gray-500">城市脉动 · 智慧交通 SaaS 平台</p>
                 </div>
             </div>
-            <div class="flex items-center space-x-2">
-                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium" 
-                      :class="apiStatus ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'">
-                    ${ apiStatus ? 'System Online' : 'Offline' }
+            <div class="flex items-center space-x-3">
+                 <!-- Upload Button -->
+                 <div class="relative">
+                    <input type="file" ref="fileInput" @change="uploadFile" class="hidden" accept=".json,.csv,.txt,.pdf">
+                    <button @click="triggerUpload" class="flex items-center space-x-2 px-3 py-1.5 bg-gray-100 hover:bg-gray-200 rounded-md text-sm transition">
+                        <i class="fa-solid fa-cloud-upload"></i>
+                        <span>上传数据</span>
+                    </button>
+                </div>
+
+                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border" 
+                      :class="apiStatus ? 'bg-green-50 text-green-700 border-green-200' : 'bg-red-50 text-red-700 border-red-200'">
+                    <span class="w-2 h-2 rounded-full mr-1.5" :class="apiStatus ? 'bg-green-500' : 'bg-red-500'"></span>
+                    ${ apiStatus ? '系统在线' : '离线' }
                 </span>
             </div>
         </header>
 
         <!-- Main Content -->
-        <main class="flex-1 p-4 space-y-6 overflow-y-auto">
+        <main class="flex-1 p-6 space-y-6 overflow-y-auto">
             
             <!-- Key Metrics Grid -->
             <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
-                <div class="bg-blue-50 p-4 rounded-xl border border-blue-100">
-                    <div class="text-blue-500 text-sm font-medium mb-1">拥堵指数</div>
-                    <div class="text-2xl font-bold text-gray-900">${ trafficData.congestion_index }</div>
-                    <div class="text-xs text-blue-400 mt-1">
-                        <i class="fa-solid" :class="trafficData.congestion_index > 5 ? 'fa-arrow-up' : 'fa-arrow-down'"></i> 
-                        实时更新
+                <div class="bg-gradient-to-br from-blue-50 to-white p-5 rounded-xl border border-blue-100 shadow-sm hover:shadow-md transition">
+                    <div class="text-blue-600 text-sm font-medium mb-1 flex items-center">
+                        <i class="fa-solid fa-gauge-high mr-2"></i> 拥堵指数
+                    </div>
+                    <div class="text-3xl font-bold text-gray-900">${ trafficData.congestion_index }</div>
+                    <div class="text-xs text-blue-400 mt-2 flex items-center">
+                        <span :class="trafficData.congestion_index > 5 ? 'text-red-500' : 'text-green-500'">
+                            <i class="fa-solid" :class="trafficData.congestion_index > 5 ? 'fa-arrow-trend-up' : 'fa-arrow-trend-down'"></i>
+                            ${ trafficData.congestion_index > 5 ? '上升趋势' : '保持平稳' }
+                        </span>
                     </div>
                 </div>
-                <div class="bg-green-50 p-4 rounded-xl border border-green-100">
-                    <div class="text-green-500 text-sm font-medium mb-1">平均车速</div>
-                    <div class="text-2xl font-bold text-gray-900">${ trafficData.avg_speed } <span class="text-sm font-normal text-gray-500">km/h</span></div>
+                <div class="bg-gradient-to-br from-green-50 to-white p-5 rounded-xl border border-green-100 shadow-sm hover:shadow-md transition">
+                    <div class="text-green-600 text-sm font-medium mb-1 flex items-center">
+                        <i class="fa-solid fa-road mr-2"></i> 平均车速
+                    </div>
+                    <div class="text-3xl font-bold text-gray-900">${ trafficData.avg_speed } <span class="text-sm font-normal text-gray-500">km/h</span></div>
                 </div>
-                <div class="bg-orange-50 p-4 rounded-xl border border-orange-100">
-                    <div class="text-orange-500 text-sm font-medium mb-1">活跃事件</div>
-                    <div class="text-2xl font-bold text-gray-900">${ trafficData.active_incidents }</div>
+                <div class="bg-gradient-to-br from-orange-50 to-white p-5 rounded-xl border border-orange-100 shadow-sm hover:shadow-md transition">
+                    <div class="text-orange-600 text-sm font-medium mb-1 flex items-center">
+                        <i class="fa-solid fa-triangle-exclamation mr-2"></i> 活跃事件
+                    </div>
+                    <div class="text-3xl font-bold text-gray-900">${ trafficData.active_incidents }</div>
                 </div>
-                <div class="bg-purple-50 p-4 rounded-xl border border-purple-100">
-                    <div class="text-purple-500 text-sm font-medium mb-1">系统状态</div>
-                    <div class="text-lg font-bold text-gray-900">Monitoring</div>
+                <div class="bg-gradient-to-br from-purple-50 to-white p-5 rounded-xl border border-purple-100 shadow-sm hover:shadow-md transition">
+                    <div class="text-purple-600 text-sm font-medium mb-1 flex items-center">
+                        <i class="fa-solid fa-server mr-2"></i> 系统状态
+                    </div>
+                    <div class="text-lg font-bold text-gray-900 mt-1">实时监控中</div>
+                    <div class="text-xs text-gray-400 mt-1">更新于: ${ currentTime }</div>
                 </div>
             </div>
 
             <!-- Visualization Section -->
-            <div class="grid md:grid-cols-2 gap-6">
-                <!-- Traffic Gauge -->
-                <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
+            <div class="grid md:grid-cols-12 gap-6">
+                <!-- Traffic Gauge (4 cols) -->
+                <div class="md:col-span-4 bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
                     <h3 class="text-sm font-bold text-gray-700 mb-4 flex items-center">
-                        <i class="fa-solid fa-gauge-high mr-2 text-blue-500"></i> 实时拥堵仪表盘
+                        <i class="fa-solid fa-chart-pie mr-2 text-blue-500"></i> 实时拥堵仪表盘
                     </h3>
-                    <div ref="gaugeChart" class="echart-container"></div>
+                    <div ref="gaugeChart" class="echart-container" style="height: 250px;"></div>
                 </div>
                 
-                <!-- District Status List -->
-                <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
+                <!-- District Status List (8 cols) -->
+                <div class="md:col-span-8 bg-white rounded-xl border border-gray-200 p-4 shadow-sm flex flex-col">
                     <h3 class="text-sm font-bold text-gray-700 mb-4 flex items-center">
                         <i class="fa-solid fa-map-location-dot mr-2 text-blue-500"></i> 区域路况详情
                     </h3>
-                    <div class="space-y-3">
+                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3 overflow-y-auto max-h-[250px] pr-2">
                         <div v-for="district in trafficData.district_status" :key="district.name" 
-                             class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition">
-                            <div>
-                                <div class="font-medium text-gray-900">${ district.name }</div>
-                                <div class="text-xs text-gray-500">流量: ${ district.flow } veh/h</div>
+                             class="flex items-center justify-between p-3 bg-gray-50 rounded-lg border border-gray-100 hover:border-blue-200 hover:shadow-sm transition">
+                            <div class="flex items-center space-x-3">
+                                <div class="w-8 h-8 rounded-full flex items-center justify-center text-xs font-bold"
+                                     :class="{
+                                         'bg-green-100 text-green-700': district.status === 'Smooth',
+                                         'bg-yellow-100 text-yellow-700': district.status === 'Moderate',
+                                         'bg-orange-100 text-orange-700': district.status === 'Congested',
+                                         'bg-red-100 text-red-700': district.status === 'Heavy Congestion'
+                                     }">
+                                    ${ district.name.charAt(0) }
+                                </div>
+                                <div>
+                                    <div class="font-medium text-gray-900 text-sm">${ district.name }</div>
+                                    <div class="text-xs text-gray-500">流量: ${ district.flow } 车/小时</div>
+                                </div>
                             </div>
-                            <span class="px-2 py-1 text-xs rounded-md font-medium"
+                            <span class="px-2 py-1 text-xs rounded-md font-medium border"
                                   :class="{
-                                      'bg-green-100 text-green-700': district.status === 'Smooth',
-                                      'bg-yellow-100 text-yellow-700': district.status === 'Moderate',
-                                      'bg-orange-100 text-orange-700': district.status === 'Congested',
-                                      'bg-red-100 text-red-700': district.status === 'Heavy Congestion'
+                                      'bg-green-50 text-green-700 border-green-200': district.status === 'Smooth',
+                                      'bg-yellow-50 text-yellow-700 border-yellow-200': district.status === 'Moderate',
+                                      'bg-orange-50 text-orange-700 border-orange-200': district.status === 'Congested',
+                                      'bg-red-50 text-red-700 border-red-200': district.status === 'Heavy Congestion'
                                   }">
                                 ${ district.status_cn || district.status }
                             </span>
@@ -110,59 +147,80 @@
             </div>
 
             <!-- AI Assistant Section -->
-            <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden flex flex-col h-[500px]">
+            <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden flex flex-col h-[600px]">
                 <div class="bg-gray-50 p-4 border-b border-gray-200 flex justify-between items-center">
                     <h3 class="text-sm font-bold text-gray-700 flex items-center">
                         <i class="fa-solid fa-robot mr-2 text-blue-600"></i> 交通指挥 AI 助手
                     </h3>
-                    <button @click="clearChat" class="text-xs text-gray-500 hover:text-red-500">
-                        <i class="fa-solid fa-trash"></i> 清空
-                    </button>
+                    <div class="flex space-x-2">
+                        <button @click="clearChat" class="text-xs text-gray-500 hover:text-red-500 transition px-2 py-1 rounded hover:bg-red-50">
+                            <i class="fa-solid fa-trash mr-1"></i> 清空
+                        </button>
+                    </div>
                 </div>
                 
                 <!-- Chat Messages -->
                 <div class="flex-1 overflow-y-auto p-4 space-y-4 bg-white" ref="chatContainer">
-                    <div v-if="chatHistory.length === 0" class="text-center text-gray-400 py-10">
-                        <i class="fa-solid fa-comments text-4xl mb-3 opacity-20"></i>
-                        <p class="text-sm">请下达指令，例如："分析当前拥堵原因" 或 "生成信号灯优化方案"</p>
-                        <div class="mt-4 flex flex-wrap justify-center gap-2">
-                            <button @click="quickAsk('分析当前全区交通状况并给出建议')" class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full hover:bg-blue-100">分析路况</button>
-                            <button @click="quickAsk('为拥堵最严重的区域生成信号灯优化方案')" class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full hover:bg-blue-100">信号优化</button>
-                            <button @click="quickAsk('检测是否有潜在交通事故风险')" class="px-3 py-1 bg-blue-50 text-blue-600 text-xs rounded-full hover:bg-blue-100">安全审计</button>
+                    <div v-if="chatHistory.length === 0" class="text-center text-gray-400 py-20 flex flex-col items-center">
+                        <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-4">
+                            <i class="fa-solid fa-comments text-2xl text-gray-300"></i>
+                        </div>
+                        <p class="text-sm text-gray-500">请下达指令，例如："分析当前拥堵原因" 或 "生成信号灯优化方案"</p>
+                        <div class="mt-6 flex flex-wrap justify-center gap-2 max-w-md">
+                            <button @click="quickAsk('分析当前全区交通状况并给出建议')" class="px-3 py-1.5 bg-white border border-gray-200 text-gray-600 text-xs rounded-full hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200 transition shadow-sm">
+                                <i class="fa-solid fa-magnifying-glass mr-1"></i> 分析路况
+                            </button>
+                            <button @click="quickAsk('为拥堵最严重的区域生成信号灯优化方案')" class="px-3 py-1.5 bg-white border border-gray-200 text-gray-600 text-xs rounded-full hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200 transition shadow-sm">
+                                <i class="fa-solid fa-traffic-light mr-1"></i> 信号优化
+                            </button>
+                            <button @click="quickAsk('检测是否有潜在交通事故风险')" class="px-3 py-1.5 bg-white border border-gray-200 text-gray-600 text-xs rounded-full hover:bg-blue-50 hover:text-blue-600 hover:border-blue-200 transition shadow-sm">
+                                <i class="fa-solid fa-shield-halved mr-1"></i> 安全审计
+                            </button>
                         </div>
                     </div>
 
                     <div v-for="(msg, index) in chatHistory" :key="index" 
-                         class="flex flex-col" 
+                         class="flex flex-col group" 
                          :class="msg.role === 'user' ? 'items-end' : 'items-start'">
-                        <div class="max-w-[85%] rounded-2xl px-4 py-3 text-sm shadow-sm"
-                             :class="msg.role === 'user' ? 'bg-blue-600 text-white rounded-br-none' : 'bg-gray-100 text-gray-800 rounded-bl-none'">
-                            <div v-if="msg.role === 'assistant'" class="markdown-body" v-html="renderMarkdown(msg.content)"></div>
-                            <div v-else>${ msg.content }</div>
+                        <div class="flex items-center mb-1 space-x-2" :class="msg.role === 'user' ? 'flex-row-reverse space-x-reverse' : 'flex-row'">
+                            <div class="w-6 h-6 rounded-full flex items-center justify-center text-[10px]"
+                                 :class="msg.role === 'user' ? 'bg-blue-100 text-blue-600' : 'bg-gray-100 text-gray-600'">
+                                <i class="fa-solid" :class="msg.role === 'user' ? 'fa-user' : 'fa-robot'"></i>
+                            </div>
+                            <div class="text-[10px] text-gray-400">
+                                ${ msg.role === 'user' ? '操作员' : 'AI 助手' } • ${ msg.time }
+                            </div>
                         </div>
-                        <div class="text-[10px] text-gray-400 mt-1 px-1">
-                            ${ msg.role === 'user' ? 'Operator' : 'AI Agent' } • ${ msg.time }
+                        <div class="max-w-[85%] rounded-2xl px-4 py-3 text-sm shadow-sm border"
+                             :class="msg.role === 'user' ? 'bg-blue-600 text-white rounded-tr-none border-blue-600' : 'bg-white text-gray-800 rounded-tl-none border-gray-100'">
+                            <div v-if="msg.role === 'assistant'" class="markdown-body prose prose-sm max-w-none" v-html="renderMarkdown(msg.content)"></div>
+                            <div v-else>${ msg.content }</div>
                         </div>
                     </div>
 
                     <div v-if="isThinking" class="flex items-start">
-                        <div class="bg-gray-100 rounded-2xl rounded-bl-none px-4 py-3 flex items-center space-x-2">
-                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce"></div>
-                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-75"></div>
-                            <div class="w-2 h-2 bg-gray-400 rounded-full animate-bounce delay-150"></div>
+                         <div class="flex items-center mb-1 space-x-2">
+                            <div class="w-6 h-6 rounded-full bg-gray-100 text-gray-600 flex items-center justify-center text-[10px]">
+                                <i class="fa-solid fa-robot"></i>
+                            </div>
+                        </div>
+                        <div class="ml-2 bg-white border border-gray-100 rounded-2xl rounded-tl-none px-4 py-3 flex items-center space-x-2 shadow-sm">
+                            <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce"></div>
+                            <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce delay-75"></div>
+                            <div class="w-2 h-2 bg-blue-400 rounded-full animate-bounce delay-150"></div>
                         </div>
                     </div>
                 </div>
 
                 <!-- Input Area -->
-                <div class="p-4 border-t border-gray-200 bg-gray-50">
-                    <div class="flex space-x-2">
+                <div class="p-4 border-t border-gray-200 bg-white">
+                    <div class="flex space-x-2 relative">
                         <input v-model="userInput" @keyup.enter="sendMessage" 
-                               type="text" placeholder="输入指令..." 
-                               class="flex-1 bg-white border border-gray-300 rounded-lg px-4 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
+                               type="text" placeholder="请输入指令..." 
+                               class="flex-1 bg-gray-50 border border-gray-200 rounded-xl px-4 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition"
                                :disabled="isThinking">
                         <button @click="sendMessage" 
-                                class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg transition disabled:opacity-50 disabled:cursor-not-allowed"
+                                class="bg-blue-600 hover:bg-blue-700 text-white px-5 py-2 rounded-xl transition shadow-sm disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center"
                                 :disabled="!userInput.trim() || isThinking">
                             <i class="fa-solid fa-paper-plane"></i>
                         </button>
@@ -171,6 +229,21 @@
             </div>
 
         </main>
+
+        <!-- Toast Notification -->
+        <div class="fixed bottom-4 right-4 z-50 transition-all duration-300" v-if="notification.show">
+            <div class="bg-white border-l-4 shadow-lg rounded-r px-4 py-3 flex items-center"
+                 :class="notification.type === 'error' ? 'border-red-500' : 'border-green-500'">
+                <div class="text-xl mr-3" :class="notification.type === 'error' ? 'text-red-500' : 'text-green-500'">
+                    <i class="fa-solid" :class="notification.type === 'error' ? 'fa-circle-exclamation' : 'fa-circle-check'"></i>
+                </div>
+                <div>
+                    <p class="font-bold text-sm text-gray-900">${ notification.title }</p>
+                    <p class="text-xs text-gray-600">${ notification.message }</p>
+                </div>
+            </div>
+        </div>
+
     </div>
 
     <script>
@@ -191,6 +264,10 @@
                 const apiStatus = ref(true);
                 const chatContainer = ref(null);
                 const gaugeChart = ref(null);
+                const fileInput = ref(null);
+                const currentTime = ref('');
+                const notification = ref({ show: false, type: 'info', title: '', message: '' });
+                
                 let chartInstance = null;
                 const md = window.markdownit();
 
@@ -198,9 +275,12 @@
                 const fetchTrafficData = async () => {
                     try {
                         const res = await fetch('/api/traffic-data');
+                        if (!res.ok) throw new Error("API Error");
                         const data = await res.json();
                         trafficData.value = data;
                         updateChart(data.congestion_index);
+                        currentTime.value = new Date().toLocaleTimeString('zh-CN');
+                        apiStatus.value = true;
                     } catch (e) {
                         console.error("Data fetch error", e);
                         apiStatus.value = false;
@@ -221,7 +301,7 @@
                             itemStyle: { color: '#58D9F9' },
                             progress: { show: true, width: 30 },
                             pointer: { icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z', length: '12%', width: 20, offsetCenter: [0, '-60%'], itemStyle: { color: 'auto' } },
-                            axisLine: { lineStyle: { width: 30, color: [[0.3, '#67e0e3'], [0.7, '#37a2da'], [1, '#fd666d']] } },
+                            axisLine: { lineStyle: { width: 30, color: [[0.3, '#10B981'], [0.7, '#F59E0B'], [1, '#EF4444']] } },
                             axisTick: { distance: -45, splitNumber: 5, lineStyle: { width: 2, color: '#999' } },
                             splitLine: { distance: -52, length: 14, lineStyle: { width: 3, color: '#999' } },
                             axisLabel: { distance: -20, color: '#999', fontSize: 14 },
@@ -242,7 +322,7 @@
                     chatHistory.value.push({
                         role: 'user',
                         content: text,
-                        time: new Date().toLocaleTimeString()
+                        time: new Date().toLocaleTimeString('zh-CN')
                     });
                     userInput.value = '';
                     isThinking.value = true;
@@ -262,13 +342,13 @@
                         chatHistory.value.push({
                             role: 'assistant',
                             content: data.response || "No response received.",
-                            time: new Date().toLocaleTimeString()
+                            time: new Date().toLocaleTimeString('zh-CN')
                         });
                     } catch (e) {
                         chatHistory.value.push({
                             role: 'assistant',
-                            content: "**Error:** Failed to connect to AI service.",
-                            time: new Date().toLocaleTimeString()
+                            content: "**错误:** 无法连接到 AI 服务。",
+                            time: new Date().toLocaleTimeString('zh-CN')
                         });
                     } finally {
                         isThinking.value = false;
@@ -296,6 +376,52 @@
                     return md.render(text);
                 };
 
+                // File Upload Logic
+                const triggerUpload = () => {
+                    if (fileInput.value) {
+                        fileInput.value.click();
+                    } else {
+                        showNotification('error', '错误', '找不到文件输入组件');
+                    }
+                };
+
+                const uploadFile = async (event) => {
+                    const file = event.target.files[0];
+                    if (!file) return;
+
+                    const formData = new FormData();
+                    formData.append('file', file);
+
+                    try {
+                        showNotification('info', '上传中', `正在上传 ${file.name}...`);
+                        const res = await fetch('/api/upload', {
+                            method: 'POST',
+                            body: formData
+                        });
+                        const data = await res.json();
+                        
+                        if (res.ok) {
+                            showNotification('success', '上传成功', data.message);
+                            // Refresh data immediately
+                            fetchTrafficData();
+                        } else {
+                            showNotification('error', '上传失败', data.error || '未知错误');
+                        }
+                    } catch (e) {
+                        showNotification('error', '上传错误', e.message);
+                    } finally {
+                        // Reset input
+                        event.target.value = '';
+                    }
+                };
+
+                const showNotification = (type, title, message) => {
+                    notification.value = { show: true, type, title, message };
+                    setTimeout(() => {
+                        notification.value.show = false;
+                    }, 3000);
+                };
+
                 onMounted(() => {
                     // Init Chart
                     if (gaugeChart.value) {
@@ -315,10 +441,15 @@
                     apiStatus,
                     chatContainer,
                     gaugeChart,
+                    fileInput,
+                    currentTime,
+                    notification,
                     sendMessage,
                     quickAsk,
                     clearChat,
-                    renderMarkdown
+                    renderMarkdown,
+                    triggerUpload,
+                    uploadFile
                 };
             }
         }).mount('#app');