Update rl_script.js

rl_script.js

@@ -4,16 +4,19 @@ const grid = document.getElementById('grid');
 const startButton = document.getElementById('startButton');
 const stepButton = document.getElementById('stepButton');
 const resetButton = document.getElementById('resetButton');
+const learningGraphCanvas = document.getElementById('learningGraph');
 
 const gridRows = 5;
 const gridCols = 5;
 
 const initialState = { row: 0, col: 0 };
 const goalState = { row: 4, col: 4 };
-const obstacles = [{ row: 1, col: 1 }, { row: 2, col: 2 }, { row: 3, 3 }];
+const obstacles = [{ row: 1, col: 1 }, { row: 2, col: 2 }, { row: 3, col: 3 }];
 
 let agentState = { ...initialState };
 let gridCells = [];
+let stepCount = 0;
+let stepHistory = [];
 
 function createGrid() {
     for (let row = 0; row < gridRows; row++) {
@@ -55,6 +58,9 @@ function moveAgent(action) {
 
     if (!obstacles.some(o => o.row === newRow && o.col === newCol)) {
         agentState = { row: newRow, col: newCol };
+        stepCount++;
+        stepHistory.push(stepCount);
+        updateLearningGraph();
     }
 
     updateGrid();
@@ -76,13 +82,14 @@ function updateGrid() {
 }
 
 function startRL() {
-    // Initialize the agent and grid
     agentState = { ...initialState };
+    stepCount = 0;
+    stepHistory = [];
     updateGrid();
+    updateLearningGraph();
 }
 
 function stepRL() {
-    // Simple policy: Move randomly
     const actions = ['up', 'down', 'left', 'right'];
     const action = actions[Math.floor(Math.random() * actions.length)];
     moveAgent(action);
@@ -92,7 +99,33 @@ function resetRL() {
     startRL();
 }
 
+function updateLearningGraph() {
+    const ctx = learningGraphCanvas.getContext('2d');
+    ctx.clearRect(0, 0, learningGraphCanvas.width, learningGraphCanvas.height);
+
+    new Chart(ctx, {
+        type: 'line',
+        data: {
+            labels: Array.from({ length: stepHistory.length }, (_, i) => i + 1),
+            datasets: [{
+                label: 'Steps Taken',
+                data: stepHistory,
+                borderColor: 'rgba(75, 192, 192, 1)',
+                fill: false
+            }]
+        },
+        options: {
+            scales: {
+                y: {
+                    beginAtZero: true
+                }
+            }
+        }
+    });
+}
+
 createGrid();
+updateLearningGraph();
 
 startButton.addEventListener('click', startRL);
 stepButton.addEventListener('click', stepRL);