tree_evolution_demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCTS Tree + Evolution Visualization</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            overflow-x: auto;
        }

        .container {
            max-width: 1400px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header h1 {
            font-size: 2.5em;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
        }

        .header p {
            font-size: 1.2em;
            opacity: 0.9;
        }

        .demo-container {
            display: flex;
            gap: 20px;
            align-items: flex-start;
        }

        .tree-container {
            flex: 2;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            backdrop-filter: blur(10px);
            min-height: 600px;
        }

        .evolution-panel {
            flex: 1;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            backdrop-filter: blur(10px);
            min-height: 600px;
        }

        .controls {
            text-align: center;
            margin-bottom: 20px;
        }

        .btn {
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            border: none;
            color: white;
            padding: 12px 24px;
            margin: 0 10px;
            border-radius: 25px;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }

        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }

        .tree-svg {
            width: 100%;
            height: 500px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

        .node {
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .node circle {
            stroke-width: 2px;
            transition: all 0.3s ease;
        }

        .node.root circle {
            fill: #4CAF50;
            stroke: #2E7D32;
        }

        .node.explored circle {
            fill: #2196F3;
            stroke: #1565C0;
        }

        .node.selected circle {
            fill: #FF9800;
            stroke: #E65100;
            stroke-width: 4px;
        }

        .node.evolved circle {
            fill: #E91E63;
            stroke: #AD1457;
            stroke-width: 4px;
            filter: drop-shadow(0 0 10px #E91E63);
        }

        .node text {
            font-size: 12px;
            font-weight: bold;
            text-anchor: middle;
            fill: white;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
        }

        .link {
            fill: none;
            stroke: #64B5F6;
            stroke-width: 2px;
            transition: all 0.3s ease;
        }

        .link.selected {
            stroke: #FF9800;
            stroke-width: 4px;
            filter: drop-shadow(0 0 5px #FF9800);
        }

        .link.evolved {
            stroke: #E91E63;
            stroke-width: 4px;
            filter: drop-shadow(0 0 5px #E91E63);
        }

        .evolution-step {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            border-left: 4px solid #FF9800;
            opacity: 0;
            transform: translateX(20px);
            transition: all 0.5s ease;
        }

        .evolution-step.active {
            opacity: 1;
            transform: translateX(0);
        }

        .evolution-step h4 {
            margin: 0 0 10px 0;
            color: #FFD54F;
        }

        .evolution-step .score {
            font-weight: bold;
            color: #4CAF50;
        }

        .evolution-step .mutation {
            font-style: italic;
            color: #81C784;
            margin-top: 5px;
        }

        .status {
            text-align: center;
            font-size: 1.1em;
            margin-bottom: 20px;
            padding: 10px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
        }

        .legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .legend-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .legend-circle {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            border: 2px solid;
        }

        @media (max-width: 1200px) {
            .demo-container {
                flex-direction: column;
            }
            
            .tree-container, .evolution-panel {
                flex: none;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>🌳 MCTS Tree + Evolution Visualization</h1>
            <p>Watch how MCTS explores the solution space, then evolution optimizes the best paths</p>
        </div>

        <div class="controls">
            <button class="btn" onclick="startDemo()">🚀 Start Demo</button>
            <button class="btn" onclick="resetDemo()">🔄 Reset</button>
            <button class="btn" onclick="pauseDemo()" id="pauseBtn">⏸️ Pause</button>
        </div>

        <div class="status" id="status">Ready to start MCTS Tree + Evolution demo</div>

        <div class="demo-container">
            <div class="tree-container">
                <h3 style="text-align: center; margin-bottom: 20px;">🌳 MCTS Exploration Tree</h3>
                <svg class="tree-svg" id="treeSvg"></svg>
                <div class="legend">
                    <div class="legend-item">
                        <div class="legend-circle" style="background: #4CAF50; border-color: #2E7D32;"></div>
                        <span>Root Node</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-circle" style="background: #2196F3; border-color: #1565C0;"></div>
                        <span>Explored</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-circle" style="background: #FF9800; border-color: #E65100;"></div>
                        <span>Selected for Evolution</span>
                    </div>
                    <div class="legend-item">
                        <div class="legend-circle" style="background: #E91E63; border-color: #AD1457;"></div>
                        <span>Evolved</span>
                    </div>
                </div>
            </div>

            <div class="evolution-panel">
                <h3 style="text-align: center; margin-bottom: 20px;">🧬 Evolution Process</h3>
                <div id="evolutionSteps"></div>
            </div>
        </div>
    </div>

    <script>
        let isRunning = false;
        let isPaused = false;
        let currentStep = 0;
        let animationTimeout;

        // Tree data structure
        const treeData = {
            name: "Root\nAPI Call",
            score: 0.5,
            children: [
                {
                    name: "GET /stocks\n{symbol: NVDA}",
                    score: 0.65,
                    children: [
                        {
                            name: "Process\nResponse",
                            score: 0.72,
                            children: [
                                { name: "Format\nData", score: 0.75 },
                                { name: "Calculate\nMetrics", score: 0.78 }
                            ]
                        },
                        {
                            name: "Error\nHandling",
                            score: 0.68,
                            children: [
                                { name: "Retry\nLogic", score: 0.70 }
                            ]
                        }
                    ]
                },
                {
                    name: "GET /market\n{sector: tech}",
                    score: 0.58,
                    children: [
                        {
                            name: "Filter\nResults",
                            score: 0.62,
                            children: [
                                { name: "Sort by\nVolume", score: 0.64 },
                                { name: "Top 10\nStocks", score: 0.66 }
                            ]
                        }
                    ]
                },
                {
                    name: "POST /analysis\n{data: combined}",
                    score: 0.71,
                    children: [
                        {
                            name: "ML Model\nPrediction",
                            score: 0.82,
                            children: [
                                { name: "Feature\nEngineering", score: 0.85 },
                                { name: "Ensemble\nMethod", score: 0.88 }
                            ]
                        }
                    ]
                }
            ]
        };

        // Evolution steps data
        const evolutionSteps = [
            {
                title: "🎯 Selection Phase",
                description: "Selecting high-scoring nodes from MCTS tree",
                score: "Best path: 0.88",
                mutation: "Selected: ML Model → Feature Engineering → Ensemble Method"
            },
            {
                title: "🧬 Mutation 1: Parameter Tuning",
                description: "Optimizing API parameters",
                score: "New score: 0.91",
                mutation: "Added: {batch_size: 32, learning_rate: 0.001}"
            },
            {
                title: "🔄 Mutation 2: Function Composition",
                description: "Combining multiple API calls",
                score: "New score: 0.94",
                mutation: "Composed: parallel_fetch() + aggregate_results()"
            },
            {
                title: "⚡ Mutation 3: Caching Strategy",
                description: "Adding intelligent caching layer",
                score: "New score: 0.97",
                mutation: "Added: redis_cache() with TTL optimization"
            },
            {
                title: "🎉 Evolution Complete",
                description: "Optimal solution found!",
                score: "Final score: 0.97 (+9% improvement)",
                mutation: "Ready for production deployment"
            }
        ];

        let svg, g, tree, root;

        function initializeTree() {
            const container = d3.select("#treeSvg");
            container.selectAll("*").remove();

            const width = container.node().clientWidth;
            const height = container.node().clientHeight;

            svg = container
                .attr("width", width)
                .attr("height", height);

            g = svg.append("g")
                .attr("transform", `translate(${width/2},50)`);

            tree = d3.tree().size([width - 200, height - 100]);
            root = d3.hierarchy(treeData);
            
            tree(root);

            // Add links
            g.selectAll(".link")
                .data(root.links())
                .enter().append("path")
                .attr("class", "link")
                .attr("d", d3.linkVertical()
                    .x(d => d.x)
                    .y(d => d.y));

            // Add nodes
            const node = g.selectAll(".node")
                .data(root.descendants())
                .enter().append("g")
                .attr("class", d => `node ${d.depth === 0 ? 'root' : 'explored'}`)
                .attr("transform", d => `translate(${d.x},${d.y})`);

            node.append("circle")
                .attr("r", 20);

            node.append("text")
                .attr("dy", "0.35em")
                .style("font-size", "10px")
                .text(d => d.data.name.split('\n')[0]);

            node.append("text")
                .attr("dy", "1.5em")
                .style("font-size", "8px")
                .style("opacity", 0.8)
                .text(d => d.data.score);
        }

        function startDemo() {
            if (isRunning) return;
            
            isRunning = true;
            isPaused = false;
            currentStep = 0;
            
            document.getElementById("pauseBtn").textContent = "⏸️ Pause";
            updateStatus("🌳 MCTS exploring solution space...");
            
            initializeTree();
            runMCTSPhase();
        }

        function runMCTSPhase() {
            if (!isRunning || isPaused) return;

            const nodes = g.selectAll(".node");
            const links = g.selectAll(".link");

            // Animate MCTS exploration
            nodes.transition()
                .duration(500)
                .delay((d, i) => i * 200)
                .style("opacity", 1);

            links.transition()
                .duration(500)
                .delay((d, i) => i * 200)
                .style("opacity", 1);

            // After MCTS exploration, start selection
            animationTimeout = setTimeout(() => {
                if (isRunning && !isPaused) {
                    selectBestPath();
                }
            }, 3000);
        }

        function selectBestPath() {
            updateStatus("🎯 Selecting best path for evolution...");

            // Find and highlight the best path (highest scoring)
            const bestPath = findBestPath(root);
            
            // Highlight selected nodes and links
            bestPath.nodes.forEach((node, i) => {
                setTimeout(() => {
                    if (!isRunning || isPaused) return;
                    
                    g.selectAll(".node")
                        .filter(d => d === node)
                        .classed("selected", true);
                }, i * 300);
            });

            bestPath.links.forEach((link, i) => {
                setTimeout(() => {
                    if (!isRunning || isPaused) return;
                    
                    g.selectAll(".link")
                        .filter(d => d === link)
                        .classed("selected", true);
                }, i * 300);
            });

            // Start evolution after selection
            animationTimeout = setTimeout(() => {
                if (isRunning && !isPaused) {
                    startEvolution();
                }
            }, 2000);
        }

        function findBestPath(root) {
            let bestPath = { nodes: [root], links: [], score: root.data.score };
            
            function traverse(node, currentPath, currentLinks) {
                if (!node.children || node.children.length === 0) {
                    if (node.data.score > bestPath.score) {
                        bestPath = {
                            nodes: [...currentPath, node],
                            links: [...currentLinks],
                            score: node.data.score
                        };
                    }
                    return;
                }

                node.children.forEach(child => {
                    const link = root.links().find(l => l.source === node && l.target === child);
                    traverse(child, [...currentPath, node], [...currentLinks, link]);
                });
            }

            traverse(root, [], []);
            return bestPath;
        }

        function startEvolution() {
            updateStatus("🧬 Evolution process starting...");
            
            const evolutionContainer = document.getElementById("evolutionSteps");
            evolutionContainer.innerHTML = "";

            evolutionSteps.forEach((step, index) => {
                const stepDiv = document.createElement("div");
                stepDiv.className = "evolution-step";
                stepDiv.innerHTML = `
                    <h4>${step.title}</h4>
                    <p>${step.description}</p>
                    <div class="score">${step.score}</div>
                    <div class="mutation">${step.mutation}</div>
                `;
                evolutionContainer.appendChild(stepDiv);

                // Animate each step
                setTimeout(() => {
                    if (!isRunning || isPaused) return;
                    
                    stepDiv.classList.add("active");
                    
                    if (index === evolutionSteps.length - 1) {
                        // Final step - mark evolved nodes
                        setTimeout(() => {
                            if (isRunning && !isPaused) {
                                markEvolvedNodes();
                                updateStatus("✅ Evolution complete! Optimal solution achieved.");
                                isRunning = false;
                            }
                        }, 1000);
                    }
                }, index * 1500);
            });
        }

        function markEvolvedNodes() {
            // Mark selected nodes as evolved
            g.selectAll(".node.selected")
                .classed("evolved", true)
                .classed("selected", false);

            g.selectAll(".link.selected")
                .classed("evolved", true)
                .classed("selected", false);
        }

        function pauseDemo() {
            if (!isRunning) return;
            
            isPaused = !isPaused;
            const btn = document.getElementById("pauseBtn");
            
            if (isPaused) {
                btn.textContent = "▶️ Resume";
                updateStatus("⏸️ Demo paused");
                if (animationTimeout) {
                    clearTimeout(animationTimeout);
                }
            } else {
                btn.textContent = "⏸️ Pause";
                updateStatus("▶️ Demo resumed");
                // Resume from current state
                if (currentStep < evolutionSteps.length) {
                    startEvolution();
                }
            }
        }

        function resetDemo() {
            isRunning = false;
            isPaused = false;
            currentStep = 0;
            
            if (animationTimeout) {
                clearTimeout(animationTimeout);
            }
            
            document.getElementById("pauseBtn").textContent = "⏸️ Pause";
            document.getElementById("evolutionSteps").innerHTML = "";
            updateStatus("Ready to start MCTS Tree + Evolution demo");
            
            initializeTree();
        }

        function updateStatus(message) {
            document.getElementById("status").textContent = message;
        }

        // Initialize on load
        window.addEventListener('load', () => {
            initializeTree();
        });

        // Handle window resize
        window.addEventListener('resize', () => {
            if (!isRunning) {
                initializeTree();
            }
        });
    </script>
</body>
</html>