famou-result-visualization

FaMou Evolutionary Algorithm Solution — Result Visualization Skill

Core objective: Take an optimization problem solution in the form of Python code, directly understand its semantics, and generate an intuitive display of theeffect of the solutionas an interactive HTML page.

It is not about showing the evolution process, but about showingthe result of the solution itself— path planning draws the path, course scheduling draws the timetable, the knapsack problem draws the loading situation, graph coloring draws the colored graph…

Step 1: Collect input

Required：

Problem description — what the optimization problem is, the input scale, the constraints
Solution in the form of Python code — the final solution after FaMou evolution (function/data structure/strategy code are all acceptable)

Optional supplements：

Evaluation score / fitness
Initial solution (for comparison)
The original data of the problem (such as node coordinates, task list, etc.)

If required items are missing, directly ask the user to provide them.

Step 2: Understand the solution → plan the visualization approach

Directly read and understandthe Python code and problem description provided by the user, without calling any external API.

2.1 Understand the semantics of the solution

Read the code and extract:

Problem type: path planning / course scheduling / knapsack / graph theory / scheduling / bin packing / other
Core data structure of the solution: is it a node sequence? A timetable mapping? A selection set? An assignment plan?
Key values: coordinates, time slots, capacities, weights, colors, and other specific data needed for visualization

2.2 Determine the visualization type

Choose the most suitable viz_type：

Problem type	viz_type	Visual presentation
TSP / VRP / path planning	`path_map`	SVG coordinate system + node connection path
Course scheduling / timetable	`schedule_grid`	Table heatmap, color-block filling
Knapsack / bin packing	`packing_rect`	SVG rectangular stacked containers
Graph coloring / community detection	`graph_color`	Node-colored graph
Job scheduling / project scheduling	`gantt`	Horizontal Gantt chart
Before-and-after comparison / multiple metrics	`bar_compare`	Comparative bar chart
Machine learning / neural networks / hyperparameter optimization	`ml_viz`	Network structure diagram / training curves / hyperparameter heatmap
Other / complex strategies	`custom`	Key metric dashboard + text description

2.3 Extract plotting data

Directly read from the code and organize the specific values needed for rendering, for example:

path_map: node coordinate list, visit order, total distance
schedule_grid: resource list, time slots, each assigned (resource, time slot, name)
packing_rect: container size, each item's (x, y, w, h, label, value)
gantt: task list, each item containing (name, start, end, resource)

Step 3: Generate the HTML visualization file

Directly write and output the HTML file to famou_viz_result.html(or a user-specified path).

Overall page structure

┌──────────────────────────────────────────────────────────┐
│  [问题类型标签]  问题摘要                  关键指标卡片行  │
├────────────────────────────────────┬─────────────────────┤
│                                    │                     │
│   主可视化区域（视觉中心，≥50%）    │   解的亮点列表       │
│   路径图 / 课表 / 装箱图 / 甘特图   │                     │
│                                    │   评分 / 提升展示    │
├────────────────────────────────────┴─────────────────────┤
│   (可选) 进化前后对比 / 补充说明                          │
└──────────────────────────────────────────────────────────┘

Design specifications

Dark tech style: background #030810, cards #080f1e, borders #112240
accent color scheme: primary color #00c8ff(blue) paired with #00ff88(green) as highlights
Font: body text Noto Sans SC, numbers/code IBM Plex Mono（Google Fonts CDN）
Entrance animation: each block sequentially fadeUp（animation-delay increment)
Main visualization animation: paths are drawn segment by segment, bars grow from the bottom, nodes pop in
Interaction: show a tooltip when hovering over nodes/cells/bars
Tooltip: fixed positioning, follows the mouse, displays detailed values

File template

<!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>

Notes

Read data directly from the code: hard-code the key values from the Python solution (coordinates, sequences, mappings, etc.) directly into the HTML's SOLUTION_DATA constants, without executing the Python code, just reading the data literals in it
Visualization faithful to the solution's effect: show "what this solution looks like", not the evolution history or algorithm flow
The main visualization area should be large: it is the visual center of the page, occupying more than 50% of the page
Data scale adaptation: when there are more than 100 nodes/tasks, consider sampling or aggregating the display to avoid crowding
Fallback handling: when the specific problem type cannot be identified, fall back to a custom dashboard displaying the key values
Self-contained: all dependencies are introduced via CDN, and the file itself can be opened offline (the CDN can be replaced with a local one)