Feat: Upgrade map to Folium with Google Maps style UI, Card Popup, and Layer Control

app.py

@@ -296,7 +296,8 @@ class LifeFlowAI:
 
                     # Right: Hero Map
                     with gr.Column(scale=2, elem_classes="split-right-panel"):
-                        map_view = gr.Plot(label="Route Map", show_label=False)
+                        #map_view = gr.Plot(label="Route Map", show_label=False)
+                        map_view = gr.HTML(label="Route Map")
 
             # Modals & Events
             (settings_modal, g_key, w_key, llm_provider,
@@ -380,7 +381,7 @@ class LifeFlowAI:
 def main():
     app = LifeFlowAI()
     demo = app.build_interface()
-    demo.launch(server_name="0.0.0.0", server_port=7860, share=True, show_error=True)
+    demo.launch(server_name="0.0.0.0", server_port=8080, share=True, show_error=True)
     #7860
 if __name__ == "__main__":
     main()

core/visualizers.py

@@ -1,113 +1,333 @@
-"""
-LifeFlow AI - Visualizers (Fixed)
-✅ 確保 create_animated_map 永遠回傳 go.Figure 物件
-✅ 防止回傳字串導致 Gradio 崩潰
-"""
-import plotly.graph_objects as go
+import folium
+from folium import plugins
 from core.helpers import decode_polyline
 from src.infra.logger import get_logger
 
 logger = get_logger(__name__)
 
-def create_animated_map(structured_data=None):
+# --- CSS 樣式：讓 Popup 變成漂亮的資訊卡片 ---
+CSS_STYLE = """
+<style>
+    .map-card {
+        font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
+        width: 300px;
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 4px 15px rgba(0,0,0,0.15);
+    }
+    .card-header {
+        padding: 12px 15px;
+        color: white;
+        font-weight: bold;
+        font-size: 14px;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+    }
+    .card-body {
+        padding: 15px;
+        font-size: 13px;
+        color: #333;
+        background-color: #fff;
+    }
+    .card-subtitle {
+        font-weight: 600; 
+        margin-bottom: 10px; 
+        font-size: 14px;
+        color: #2c3e50;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 8px;
+    }
+    .info-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 8px;
+    }
+    .info-item {
+        background: #f8f9fa;
+        padding: 8px;
+        border-radius: 6px;
+        text-align: center;
+        border: 1px solid #e9ecef;
+    }
+    .info-label {
+        font-size: 10px;
+        color: #7f8c8d;
+        text-transform: uppercase;
+        margin-bottom: 2px;
+        letter-spacing: 0.5px;
+    }
+    .info-value {
+        font-weight: bold;
+        font-size: 12px;
+        color: #2c3e50;
+    }
+    .cost-badge {
+        background: #ffebee;
+        color: #c62828;
+        padding: 4px 10px;
+        border-radius: 12px;
+        font-size: 11px;
+        font-weight: bold;
+        display: inline-block;
+        margin-top: 10px;
+        width: 100%;
+        text-align: center;
+        box-sizing: border-box;
+    }
+</style>
+"""
+
+
+def create_popup_html(title, subtitle, color, metrics, is_alternative=False):
+    """
+    產生漂亮的 HTML 卡片字串
     """
-    生成地圖物件。
-    注意：必須回傳 go.Figure()，絕對不能回傳字串！
+    # 定義顏色代碼
+    bg_color = {
+        'green': '#2ecc71',  # Stop 1 (Start)
+        'blue': '#3498db',  # Waypoints
+        'red': '#e74c3c',  # Stop N (End)
+        'gray': '#7f8c8d',  # Alternative
+        'route': '#4285F4'  # Route Leg
+    }.get(color, '#34495e')
+
+    # 構建數據網格
+    grid_html = ""
+    for label, value in metrics.items():
+        if value:  # 只顯示有值的欄位
+            grid_html += f"""
+            <div class="info-item">
+                <div class="info-label">{label}</div>
+                <div class="info-value">{value}</div>
+            </div>
+            """
+
+    # 備用方案的額外標示
+    extra_html = ""
+    if is_alternative:
+        extra_html = """
+        <div class="cost-badge">⚠️ 替代方案 (Alternative Option)</div>
+        """
+
+    html = f"""
+    <div class="map-card">
+        <div class="card-header" style="background: {bg_color};">
+            <span>{title}</span>
+            <i class="fa fa-info-circle" style="opacity: 0.8;"></i>
+        </div>
+        <div class="card-body">
+            <div class="card-subtitle">{subtitle}</div>
+            <div class="info-grid">
+                {grid_html}
+            </div>
+            {extra_html}
+        </div>
+    </div>
     """
-    # 1. 初始化一個空地圖 (預設值)
-    fig = go.Figure()
+    return html
+
 
-    # 設定預設中心點 (台北101)
+def create_animated_map(structured_data=None):
+    """
+    LifeFlow AI - Interactive Map Generator
+    產生包含完整資訊、圖層控制與美化 UI 的 HTML 地圖。
+    """
+    # 1. 初始化地圖 (預設台北)
     center_lat, center_lon = 25.033, 121.565
-    zoom_level = 13
+    m = folium.Map(location=[center_lat, center_lon], zoom_start=13, tiles="OpenStreetMap")
+
+    # 注入 CSS 樣式
+    m.get_root().html.add_child(folium.Element(CSS_STYLE))
 
-    # 2. 如果沒有數據，直接回傳空地圖
     if not structured_data:
-        # 加一個透明點定住中心
-        fig.add_trace(go.Scattermapbox(
-            lat=[center_lat], lon=[center_lon],
-            mode='markers', marker=dict(size=0, opacity=0)
-        ))
-    else:
-        try:
-            timeline = structured_data.get("timeline", [])
-            precise_result = structured_data.get("precise_traffic_result", {})
-            legs = precise_result.get("legs", [])
-
-            # --- 繪製路線 (Polyline) ---
-            route_lats, route_lons = [], []
-            for leg in legs:
-                poly_str = leg.get("polyline")
-                if poly_str:
-                    decoded = decode_polyline(poly_str)
-                    route_lats.extend([c[0] for c in decoded])
-                    route_lons.extend([c[1] for c in decoded])
-                    # 斷開不同路段
-                    route_lats.append(None)
-                    route_lons.append(None)
-
-            if route_lats:
-                fig.add_trace(go.Scattermapbox(
-                    lat=route_lats, lon=route_lons, mode='lines',
-                    line=dict(width=5, color='#6366f1'), # Primary Purple
-                    name='Route', hoverinfo='none'
-                ))
-
-            # --- 繪製站點 (Markers) ---
-            lats, lons, hover_texts, colors, sizes = [], [], [], [], []
-
-            for i, stop in enumerate(timeline):
-                coords = stop.get("coordinates", {})
-                lat = coords.get("lat")
-                lng = coords.get("lng")
-
-                if lat and lng:
-                    lats.append(lat)
-                    lons.append(lng)
-
-                    name = stop.get("location", f"Stop {i}")
-                    time = stop.get("time", "")
-                    weather = stop.get("weather", "")
-
-                    text = f"<b>{i+1}. {name}</b><br>🕒 {time}<br>🌤️ {weather}"
-                    hover_texts.append(text)
-
-                    # 顏色邏輯：起點綠、終點紅、中間黃
-                    if i == 0:
-                        colors.append('#10b981'); sizes.append(20)
-                    elif i == len(timeline)-1:
-                        colors.append('#ef4444'); sizes.append(20)
-                    else:
-                        colors.append('#f59e0b'); sizes.append(15)
-
-            if lats:
-                fig.add_trace(go.Scattermapbox(
-                    lat=lats, lon=lons, mode='markers+text',
-                    marker=dict(size=sizes, color=colors, allowoverlap=True),
-                    text=[str(i+1) for i in range(len(lats))],
-                    textposition="top center",
-                    textfont=dict(size=14, color='black', family="Arial Black"),
-                    hovertext=hover_texts, hoverinfo='text', name='Stops'
-                ))
-
-                # 更新中心點為路徑中心
-                center_lat = sum(lats) / len(lats)
-                center_lon = sum(lons) / len(lons)
-
-        except Exception as e:
-            logger.error(f"Map generation error: {e}", exc_info=True)
-            # 發生錯誤時，保持回傳預設的 fig，不要讓程式崩潰
-
-    # 3. 設定地圖樣式
-    fig.update_layout(
-        mapbox=dict(
-            style='open-street-map',
-            center=dict(lat=center_lat, lon=center_lon),
-            zoom=zoom_level
-        ),
-        margin=dict(l=0, r=0, t=0, b=0),
-        height=700, # 地圖高度
-        showlegend=False
-    )
-
-    return fig
+        return m._repr_html_()
+
+    try:
+        # --- 資料提取 ---
+        timeline = structured_data.get("timeline", [])
+        precise_result = structured_data.get("precise_traffic_result", {})
+        legs = precise_result.get("legs", [])
+        tasks_detail = structured_data.get("tasks_detail", [])
+        raw_tasks = structured_data.get("tasks", [])
+
+        # 建立查找表 (Lookup Maps)
+        # Stop Index -> Location Name (用於路線顯示)
+        index_to_name = {stop.get("stop_index"): stop.get("location") for stop in timeline}
+
+        # POI ID -> Name (用於替代點顯示，解決只有 ID 沒有名字的問題)
+        poi_id_to_name = {}
+        for t in raw_tasks:
+            for cand in t.get("candidates", []):
+                if cand.get("poi_id"):
+                    poi_id_to_name[cand["poi_id"]] = cand.get("name")
+
+        bounds = []
+
+        # 定義主題色輪替
+        THEMES = [
+            ('#2ecc71', 'green'),  # Stop 1
+            ('#3498db', 'blue'),  # Stop 2
+            ('#e74c3c', 'red'),  # Stop 3
+            ('#f39c12', 'orange')  # Others
+        ]
+
+        # --- Layer 1: 路線 (Route) ---
+        route_group = folium.FeatureGroup(name="🚗 行駛路徑 (Main Route)", show=True)
+
+        # 1.1 背景特效 (AntPath)
+        all_coords = []
+        for leg in legs:
+            if leg.get("polyline"):
+                all_coords.extend(decode_polyline(leg["polyline"]))
+
+        if all_coords:
+            plugins.AntPath(
+                locations=all_coords, color="#555", weight=8, dash_array=[10, 20],
+                opacity=0.2, pulse_color='#FFFFFF', hardware_acceleration=True
+            ).add_to(route_group)
+
+        # 1.2 前景互動線 (PolyLine)
+        for i, leg in enumerate(legs):
+            poly_str = leg.get("polyline")
+            if not poly_str: continue
+
+            decoded = decode_polyline(poly_str)
+            bounds.extend(decoded)
+
+            # 準備數據
+            dist = leg.get("distance_meters", 0)
+            dur = leg.get("duration_seconds", 0) // 60
+            from_idx = leg.get("from_index")
+            to_idx = leg.get("to_index")
+            from_n = index_to_name.get(from_idx, f"Point {from_idx}")
+            to_n = index_to_name.get(to_idx, f"Point {to_idx}")
+
+            popup_html = create_popup_html(
+                title=f"LEG {i + 1} ROUTE",
+                subtitle=f"{from_n} ➔ {to_n}",
+                color="route",
+                metrics={
+                    "預估時間": f"{dur} min",
+                    "行駛距離": f"{dist / 1000:.1f} km"
+                }
+            )
+
+            folium.PolyLine(
+                locations=decoded, color="#4285F4", weight=6, opacity=0.9,
+                tooltip=f"Leg {i + 1}: {dur} min",
+                popup=folium.Popup(popup_html, max_width=320)
+            ).add_to(route_group)
+
+        route_group.add_to(m)
+
+        # --- Layer 2: 備用方案 (Alternatives) ---
+        # 依據 Task 分組，讓使用者可以開關特定站點的備用方案
+        for idx, task in enumerate(tasks_detail):
+            # 決定顏色主題 (跳過起點，對應到中間站點)
+            theme_idx = (idx + 1) % len(THEMES)
+            theme_color, theme_name = THEMES[theme_idx]
+
+            group_name = f"🔹 站點 {idx + 1} 備選 ({theme_name.upper()})"
+            alt_group = folium.FeatureGroup(name=group_name, show=True)
+
+            chosen = task.get("chosen_poi", {})
+            center_lat, center_lng = chosen.get("lat"), chosen.get("lng")
+
+            if center_lat and center_lng:
+                for alt in task.get("alternative_pois", []):
+                    alat, alng = alt.get("lat"), alt.get("lng")
+                    if alat and alng:
+                        bounds.append([alat, alng])
+
+                        # A. 虛線連接 (主站點 -> 備用點)
+                        folium.PolyLine(
+                            locations=[[center_lat, center_lng], [alat, alng]],
+                            color=theme_color, weight=2, dash_array='5, 5', opacity=0.6
+                        ).add_to(alt_group)
+
+                        # B. 備用點 Marker
+                        poi_name = poi_id_to_name.get(alt.get("poi_id"), "Alternative Option")
+                        extra_min = alt.get("delta_travel_time_min", 0)
+                        extra_dist = alt.get("delta_travel_distance_m", 0)
+
+                        popup_html = create_popup_html(
+                            title="ALTERNATIVE POI",
+                            subtitle=poi_name,
+                            color="gray",
+                            metrics={
+                                "額外時間": f"+{extra_min} min",
+                                "額外距離": f"+{extra_dist} m"
+                            },
+                            is_alternative=True
+                        )
+
+                        folium.CircleMarker(
+                            location=[alat, alng], radius=7,
+                            color=theme_color, fill=True, fill_color="white", fill_opacity=1,
+                            popup=folium.Popup(popup_html, max_width=320),
+                            tooltip=f"備選: {poi_name}"
+                        ).add_to(alt_group)
+
+            alt_group.add_to(m)
+
+        # --- Layer 3: 主要站點 (Main Stops) ---
+        stops_group = folium.FeatureGroup(name="📍 主要行程站點", show=True)
+
+        for i, stop in enumerate(timeline):
+            coords = stop.get("coordinates", {})
+            lat, lng = coords.get("lat"), coords.get("lng")
+
+            if lat and lng:
+                bounds.append([lat, lng])
+
+                # 決定顏色
+                if i == 0:
+                    color_code, theme_name = THEMES[0]  # Green
+                elif i == len(timeline) - 1:
+                    color_code, theme_name = THEMES[2]  # Red
+                else:
+                    color_code, theme_name = THEMES[1]  # Blue
+
+                loc_name = stop.get("location", "")
+
+                popup_html = create_popup_html(
+                    title=f"STOP {i + 1}",
+                    subtitle=loc_name,
+                    color=theme_name,
+                    metrics={
+                        "抵達時間": stop.get("time", ""),
+                        "天氣": stop.get("weather", ""),
+                        "空氣品質": stop.get("aqi", {}).get("label", "")
+                    }
+                )
+
+                # Icon 設定
+                icon_type = 'flag-checkered' if i == len(timeline) - 1 else ('play' if i == 0 else 'utensils')
+                icon = folium.Icon(color=theme_name, icon=icon_type, prefix='fa')
+
+                folium.Marker(
+                    location=[lat, lng], icon=icon,
+                    popup=folium.Popup(popup_html, max_width=320),
+                    tooltip=f"第 {i + 1} 站: {loc_name}"
+                ).add_to(stops_group)
+
+        stops_group.add_to(m)
+
+        # --- 控制元件 ---
+        folium.LayerControl(collapsed=False).add_to(m)
+
+        if bounds:
+            m.fit_bounds(bounds, padding=(50, 50))
+
+    except Exception as e:
+        logger.error(f"Folium map error: {e}", exc_info=True)
+        return m._repr_html_()
+
+    return m._repr_html_()
+
+if __name__ == "__main__":
+    test_data =  {'status': 'OK', 'total_travel_time_min': 19, 'total_travel_distance_m': 7567, 'metrics': {'total_tasks': 2, 'completed_tasks': 2, 'completion_rate_pct': 100.0, 'original_distance_m': 15478, 'optimized_distance_m': 7567, 'distance_saved_m': 7911, 'distance_improvement_pct': 51.1, 'original_duration_min': 249, 'optimized_duration_min': 229, 'time_saved_min': 20, 'time_improvement_pct': 8.4, 'route_efficiency_pct': 91.7}, 'route': [{'step': 0, 'node_index': 0, 'arrival_time': '2025-11-27T10:00:00+08:00', 'departure_time': '2025-11-27T10:00:00+08:00', 'type': 'depot', 'task_id': None, 'poi_id': None, 'service_duration_min': 0}, {'step': 1, 'node_index': 1, 'arrival_time': '2025-11-27T10:17:57+08:00', 'departure_time': '2025-11-27T12:17:57+08:00', 'type': 'task_poi', 'task_id': '1', 'poi_id': 'ChIJH56c2rarQjQRphD9gvC8BhI', 'service_duration_min': 120}, {'step': 2, 'node_index': 7, 'arrival_time': '2025-11-27T12:19:05+08:00', 'departure_time': '2025-11-27T13:49:05+08:00', 'type': 'task_poi', 'task_id': '2', 'poi_id': 'ChIJQXcl6LarQjQRGUMnQ18F0lE', 'service_duration_min': 90}], 'visited_tasks': ['1', '2'], 'skipped_tasks': [], 'tasks_detail': [{'task_id': '1', 'priority': 'HIGH', 'visited': True, 'chosen_poi': {'node_index': 1, 'poi_id': 'ChIJH56c2rarQjQRphD9gvC8BhI', 'lat': 25.033976, 'lng': 121.56453889999999, 'interval_idx': 0}, 'alternative_pois': []}, {'task_id': '2', 'priority': 'HIGH', 'visited': True, 'chosen_poi': {'node_index': 7, 'poi_id': 'ChIJQXcl6LarQjQRGUMnQ18F0lE', 'lat': 25.033337099999997, 'lng': 121.56465960000001, 'interval_idx': 0}, 'alternative_pois': [{'node_index': 10, 'poi_id': 'ChIJwQWwVe6rQjQRRGA4WzYdO2U', 'lat': 25.036873699999997, 'lng': 121.5679503, 'interval_idx': 0, 'delta_travel_time_min': 7, 'delta_travel_distance_m': 2003}, {'node_index': 6, 'poi_id': 'ChIJ01XRzrurQjQRnp5ZsHbAAuE', 'lat': 25.039739800000003, 'lng': 121.5665985, 'interval_idx': 0, 'delta_travel_time_min': 9, 'delta_travel_distance_m': 2145}, {'node_index': 5, 'poi_id': 'ChIJaeY0sNCrQjQRBmpF8-RmywQ', 'lat': 25.0409656, 'lng': 121.5429975, 'interval_idx': 0, 'delta_travel_time_min': 24, 'delta_travel_distance_m': 6549}]}], 'tasks': [{'task_id': '1', 'priority': 'HIGH', 'service_duration_min': 120, 'time_window': {'earliest_time': '2025-11-27T10:00:00+08:00', 'latest_time': '2025-11-27T22:00:00+08:00'}, 'candidates': [{'poi_id': 'ChIJH56c2rarQjQRphD9gvC8BhI', 'name': 'Taipei 101', 'lat': 25.033976, 'lng': 121.56453889999999, 'rating': None, 'time_window': None}]}, {'task_id': '2', 'priority': 'HIGH', 'service_duration_min': 90, 'time_window': {'earliest_time': '2025-11-27T11:30:00+08:00', 'latest_time': '2025-11-27T14:30:00+08:00'}, 'candidates': [{'poi_id': 'ChIJbbvUtW6pQjQRLvK71hSUXN8', 'name': 'Din Tai Fung Mitsukoshi Nanxi Restaurant', 'lat': 25.0523074, 'lng': 121.5211037, 'rating': 4.4, 'time_window': None}, {'poi_id': 'ChIJA-U6X-epQjQR-T9BLmEfUlc', 'name': 'Din Tai Fung Xinsheng Branch', 'lat': 25.033889, 'lng': 121.5321338, 'rating': 4.6, 'time_window': None}, {'poi_id': 'ChIJbTKSE4KpQjQRXDZZI57v-pM', 'name': 'Din Tai Fung Xinyi Branch', 'lat': 25.0335035, 'lng': 121.53011799999999, 'rating': 4.4, 'time_window': None}, {'poi_id': 'ChIJaeY0sNCrQjQRBmpF8-RmywQ', 'name': 'Din Tai Fung Fuxing Restaurant', 'lat': 25.0409656, 'lng': 121.5429975, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJ01XRzrurQjQRnp5ZsHbAAuE', 'name': 'Din Tai Fung A4 Branch', 'lat': 25.039739800000003, 'lng': 121.5665985, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJQXcl6LarQjQRGUMnQ18F0lE', 'name': 'Din Tai Fung 101', 'lat': 25.033337099999997, 'lng': 121.56465960000001, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJ7y2qTJeuQjQRbpDcQImxLO0', 'name': 'Din Tai Fung Tianmu Restaurant', 'lat': 25.105072000000003, 'lng': 121.52447500000001, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJxRJqSBmoQjQR3gtSHvJgkZk', 'name': 'Din Tai Fung Mega City Restaurant', 'lat': 25.0135467, 'lng': 121.46675080000001, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJwQWwVe6rQjQRRGA4WzYdO2U', 'name': 'Din Tai Fung A13 Branch', 'lat': 25.036873699999997, 'lng': 121.5679503, 'rating': 4.5, 'time_window': None}, {'poi_id': 'ChIJ34CbayyoQjQRDbCGQgDk_RY', 'name': 'Ding Tai Feng', 'lat': 25.0059716, 'lng': 121.48668440000002, 'rating': 3.6, 'time_window': None}]}], 'global_info': {'language': 'en-US', 'plan_type': 'TRIP', 'departure_time': '2025-11-27T10:00:00+08:00', 'start_location': {'name': 'Taipei Main Station', 'lat': 25.0474428, 'lng': 121.5170955}}, 'traffic_summary': {'total_distance_km': 7.567, 'total_duration_min': 15}, 'precise_traffic_result': {'total_distance_meters': 7567, 'total_duration_seconds': 925, 'total_residence_time_minutes': 210, 'total_time_seconds': 13525, 'start_time': '2025-11-27 10:00:00+08:00', 'end_time': '2025-11-27 05:45:25+00:00', 'stops': [{'lat': 25.0474428, 'lng': 121.5170955}, {'lat': 25.033976, 'lng': 121.56453889999999}, {'lat': 25.033337099999997, 'lng': 121.56465960000001}], 'legs': [{'from_index': 0, 'to_index': 1, 'travel_mode': 'DRIVE', 'distance_meters': 7366, 'duration_seconds': 857, 'departure_time': '2025-11-27T02:00:00+00:00', 'polyline': 'm_{wCqttdVQbAu@KwDe@ELMTKl@C\\@LC^@PLPRJdC\\LLe@bEIj@_@|@I\\?P}EGMERqAAyAf@iD\\sC`AqKTmDJYXoDn@oFH{A`@{PNoB\\wChAyFfCaLrAcHnAyH|BeMZcCRmCNoGVcJPoI@{CIwBc@mHw@aNGeCD}BpBm^Ak@LyDB_@KmD]qDu@iGNs@SuASsBdUPZ@FcNP{ODcItBfANBxClA^D`A@As@D{@HyGpFBtD?pADlKB?|@FD`@@lAE'}, {'from_index': 1, 'to_index': 2, 'travel_mode': 'DRIVE', 'distance_meters': 201, 'duration_seconds': 68, 'departure_time': '2025-11-27T04:14:17+00:00', 'polyline': 'mmxwC}d~dVfBAXGJON]l@?CrC'}]}, 'solved_waypoints': [{'lat': 25.0474428, 'lng': 121.5170955}, {'lat': 25.033976, 'lng': 121.56453889999999}, {'lat': 25.033337099999997, 'lng': 121.56465960000001}], 'timeline': [{'stop_index': 0, 'time': '10:00', 'location': 'start point', 'address': '', 'weather': 'Rain, 20.76°C', 'aqi': {'aqi': 2, 'label': 'AQI 2 🟡'}, 'travel_time_from_prev': '0 mins', 'coordinates': {'lat': 25.0474428, 'lng': 121.5170955}}, {'stop_index': 1, 'time': '10:14', 'location': 'Taipei 101', 'address': '', 'weather': 'Rain, 20.75°C', 'aqi': {'aqi': 2, 'label': 'AQI 2 🟡'}, 'travel_time_from_prev': '14 mins', 'coordinates': {'lat': 25.033976, 'lng': 121.56453889999999}}, {'stop_index': 2, 'time': '12:15', 'location': 'Din Tai Fung Mitsukoshi Nanxi Restaurant', 'address': '', 'weather': 'Rain, 20.75°C', 'aqi': {'aqi': 2, 'label': 'AQI 2 🟡'}, 'travel_time_from_prev': '1 mins', 'coordinates': {'lat': 25.033337099999997, 'lng': 121.56465960000001}}]}
+
+    create_animated_map(structured_data=test_data)

services/planner_service.py

@@ -608,21 +608,7 @@ class PlannerService:
             metrics = structured_data.get("metrics", {})
             traffic = structured_data.get("traffic_summary", {})
 
-            print("metrics\n", metrics)
-
             # 🔥 組合 Summary Tab 的內容
-            # 包含: 總結卡片 + 演算法快樂表 + 時間軸
-            task_count = len(session.task_list)
-            high_prio = sum(1 for t in session.task_list if t.get("priority") == "HIGH")
-            total_time = traffic.get("total_duration_min", 0)
-
-            summary_card = create_summary_card(task_count, high_prio, int(total_time))
-            metrics_viz = create_result_visualization(session.task_list, structured_data)
-
-            # 將三個元件合併為一個 HTML (用於 Summary Tab)
-            # 順序: Card -> Viz -> Timeline
-            full_summary_html = f"{summary_card}<br/>{metrics_viz}<br/><h3>📍 Timeline</h3>{timeline_html}"
-
             task_count = len(session.task_list)
             high_prio = sum(1 for t in session.task_list if t.get("priority") == "HIGH")
 
@@ -637,11 +623,12 @@ class PlannerService:
             efficiency = metrics.get("route_efficiency_pct", 0)
             saved_dist_m = metrics.get("distance_saved_m", 0)
             saved_time_min = metrics.get("time_saved_min", 0)
+            start_location = structured_data.get("global_info", {}).get("start_location", {}).get("name", "N/A")
+            date = structured_data.get("global_info", {}).get("departure_time", "N/A")
 
-            summary_card = create_summary_card(task_count, high_prio, int(total_time))
+            summary_card = create_summary_card(task_count, high_prio, int(total_time), start_location, date)
 
             # B. 進階數據快樂表 (AI Efficiency & Distance)
-            # 根據效率分數改變顏色 (高於 80% 綠色，否則橘色)
             eff_color = "#047857" if efficiency >= 80 else "#d97706"
             eff_bg = "#ecfdf5" if efficiency >= 80 else "#fffbeb"
             eff_border = "#a7f3d0" if efficiency >= 80 else "#fde68a"
@@ -675,14 +662,14 @@ class PlannerService:
             full_summary_html = f"{summary_card}{ai_stats_html}<h3>📍 Itinerary Timeline</h3>{timeline_html}"
 
             # C. 其他 Tab 內容
-            task_list_html = self.generate_task_list_html(session)
+            # task_list_html = self.generate_task_list_html(session)
 
             # 3. Map
             map_fig = create_animated_map(structured_data)
-            if isinstance(map_fig, str):
-                logger.error(f"CRITICAL: map_fig is a string ('{map_fig}'). Creating default map.")
-                from core.visualizers import create_animated_map as default_map_gen
-                map_fig = default_map_gen(None)
+            #if isinstance(map_fig, str):
+            #    logger.error(f"CRITICAL: map_fig is a string ('{map_fig}'). Creating default map.")
+            #    from core.visualizers import create_animated_map as default_map_gen
+            #   map_fig = default_map_gen(None)
 
             # 4. Task List
             task_list_html = self.generate_task_list_html(session)

src/tools/reader_toolkit.py

@@ -24,7 +24,6 @@ class ReaderToolkit(Toolkit):
                     logger.warning(f"🔄 Auto-Correcting: Switching to latest Session ID: {latest_id}")
                     data = poi_repo.load(latest_id)
 
-
         if not data:
             return "CRITICAL_ERROR: Ref ID not found."
         if not data.get("timeline"):