Spaces:

traromal
/

Ant_Colony_optimization

Running

App Files Files Community

traromal commited on 29 days ago

Commit

9aab891

verified ·

1 Parent(s): 156e54f

Update index.html

Browse files

Files changed (1) hide show

index.html +226 -19

index.html CHANGED Viewed

@@ -1,19 +1,226 @@
-<!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>Ant Colony Optimization with Controls</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100vh;
+      margin: 0;
+      background: #f4f4f4;
+    }
+    canvas {
+      border: 1px solid #000;
+      background: #fff;
+      margin-top: 20px;
+    }
+    #controls {
+      margin-top: 20px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+    .control-group {
+      margin: 10px 0;
+      display: flex;
+      align-items: center;
+    }
+    .control-group label {
+      margin-right: 10px;
+    }
+    button {
+      padding: 10px 20px;
+      font-size: 16px;
+      margin: 5px;
+      cursor: pointer;
+    }
+  </style>
+</head>
+<body>
+  <h1>Ant Colony Optimization Simulation</h1>
+  <canvas id="canvas" width="600" height="400"></canvas>
+  <div id="controls">
+    <div class="control-group">
+      <label for="numAnts">Number of Ants:</label>
+      <input type="number" id="numAnts" value="200" min="1" max="500">
+    </div>
+    <div class="control-group">
+      <label for="evaporationRate">Evaporation Rate:</label>
+      <input type="range" id="evaporationRate" min="0.8" max="0.99" step="0.01" value="0.95">
+      <span id="evaporationRateValue">0.95</span>
+    </div>
+    <div class="control-group">
+      <label for="pheromoneDeposit">Pheromone Deposit:</label>
+      <input type="number" id="pheromoneDeposit" value="5" min="1" max="20">
+    </div>
+    <div class="control-group">
+      <label for="gridSize">Grid Size:</label>
+      <input type="number" id="gridSize" value="10" min="5" max="20">
+    </div>
+    <button id="start">Start Simulation</button>
+    <button id="reset">Reset</button>
+  </div>
+  <script>
+    // Canvas setup
+    const canvas = document.getElementById('canvas');
+    const ctx = canvas.getContext('2d');
+    // Control elements
+    const numAntsInput = document.getElementById('numAnts');
+    const evaporationRateInput = document.getElementById('evaporationRate');
+    const pheromoneDepositInput = document.getElementById('pheromoneDeposit');
+    const gridSizeInput = document.getElementById('gridSize');
+    const evaporationRateValue = document.getElementById('evaporationRateValue');
+    // Simulation parameters
+    let gridSize = parseInt(gridSizeInput.value);
+    let gridWidth = canvas.width / gridSize;
+    let gridHeight = canvas.height / gridSize;
+    const nest = { x: 1, y: Math.floor(gridHeight / 2) };
+    const food = { x: gridWidth - 2, y: Math.floor(gridHeight / 2) };
+    let pheromoneGrid = Array.from({ length: gridWidth }, () => Array(gridHeight).fill(0));
+    let ants = [];
+    let numAnts = parseInt(numAntsInput.value);
+    let evaporationRate = parseFloat(evaporationRateInput.value);
+    let pheromoneDeposit = parseInt(pheromoneDepositInput.value);
+    // Initialize ants
+    function initializeAnts() {
+      ants = [];
+      for (let i = 0; i < numAnts; i++) {
+        ants.push({
+          x: nest.x,
+          y: nest.y,
+          hasFood: false,
+        });
+      }
+    }
+    // Random movement for ants
+    function randomMove(ant) {
+      const directions = [
+        { dx: -1, dy: 0 }, // Left
+        { dx: 1, dy: 0 },  // Right
+        { dx: 0, dy: -1 }, // Up
+        { dx: 0, dy: 1 },  // Down
+      ];
+      const randomDirection = directions[Math.floor(Math.random() * directions.length)];
+      ant.x = Math.max(0, Math.min(gridWidth - 1, ant.x + randomDirection.dx));
+      ant.y = Math.max(0, Math.min(gridHeight - 1, ant.y + randomDirection.dy));
+    }
+    // Draw grid and elements
+    function draw() {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      // Draw pheromone trails
+      for (let x = 0; x < gridWidth; x++) {
+        for (let y = 0; y < gridHeight; y++) {
+          if (pheromoneGrid[x][y] > 0) {
+            const intensity = pheromoneGrid[x][y] / 10;
+            ctx.fillStyle = `rgba(0, 0, 255, ${intensity})`;
+            ctx.fillRect(x * gridSize, y * gridSize, gridSize, gridSize);
+          }
+        }
+      }
+      // Draw nest and food
+      ctx.fillStyle = 'green';
+      ctx.fillRect(nest.x * gridSize, nest.y * gridSize, gridSize, gridSize);
+      ctx.fillStyle = 'red';
+      ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize);
+      // Draw ants
+      ctx.fillStyle = 'black';
+      ants.forEach(ant => {
+        ctx.beginPath();
+        ctx.arc((ant.x + 0.5) * gridSize, (ant.y + 0.5) * gridSize, gridSize / 4, 0, Math.PI * 2);
+        ctx.fill();
+      });
+    }
+    // Move ants
+    function moveAnts() {
+      ants.forEach(ant => {
+        randomMove(ant); // Move randomly
+        // Check if ant reaches food or nest
+        if (ant.x === food.x && ant.y === food.y) {
+          ant.hasFood = true;
+        }
+        if (ant.x === nest.x && ant.y === nest.y) {
+          ant.hasFood = false;
+        }
+        // Deposit pheromone if carrying food
+        if (ant.hasFood) {
+          pheromoneGrid[ant.x][ant.y] += pheromoneDeposit;
+        }
+      });
+    }
+    // Evaporate pheromones
+    function evaporatePheromones() {
+      for (let x = 0; x < gridWidth; x++) {
+        for (let y = 0; y < gridHeight; y++) {
+          pheromoneGrid[x][y] *= evaporationRate;
+        }
+      }
+    }
+    // Update grid size
+    function updateGridSize() {
+      gridSize = parseInt(gridSizeInput.value);
+      gridWidth = canvas.width / gridSize;
+      gridHeight = canvas.height / gridSize;
+      pheromoneGrid = Array.from({ length: gridWidth }, () => Array(gridHeight).fill(0));
+      initializeAnts();
+    }
+    // Simulation loop
+    function simulate() {
+      moveAnts();
+      evaporatePheromones();
+      draw();
+      requestAnimationFrame(simulate);
+    }
+    // Event listeners
+    document.getElementById('start').addEventListener('click', () => {
+      updateGridSize();
+      simulate();
+    });
+    document.getElementById('reset').addEventListener('click', () => {
+      updateGridSize();
+      pheromoneGrid.forEach((row, x) => row.fill(0));
+      draw();
+    });
+    numAntsInput.addEventListener('input', () => {
+      numAnts = parseInt(numAntsInput.value);
+      initializeAnts();
+    });
+    evaporationRateInput.addEventListener('input', () => {
+      evaporationRate = parseFloat(evaporationRateInput.value);
+      evaporationRateValue.textContent = evaporationRate.toFixed(2);
+    });
+    pheromoneDepositInput.addEventListener('input', () => {
+      pheromoneDeposit = parseInt(pheromoneDepositInput.value);
+    });
+    gridSizeInput.addEventListener('input', () => {
+      updateGridSize();
+    });
+  </script>
+</body>
+</html>