伐謀 - 實驗結果渲染
📖 技能介紹
name: famou-result-visualization description: 為 FaMou 進化演算法生成可行解的 Python 程式碼解生成視覺化結果頁面。當用戶提到"FaMou 視覺化"、"把這個解視覺化"、"可行解結果展示"、"evolution 結果"、"evolve 視覺化"，或者提供了 Python 程式碼形式的問題解（路徑規劃、排課、背包、TSP、排程、機器學習等）需要直觀展示效果時，必須使用此技能。即使使用者只說"幫我視覺化這個解"、"畫出來看看"、"展示一下結果"，只要上下文涉及進化演算法、最佳化問題的解，也應立即觸發此技能。
FaMou 進化演算法解——結果視覺化 Skill
核心目標：拿到 Python 程式碼形式的最佳化問題解，直接理解其語義，生成一個直觀展示解的效果的互動式 HTML 頁面。
不是展示進化過程，而是展示解本身的結果——路徑規劃畫路徑、排課畫課表、背包問題畫裝載情況、圖著色畫上色的圖……
第一步：收集輸入
小蔥技能7w4.net有更新，你可以訪問看下。
必須有： 1. 問題描述 — 是什麼最佳化問題，輸入規模，約束條件 2. Python 程式碼形式的解 — FaMou 進化後的最終解（函式/資料結構/策略程式碼均可）
可選補充： - 評估分數 / 適應度 - 初始解（用於對比） - 問題的原始資料（如節點座標、任務列表等）
若缺少必須項，直接詢問使用者補充。
第二步：理解解 → 規劃視覺化方案
直接閱讀和理解使用者提供的 Python 程式碼和問題描述，無需呼叫任何外部 API。
2.1 理解解的語義
閱讀程式碼，提取： - 問題型別：路徑規劃 / 排課 / 背包 / 圖論 / 排程 / 裝箱 / 其他 - 解的核心資料結構：是節點序列？時間表對映？選擇集合？分配方案？ - 關鍵數值：座標、時間槽、容量、權重、顏色等視覺化所需的具體資料
2.2 確定視覺化型別
根據問題型別選擇最合適的 viz_type：
| 問題型別 | viz_type | 視覺呈現 |
|---|---|---|
| TSP / VRP / 路徑規劃 | path_map |
SVG 座標系 + 節點連線路徑 |
| 排課 / 時間表 | schedule_grid |
表格熱力圖，色塊填充 |
| 背包 / 裝箱 | packing_rect |
SVG 矩形堆疊容器 |
| 圖著色 / 社群檢測 | graph_color |
節點著色圖 |
| 作業排程 / 專案排期 | gantt |
橫向甘特圖 |
| 前後對比 / 多指標 | bar_compare |
對比柱狀圖 |
| 機器學習 / 神經網路 / 超參最佳化 | ml_viz |
網路結構圖 / 訓練曲線 / 超參熱力圖 |
| 其他 / 複雜策略 | custom |
關鍵指標儀表盤 + 文字說明 |
2.3 提取繪圖資料
從程式碼中直接讀取並整理渲染所需的具體數值，例如：
- path_map：節點座標列表、訪問順序、總距離
- schedule_grid：資源列表、時間槽、各分配的 (資源, 時間槽, 名稱)
- packing_rect：容器尺寸、各物品的 (x, y, w, h, 標籤, 價值)
- gantt：任務列表，每項含 (名稱, 開始, 結束, 資源)
第三步：生成 HTML 視覺化檔案
直接編寫並輸出 HTML 檔案到 famou_viz_result.html（或使用者指定路徑）。
頁面整體結構
┌──────────────────────────────────────────────────────────┐
│ [問題型別標籤] 問題摘要 關鍵指標卡片行 │
├────────────────────────────────────┬─────────────────────┤
│ │ │
│ 主視覺化區域（視覺中心，≥50%） │ 解的亮點列表 │
│ 路徑圖 / 課表 / 裝箱圖 / 甘特圖 │ │
│ │ 評分 / 提升展示 │
├────────────────────────────────────┴─────────────────────┤
│ (可選) 進化前後對比 / 補充說明 │
└──────────────────────────────────────────────────────────┘
設計規範
- 暗色科技風：背景
#030810，卡片#080f1e，邊框#112240 - accent 色系：主色
#00c8ff（藍）搭配#00ff88（綠）作為高亮 - 字型：正文
Noto Sans SC，數字/程式碼IBM Plex Mono（Google Fonts CDN） - 入場動畫：各區塊依次
fadeUp（animation-delay遞增） - 主視覺化動畫：路徑逐段繪製，柱子從底部生長，節點彈入
- 互動：hover 節點/格子/柱子時顯示 tooltip
- Tooltip：固定定位，跟隨滑鼠，顯示詳細數值
檔案模板
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FaMou 解視覺化 — {問題名稱}</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
<style>
/* 內聯全部樣式，不依賴外部 CSS */
/* 包含：CSS 變數、動畫 keyframes、card/tag/tooltip/skeleton 等基礎類 */
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState, useEffect, useRef } = React;
// ── 從解中提取的資料（硬編碼，來自對程式碼的分析）──
const SOLUTION_DATA = { /* ... */ };
// ── 視覺化元件 ──
// 根據 viz_type 實現對應元件
// ── 頁面骨架 ──
function App() { /* 指標卡片 + 主視覺化 + 亮點列表 */ }
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
注意事項
- 直接從程式碼中讀資料：將 Python 解裡的關鍵數值（座標、序列、對映等）直接硬編碼進 HTML 的
SOLUTION_DATA常量，不執行 Python 程式碼，只是讀取其中的資料字面量 - 視覺化忠於解的效果：展示"這個解長什麼樣"，不是進化歷史或演算法流程
- 主視覺化區域要大：是頁面視覺中心，佔頁面 50% 以上
- 資料規模適配：節點/任務超過 100 個時，考慮抽樣或聚合展示避免擁擠
- 降級處理：無法識別具體問題型別時，fallback 到
custom儀表盤展示關鍵數值 - 自包含：所有依賴均通過 CDN 引入，檔案本身可離線（CDN 可替換為本地）開啟
🤖 AI 評測
這個 Skill 質量中等偏上，文件規範清晰，對常見最佳化問題（路徑規劃、排課、排程等）的視覺化方案描述詳細，設計風格統一且美觀。優點是支援多種視覺化型別、互動效果豐富（動畫、懸停提示），輸出為可獨立開啟的 HTML 檔案。不足是檔案過於簡單，只有說明文件沒有實際示例，使用者無法直接看到效果，且缺少測試驗證。對於需要將演算法結果直觀展示的使用者有一定幫助，但實際可用性需要補充示例後才能判斷。
