Spaces:

soumalya-iitj
/

AutonomousVehicleSimulator

Running

App Files Files Community

soumalya-iitj commited on Jun 9

Commit

cba7312

verified ·

1 Parent(s): 655ee20

Update index.html

Browse files

Files changed (1) hide show

index.html +367 -275

index.html CHANGED Viewed

@@ -3,20 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="Interactive Embodied AI Autonomous Vehicle Simulator - Real-time AI decision making and navigation">
-    <meta name="keywords" content="AI, autonomous vehicles, simulation, embodied AI, robotics, machine learning">
-    <meta name="author" content="Embodied AI Research">
     <title>🚗 Embodied AI - Autonomous Vehicle Simulator</title>
-    <!-- Open Graph Meta Tags for Social Sharing -->
-    <meta property="og:title" content="Embodied AI Vehicle Simulator">
-    <meta property="og:description" content="Interactive demonstration of autonomous vehicle AI with real-time decision making">
-    <meta property="og:type" content="website">
-    <meta property="og:image" content="https://via.placeholder.com/1200x630/667eea/ffffff?text=Embodied+AI+Vehicle+Simulator">
-    <!-- Favicon -->
-    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🚗</text></svg>">
     <style>
         * {
             margin: 0;
@@ -40,33 +28,12 @@
             text-align: center;
             backdrop-filter: blur(10px);
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-            position: relative;
         }
         .header h1 {
             font-size: clamp(1.8rem, 4vw, 2.5rem);
             margin-bottom: 10px;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-            background: linear-gradient(45deg, #fff, #e0e0e0);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        .header p {
-            font-size: clamp(0.9rem, 2.5vw, 1.1rem);
-            opacity: 0.9;
-        }
-        .hf-badge {
-            position: absolute;
-            top: 10px;
-            right: 20px;
-            background: rgba(255, 255, 255, 0.2);
-            padding: 5px 10px;
-            border-radius: 15px;
-            font-size: 0.8rem;
-            backdrop-filter: blur(5px);
         }
         .main-container {
@@ -86,7 +53,6 @@
             padding: 20px;
             backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.2);
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
         }
         .canvas-container {
@@ -96,7 +62,6 @@
             background: #1a1a2e;
             border-radius: 10px;
             overflow: hidden;
-            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
             border: 2px solid rgba(255, 255, 255, 0.1);
         }
@@ -115,7 +80,6 @@
             backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.2);
             height: fit-content;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
         }
         .control-section {
@@ -128,9 +92,6 @@
             color: #fff;
             border-bottom: 2px solid rgba(255, 255, 255, 0.3);
             padding-bottom: 8px;
-            display: flex;
-            align-items: center;
-            gap: 8px;
         }
         .control-group {
@@ -145,26 +106,6 @@
             font-size: 0.9rem;
         }
-        .control-group input, .control-group select {
-            width: 100%;
-            padding: 10px 12px;
-            border: none;
-            border-radius: 8px;
-            background: rgba(255, 255, 255, 0.2);
-            color: white;
-            font-size: 14px;
-            transition: background 0.3s ease;
-        }
-        .control-group input:focus, .control-group select:focus {
-            outline: 2px solid rgba(255, 255, 255, 0.5);
-            background: rgba(255, 255, 255, 0.3);
-        }
-        .control-group input::placeholder {
-            color: rgba(255, 255, 255, 0.6);
-        }
         .slider-container {
             display: flex;
             align-items: center;
@@ -173,6 +114,8 @@
         .slider-container input[type="range"] {
             flex: 1;
         }
         .slider-value {
@@ -184,6 +127,16 @@
             text-align: center;
         }
         .btn {
             width: 100%;
             padding: 12px;
@@ -194,41 +147,21 @@
             cursor: pointer;
             transition: all 0.3s ease;
             margin-bottom: 10px;
-            position: relative;
-            overflow: hidden;
-        }
-        .btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: left 0.5s;
-        }
-        .btn:hover::before {
-            left: 100%;
         }
         .btn-primary {
             background: linear-gradient(45deg, #4CAF50, #45a049);
             color: white;
-            box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3);
         }
         .btn-secondary {
             background: linear-gradient(45deg, #2196F3, #1976D2);
             color: white;
-            box-shadow: 0 4px 15px rgba(33, 150, 243, 0.3);
         }
         .btn-danger {
             background: linear-gradient(45deg, #f44336, #d32f2f);
             color: white;
-            box-shadow: 0 4px 15px rgba(244, 67, 54, 0.3);
         }
         .btn:hover {
@@ -236,10 +169,6 @@
             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
         }
-        .btn:active {
-            transform: translateY(0);
-        }
         .btn:disabled {
             opacity: 0.6;
             cursor: not-allowed;
@@ -254,12 +183,6 @@
             border: 1px solid rgba(255, 255, 255, 0.1);
         }
-        .stats h4 {
-            margin-bottom: 12px;
-            color: #fff;
-            font-size: 1.1rem;
-        }
         .stat-item {
             display: flex;
             justify-content: space-between;
@@ -268,10 +191,6 @@
             padding: 4px 0;
         }
-        .stat-label {
-            color: #ccc;
-        }
         .stat-value {
             color: #4CAF50;
             font-weight: 600;
@@ -284,23 +203,6 @@
             border-radius: 8px;
             margin-top: 15px;
             font-size: 13px;
-            line-height: 1.5;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-        }
-        .ai-info h4 {
-            margin-bottom: 10px;
-            color: #fff;
-        }
-        .ai-info ul {
-            margin-left: 15px;
-            margin-top: 8px;
-        }
-        .ai-info li {
-            margin-bottom: 4px;
-            color: #e0e0e0;
         }
         .current-decision {
@@ -334,29 +236,8 @@
             width: 16px;
             height: 16px;
             border-radius: 50%;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
         }
-        .footer {
-            background: rgba(0, 0, 0, 0.3);
-            padding: 15px;
-            text-align: center;
-            backdrop-filter: blur(10px);
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-            font-size: 0.9rem;
-            color: rgba(255, 255, 255, 0.8);
-        }
-        .footer a {
-            color: #4CAF50;
-            text-decoration: none;
-        }
-        .footer a:hover {
-            text-decoration: underline;
-        }
-        /* Mobile Responsive */
         @media (max-width: 768px) {
             .main-container {
                 flex-direction: column;
@@ -370,64 +251,11 @@
             .canvas-container {
                 height: 400px;
             }
-            .header {
-                padding: 15px;
-            }
-            .hf-badge {
-                position: static;
-                margin-top: 10px;
-                display: inline-block;
-            }
-        }
-        /* Loading Animation */
-        .loading {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(26, 26, 46, 0.9);
-            color: white;
-            font-size: 18px;
-        }
-        .loading::after {
-            content: '';
-            width: 40px;
-            height: 40px;
-            border: 4px solid rgba(255, 255, 255, 0.3);
-            border-top: 4px solid #4CAF50;
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
-            margin-left: 15px;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        /* Pulse animation for status indicators */
-        .pulse {
-            animation: pulse 2s infinite;
-        }
-        @keyframes pulse {
-            0% { opacity: 1; }
-            50% { opacity: 0.5; }
-            100% { opacity: 1; }
         }
     </style>
 </head>
 <body>
     <div class="header">
-        <div class="hf-badge">🤗 Hugging Face Space</div>
         <h1>🚗 Embodied AI Vehicle Simulator</h1>
         <p>Interactive autonomous vehicle navigation with real-time AI decision making</p>
     </div>
@@ -436,9 +264,6 @@
         <div class="simulation-area">
             <div class="canvas-container">
                 <canvas id="simulationCanvas"></canvas>
-                <div class="loading" id="loadingIndicator">
-                    Initializing AI System...
-                </div>
             </div>
             <div class="legend">
@@ -474,7 +299,7 @@
                 <div class="control-group">
                     <label>Vehicle Speed</label>
                     <div class="slider-container">
-                        <input type="range" id="speedSlider" min="0" max="5" value="2" step="0.5">
                         <span class="slider-value" id="speedValue">2.0</span>
                     </div>
                 </div>
@@ -505,81 +330,69 @@
             <div class="stats">
                 <h4>📊 Performance Metrics</h4>
                 <div class="stat-item">
-                    <span class="stat-label">Distance Traveled:</span>
                     <span class="stat-value" id="distanceTraveled">0m</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-label">Targets Reached:</span>
                     <span class="stat-value" id="targetsReached">0</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-label">Obstacles Avoided:</span>
                     <span class="stat-value" id="obstaclesAvoided">0</span>
                 </div>
                 <div class="stat-item">
-                    <span class="stat-label">AI Decisions/sec:</span>
-                    <span class="stat-value pulse" id="decisionsPerSec">0</span>
                 </div>
             </div>
             <div class="ai-info">
                 <h4>🧠 AI Decision Engine</h4>
-                <div class="current-decision" id="currentDecision">System initializing...</div>
-                <p><strong>Embodied AI Features:</strong></p>
                 <ul>
                     <li>Real-time sensor processing</li>
                     <li>Dynamic path planning</li>
-                    <li>Multi-objective optimization</li>
-                    <li>Behavioral adaptation</li>
-                    <li>Environmental coupling</li>
                 </ul>
             </div>
         </div>
     </div>
-    <div class="footer">
-        <p>
-            Built with ❤️ for the AI community •
-            <a href="https://huggingface.co/spaces" target="_blank">Hugging Face Spaces</a> •
-            Click to add targets, Shift+Click for obstacles
-        </p>
-    </div>
     <script>
-        // Enhanced simulator with better performance and mobile support
         const canvas = document.getElementById('simulationCanvas');
         const ctx = canvas.getContext('2d');
-        const loadingIndicator = document.getElementById('loadingIndicator');
-        // Performance optimization
-        let devicePixelRatio = window.devicePixelRatio || 1;
         function resizeCanvas() {
             const container = canvas.parentElement;
             const rect = container.getBoundingClientRect();
-            canvas.width = rect.width * devicePixelRatio;
-            canvas.height = rect.height * devicePixelRatio;
-            canvas.style.width = rect.width + 'px';
-            canvas.style.height = rect.height + 'px';
-            ctx.scale(devicePixelRatio, devicePixelRatio);
         }
         resizeCanvas();
         window.addEventListener('resize', resizeCanvas);
-        // Simulation state
         let isRunning = false;
-        let isPaused = false;
         let animationId = null;
-        let lastTime = 0;
         let decisionCount = 0;
-        let lastDecisionTime = 0;
-        let frameCount = 0;
-        // Enhanced Vehicle class with better AI
         class AutonomousVehicle {
             constructor(x, y) {
                 this.x = x;
@@ -588,94 +401,373 @@
                 this.vy = 0;
                 this.angle = 0;
                 this.speed = 2;
-                this.maxSpeed = 5;
                 this.size = 15;
                 this.sensorRange = 100;
                 this.sensors = [];
-                this.path = [];
-                this.currentTarget = null;
-                this.distanceTraveled = 0;
                 this.lastX = x;
                 this.lastY = y;
-                this.behavior = 'normal';
-                this.avoidanceVector = { x: 0, y: 0 };
-                this.stuckCounter = 0;
-                this.lastPosition = { x: x, y: y };
-                this.wanderAngle = 0;
             }
             updateSensors() {
                 this.sensors = [];
-                const numSensors = 12; // Increased for better detection
                 for (let i = 0; i < numSensors; i++) {
                     const angle = (i / numSensors) * 2 * Math.PI;
-                    const endX = this.x + Math.cos(angle) * this.sensorRange;
-                    const endY = this.y + Math.sin(angle) * this.sensorRange;
                     let distance = this.sensorRange;
-                    let hitObstacle = false;
-                    // Check collision with obstacles
                     for (let obstacle of obstacles) {
                         const dx = obstacle.x - this.x;
                         const dy = obstacle.y - this.y;
                         const distToObstacle = Math.sqrt(dx * dx + dy * dy);
-                        if (distToObstacle > 0) {
-                            const angleToObstacle = Math.atan2(dy, dx);
-                            let angleDiff = Math.abs(angle - angleToObstacle);
-                            if (angleDiff > Math.PI) angleDiff = 2 * Math.PI - angleDiff;
-                            const detectionCone = 0.3; // Wider detection cone
-                            if (angleDiff < detectionCone) {
-                                const actualDistance = Math.max(0, distToObstacle - obstacle.size - 5);
-                                if (actualDistance < distance) {
-                                    distance = actualDistance;
-                                    hitObstacle = true;
-                                }
-                            }
                         }
                     }
-                    // Check canvas boundaries
-                    const boundaryDistance = this.checkBoundaryDistance(angle);
-                    if (boundaryDistance < distance) {
-                        distance = boundaryDistance;
-                    }
                     this.sensors.push({
                         angle: angle,
                         distance: distance,
                         x: this.x + Math.cos(angle) * distance,
-                        y: this.y + Math.sin(angle) * distance,
-                        hitObstacle: hitObstacle
                     });
                 }
             }
-            checkBoundaryDistance(angle) {
-                const canvasWidth = canvas.width / devicePixelRatio;
-                const canvasHeight = canvas.height / devicePixelRatio;
-                const cos = Math.cos(angle);
-                const sin = Math.sin(angle);
-                let distance = this.sensorRange;
-                if (cos > 0) {
-                    distance = Math.min(distance, (canvasWidth - this.x) / cos);
-                } else if (cos < 0) {
-                    distance = Math.min(distance, -this.x / cos);
                 }
-                if (sin > 0) {
-                    distance = Math.min(distance, (canvasHeight - this.y) / sin);
-                } else if (sin < 0) {
-                    distance = Math.min(distance, -this.y / sin);
                 }
-                return Math.max(0, distance - 10); // Margin from boundaries
             }
         }
-    </script>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>🚗 Embodied AI - Autonomous Vehicle Simulator</title>
     <style>
         * {
             margin: 0;
             text-align: center;
             backdrop-filter: blur(10px);
             border-bottom: 1px solid rgba(255, 255, 255, 0.1);
         }
         .header h1 {
             font-size: clamp(1.8rem, 4vw, 2.5rem);
             margin-bottom: 10px;
             text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
         }
         .main-container {
             padding: 20px;
             backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.2);
         }
         .canvas-container {
             background: #1a1a2e;
             border-radius: 10px;
             overflow: hidden;
             border: 2px solid rgba(255, 255, 255, 0.1);
         }
             backdrop-filter: blur(10px);
             border: 1px solid rgba(255, 255, 255, 0.2);
             height: fit-content;
         }
         .control-section {
             color: #fff;
             border-bottom: 2px solid rgba(255, 255, 255, 0.3);
             padding-bottom: 8px;
         }
         .control-group {
             font-size: 0.9rem;
         }
         .slider-container {
             display: flex;
             align-items: center;
         .slider-container input[type="range"] {
             flex: 1;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 5px;
         }
         .slider-value {
             text-align: center;
         }
+        select {
+            width: 100%;
+            padding: 10px;
+            border: none;
+            border-radius: 8px;
+            background: rgba(255, 255, 255, 0.2);
+            color: white;
+            font-size: 14px;
+        }
         .btn {
             width: 100%;
             padding: 12px;
             cursor: pointer;
             transition: all 0.3s ease;
             margin-bottom: 10px;
         }
         .btn-primary {
             background: linear-gradient(45deg, #4CAF50, #45a049);
             color: white;
         }
         .btn-secondary {
             background: linear-gradient(45deg, #2196F3, #1976D2);
             color: white;
         }
         .btn-danger {
             background: linear-gradient(45deg, #f44336, #d32f2f);
             color: white;
         }
         .btn:hover {
             box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
         }
         .btn:disabled {
             opacity: 0.6;
             cursor: not-allowed;
             border: 1px solid rgba(255, 255, 255, 0.1);
         }
         .stat-item {
             display: flex;
             justify-content: space-between;
             padding: 4px 0;
         }
         .stat-value {
             color: #4CAF50;
             font-weight: 600;
             border-radius: 8px;
             margin-top: 15px;
             font-size: 13px;
         }
         .current-decision {
             width: 16px;
             height: 16px;
             border-radius: 50%;
         }
         @media (max-width: 768px) {
             .main-container {
                 flex-direction: column;
             .canvas-container {
                 height: 400px;
             }
         }
     </style>
 </head>
 <body>
     <div class="header">
         <h1>🚗 Embodied AI Vehicle Simulator</h1>
         <p>Interactive autonomous vehicle navigation with real-time AI decision making</p>
     </div>
         <div class="simulation-area">
             <div class="canvas-container">
                 <canvas id="simulationCanvas"></canvas>
             </div>
             <div class="legend">
                 <div class="control-group">
                     <label>Vehicle Speed</label>
                     <div class="slider-container">
+                        <input type="range" id="speedSlider" min="0.5" max="5" value="2" step="0.5">
                         <span class="slider-value" id="speedValue">2.0</span>
                     </div>
                 </div>
             <div class="stats">
                 <h4>📊 Performance Metrics</h4>
                 <div class="stat-item">
+                    <span>Distance Traveled:</span>
                     <span class="stat-value" id="distanceTraveled">0m</span>
                 </div>
                 <div class="stat-item">
+                    <span>Targets Reached:</span>
                     <span class="stat-value" id="targetsReached">0</span>
                 </div>
                 <div class="stat-item">
+                    <span>Obstacles Avoided:</span>
                     <span class="stat-value" id="obstaclesAvoided">0</span>
                 </div>
                 <div class="stat-item">
+                    <span>AI Decisions/sec:</span>
+                    <span class="stat-value" id="decisionsPerSec">0</span>
                 </div>
             </div>
             <div class="ai-info">
                 <h4>🧠 AI Decision Engine</h4>
+                <div class="current-decision" id="currentDecision">Ready to start simulation</div>
+                <p><strong>Features:</strong></p>
                 <ul>
                     <li>Real-time sensor processing</li>
                     <li>Dynamic path planning</li>
+                    <li>Obstacle avoidance</li>
+                    <li>Target seeking behavior</li>
                 </ul>
             </div>
         </div>
     </div>
     <script>
+        // Canvas setup
         const canvas = document.getElementById('simulationCanvas');
         const ctx = canvas.getContext('2d');
         function resizeCanvas() {
             const container = canvas.parentElement;
             const rect = container.getBoundingClientRect();
+            canvas.width = rect.width;
+            canvas.height = rect.height;
         }
         resizeCanvas();
         window.addEventListener('resize', resizeCanvas);
+        // Simulation variables
         let isRunning = false;
         let animationId = null;
+        let vehicle = null;
+        let obstacles = [];
+        let targets = [];
+        let stats = {
+            distanceTraveled: 0,
+            targetsReached: 0,
+            obstaclesAvoided: 0,
+            decisionsPerSecond: 0
+        };
         let decisionCount = 0;
+        let lastDecisionTime = Date.now();
+        // Vehicle class
         class AutonomousVehicle {
             constructor(x, y) {
                 this.x = x;
                 this.vy = 0;
                 this.angle = 0;
                 this.speed = 2;
                 this.size = 15;
                 this.sensorRange = 100;
                 this.sensors = [];
                 this.lastX = x;
                 this.lastY = y;
+                this.wanderAngle = Math.random() * Math.PI * 2;
             }
             updateSensors() {
                 this.sensors = [];
+                const numSensors = 8;
                 for (let i = 0; i < numSensors; i++) {
                     const angle = (i / numSensors) * 2 * Math.PI;
                     let distance = this.sensorRange;
+                    // Check obstacles
                     for (let obstacle of obstacles) {
                         const dx = obstacle.x - this.x;
                         const dy = obstacle.y - this.y;
                         const distToObstacle = Math.sqrt(dx * dx + dy * dy);
+                        const angleToObstacle = Math.atan2(dy, dx);
+                        let angleDiff = Math.abs(angle - angleToObstacle);
+                        if (angleDiff > Math.PI) angleDiff = 2 * Math.PI - angleDiff;
+                        if (angleDiff < 0.5 && distToObstacle < distance) {
+                            distance = Math.max(0, distToObstacle - obstacle.size);
                         }
                     }
+                    // Check boundaries
+                    const cos = Math.cos(angle);
+                    const sin = Math.sin(angle);
+                    if (cos > 0) distance = Math.min(distance, (canvas.width - this.x) / cos);
+                    else if (cos < 0) distance = Math.min(distance, -this.x / cos);
+                    if (sin > 0) distance = Math.min(distance, (canvas.height - this.y) / sin);
+                    else if (sin < 0) distance = Math.min(distance, -this.y / sin);
+                    distance = Math.max(0, distance - 10);
                     this.sensors.push({
                         angle: angle,
                         distance: distance,
                         x: this.x + Math.cos(angle) * distance,
+                        y: this.y + Math.sin(angle) * distance
                     });
                 }
             }
+            makeDecision() {
+                decisionCount++;
+                let decision = 'Exploring';
+                // Find closest target
+                let closestTarget = null;
+                let minTargetDist = Infinity;
+                for (let target of targets) {
+                    const dist = Math.sqrt((target.x - this.x) ** 2 + (target.y - this.y) ** 2);
+                    if (dist < minTargetDist) {
+                        minTargetDist = dist;
+                        closestTarget = target;
+                    }
+                }
+                // Calculate avoidance
+                let avoidX = 0, avoidY = 0;
+                let hasObstacle = false;
+                for (let sensor of this.sensors) {
+                    if (sensor.distance < this.sensorRange * 0.6) {
+                        hasObstacle = true;
+                        const strength = (this.sensorRange * 0.6 - sensor.distance) / (this.sensorRange * 0.6);
+                        avoidX -= Math.cos(sensor.angle) * strength;
+                        avoidY -= Math.sin(sensor.angle) * strength;
+                    }
                 }
+                // Apply forces
+                if (hasObstacle) {
+                    decision = 'Avoiding obstacle';
+                    this.vx += avoidX * 0.5;
+                    this.vy += avoidY * 0.5;
+                    stats.obstaclesAvoided++;
+                } else if (closestTarget && minTargetDist < 300) {
+                    decision = `Pursuing target (${Math.round(minTargetDist)}px away)`;
+                    const dx = closestTarget.x - this.x;
+                    const dy = closestTarget.y - this.y;
+                    const dist = Math.sqrt(dx * dx + dy * dy);
+                    if (dist > 0) {
+                        this.vx += (dx / dist) * 0.2;
+                        this.vy += (dy / dist) * 0.2;
+                    }
+                } else {
+                    decision = 'Wandering and exploring';
+                    this.wanderAngle += (Math.random() - 0.5) * 0.3;
+                    this.vx += Math.cos(this.wanderAngle) * 0.1;
+                    this.vy += Math.sin(this.wanderAngle) * 0.1;
                 }
+                document.getElementById('currentDecision').textContent = decision;
+                return decision;
+            }
+            update() {
+                this.speed = parseFloat(document.getElementById('speedSlider').value);
+                this.sensorRange = parseInt(document.getElementById('sensorRange').value);
+                this.updateSensors();
+                this.makeDecision();
+                // Limit velocity
+                const vel = Math.sqrt(this.vx * this.vx + this.vy * this.vy);
+                if (vel > this.speed) {
+                    this.vx = (this.vx / vel) * this.speed;
+                    this.vy = (this.vy / vel) * this.speed;
+                }
+                // Update position
+                this.lastX = this.x;
+                this.lastY = this.y;
+                this.x += this.vx;
+                this.y += this.vy;
+                // Boundary collision
+                if (this.x < this.size) {
+                    this.x = this.size;
+                    this.vx = Math.abs(this.vx);
+                }
+                if (this.x > canvas.width - this.size) {
+                    this.x = canvas.width - this.size;
+                    this.vx = -Math.abs(this.vx);
+                }
+                if (this.y < this.size) {
+                    this.y = this.size;
+                    this.vy = Math.abs(this.vy);
+                }
+                if (this.y > canvas.height - this.size) {
+                    this.y = canvas.height - this.size;
+                    this.vy = -Math.abs(this.vy);
+                }
+                // Update stats
+                const distance = Math.sqrt((this.x - this.lastX) ** 2 + (this.y - this.lastY) ** 2);
+                stats.distanceTraveled += distance;
+                // Check target collisions
+                targets = targets.filter(target => {
+                    const dist = Math.sqrt((target.x - this.x) ** 2 + (target.y - this.y) ** 2);
+                    if (dist < this.size + target.size) {
+                        stats.targetsReached++;
+                        return false;
+                    }
+                    return true;
+                });
+                // Apply friction
+                this.vx *= 0.98;
+                this.vy *= 0.98;
+            }
+            draw() {
+                // Draw sensors
+                ctx.strokeStyle = 'rgba(255, 193, 7, 0.3)';
+                ctx.lineWidth = 1;
+                for (let sensor of this.sensors) {
+                    ctx.beginPath();
+                    ctx.moveTo(this.x, this.y);
+                    ctx.lineTo(sensor.x, sensor.y);
+                    ctx.stroke();
+                }
+                // Draw vehicle
+                ctx.fillStyle = '#4CAF50';
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+                // Draw direction indicator
+                ctx.strokeStyle = '#ffffff';
+                ctx.lineWidth = 3;
+                ctx.beginPath();
+                ctx.moveTo(this.x, this.y);
+                ctx.lineTo(this.x + this.vx * 5, this.y + this.vy * 5);
+                ctx.stroke();
+            }
+        }
+        // Obstacle class
+        class Obstacle {
+            constructor(x, y, size = 20) {
+                this.x = x;
+                this.y = y;
+                this.size = size;
+            }
+            draw() {
+                ctx.fillStyle = '#f44336';
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
+                ctx.fill();
+            }
+        }
+        // Target class
+        class Target {
+            constructor(x, y, size = 15) {
+                this.x = x;
+                this.y = y;
+                this.size = size;
+                this.pulse = 0;
+            }
+            update() {
+                this.pulse += 0.1;
+            }
+            draw() {
+                const alpha = 0.5 + 0.3 * Math.sin(this.pulse);
+                ctx.fillStyle = `rgba(33, 150, 243, ${alpha})`;
+                ctx.beginPath();
+                ctx.arc(this.x, this.y, this.size + 3 * Math.sin(this.pulse), 0, Math.PI * 2);
+                ctx.fill();
             }
         }
+        // Animation loop
+        function animate() {
+            if (!isRunning) return;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            // Update and draw vehicle
+            if (vehicle) {
+                vehicle.update();
+                vehicle.draw();
+            }
+            // Update and draw targets
+            targets.forEach(target => {
+                target.update();
+                target.draw();
+            });
+            // Draw obstacles
+            obstacles.forEach(obstacle => obstacle.draw());
+            // Update UI stats
+            updateStats();
+            animationId = requestAnimationFrame(animate);
+        }
+        function updateStats() {
+            document.getElementById('distanceTraveled').textContent = Math.round(stats.distanceTraveled) + 'm';
+            document.getElementById('targetsReached').textContent = stats.targetsReached;
+            document.getElementById('obstaclesAvoided').textContent = stats.obstaclesAvoided;
+            // Calculate decisions per second
+            const now = Date.now();
+            if (now - lastDecisionTime >= 1000) {
+                stats.decisionsPerSecond = decisionCount;
+                document.getElementById('decisionsPerSec').textContent = stats.decisionsPerSecond;
+                decisionCount = 0;
+                lastDecisionTime = now;
+            }
+        }
+        // Initialize simulation
+        function initSimulation() {
+            vehicle = new AutonomousVehicle(100, 100);
+            // Add some initial obstacles and targets
+            obstacles.push(new Obstacle(300, 200, 25));
+            obstacles.push(new Obstacle(500, 400, 30));
+            targets.push(new Target(600, 150));
+            targets.push(new Target(200, 400));
+            document.getElementById('currentDecision').textContent = 'Ready - Click Start!';
+        }
+        // Control functions
+        function startSimulation() {
+            if (!vehicle) initSimulation();
+            isRunning = true;
+            document.getElementById('startBtn').disabled = true;
+            document.getElementById('pauseBtn').disabled = false;
+            animate();
+        }
+        function pauseSimulation() {
+            isRunning = false;
+            document.getElementById('startBtn').disabled = false;
+            document.getElementById('pauseBtn').disabled = true;
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+        }
+        function resetSimulation() {
+            isRunning = false;
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+            obstacles = [];
+            targets = [];
+            stats = { distanceTraveled: 0, targetsReached: 0, obstaclesAvoided: 0, decisionsPerSecond: 0 };
+            decisionCount = 0;
+            document.getElementById('startBtn').disabled = false;
+            document.getElementById('pauseBtn').disabled = true;
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            initSimulation();
+        }
+        // Event listeners
+        document.getElementById('startBtn').addEventListener('click', startSimulation);
+        document.getElementById('pauseBtn').addEventListener('click', pauseSimulation);
+        document.getElementById('resetBtn').addEventListener('click', resetSimulation);
+        document.getElementById('addObstacleBtn').addEventListener('click', () => {
+            const x = Math.random() * (canvas.width - 100) + 50;
+            const y = Math.random() * (canvas.height - 100) + 50;
+            obstacles.push(new Obstacle(x, y, 20 + Math.random() * 20));
+        });
+        document.getElementById('addTargetBtn').addEventListener('click', () => {
+            const x = Math.random() * (canvas.width - 100) + 50;
+            const y = Math.random() * (canvas.height - 100) + 50;
+            targets.push(new Target(x, y));
+        });
+        document.getElementById('clearBtn').addEventListener('click', () => {
+            obstacles = [];
+            targets = [];
+        });
+        // Canvas click events
+        canvas.addEventListener('click', (e) => {
+            const rect = canvas.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const y = e.clientY - rect.top;
+            if (e.shiftKey) {
+                obstacles.push(new Obstacle(x, y));
+            } else {
+                targets.push(new Target(x, y));
+            }
+        });
+        // Slider updates
+        document.getElementById('speedSlider').addEventListener('input', (e) => {
+            document.getElementById('speedValue').textContent = e.target.value;
+        });
+        document.getElementById('sensorRange').addEventListener('input', (e) => {
+            document.getElementById('sensorValue').textContent = e.target.value;
+        });
+        // Initialize on load
+        initSimulation();
+    </script>
+</body>
+</html>