生成 HTML 格式的可视化树（使用简单的 HTML/CSS）
(nodes: Dict[str, NodeInfo], root_id: str, output_file: str = "mcts_tree.html")
| 215 | |
| 216 | |
| 217 | def print_tree_html(nodes: Dict[str, NodeInfo], root_id: str, output_file: str = "mcts_tree.html"): |
| 218 | """ |
| 219 | 生成 HTML 格式的可视化树（使用简单的 HTML/CSS） |
| 220 | """ |
| 221 | html = """ |
| 222 | <!DOCTYPE html> |
| 223 | <html> |
| 224 | <head> |
| 225 | <meta charset="UTF-8"> |
| 226 | <title>MCTS Search Tree</title> |
| 227 | <style> |
| 228 | body { |
| 229 | font-family: 'Courier New', monospace; |
| 230 | margin: 20px; |
| 231 | background: #f5f5f5; |
| 232 | } |
| 233 | .container { |
| 234 | background: white; |
| 235 | padding: 20px; |
| 236 | border-radius: 8px; |
| 237 | box-shadow: 0 2px 4px rgba(0,0,0,0.1); |
| 238 | } |
| 239 | .tree { |
| 240 | margin-top: 20px; |
| 241 | } |
| 242 | .node { |
| 243 | margin: 2px 0; |
| 244 | padding: 4px 8px; |
| 245 | border-radius: 4px; |
| 246 | } |
| 247 | .root { background: #e3f2fd; } |
| 248 | .draft { background: #fff3e0; } |
| 249 | .improve { background: #e8f5e9; } |
| 250 | .debug { background: #fce4ec; } |
| 251 | .ok { color: #2e7d32; font-weight: bold; } |
| 252 | .fail { color: #c62828; font-weight: bold; } |
| 253 | .terminal { border: 2px solid #d32f2f; } |
| 254 | .indent { margin-left: 30px; } |
| 255 | h1 { color: #1976d2; } |
| 256 | .legend { |
| 257 | background: #f5f5f5; |
| 258 | padding: 10px; |
| 259 | border-radius: 4px; |
| 260 | margin-bottom: 20px; |
| 261 | } |
| 262 | </style> |
| 263 | </head> |
| 264 | <body> |
| 265 | <div class="container"> |
| 266 | <h1>MCTS Search Tree Visualization</h1> |
| 267 | |
| 268 | <div class="legend"> |
| 269 | <strong>Legend:</strong><br> |
| 270 | ✓=OK ✗=FAIL ?=unknown | [r/d/i]=root/draft/improve | m=metric | [T]=terminal |
| 271 | </div> |
| 272 | |
| 273 | <div class="tree"> |
| 274 | """ |
no test coverage detected