Spaces:

UltraMarkoBR
/

anycoder-5d0b9423

Running

App Files Files Community

UltraMarkoBR commited on Mar 13

Commit

ca798e3

verified ·

1 Parent(s): 10575bc

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +792 -19

index.html CHANGED Viewed

@@ -1,19 +1,792 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Synapse | Adaptive Neural Simulation</title>
+    <!-- Fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&family=Inter:wght@300;400;600;800&display=swap" rel="stylesheet">
+    <!-- Icons -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        :root {
+            --bg-color: #050505;
+            --panel-bg: rgba(20, 20, 25, 0.6);
+            --text-main: #ffffff;
+            --text-muted: #888899;
+            --accent-primary: #00f3ff; /* Cyan */
+            --accent-secondary: #bc13fe; /* Magenta */
+            --accent-success: #00ff9d; /* Green */
+            --accent-danger: #ff0055;
+            --font-display: 'Inter', sans-serif;
+            --font-mono: 'JetBrains Mono', monospace;
+            --glass-border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            background-color: var(--bg-color);
+            color: var(--text-main);
+            font-family: var(--font-display);
+            overflow: hidden; /* Prevent scroll, full app feel */
+            height: 100vh;
+            width: 100vw;
+            position: relative;
+        }
+        /* Canvas Layer */
+        #neural-canvas {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 0;
+        }
+        /* UI Overlay Layer */
+        .ui-layer {
+            position: relative;
+            z-index: 10;
+            width: 100%;
+            height: 100%;
+            pointer-events: none; /* Let clicks pass through to canvas where needed */
+            display: grid;
+            grid-template-columns: 300px 1fr 300px;
+            grid-template-rows: 80px 1fr 60px;
+            padding: 20px;
+            gap: 20px;
+        }
+        /* Header */
+        header {
+            grid-column: 1 / -1;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            background: var(--panel-bg);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: var(--glass-border);
+            border-radius: 12px;
+            padding: 0 24px;
+            pointer-events: auto;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
+        }
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+        }
+        .brand i {
+            color: var(--accent-primary);
+            font-size: 1.5rem;
+            animation: pulse 2s infinite;
+        }
+        .brand h1 {
+            font-size: 1.2rem;
+            font-weight: 800;
+            letter-spacing: -0.5px;
+            text-transform: uppercase;
+        }
+        .brand span {
+            color: var(--accent-secondary);
+            font-size: 0.8rem;
+            background: rgba(188, 19, 254, 0.1);
+            padding: 2px 8px;
+            border-radius: 4px;
+        }
+        /* Stats Bar */
+        .stats-container {
+            display: flex;
+            gap: 30px;
+        }
+        .stat-item {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+        }
+        .stat-label {
+            font-size: 0.7rem;
+            color: var(--text-muted);
+            font-family: var(--font-mono);
+            text-transform: uppercase;
+        }
+        .stat-value {
+            font-size: 1.2rem;
+            font-weight: 700;
+            font-family: var(--font-mono);
+            color: var(--accent-primary);
+        }
+        /* Sidebar Controls */
+        aside {
+            pointer-events: auto;
+            background: var(--panel-bg);
+            backdrop-filter: blur(12px);
+            border: var(--glass-border);
+            border-radius: 12px;
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+            transition: transform 0.3s ease;
+        }
+        .panel-title {
+            font-size: 0.9rem;
+            font-weight: 600;
+            color: var(--text-main);
+            border-bottom: 1px solid rgba(255,255,255,0.1);
+            padding-bottom: 10px;
+            margin-bottom: 5px;
+        }
+        .control-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        label {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            display: flex;
+            justify-content: space-between;
+        }
+        input[type="range"] {
+            -webkit-appearance: none;
+            width: 100%;
+            height: 4px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 2px;
+            outline: none;
+        }
+        input[type="range"]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 16px;
+            height: 16px;
+            background: var(--accent-primary);
+            border-radius: 50%;
+            cursor: pointer;
+            transition: transform 0.1s;
+        }
+        input[type="range"]::-webkit-slider-thumb:hover {
+            transform: scale(1.2);
+        }
+        .btn {
+            background: rgba(255,255,255,0.05);
+            border: 1px solid rgba(255,255,255,0.1);
+            color: white;
+            padding: 10px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-family: var(--font-mono);
+            font-size: 0.8rem;
+            transition: all 0.2s;
+            text-align: center;
+        }
+        .btn:hover {
+            background: rgba(255,255,255,0.1);
+            border-color: var(--accent-primary);
+        }
+        .btn-primary {
+            background: var(--accent-primary);
+            color: #000;
+            border: none;
+            font-weight: 700;
+        }
+        .btn-primary:hover {
+            background: #fff;
+            box-shadow: 0 0 15px var(--accent-primary);
+        }
+        .btn-danger {
+            border-color: var(--accent-danger);
+            color: var(--accent-danger);
+        }
+        .btn-danger:hover {
+            background: var(--accent-danger);
+            color: white;
+        }
+        /* Log Panel */
+        #log-panel {
+            grid-column: 3;
+            grid-row: 2;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        .log-content {
+            font-family: var(--font-mono);
+            font-size: 0.75rem;
+            color: var(--text-muted);
+            overflow-y: auto;
+            height: 100%;
+            display: flex;
+            flex-direction: column-reverse; /* Newest at bottom visually, but we prepend */
+        }
+        .log-entry {
+            margin-bottom: 6px;
+            padding-left: 10px;
+            border-left: 2px solid transparent;
+            animation: slideIn 0.3s ease-out;
+        }
+        .log-entry.info { border-color: var(--accent-primary); color: #ccc; }
+        .log-entry.success { border-color: var(--accent-success); color: var(--accent-success); }
+        .log-entry.warn { border-color: var(--accent-secondary); color: var(--accent-secondary); }
+        /* Footer */
+        footer {
+            grid-column: 1 / -1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            pointer-events: auto;
+        }
+        .anycoder-link {
+            color: var(--text-muted);
+            text-decoration: none;
+            font-size: 0.8rem;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 8px 16px;
+            background: rgba(0,0,0,0.5);
+            border-radius: 20px;
+            border: 1px solid rgba(255,255,255,0.05);
+            transition: all 0.3s;
+        }
+        .anycoder-link:hover {
+            color: var(--accent-primary);
+            border-color: var(--accent-primary);
+            background: rgba(0, 243, 255, 0.05);
+        }
+        /* Animations */
+        @keyframes pulse {
+            0% { opacity: 0.6; text-shadow: 0 0 5px var(--accent-primary); }
+            50% { opacity: 1; text-shadow: 0 0 20px var(--accent-primary); }
+            100% { opacity: 0.6; text-shadow: 0 0 5px var(--accent-primary); }
+        }
+        @keyframes slideIn {
+            from { opacity: 0; transform: translateX(10px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        /* Responsive */
+        @media (max-width: 1024px) {
+            .ui-layer {
+                grid-template-columns: 1fr;
+                grid-template-rows: auto auto 1fr auto;
+                gap: 10px;
+                padding: 10px;
+            }
+            header { grid-column: 1; }
+            aside {
+                grid-column: 1;
+                flex-direction: row;
+                flex-wrap: wrap;
+                height: auto;
+                padding: 10px;
+            }
+            #log-panel {
+                grid-column: 1;
+                grid-row: 3;
+                height: 150px;
+            }
+            footer { grid-column: 1; grid-row: 4; }
+            .stats-container { display: none; } /* Hide stats on small mobile to save space */
+        }
+    </style>
+</head>
+<body>
+    <canvas id="neural-canvas"></canvas>
+    <div class="ui-layer">
+        <header>
+            <div class="brand">
+                <i class="fa-solid fa-brain"></i>
+                <h1>Synapse <span>v2.4</span></h1>
+            </div>
+            <div class="stats-container">
+                <div class="stat-item">
+                    <span class="stat-label">Population</span>
+                    <span class="stat-value" id="stat-pop">0</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-label">Generation</span>
+                    <span class="stat-value" id="stat-gen">1</span>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-label">Avg Fitness</span>
+                    <span class="stat-value" id="stat-fit">0%</span>
+                </div>
+            </div>
+            <div class="brand" style="opacity: 0.5;">
+                <i class="fa-solid fa-microchip" style="animation: none; color: #fff;"></i>
+                <span style="background:transparent; padding:0;">SYSTEM ONLINE</span>
+            </div>
+        </header>
+        <aside>
+            <div class="control-group" style="flex: 1; min-width: 200px;">
+                <div class="panel-title">Simulation Parameters</div>
+                <div class="control-group">
+                    <label>Mutation Rate <span id="val-mutation">5%</span></label>
+                    <input type="range" id="inp-mutation" min="1" max="50" value="5">
+                </div>
+                <div class="control-group">
+                    <label>Food Spawn Rate <span id="val-food">Normal</span></label>
+                    <input type="range" id="inp-food" min="1" max="10" value="5">
+                </div>
+                <div class="control-group">
+                    <label>Max Population <span id="val-maxpop">200</span></label>
+                    <input type="range" id="inp-maxpop" min="50" max="1000" value="200">
+                </div>
+            </div>
+            <div class="control-group" style="justify-content: flex-end;">
+                <button class="btn btn-primary" id="btn-reset"><i class="fa-solid fa-rotate-right"></i> REBOOT SYSTEM</button>
+                <button class="btn btn-danger" id="btn-purge"><i class="fa-solid fa-trash"></i> PURGE WEAK</button>
+            </div>
+        </aside>
+        <aside id="log-panel">
+            <div class="panel-title">System Log</div>
+            <div class="log-content" id="log-container">
+                <!-- Logs go here -->
+            </div>
+        </aside>
+        <footer>
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="anycoder-link">
+                <i class="fa-solid fa-code"></i> Built with anycoder
+            </a>
+        </footer>
+    </div>
+    <script>
+        /**
+         * SYNAPSE ENGINE
+         * A self-adapting particle system simulation.
+         */
+        const canvas = document.getElementById('neural-canvas');
+        const ctx = canvas.getContext('2d');
+        // UI Elements
+        const ui = {
+            pop: document.getElementById('stat-pop'),
+            gen: document.getElementById('stat-gen'),
+            fit: document.getElementById('stat-fit'),
+            logs: document.getElementById('log-container'),
+            inputs: {
+                mutation: document.getElementById('inp-mutation'),
+                food: document.getElementById('inp-food'),
+                maxPop: document.getElementById('inp-maxpop')
+            },
+            labels: {
+                mutation: document.getElementById('val-mutation'),
+                food: document.getElementById('val-food'),
+                maxPop: document.getElementById('val-maxpop')
+            }
+        };
+        // State
+        let width, height;
+        let agents = [];
+        let foods = [];
+        let frame = 0;
+        let globalGeneration = 1;
+        let totalFitness = 0;
+        // Config
+        const config = {
+            mutationRate: 0.05,
+            foodSpawnRate: 5,
+            maxPopulation: 200,
+            baseSpeed: 2,
+            sensorRange: 100
+        };
+        // Resize Handler
+        function resize() {
+            width = canvas.width = window.innerWidth;
+            height = canvas.height = window.innerHeight;
+        }
+        window.addEventListener('resize', resize);
+        resize();
+        // Logger
+        function log(msg, type = 'info') {
+            const div = document.createElement('div');
+            div.className = `log-entry ${type}`;
+            div.innerHTML = `<span style="opacity:0.5">[${new Date().toLocaleTimeString().split(' ')[0]}]</span> ${msg}`;
+            ui.logs.prepend(div);
+            if (ui.logs.children.length > 20) ui.logs.lastChild.remove();
+        }
+        // Classes
+        class Vector {
+            constructor(x, y) { this.x = x; this.y = y; }
+            add(v) { this.x += v.x; this.y += v.y; }
+            mult(n) { this.x *= n; this.y *= n; }
+            limit(max) {
+                const magSq = this.x*this.x + this.y*this.y;
+                if (magSq > max*max) {
+                    this.div(Math.sqrt(magSq));
+                    this.mult(max);
+                }
+            }
+            div(n) { this.x /= n; this.y /= n; }
+            copy() { return new Vector(this.x, this.y); }
+            static sub(v1, v2) { return new Vector(v1.x - v2.x, v1.y - v2.y); }
+            static random2D() {
+                const angle = Math.random() * Math.PI * 2;
+                return new Vector(Math.cos(angle), Math.sin(angle));
+            }
+        }
+        class Food {
+            constructor(x, y) {
+                this.pos = new Vector(x || Math.random() * width, y || Math.random() * height);
+                this.size = 4;
+                this.color = '#00ff9d';
+            }
+            draw() {
+                ctx.beginPath();
+                ctx.arc(this.pos.x, this.pos.y, this.size, 0, Math.PI * 2);
+                ctx.fillStyle = this.color;
+                ctx.shadowBlur = 10;
+                ctx.shadowColor = this.color;
+                ctx.fill();
+                ctx.shadowBlur = 0;
+            }
+        }
+        class Agent {
+            constructor(x, y, dna) {
+                this.pos = new Vector(x || Math.random() * width, y || Math.random() * height);
+                this.vel = Vector.random2D();
+                this.acc = new Vector(0, 0);
+                this.r = 6;
+                this.maxSpeed = config.baseSpeed;
+                this.maxForce = 0.2;
+                this.health = 100;
+                this.dna = dna || { speed: 1, sense: 1, color: 'hsl(190, 100%, 50%)' };
+                this.generation = 1;
+                this.fitness = 0;
+                // Apply DNA
+                if(dna) {
+                    this.maxSpeed = config.baseSpeed * dna.speed;
+                    this.r = 6 * dna.sense;
+                }
+            }
+            update() {
+                this.health -= 0.2; // Metabolism
+                this.vel.add(this.acc);
+                this.vel.limit(this.maxSpeed);
+                this.pos.add(this.vel);
+                this.acc.mult(0);
+                // Wrap around screen
+                if (this.pos.x > width) this.pos.x = 0;
+                if (this.pos.x < 0) this.pos.x = width;
+                if (this.pos.y > height) this.pos.y = 0;
+                if (this.pos.y < 0) this.pos.y = height;
+            }
+            applyForce(force) {
+                this.acc.add(force);
+            }
+            seek(target) {
+                let desired = Vector.sub(target, this.pos);
+                desired.normalize();
+                desired.mult(this.maxSpeed);
+                let steer = Vector.sub(desired, this.vel);
+                steer.limit(this.maxForce);
+                this.applyForce(steer);
+            }
+            behave(foods) {
+                let closest = null;
+                let closestDist = Infinity;
+                // Find closest food
+                for (let food of foods) {
+                    let d = Math.hypot(food.pos.x - this.pos.x, food.pos.y - this.pos.y);
+                    if (d < closestDist && d < config.sensorRange * this.dna.sense) {
+                        closestDist = d;
+                        closest = food;
+                    }
+                }
+                if (closest) {
+                    this.seek(closest.pos);
+                    this.fitness += 0.1; // Reward for seeking
+                } else {
+                    // Wander if no food
+                    this.vel.add(Vector.random2D().mult(0.5));
+                    this.vel.limit(this.maxSpeed);
+                }
+            }
+            eat(foods) {
+                for (let i = foods.length - 1; i >= 0; i--) {
+                    let d = Math.hypot(foods[i].pos.x - this.pos.x, foods[i].pos.y - this.pos.y);
+                    if (d < this.r + foods[i].size) {
+                        foods.splice(i, 1);
+                        this.health += 40;
+                        this.fitness += 10;
+                        return true;
+                    }
+                }
+                return false;
+            }
+            draw() {
+                ctx.beginPath();
+                ctx.arc(this.pos.x, this.pos.y, this.r, 0, Math.PI * 2);
+                ctx.fillStyle = this.dna.color;
+                // Visual indicator of health
+                ctx.globalAlpha = Math.max(0.2, this.health / 100);
+                ctx.fill();
+                // Draw direction indicator
+                ctx.beginPath();
+                ctx.moveTo(this.pos.x, this.pos.y);
+                ctx.lineTo(this.pos.x + this.vel.x * 10, this.pos.y + this.vel.y * 10);
+                ctx.strokeStyle = 'rgba(255,255,255,0.3)';
+                ctx.stroke();
+                ctx.globalAlpha = 1;
+            }
+            // Genetic Algorithm: Reproduce
+            reproduce(partner) {
+                if (this.health > 150 && agents.length < config.maxPopulation) {
+                    // Mix DNA
+                    const newSpeed = (this.dna.speed + partner.dna.speed) / 2;
+                    const newSense = (this.dna.sense + partner.dna.sense) / 2;
+                    // Mutate
+                    const mutateSpeed = (Math.random() < config.mutationRate) ? (Math.random() * 0.4 + 0.8) : 1;
+                    const mutateSense = (Math.random() < config.mutationRate) ? (Math.random() * 0.4 + 0.8) : 1;
+                    const childDNA = {
+                        speed: newSpeed * mutateSpeed,
+                        sense: newSense * mutateSense,
+                        color: this.dna.color // Simplify color inheritance for now
+                    };
+                    // Cap stats to prevent physics breaking
+                    if(childDNA.speed > 3) childDNA.speed = 3;
+                    if(childDNA.sense > 2) childDNA.sense = 2;
+                    const child = new Agent(this.pos.x, this.pos.y, childDNA);
+                    child.generation = Math.max(this.generation, partner.generation) + 1;
+                    agents.push(child);
+                    // Visual feedback
+                    if(child.generation > globalGeneration) {
+                        globalGeneration = child.generation;
+                        log(`Evolution detected: Gen ${globalGeneration}`, 'success');
+                        updateStats();
+                    }
+                    this.health -= 40;
+                    partner.health -= 40;
+                }
+            }
+        }
+        // Initialization
+        function init() {
+            agents = [];
+            foods = [];
+            globalGeneration = 1;
+            totalFitness = 0;
+            for (let i = 0; i < 50; i++) {
+                agents.push(new Agent());
+            }
+            log("System initialized. 50 Agents spawned.");
+            updateStats();
+        }
+        // Main Loop
+        function animate() {
+            // Trail effect
+            ctx.fillStyle = 'rgba(5, 5, 5, 0.2)';
+            ctx.fillRect(0, 0, width, height);
+            // Spawn Food
+            if (frame % (11 - config.foodSpawnRate) === 0) {
+                foods.push(new Food());
+            }
+            // Draw Connections (Neural Network visual)
+            ctx.strokeStyle = 'rgba(0, 243, 255, 0.05)';
+            ctx.lineWidth = 1;
+            ctx.beginPath();
+            for (let i = 0; i < agents.length; i++) {
+                for (let j = i + 1; j < agents.length; j++) {
+                    let d = Math.hypot(agents[i].pos.x - agents[j].pos.x, agents[i].pos.y - agents[j].pos.y);
+                    if (d < 100) {
+                        ctx.moveTo(agents[i].pos.x, agents[i].pos.y);
+                        ctx.lineTo(agents[j].pos.x, agents[j].pos.y);
+                    }
+                }
+            }
+            ctx.stroke();
+            // Update Agents
+            for (let i = agents.length - 1; i >= 0; i--) {
+                let agent = agents[i];
+                agent.behave(foods);
+                agent.update();
+                agent.eat(foods);
+                agent.draw();
+                // Reproduction logic (simplified: seek nearby healthy agent)
+                if (agent.health > 120) {
+                    // Simple proximity check for mating
+                    for (let j = 0; j < agents.length; j++) {
+                        if (i !== j && agents[j].health > 120) {
+                            let d = Math.hypot(agent.pos.x - agents[j].pos.x, agent.pos.y - agents[j].pos.y);
+                            if (d < 50) {
+                                agent.reproduce(agents[j]);
+                                break;
+                            }
+                        }
+                    }
+                }
+                // Death
+                if (agent.health <= 0) {
+                    agents.splice(i, 1);
+                    // Spawn a new random one to keep population going if it crashes
+                    if(agents.length < 5) {
+                         agents.push(new Agent());
+                         log("Critical population low. Injecting new DNA.", "warn");
+                    }
+                }
+            }
+            // Draw Food
+            for (let food of foods) {
+                food.draw();
+            }
+            // Stats Update (throttled)
+            if (frame % 60 === 0) {
+                updateStats();
+            }
+            frame++;
+            requestAnimationFrame(animate);
+        }
+        function updateStats() {
+            ui.pop.innerText = agents.length;
+            ui.gen.innerText = globalGeneration;
+            // Calculate avg fitness roughly
+            let totalFit = agents.reduce((acc, a) => acc + a.fitness, 0);
+            let avg = agents.length > 0 ? Math.floor(totalFit / agents.length) : 0;
+            ui.fit.innerText = avg + " pts";
+        }
+        // Interaction
+        canvas.addEventListener('mousedown', (e) => {
+            // Spawn a burst of food
+            for(let i=0; i<5; i++) {
+                foods.push(new Food(e.clientX + (Math.random()*40-20), e.clientY + (Math.random()*40-20)));
+            }
+            log("Energy injected at cursor location.");
+        });
+        // Controls
+        ui.inputs.mutation.addEventListener('input', (e) => {
+            config.mutationRate = e.target.value / 100;
+            ui.labels.mutation.innerText = e.target.value + "%";
+        });
+        ui.inputs.food.addEventListener('input', (e) => {
+            config.foodSpawnRate = parseInt(e.target.value);
+            const labels = ["Starving", "Low", "Normal", "High", "Abundant", "Overload"];
+            const idx = Math.min(Math.floor((e.target.value-1)/2), 5);
+            ui.labels.food.innerText = labels[idx] || "Normal";
+        });
+        ui.inputs.maxPop.addEventListener('input', (e) => {
+            config.maxPopulation = parseInt(e.target.value);
+            ui.labels.maxPop.innerText = config.maxPopulation;
+        });
+        document.getElementById('btn-reset').addEventListener('click', () => {
+            init();
+            log("System rebooted.", "info");
+        });
+        document.getElementById('btn-purge').addEventListener('click', () => {
+            // Kill bottom 50% fitness
+            agents.sort((a, b) => b.fitness - a.fitness);
+            const cut = Math.floor(agents.length / 2);
+            agents.splice(cut);
+            log(`Purged ${cut} weakest agents.`, "warn");
+            updateStats();
+        });
+        // Start
+        init();
+        animate();
+    </script>
+</body>
+</html>