From 20b34dc11f20419014dcf14e10669211efa9414f Mon Sep 17 00:00:00 2001
From: Dewanik Koirala <36784941+Dewanik@users.noreply.github.com>
Date: Sun, 18 Jan 2026 06:36:42 +0000
Subject: [PATCH] Add auto-iterate feature, iteration counters, and manual
 polynomial input (0-100 degree) to gradient descent simulation

---
 gradient_descent/basic.js        |   1 +
 gradient_descent/simulation.html |  14 ++++-
 gradient_descent/simulation.js   | 102 +++++++++++++++++++++++++++++++
 3 files changed, 115 insertions(+), 2 deletions(-)

diff --git a/gradient_descent/basic.js b/gradient_descent/basic.js
index 66728ba..49a210f 100644
--- a/gradient_descent/basic.js
+++ b/gradient_descent/basic.js
@@ -17,6 +17,7 @@ let coeffs_display = document.getElementById("coeffs-display");
 
 let degree_display = document.getElementById("degree-display");
 let degree_input = document.getElementById("degree-input");
+let degree_text_input = document.getElementById("degree-text-input");
 
 let alpha_display = document.getElementById("alpha-display");
 let alpha_input = document.getElementById("alpha-input");
diff --git a/gradient_descent/simulation.html b/gradient_descent/simulation.html
index 675128f..d25e179 100644
--- a/gradient_descent/simulation.html
+++ b/gradient_descent/simulation.html
@@ -73,17 +73,27 @@ <h2>Gradient Descent</h2>
             <br> <br>
             <hr>
             <br>
-            <button class="btn purple darken-4" onclick="update()">Iterate</button>
+            <button class="btn purple darken-4" onclick="iterateManual()">Iterate</button>
+            <button class="btn purple darken-4" id="auto-btn" onclick="toggleAutoIterate()">Start Auto</button>
             <button class="btn purple darken-4" onclick="resetTheta()">Reset</button>
+            <p id="iteration-display"></p>
             <p id="cost-display"></p>
             <span id="degree-display"></span>
-            <input id="degree-input" type="range" min="0" max="10" step="1" oninput="updateParams('degree')"
+            <input id="degree-input" type="range" min="0" max="100" step="1" oninput="updateParams('degree')"
               onchange="updateParams('degree')">
+            <input id="degree-text-input" type="number" min="0" max="100" placeholder="Type degree (0-100)" onchange="updateDegreeFromText()">
+            <br><br>
             <span id="alpha-display"></span>
             <input id="alpha-input" type="range" min="-3" max="3" step="0.1" oninput="updateParams('alpha')"
               onchange="updateParams('alpha')">
             <br>
             <p id="coeffs-display"></p>
+            <hr>
+            <b>Manual Polynomial Entry</b>
+            <br>
+            <textarea id="manual-coeffs-input" placeholder="Enter coefficients separated by commas&#10;e.g: 1,2,3 for 1 + 2x + 3x²" style="width: 100%; height: 80px; resize: vertical; font-family: monospace;"></textarea>
+            <br>
+            <button class="btn purple darken-4" onclick="applyManualCoefficients()">Apply Coefficients</button>
           </center>
         </div>
       </div>
diff --git a/gradient_descent/simulation.js b/gradient_descent/simulation.js
index 89d4a86..38a62b1 100644
--- a/gradient_descent/simulation.js
+++ b/gradient_descent/simulation.js
@@ -6,6 +6,11 @@ let degree, thetas;
 
 let alpha = 1;
 
+let iterationCount = 0;
+let manualIterateCount = 0;
+let autoIterating = false;
+let autoIterateInterval = null;
+
 function update() {
     if (points.length > 0) {
         let temp_thetas = [];
@@ -22,8 +27,91 @@ function update() {
         }
 
         thetas = temp_thetas;
+        iterationCount++;
         updateParams("cost");
         updateParams("coeffs");
+        updateParams("iteration");
+    }
+}
+
+function iterateManual() {
+    update();
+    manualIterateCount++;
+    updateParams("iteration");
+}
+
+function toggleAutoIterate() {
+    if (autoIterating) {
+        stopAutoIterate();
+    } else {
+        startAutoIterate();
+    }
+}
+
+function startAutoIterate() {
+    autoIterating = true;
+    document.getElementById("auto-btn").innerHTML = "Stop Auto";
+    autoIterateInterval = setInterval(() => {
+        update();
+    }, 50);
+}
+
+function stopAutoIterate() {
+    autoIterating = false;
+    document.getElementById("auto-btn").innerHTML = "Start Auto";
+    if (autoIterateInterval) {
+        clearInterval(autoIterateInterval);
+        autoIterateInterval = null;
+    }
+}
+
+function updateDegreeFromText() {
+    let textValue = document.getElementById("degree-text-input").value;
+    if (textValue !== "") {
+        let value = Math.max(0, Math.min(100, parseInt(textValue)));
+        document.getElementById("degree-input").value = value;
+        updateParams("degree");
+    }
+}
+
+function applyManualCoefficients() {
+    let input = document.getElementById("manual-coeffs-input").value.trim();
+    if (input === "") {
+        alert("Please enter coefficients separated by commas");
+        return;
+    }
+    
+    try {
+        let coefficients = input.split(",").map(c => parseFloat(c.trim()));
+        
+        // Validate input
+        if (coefficients.length > 100) {
+            alert("Maximum 100 polynomial coefficients allowed");
+            return;
+        }
+        
+        if (coefficients.some(isNaN)) {
+            alert("Invalid input. Please enter numbers separated by commas");
+            return;
+        }
+        
+        // Update degree and thetas
+        degree = coefficients.length - 1;
+        document.getElementById("degree-input").value = degree;
+        document.getElementById("degree-text-input").value = degree;
+        thetas = coefficients;
+        
+        iterationCount = 0;
+        manualIterateCount = 0;
+        
+        updateParams("degree");
+        updateParams("cost");
+        updateParams("coeffs");
+        updateParams("iteration");
+        
+        alert(`Polynomial set with degree ${degree} (${coefficients.length} coefficients)`);
+    } catch (e) {
+        alert("Error parsing coefficients: " + e.message);
     }
 }
 
@@ -67,6 +155,7 @@ function getY(x) {
 function updateParams(variable) {
     if (variable == "degree") {
         degree = Number.parseInt(degree_input.value);
+        degree_text_input.value = degree;
         degree_display.innerHTML = `Degree of fitting polynomial: ${degree}`;
         thetas = [];
         for (let i = 0; i < degree + 1; i++) {
@@ -101,6 +190,10 @@ function updateParams(variable) {
         }
         coeffs_display.innerHTML = `Fitting polynomial: ${string}`;
     }
+    if (variable == "iteration") {
+        let iterationDisplay = document.getElementById("iteration-display");
+        iterationDisplay.innerHTML = `Total Iterations: ${iterationCount} | Manual Clicks: ${manualIterateCount}`;
+    }
 }
 
 function initParams() {
@@ -112,6 +205,7 @@ function initParams() {
     updateParams("alpha");
     updateParams("cost");
     updateParams("coeffs");
+    updateParams("iteration");
 }
 
 function calculateCost() {
@@ -148,13 +242,21 @@ function resetTheta() {
     for (let i = 0; i < thetas.length; i++) {
         thetas[i] = 0;
     }
+    stopAutoIterate();
+    iterationCount = 0;
+    manualIterateCount = 0;
     updateParams("cost");
     updateParams("coeffs");
+    updateParams("iteration");
 }
 
 function clearPoints() {
     points = [];
+    stopAutoIterate();
+    iterationCount = 0;
+    manualIterateCount = 0;
     resetTheta();
     updateParams("cost");
     updateParams("coeffs");
+    updateParams("iteration");
 }
\ No newline at end of file