Skip to content

Add auto-iterate feature and polynomial controls to gradient descent #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Dewanik wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add auto-iterate feature and polynomial controls to gradient descent #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions gradient_descent/basic.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
Expand Down
14 changes: 12 additions & 2 deletions gradient_descent/simulation.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
102 changes: 102 additions & 0 deletions gradient_descent/simulation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = [];
Expand All @@ -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);
}
}

Expand Down Expand Up @@ -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++) {
Expand Down Expand Up @@ -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() {
Expand All @@ -112,6 +205,7 @@ function initParams() {
updateParams("alpha");
updateParams("cost");
updateParams("coeffs");
updateParams("iteration");
}

function calculateCost() {
Expand Down Expand Up @@ -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");
}