Initial commit of Urban Flow Agent

Dockerfile

@@ -0,0 +1,13 @@
+FROM python:3.9-slim
+
+WORKDIR /app
+
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY . .
+
+# Ensure instance directory exists for SQLite (if used) or logs
+RUN mkdir -p instance && chmod 777 instance
+
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

README.md

@@ -0,0 +1,61 @@
+---
+title: Urban Flow Agent
+emoji: 🚦
+colorFrom: blue
+colorTo: green
+sdk: docker
+pinned: false
+app_port: 7860
+short_description: 城市脉动智能体 - 智慧交通与出行优化 SaaS
+---
+
+# 城市脉动智能体 (Urban Flow Agent)
+
+## 项目简介
+**Urban Flow Agent** 是一个专注于智慧交通与城市出行优化的 SaaS 平台。它利用 AI 智能体技术，结合实时数据分析，为城市管理者和物流运营商提供交通流量监控、拥堵预警、信号灯优化建议以及突发事件应急响应方案。
+
+## 核心功能
+1.  **交通全景雷达 (Traffic Radar)**: 实时监控城市交通流量、平均车速和拥堵指数（通过 ECharts 可视化展示）。
+2.  **智能事件侦测 (Incident Scout)**: 利用 AI 分析模拟的交通数据，识别潜在的交通事故或异常拥堵。
+3.  **信号优化专家 (Signal Optima)**: 基于当前流量，由 AI 智能体生成交通信号灯配时优化方案。
+4.  **出行智囊团 (Mobility AI)**: 集成 SiliconFlow 大模型，提供自然语言交互的交通咨询和决策支持。
+
+## 技术栈
+- **后端**: Python Flask
+- **前端**: Vue.js 3 + Tailwind CSS + ECharts
+- **AI 模型**: SiliconFlow API (Qwen/Qwen2.5-7B-Instruct)
+- **部署**: Docker / Hugging Face Spaces
+
+## 快速开始
+
+### 本地运行
+1. 克隆项目
+```bash
+git clone https://huggingface.co/spaces/<your-username>/urban-flow-agent
+cd urban-flow-agent
+```
+
+2. 安装依赖
+```bash
+pip install -r requirements.txt
+```
+
+3. 运行应用
+```bash
+python app.py
+```
+访问: http://localhost:7860
+
+### Docker 运行
+```bash
+docker build -t urban-flow-agent .
+docker run -p 7860:7860 urban-flow-agent
+```
+
+## 商业价值
+- **政府/交管**: 提升城市交通效率，减少拥堵，降低碳排放。
+- **物流公司**: 优化配送路线，规避拥堵区域，降低运输成本。
+- **车联网**: 为自动驾驶车辆提供宏观路况数据支持。
+
+## 许可证
+MIT License

app.py

@@ -0,0 +1,115 @@
+import os
+import json
+import random
+import time
+import requests
+from flask import Flask, render_template, request, jsonify, send_from_directory
+from flask_cors import CORS
+
+app = Flask(__name__)
+CORS(app)
+
+# Configuration
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB
+app.config['JSON_AS_ASCII'] = False
+
+# 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"
+
+# Mock Data Generator
+def generate_traffic_data():
+    """Generate mock traffic data for the dashboard."""
+    districts = ["Downtown", "North District", "Tech Park", "Harbor Area", "West End"]
+    data = {
+        "timestamp": time.strftime("%H:%M:%S"),
+        "congestion_index": round(random.uniform(1.0, 9.9), 1),
+        "avg_speed": round(random.uniform(15, 60), 1),
+        "active_incidents": random.randint(0, 5),
+        "district_status": []
+    }
+    
+    for district in districts:
+        data["district_status"].append({
+            "name": district,
+            "flow": random.randint(500, 3000), # vehicles per hour
+            "status": random.choice(["Smooth", "Moderate", "Congested", "Heavy Congestion"])
+        })
+    return data
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/api/traffic-data', methods=['GET'])
+def get_traffic_data():
+    return jsonify(generate_traffic_data())
+
+@app.route('/api/chat', methods=['POST'])
+def chat():
+    data = request.json
+    user_message = data.get('message', '')
+    context_data = 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')}
+    
+    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').
+    """
+
+    payload = {
+        "model": "Qwen/Qwen2.5-7B-Instruct",
+        "messages": [
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": user_message}
+        ],
+        "temperature": 0.7,
+        "max_tokens": 512
+    }
+
+    headers = {
+        "Authorization": f"Bearer {SILICONFLOW_API_KEY}",
+        "Content-Type": "application/json"
+    }
+
+    try:
+        # Mock Mode Fallback logic (Network resilience)
+        try:
+            response = requests.post(SILICONFLOW_API_URL, json=payload, headers=headers, timeout=10)
+            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.
+            
+            Based on the current congestion index of **{context_data.get('congestion_index', 'N/A')}**, here is my analysis:
+            
+            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.
+            
+            *Note: Connect to the internet and verify API key for live AI analysis.*"""
+
+        return jsonify({"response": ai_response})
+
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+@app.errorhandler(404)
+def page_not_found(e):
+    return jsonify({"error": "Endpoint not found"}), 404
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=7860, debug=True)

requirements.txt

@@ -0,0 +1,5 @@
+flask
+flask-cors
+requests
+gunicorn
+python-dotenv

templates/index.html

@@ -0,0 +1,327 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Urban Flow Agent - 城市脉动</title>
+    <!-- Vue 3 -->
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <!-- Tailwind CSS -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- ECharts -->
+    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
+    <!-- Markdown-it -->
+    <script src="https://cdn.jsdelivr.net/npm/markdown-it/dist/markdown-it.min.js"></script>
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    
+    <style>
+        [v-cloak] { display: none; }
+        .markdown-body ul { list-style-type: disc; margin-left: 1.5em; }
+        .markdown-body ol { list-style-type: decimal; margin-left: 1.5em; }
+        .markdown-body p { margin-bottom: 0.5em; }
+        .markdown-body strong { font-weight: bold; }
+        .echart-container { width: 100%; height: 300px; }
+    </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">
+        
+        <!-- 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">
+                    <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>
+                </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' }
+                </span>
+            </div>
+        </header>
+
+        <!-- Main Content -->
+        <main class="flex-1 p-4 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>
+                </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>
+                <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>
+                <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>
+            </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">
+                    <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> 实时拥堵仪表盘
+                    </h3>
+                    <div ref="gaugeChart" class="echart-container"></div>
+                </div>
+                
+                <!-- District Status List -->
+                <div class="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-map-location-dot mr-2 text-blue-500"></i> 区域路况详情
+                    </h3>
+                    <div class="space-y-3">
+                        <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>
+                            </div>
+                            <span class="px-2 py-1 text-xs rounded-md font-medium"
+                                  :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.status_cn || district.status }
+                            </span>
+                        </div>
+                    </div>
+                </div>
+            </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-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>
+                
+                <!-- 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>
+                    </div>
+
+                    <div v-for="(msg, index) in chatHistory" :key="index" 
+                         class="flex flex-col" 
+                         :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>
+                        <div class="text-[10px] text-gray-400 mt-1 px-1">
+                            ${ msg.role === 'user' ? 'Operator' : 'AI Agent' } • ${ msg.time }
+                        </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>
+                    </div>
+                </div>
+
+                <!-- Input Area -->
+                <div class="p-4 border-t border-gray-200 bg-gray-50">
+                    <div class="flex space-x-2">
+                        <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"
+                               :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"
+                                :disabled="!userInput.trim() || isThinking">
+                            <i class="fa-solid fa-paper-plane"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+
+        </main>
+    </div>
+
+    <script>
+        const { createApp, ref, onMounted, nextTick } = Vue;
+
+        createApp({
+            delimiters: ['${', '}'],
+            setup() {
+                const trafficData = ref({
+                    congestion_index: 0,
+                    avg_speed: 0,
+                    active_incidents: 0,
+                    district_status: []
+                });
+                const chatHistory = ref([]);
+                const userInput = ref('');
+                const isThinking = ref(false);
+                const apiStatus = ref(true);
+                const chatContainer = ref(null);
+                const gaugeChart = ref(null);
+                let chartInstance = null;
+                const md = window.markdownit();
+
+                // Polling for data
+                const fetchTrafficData = async () => {
+                    try {
+                        const res = await fetch('/api/traffic-data');
+                        const data = await res.json();
+                        trafficData.value = data;
+                        updateChart(data.congestion_index);
+                    } catch (e) {
+                        console.error("Data fetch error", e);
+                        apiStatus.value = false;
+                    }
+                };
+
+                const updateChart = (value) => {
+                    if (!chartInstance) return;
+                    
+                    const option = {
+                        series: [{
+                            type: 'gauge',
+                            startAngle: 180,
+                            endAngle: 0,
+                            min: 0,
+                            max: 10,
+                            splitNumber: 5,
+                            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']] } },
+                            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 },
+                            anchor: { show: false },
+                            title: { show: false },
+                            detail: { valueAnimation: true, width: '60%', lineHeight: 40, borderRadius: 8, offsetCenter: [0, '-15%'], fontSize: 30, fontWeight: 'bolder', formatter: '{value}', color: 'auto' },
+                            data: [{ value: value }]
+                        }]
+                    };
+                    chartInstance.setOption(option);
+                };
+
+                const sendMessage = async () => {
+                    const text = userInput.value.trim();
+                    if (!text || isThinking.value) return;
+
+                    // Add user message
+                    chatHistory.value.push({
+                        role: 'user',
+                        content: text,
+                        time: new Date().toLocaleTimeString()
+                    });
+                    userInput.value = '';
+                    isThinking.value = true;
+                    scrollToBottom();
+
+                    try {
+                        const res = await fetch('/api/chat', {
+                            method: 'POST',
+                            headers: { 'Content-Type': 'application/json' },
+                            body: JSON.stringify({
+                                message: text,
+                                context: trafficData.value
+                            })
+                        });
+                        const data = await res.json();
+                        
+                        chatHistory.value.push({
+                            role: 'assistant',
+                            content: data.response || "No response received.",
+                            time: new Date().toLocaleTimeString()
+                        });
+                    } catch (e) {
+                        chatHistory.value.push({
+                            role: 'assistant',
+                            content: "**Error:** Failed to connect to AI service.",
+                            time: new Date().toLocaleTimeString()
+                        });
+                    } finally {
+                        isThinking.value = false;
+                        scrollToBottom();
+                    }
+                };
+
+                const quickAsk = (text) => {
+                    userInput.value = text;
+                    sendMessage();
+                };
+
+                const clearChat = () => {
+                    chatHistory.value = [];
+                };
+
+                const scrollToBottom = async () => {
+                    await nextTick();
+                    if (chatContainer.value) {
+                        chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
+                    }
+                };
+
+                const renderMarkdown = (text) => {
+                    return md.render(text);
+                };
+
+                onMounted(() => {
+                    // Init Chart
+                    if (gaugeChart.value) {
+                        chartInstance = echarts.init(gaugeChart.value);
+                        window.addEventListener('resize', () => chartInstance.resize());
+                    }
+                    
+                    fetchTrafficData();
+                    setInterval(fetchTrafficData, 5000); // Poll every 5s
+                });
+
+                return {
+                    trafficData,
+                    chatHistory,
+                    userInput,
+                    isThinking,
+                    apiStatus,
+                    chatContainer,
+                    gaugeChart,
+                    sendMessage,
+                    quickAsk,
+                    clearChat,
+                    renderMarkdown
+                };
+            }
+        }).mount('#app');
+    </script>
+</body>
+</html>