rebuild app.py

core/utils.py

@@ -0,0 +1,627 @@
+"""
+LifeFlow AI - Core Utilities (Fixed)
+核心工具函數 - 修復撒花動畫
+"""
+import sys
+from pathlib import Path
+
+current_dir = Path(__file__).parent.parent
+sys.path.insert(0, str(current_dir))
+
+import plotly.graph_objects as go
+from config import AGENTS_INFO
+
+
+def create_agent_stream_output() -> str:
+    """創建 Agent 串流輸出 HTML"""
+    return """
+    <div class="stream-container">
+        <div class="stream-text">Ready to analyze your tasks...<span class="stream-cursor"></span></div>
+    </div>
+    """
+
+
+def create_agent_card_enhanced(agent_key: str, status: str = "idle", message: str = "") -> str:
+    """
+    創建增強的 Agent 卡片
+
+    Args:
+        agent_key: Agent 標識符
+        status: 狀態 (idle/working/complete)
+        message: 顯示訊息
+    """
+    agent = AGENTS_INFO.get(agent_key, {})
+    avatar = agent.get("avatar", "🤖")
+    name = agent.get("name", "Agent")
+    role = agent.get("role", "")
+    color = agent.get("color", "#4A90E2")
+    glow = agent.get("glow", "rgba(74, 144, 226, 0.3)")
+
+    status_class = f"status-{status}"
+    card_class = "agent-card active" if status == "working" else "agent-card"
+
+    status_text = {
+        "idle": "On Standby",
+        "working": "Working...",
+        "complete": "Complete ✓"
+    }.get(status, "Unknown")
+
+    message_html = f'<div class="agent-message">{message}</div>' if message else ""
+
+    return f"""
+    <div class="{card_class}" style="--agent-color: {color}; --agent-glow: {glow};">
+        <div class="agent-header">
+            <div class="agent-avatar">{avatar}</div>
+            <div class="agent-info">
+                <h3>{name}</h3>
+                <div class="agent-role">{role}</div>
+            </div>
+        </div>
+        <span class="agent-status {status_class}">{status_text}</span>
+        {message_html}
+    </div>
+    """
+
+
+def create_task_card(task_num: int, task_title: str, priority: str,
+                     time_window: str, duration: str, location: str, icon: str = "📋") -> str:
+    """創建任務卡片"""
+    priority_color_map = {
+        "HIGH": "#FF6B6B",
+        "MEDIUM": "#F5A623",
+        "LOW": "#7ED321"
+    }
+
+    priority_class = f"priority-{priority.lower()}"
+    task_color = priority_color_map.get(priority, "#999")
+
+    return f"""
+    <div class="task-card" style="--task-priority-color: {task_color};">
+        <div class="task-header">
+            <div class="task-title">
+                <span class="task-icon">{icon}</span>
+                <span>#{task_num}: {task_title}</span>
+            </div>
+            <span class="priority-badge {priority_class}">{priority}</span>
+        </div>
+        <div class="task-details">
+            <div class="task-detail-item">
+                <span>🕐</span>
+                <span>{time_window}</span>
+            </div>
+            <div class="task-detail-item">
+                <span>⏱️</span>
+                <span>{duration}</span>
+            </div>
+            <div class="task-detail-item">
+                <span>📍</span>
+                <span>{location}</span>
+            </div>
+        </div>
+    </div>
+    """
+
+
+def create_summary_card(total_tasks: int, high_priority: int, total_time: int) -> str:
+    """創建摘要卡片"""
+    return f"""
+    <div class="summary-card">
+        <h3 style="margin: 0 0 15px 0; font-size: 20px;">📋 Task Summary</h3>
+        <div class="summary-stats">
+            <div class="stat-item">
+                <span class="stat-value">{total_tasks}</span>
+                <span class="stat-label">Tasks</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-value" style="color: #FF6B6B;">{high_priority}</span>
+                <span class="stat-label">High Priority</span>
+            </div>
+            <div class="stat-item">
+                <span class="stat-value">{total_time}</span>
+                <span class="stat-label">min total</span>
+            </div>
+        </div>
+    </div>
+    """
+
+
+def create_animated_map():
+    """創建動畫地圖（模擬）"""
+    fig = go.Figure()
+
+    # 模擬路線點
+    lats = [25.033, 25.045, 25.055, 25.040]
+    lons = [121.565, 121.575, 121.585, 121.570]
+
+    fig.add_trace(go.Scattermapbox(
+        lat=lats,
+        lon=lons,
+        mode='markers+lines',
+        marker=dict(size=12, color='#4A90E2'),
+        line=dict(width=3, color='#50C878'),
+        text=['Start', 'Task 1', 'Task 2', 'End'],
+        hoverinfo='text'
+    ))
+
+    fig.update_layout(
+        mapbox=dict(
+            style='open-street-map',
+            center=dict(lat=25.043, lon=121.575),
+            zoom=12
+        ),
+        margin=dict(l=0, r=0, t=0, b=0),
+        height=500
+    )
+
+    return fig
+
+
+def get_reasoning_html_reversed(reasoning_messages: list = None) -> str:
+    """獲取推理過程 HTML（反向排序，最新在上）"""
+    if not reasoning_messages:
+        return '<div class="reasoning-timeline"><p style="text-align: center; opacity: 0.6;">No reasoning messages yet...</p></div>'
+
+    items_html = ""
+    for msg in reversed(reasoning_messages[-20:]):  # 只顯示最近20條，反向
+        agent_info = AGENTS_INFO.get(msg.get('agent', 'planner'), {})
+        color = agent_info.get('color', '#4A90E2')
+        avatar = agent_info.get('avatar', '🤖')
+
+        items_html += f"""
+        <div class="reasoning-item" style="--agent-color: {color};">
+            <div class="reasoning-header">
+                <span>{avatar}</span>
+                <span class="reasoning-agent">{msg.get('agent', 'Agent')}</span>
+                <span class="reasoning-time">{msg.get('time', '')}</span>
+            </div>
+            <div class="reasoning-content">{msg.get('message', '')}</div>
+        </div>
+        """
+
+    return f'<div class="reasoning-timeline">{items_html}</div>'
+
+
+def create_celebration_animation() -> str:
+    """創建慶祝動畫（純 CSS 撒花效果）- Gradio 兼容版本"""
+    import random
+
+    # 生成 100 個隨機位置和動畫的撒花元素
+    confetti_html = ""
+    colors = ['#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A', '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2']
+
+    for i in range(100):
+        left = random.randint(0, 100)
+        delay = random.uniform(0, 2)
+        duration = random.uniform(3, 6)
+        rotation = random.randint(0, 360)
+        color = random.choice(colors)
+        size = random.randint(8, 15)
+
+        confetti_html += f"""
+        <div class="confetti" style="
+            left: {left}%;
+            animation-delay: {delay}s;
+            animation-duration: {duration}s;
+            background-color: {color};
+            width: {size}px;
+            height: {size}px;
+            transform: rotate({rotation}deg);
+        "></div>
+        """
+
+    return f"""
+    <div class="celebration-overlay">
+        {confetti_html}
+    </div>
+
+    <style>
+    @keyframes confetti-fall {{
+        0% {{
+            transform: translateY(-100vh) rotate(0deg);
+            opacity: 1;
+        }}
+        100% {{
+            transform: translateY(100vh) rotate(720deg);
+            opacity: 0;
+        }}
+    }}
+
+    @keyframes celebration-fade {{
+        0% {{ opacity: 1; }}
+        80% {{ opacity: 1; }}
+        100% {{ opacity: 0; }}
+    }}
+
+    .celebration-overlay {{
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        pointer-events: none;
+        z-index: 9999;
+        overflow: hidden;
+        animation: celebration-fade 6s forwards;
+    }}
+
+    .confetti {{
+        position: absolute;
+        top: -20px;
+        animation: confetti-fall linear infinite;
+        opacity: 0.9;
+    }}
+    </style>
+    """
+
+
+def create_result_visualization(task_list: list) -> str:
+    """
+    創建詳細的結果視覺化卡片
+    包含：快速摘要、時間線預覽、優化指標、關鍵亮點
+    """
+    # 計算統計數據
+    total_tasks = len(task_list)
+    total_time_min = sum(int(t.get('duration', '0').split()[0]) for t in task_list)
+    total_time_hours = total_time_min // 60
+    total_time_remain = total_time_min % 60
+    time_str = f"{total_time_hours}h {total_time_remain}min" if total_time_hours > 0 else f"{total_time_min}min"
+
+    # 模擬數據（實際應該從優化結果獲取）
+    total_distance = 2.8
+    efficiency = 95
+    time_saved = 25
+    distance_reduced = 12
+
+    # 構建 HTML
+    html = f"""
+    <div class="result-visualization">
+        <!-- 標題 -->
+        <div class="result-header">
+            <h2 style="color: #50C878; margin: 0; font-size: 28px; display: flex; align-items: center; gap: 10px;">
+                <span class="celebration-icon" style="font-size: 36px; animation: bounce 1s infinite;">🎉</span>
+                <span>Planning Complete!</span>
+            </h2>
+            <p style="margin: 10px 0 0 0; opacity: 0.8; font-size: 14px;">Your optimized route is ready</p>
+        </div>
+
+        <!-- 快速摘要 -->
+        <div class="quick-summary" style="margin-top: 25px;">
+            <h3 style="font-size: 18px; margin: 0 0 15px 0; color: #333;">📊 Quick Summary</h3>
+            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;">
+                <div class="summary-metric">
+                    <div class="metric-icon">🎯</div>
+                    <div class="metric-content">
+                        <div class="metric-value">{total_tasks}</div>
+                        <div class="metric-label">Total Tasks</div>
+                    </div>
+                </div>
+                <div class="summary-metric">
+                    <div class="metric-icon">⏱️</div>
+                    <div class="metric-content">
+                        <div class="metric-value">{time_str}</div>
+                        <div class="metric-label">Total Time</div>
+                    </div>
+                </div>
+                <div class="summary-metric">
+                    <div class="metric-icon">🚗</div>
+                    <div class="metric-content">
+                        <div class="metric-value">{total_distance}km</div>
+                        <div class="metric-label">Total Distance</div>
+                    </div>
+                </div>
+                <div class="summary-metric success">
+                    <div class="metric-icon">✅</div>
+                    <div class="metric-content">
+                        <div class="metric-value">All Met</div>
+                        <div class="metric-label">Deadlines</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- 時間線預覽 -->
+        <div class="timeline-preview" style="margin-top: 25px;">
+            <h3 style="font-size: 18px; margin: 0 0 15px 0; color: #333;">🗓️ Timeline Preview</h3>
+            <div class="timeline-container">
+"""
+
+    # 添加時間線項目
+    for i, task in enumerate(task_list):
+        task_time = task.get('time', 'Anytime')
+        task_title = task.get('title', 'Task')
+        task_icon = task.get('icon', '📋')
+
+        # 解析時間（簡化示例）
+        if '-' in task_time:
+            times = task_time.split('-')
+            start = times[0].strip()
+            end = times[1].strip()
+        else:
+            start = '10:00'
+            end = '10:30'
+
+        html += f"""
+                <div class="timeline-item">
+                    <div class="timeline-time">{start}</div>
+                    <div class="timeline-connector">━━━</div>
+                    <div class="timeline-task">
+                        <span class="timeline-icon">{task_icon}</span>
+                        <span class="timeline-title">{task_title}</span>
+                    </div>
+                    <div class="timeline-connector">━━━</div>
+                    <div class="timeline-time">{end}</div>
+                </div>
+"""
+
+        # 添加旅行時間（除了最後一個任務）
+        if i < len(task_list) - 1:
+            travel_time = ['15min', '20min', '10min'][i] if i < 3 else '15min'
+            html += f"""
+                <div class="timeline-travel">
+                    <div class="travel-arrow">↓</div>
+                    <div class="travel-time">{travel_time}</div>
+                </div>
+"""
+
+    html += """
+            </div>
+        </div>
+
+        <!-- 優化指標 -->
+        <div class="optimization-metrics" style="margin-top: 25px;">
+            <h3 style="font-size: 18px; margin: 0 0 15px 0; color: #333;">📈 Optimization Metrics</h3>
+            <div class="metrics-grid">
+"""
+
+    # 添加進度條指標
+    metrics = [
+        ("Route Efficiency", efficiency, "#50C878"),
+        ("Time Optimization", 100 - (time_saved / 60 * 100), "#4A90E2"),
+        ("Distance Reduction", distance_reduced, "#F5A623")
+    ]
+
+    for label, value, color in metrics:
+        html += f"""
+                <div class="metric-bar">
+                    <div class="metric-bar-header">
+                        <span class="metric-bar-label">{label}</span>
+                        <span class="metric-bar-value">{int(value)}%</span>
+                    </div>
+                    <div class="metric-bar-track">
+                        <div class="metric-bar-fill" style="width: {value}%; background: {color};"></div>
+                    </div>
+                </div>
+"""
+
+    html += """
+            </div>
+            <div class="optimization-stats" style="margin-top: 15px; display: flex; gap: 20px; flex-wrap: wrap;">
+                <div class="stat-badge">
+                    <span class="stat-badge-icon">⚡</span>
+                    <span class="stat-badge-text">Time Saved: <strong>25 min</strong></span>
+                </div>
+                <div class="stat-badge">
+                    <span class="stat-badge-icon">📏</span>
+                    <span class="stat-badge-text">Distance Reduced: <strong>12%</strong></span>
+                </div>
+            </div>
+        </div>
+
+        <!-- 關鍵亮點 -->
+        <div class="key-highlights" style="margin-top: 25px;">
+            <h3 style="font-size: 18px; margin: 0 0 15px 0; color: #333;">⚡ Key Highlights</h3>
+            <div class="highlights-list">
+                <div class="highlight-item success">
+                    <span class="highlight-icon">✓</span>
+                    <span class="highlight-text">No traffic delays expected</span>
+                </div>
+                <div class="highlight-item success">
+                    <span class="highlight-icon">✓</span>
+                    <span class="highlight-text">All locations open during visit</span>
+                </div>
+                <div class="highlight-item success">
+                    <span class="highlight-icon">✓</span>
+                    <span class="highlight-text">Weather conditions: Favorable</span>
+                </div>
+                <div class="highlight-item info">
+                    <span class="highlight-icon">ℹ</span>
+                    <span class="highlight-text">Recommended departure: 08:45 AM</span>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <style>
+    @keyframes bounce {
+        0%, 100% { transform: translateY(0); }
+        50% { transform: translateY(-10px); }
+    }
+
+    .result-visualization {
+        padding: 25px;
+        background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+        border-radius: 15px;
+        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
+    }
+
+    .quick-summary .summary-metric {
+        background: white;
+        padding: 15px;
+        border-radius: 12px;
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+        transition: transform 0.2s;
+    }
+
+    .quick-summary .summary-metric:hover {
+        transform: translateY(-3px);
+        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+    }
+
+    .quick-summary .summary-metric.success {
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+    }
+
+    .metric-icon {
+        font-size: 28px;
+    }
+
+    .metric-value {
+        font-size: 20px;
+        font-weight: bold;
+        line-height: 1.2;
+    }
+
+    .metric-label {
+        font-size: 12px;
+        opacity: 0.8;
+    }
+
+    .timeline-preview {
+        background: white;
+        padding: 20px;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    }
+
+    .timeline-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin: 8px 0;
+        font-size: 14px;
+    }
+
+    .timeline-time {
+        font-weight: 600;
+        color: #4A90E2;
+        min-width: 50px;
+    }
+
+    .timeline-connector {
+        color: #ddd;
+        font-weight: bold;
+    }
+
+    .timeline-task {
+        background: #f0f4f8;
+        padding: 8px 12px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex: 1;
+    }
+
+    .timeline-travel {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-left: 60px;
+        font-size: 13px;
+        color: #666;
+    }
+
+    .travel-arrow {
+        color: #4A90E2;
+        font-weight: bold;
+    }
+
+    .optimization-metrics {
+        background: white;
+        padding: 20px;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    }
+
+    .metric-bar {
+        margin-bottom: 15px;
+    }
+
+    .metric-bar-header {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 6px;
+        font-size: 13px;
+    }
+
+    .metric-bar-label {
+        font-weight: 500;
+    }
+
+    .metric-bar-value {
+        font-weight: 600;
+        color: #50C878;
+    }
+
+    .metric-bar-track {
+        height: 8px;
+        background: #e0e0e0;
+        border-radius: 4px;
+        overflow: hidden;
+    }
+
+    .metric-bar-fill {
+        height: 100%;
+        border-radius: 4px;
+        transition: width 1s ease-out;
+    }
+
+    .stat-badge {
+        background: #f0f4f8;
+        padding: 8px 15px;
+        border-radius: 20px;
+        display: inline-flex;
+        align-items: center;
+        gap: 8px;
+        font-size: 13px;
+    }
+
+    .stat-badge-icon {
+        font-size: 16px;
+    }
+
+    .key-highlights {
+        background: white;
+        padding: 20px;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+    }
+
+    .highlight-item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 10px;
+        margin: 6px 0;
+        border-radius: 8px;
+        font-size: 14px;
+    }
+
+    .highlight-item.success {
+        background: #e8f5e9;
+    }
+
+    .highlight-item.info {
+        background: #e3f2fd;
+    }
+
+    .highlight-icon {
+        font-size: 18px;
+        font-weight: bold;
+    }
+
+    .highlight-item.success .highlight-icon {
+        color: #4CAF50;
+    }
+
+    .highlight-item.info .highlight-icon {
+        color: #2196F3;
+    }
+    </style>
+    """
+
+    return html