AI JavaScript Machine Learning
Trace a small fitted calculation in JavaScript before loading a framework.
How it works
JavaScript can express the same numerical ideas as Python, but its runtime matters. A browser has DOM and Canvas APIs; Node.js does not provide them by default. This separate downloadable browser lab trains one scalar weight on an exact artificial relation. A fixed rule and a learned parameter should remain clearly distinguished.
Run the code
This complete HTML document is a separate learning lab. Download download-labs.mjs into an empty folder and run node download-labs.mjs. For an unpublished local preview use node download-labs.mjs http://127.0.0.1:8000/examples/ai/. It saves hash-checked sources, pinned vendor assets and licence notices into a new bhylu-ai-lab folder and refuses an existing destination. Review the files, enter that folder, run node serve.mjs and open http://127.0.0.1:8138/javascript.html. Select Run explicitly. The server is read-only, binds loopback and stops with Ctrl+C. It changes no PHP, Apache or database settings.
The reviewed browser baselines are TensorFlow.js 4.22.0, tfjs-vis 1.5.1, Brain.js 2.0.0-beta.24 (prerelease), Chart.js 4.5.1, D3 7.9.0 and Plotly.js 3.1.0. Only the libraries listed by this document load into the separate learning page. The plain JavaScript/Python playground does not supply them. TensorFlow.js labs select the CPU backend; no GPU support or speed claim follows.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Bhylu AI - JavaScript Machine Learning</title>
<style>
body {
font: 16px/1.6 system-ui;
max-width: 760px;
margin: 32px auto;
padding: 0 20px;
color: #0f3464;
background: #fff;
}
button {
font: inherit;
padding: 8px 20px;
background: #0078d4;
color: white;
border: 0;
border-radius: 6px;
}
pre {
white-space: pre-wrap;
overflow-wrap: anywhere;
background: #f3f7fc;
padding: 16px;
}
canvas,
svg,
#chart {
max-width: 100%;
}
</style>
</head>
<body>
<h1>JavaScript Machine Learning</h1>
<p>Trace a small fitted calculation in JavaScript before loading a framework.</p>
<p>
This separate synthetic-data lab runs only when you select Run. It is not a model
service or a production benchmark.
</p>
<button id="run" type="button">Run example</button>
<pre id="output" aria-live="polite"></pre>
<script>
const runButton = document.getElementById("run");
const output = document.getElementById("output");
const print = (value) => {
output.textContent += String(value) + "\n";
};
window.aiDone = false;
window.aiFailure = null;
runButton.addEventListener("click", async () => {
runButton.disabled = true;
output.textContent = "";
window.aiDone = false;
window.aiFailure = null;
try {
const x = [1, 2, 3],
y = [2, 4, 6];
let weight = 0;
for (let epoch = 0; epoch < 60; epoch++) {
const gradient =
(2 *
x.reduce((sum, value, i) => sum + (weight * value - y[i]) * value, 0)) /
x.length;
weight -= 0.05 * gradient;
}
print("weight: " + weight.toFixed(3));
print("finite: " + Number.isFinite(weight));
} catch (error) {
window.aiFailure = String(error);
print("Error: " + error.message);
} finally {
window.aiDone = true;
runButton.disabled = false;
}
});
</script>
</body>
</html>
Focus on the JavaScript operations
This excerpt omits document markup, local library loading and the explicit Run control. Use the full source to run it.
const x = [1, 2, 3], y = [2, 4, 6];
let weight = 0;
for (let epoch = 0; epoch < 60; epoch++) {
const gradient = 2 * x.reduce((sum, value, i) => sum + (weight * value - y[i]) * value, 0) / x.length;
weight -= 0.05 * gradient;
}
print('weight: ' + weight.toFixed(3));
print('finite: ' + Number.isFinite(weight));
Expected result
weight: 2.000 finite: true
The bounded loop applies the same MSE gradient taught earlier. It runs only after the lab Run button is selected. The output is checked in a real browser, not inferred from a copied Python result. This example uses no external library or model service.