Famou Evolutionary Algorithm Solution — Result Visualization Skill
Core goal: Take an optimization problem solution in Python code form, understand its semantics directly, and generate an interactive HTML page that visually demonstrates the effect of the solution.
This is not about showing the evolutionary process — it's about showing what the solution looks like: draw the route for path planning, draw the timetable for scheduling, draw the packing layout for knapsack problems, draw the colored graph for graph coloring, etc.
Step 1: Collect Inputs
Required:
- Problem description — what optimization problem it is, input scale, constraints
- Solution in Python code — the final solution after Famou evolution (functions, data structures, or strategy code are all acceptable)
Optional:
- Evaluation score / fitness value
- Initial solution (for comparison)
- Original problem data (e.g. node coordinates, task list, etc.)
If any required input is missing, ask the user to provide it before proceeding.
Step 2: Understand the Solution → Plan the Visualization
Read and understand the user's Python code and problem description directly — no external API calls needed.
2.1 Understand the Solution Semantics
Read the code and extract:
- Problem type: path planning / scheduling / knapsack / graph theory / job scheduling / bin packing / other
- Core data structure of the solution: node sequence? time-slot mapping? selection set? assignment plan?
- Key values: coordinates, time slots, capacities, weights, colors, and other concrete data needed for visualization
2.2 Determine Visualization Type
Choose the most appropriate viz_type based on the problem type:
| Problem Type |
viz_type |
Visual Representation |
| TSP / VRP / Path Planning |
path_map |
SVG coordinate system + node-connected route |
| Scheduling / Timetable |
schedule_grid |
Table heatmap with colored blocks |
| Knapsack / Bin Packing |
packing_rect |
SVG stacked rectangle containers |
| Graph Coloring / Community Detection |
graph_color |
Node-colored graph |
| Job Scheduling / Project Planning |
gantt |
Horizontal Gantt chart |
| Before/After Comparison / Multi-metric |
bar_compare |
Comparative bar chart |
| ML / Neural Networks / Hyperparameter Tuning |
ml_viz |
Network structure / training curve / hyperparameter heatmap |
| Other / Complex Strategies |
custom |
Key metrics dashboard + text description |
2.3 Extract Rendering Data
Read the code directly and organize the concrete values needed for rendering, for example:
path_map: list of node coordinates, visit order, total distanceschedule_grid: resource list, time slots, each assignment as (resource, time slot, name)packing_rect: container dimensions, each item as (x, y, w, h, label, value)gantt: task list, each item containing (name, start, end, resource)
Step 3: Generate the HTML Visualization File
Write and output the HTML file directly to famou_viz_result.html (or a user-specified path).
Page Layout
┌──────────────────────────────────────────────────────────┐
│ [Problem Type Tag] Problem Summary Key Metric Cards │
├────────────────────────────────────┬─────────────────────┤
│ │ │
│ Main Visualization Area │ Solution Highlights│
│ (visual center, ≥50% of page) │ │
│ Route / Timetable / Packing / │ Score / Improvement│
│ Gantt Chart │ Display │
├────────────────────────────────────┴─────────────────────┤
│ (Optional) Before/After Comparison / Additional Notes │
└──────────────────────────────────────────────────────────┘
Design Guidelines
- Dark tech aesthetic: background
#030810, cards #080f1e, borders #112240
- Accent colors: primary
#00c8ff (blue) paired with #00ff88 (green) for highlights
- Fonts: body text
Noto Sans SC, numbers/code IBM Plex Mono (via Google Fonts CDN)
- Entrance animation: each section fades up in sequence (
fadeUp with increasing animation-delay)
- Main visualization animation: routes drawn segment by segment, bars grow from the bottom, nodes pop in
- Interactivity: hovering over nodes / grid cells / bars shows a tooltip
- Tooltip: fixed-position, follows the mouse, shows detailed values
File Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Famou Solution Visualization — {Problem Name}</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>
/* All styles inlined — no external CSS dependencies */
/* Includes: CSS variables, animation keyframes, card/tag/tooltip/skeleton base classes */
</style>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { useState, useEffect, useRef } = React;
// ── Data extracted from the solution (hardcoded from code analysis) ──
const SOLUTION_DATA = { /* ... */ };
// ── Visualization components ──
// Implement the component corresponding to viz_type
// ── Page skeleton ──
function App() { /* Metric cards + main visualization + highlights list */ }
ReactDOM.render(<App />, document.getElementById('root'));
</script>
</body>
</html>
Notes
- Read data directly from the code: Extract key values from the Python solution (coordinates, sequences, mappings, etc.) and hardcode them into the
SOLUTION_DATA constant in the HTML — do not execute the Python code, only read its data literals.
- Visualization must faithfully represent the solution: Show "what this solution looks like", not the evolutionary history or algorithm flow.
- Main visualization area should be large: It is the visual center of the page, occupying at least 50% of the page.
- Adapt to data scale: When the number of nodes/tasks exceeds 100, consider sampling or aggregating to avoid visual clutter.
- Graceful degradation: If the problem type cannot be identified, fall back to the
custom dashboard showing key metrics.
- Self-contained: All dependencies are loaded via CDN; the file can be opened offline (CDN links can be replaced with local copies).
1---2name: famou-result-visualization3description: Generate interactive visualization pages for feasible solutions produced by Famou evolutionary algorithms. Use this skill when the user mentions "Famou visualization", "visualize this solution", "show feasible solution results", "evolution results", "evolve visualization", or provides a Python-code solution (path planning, scheduling, knapsack, TSP, job scheduling, machine learning, etc.) that needs to be displayed visually. Even if the user just says "help me visualize this solution", "draw it out", or "show me the results", trigger this skill immediately whenever the context involves evolutionary algorithms or optimization problem solutions.4---56# Famou Evolutionary Algorithm Solution — Result Visualization Skill78**Core goal**: Take an optimization problem solution in Python code form, understand its semantics directly, and generate an interactive HTML page that visually demonstrates **the effect of the solution**.910This is not about showing the evolutionary process — it's about showing **what the solution looks like**: draw the route for path planning, draw the timetable for scheduling, draw the packing layout for knapsack problems, draw the colored graph for graph coloring, etc.1112---1314## Step 1: Collect Inputs1516**Required:**171. **Problem description** — what optimization problem it is, input scale, constraints182. **Solution in Python code** — the final solution after Famou evolution (functions, data structures, or strategy code are all acceptable)1920**Optional:**21- Evaluation score / fitness value22- Initial solution (for comparison)23- Original problem data (e.g. node coordinates, task list, etc.)2425If any required input is missing, ask the user to provide it before proceeding.2627---2829## Step 2: Understand the Solution → Plan the Visualization3031**Read and understand** the user's Python code and problem description directly — no external API calls needed.3233### 2.1 Understand the Solution Semantics3435Read the code and extract:36- **Problem type**: path planning / scheduling / knapsack / graph theory / job scheduling / bin packing / other37- **Core data structure of the solution**: node sequence? time-slot mapping? selection set? assignment plan?38- **Key values**: coordinates, time slots, capacities, weights, colors, and other concrete data needed for visualization3940### 2.2 Determine Visualization Type4142Choose the most appropriate `viz_type` based on the problem type:4344| Problem Type | viz_type | Visual Representation |45|---|---|---|46| TSP / VRP / Path Planning | `path_map` | SVG coordinate system + node-connected route |47| Scheduling / Timetable | `schedule_grid` | Table heatmap with colored blocks |48| Knapsack / Bin Packing | `packing_rect` | SVG stacked rectangle containers |49| Graph Coloring / Community Detection | `graph_color` | Node-colored graph |50| Job Scheduling / Project Planning | `gantt` | Horizontal Gantt chart |51| Before/After Comparison / Multi-metric | `bar_compare` | Comparative bar chart |52| ML / Neural Networks / Hyperparameter Tuning | `ml_viz` | Network structure / training curve / hyperparameter heatmap |53| Other / Complex Strategies | `custom` | Key metrics dashboard + text description |5455### 2.3 Extract Rendering Data5657Read the code directly and organize the concrete values needed for rendering, for example:58- `path_map`: list of node coordinates, visit order, total distance59- `schedule_grid`: resource list, time slots, each assignment as (resource, time slot, name)60- `packing_rect`: container dimensions, each item as (x, y, w, h, label, value)61- `gantt`: task list, each item containing (name, start, end, resource)6263---6465## Step 3: Generate the HTML Visualization File6667Write and output the HTML file directly to `famou_viz_result.html` (or a user-specified path).6869### Page Layout7071```72┌──────────────────────────────────────────────────────────┐73│ [Problem Type Tag] Problem Summary Key Metric Cards │74├────────────────────────────────────┬─────────────────────┤75│ │ │76│ Main Visualization Area │ Solution Highlights│77│ (visual center, ≥50% of page) │ │78│ Route / Timetable / Packing / │ Score / Improvement│79│ Gantt Chart │ Display │80├────────────────────────────────────┴─────────────────────┤81│ (Optional) Before/After Comparison / Additional Notes │82└──────────────────────────────────────────────────────────┘83```8485### Design Guidelines8687- **Dark tech aesthetic**: background `#030810`, cards `#080f1e`, borders `#112240`88- **Accent colors**: primary `#00c8ff` (blue) paired with `#00ff88` (green) for highlights89- **Fonts**: body text `Noto Sans SC`, numbers/code `IBM Plex Mono` (via Google Fonts CDN)90- **Entrance animation**: each section fades up in sequence (`fadeUp` with increasing `animation-delay`)91- **Main visualization animation**: routes drawn segment by segment, bars grow from the bottom, nodes pop in92- **Interactivity**: hovering over nodes / grid cells / bars shows a tooltip93- **Tooltip**: fixed-position, follows the mouse, shows detailed values9495### File Template9697```html98<!DOCTYPE html>99<html lang="en">100<head>101 <meta charset="UTF-8">102 <meta name="viewport" content="width=device-width, initial-scale=1.0">103 <title>Famou Solution Visualization — {Problem Name}</title>104 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js"></script>105 <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js"></script>106 <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.23.5/babel.min.js"></script>107 <script src="https://cdn.tailwindcss.com"></script>108 <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">109 <style>110 /* All styles inlined — no external CSS dependencies */111 /* Includes: CSS variables, animation keyframes, card/tag/tooltip/skeleton base classes */112 </style>113</head>114<body>115 <div id="root"></div>116 <script type="text/babel">117 const { useState, useEffect, useRef } = React;118119 // ── Data extracted from the solution (hardcoded from code analysis) ──120 const SOLUTION_DATA = { /* ... */ };121122 // ── Visualization components ──123 // Implement the component corresponding to viz_type124125 // ── Page skeleton ──126 function App() { /* Metric cards + main visualization + highlights list */ }127128 ReactDOM.render(<App />, document.getElementById('root'));129 </script>130</body>131</html>132```133134---135136## Notes137138- **Read data directly from the code**: Extract key values from the Python solution (coordinates, sequences, mappings, etc.) and hardcode them into the `SOLUTION_DATA` constant in the HTML — do not execute the Python code, only read its data literals.139- **Visualization must faithfully represent the solution**: Show "what this solution looks like", not the evolutionary history or algorithm flow.140- **Main visualization area should be large**: It is the visual center of the page, occupying at least 50% of the page.141- **Adapt to data scale**: When the number of nodes/tasks exceeds 100, consider sampling or aggregating to avoid visual clutter.142- **Graceful degradation**: If the problem type cannot be identified, fall back to the `custom` dashboard showing key metrics.143- **Self-contained**: All dependencies are loaded via CDN; the file can be opened offline (CDN links can be replaced with local copies).
baidubce