Add Gradio hub with linear and logistic regression interfaces

app.py

@@ -0,0 +1,55 @@
+from pathlib import Path
+
+import gradio as gr
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+
+BASE_DIR = Path(__file__).resolve().parent
+
+linear_dir = BASE_DIR / "linear-regression"
+logistic_dir = BASE_DIR / "logistic-regression"
+
+with gr.Blocks(title="DDW Machine Learning") as demo:
+    gr.Markdown(
+        """
+# DDW Machine Learning
+
+Choose one interface:
+- **Linear Regression** (`week10/interface`)
+- **Logistic Regression** (`week11/interface`)
+
+Each interface opens with its own home page and keeps all original sub-page navigation.
+"""
+    )
+
+    with gr.Row():
+        gr.HTML(
+            """
+<div style="border:1px solid #ddd;border-radius:12px;padding:16px;">
+  <h3>Linear Regression</h3>
+  <p>Week10 interface with NumPy Lab, Gradient Descent Studio, and Step Trainer.</p>
+  <a href="/linear-regression/index.html" target="_self">Open Linear Regression Interface</a>
+</div>
+"""
+        )
+        gr.HTML(
+            """
+<div style="border:1px solid #ddd;border-radius:12px;padding:16px;">
+  <h3>Logistic Regression</h3>
+  <p>Week11 interface with sigmoid, confusion matrix, and cost-function pages.</p>
+  <a href="/logistic-regression/index.html" target="_self">Open Logistic Regression Interface</a>
+</div>
+"""
+        )
+
+app = FastAPI()
+
+app.mount("/linear-regression", StaticFiles(directory=str(linear_dir), html=True), name="linear-regression")
+app.mount("/logistic-regression", StaticFiles(directory=str(logistic_dir), html=True), name="logistic-regression")
+app = gr.mount_gradio_app(app, demo, path="/")
+
+
+if __name__ == "__main__":
+    import uvicorn
+
+    uvicorn.run(app, host="0.0.0.0", port=7860)

linear-regression/app.js

@@ -0,0 +1,1326 @@
+const operations = [
+  {
+    id: "add",
+    label: "Add two matrices (element-wise)",
+    description: "A + B. Shapes of A and B should be equal or broadcast-compatible.",
+    inputs: 2,
+    code: "output = A + B",
+    match: ["add", "sum", "plus", "element-wise add"],
+    run: (A, B) => elementWise(A, B, (a, b) => a + b, "add"),
+  },
+  {
+    id: "subtract",
+    label: "Subtract two matrices (element-wise)",
+    description: "A - B. Shapes of A and B should be equal or broadcast-compatible.",
+    inputs: 2,
+    code: "output = A - B",
+    match: ["subtract", "minus", "difference"],
+    run: (A, B) => elementWise(A, B, (a, b) => a - b, "subtract"),
+  },
+  {
+    id: "multiply",
+    label: "Multiply two matrices (element-wise)",
+    description: "A * B. Shapes of A and B should be equal or broadcast-compatible.",
+    inputs: 2,
+    code: "output = A * B",
+    match: ["multiply", "times", "element-wise multiply"],
+    run: (A, B) => elementWise(A, B, (a, b) => a * b, "multiply"),
+  },
+  {
+    id: "matmul",
+    label: "Matrix multiplication (np.matmul)",
+    description: "np.matmul(A, B). Works for 2D and stacked arrays (up to 3D here).",
+    inputs: 2,
+    code: "output = np.matmul(A, B)",
+    match: ["matmul", "matrix multiplication", "dot product", "@"],
+    run: (A, B) => matmul(A, B),
+  },
+  {
+    id: "transpose",
+    label: "Transpose matrix (np.transpose)",
+    description: "Swap axes. For 2D, rows and columns are flipped.",
+    inputs: 1,
+    code: "output = np.transpose(A)",
+    match: ["transpose", "swap axes", "flip rows columns"],
+    run: (A) => transpose(A),
+  },
+  {
+    id: "reshape",
+    label: "Reshape matrix (np.reshape)",
+    description: "Reshape A into the target shape with same total number of elements.",
+    inputs: 1,
+    code: "output = np.reshape(A, new_shape)",
+    match: ["reshape", "change shape"],
+    requiresTarget: true,
+    run: (A, _unused, targetShape) => reshape(A, targetShape),
+  },
+  {
+    id: "concat",
+    label: "Concatenate two arrays (np.concatenate)",
+    description: "Join A and B along axis 0. Non-concat dimensions must match.",
+    inputs: 2,
+    code: "output = np.concatenate([A, B], axis=0)",
+    match: ["concatenate", "concat", "join arrays"],
+    run: (A, B) => concatAxis0(A, B),
+  },
+  {
+    id: "stack",
+    label: "Stack two arrays (np.stack)",
+    description: "Stack A and B along a new axis 0. A and B shapes must be identical.",
+    inputs: 2,
+    code: "output = np.stack([A, B], axis=0)",
+    match: ["stack", "new axis"],
+    run: (A, B) => stackAxis0(A, B),
+  },
+  {
+    id: "sum",
+    label: "Sum matrix values (np.sum)",
+    description: "Sum values on an optional axis with optional keepdims.",
+    inputs: 1,
+    code: "output = np.sum(A)",
+    match: ["sum all", "total", "np.sum", "sum"],
+    supportsReductionOptions: true,
+    run: (A, _unused, _unused2, options) =>
+      reduceArray(A, {
+        mode: "sum",
+        axis: options.axis,
+        keepdims: options.keepdims,
+      }),
+  },
+  {
+    id: "mean",
+    label: "Mean matrix values (np.mean)",
+    description: "Compute mean on an optional axis with optional keepdims.",
+    inputs: 1,
+    code: "output = np.mean(A)",
+    match: ["mean", "average", "np.mean"],
+    supportsReductionOptions: true,
+    run: (A, _unused, _unused2, options) =>
+      reduceArray(A, {
+        mode: "mean",
+        axis: options.axis,
+        keepdims: options.keepdims,
+      }),
+  },
+  {
+    id: "ones",
+    label: "Create ones matrix (np.ones)",
+    description: "Generate an array filled with ones for the given shape.",
+    inputs: 1,
+    code: "output = np.ones(shape)",
+    match: ["ones", "all ones", "np.ones"],
+    generatorOnly: true,
+    run: (A) => clone(A),
+  },
+  {
+    id: "zeros",
+    label: "Create zeros matrix (np.zeros)",
+    description: "Generate an array filled with zeros for the given shape.",
+    inputs: 1,
+    code: "output = np.zeros(shape)",
+    match: ["zeros", "all zeros", "np.zeros"],
+    generatorOnly: true,
+    run: (A) => clone(A),
+  },
+];
+
+const operationSelect = document.getElementById("operationSelect");
+const nlInput = document.getElementById("nlInput");
+const matchBtn = document.getElementById("matchBtn");
+const runBtn = document.getElementById("runBtn");
+const operationInfo = document.getElementById("operationInfo");
+const shapeInputs = document.getElementById("shapeInputs");
+const operationOptions = document.getElementById("operationOptions");
+const codeOutput = document.getElementById("codeOutput");
+const inputViz = document.getElementById("inputViz");
+const outputViz = document.getElementById("outputViz");
+const detailViz = document.getElementById("detailViz");
+let lastRunMeta = null;
+
+function init() {
+  operations.forEach((op) => {
+    const option = document.createElement("option");
+    option.value = op.id;
+    option.textContent = op.label;
+    operationSelect.appendChild(option);
+  });
+
+  operationSelect.value = "add";
+  renderShapeInputs();
+  bindEvents();
+}
+
+function bindEvents() {
+  operationSelect.addEventListener("change", renderShapeInputs);
+
+  matchBtn.addEventListener("click", () => {
+    const query = nlInput.value.trim().toLowerCase();
+    if (!query) return;
+
+    let best = operations[0];
+    let bestScore = 0;
+
+    for (const op of operations) {
+      let score = 0;
+      for (const key of op.match) {
+        if (query.includes(key)) score += key.length;
+      }
+      if (score > bestScore) {
+        best = op;
+        bestScore = score;
+      }
+    }
+
+    operationSelect.value = best.id;
+    renderShapeInputs();
+  });
+
+  runBtn.addEventListener("click", () => {
+    try {
+      lastRunMeta = null;
+      const op = currentOperation();
+      const parsed = parseAllShapes(op);
+      const inputArrays = buildInputArrays(op, parsed);
+      const options = parsed.options || {};
+      const output = op.run(
+        inputArrays[0],
+        inputArrays[1],
+        parsed.targetShape || null,
+        options
+      );
+
+      renderCode(op, parsed);
+      renderInputs(inputArrays, op);
+      renderOutput(output);
+      renderComputationDetails(op, inputArrays, output, parsed, lastRunMeta);
+    } catch (err) {
+      codeOutput.textContent = "Error: " + err.message;
+      inputViz.innerHTML = "";
+      outputViz.innerHTML = `<p class=\"error\">${escapeHtml(err.message)}</p>`;
+      detailViz.innerHTML = "";
+    }
+  });
+}
+
+function currentOperation() {
+  return operations.find((op) => op.id === operationSelect.value);
+}
+
+function renderShapeInputs() {
+  const op = currentOperation();
+
+  operationInfo.innerHTML = `<strong>${op.label}</strong><br/>${escapeHtml(op.description)}`;
+
+  const cards = [];
+  for (let i = 0; i < op.inputs; i += 1) {
+    cards.push(shapeCard(`inputShape${i + 1}`, `Input ${i + 1} shape`, "2,3"));
+  }
+
+  if (op.requiresTarget) {
+    cards.push(shapeCard("targetShape", "Target shape", "3,2"));
+  }
+
+  shapeInputs.innerHTML = cards.join("");
+  operationOptions.innerHTML = op.supportsReductionOptions
+    ? reductionOptionsCard()
+    : "";
+
+  const s1 = document.getElementById("inputShape1");
+  const s2 = document.getElementById("inputShape2");
+
+  if (op.id === "matmul") {
+    s1.value = "2,3";
+    if (s2) s2.value = "3,2";
+  } else if (op.id === "concat" || op.id === "stack") {
+    s1.value = "2,2";
+    if (s2) s2.value = "2,2";
+  } else if (op.id === "transpose") {
+    s1.value = "2,3";
+  } else if (op.id === "reshape") {
+    s1.value = "2,3";
+    document.getElementById("targetShape").value = "3,2";
+  } else if (op.id === "ones" || op.id === "zeros") {
+    s1.value = "3,3";
+  } else if (op.id === "sum" || op.id === "mean") {
+    s1.value = "2,3";
+  }
+
+  if (op.supportsReductionOptions) {
+    const axisInput = document.getElementById("reduceAxis");
+    const keepdimsInput = document.getElementById("reduceKeepdims");
+
+    const setAxisHint = () => {
+      try {
+        const dims = parseShape(document.getElementById("inputShape1").value);
+        axisInput.placeholder = `axis (optional): 0 to ${dims.length - 1}`;
+      } catch (_err) {
+        axisInput.placeholder = "axis (optional): 0";
+      }
+    };
+
+    document.getElementById("inputShape1").addEventListener("input", setAxisHint);
+    setAxisHint();
+    keepdimsInput.checked = false;
+  }
+
+  detailViz.innerHTML = "";
+}
+
+function shapeCard(inputId, label, placeholder) {
+  return `
+    <div class="shape-card">
+      <h3>${label}</h3>
+      <input id="${inputId}" type="text" placeholder="${placeholder}" />
+      <small>Use comma-separated dimensions, max 3D, e.g. 2,3 or 2,2,3</small>
+    </div>
+  `;
+}
+
+function reductionOptionsCard() {
+  return `
+    <div class="shape-card options-card">
+      <h3>Reduction options</h3>
+      <div class="inline-fields">
+        <label class="mini-label" for="reduceAxis">axis</label>
+        <input id="reduceAxis" type="text" placeholder="axis (optional): 0" />
+      </div>
+      <div class="inline-fields">
+        <label class="mini-label" for="reduceKeepdims">keepdims</label>
+        <input id="reduceKeepdims" type="checkbox" />
+      </div>
+      <small>Leave axis empty to reduce all dimensions. keepdims keeps reduced axes as size 1.</small>
+    </div>
+  `;
+}
+
+function parseAllShapes(op) {
+  const shapes = [];
+
+  for (let i = 0; i < op.inputs; i += 1) {
+    const input = document.getElementById(`inputShape${i + 1}`);
+    shapes.push(parseShape(input.value));
+  }
+
+  const parsed = { shapes };
+
+  if (op.requiresTarget) {
+    parsed.targetShape = parseShape(document.getElementById("targetShape").value);
+  }
+
+  if (op.supportsReductionOptions) {
+    const axisRaw = document.getElementById("reduceAxis").value.trim();
+    const keepdims = document.getElementById("reduceKeepdims").checked;
+    let axis = null;
+
+    if (axisRaw !== "") {
+      axis = Number(axisRaw);
+      if (!Number.isInteger(axis)) {
+        throw new Error("axis must be an integer or left empty.");
+      }
+      if (axis < 0 || axis >= shapes[0].length) {
+        throw new Error(`axis out of range for input rank ${shapes[0].length}.`);
+      }
+    }
+
+    parsed.options = { axis, keepdims };
+  }
+
+  return parsed;
+}
+
+function parseShape(raw) {
+  if (!raw || !raw.trim()) {
+    throw new Error("Shape cannot be empty.");
+  }
+
+  let normalized = raw.trim();
+  if (normalized.startsWith("(") && normalized.endsWith(")")) {
+    normalized = normalized.slice(1, -1);
+  }
+  normalized = normalized.trim();
+
+  const dims = normalized
+    .split(",")
+    .map((x) => x.trim())
+    .filter((x) => x.length > 0)
+    .map((x) => Number(x));
+
+  if (dims.length < 1 || dims.length > 3) {
+    throw new Error("Each shape must have 1 to 3 dimensions.");
+  }
+
+  dims.forEach((d) => {
+    if (!Number.isFinite(d) || !Number.isInteger(d) || d < 1 || d > 6) {
+      throw new Error("Dimensions must be integers between 1 and 6.");
+    }
+  });
+
+  return dims;
+}
+
+function buildInputArrays(op, parsed) {
+  if (op.id === "ones") {
+    return [fillArray(parsed.shapes[0], 1)];
+  }
+  if (op.id === "zeros") {
+    return [fillArray(parsed.shapes[0], 0)];
+  }
+
+  const [shapeA, shapeB] = parsed.shapes;
+  const A = randomArray(shapeA);
+  if (op.inputs === 1) return [A];
+
+  let B;
+  if (["add", "subtract", "multiply"].includes(op.id)) {
+    B = randomArray(shapeB || shapeA);
+  } else if (op.id === "matmul") {
+    B = randomArray(shapeB);
+  } else if (op.id === "concat" || op.id === "stack") {
+    B = randomArray(shapeB);
+  } else {
+    B = randomArray(shapeB || shapeA);
+  }
+
+  return [A, B];
+}
+
+function randomArray(shape) {
+  return createByShape(shape, () => Math.floor(Math.random() * 9) + 1);
+}
+
+function fillArray(shape, val) {
+  return createByShape(shape, () => val);
+}
+
+function createByShape(shape, valueFn, level = 0) {
+  const len = shape[level];
+  const arr = new Array(len);
+
+  for (let i = 0; i < len; i += 1) {
+    arr[i] =
+      level === shape.length - 1
+        ? valueFn()
+        : createByShape(shape, valueFn, level + 1);
+  }
+
+  return arr;
+}
+
+function shapeOf(arr) {
+  if (!Array.isArray(arr)) return [];
+  return [arr.length, ...shapeOf(arr[0])];
+}
+
+function formatShape(shape) {
+  return `(${shape.join(", ")})`;
+}
+
+function broadcastShapes(shapeA, shapeB) {
+  const maxRank = Math.max(shapeA.length, shapeB.length);
+  const out = new Array(maxRank);
+
+  for (let i = 0; i < maxRank; i += 1) {
+    const a = shapeA[shapeA.length - 1 - i] ?? 1;
+    const b = shapeB[shapeB.length - 1 - i] ?? 1;
+
+    if (a !== b && a !== 1 && b !== 1) {
+      throw new Error(
+        `Broadcast mismatch at dimension ${maxRank - i - 1}: ${a} vs ${b}.`
+      );
+    }
+    out[maxRank - 1 - i] = Math.max(a, b);
+  }
+
+  return out;
+}
+
+function getAtIndices(arr, indices) {
+  let cur = arr;
+  for (let i = 0; i < indices.length; i += 1) {
+    cur = cur[indices[i]];
+  }
+  return cur;
+}
+
+function createByShapeIndexed(shape, valueFn, idx = []) {
+  if (shape.length === 0) return valueFn(idx);
+  const dim = shape[idx.length];
+  const out = new Array(dim);
+  for (let i = 0; i < dim; i += 1) {
+    const nextIdx = idx.concat(i);
+    if (nextIdx.length === shape.length) {
+      out[i] = valueFn(nextIdx);
+    } else {
+      out[i] = createByShapeIndexed(shape, valueFn, nextIdx);
+    }
+  }
+  return out;
+}
+
+function projectBroadcastIndices(outputIndices, sourceShape) {
+  const offset = outputIndices.length - sourceShape.length;
+  const mapped = [];
+  for (let i = 0; i < sourceShape.length; i += 1) {
+    const srcDim = sourceShape[i];
+    const outIndex = outputIndices[offset + i];
+    mapped.push(srcDim === 1 ? 0 : outIndex);
+  }
+  return mapped;
+}
+
+function elementWise(A, B, fn, opName) {
+  const shapeA = shapeOf(A);
+  const shapeB = shapeOf(B);
+  const outputShape = broadcastShapes(shapeA, shapeB);
+
+  const output = createByShapeIndexed(outputShape, (outIdx) => {
+    const idxA = projectBroadcastIndices(outIdx, shapeA);
+    const idxB = projectBroadcastIndices(outIdx, shapeB);
+    return fn(getAtIndices(A, idxA), getAtIndices(B, idxB));
+  });
+
+  const usedBroadcasting =
+    shapeA.length !== shapeB.length ||
+    shapeA.some((dim, i) => dim !== shapeB[i]) ||
+    shapeA.join(",") !== outputShape.join(",") ||
+    shapeB.join(",") !== outputShape.join(",");
+
+  lastRunMeta = {
+    kind: "elementwise",
+    opName,
+    shapeA,
+    shapeB,
+    outputShape,
+    usedBroadcasting,
+  };
+
+  return output;
+}
+
+function elementWiseDeep(A, B, fn) {
+  if (!Array.isArray(A) && !Array.isArray(B)) return fn(A, B);
+  return A.map((v, i) => elementWiseDeep(v, B[i], fn));
+}
+
+function transpose(A) {
+  const shape = shapeOf(A);
+  if (shape.length === 1) return clone(A);
+
+  if (shape.length === 2) {
+    const [rows, cols] = shape;
+    const out = [];
+    for (let c = 0; c < cols; c += 1) {
+      const row = [];
+      for (let r = 0; r < rows; r += 1) {
+        row.push(A[r][c]);
+      }
+      out.push(row);
+    }
+    return out;
+  }
+
+  if (shape.length === 3) {
+    const [d0, d1, d2] = shape;
+    const out = [];
+    for (let i = 0; i < d2; i += 1) {
+      const level2 = [];
+      for (let j = 0; j < d1; j += 1) {
+        const row = [];
+        for (let k = 0; k < d0; k += 1) {
+          row.push(A[k][j][i]);
+        }
+        level2.push(row);
+      }
+      out.push(level2);
+    }
+    return out;
+  }
+
+  throw new Error("Transpose supports up to 3D in this interface.");
+}
+
+function reshape(A, targetShape) {
+  const flat = flatten(A);
+  const totalA = flat.length;
+  const totalTarget = targetShape.reduce((x, y) => x * y, 1);
+
+  if (totalA !== totalTarget) {
+    throw new Error(
+      `reshape needs same number of elements. Got ${totalA} and ${totalTarget}.`
+    );
+  }
+
+  return unflatten(flat, targetShape);
+}
+
+function flatten(arr) {
+  if (!Array.isArray(arr)) return [arr];
+  return arr.flatMap((x) => flatten(x));
+}
+
+function unflatten(flat, shape) {
+  let idx = 0;
+  function build(level = 0) {
+    const len = shape[level];
+    const out = [];
+    for (let i = 0; i < len; i += 1) {
+      if (level === shape.length - 1) {
+        out.push(flat[idx]);
+        idx += 1;
+      } else {
+        out.push(build(level + 1));
+      }
+    }
+    return out;
+  }
+  return build();
+}
+
+function matmul(A, B) {
+  const sA = shapeOf(A);
+  const sB = shapeOf(B);
+  const leftVec = sA.length === 1;
+  const rightVec = sB.length === 1;
+
+  const leftBatch = sA.length === 3 ? sA[0] : 1;
+  const rightBatch = sB.length === 3 ? sB[0] : 1;
+  const outBatch = Math.max(leftBatch, rightBatch);
+
+  if (leftBatch !== rightBatch && leftBatch !== 1 && rightBatch !== 1) {
+    throw new Error(
+      `matmul batch broadcast mismatch: ${leftBatch} vs ${rightBatch}.`
+    );
+  }
+
+  const leftRows = leftVec ? 1 : sA[sA.length - 2];
+  const leftInner = sA[sA.length - 1];
+  const rightInner = rightVec ? sB[0] : sB[sB.length - 2];
+  const rightCols = rightVec ? 1 : sB[sB.length - 1];
+
+  if (leftInner !== rightInner) {
+    throw new Error(
+      `matmul shape mismatch on core dims: ${formatShape(sA)} @ ${formatShape(
+        sB
+      )} (inner ${leftInner} vs ${rightInner}).`
+    );
+  }
+
+  const getLeft = (batch, row, k) => {
+    if (leftVec) return A[k];
+    if (sA.length === 2) return A[row][k];
+    const batchIdx = leftBatch === 1 ? 0 : batch;
+    return A[batchIdx][row][k];
+  };
+
+  const getRight = (batch, k, col) => {
+    if (rightVec) return B[k];
+    if (sB.length === 2) return B[k][col];
+    const batchIdx = rightBatch === 1 ? 0 : batch;
+    return B[batchIdx][k][col];
+  };
+
+  const matrixForBatch = (batch) => {
+    const out = [];
+    for (let r = 0; r < leftRows; r += 1) {
+      const row = [];
+      for (let c = 0; c < rightCols; c += 1) {
+        let sum = 0;
+        for (let k = 0; k < leftInner; k += 1) {
+          sum += getLeft(batch, r, k) * getRight(batch, k, c);
+        }
+        row.push(sum);
+      }
+      out.push(row);
+    }
+    return out;
+  };
+
+  const hasBatchAxis = sA.length > 2 || sB.length > 2;
+  const matrices = hasBatchAxis
+    ? Array.from({ length: outBatch }, (_, batch) => matrixForBatch(batch))
+    : [matrixForBatch(0)];
+
+  let output;
+  if (leftVec && rightVec) {
+    output = hasBatchAxis ? matrices.map((m) => m[0][0]) : matrices[0][0][0];
+  } else if (leftVec) {
+    output = hasBatchAxis ? matrices.map((m) => m[0].slice()) : matrices[0][0].slice();
+  } else if (rightVec) {
+    output = hasBatchAxis
+      ? matrices.map((m) => m.map((row) => row[0]))
+      : matrices[0].map((row) => row[0]);
+  } else {
+    output = hasBatchAxis ? matrices : matrices[0];
+  }
+
+  const outputShape = shapeOf(output);
+  lastRunMeta = {
+    kind: "matmul",
+    shapeA: sA,
+    shapeB: sB,
+    outputShape,
+    leftBatch,
+    rightBatch,
+    outBatch,
+    usedBroadcasting:
+      leftBatch !== rightBatch || sA.length !== sB.length || leftVec || rightVec,
+    leftVectorPromoted: leftVec,
+    rightVectorPromoted: rightVec,
+  };
+
+  return output;
+}
+
+function matmul2D(A, B) {
+  const rowsA = A.length;
+  const colsA = A[0].length;
+  const rowsB = B.length;
+  const colsB = B[0].length;
+
+  if (colsA !== rowsB) {
+    throw new Error(
+      `matmul shape mismatch: (${rowsA},${colsA}) x (${rowsB},${colsB})`
+    );
+  }
+
+  const out = [];
+  for (let r = 0; r < rowsA; r += 1) {
+    const row = [];
+    for (let c = 0; c < colsB; c += 1) {
+      let sum = 0;
+      for (let k = 0; k < colsA; k += 1) {
+        sum += A[r][k] * B[k][c];
+      }
+      row.push(sum);
+    }
+    out.push(row);
+  }
+  return out;
+}
+
+function concatAxis0(A, B) {
+  const sA = shapeOf(A);
+  const sB = shapeOf(B);
+  if (sA.length !== sB.length) {
+    throw new Error("concatenate requires same rank.");
+  }
+  for (let i = 1; i < sA.length; i += 1) {
+    if (sA[i] !== sB[i]) {
+      throw new Error(
+        "concatenate axis=0 requires other dimensions to be identical."
+      );
+    }
+  }
+  return [...clone(A), ...clone(B)];
+}
+
+function stackAxis0(A, B) {
+  const sA = JSON.stringify(shapeOf(A));
+  const sB = JSON.stringify(shapeOf(B));
+  if (sA !== sB) {
+    throw new Error("stack requires A and B to have the same shape.");
+  }
+  return [clone(A), clone(B)];
+}
+
+function reduceArray(A, { mode, axis, keepdims }) {
+  const rank = shapeOf(A).length;
+
+  if (axis === null) {
+    const flat = flatten(A);
+    let scalar;
+    if (mode === "sum") {
+      scalar = flat.reduce((acc, x) => acc + x, 0);
+    } else {
+      scalar = Number(
+        (flat.reduce((acc, x) => acc + x, 0) / flat.length).toFixed(4)
+      );
+    }
+
+    if (!keepdims) return scalar;
+
+    let wrapped = scalar;
+    for (let i = 0; i < rank; i += 1) wrapped = [wrapped];
+    return wrapped;
+  }
+
+  const reduced = reduceAlongAxis(A, axis, mode);
+  if (!keepdims) return reduced;
+  return insertAxisDimension(reduced, axis);
+}
+
+function reduceAlongAxis(arr, axis, mode) {
+  if (axis === 0) {
+    if (arr.length === 0) throw new Error("Cannot reduce empty array.");
+    let accum = clone(arr[0]);
+    for (let i = 1; i < arr.length; i += 1) {
+      accum = elementWiseDeep(accum, arr[i], (a, b) => a + b);
+    }
+
+    if (mode === "sum") return accum;
+    return elementWiseDeep(accum, accum, (a) => Number((a / arr.length).toFixed(4)));
+  }
+
+  return arr.map((sub) => reduceAlongAxis(sub, axis - 1, mode));
+}
+
+function insertAxisDimension(value, axis) {
+  if (axis === 0) return [value];
+  if (!Array.isArray(value)) return [value];
+  return value.map((v) => insertAxisDimension(v, axis - 1));
+}
+
+function clone(value) {
+  return JSON.parse(JSON.stringify(value));
+}
+
+function renderCode(op, parsed) {
+  const lines = ["import numpy as np", ""];
+
+  if (op.id === "ones" || op.id === "zeros") {
+    lines.push(`shape = (${parsed.shapes[0].join(", ")})`);
+  } else {
+    lines.push(`A = np.random.randint(1, 10, size=(${parsed.shapes[0].join(", ")}))`);
+    if (op.inputs === 2) {
+      lines.push(
+        `B = np.random.randint(1, 10, size=(${parsed.shapes[1].join(", ")}))`
+      );
+    }
+    if (op.requiresTarget) {
+      lines.push(`new_shape = (${parsed.targetShape.join(", ")})`);
+    }
+  }
+
+  if (op.supportsReductionOptions) {
+    const axisPart = parsed.options.axis === null ? "None" : parsed.options.axis;
+    lines.push(
+      `output = np.${op.id}(A, axis=${axisPart}, keepdims=${parsed.options.keepdims})`
+    );
+  } else {
+    lines.push(op.code);
+  }
+
+  lines.push("print(output)");
+
+  codeOutput.textContent = lines.join("\n");
+}
+
+function renderInputs(arrays, op) {
+  inputViz.innerHTML = "";
+
+  if (op.id === "ones" || op.id === "zeros") {
+    inputViz.appendChild(
+      buildMatrixCard("Generated Array", arrays[0], "from requested shape")
+    );
+    return;
+  }
+
+  arrays.forEach((arr, i) => {
+    inputViz.appendChild(buildMatrixCard(`Input ${i + 1}`, arr));
+  });
+}
+
+function renderOutput(output) {
+  outputViz.innerHTML = "";
+  outputViz.appendChild(buildMatrixCard("Output", output));
+}
+
+function renderComputationDetails(op, inputArrays, output, parsed, meta) {
+  detailViz.innerHTML = "";
+
+  if (meta && (meta.kind === "elementwise" || meta.kind === "matmul")) {
+    detailViz.appendChild(buildBroadcastUsageCard(meta));
+  }
+
+  if (op.id === "matmul") {
+    detailViz.appendChild(
+      buildMatmulDetail(inputArrays[0], inputArrays[1], output, meta)
+    );
+  } else if (op.id === "reshape") {
+    detailViz.appendChild(buildReshapeDetail(inputArrays[0], parsed.targetShape));
+  } else if (op.supportsReductionOptions) {
+    detailViz.appendChild(buildReductionDetail(op, inputArrays[0], parsed.options, output));
+  } else {
+    const note = document.createElement("p");
+    note.className = "slice-label";
+    note.textContent = "No extra computation walkthrough for this operation yet.";
+    detailViz.appendChild(note);
+  }
+}
+
+function buildBroadcastUsageCard(meta) {
+  const card = document.createElement("article");
+  card.className = "matrix-card";
+
+  const title = document.createElement("p");
+  title.className = "matrix-title";
+  title.textContent = meta.usedBroadcasting
+    ? "Broadcasting detected"
+    : "No broadcasting needed";
+  card.appendChild(title);
+
+  const line1 = document.createElement("p");
+  line1.className = "formula-line";
+  line1.textContent = `Input shapes: A${formatShape(meta.shapeA)}, B${formatShape(
+    meta.shapeB
+  )}`;
+  card.appendChild(line1);
+
+  const line2 = document.createElement("p");
+  line2.className = "formula-line";
+  line2.textContent = `Output shape: ${formatShape(meta.outputShape)}`;
+  card.appendChild(line2);
+
+  const explain = document.createElement("p");
+  explain.className = "slice-label";
+
+  if (!meta.usedBroadcasting) {
+    explain.textContent = "Inputs already align directly; operation runs without dimension expansion.";
+  } else if (meta.kind === "elementwise") {
+    explain.textContent =
+      "Element-wise broadcasting aligns dimensions from the right. Any dimension with size 1 is repeated to match the other input.";
+  } else {
+    explain.textContent =
+      "For np.matmul, only batch dimensions are broadcast; core matrix dimensions still follow (..., m, k) @ (..., k, n).";
+  }
+  card.appendChild(explain);
+
+  return card;
+}
+
+function buildMatmulDetail(A, B, output, meta) {
+  const wrapper = document.createElement("article");
+  wrapper.className = "matrix-card";
+
+  const title = document.createElement("p");
+  title.className = "matrix-title";
+  title.textContent = "np.matmul interactive computation breakdown";
+  wrapper.appendChild(title);
+
+  const sA = shapeOf(A);
+  const sB = shapeOf(B);
+
+  if (sA.length === 2 && sB.length === 2) {
+    wrapper.appendChild(buildMatmulInteractive2D(A, B, output));
+    return wrapper;
+  }
+
+  if (sA.length === 3 && sB.length === 3 && sA[0] === sB[0]) {
+    const help = document.createElement("p");
+    help.className = "slice-label";
+    help.textContent =
+      "Select a batch and output cell to highlight A row, B column, and formula.";
+    wrapper.appendChild(help);
+
+    const controls = document.createElement("div");
+    controls.className = "inline-fields";
+    controls.innerHTML = `
+      <label class="mini-label" for="batchSelect">batch</label>
+      <select id="batchSelect"></select>
+    `;
+    wrapper.appendChild(controls);
+
+    const batchSelect = controls.querySelector("#batchSelect");
+    for (let i = 0; i < sA[0]; i += 1) {
+      const opt = document.createElement("option");
+      opt.value = String(i);
+      opt.textContent = `batch ${i}`;
+      batchSelect.appendChild(opt);
+    }
+
+    const host = document.createElement("div");
+    wrapper.appendChild(host);
+
+    const renderBatch = () => {
+      const idx = Number(batchSelect.value);
+      host.innerHTML = "";
+      const label = document.createElement("p");
+      label.className = "slice-label";
+      label.textContent = `output[${idx}] = A[${idx}] @ B[${idx}]`;
+      host.appendChild(label);
+      host.appendChild(buildMatmulInteractive2D(A[idx], B[idx], output[idx]));
+    };
+
+    batchSelect.addEventListener("change", renderBatch);
+    renderBatch();
+    return wrapper;
+  }
+
+  const mixedNote = document.createElement("p");
+  mixedNote.className = "slice-label";
+  mixedNote.textContent =
+    "Mixed-rank/broadcasted matmul: each output batch uses A_batch @ B_batch after NumPy batch broadcasting.";
+  wrapper.appendChild(mixedNote);
+
+  if (meta && meta.outBatch > 1) {
+    const mapLine = document.createElement("p");
+    mapLine.className = "formula-line";
+    mapLine.textContent = `Batch mapping: output batch i uses A[${meta.leftBatch === 1 ? "0" : "i"}] and B[${
+      meta.rightBatch === 1 ? "0" : "i"
+    }].`;
+    wrapper.appendChild(mapLine);
+  }
+
+  wrapper.appendChild(buildMatrixCard("Input A", A));
+  wrapper.appendChild(buildMatrixCard("Input B", B));
+  wrapper.appendChild(buildMatrixCard("Output", output));
+
+  return wrapper;
+}
+
+function buildMatmulInteractive2D(A, B, out) {
+  const box = document.createElement("div");
+  const helper = document.createElement("p");
+  helper.className = "slice-label";
+  helper.textContent =
+    "Click a value in the output matrix. The corresponding row/column will be highlighted.";
+  box.appendChild(helper);
+
+  const state = { row: 0, col: 0 };
+  const pickerHost = document.createElement("div");
+  const matrixHost = document.createElement("div");
+  matrixHost.className = "viz-grid";
+  const formulaLine = document.createElement("p");
+  formulaLine.className = "formula-line";
+
+  function renderPicker() {
+    pickerHost.innerHTML = "";
+    const table = document.createElement("table");
+    table.className = "matrix-table";
+
+    out.forEach((rowValues, r) => {
+      const tr = document.createElement("tr");
+      rowValues.forEach((value, c) => {
+        const td = document.createElement("td");
+        const btn = document.createElement("button");
+        btn.type = "button";
+        btn.className = "matrix-pick-btn";
+        if (r === state.row && c === state.col) btn.classList.add("active");
+        btn.textContent = String(value);
+        btn.addEventListener("click", () => {
+          state.row = r;
+          state.col = c;
+          renderAll();
+        });
+        td.appendChild(btn);
+        tr.appendChild(td);
+      });
+      table.appendChild(tr);
+    });
+
+    pickerHost.appendChild(table);
+  }
+
+  function build2DCard(title, matrix, subtitle, highlight) {
+    const card = document.createElement("article");
+    card.className = "matrix-card";
+
+    const shape = shapeOf(matrix);
+    const titleEl = document.createElement("p");
+    titleEl.className = "matrix-title";
+    titleEl.innerHTML = `${escapeHtml(title)} <span class="shape-badge">shape: (${shape.join(
+      ", "
+    )})</span>`;
+    card.appendChild(titleEl);
+
+    const sub = document.createElement("p");
+    sub.className = "slice-label";
+    sub.textContent = subtitle;
+    card.appendChild(sub);
+
+    card.appendChild(render2DTableWithHighlights(matrix, highlight));
+    return card;
+  }
+
+  function renderAll() {
+    renderPicker();
+    matrixHost.innerHTML = "";
+    matrixHost.appendChild(
+      build2DCard(
+        "Input A",
+        A,
+        `highlighted row: ${state.row}`,
+        { highlightRow: state.row }
+      )
+    );
+    matrixHost.appendChild(
+      build2DCard(
+        "Input B",
+        B,
+        `highlighted column: ${state.col}`,
+        { highlightCol: state.col }
+      )
+    );
+    matrixHost.appendChild(
+      build2DCard(
+        "Output",
+        out,
+        `selected cell: [${state.row}, ${state.col}]`,
+        { highlightCell: { row: state.row, col: state.col } }
+      )
+    );
+
+    const terms = [];
+    const values = [];
+    for (let k = 0; k < A[0].length; k += 1) {
+      terms.push(`${A[state.row][k]}*${B[k][state.col]}`);
+      values.push(A[state.row][k] * B[k][state.col]);
+    }
+    formulaLine.textContent = `output[${state.row}, ${state.col}] = ${terms.join(
+      " + "
+    )} = ${values.join(" + ")} = ${out[state.row][state.col]}`;
+  }
+
+  box.appendChild(pickerHost);
+  box.appendChild(formulaLine);
+  box.appendChild(matrixHost);
+  renderAll();
+
+  return box;
+}
+
+function buildReshapeDetail(A, targetShape) {
+  const wrapper = document.createElement("article");
+  wrapper.className = "matrix-card";
+
+  const title = document.createElement("p");
+  title.className = "matrix-title";
+  title.textContent = "np.reshape step-by-step (dynamic)";
+  wrapper.appendChild(title);
+
+  const flat = flatten(A);
+  const total = flat.length;
+
+  const helper = document.createElement("p");
+  helper.className = "slice-label";
+  helper.textContent =
+    "Use Play to animate reshaping; slider also works for manual inspection.";
+  wrapper.appendChild(helper);
+
+  const controls = document.createElement("div");
+  controls.className = "slider-row";
+  controls.innerHTML = `
+    <label for="reshapeStep">step</label>
+    <input class="reshape-step" id="reshapeStep" type="range" min="0" max="${total}" value="0" />
+    <span id="reshapeStepLabel">0 / ${total}</span>
+    <button type="button" id="reshapePlayBtn">Play</button>
+    <button type="button" id="reshapeResetBtn">Reset</button>
+  `;
+  wrapper.appendChild(controls);
+
+  const flatLine = document.createElement("p");
+  flatLine.className = "formula-line";
+  flatLine.textContent = `flat(A) = [${flat.join(", ")}]`;
+  wrapper.appendChild(flatLine);
+
+  const previewHost = document.createElement("div");
+  wrapper.appendChild(previewHost);
+
+  const slider = controls.querySelector("#reshapeStep");
+  const stepLabel = controls.querySelector("#reshapeStepLabel");
+  const playBtn = controls.querySelector("#reshapePlayBtn");
+  const resetBtn = controls.querySelector("#reshapeResetBtn");
+  let timer = null;
+  let playing = false;
+
+  const renderStep = () => {
+    const step = Number(slider.value);
+    stepLabel.textContent = `${step} / ${total}`;
+    const partialFlat = new Array(total).fill("·");
+    for (let i = 0; i < step; i += 1) partialFlat[i] = flat[i];
+    const partial = unflatten(partialFlat, targetShape);
+
+    previewHost.innerHTML = "";
+    previewHost.appendChild(
+      buildMatrixCard(
+        "Current reshaped output",
+        partial,
+        `first ${step} element(s) assigned in row-major order`
+      )
+    );
+  };
+
+  const stopAnimation = () => {
+    if (timer) {
+      clearInterval(timer);
+      timer = null;
+    }
+    playing = false;
+    playBtn.textContent = "Play";
+  };
+
+  const startAnimation = () => {
+    stopAnimation();
+    playing = true;
+    playBtn.textContent = "Pause";
+    timer = setInterval(() => {
+      if (!document.body.contains(wrapper)) {
+        stopAnimation();
+        return;
+      }
+      const current = Number(slider.value);
+      if (current >= total) {
+        stopAnimation();
+        return;
+      }
+      slider.value = String(current + 1);
+      renderStep();
+    }, 500);
+  };
+
+  playBtn.addEventListener("click", () => {
+    if (playing) {
+      stopAnimation();
+    } else {
+      startAnimation();
+    }
+  });
+
+  resetBtn.addEventListener("click", () => {
+    stopAnimation();
+    slider.value = "0";
+    renderStep();
+  });
+
+  slider.addEventListener("input", () => {
+    if (playing) stopAnimation();
+    renderStep();
+  });
+
+  renderStep();
+  startAnimation();
+
+  return wrapper;
+}
+
+function buildReductionDetail(op, A, options, output) {
+  const wrapper = document.createElement("article");
+  wrapper.className = "matrix-card";
+
+  const title = document.createElement("p");
+  title.className = "matrix-title";
+  title.textContent = `np.${op.id} options summary`;
+  wrapper.appendChild(title);
+
+  const summary = document.createElement("p");
+  summary.className = "formula-line";
+  summary.textContent = `axis=${options.axis === null ? "None" : options.axis}, keepdims=${options.keepdims}`;
+  wrapper.appendChild(summary);
+
+  const explain = document.createElement("p");
+  explain.className = "slice-label";
+  explain.textContent =
+    options.axis === null
+      ? "Reducing over all dimensions."
+      : `Reducing along axis ${options.axis}; values on that axis are aggregated.`;
+  wrapper.appendChild(explain);
+
+  wrapper.appendChild(buildMatrixCard("Input A", A));
+  wrapper.appendChild(buildMatrixCard("Reduced output", output));
+
+  return wrapper;
+}
+
+function buildMatrixCard(title, arr, subtitle = "") {
+  const card = document.createElement("article");
+  card.className = "matrix-card";
+
+  const shape = shapeOf(arr);
+  const titleEl = document.createElement("p");
+  titleEl.className = "matrix-title";
+  titleEl.innerHTML = `${escapeHtml(title)} <span class="shape-badge">shape: (${shape.join(
+    ", "
+  ) || "scalar"})</span>`;
+
+  card.appendChild(titleEl);
+
+  if (subtitle) {
+    const sub = document.createElement("p");
+    sub.className = "slice-label";
+    sub.textContent = subtitle;
+    card.appendChild(sub);
+  }
+
+  if (!Array.isArray(arr)) {
+    const scalar = document.createElement("p");
+    scalar.textContent = String(arr);
+    scalar.style.fontFamily = "Courier New, monospace";
+    scalar.style.fontWeight = "700";
+    card.appendChild(scalar);
+    return card;
+  }
+
+  const rank = shape.length;
+
+  if (rank === 1) {
+    card.appendChild(render2DTable([arr]));
+  } else if (rank === 2) {
+    card.appendChild(render2DTable(arr));
+  } else if (rank === 3) {
+    arr.forEach((slice, idx) => {
+      const lbl = document.createElement("p");
+      lbl.className = "slice-label";
+      lbl.textContent = `slice ${idx} (axis 0)`;
+      card.appendChild(lbl);
+      card.appendChild(render2DTable(slice));
+    });
+  }
+
+  return card;
+}
+
+function render2DTable(matrix2d) {
+  const table = document.createElement("table");
+  table.className = "matrix-table";
+
+  matrix2d.forEach((row) => {
+    const tr = document.createElement("tr");
+    row.forEach((value) => {
+      const td = document.createElement("td");
+      td.textContent = String(value);
+      tr.appendChild(td);
+    });
+    table.appendChild(tr);
+  });
+
+  return table;
+}
+
+function render2DTableWithHighlights(matrix2d, highlight = {}) {
+  const table = document.createElement("table");
+  table.className = "matrix-table";
+
+  matrix2d.forEach((row, r) => {
+    const tr = document.createElement("tr");
+    row.forEach((value, c) => {
+      const td = document.createElement("td");
+      td.textContent = String(value);
+
+      if (highlight.highlightRow === r) td.classList.add("hl-row");
+      if (highlight.highlightCol === c) td.classList.add("hl-col");
+      if (
+        highlight.highlightCell &&
+        highlight.highlightCell.row === r &&
+        highlight.highlightCell.col === c
+      ) {
+        td.classList.add("hl-cell");
+      }
+
+      tr.appendChild(td);
+    });
+    table.appendChild(tr);
+  });
+
+  return table;
+}
+
+function escapeHtml(text) {
+  return String(text)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+init();

linear-regression/gradient-descent.html

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Gradient Descent Studio</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="bg-grid"></div>
+    <main class="container">
+      <nav class="top-nav">
+        <a href="index.html">Back Home</a>
+      </nav>
+
+      <header class="hero compact">
+        <p class="eyebrow">Page 2</p>
+        <h1>Gradient Descent Studio</h1>
+        <p>
+          Explore gradient descent for one-feature linear regression. Track
+          cost, parameters, and gradients at every step.
+        </p>
+      </header>
+
+      <section class="panel controls">
+        <div class="row two-col-row">
+          <div class="control-group">
+            <label for="sampleCount">Samples</label>
+            <input id="sampleCount" type="number" min="10" max="120" value="50" />
+          </div>
+          <div class="control-group">
+            <label for="learningRate">Learning Rate (alpha)</label>
+            <input id="learningRate" type="number" min="0.001" max="0.5" step="0.001" value="0.02" />
+          </div>
+          <div class="control-group">
+            <label for="iterationCount">Iterations</label>
+            <input id="iterationCount" type="number" min="5" max="300" value="120" />
+          </div>
+          <div class="control-group">
+            <label for="noiseLevel">Noise</label>
+            <input id="noiseLevel" type="number" min="0" max="5" step="0.1" value="0.35" />
+          </div>
+        </div>
+
+        <div class="row">
+          <button id="runGdBtn" type="button">Run Gradient Descent</button>
+        </div>
+      </section>
+
+      <section class="panel output">
+        <h2>Optimization Playback</h2>
+        <div class="slider-row gd-slider-row">
+          <label for="gdStep">step</label>
+          <input id="gdStep" type="range" min="0" max="0" value="0" />
+          <span id="gdStepLabel">0 / 0</span>
+          <button id="playGdBtn" type="button">Play</button>
+          <button id="resetGdBtn" type="button">Reset</button>
+        </div>
+      </section>
+
+      <section class="panel output">
+        <h2>Model Visualization</h2>
+        <canvas id="fitCanvas" width="980" height="450"></canvas>
+      </section>
+
+      <section class="panel output">
+        <h2>Cost Curve</h2>
+        <canvas id="costCanvas" width="980" height="260"></canvas>
+      </section>
+
+      <section class="panel output">
+        <h2>Cost Landscape (Descent Direction)</h2>
+        <div class="row">
+          <label for="landscapeMode">Landscape View</label>
+          <select id="landscapeMode">
+            <option value="2d">2D Contour-Style + Arrows</option>
+            <option value="3d">3D Surface + Trajectory</option>
+          </select>
+        </div>
+        <p class="slice-label">
+          3D axes: x=theta0, y=theta1, z=cost J(theta). Upward along z means higher cost; the trajectory goes from higher to lower cost.
+        </p>
+        <canvas id="landscapeCanvas" width="980" height="420"></canvas>
+      </section>
+
+      <section class="panel output">
+        <h2>Cost Function and Result</h2>
+        <div id="costSummary" class="viz-grid"></div>
+      </section>
+
+      <section class="panel output">
+        <h2>Step Details</h2>
+        <div id="stepSummary" class="viz-grid"></div>
+      </section>
+
+      <section class="panel output">
+        <h2>Iteration Log (Cost / Parameters / Gradients)</h2>
+        <div class="log-wrap">
+          <table class="gd-log-table" id="gdLogTable">
+            <thead>
+              <tr>
+                <th>step</th>
+                <th>cost</th>
+                <th>theta</th>
+                <th>gradient</th>
+              </tr>
+            </thead>
+            <tbody id="gdLogBody"></tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+
+    <script src="gradient.js?v=20260812g"></script>
+  </body>
+</html>

linear-regression/gradient.js

@@ -0,0 +1,829 @@
+const sampleCountInput = document.getElementById("sampleCount");
+const learningRateInput = document.getElementById("learningRate");
+const iterationCountInput = document.getElementById("iterationCount");
+const noiseLevelInput = document.getElementById("noiseLevel");
+const runGdBtn = document.getElementById("runGdBtn");
+const gdStep = document.getElementById("gdStep");
+const gdStepLabel = document.getElementById("gdStepLabel");
+const playGdBtn = document.getElementById("playGdBtn");
+const resetGdBtn = document.getElementById("resetGdBtn");
+const fitCanvas = document.getElementById("fitCanvas");
+const costCanvas = document.getElementById("costCanvas");
+const landscapeMode = document.getElementById("landscapeMode");
+const landscapeCanvas = document.getElementById("landscapeCanvas");
+const costSummary = document.getElementById("costSummary");
+const stepSummary = document.getElementById("stepSummary");
+const gdLogBody = document.getElementById("gdLogBody");
+
+const fitCtx = fitCanvas.getContext("2d");
+const costCtx = costCanvas.getContext("2d");
+const landscapeCtx = landscapeCanvas.getContext("2d");
+
+const state = {
+  data: [],
+  steps: [],
+  currentStep: 0,
+  timer: null,
+  landscapeCache: null,
+};
+
+function init() {
+  resizeCanvases();
+
+  runGdBtn.addEventListener("click", runGradientDescent);
+  landscapeMode.addEventListener("change", renderAll);
+  window.addEventListener("resize", handleResize);
+
+  gdStep.addEventListener("input", () => {
+    stopPlayback();
+    state.currentStep = Number(gdStep.value);
+    renderAll();
+  });
+
+  playGdBtn.addEventListener("click", () => {
+    if (!state.steps.length) return;
+    if (state.timer) stopPlayback();
+    else startPlayback();
+  });
+
+  resetGdBtn.addEventListener("click", () => {
+    stopPlayback();
+    if (!state.steps.length) return;
+    state.currentStep = 0;
+    gdStep.value = "0";
+    renderAll();
+  });
+
+  runGradientDescent();
+}
+
+function handleResize() {
+  resizeCanvases();
+  if (state.steps.length) renderAll();
+}
+
+function resizeCanvases() {
+  resizeCanvasToContainer(fitCanvas, 0.46, 240, 480);
+  resizeCanvasToContainer(costCanvas, 0.28, 200, 320);
+  resizeCanvasToContainer(landscapeCanvas, 0.5, 280, 520);
+}
+
+function resizeCanvasToContainer(canvas, ratio, minHeight, maxHeight) {
+  const parent = canvas.parentElement;
+  if (!parent) return;
+
+  const width = Math.max(320, Math.floor(parent.clientWidth - 2));
+  const targetHeight = Math.floor(width * ratio);
+  const height = Math.max(minHeight, Math.min(maxHeight, targetHeight));
+
+  if (canvas.width !== width || canvas.height !== height) {
+    canvas.width = width;
+    canvas.height = height;
+  }
+}
+
+function runGradientDescent() {
+  stopPlayback();
+
+  const config = readConfig();
+  state.data = generateData(config);
+  state.steps = computeGradientDescent(state.data, config).steps;
+  state.currentStep = 0;
+  state.landscapeCache = null;
+
+  gdStep.max = String(state.steps.length - 1);
+  gdStep.value = "0";
+
+  renderAll();
+}
+
+function readConfig() {
+  const sampleCount = clampInt(Number(sampleCountInput.value), 10, 120, 50);
+  const learningRate = clampNum(Number(learningRateInput.value), 0.001, 0.5, 0.02);
+  const iterations = clampInt(Number(iterationCountInput.value), 5, 300, 120);
+  const noise = clampNum(Number(noiseLevelInput.value), 0, 5, 0.35);
+
+  sampleCountInput.value = String(sampleCount);
+  learningRateInput.value = String(learningRate);
+  iterationCountInput.value = String(iterations);
+  noiseLevelInput.value = String(noise);
+
+  return { sampleCount, learningRate, iterations, noise };
+}
+
+function generateData(config) {
+  const rows = [];
+  for (let i = 0; i < config.sampleCount; i += 1) {
+    const x1 = rand(-5, 5);
+    const y = 8 + 4.2 * x1 + rand(-config.noise, config.noise);
+    rows.push({ x: [x1], y });
+  }
+  return rows;
+}
+
+function computeGradientDescent(data, config) {
+  let theta = [-12, 12];
+  const steps = [];
+
+  for (let step = 0; step <= config.iterations; step += 1) {
+    const { cost, grad } = costAndGradient(data, theta);
+
+    steps.push({ step, theta: theta.slice(), grad: grad.slice(), cost });
+
+    if (step === config.iterations) break;
+    theta = theta.map((t, j) => t - config.learningRate * grad[j]);
+  }
+
+  return { steps };
+}
+
+function costAndGradient(data, theta) {
+  const m = data.length;
+  let sumSq = 0;
+  const grad = [0, 0];
+
+  for (const row of data) {
+    const yHat = theta[0] + theta[1] * row.x[0];
+    const err = yHat - row.y;
+    sumSq += err * err;
+    grad[0] += err;
+    grad[1] += err * row.x[0];
+  }
+
+  grad[0] /= m;
+  grad[1] /= m;
+
+  return { cost: sumSq / (2 * m), grad };
+}
+
+function renderAll() {
+  if (!state.steps.length) return;
+
+  gdStepLabel.textContent = `${state.currentStep} / ${state.steps.length - 1}`;
+  renderFitPlot();
+  renderCostPlot();
+  renderCostLandscape();
+  renderCostSummary();
+  renderStepSummary();
+  renderLogTable();
+}
+
+function renderFitPlot() {
+  const ctx = fitCtx;
+  const { width, height } = fitCanvas;
+  const pad = 52;
+  const s = state.steps[state.currentStep];
+
+  ctx.clearRect(0, 0, width, height);
+
+  const xs = state.data.map((d) => d.x[0]);
+  const ys = state.data.map((d) => d.y);
+
+  const xMin = Math.min(...xs) - 1;
+  const xMax = Math.max(...xs) + 1;
+  const yMin = Math.min(...ys) - 2;
+  const yMax = Math.max(...ys) + 2;
+
+  const toX = (x) => pad + ((x - xMin) / (xMax - xMin)) * (width - 2 * pad);
+  const toY = (y) => height - pad - ((y - yMin) / (yMax - yMin)) * (height - 2 * pad);
+
+  drawAxes2D(ctx, width, height, pad, "x", "y");
+
+  ctx.fillStyle = "#0c7b73";
+  for (const row of state.data) {
+    ctx.beginPath();
+    ctx.arc(toX(row.x[0]), toY(row.y), 4, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  const yL = s.theta[0] + s.theta[1] * xMin;
+  const yR = s.theta[0] + s.theta[1] * xMax;
+  ctx.strokeStyle = "#dd5e2f";
+  ctx.lineWidth = 3;
+  ctx.beginPath();
+  ctx.moveTo(toX(xMin), toY(yL));
+  ctx.lineTo(toX(xMax), toY(yR));
+  ctx.stroke();
+}
+
+function renderCostPlot() {
+  const ctx = costCtx;
+  const { width, height } = costCanvas;
+  const pad = 40;
+  const costs = state.steps.map((s) => s.cost);
+
+  ctx.clearRect(0, 0, width, height);
+
+  const minC = Math.min(...costs);
+  const maxC = Math.max(...costs);
+
+  const toX = (i) => pad + (i / (costs.length - 1 || 1)) * (width - 2 * pad);
+  const toY = (c) =>
+    height - pad - ((c - minC) / (maxC - minC || 1)) * (height - 2 * pad);
+
+  drawAxes2D(ctx, width, height, pad, "iteration", "cost");
+
+  ctx.strokeStyle = "#0c7b73";
+  ctx.lineWidth = 2.2;
+  ctx.beginPath();
+  costs.forEach((cost, i) => {
+    const x = toX(i);
+    const y = toY(cost);
+    if (i === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  });
+  ctx.stroke();
+
+  ctx.fillStyle = "#dd5e2f";
+  ctx.beginPath();
+  ctx.arc(toX(state.currentStep), toY(costs[state.currentStep]), 5, 0, Math.PI * 2);
+  ctx.fill();
+}
+
+function renderCostLandscape() {
+  const data = getLandscapeData();
+  if (landscapeMode.value === "3d") renderLandscape3D(data);
+  else renderLandscape2D(data);
+}
+
+function getLandscapeData() {
+  if (state.landscapeCache) return state.landscapeCache;
+
+  const pathTheta0 = state.steps.map((s) => s.theta[0]);
+  const pathTheta1 = state.steps.map((s) => s.theta[1]);
+
+  const t0MinRaw = Math.min(...pathTheta0);
+  const t0MaxRaw = Math.max(...pathTheta0);
+  const t1MinRaw = Math.min(...pathTheta1);
+  const t1MaxRaw = Math.max(...pathTheta1);
+
+  const t0Pad = (t0MaxRaw - t0MinRaw || 1) * 0.35;
+  const t1Pad = (t1MaxRaw - t1MinRaw || 1) * 0.35;
+
+  const t0Min = t0MinRaw - t0Pad;
+  const t0Max = t0MaxRaw + t0Pad;
+  const t1Min = t1MinRaw - t1Pad;
+  const t1Max = t1MaxRaw + t1Pad;
+
+  const gridN = 44;
+  const grid = [];
+  let zMin = Infinity;
+  let zMax = -Infinity;
+
+  for (let gy = 0; gy < gridN; gy += 1) {
+    const t1 = t1Min + (gy / (gridN - 1)) * (t1Max - t1Min);
+    const row = [];
+    for (let gx = 0; gx < gridN; gx += 1) {
+      const t0 = t0Min + (gx / (gridN - 1)) * (t0Max - t0Min);
+      const cost = costAndGradient(state.data, [t0, t1]).cost;
+      row.push(cost);
+      zMin = Math.min(zMin, cost);
+      zMax = Math.max(zMax, cost);
+    }
+    grid.push(row);
+  }
+
+  const path = state.steps.map((s) => ({
+    t0: s.theta[0],
+    t1: s.theta[1],
+    z: s.cost,
+    g0: s.grad[0],
+    g1: s.grad[1],
+  }));
+
+  state.landscapeCache = {
+    grid,
+    gridN,
+    t0Min,
+    t0Max,
+    t1Min,
+    t1Max,
+    zMin,
+    zMax,
+    path,
+  };
+
+  return state.landscapeCache;
+}
+
+function renderLandscape2D(data) {
+  const ctx = landscapeCtx;
+  const { width, height } = landscapeCanvas;
+  const pad = 54;
+
+  ctx.clearRect(0, 0, width, height);
+
+  const toX = (t0) => pad + ((t0 - data.t0Min) / (data.t0Max - data.t0Min || 1)) * (width - 2 * pad);
+  const toY = (t1) => height - pad - ((t1 - data.t1Min) / (data.t1Max - data.t1Min || 1)) * (height - 2 * pad);
+
+  const cellW = (width - 2 * pad) / (data.gridN - 1);
+  const cellH = (height - 2 * pad) / (data.gridN - 1);
+
+  for (let gy = 0; gy < data.gridN - 1; gy += 1) {
+    for (let gx = 0; gx < data.gridN - 1; gx += 1) {
+      const z = data.grid[gy][gx];
+      const ratio = (z - data.zMin) / (data.zMax - data.zMin || 1);
+      ctx.fillStyle = heatColor(ratio);
+      ctx.fillRect(pad + gx * cellW, pad + gy * cellH, cellW + 1, cellH + 1);
+    }
+  }
+
+  drawAxes2D(ctx, width, height, pad, "theta0", "theta1");
+
+  ctx.strokeStyle = "#f4f1ea";
+  ctx.lineWidth = 2.4;
+  ctx.beginPath();
+  data.path.forEach((p, idx) => {
+    const x = toX(p.t0);
+    const y = toY(p.t1);
+    if (idx === 0) ctx.moveTo(x, y);
+    else ctx.lineTo(x, y);
+  });
+  ctx.stroke();
+
+  for (let idx = 0; idx < data.path.length - 1; idx += Math.max(1, Math.floor(data.path.length / 14))) {
+    const p1 = data.path[idx];
+    const p2 = data.path[Math.min(idx + 1, data.path.length - 1)];
+    drawArrow(ctx, toX(p1.t0), toY(p1.t1), toX(p2.t0), toY(p2.t1), "#14212b", 8);
+  }
+
+  const cur = data.path[state.currentStep];
+  drawArrow(
+    ctx,
+    toX(cur.t0),
+    toY(cur.t1),
+    toX(cur.t0 - cur.g0 * 0.15),
+    toY(cur.t1 - cur.g1 * 0.15),
+    "#dd5e2f",
+    11
+  );
+
+  ctx.fillStyle = "#dd5e2f";
+  ctx.beginPath();
+  ctx.arc(toX(cur.t0), toY(cur.t1), 5.5, 0, Math.PI * 2);
+  ctx.fill();
+}
+
+function renderLandscape3D(data) {
+  const ctx = landscapeCtx;
+  const { width, height } = landscapeCanvas;
+
+  ctx.clearRect(0, 0, width, height);
+
+  const t0Mid = (data.t0Min + data.t0Max) / 2;
+  const t1Mid = (data.t1Min + data.t1Max) / 2;
+  const t0Range = data.t0Max - data.t0Min || 1;
+  const t1Range = data.t1Max - data.t1Min || 1;
+  const zRange = data.zMax - data.zMin || 1;
+  const zScale = Math.max(t0Range, t1Range) * 0.95;
+
+  const baseCamera = {
+    yaw: -1.08,
+    pitch: 0.66,
+    dist: 21,
+    lockCostUp: true,
+    groundTilt: 0.62,
+    costTilt: 1.05,
+    scale: 1,
+    cx: 0,
+    cy: 0,
+  };
+
+  const camera = fitCameraToScene(data, width, height, zScale, t0Mid, t1Mid, baseCamera);
+
+  const project = (t0, t1, z) => {
+    const x1 = t0 - t0Mid;
+    const x2 = t1 - t1Mid;
+    const y = ((z - data.zMin) / zRange) * zScale;
+    return project3D(x1, x2, y, camera);
+  };
+
+  ctx.strokeStyle = "rgba(30, 44, 53, 0.26)";
+  ctx.lineWidth = 1;
+
+  for (let gy = 0; gy < data.gridN; gy += 1) {
+    ctx.beginPath();
+    let first = true;
+    for (let gx = 0; gx < data.gridN; gx += 1) {
+      const t0 = data.t0Min + (gx / (data.gridN - 1)) * (data.t0Max - data.t0Min);
+      const t1 = data.t1Min + (gy / (data.gridN - 1)) * (data.t1Max - data.t1Min);
+      const p = project(t0, t1, data.grid[gy][gx]);
+      if (first) {
+        ctx.moveTo(p.x, p.y);
+        first = false;
+      } else {
+        ctx.lineTo(p.x, p.y);
+      }
+    }
+    ctx.stroke();
+  }
+
+  for (let gx = 0; gx < data.gridN; gx += 1) {
+    ctx.beginPath();
+    let first = true;
+    for (let gy = 0; gy < data.gridN; gy += 1) {
+      const t0 = data.t0Min + (gx / (data.gridN - 1)) * (data.t0Max - data.t0Min);
+      const t1 = data.t1Min + (gy / (data.gridN - 1)) * (data.t1Max - data.t1Min);
+      const p = project(t0, t1, data.grid[gy][gx]);
+      if (first) {
+        ctx.moveTo(p.x, p.y);
+        first = false;
+      } else {
+        ctx.lineTo(p.x, p.y);
+      }
+    }
+    ctx.stroke();
+  }
+
+  drawSurfaceAxes3D(ctx, data, project);
+  drawAxisLegend3D(ctx, width, height);
+
+  for (let idx = 0; idx < data.path.length - 1; idx += 1) {
+    const p1m = data.path[idx];
+    const p2m = data.path[idx + 1];
+    const p1 = project(p1m.t0, p1m.t1, p1m.z);
+    const p2 = project(p2m.t0, p2m.t1, p2m.z);
+    const t = idx / Math.max(1, data.path.length - 2);
+    ctx.strokeStyle = trajectoryColor(t);
+    ctx.lineWidth = 2.8;
+    ctx.beginPath();
+    ctx.moveTo(p1.x, p1.y);
+    ctx.lineTo(p2.x, p2.y);
+    ctx.stroke();
+  }
+
+  for (let idx = 0; idx < data.path.length - 1; idx += Math.max(1, Math.floor(data.path.length / 10))) {
+    const p1m = data.path[idx];
+    const p2m = data.path[Math.min(idx + 1, data.path.length - 1)];
+    const p1 = project(p1m.t0, p1m.t1, p1m.z);
+    const p2 = project(p2m.t0, p2m.t1, p2m.z);
+    const t = idx / Math.max(1, data.path.length - 2);
+    drawArrow(ctx, p1.x, p1.y, p2.x, p2.y, trajectoryColor(t), 9);
+  }
+
+  const cur = data.path[state.currentStep];
+  const curP = project(cur.t0, cur.t1, cur.z);
+  ctx.fillStyle = "#dd5e2f";
+  ctx.beginPath();
+  ctx.arc(curP.x, curP.y, 5.5, 0, Math.PI * 2);
+  ctx.fill();
+
+  const start = data.path[0];
+  const end = data.path[data.path.length - 1];
+  const startP = project(start.t0, start.t1, start.z);
+  const endP = project(end.t0, end.t1, end.z);
+
+  ctx.fillStyle = "#1e4d4b";
+  ctx.beginPath();
+  ctx.arc(startP.x, startP.y, 4.2, 0, Math.PI * 2);
+  ctx.fill();
+  draw3DLabel(ctx, startP.x + 8, startP.y - 8, `start J=${start.z.toFixed(2)}`);
+
+  ctx.fillStyle = "#dd5e2f";
+  ctx.beginPath();
+  ctx.arc(endP.x, endP.y, 4.2, 0, Math.PI * 2);
+  ctx.fill();
+  draw3DLabel(ctx, endP.x + 8, endP.y + 14, `end J=${end.z.toFixed(2)}`);
+
+  const dropPct = ((start.z - end.z) / Math.max(1e-9, start.z)) * 100;
+  draw3DLabel(
+    ctx,
+    Math.min(startP.x, endP.x) + 14,
+    Math.min(startP.y, endP.y) - 18,
+    `cost drop: ${dropPct.toFixed(1)}%`
+  );
+}
+
+function fitCameraToScene(data, width, height, zScale, t0Mid, t1Mid, baseCamera) {
+  const points = [];
+  const gridStep = Math.max(1, Math.floor(data.gridN / 18));
+
+  for (let gy = 0; gy < data.gridN; gy += gridStep) {
+    for (let gx = 0; gx < data.gridN; gx += gridStep) {
+      const t0 = data.t0Min + (gx / (data.gridN - 1)) * (data.t0Max - data.t0Min);
+      const t1 = data.t1Min + (gy / (data.gridN - 1)) * (data.t1Max - data.t1Min);
+      const z = data.grid[gy][gx];
+      points.push(toCameraPoint(t0, t1, z, data, zScale, t0Mid, t1Mid, baseCamera));
+    }
+  }
+
+  for (const p of data.path) {
+    points.push(toCameraPoint(p.t0, p.t1, p.z, data, zScale, t0Mid, t1Mid, baseCamera));
+  }
+
+  const axisPoints = [
+    [data.t0Min, data.t1Min, data.zMin], // axis origin
+    [data.t0Max, data.t1Min, data.zMin], // theta0 end
+    [data.t0Min, data.t1Max, data.zMin], // theta1 end
+    [data.t0Min, data.t1Min, data.zMax], // cost end
+  ];
+  for (const [t0, t1, z] of axisPoints) {
+    points.push(toCameraPoint(t0, t1, z, data, zScale, t0Mid, t1Mid, baseCamera));
+  }
+
+  let minX = Infinity;
+  let maxX = -Infinity;
+  let minY = Infinity;
+  let maxY = -Infinity;
+
+  for (const p of points) {
+    if (!Number.isFinite(p.x) || !Number.isFinite(p.y)) continue;
+    minX = Math.min(minX, p.x);
+    maxX = Math.max(maxX, p.x);
+    minY = Math.min(minY, p.y);
+    maxY = Math.max(maxY, p.y);
+  }
+
+  if (!Number.isFinite(minX) || !Number.isFinite(maxX) || !Number.isFinite(minY) || !Number.isFinite(maxY)) {
+    return {
+      ...baseCamera,
+      scale: 24,
+      cx: width * 0.5,
+      cy: height * 0.58,
+    };
+  }
+
+  const sceneW = Math.max(1e-6, maxX - minX);
+  const sceneH = Math.max(1e-6, maxY - minY);
+  const padX = Math.max(74, Math.floor(width * 0.2));
+  const padY = Math.max(72, Math.floor(height * 0.22));
+  const availW = Math.max(120, width - padX * 2);
+  const availH = Math.max(120, height - padY * 2);
+  const rawScale = Math.min(availW / sceneW, availH / sceneH);
+  const scale = Math.max(1.5, Math.min(90, rawScale * 0.62));
+  const midX = (minX + maxX) / 2;
+  const midY = (minY + maxY) / 2;
+
+  return {
+    ...baseCamera,
+    scale,
+    cx: width / 2 - midX * scale,
+    cy: height / 2 - midY * scale,
+  };
+}
+
+function toCameraPoint(t0, t1, z, data, zScale, t0Mid, t1Mid, camera) {
+  const zRange = data.zMax - data.zMin || 1;
+  const x1 = t0 - t0Mid;
+  const x2 = t1 - t1Mid;
+  const y = ((z - data.zMin) / zRange) * zScale;
+  return project3D(x1, x2, y, camera);
+}
+
+function renderCostSummary() {
+  const first = state.steps[0];
+  const last = state.steps[state.steps.length - 1];
+
+  costSummary.innerHTML = `
+    <article class="matrix-card">
+      <p class="matrix-title">Cost Function</p>
+      <p class="formula-line">J(θ) = (1/2m) Σ(θ0 + θ1*x1 - y)^2</p>
+    </article>
+    <article class="matrix-card">
+      <p class="matrix-title">Result</p>
+      <p class="formula-line">y_hat = ${fmt(last.theta[0])} + ${fmt(last.theta[1])}*x1</p>
+      <p class="slice-label">parameters: 2 (theta0, theta1)</p>
+      <p class="slice-label">initial cost: ${first.cost.toFixed(6)}</p>
+      <p class="slice-label">final cost: ${last.cost.toFixed(6)}</p>
+    </article>
+  `;
+}
+
+function renderStepSummary() {
+  const s = state.steps[state.currentStep];
+  stepSummary.innerHTML = `
+    <article class="matrix-card">
+      <p class="matrix-title">Current Step ${s.step}</p>
+      <p class="formula-line">cost = ${s.cost.toFixed(6)}</p>
+      <p class="formula-line">theta = [${s.theta.map(fmt).join(", ")}]</p>
+      <p class="formula-line">gradient = [${s.grad.map(fmt).join(", ")}]</p>
+    </article>
+  `;
+}
+
+function renderLogTable() {
+  gdLogBody.innerHTML = "";
+
+  for (const s of state.steps) {
+    const tr = document.createElement("tr");
+    if (s.step === state.currentStep) tr.classList.add("active-log-row");
+
+    const cells = [
+      String(s.step),
+      s.cost.toFixed(6),
+      `[${s.theta.map(fmt).join(", ")}]`,
+      `[${s.grad.map(fmt).join(", ")}]`,
+    ];
+
+    cells.forEach((txt) => {
+      const td = document.createElement("td");
+      td.textContent = txt;
+      tr.appendChild(td);
+    });
+
+    gdLogBody.appendChild(tr);
+  }
+}
+
+function drawAxes2D(ctx, width, height, pad, xLabel, yLabel) {
+  ctx.strokeStyle = "#8f9ba1";
+  ctx.lineWidth = 1.2;
+
+  ctx.beginPath();
+  ctx.moveTo(pad, height - pad);
+  ctx.lineTo(width - pad, height - pad);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(pad, height - pad);
+  ctx.lineTo(pad, pad);
+  ctx.stroke();
+
+  ctx.fillStyle = "#4c5961";
+  ctx.font = "13px 'Courier New', monospace";
+  ctx.fillText(xLabel, width - pad - 50, height - pad + 22);
+  ctx.fillText(yLabel, pad - 30, pad - 10);
+}
+
+function drawSurfaceAxes3D(ctx, data, project) {
+  const origin = project(data.t0Min, data.t1Min, data.zMin);
+  const t0End = project(data.t0Max, data.t1Min, data.zMin);
+  const t1End = project(data.t0Min, data.t1Max, data.zMin);
+  const zEnd = project(data.t0Min, data.t1Min, data.zMax);
+
+  drawArrow(ctx, origin.x, origin.y, t0End.x, t0End.y, "#30444f", 9);
+  drawArrow(ctx, origin.x, origin.y, t1End.x, t1End.y, "#30444f", 9);
+  drawArrow(ctx, origin.x, origin.y, zEnd.x, zEnd.y, "#b23f2c", 10);
+
+  draw3DLabel(ctx, t0End.x + 7, t0End.y + 14, "theta0 (+)");
+  draw3DLabel(ctx, t1End.x + 7, t1End.y + 14, "theta1 (+)");
+  draw3DLabel(ctx, zEnd.x + 8, zEnd.y - 10, "cost J(theta) increases");
+  draw3DLabel(ctx, origin.x + 8, origin.y + 16, "cost decreases toward valley");
+}
+
+function draw3DLabel(ctx, x, y, text) {
+  ctx.fillStyle = "#23333d";
+  ctx.font = "12px 'Courier New', monospace";
+  ctx.fillText(text, x, y);
+}
+
+function drawAxisLegend3D(ctx, width, height) {
+  const boxW = Math.min(270, Math.max(200, Math.floor(width * 0.34)));
+  const boxH = Math.min(120, Math.max(92, Math.floor(height * 0.24)));
+  const boxX = 16;
+  const boxY = height - boxH - 14;
+  const ox = boxX + Math.floor(boxW * 0.36);
+  const oy = boxY + Math.floor(boxH * 0.78);
+
+  ctx.fillStyle = "rgba(245, 244, 240, 0.92)";
+  ctx.strokeStyle = "rgba(35, 51, 61, 0.4)";
+  ctx.lineWidth = 1;
+  ctx.beginPath();
+  ctx.rect(boxX, boxY, boxW, boxH);
+  ctx.fill();
+  ctx.stroke();
+
+  const xLen = Math.floor(boxW * 0.42);
+  const yLen = Math.floor(boxW * 0.24);
+  const zLen = Math.floor(boxH * 0.64);
+
+  drawArrow(ctx, ox, oy, ox + xLen, oy, "#1f5d7a", 9);
+  drawArrow(ctx, ox, oy, ox - yLen, oy - yLen, "#2f7a3a", 9);
+  drawArrow(ctx, ox, oy, ox, oy - zLen, "#b23f2c", 9);
+
+  ctx.fillStyle = "#1f5d7a";
+  ctx.font = "12px 'Courier New', monospace";
+  ctx.fillText("theta0 (+)", ox + xLen + 4, oy + 4);
+
+  ctx.fillStyle = "#2f7a3a";
+  ctx.fillText("theta1 (+)", Math.max(6, ox - yLen - 62), oy - yLen - 6);
+
+  ctx.fillStyle = "#b23f2c";
+  ctx.fillText("cost J(theta) (+)", ox + 8, oy - zLen - 8);
+}
+
+function project3D(x1, x2, y, camera) {
+  if (camera.lockCostUp) {
+    const cosY = Math.cos(camera.yaw);
+    const sinY = Math.sin(camera.yaw);
+    const u = x1 * cosY - x2 * sinY;
+    const ground = x1 * sinY + x2 * cosY;
+    const v = ground * camera.groundTilt + y * camera.costTilt;
+
+    return {
+      x: camera.cx + u * camera.scale,
+      y: camera.cy - v * camera.scale,
+    };
+  }
+
+  const cosY = Math.cos(camera.yaw);
+  const sinY = Math.sin(camera.yaw);
+  const cosX = Math.cos(camera.pitch);
+  const sinX = Math.sin(camera.pitch);
+
+  const u = x1 * cosY - x2 * sinY;
+  const v0 = x1 * sinY + x2 * cosY;
+  const v = v0 * cosX - y * sinX;
+  const w = v0 * sinX + y * cosX;
+
+  const perspective = camera.dist / (camera.dist + w + 0.001);
+  return {
+    x: camera.cx + u * camera.scale * perspective,
+    y: camera.cy - v * camera.scale * perspective,
+  };
+}
+
+function heatColor(t) {
+  const clamped = Math.max(0, Math.min(1, t));
+  const r = Math.round(34 + clamped * 210);
+  const g = Math.round(48 + (1 - clamped) * 140);
+  const b = Math.round(95 + (1 - clamped) * 80);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+function trajectoryColor(t) {
+  const clamped = Math.max(0, Math.min(1, t));
+  const r = Math.round(22 + clamped * 205);
+  const g = Math.round(88 + clamped * 28);
+  const b = Math.round(120 - clamped * 68);
+  return `rgb(${r}, ${g}, ${b})`;
+}
+
+function drawArrow(ctx, x1, y1, x2, y2, color, headSize) {
+  const dx = x2 - x1;
+  const dy = y2 - y1;
+  const len = Math.hypot(dx, dy);
+  if (len < 0.0001) return;
+
+  const ux = dx / len;
+  const uy = dy / len;
+  const hx = x2 - ux * headSize;
+  const hy = y2 - uy * headSize;
+
+  ctx.strokeStyle = color;
+  ctx.fillStyle = color;
+  ctx.lineWidth = 2;
+  ctx.beginPath();
+  ctx.moveTo(x1, y1);
+  ctx.lineTo(x2, y2);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(x2, y2);
+  ctx.lineTo(hx - uy * (headSize * 0.5), hy + ux * (headSize * 0.5));
+  ctx.lineTo(hx + uy * (headSize * 0.5), hy - ux * (headSize * 0.5));
+  ctx.closePath();
+  ctx.fill();
+}
+
+function startPlayback() {
+  if (state.timer || !state.steps.length) return;
+  playGdBtn.textContent = "Pause";
+
+  state.timer = setInterval(() => {
+    if (!document.body.contains(gdStep)) {
+      stopPlayback();
+      return;
+    }
+
+    if (state.currentStep >= state.steps.length - 1) {
+      stopPlayback();
+      return;
+    }
+
+    state.currentStep += 1;
+    gdStep.value = String(state.currentStep);
+    renderAll();
+  }, 220);
+}
+
+function stopPlayback() {
+  if (!state.timer) {
+    playGdBtn.textContent = "Play";
+    return;
+  }
+
+  clearInterval(state.timer);
+  state.timer = null;
+  playGdBtn.textContent = "Play";
+}
+
+function fmt(n) {
+  return Number(n).toFixed(4);
+}
+
+function rand(min, max) {
+  return min + Math.random() * (max - min);
+}
+
+function clampInt(v, min, max, fallback) {
+  if (!Number.isFinite(v)) return fallback;
+  return Math.max(min, Math.min(max, Math.round(v)));
+}
+
+function clampNum(v, min, max, fallback) {
+  if (!Number.isFinite(v)) return fallback;
+  return Math.max(min, Math.min(max, v));
+}
+
+init();

linear-regression/index.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Data Driven World Interface</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="bg-grid"></div>
+    <main class="container">
+      <header class="hero">
+        <p class="eyebrow">Course Interface</p>
+        <h1>Data Driven World</h1>
+        <p>
+          Explore NumPy matrix operations through an interactive visual lab.
+          Choose operations in natural language, set matrix shapes, and inspect
+          the generated NumPy code with input/output visualizations.
+        </p>
+      </header>
+
+      <section class="cards">
+        <a class="card" href="numpy-lab.html">
+          <h2>NumPy Matrix Lab</h2>
+          <p>
+            Operations, shape-aware inputs, NumPy snippets, and visualized arrays
+            up to 3 dimensions.
+          </p>
+          <span>Open Lab</span>
+        </a>
+        <a class="card" href="gradient-descent.html">
+          <h2>Gradient Descent Studio</h2>
+          <p>
+            Dynamic optimization walkthrough for one-feature linear regression
+            with step-level gradients, costs, and descent-direction landscapes.
+          </p>
+          <span>Open Studio</span>
+        </a>
+        <a class="card" href="linear-regression-steps.html">
+          <h2>Linear Regression Step Trainer</h2>
+          <p>
+            Solve hand-calculation style gradient and one-step parameter updates
+            on two easy samples with optional z-normalization.
+          </p>
+          <span>Open Trainer</span>
+        </a>
+      </section>
+    </main>
+  </body>
+</html>

linear-regression/linear-regression-steps.html

@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Linear Regression Step Trainer</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="bg-grid"></div>
+    <main class="container">
+      <nav class="top-nav">
+        <a href="index.html">Back Home</a>
+      </nav>
+
+      <header class="hero compact">
+        <p class="eyebrow">Page 3</p>
+        <h1>Linear Regression Step Trainer</h1>
+        <p>
+          Practice one-step gradient and parameter updates with two data samples.
+          Choose a model setup, optionally enable z-normalization, then inspect
+          every calculation in detail.
+        </p>
+      </header>
+
+      <section class="panel controls">
+        <div class="row">
+          <label for="setupSelect">Parameter Setup</label>
+          <select id="setupSelect">
+            <option value="two_weights_no_intercept">Two weights, no intercept: y_hat = w1x1 + w2x2</option>
+            <option value="two_weights_one_intercept">Two weights + one intercept: y_hat = b + w1x1 + w2x2</option>
+            <option value="one_weight_one_intercept">One weight + one intercept: y_hat = b + wx</option>
+          </select>
+        </div>
+
+        <div class="row">
+          <label for="alphaInput">Learning Rate (alpha)</label>
+          <input id="alphaInput" type="number" min="0.01" max="1" step="0.01" value="0.1" />
+        </div>
+
+        <div class="row">
+          <label for="zNormToggle">Use z-normalization</label>
+          <input id="zNormToggle" type="checkbox" />
+        </div>
+
+        <div class="row">
+          <button id="newQuestionBtn" type="button">Randomize New Samples</button>
+          <button id="solveBtn" type="button">Show Step-by-Step Solution</button>
+        </div>
+      </section>
+
+      <section class="panel output">
+        <h2>Question Data (Ground-Truth y Included)</h2>
+        <div id="questionPrompt" class="viz-grid"></div>
+      </section>
+
+      <section class="panel output">
+        <h2>Detailed Process, Result, and Explanation</h2>
+        <div id="solutionOutput" class="viz-grid"></div>
+      </section>
+    </main>
+
+    <script src="linear-regression-steps.js?v=20260812"></script>
+  </body>
+</html>

linear-regression/linear-regression-steps.js

@@ -0,0 +1,387 @@
+const setupSelect = document.getElementById("setupSelect");
+const alphaInput = document.getElementById("alphaInput");
+const zNormToggle = document.getElementById("zNormToggle");
+const newQuestionBtn = document.getElementById("newQuestionBtn");
+const solveBtn = document.getElementById("solveBtn");
+const questionPrompt = document.getElementById("questionPrompt");
+const solutionOutput = document.getElementById("solutionOutput");
+
+const setupConfig = {
+  two_weights_no_intercept: {
+    label: "Two weights, no intercept",
+    featureNames: ["x1", "x2"],
+    paramNames: ["w1", "w2"],
+    hasIntercept: false,
+    formula: "y_hat = w1*x1 + w2*x2",
+  },
+  two_weights_one_intercept: {
+    label: "Two weights + one intercept",
+    featureNames: ["x1", "x2"],
+    paramNames: ["b", "w1", "w2"],
+    hasIntercept: true,
+    formula: "y_hat = b + w1*x1 + w2*x2",
+  },
+  one_weight_one_intercept: {
+    label: "One weight + one intercept",
+    featureNames: ["x"],
+    paramNames: ["b", "w"],
+    hasIntercept: true,
+    formula: "y_hat = b + w*x",
+  },
+};
+
+const state = {
+  setupKey: "two_weights_no_intercept",
+  question: null,
+};
+
+function init() {
+  bindEvents();
+  generateQuestion();
+}
+
+function bindEvents() {
+  setupSelect.addEventListener("change", () => {
+    state.setupKey = setupSelect.value;
+    generateQuestion();
+    solutionOutput.innerHTML = "";
+  });
+
+  zNormToggle.addEventListener("change", renderQuestionPrompt);
+
+  newQuestionBtn.addEventListener("click", () => {
+    generateQuestion();
+    solutionOutput.innerHTML = "";
+  });
+
+  solveBtn.addEventListener("click", () => {
+    const alpha = clampNum(Number(alphaInput.value), 0.01, 1, 0.1);
+    alphaInput.value = fmt(alpha);
+    const useZNorm = zNormToggle.checked;
+    renderSolution(alpha, useZNorm);
+  });
+}
+
+function generateQuestion() {
+  const cfg = setupConfig[state.setupKey];
+  const rows = [];
+
+  if (state.setupKey === "one_weight_one_intercept") {
+    const trueB = randInt(-1, 3);
+    const trueW = randInt(1, 4);
+    const x1 = randInt(1, 4);
+    let x2 = randInt(2, 6);
+    while (x2 === x1) x2 = randInt(2, 6);
+
+    rows.push({ x: [x1], y: trueB + trueW * x1 });
+    rows.push({ x: [x2], y: trueB + trueW * x2 });
+
+    state.question = {
+      trueParams: { b: trueB, w: trueW },
+      initParams: { b: 0, w: 0 },
+      rows,
+      cfg,
+    };
+  } else if (state.setupKey === "two_weights_no_intercept") {
+    const trueW1 = randInt(1, 3);
+    const trueW2 = randInt(1, 3);
+
+    const x11 = randInt(1, 4);
+    let x12 = randInt(2, 6);
+    while (x12 === x11) x12 = randInt(2, 6);
+
+    const x21 = randInt(1, 4);
+    let x22 = randInt(2, 6);
+    while (x22 === x21) x22 = randInt(2, 6);
+
+    rows.push({ x: [x11, x21], y: trueW1 * x11 + trueW2 * x21 });
+    rows.push({ x: [x12, x22], y: trueW1 * x12 + trueW2 * x22 });
+
+    state.question = {
+      trueParams: { w1: trueW1, w2: trueW2 },
+      initParams: { w1: 0, w2: 0 },
+      rows,
+      cfg,
+    };
+  } else {
+    const trueB = randInt(-1, 3);
+    const trueW1 = randInt(1, 3);
+    const trueW2 = randInt(1, 3);
+
+    const x11 = randInt(1, 4);
+    let x12 = randInt(2, 6);
+    while (x12 === x11) x12 = randInt(2, 6);
+
+    const x21 = randInt(1, 4);
+    let x22 = randInt(2, 6);
+    while (x22 === x21) x22 = randInt(2, 6);
+
+    rows.push({ x: [x11, x21], y: trueB + trueW1 * x11 + trueW2 * x21 });
+    rows.push({ x: [x12, x22], y: trueB + trueW1 * x12 + trueW2 * x22 });
+
+    state.question = {
+      trueParams: { b: trueB, w1: trueW1, w2: trueW2 },
+      initParams: { b: 0, w1: 0, w2: 0 },
+      rows,
+      cfg,
+    };
+  }
+
+  renderQuestionPrompt();
+}
+
+function renderQuestionPrompt() {
+  if (!state.question) return;
+
+  const useZNorm = zNormToggle.checked;
+  const { cfg, rows } = state.question;
+
+  questionPrompt.innerHTML = `
+    <div class="matrix-card">
+      <p class="matrix-title">Setup</p>
+      <p class="formula-line">Model: ${escapeHtml(cfg.label)}</p>
+      <p class="formula-line">Formula: ${escapeHtml(cfg.formula)}</p>
+      <p class="formula-line">Initial parameters: ${renderParamInline(state.question.initParams)}</p>
+      <p class="formula-line">Normalization for update step: ${useZNorm ? "z-normalization enabled" : "raw features"}</p>
+      <p class="formula-line">Task: Compute gradients and one update step for all parameters.</p>
+    </div>
+    <div class="matrix-card">
+      <p class="matrix-title">Two Data Samples</p>
+      ${renderDataTable(rows, cfg.featureNames, null)}
+      <p class="slice-label">Ground-truth y is given in the table.</p>
+    </div>
+  `;
+}
+
+function renderSolution(alpha, useZNorm) {
+  if (!state.question) return;
+
+  const { cfg, rows, initParams } = state.question;
+  const m = rows.length;
+  const featureStats = computeFeatureStats(rows);
+  const rowsUsed = rows.map((row) => ({
+    y: row.y,
+    x: row.x.map((value, idx) => (useZNorm ? zNorm(value, featureStats[idx]) : value)),
+    xRaw: row.x.slice(),
+  }));
+
+  const orderedParams = cfg.paramNames.slice();
+  const grads = {};
+  const update = {};
+  const predRows = [];
+
+  for (const name of orderedParams) grads[name] = 0;
+
+  for (let i = 0; i < m; i += 1) {
+    const row = rowsUsed[i];
+    const yHat = predict(cfg, initParams, row.x);
+    const err = yHat - row.y;
+
+    predRows.push({ index: i + 1, x: row.x, xRaw: row.xRaw, y: row.y, yHat, err });
+
+    if (cfg.hasIntercept) grads.b += err;
+
+    if (state.setupKey === "one_weight_one_intercept") {
+      grads.w += err * row.x[0];
+    } else {
+      grads.w1 += err * row.x[0];
+      grads.w2 += err * row.x[1];
+    }
+  }
+
+  for (const name of orderedParams) {
+    grads[name] /= m;
+    update[name] = initParams[name] - alpha * grads[name];
+  }
+
+  const cost = predRows.reduce((acc, r) => acc + r.err * r.err, 0) / (2 * m);
+
+  const normBlock = useZNorm
+    ? `
+      <div class="matrix-card">
+        <p class="matrix-title">Step 0: z-Normalization</p>
+        ${renderNormSummary(cfg.featureNames, featureStats)}
+        ${renderDataTable(rows, cfg.featureNames, rowsUsed.map((r) => r.x))}
+      </div>
+    `
+    : "";
+
+  solutionOutput.innerHTML = `
+    ${normBlock}
+    <div class="matrix-card">
+      <p class="matrix-title">Step 1: Predictions and Errors</p>
+      ${renderPredictionSteps(cfg, predRows, initParams, useZNorm)}
+      <p class="formula-line">Cost: J = (1/(2m)) * sum((y_hat - y)^2) = ${fmt(cost)}</p>
+    </div>
+
+    <div class="matrix-card">
+      <p class="matrix-title">Step 2: Gradient Calculation</p>
+      ${renderGradientSteps(cfg, predRows, grads, m)}
+    </div>
+
+    <div class="matrix-card">
+      <p class="matrix-title">Step 3: Parameter Update (One Gradient Step)</p>
+      ${renderUpdateSteps(cfg, initParams, grads, update, alpha)}
+    </div>
+
+    <div class="matrix-card">
+      <p class="matrix-title">Explanation</p>
+      <p class="formula-line">A negative gradient means increasing that parameter will reduce cost, so the update adds value in that direction.</p>
+      <p class="formula-line">A positive gradient means decreasing that parameter will reduce cost.</p>
+      <p class="formula-line">${useZNorm ? "Using z-normalized features keeps scales consistent, so gradient magnitudes across features are easier to compare." : "Raw features are used directly, so larger-scale features can produce larger gradient terms."}</p>
+      <p class="formula-line">Use <strong>Randomize New Samples</strong> to practice again with fresh numbers.</p>
+    </div>
+  `;
+}
+
+function renderDataTable(rows, featureNames, zRows) {
+  const headers = featureNames.map((f) => `<th>${f}</th>`).join("");
+  const zHeaders = zRows ? featureNames.map((f) => `<th>z(${f})</th>`).join("") : "";
+
+  const body = rows
+    .map((row, i) => {
+      const xs = row.x.map((v) => `<td>${fmt(v)}</td>`).join("");
+      const zs = zRows
+        ? zRows[i].map((v) => `<td>${fmt(v)}</td>`).join("")
+        : "";
+      return `<tr><td>${i + 1}</td>${xs}${zs}<td>${fmt(row.y)}</td></tr>`;
+    })
+    .join("");
+
+  return `
+    <table class="matrix-table">
+      <thead>
+        <tr>
+          <th>sample</th>
+          ${headers}
+          ${zHeaders}
+          <th>y (ground truth)</th>
+        </tr>
+      </thead>
+      <tbody>${body}</tbody>
+    </table>
+  `;
+}
+
+function renderNormSummary(featureNames, stats) {
+  return featureNames
+    .map((name, idx) => {
+      const s = stats[idx];
+      return `<p class="formula-line">${name}: mean=${fmt(s.mean)}, std=${fmt(s.std)} so z = (x - ${fmt(s.mean)}) / ${fmt(s.std)}</p>`;
+    })
+    .join("");
+}
+
+function renderPredictionSteps(cfg, predRows, initParams, useZNorm) {
+  const pLine = renderParamInline(initParams);
+  const head = `<p class="formula-line">Start with ${pLine}. ${useZNorm ? "Use normalized x values." : "Use raw x values."}</p>`;
+
+  const lines = predRows
+    .map((row) => {
+      if (state.setupKey === "one_weight_one_intercept") {
+        return `<p class="formula-line">sample ${row.index}: y_hat = b + w*x = ${fmt(initParams.b)} + ${fmt(initParams.w)}*${fmt(row.x[0])} = ${fmt(row.yHat)}, error = y_hat - y = ${fmt(row.yHat)} - ${fmt(row.y)} = ${fmt(row.err)}</p>`;
+      }
+
+      if (cfg.hasIntercept) {
+        return `<p class="formula-line">sample ${row.index}: y_hat = b + w1*x1 + w2*x2 = ${fmt(initParams.b)} + ${fmt(initParams.w1)}*${fmt(row.x[0])} + ${fmt(initParams.w2)}*${fmt(row.x[1])} = ${fmt(row.yHat)}, error = ${fmt(row.err)}</p>`;
+      }
+
+      return `<p class="formula-line">sample ${row.index}: y_hat = w1*x1 + w2*x2 = ${fmt(initParams.w1)}*${fmt(row.x[0])} + ${fmt(initParams.w2)}*${fmt(row.x[1])} = ${fmt(row.yHat)}, error = ${fmt(row.err)}</p>`;
+    })
+    .join("");
+
+  return head + lines;
+}
+
+function renderGradientSteps(cfg, predRows, grads, m) {
+  const errTerms = predRows.map((r) => fmt(r.err)).join(" + ");
+  let out = "";
+
+  if (cfg.hasIntercept) {
+    out += `<p class="formula-line">grad_b = (1/m) * sum(error) = (1/${m}) * (${errTerms}) = ${fmt(grads.b)}</p>`;
+  }
+
+  if (state.setupKey === "one_weight_one_intercept") {
+    const terms = predRows.map((r) => `${fmt(r.err)}*${fmt(r.x[0])}`).join(" + ");
+    out += `<p class="formula-line">grad_w = (1/m) * sum(error*x) = (1/${m}) * (${terms}) = ${fmt(grads.w)}</p>`;
+    return out;
+  }
+
+  const terms1 = predRows.map((r) => `${fmt(r.err)}*${fmt(r.x[0])}`).join(" + ");
+  const terms2 = predRows.map((r) => `${fmt(r.err)}*${fmt(r.x[1])}`).join(" + ");
+  out += `<p class="formula-line">grad_w1 = (1/m) * sum(error*x1) = (1/${m}) * (${terms1}) = ${fmt(grads.w1)}</p>`;
+  out += `<p class="formula-line">grad_w2 = (1/m) * sum(error*x2) = (1/${m}) * (${terms2}) = ${fmt(grads.w2)}</p>`;
+
+  return out;
+}
+
+function renderUpdateSteps(cfg, initParams, grads, update, alpha) {
+  return cfg.paramNames
+    .map((name) => {
+      return `<p class="formula-line">${name}_new = ${name} - alpha*grad_${name} = ${fmt(initParams[name])} - ${fmt(alpha)}*${fmt(grads[name])} = ${fmt(update[name])}</p>`;
+    })
+    .join("");
+}
+
+function predict(cfg, params, xRow) {
+  let yHat = cfg.hasIntercept ? params.b : 0;
+
+  if (state.setupKey === "one_weight_one_intercept") {
+    yHat += params.w * xRow[0];
+    return yHat;
+  }
+
+  yHat += params.w1 * xRow[0] + params.w2 * xRow[1];
+  return yHat;
+}
+
+function computeFeatureStats(rows) {
+  const d = rows[0].x.length;
+  const stats = [];
+
+  for (let j = 0; j < d; j += 1) {
+    const values = rows.map((r) => r.x[j]);
+    const mean = values.reduce((acc, v) => acc + v, 0) / values.length;
+    const variance =
+      values.reduce((acc, v) => acc + (v - mean) * (v - mean), 0) / values.length;
+    const std = Math.sqrt(variance) || 1;
+    stats.push({ mean, std });
+  }
+
+  return stats;
+}
+
+function zNorm(value, stat) {
+  return (value - stat.mean) / stat.std;
+}
+
+function renderParamInline(params) {
+  return Object.entries(params)
+    .map(([k, v]) => `${k}=${fmt(v)}`)
+    .join(", ");
+}
+
+function clampNum(v, min, max, fallback) {
+  if (!Number.isFinite(v)) return fallback;
+  return Math.max(min, Math.min(max, v));
+}
+
+function randInt(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+function fmt(v) {
+  if (!Number.isFinite(v)) return String(v);
+  return Number(v.toFixed(4)).toString();
+}
+
+function escapeHtml(text) {
+  return String(text)
+    .replaceAll("&", "&amp;")
+    .replaceAll("<", "&lt;")
+    .replaceAll(">", "&gt;")
+    .replaceAll('"', "&quot;")
+    .replaceAll("'", "&#39;");
+}
+
+init();

linear-regression/numpy-lab.html

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>NumPy Matrix Lab</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <div class="bg-grid"></div>
+    <main class="container">
+      <nav class="top-nav">
+        <a href="index.html">Back Home</a>
+      </nav>
+
+      <header class="hero compact">
+        <p class="eyebrow">Page 1</p>
+        <h1>NumPy Matrix Operations</h1>
+        <p>
+          Pick a natural-language operation, define matrix shapes (max 3D), and
+          inspect input/output arrays plus executable NumPy code.
+        </p>
+        <p class="slice-label">
+          Broadcasting is enabled. Example element-wise valid pair: (2,3) with (1,3). Example matmul valid pair: (2,3) with (4,3,2).
+        </p>
+      </header>
+
+      <section class="panel controls">
+        <div class="row">
+          <label for="operationSelect">Operation</label>
+          <select id="operationSelect"></select>
+        </div>
+
+        <div class="row">
+          <label for="nlInput">Natural language query</label>
+          <input
+            id="nlInput"
+            type="text"
+            placeholder="Example: multiply matrix A and B"
+          />
+          <button id="matchBtn" type="button">Match Query</button>
+        </div>
+
+        <div id="operationInfo" class="operation-info"></div>
+        <div id="shapeInputs" class="shape-grid"></div>
+        <div id="operationOptions" class="shape-grid"></div>
+
+        <div class="row">
+          <button id="runBtn" type="button">Generate and Compute</button>
+        </div>
+      </section>
+
+      <section class="panel output">
+        <h2>Generated NumPy Code</h2>
+        <pre id="codeOutput" class="code"></pre>
+      </section>
+
+      <section class="panel output">
+        <h2>Input Matrices</h2>
+        <div id="inputViz" class="viz-grid"></div>
+      </section>
+
+      <section class="panel output">
+        <h2>Output Matrix</h2>
+        <div id="outputViz" class="viz-grid"></div>
+      </section>
+
+      <section class="panel output">
+        <h2>Computation Details</h2>
+        <div id="detailViz" class="viz-grid"></div>
+      </section>
+    </main>
+
+    <script src="app.js?v=20260812"></script>
+  </body>
+</html>

linear-regression/styles.css

@@ -0,0 +1,428 @@
+:root {
+  --bg: #f4f1ea;
+  --card: #fffef9;
+  --ink: #18242d;
+  --muted: #57646d;
+  --accent: #dd5e2f;
+  --accent-2: #0c7b73;
+  --line: #d8d2c4;
+  --shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
+  --radius: 14px;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Avenir Next", "Gill Sans", "Trebuchet MS", sans-serif;
+  color: var(--ink);
+  background: radial-gradient(circle at 20% 10%, #fff6df, #f4f1ea 45%),
+    linear-gradient(120deg, #f4f1ea, #ebf3ef);
+  min-height: 100vh;
+}
+
+.bg-grid {
+  position: fixed;
+  inset: 0;
+  background-image: linear-gradient(rgba(12, 123, 115, 0.07) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(12, 123, 115, 0.07) 1px, transparent 1px);
+  background-size: 36px 36px;
+  pointer-events: none;
+  z-index: -1;
+}
+
+.container {
+  width: min(1050px, 92vw);
+  margin: 0 auto;
+  padding: 28px 0 50px;
+}
+
+.top-nav {
+  margin-bottom: 12px;
+}
+
+.top-nav a {
+  text-decoration: none;
+  color: var(--accent-2);
+  font-weight: 700;
+}
+
+.hero {
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 28px;
+  box-shadow: var(--shadow);
+}
+
+.hero.compact {
+  padding: 22px 24px;
+}
+
+.eyebrow {
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 1.8px;
+  color: var(--accent);
+  font-weight: 800;
+  font-size: 12px;
+}
+
+h1 {
+  margin: 10px 0 8px;
+  font-size: clamp(1.8rem, 3vw, 2.8rem);
+}
+
+h2 {
+  margin-top: 0;
+}
+
+p {
+  margin: 0;
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+.cards {
+  margin-top: 20px;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 16px;
+}
+
+.card {
+  display: block;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 20px;
+  color: inherit;
+  text-decoration: none;
+  box-shadow: var(--shadow);
+  transition: transform 0.2s ease;
+}
+
+.card:hover {
+  transform: translateY(-4px);
+}
+
+.card span {
+  display: inline-block;
+  margin-top: 14px;
+  color: var(--accent-2);
+  font-weight: 700;
+}
+
+.panel {
+  margin-top: 16px;
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: var(--radius);
+  padding: 20px;
+  box-shadow: var(--shadow);
+}
+
+.row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+label {
+  font-weight: 700;
+  min-width: 170px;
+}
+
+select,
+input,
+button {
+  border-radius: 10px;
+  border: 1px solid #c7c0b2;
+  padding: 10px 12px;
+  font-size: 0.96rem;
+}
+
+select,
+input {
+  background: #fff;
+  flex: 1;
+  min-width: 220px;
+}
+
+button {
+  background: var(--accent);
+  color: #fff;
+  border: none;
+  font-weight: 700;
+  cursor: pointer;
+  transition: filter 0.15s ease;
+}
+
+button:hover {
+  filter: brightness(0.94);
+}
+
+.operation-info {
+  margin: 8px 0 14px;
+  color: var(--muted);
+  font-size: 0.95rem;
+}
+
+.shape-grid {
+  display: grid;
+  gap: 10px;
+}
+
+.shape-card {
+  padding: 12px;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: #fff;
+}
+
+.shape-card h3 {
+  margin: 0 0 8px;
+  font-size: 1rem;
+}
+
+.shape-card input {
+  width: 100%;
+}
+
+.options-card {
+  background: #fffaf1;
+}
+
+.inline-fields {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.mini-label {
+  min-width: 70px;
+  font-weight: 700;
+}
+
+input[type="checkbox"] {
+  width: 18px;
+  height: 18px;
+  min-width: 18px;
+  flex: 0;
+}
+
+.code {
+  margin: 0;
+  padding: 14px;
+  border-radius: 12px;
+  background: #1c252e;
+  color: #f3f0e6;
+  overflow-x: auto;
+  min-height: 120px;
+}
+
+.viz-grid {
+  display: grid;
+  gap: 14px;
+}
+
+.matrix-card {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 12px;
+  background: #fff;
+}
+
+.matrix-title {
+  margin: 0 0 8px;
+  font-weight: 700;
+}
+
+.shape-badge {
+  display: inline-block;
+  margin-left: 8px;
+  color: #fff;
+  background: var(--accent-2);
+  border-radius: 999px;
+  font-size: 0.8rem;
+  padding: 2px 8px;
+}
+
+.matrix-table {
+  border-collapse: collapse;
+  width: max-content;
+  max-width: 100%;
+  margin-bottom: 10px;
+}
+
+.matrix-table td {
+  border: 1px solid #ddd3c0;
+  padding: 6px 9px;
+  text-align: right;
+  font-family: "Courier New", monospace;
+  font-size: 0.9rem;
+  background: #fdfbf5;
+}
+
+.matrix-table th {
+  border: 1px solid #ddd3c0;
+  padding: 6px 9px;
+  text-align: right;
+  font-family: "Courier New", monospace;
+  font-size: 0.86rem;
+  background: #f6efdf;
+}
+
+.matrix-pick-btn {
+  width: 100%;
+  border: 1px solid #ddd3c0;
+  border-radius: 6px;
+  padding: 5px 7px;
+  background: #fff;
+  color: var(--ink);
+  font-family: "Courier New", monospace;
+  font-weight: 700;
+}
+
+.matrix-pick-btn.active {
+  background: var(--accent-2);
+  color: #fff;
+  border-color: var(--accent-2);
+}
+
+.hl-row {
+  background: #fff1dc !important;
+}
+
+.hl-col {
+  background: #e7f7f4 !important;
+}
+
+.hl-cell {
+  background: #ddeafc !important;
+  font-weight: 800;
+}
+
+.slice-label {
+  font-size: 0.85rem;
+  color: var(--muted);
+  margin: 6px 0;
+}
+
+.formula-line {
+  margin: 4px 0;
+  font-family: "Courier New", monospace;
+  font-size: 0.9rem;
+  color: #29333a;
+}
+
+.slider-row {
+  display: grid;
+  grid-template-columns: auto 1fr auto auto auto;
+  gap: 10px;
+  align-items: center;
+  margin: 8px 0 10px;
+}
+
+.slider-row label {
+  min-width: 36px;
+}
+
+.error {
+  color: #a11634;
+  font-weight: 700;
+}
+
+.two-col-row {
+  align-items: flex-end;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
+  gap: 12px;
+}
+
+.control-group {
+  display: grid;
+  gap: 6px;
+}
+
+.control-group label {
+  min-width: 0;
+}
+
+.gd-slider-row {
+  grid-template-columns: auto 1fr auto auto auto;
+}
+
+#fitCanvas,
+#costCanvas,
+#landscapeCanvas {
+  width: 100%;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: #fff;
+}
+
+.log-wrap {
+  overflow: auto;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+}
+
+.gd-log-table {
+  border-collapse: collapse;
+  width: 100%;
+  min-width: 800px;
+  font-family: "Courier New", monospace;
+  font-size: 0.88rem;
+}
+
+.gd-log-table th,
+.gd-log-table td {
+  border-bottom: 1px solid #e6dfd2;
+  padding: 8px 10px;
+  text-align: left;
+  white-space: nowrap;
+}
+
+.gd-log-table th {
+  position: sticky;
+  top: 0;
+  background: #faf6eb;
+  z-index: 1;
+}
+
+.active-log-row td {
+  background: #eef8f6;
+}
+
+@media (max-width: 680px) {
+  .container {
+    width: 94vw;
+    padding-top: 18px;
+  }
+
+  label {
+    min-width: 100%;
+  }
+
+  .row {
+    margin-bottom: 10px;
+  }
+
+  .slider-row {
+    grid-template-columns: 1fr;
+  }
+
+  .slider-row label {
+    min-width: 0;
+  }
+
+  .gd-slider-row {
+    grid-template-columns: 1fr;
+  }
+}

logistic-regression/about.html

@@ -0,0 +1,37 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DDW Interface - Notes</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <div>
+        <p class="kicker">Data Driven World</p>
+        <h1>Interface Notes</h1>
+      </div>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="simple-sigmoid.html">Simple Sigmoid</a>
+        <a href="confusion-matrix.html">Confusion Matrix (Page 3)</a>
+        <a href="sigmoid.html">Sigmoid Function</a>
+        <a href="cost-visualization.html">Cost Function</a>
+        <a class="active" href="about.html">Notes</a>
+      </nav>
+    </header>
+
+    <main class="panel page-copy">
+      <h2>How to use the sigmoid page</h2>
+      <p>
+        The sigmoid page visualizes logistic regression probability:
+        <code>p = 1 / (1 + exp(-(b0 + b1x)))</code>.
+      </p>
+      <p>
+        Adjust <code>b0</code>, <code>b1</code>, and threshold <code>t</code> to see how decision boundaries and
+        probabilities change. You can also click the chart to add sample points and inspect classification outcomes.
+      </p>
+    </main>
+  </body>
+</html>

logistic-regression/app.js

@@ -0,0 +1,381 @@
+const canvas = document.getElementById("plot");
+const ctx = canvas.getContext("2d");
+
+const controls = {
+  b0: document.getElementById("b0"),
+  b1: document.getElementById("b1"),
+  t: document.getElementById("t"),
+  probeX: document.getElementById("probeX"),
+  showGrid: document.getElementById("showGrid"),
+  showShade: document.getElementById("showShade"),
+  showDerivative: document.getElementById("showDerivative"),
+  preset: document.getElementById("preset"),
+  resetBtn: document.getElementById("resetBtn"),
+  animateBtn: document.getElementById("animateBtn"),
+};
+
+const valueLabels = {
+  b0: document.getElementById("b0Value"),
+  b1: document.getElementById("b1Value"),
+  t: document.getElementById("tValue"),
+  probeX: document.getElementById("probeValue"),
+};
+
+const stats = document.getElementById("stats");
+const points = [];
+
+let animationTimer = null;
+let animationDirection = 1;
+
+const MARGIN = { left: 70, right: 24, top: 24, bottom: 58 };
+const X_MIN = -10;
+const X_MAX = 10;
+
+function logistic(z) {
+  return 1 / (1 + Math.exp(-z));
+}
+
+function modelProbability(x, b0, b1) {
+  return logistic(b0 + b1 * x);
+}
+
+function xToCanvas(x) {
+  const w = canvas.width - MARGIN.left - MARGIN.right;
+  return MARGIN.left + ((x - X_MIN) / (X_MAX - X_MIN)) * w;
+}
+
+function yToCanvas(y) {
+  const h = canvas.height - MARGIN.top - MARGIN.bottom;
+  return canvas.height - MARGIN.bottom - y * h;
+}
+
+function canvasToX(pixelX) {
+  const w = canvas.width - MARGIN.left - MARGIN.right;
+  return X_MIN + ((pixelX - MARGIN.left) / w) * (X_MAX - X_MIN);
+}
+
+function format(num, digits = 3) {
+  return Number(num).toFixed(digits);
+}
+
+function drawAxes(showGrid) {
+  const plotLeft = MARGIN.left;
+  const plotRight = canvas.width - MARGIN.right;
+  const plotTop = MARGIN.top;
+  const plotBottom = canvas.height - MARGIN.bottom;
+
+  ctx.strokeStyle = "#c9d9df";
+  ctx.lineWidth = 1;
+
+  if (showGrid) {
+    for (let x = -10; x <= 10; x += 2) {
+      const px = xToCanvas(x);
+      ctx.beginPath();
+      ctx.moveTo(px, plotTop);
+      ctx.lineTo(px, plotBottom);
+      ctx.stroke();
+    }
+    for (let y = 0; y <= 1.001; y += 0.1) {
+      const py = yToCanvas(y);
+      ctx.beginPath();
+      ctx.moveTo(plotLeft, py);
+      ctx.lineTo(plotRight, py);
+      ctx.stroke();
+    }
+  }
+
+  ctx.strokeStyle = "#14343f";
+  ctx.lineWidth = 1.4;
+
+  ctx.beginPath();
+  ctx.moveTo(plotLeft, yToCanvas(0));
+  ctx.lineTo(plotRight, yToCanvas(0));
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(xToCanvas(0), plotTop);
+  ctx.lineTo(xToCanvas(0), plotBottom);
+  ctx.stroke();
+
+  ctx.fillStyle = "#14343f";
+  ctx.font = "13px 'Avenir Next', sans-serif";
+
+  for (let x = -10; x <= 10; x += 2) {
+    const px = xToCanvas(x);
+    ctx.fillText(String(x), px - 8, yToCanvas(0) + 19);
+  }
+
+  for (let y = 0; y <= 1.001; y += 0.2) {
+    const py = yToCanvas(y);
+    ctx.fillText(format(y, 1), plotLeft - 40, py + 4);
+  }
+
+  ctx.fillText("x", plotRight - 12, yToCanvas(0) + 40);
+  ctx.fillText("p", xToCanvas(0) + 12, plotTop + 12);
+}
+
+function drawThresholdLine(t) {
+  ctx.strokeStyle = "#d8534f";
+  ctx.lineWidth = 1.3;
+  ctx.setLineDash([7, 5]);
+  ctx.beginPath();
+  ctx.moveTo(MARGIN.left, yToCanvas(t));
+  ctx.lineTo(canvas.width - MARGIN.right, yToCanvas(t));
+  ctx.stroke();
+  ctx.setLineDash([]);
+}
+
+function drawRegionShade(b0, b1, t) {
+  if (Math.abs(b1) < 1e-9) {
+    return;
+  }
+  const logit = Math.log(t / (1 - t));
+  const boundaryX = (logit - b0) / b1;
+
+  const left = MARGIN.left;
+  const right = canvas.width - MARGIN.right;
+  const top = MARGIN.top;
+  const bottom = canvas.height - MARGIN.bottom;
+  const boundaryPx = xToCanvas(Math.max(X_MIN, Math.min(X_MAX, boundaryX)));
+
+  ctx.globalAlpha = 0.15;
+  ctx.fillStyle = "#0a8f7b";
+
+  if (b1 > 0) {
+    ctx.fillRect(boundaryPx, top, right - boundaryPx, bottom - top);
+  } else {
+    ctx.fillRect(left, top, boundaryPx - left, bottom - top);
+  }
+  ctx.globalAlpha = 1;
+}
+
+function drawCurve(b0, b1) {
+  ctx.strokeStyle = "#0a8f7b";
+  ctx.lineWidth = 3;
+  ctx.beginPath();
+
+  const steps = 600;
+  for (let i = 0; i <= steps; i += 1) {
+    const x = X_MIN + (i / steps) * (X_MAX - X_MIN);
+    const y = modelProbability(x, b0, b1);
+    const px = xToCanvas(x);
+    const py = yToCanvas(y);
+
+    if (i === 0) {
+      ctx.moveTo(px, py);
+    } else {
+      ctx.lineTo(px, py);
+    }
+  }
+
+  ctx.stroke();
+}
+
+function drawDerivative(b0, b1) {
+  ctx.strokeStyle = "#f2b84b";
+  ctx.lineWidth = 2;
+  ctx.setLineDash([6, 4]);
+  ctx.beginPath();
+
+  const steps = 600;
+  for (let i = 0; i <= steps; i += 1) {
+    const x = X_MIN + (i / steps) * (X_MAX - X_MIN);
+    const p = modelProbability(x, b0, b1);
+    const derivative = Math.abs(b1 * p * (1 - p));
+    const y = Math.min(1, derivative * 4);
+
+    const px = xToCanvas(x);
+    const py = yToCanvas(y);
+
+    if (i === 0) {
+      ctx.moveTo(px, py);
+    } else {
+      ctx.lineTo(px, py);
+    }
+  }
+
+  ctx.stroke();
+  ctx.setLineDash([]);
+}
+
+function drawProbeAndSamples(b0, b1, t, probeX) {
+  const probeP = modelProbability(probeX, b0, b1);
+
+  for (const sampleX of points) {
+    const p = modelProbability(sampleX, b0, b1);
+    const positive = p >= t;
+    ctx.fillStyle = positive ? "#0a8f7b" : "#d8534f";
+    ctx.beginPath();
+    ctx.arc(xToCanvas(sampleX), yToCanvas(p), 5, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  ctx.strokeStyle = "#14343f";
+  ctx.setLineDash([4, 4]);
+  ctx.beginPath();
+  ctx.moveTo(xToCanvas(probeX), yToCanvas(0));
+  ctx.lineTo(xToCanvas(probeX), yToCanvas(probeP));
+  ctx.stroke();
+  ctx.setLineDash([]);
+
+  ctx.fillStyle = "#14343f";
+  ctx.beginPath();
+  ctx.arc(xToCanvas(probeX), yToCanvas(probeP), 6, 0, Math.PI * 2);
+  ctx.fill();
+
+  ctx.font = "12px 'Avenir Next', sans-serif";
+  ctx.fillText(`probe p=${format(probeP)}`, xToCanvas(probeX) + 8, yToCanvas(probeP) - 8);
+}
+
+function renderStats(b0, b1, t, probeX) {
+  const probeP = modelProbability(probeX, b0, b1);
+
+  let boundaryText = "No finite boundary (b1≈0)";
+  if (Math.abs(b1) > 1e-9) {
+    const logit = Math.log(t / (1 - t));
+    const boundaryX = (logit - b0) / b1;
+    boundaryText = `Decision boundary x*: ${format(boundaryX)}`;
+  }
+
+  const positives = points.filter((x) => modelProbability(x, b0, b1) >= t).length;
+  const negatives = points.length - positives;
+
+  stats.innerHTML = `
+    <span>Equation: p = 1/(1+exp(-(${format(b0)} + ${format(b1)}x)))</span>
+    <span>Threshold t = ${format(t, 2)}</span>
+    <span>Probe: x = ${format(probeX, 2)}, p = ${format(probeP)}</span>
+    <span>${boundaryText}</span>
+    <span>Sample points: ${points.length} total</span>
+    <span>Class counts by t: ${positives} positive, ${negatives} negative</span>
+  `;
+}
+
+function updateLabelValues() {
+  valueLabels.b0.textContent = format(controls.b0.value, 2);
+  valueLabels.b1.textContent = format(controls.b1.value, 2);
+  valueLabels.t.textContent = format(controls.t.value, 2);
+  valueLabels.probeX.textContent = format(controls.probeX.value, 2);
+}
+
+function render() {
+  const b0 = Number(controls.b0.value);
+  const b1 = Number(controls.b1.value);
+  const t = Number(controls.t.value);
+  const probeX = Number(controls.probeX.value);
+
+  updateLabelValues();
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawAxes(controls.showGrid.checked);
+
+  if (controls.showShade.checked) {
+    drawRegionShade(b0, b1, t);
+  }
+
+  drawThresholdLine(t);
+  drawCurve(b0, b1);
+
+  if (controls.showDerivative.checked) {
+    drawDerivative(b0, b1);
+  }
+
+  drawProbeAndSamples(b0, b1, t, probeX);
+  renderStats(b0, b1, t, probeX);
+}
+
+function reset() {
+  controls.b0.value = 0;
+  controls.b1.value = 1;
+  controls.t.value = 0.5;
+  controls.probeX.value = 0;
+  controls.showGrid.checked = true;
+  controls.showShade.checked = true;
+  controls.showDerivative.checked = false;
+  controls.preset.value = "default";
+  points.length = 0;
+  stopAnimation();
+  render();
+}
+
+function applyPreset(presetKey) {
+  const presetMap = {
+    default: { b0: 0, b1: 1, t: 0.5 },
+    steep: { b0: -1, b1: 3, t: 0.5 },
+    reversed: { b0: 0.5, b1: -2.2, t: 0.5 },
+    "high-threshold": { b0: 0, b1: 1, t: 0.8 },
+  };
+
+  const preset = presetMap[presetKey] || presetMap.default;
+  controls.b0.value = preset.b0;
+  controls.b1.value = preset.b1;
+  controls.t.value = preset.t;
+  render();
+}
+
+function startAnimation() {
+  if (animationTimer) return;
+
+  controls.animateBtn.textContent = "Stop Animation";
+
+  animationTimer = setInterval(() => {
+    const current = Number(controls.probeX.value);
+    let next = current + animationDirection * 0.18;
+
+    if (next > X_MAX) {
+      next = X_MAX;
+      animationDirection = -1;
+    }
+    if (next < X_MIN) {
+      next = X_MIN;
+      animationDirection = 1;
+    }
+
+    controls.probeX.value = next;
+    render();
+  }, 30);
+}
+
+function stopAnimation() {
+  if (animationTimer) {
+    clearInterval(animationTimer);
+    animationTimer = null;
+  }
+  controls.animateBtn.textContent = "Animate Probe";
+}
+
+for (const key of ["b0", "b1", "t", "probeX", "showGrid", "showShade", "showDerivative"]) {
+  controls[key].addEventListener("input", render);
+}
+
+controls.resetBtn.addEventListener("click", reset);
+
+controls.preset.addEventListener("change", (event) => {
+  applyPreset(event.target.value);
+});
+
+controls.animateBtn.addEventListener("click", () => {
+  if (animationTimer) {
+    stopAnimation();
+  } else {
+    startAnimation();
+  }
+});
+
+canvas.addEventListener("click", (event) => {
+  const rect = canvas.getBoundingClientRect();
+  const clickX = event.clientX - rect.left;
+  const x = canvasToX((clickX / rect.width) * canvas.width);
+
+  if (x < X_MIN || x > X_MAX) {
+    return;
+  }
+
+  points.push(Number(x.toFixed(2)));
+  if (points.length > 30) {
+    points.shift();
+  }
+
+  render();
+});
+
+reset();

logistic-regression/confusion-matrix.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DDW Interface - Confusion Matrix Practice</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <div>
+        <p class="kicker">Data Driven World</p>
+        <h1>Confusion Matrix Practice (Page 3)</h1>
+      </div>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="simple-sigmoid.html">Simple Sigmoid</a>
+        <a class="active" href="confusion-matrix.html">Confusion Matrix (Page 3)</a>
+        <a href="sigmoid.html">Sigmoid Function</a>
+        <a href="cost-visualization.html">Cost Function</a>
+        <a href="about.html">Notes</a>
+      </nav>
+    </header>
+
+    <main class="layout">
+      <section class="panel controls">
+        <h2>Exercise Setup</h2>
+
+        <label for="classMode">Classification type</label>
+        <select id="classMode">
+          <option value="binary">2 classes (Positive / Negative)</option>
+          <option value="three">3 classes (A / B / C)</option>
+        </select>
+
+        <label for="threshold">Threshold t: <span id="thresholdValue">0.50</span></label>
+        <input id="threshold" type="range" min="0.30" max="0.80" step="0.01" value="0.50" />
+
+        <p class="hint" id="ruleText"></p>
+
+        <div class="button-row">
+          <button id="checkBtn" type="button">Check My Answers</button>
+          <button id="showSolutionBtn" type="button">Show Full Solution</button>
+        </div>
+
+        <div class="button-row">
+          <button id="newSamplesBtn" type="button">Generate New Samples</button>
+          <button id="resetBtn" type="button">Reset Inputs</button>
+        </div>
+
+        <div class="stats" id="feedbackStats"></div>
+      </section>
+
+      <section class="panel chart-panel confusion-panel">
+        <h2>Student Task</h2>
+        <p class="hint">
+          Six samples are given. Prediction for Sample 1 and 2 are worked examples. You calculate Sample 3 to 6, then
+          fill confusion matrix and metrics.
+        </p>
+
+        <div id="sampleArea"></div>
+        <div id="matrixArea"></div>
+        <div id="metricArea"></div>
+
+        <section class="solution-block" id="solutionBlock" hidden>
+          <h3>Detailed Process and Solutions</h3>
+          <div id="solutionText"></div>
+        </section>
+      </section>
+    </main>
+
+    <script src="confusion.js"></script>
+  </body>
+</html>

logistic-regression/confusion.js

@@ -0,0 +1,608 @@
+const controls = {
+  classMode: document.getElementById("classMode"),
+  threshold: document.getElementById("threshold"),
+  thresholdValue: document.getElementById("thresholdValue"),
+  ruleText: document.getElementById("ruleText"),
+  checkBtn: document.getElementById("checkBtn"),
+  showSolutionBtn: document.getElementById("showSolutionBtn"),
+  newSamplesBtn: document.getElementById("newSamplesBtn"),
+  resetBtn: document.getElementById("resetBtn"),
+};
+
+const sampleArea = document.getElementById("sampleArea");
+const matrixArea = document.getElementById("matrixArea");
+const metricArea = document.getElementById("metricArea");
+const feedbackStats = document.getElementById("feedbackStats");
+const solutionBlock = document.getElementById("solutionBlock");
+const solutionText = document.getElementById("solutionText");
+
+let binarySamples = [];
+let threeClassSamples = [];
+
+function fmt(num, digits = 2) {
+  return Number(num).toFixed(digits);
+}
+
+function round3(num) {
+  return Number(num).toFixed(3);
+}
+
+function round2(num) {
+  return Math.round(num * 100) / 100;
+}
+
+function rand(min, max) {
+  return min + Math.random() * (max - min);
+}
+
+function generateBinarySamples() {
+  const actualPattern = ["Positive", "Negative", "Positive", "Negative", "Positive", "Negative"];
+  const samples = [];
+
+  for (let i = 0; i < 6; i += 1) {
+    const actual = actualPattern[i];
+    const feature = round2(rand(0.2, 2.6));
+    const pPos = actual === "Positive" ? round2(rand(0.38, 0.92)) : round2(rand(0.12, 0.78));
+    samples.push({ id: `S${i + 1}`, feature, actual, pPos });
+  }
+
+  binarySamples = samples;
+}
+
+function generateThreeProbabilities(actual) {
+  const labels = ["A", "B", "C"];
+  const weights = {
+    A: rand(0.1, 0.45),
+    B: rand(0.1, 0.45),
+    C: rand(0.1, 0.45),
+  };
+
+  weights[actual] += rand(0.18, 0.5);
+  const total = labels.reduce((sum, label) => sum + weights[label], 0);
+
+  let pA = round2(weights.A / total);
+  let pB = round2(weights.B / total);
+  if (pA + pB > 0.98) {
+    const scale = 0.98 / (pA + pB);
+    pA = round2(pA * scale);
+    pB = round2(pB * scale);
+  }
+  const pC = round2(1 - pA - pB);
+
+  return { pA, pB, pC };
+}
+
+function generateThreeClassSamples() {
+  const actualPattern = ["A", "B", "C", "B", "C", "A"];
+  const samples = [];
+
+  for (let i = 0; i < 6; i += 1) {
+    const actual = actualPattern[i];
+    const feature = round2(rand(0.5, 2.4));
+    const probs = generateThreeProbabilities(actual);
+    samples.push({ id: `S${i + 1}`, feature, actual, ...probs });
+  }
+
+  threeClassSamples = samples;
+}
+
+function generateAllSamples() {
+  generateBinarySamples();
+  generateThreeClassSamples();
+}
+
+function computeBinaryPrediction(sample, threshold) {
+  return sample.pPos >= threshold ? "Positive" : "Negative";
+}
+
+function computeThreePrediction(sample, threshold) {
+  if (sample.pA >= threshold) return "A";
+  if (sample.pB >= threshold) return "B";
+  return "C";
+}
+
+function computeBinaryResults(threshold) {
+  const rows = binarySamples.map((sample) => {
+    const predicted = computeBinaryPrediction(sample, threshold);
+    return { ...sample, predicted };
+  });
+
+  let tp = 0;
+  let fp = 0;
+  let tn = 0;
+  let fn = 0;
+
+  for (const row of rows) {
+    if (row.actual === "Positive" && row.predicted === "Positive") tp += 1;
+    if (row.actual === "Negative" && row.predicted === "Positive") fp += 1;
+    if (row.actual === "Negative" && row.predicted === "Negative") tn += 1;
+    if (row.actual === "Positive" && row.predicted === "Negative") fn += 1;
+  }
+
+  const precision = tp + fp === 0 ? 0 : tp / (tp + fp);
+  const recall = tp + fn === 0 ? 0 : tp / (tp + fn);
+  const sensitivity = recall;
+  const specificity = tn + fp === 0 ? 0 : tn / (tn + fp);
+
+  return {
+    rows,
+    matrix: {
+      Positive: { Positive: tp, Negative: fn },
+      Negative: { Positive: fp, Negative: tn },
+    },
+    metrics: { precision, recall, sensitivity, specificity },
+  };
+}
+
+function getOneVsRestMetrics(matrix, className) {
+  const classes = ["A", "B", "C"];
+  const tp = matrix[className][className];
+
+  let fp = 0;
+  let fn = 0;
+  for (const c of classes) {
+    if (c !== className) {
+      fp += matrix[c][className];
+      fn += matrix[className][c];
+    }
+  }
+
+  const total = classes.reduce((sum, r) => sum + classes.reduce((acc, c) => acc + matrix[r][c], 0), 0);
+  const tn = total - tp - fp - fn;
+
+  const precision = tp + fp === 0 ? 0 : tp / (tp + fp);
+  const recall = tp + fn === 0 ? 0 : tp / (tp + fn);
+  const specificity = tn + fp === 0 ? 0 : tn / (tn + fp);
+
+  return { precision, recall, sensitivity: recall, specificity };
+}
+
+function computeThreeResults(threshold) {
+  const rows = threeClassSamples.map((sample) => {
+    const predicted = computeThreePrediction(sample, threshold);
+    return { ...sample, predicted };
+  });
+
+  const classes = ["A", "B", "C"];
+  const matrix = { A: { A: 0, B: 0, C: 0 }, B: { A: 0, B: 0, C: 0 }, C: { A: 0, B: 0, C: 0 } };
+
+  for (const row of rows) {
+    matrix[row.actual][row.predicted] += 1;
+  }
+
+  const perClass = classes.map((className) => getOneVsRestMetrics(matrix, className));
+  const macro = {
+    precision: perClass.reduce((s, m) => s + m.precision, 0) / classes.length,
+    recall: perClass.reduce((s, m) => s + m.recall, 0) / classes.length,
+    sensitivity: perClass.reduce((s, m) => s + m.sensitivity, 0) / classes.length,
+    specificity: perClass.reduce((s, m) => s + m.specificity, 0) / classes.length,
+  };
+
+  return { rows, matrix, metrics: macro, perClass };
+}
+
+function getCurrentResults() {
+  const mode = controls.classMode.value;
+  const t = Number(controls.threshold.value);
+  return mode === "binary" ? computeBinaryResults(t) : computeThreeResults(t);
+}
+
+function samplePredictionSelect(rowId, options) {
+  return `<select data-role="sample-pred" data-id="${rowId}">${options
+    .map((opt) => `<option value="${opt}">${opt}</option>`)
+    .join("")}</select>`;
+}
+
+function renderSamples(results) {
+  const mode = controls.classMode.value;
+  const rows = results.rows;
+
+  if (mode === "binary") {
+    sampleArea.innerHTML = `
+      <h3>1) Predict the class for each sample</h3>
+      <table class="exercise-table">
+        <thead>
+          <tr>
+            <th>Sample</th>
+            <th>Feature x</th>
+            <th>Actual Class</th>
+            <th>p(Positive)</th>
+            <th>Your Predicted Class</th>
+          </tr>
+        </thead>
+        <tbody>
+          ${rows
+            .map((row, index) => {
+              if (index < 2) {
+                return `
+                  <tr>
+                    <td>${row.id}</td>
+                    <td>${fmt(row.feature)}</td>
+                    <td>${row.actual}</td>
+                    <td>${fmt(row.pPos)}</td>
+                    <td><strong>${row.predicted}</strong> <span class="worked-tag">(worked example)</span></td>
+                  </tr>
+                `;
+              }
+
+              return `
+                <tr>
+                  <td>${row.id}</td>
+                  <td>${fmt(row.feature)}</td>
+                  <td>${row.actual}</td>
+                  <td>${fmt(row.pPos)}</td>
+                  <td>${samplePredictionSelect(row.id, ["Positive", "Negative"])}</td>
+                </tr>
+              `;
+            })
+            .join("")}
+        </tbody>
+      </table>
+    `;
+    return;
+  }
+
+  sampleArea.innerHTML = `
+    <h3>1) Predict the class for each sample</h3>
+    <table class="exercise-table">
+      <thead>
+        <tr>
+          <th>Sample</th>
+          <th>Feature x</th>
+          <th>Actual Class</th>
+          <th>p(A)</th>
+          <th>p(B)</th>
+          <th>p(C)</th>
+          <th>Your Predicted Class</th>
+        </tr>
+      </thead>
+      <tbody>
+        ${rows
+          .map((row, index) => {
+            if (index < 2) {
+              return `
+                <tr>
+                  <td>${row.id}</td>
+                  <td>${fmt(row.feature)}</td>
+                  <td>${row.actual}</td>
+                  <td>${fmt(row.pA)}</td>
+                  <td>${fmt(row.pB)}</td>
+                  <td>${fmt(row.pC)}</td>
+                  <td><strong>${row.predicted}</strong> <span class="worked-tag">(worked example)</span></td>
+                </tr>
+              `;
+            }
+
+            return `
+              <tr>
+                <td>${row.id}</td>
+                <td>${fmt(row.feature)}</td>
+                <td>${row.actual}</td>
+                <td>${fmt(row.pA)}</td>
+                <td>${fmt(row.pB)}</td>
+                <td>${fmt(row.pC)}</td>
+                <td>${samplePredictionSelect(row.id, ["A", "B", "C"])}</td>
+              </tr>
+            `;
+          })
+          .join("")}
+      </tbody>
+    </table>
+  `;
+}
+
+function renderMatrixInputs() {
+  const mode = controls.classMode.value;
+
+  if (mode === "binary") {
+    matrixArea.innerHTML = `
+      <h3>2) Fill the confusion matrix</h3>
+      <p class="hint">Rows = Actual class, Columns = Predicted class.</p>
+      <table class="exercise-table matrix-table">
+        <thead>
+          <tr><th>Actual \ Predicted</th><th>Positive</th><th>Negative</th></tr>
+        </thead>
+        <tbody>
+          <tr>
+            <th>Positive</th>
+            <td><input type="number" min="0" data-role="matrix" data-key="Positive-Positive" /></td>
+            <td><input type="number" min="0" data-role="matrix" data-key="Positive-Negative" /></td>
+          </tr>
+          <tr>
+            <th>Negative</th>
+            <td><input type="number" min="0" data-role="matrix" data-key="Negative-Positive" /></td>
+            <td><input type="number" min="0" data-role="matrix" data-key="Negative-Negative" /></td>
+          </tr>
+        </tbody>
+      </table>
+    `;
+    return;
+  }
+
+  matrixArea.innerHTML = `
+    <h3>2) Fill the confusion matrix</h3>
+    <p class="hint">Rows = Actual class, Columns = Predicted class.</p>
+    <table class="exercise-table matrix-table">
+      <thead>
+        <tr><th>Actual \ Predicted</th><th>A</th><th>B</th><th>C</th></tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th>A</th>
+          <td><input type="number" min="0" data-role="matrix" data-key="A-A" /></td>
+          <td><input type="number" min="0" data-role="matrix" data-key="A-B" /></td>
+          <td><input type="number" min="0" data-role="matrix" data-key="A-C" /></td>
+        </tr>
+        <tr>
+          <th>B</th>
+          <td><input type="number" min="0" data-role="matrix" data-key="B-A" /></td>
+          <td><input type="number" min="0" data-role="matrix" data-key="B-B" /></td>
+          <td><input type="number" min="0" data-role="matrix" data-key="B-C" /></td>
+        </tr>
+        <tr>
+          <th>C</th>
+          <td><input type="number" min="0" data-role="matrix" data-key="C-A" /></td>
+          <td><input type="number" min="0" data-role="matrix" data-key="C-B" /></td>
+          <td><input type="number" min="0" data-role="matrix" data-key="C-C" /></td>
+        </tr>
+      </tbody>
+    </table>
+  `;
+}
+
+function renderMetricInputs() {
+  const mode = controls.classMode.value;
+  const detail = mode === "binary" ? "(for Positive class)" : "(macro-average across A, B, C)";
+  metricArea.innerHTML = `
+    <h3>3) Calculate metrics ${detail}</h3>
+    <p class="hint">Enter decimal values (e.g., 0.667).</p>
+    <table class="exercise-table metric-table">
+      <thead>
+        <tr><th>Metric</th><th>Your value</th></tr>
+      </thead>
+      <tbody>
+        <tr><th>Precision</th><td><input type="number" step="0.001" data-role="metric" data-key="precision" /></td></tr>
+        <tr><th>Recall</th><td><input type="number" step="0.001" data-role="metric" data-key="recall" /></td></tr>
+        <tr><th>Sensitivity</th><td><input type="number" step="0.001" data-role="metric" data-key="sensitivity" /></td></tr>
+        <tr><th>Specificity</th><td><input type="number" step="0.001" data-role="metric" data-key="specificity" /></td></tr>
+      </tbody>
+    </table>
+  `;
+}
+
+function updateRuleText() {
+  const mode = controls.classMode.value;
+  const threshold = Number(controls.threshold.value);
+
+  controls.thresholdValue.textContent = fmt(threshold);
+
+  if (mode === "binary") {
+    controls.ruleText.textContent =
+      "Rule: predict Positive if p(Positive) >= t, otherwise predict Negative. (Default t = 0.50)";
+  } else {
+    controls.ruleText.textContent =
+      "Rule: check A first, then B. If p(A) >= t predict A; else if p(B) >= t predict B; otherwise predict C.";
+  }
+}
+
+function renderPage() {
+  const results = getCurrentResults();
+  updateRuleText();
+  renderSamples(results);
+  renderMatrixInputs();
+  renderMetricInputs();
+  feedbackStats.innerHTML = "";
+}
+
+function readUserSampleAnswers() {
+  const selects = [...document.querySelectorAll('select[data-role="sample-pred"]')];
+  const map = {};
+  for (const select of selects) {
+    map[select.dataset.id] = select.value;
+  }
+  return map;
+}
+
+function readUserMatrix() {
+  const inputs = [...document.querySelectorAll('input[data-role="matrix"]')];
+  const matrix = {};
+  for (const input of inputs) {
+    matrix[input.dataset.key] = input.value === "" ? NaN : Number(input.value);
+  }
+  return matrix;
+}
+
+function readUserMetrics() {
+  const inputs = [...document.querySelectorAll('input[data-role="metric"]')];
+  const metrics = {};
+  for (const input of inputs) {
+    metrics[input.dataset.key] = input.value === "" ? NaN : Number(input.value);
+  }
+  return metrics;
+}
+
+function expectedMatrixFlat(results) {
+  const mode = controls.classMode.value;
+  if (mode === "binary") {
+    return {
+      "Positive-Positive": results.matrix.Positive.Positive,
+      "Positive-Negative": results.matrix.Positive.Negative,
+      "Negative-Positive": results.matrix.Negative.Positive,
+      "Negative-Negative": results.matrix.Negative.Negative,
+    };
+  }
+
+  return {
+    "A-A": results.matrix.A.A,
+    "A-B": results.matrix.A.B,
+    "A-C": results.matrix.A.C,
+    "B-A": results.matrix.B.A,
+    "B-B": results.matrix.B.B,
+    "B-C": results.matrix.B.C,
+    "C-A": results.matrix.C.A,
+    "C-B": results.matrix.C.B,
+    "C-C": results.matrix.C.C,
+  };
+}
+
+function approximatelyEqual(a, b, eps = 0.02) {
+  return Math.abs(a - b) <= eps;
+}
+
+function checkAnswers() {
+  const results = getCurrentResults();
+
+  const expectedPreds = {};
+  for (const row of results.rows.slice(2)) {
+    expectedPreds[row.id] = row.predicted;
+  }
+
+  const userPreds = readUserSampleAnswers();
+  let predCorrect = 0;
+  const predTotal = Object.keys(expectedPreds).length;
+  for (const id of Object.keys(expectedPreds)) {
+    if (userPreds[id] === expectedPreds[id]) {
+      predCorrect += 1;
+    }
+  }
+
+  const userMatrix = readUserMatrix();
+  const expectedMatrix = expectedMatrixFlat(results);
+  let matrixCorrect = 0;
+  const matrixTotal = Object.keys(expectedMatrix).length;
+  for (const key of Object.keys(expectedMatrix)) {
+    if (userMatrix[key] === expectedMatrix[key]) {
+      matrixCorrect += 1;
+    }
+  }
+
+  const userMetrics = readUserMetrics();
+  const expectedMetrics = results.metrics;
+  let metricCorrect = 0;
+  const metricTotal = 4;
+  for (const metricName of ["precision", "recall", "sensitivity", "specificity"]) {
+    if (approximatelyEqual(userMetrics[metricName], expectedMetrics[metricName])) {
+      metricCorrect += 1;
+    }
+  }
+
+  feedbackStats.innerHTML = `
+    <span>Prediction check: ${predCorrect}/${predTotal} correct</span>
+    <span>Confusion matrix check: ${matrixCorrect}/${matrixTotal} correct</span>
+    <span>Metric check: ${metricCorrect}/${metricTotal} correct (tolerance +/- 0.02)</span>
+    <span>Expected metrics: Precision=${round3(expectedMetrics.precision)}, Recall=${round3(
+      expectedMetrics.recall,
+    )}, Sensitivity=${round3(expectedMetrics.sensitivity)}, Specificity=${round3(expectedMetrics.specificity)}</span>
+  `;
+}
+
+function renderBinarySolution(results) {
+  const steps = results.rows
+    .map((row) => {
+      return `<li>${row.id}: p(Positive)=${fmt(row.pPos)}; compare with t=${fmt(
+        controls.threshold.value,
+      )} => predicted <strong>${row.predicted}</strong>; actual ${row.actual}.</li>`;
+    })
+    .join("");
+
+  solutionText.innerHTML = `
+    <h4>Step A: Classify all 6 samples</h4>
+    <ol>${steps}</ol>
+
+    <h4>Step B: Build confusion matrix (rows=actual, columns=predicted)</h4>
+    <p>TP=${results.matrix.Positive.Positive}, FN=${results.matrix.Positive.Negative}, FP=${results.matrix.Negative.Positive}, TN=${results.matrix.Negative.Negative}</p>
+
+    <table class="exercise-table matrix-table">
+      <thead><tr><th>Actual \\ Predicted</th><th>Positive</th><th>Negative</th></tr></thead>
+      <tbody>
+        <tr><th>Positive</th><td>${results.matrix.Positive.Positive}</td><td>${results.matrix.Positive.Negative}</td></tr>
+        <tr><th>Negative</th><td>${results.matrix.Negative.Positive}</td><td>${results.matrix.Negative.Negative}</td></tr>
+      </tbody>
+    </table>
+
+    <h4>Step C: Metrics</h4>
+    <p>Precision = TP/(TP+FP) = ${results.matrix.Positive.Positive}/(${results.matrix.Positive.Positive}+${results.matrix.Negative.Positive}) = ${round3(
+      results.metrics.precision,
+    )}</p>
+    <p>Recall = TP/(TP+FN) = ${results.matrix.Positive.Positive}/(${results.matrix.Positive.Positive}+${results.matrix.Positive.Negative}) = ${round3(
+      results.metrics.recall,
+    )}</p>
+    <p>Sensitivity = Recall = ${round3(results.metrics.sensitivity)}</p>
+    <p>Specificity = TN/(TN+FP) = ${results.matrix.Negative.Negative}/(${results.matrix.Negative.Negative}+${results.matrix.Negative.Positive}) = ${round3(
+      results.metrics.specificity,
+    )}</p>
+  `;
+}
+
+function renderThreeSolution(results) {
+  const threshold = Number(controls.threshold.value);
+  const steps = results.rows
+    .map((row) => {
+      return `<li>${row.id}: p(A)=${fmt(row.pA)}, p(B)=${fmt(row.pB)}, p(C)=${fmt(
+        row.pC,
+      )}. Since t=${fmt(threshold)}, prediction is <strong>${row.predicted}</strong>; actual ${row.actual}.</li>`;
+    })
+    .join("");
+
+  const classes = ["A", "B", "C"];
+  const perClass = classes
+    .map((c, idx) => {
+      return `<li>Class ${c}: Precision=${round3(results.perClass[idx].precision)}, Recall/Sensitivity=${round3(
+        results.perClass[idx].recall,
+      )}, Specificity=${round3(results.perClass[idx].specificity)}</li>`;
+    })
+    .join("");
+
+  solutionText.innerHTML = `
+    <h4>Step A: Classify all 6 samples</h4>
+    <ol>${steps}</ol>
+
+    <h4>Step B: Build 3x3 confusion matrix (rows=actual, columns=predicted)</h4>
+    <table class="exercise-table matrix-table">
+      <thead><tr><th>Actual \\ Predicted</th><th>A</th><th>B</th><th>C</th></tr></thead>
+      <tbody>
+        <tr><th>A</th><td>${results.matrix.A.A}</td><td>${results.matrix.A.B}</td><td>${results.matrix.A.C}</td></tr>
+        <tr><th>B</th><td>${results.matrix.B.A}</td><td>${results.matrix.B.B}</td><td>${results.matrix.B.C}</td></tr>
+        <tr><th>C</th><td>${results.matrix.C.A}</td><td>${results.matrix.C.B}</td><td>${results.matrix.C.C}</td></tr>
+      </tbody>
+    </table>
+
+    <h4>Step C: One-vs-rest metrics for each class, then macro-average</h4>
+    <ol>${perClass}</ol>
+
+    <p><strong>Macro Precision</strong> = ${round3(results.metrics.precision)}</p>
+    <p><strong>Macro Recall</strong> = ${round3(results.metrics.recall)}</p>
+    <p><strong>Macro Sensitivity</strong> = ${round3(results.metrics.sensitivity)}</p>
+    <p><strong>Macro Specificity</strong> = ${round3(results.metrics.specificity)}</p>
+  `;
+}
+
+function showSolution() {
+  const results = getCurrentResults();
+  if (controls.classMode.value === "binary") {
+    renderBinarySolution(results);
+  } else {
+    renderThreeSolution(results);
+  }
+  solutionBlock.hidden = false;
+}
+
+function resetInputs() {
+  renderPage();
+  solutionBlock.hidden = true;
+}
+
+function regenerateSamples() {
+  generateAllSamples();
+  resetInputs();
+}
+
+controls.classMode.addEventListener("change", resetInputs);
+controls.threshold.addEventListener("input", resetInputs);
+controls.checkBtn.addEventListener("click", checkAnswers);
+controls.showSolutionBtn.addEventListener("click", showSolution);
+controls.newSamplesBtn.addEventListener("click", regenerateSamples);
+controls.resetBtn.addEventListener("click", resetInputs);
+
+generateAllSamples();
+renderPage();

logistic-regression/cost-visualization.html

@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DDW Interface - Cost Function Visualization</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <div>
+        <p class="kicker">Data Driven World</p>
+        <h1>Visualization for Cost Function</h1>
+      </div>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="simple-sigmoid.html">Simple Sigmoid</a>
+        <a href="confusion-matrix.html">Confusion Matrix (Page 3)</a>
+        <a href="sigmoid.html">Sigmoid Function</a>
+        <a class="active" href="cost-visualization.html">Cost Function</a>
+        <a href="about.html">Notes</a>
+      </nav>
+    </header>
+
+    <main class="layout">
+      <section class="panel controls">
+        <h2>Gradient Descent Setup</h2>
+
+        <label for="caseSelect">Select model case</label>
+        <select id="caseSelect">
+          <option value="case1">Case 1: one intercept + one feature</option>
+          <option value="case2">Case 2: two features, no intercept</option>
+        </select>
+
+        <p class="hint" id="formulaText"></p>
+
+        <label for="lr">Learning rate: <span id="lrValue">0.20</span></label>
+        <input id="lr" type="range" min="0.001" max="1.000" step="0.001" value="0.200" />
+        <label for="lrInput">Learning rate input</label>
+        <input id="lrInput" type="number" min="0.001" max="1.000" step="0.001" value="0.200" />
+
+        <label for="iters">Iterations: <span id="iterValue">80</span></label>
+        <input id="iters" type="range" min="5" max="220" step="1" value="80" />
+
+        <label for="startP1">Start parameter 1: <span id="p1Value">-4.00</span></label>
+        <input id="startP1" type="range" min="-6" max="6" step="0.1" value="-4" />
+
+        <label for="startP2">Start parameter 2: <span id="p2Value">4.00</span></label>
+        <input id="startP2" type="range" min="-6" max="6" step="0.1" value="4" />
+
+        <label for="speed">Automatic run speed (ms): <span id="speedValue">90</span></label>
+        <input id="speed" type="range" min="20" max="260" step="5" value="90" />
+
+        <div class="button-row">
+          <button id="runBtn" type="button">Run Gradient Descent</button>
+          <button id="stepBtn" type="button">Next Step</button>
+        </div>
+
+        <div class="button-row">
+          <button id="autoBtn" type="button">Automatic Run</button>
+          <button id="restartBtn" type="button">Restart Path</button>
+        </div>
+
+        <div class="button-row">
+          <button id="regenBtn" type="button">Regenerate Synthetic Data</button>
+          <button id="clearBtn" type="button">Clear</button>
+        </div>
+      </section>
+
+      <section class="panel chart-panel">
+        <h2>3D Cost Surface and Gradient Descent Trajectory</h2>
+        <canvas id="costCanvas" width="900" height="520" aria-label="3D cost function and gradient descent"></canvas>
+        <div class="stats" id="costStats"></div>
+      </section>
+    </main>
+
+    <script src="cost.js"></script>
+  </body>
+</html>

logistic-regression/cost.js

@@ -0,0 +1,581 @@
+const canvas = document.getElementById("costCanvas");
+const ctx = canvas.getContext("2d");
+
+const controls = {
+  caseSelect: document.getElementById("caseSelect"),
+  lr: document.getElementById("lr"),
+  lrInput: document.getElementById("lrInput"),
+  iters: document.getElementById("iters"),
+  p1: document.getElementById("startP1"),
+  p2: document.getElementById("startP2"),
+  speed: document.getElementById("speed"),
+  runBtn: document.getElementById("runBtn"),
+  stepBtn: document.getElementById("stepBtn"),
+  autoBtn: document.getElementById("autoBtn"),
+  restartBtn: document.getElementById("restartBtn"),
+  regenBtn: document.getElementById("regenBtn"),
+  clearBtn: document.getElementById("clearBtn"),
+};
+
+const labels = {
+  formula: document.getElementById("formulaText"),
+  lr: document.getElementById("lrValue"),
+  iters: document.getElementById("iterValue"),
+  p1: document.getElementById("p1Value"),
+  p2: document.getElementById("p2Value"),
+  speed: document.getElementById("speedValue"),
+};
+
+const stats = document.getElementById("costStats");
+
+const P_MIN = -6;
+const P_MAX = 6;
+const GRID_N = 26;
+
+const caseMeta = {
+  case1: {
+    p1Name: "b0",
+    p2Name: "b1",
+    logistic: "Case 1 logistic: p(y=1|x) = 1 / (1 + exp(-(b0 + b1x)))",
+  },
+  case2: {
+    p1Name: "w1",
+    p2Name: "w2",
+    logistic: "Case 2 logistic: p(y=1|x1,x2) = 1 / (1 + exp(-(w1x1 + w2x2))) (no intercept)",
+  },
+};
+
+let datasets = { case1: [], case2: [] };
+let gridCache = { case1: null, case2: null };
+
+let trajectory = [];
+let stepIndex = 0;
+let animationTimer = null;
+
+function sigmoid(z) {
+  return 1 / (1 + Math.exp(-z));
+}
+
+function clampProb(p) {
+  return Math.min(1 - 1e-9, Math.max(1e-9, p));
+}
+
+function randRange(min, max) {
+  return min + Math.random() * (max - min);
+}
+
+function randNormal(mean = 0, std = 1) {
+  const u1 = Math.max(1e-12, Math.random());
+  const u2 = Math.random();
+  const z0 = Math.sqrt(-2 * Math.log(u1)) * Math.cos(2 * Math.PI * u2);
+  return mean + z0 * std;
+}
+
+function generateSyntheticData() {
+  const case1 = [];
+  const case2 = [];
+
+  const trueB0 = -0.2;
+  const trueB1 = 2.35;
+  for (let i = 0; i < 160; i += 1) {
+    const center = i < 80 ? -3.0 : 3.0;
+    const x = randNormal(center, 1.3);
+    const p = sigmoid(trueB0 + trueB1 * x);
+    const y = Math.random() < p ? 1 : 0;
+    case1.push({ x, y });
+  }
+
+  const trueW1 = 2.15;
+  const trueW2 = 1.85;
+  for (let i = 0; i < 190; i += 1) {
+    const center1 = i < 95 ? -2.4 : 2.4;
+    const center2 = i < 95 ? -1.9 : 1.9;
+    const x1 = randNormal(center1, 1.25);
+    const x2 = randNormal(center2 + 0.45 * (x1 - center1), 1.1);
+    const p = sigmoid(trueW1 * x1 + trueW2 * x2);
+    const y = Math.random() < p ? 1 : 0;
+    case2.push({ x1, x2, y });
+  }
+
+  datasets = { case1, case2 };
+  gridCache = { case1: null, case2: null };
+}
+
+function costFor(caseKey, params) {
+  const data = datasets[caseKey];
+  let total = 0;
+
+  if (caseKey === "case1") {
+    const [b0, b1] = params;
+    for (const row of data) {
+      const p = clampProb(sigmoid(b0 + b1 * row.x));
+      total += -(row.y * Math.log(p) + (1 - row.y) * Math.log(1 - p));
+    }
+  } else {
+    const [w1, w2] = params;
+    for (const row of data) {
+      const p = clampProb(sigmoid(w1 * row.x1 + w2 * row.x2));
+      total += -(row.y * Math.log(p) + (1 - row.y) * Math.log(1 - p));
+    }
+  }
+
+  return total / data.length;
+}
+
+function gradFor(caseKey, params) {
+  const data = datasets[caseKey];
+  let g1 = 0;
+  let g2 = 0;
+
+  if (caseKey === "case1") {
+    const [b0, b1] = params;
+    for (const row of data) {
+      const p = sigmoid(b0 + b1 * row.x);
+      const diff = p - row.y;
+      g1 += diff;
+      g2 += diff * row.x;
+    }
+  } else {
+    const [w1, w2] = params;
+    for (const row of data) {
+      const p = sigmoid(w1 * row.x1 + w2 * row.x2);
+      const diff = p - row.y;
+      g1 += diff * row.x1;
+      g2 += diff * row.x2;
+    }
+  }
+
+  const m = data.length;
+  return [g1 / m, g2 / m];
+}
+
+function buildTrajectory(caseKey, start, lr, iters) {
+  const path = [];
+  let params = [start[0], start[1]];
+
+  path.push({ p1: params[0], p2: params[1], cost: costFor(caseKey, params), gradNorm: 0 });
+
+  for (let i = 0; i < iters; i += 1) {
+    const grad = gradFor(caseKey, params);
+    const gradNorm = Math.hypot(grad[0], grad[1]);
+    params = [params[0] - lr * grad[0], params[1] - lr * grad[1]];
+    path.push({ p1: params[0], p2: params[1], cost: costFor(caseKey, params), gradNorm });
+  }
+
+  return path;
+}
+
+function getGrid(caseKey) {
+  if (gridCache[caseKey]) {
+    return gridCache[caseKey];
+  }
+
+  const vals = [];
+  let min = Infinity;
+  let max = -Infinity;
+
+  for (let j = 0; j < GRID_N; j += 1) {
+    const row = [];
+    const p2 = P_MIN + (j / (GRID_N - 1)) * (P_MAX - P_MIN);
+    for (let i = 0; i < GRID_N; i += 1) {
+      const p1 = P_MIN + (i / (GRID_N - 1)) * (P_MAX - P_MIN);
+      const c = costFor(caseKey, [p1, p2]);
+      row.push(c);
+      if (c < min) min = c;
+      if (c > max) max = c;
+    }
+    vals.push(row);
+  }
+
+  gridCache[caseKey] = { vals, min, max };
+  return gridCache[caseKey];
+}
+
+function colorScale(t) {
+  const clamped = Math.max(0, Math.min(1, t));
+  const r = Math.round(35 + 220 * clamped);
+  const g = Math.round(90 + 160 * (1 - Math.abs(clamped - 0.5) * 2));
+  const b = Math.round(240 - 220 * clamped);
+  return `rgb(${r},${g},${b})`;
+}
+
+function project3D(x, y, z) {
+  const yaw = -0.75;
+  const pitch = 0.75;
+
+  const cy = Math.cos(yaw);
+  const sy = Math.sin(yaw);
+  const cp = Math.cos(pitch);
+  const sp = Math.sin(pitch);
+
+  const xr = x * cy - y * sy;
+  const yr = x * sy + y * cy;
+
+  const y2 = yr * cp - z * sp;
+  const z2 = yr * sp + z * cp;
+
+  const perspective = 1 / (1 + z2 * 0.09);
+  const scale = 56;
+
+  return {
+    sx: canvas.width * 0.49 + xr * scale * perspective,
+    sy: canvas.height * 0.62 - y2 * scale * perspective,
+    depth: z2,
+  };
+}
+
+function mapParam(v) {
+  return ((v - P_MIN) / (P_MAX - P_MIN)) * 8 - 4;
+}
+
+function mapCost(cost, minCost, maxCost) {
+  const t = (cost - minCost) / Math.max(1e-9, maxCost - minCost);
+  return t * 5.0;
+}
+
+function drawSurface(caseKey) {
+  const grid = getGrid(caseKey);
+  const { vals, min, max } = grid;
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  ctx.fillStyle = "#ffffff";
+  ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+  for (let j = 0; j < GRID_N - 1; j += 1) {
+    for (let i = 0; i < GRID_N - 1; i += 1) {
+      const p1a = P_MIN + (i / (GRID_N - 1)) * (P_MAX - P_MIN);
+      const p2a = P_MIN + (j / (GRID_N - 1)) * (P_MAX - P_MIN);
+      const p1b = P_MIN + ((i + 1) / (GRID_N - 1)) * (P_MAX - P_MIN);
+      const p2b = P_MIN + ((j + 1) / (GRID_N - 1)) * (P_MAX - P_MIN);
+
+      const z00 = mapCost(vals[j][i], min, max);
+      const z10 = mapCost(vals[j][i + 1], min, max);
+      const z11 = mapCost(vals[j + 1][i + 1], min, max);
+      const z01 = mapCost(vals[j + 1][i], min, max);
+
+      const q00 = project3D(mapParam(p1a), mapParam(p2a), z00);
+      const q10 = project3D(mapParam(p1b), mapParam(p2a), z10);
+      const q11 = project3D(mapParam(p1b), mapParam(p2b), z11);
+      const q01 = project3D(mapParam(p1a), mapParam(p2b), z01);
+
+      const t = ((vals[j][i] + vals[j][i + 1] + vals[j + 1][i + 1] + vals[j + 1][i]) / 4 - min) / Math.max(1e-9, max - min);
+      ctx.fillStyle = colorScale(t);
+      ctx.globalAlpha = 0.48;
+      ctx.beginPath();
+      ctx.moveTo(q00.sx, q00.sy);
+      ctx.lineTo(q10.sx, q10.sy);
+      ctx.lineTo(q11.sx, q11.sy);
+      ctx.lineTo(q01.sx, q01.sy);
+      ctx.closePath();
+      ctx.fill();
+    }
+  }
+  ctx.globalAlpha = 1;
+
+  for (let j = 0; j < GRID_N; j += 1) {
+    ctx.beginPath();
+    for (let i = 0; i < GRID_N; i += 1) {
+      const p1 = P_MIN + (i / (GRID_N - 1)) * (P_MAX - P_MIN);
+      const p2 = P_MIN + (j / (GRID_N - 1)) * (P_MAX - P_MIN);
+      const x = mapParam(p1);
+      const y = mapParam(p2);
+      const z = mapCost(vals[j][i], min, max);
+      const pr = project3D(x, y, z);
+      if (i === 0) ctx.moveTo(pr.sx, pr.sy);
+      else ctx.lineTo(pr.sx, pr.sy);
+    }
+    ctx.strokeStyle = "rgba(13, 66, 83, 0.34)";
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  }
+
+  for (let i = 0; i < GRID_N; i += 1) {
+    ctx.beginPath();
+    for (let j = 0; j < GRID_N; j += 1) {
+      const p1 = P_MIN + (i / (GRID_N - 1)) * (P_MAX - P_MIN);
+      const p2 = P_MIN + (j / (GRID_N - 1)) * (P_MAX - P_MIN);
+      const x = mapParam(p1);
+      const y = mapParam(p2);
+      const z = mapCost(vals[j][i], min, max);
+      const pr = project3D(x, y, z);
+      if (j === 0) ctx.moveTo(pr.sx, pr.sy);
+      else ctx.lineTo(pr.sx, pr.sy);
+    }
+    ctx.strokeStyle = "rgba(13, 66, 83, 0.26)";
+    ctx.lineWidth = 1;
+    ctx.stroke();
+  }
+
+  drawAxes3D(caseKey, min, max);
+  drawHeatLegend(min, max);
+}
+
+function drawAxes3D(caseKey, minCost, maxCost) {
+  const meta = caseMeta[caseKey];
+
+  const o = project3D(-4.3, -4.3, 0);
+  const xA = project3D(4.4, -4.3, 0);
+  const yA = project3D(-4.3, 4.4, 0);
+  const zA = project3D(-4.3, -4.3, 3.4);
+
+  ctx.strokeStyle = "#13323d";
+  ctx.lineWidth = 1.4;
+
+  ctx.beginPath();
+  ctx.moveTo(o.sx, o.sy);
+  ctx.lineTo(xA.sx, xA.sy);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(o.sx, o.sy);
+  ctx.lineTo(yA.sx, yA.sy);
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(o.sx, o.sy);
+  ctx.lineTo(zA.sx, zA.sy);
+  ctx.stroke();
+
+  ctx.fillStyle = "#13323d";
+  ctx.font = "12px 'Avenir Next', sans-serif";
+  ctx.fillText(meta.p1Name, xA.sx + 6, xA.sy + 2);
+  ctx.fillText(meta.p2Name, yA.sx + 6, yA.sy + 2);
+  ctx.fillText("J", zA.sx + 6, zA.sy + 2);
+
+  ctx.fillText(`J min=${minCost.toFixed(3)}`, 18, 24);
+  ctx.fillText(`J max=${maxCost.toFixed(3)}`, 18, 42);
+}
+
+function drawHeatLegend(minCost, maxCost) {
+  const x = canvas.width - 54;
+  const y = 80;
+  const w = 18;
+  const h = 180;
+
+  for (let i = 0; i < h; i += 1) {
+    const t = 1 - i / h;
+    ctx.strokeStyle = colorScale(t);
+    ctx.beginPath();
+    ctx.moveTo(x, y + i);
+    ctx.lineTo(x + w, y + i);
+    ctx.stroke();
+  }
+
+  ctx.strokeStyle = "#14343f";
+  ctx.strokeRect(x, y, w, h);
+
+  ctx.fillStyle = "#14343f";
+  ctx.font = "11px 'Avenir Next', sans-serif";
+  ctx.fillText("Cost", x - 4, y - 8);
+  ctx.fillText(maxCost.toFixed(2), x - 8, y - 6);
+  ctx.fillText(minCost.toFixed(2), x - 6, y + h + 16);
+}
+
+function drawTrajectory3D(caseKey) {
+  if (trajectory.length === 0) return;
+
+  const grid = getGrid(caseKey);
+  const current = Math.min(stepIndex, trajectory.length - 1);
+
+  ctx.strokeStyle = "#d8534f";
+  ctx.lineWidth = 2.6;
+  ctx.beginPath();
+
+  for (let i = 0; i <= current; i += 1) {
+    const node = trajectory[i];
+    const p = project3D(
+      mapParam(node.p1),
+      mapParam(node.p2),
+      mapCost(node.cost, grid.min, grid.max)
+    );
+    if (i === 0) ctx.moveTo(p.sx, p.sy);
+    else ctx.lineTo(p.sx, p.sy);
+  }
+  ctx.stroke();
+
+  for (let i = 0; i <= current; i += 1) {
+    const node = trajectory[i];
+    const p = project3D(
+      mapParam(node.p1),
+      mapParam(node.p2),
+      mapCost(node.cost, grid.min, grid.max)
+    );
+    const isNow = i === current;
+    ctx.fillStyle = isNow ? "#102a32" : "#d8534f";
+    ctx.beginPath();
+    ctx.arc(p.sx, p.sy, isNow ? 5.4 : 3.2, 0, Math.PI * 2);
+    ctx.fill();
+  }
+
+  const node = trajectory[current];
+  const p = project3D(mapParam(node.p1), mapParam(node.p2), mapCost(node.cost, grid.min, grid.max));
+  ctx.fillStyle = "#102a32";
+  ctx.font = "12px 'Avenir Next', sans-serif";
+  ctx.fillText(`step ${current}`, p.sx + 8, p.sy - 8);
+}
+
+function renderStats(caseKey) {
+  const meta = caseMeta[caseKey];
+  const dataCount = datasets[caseKey].length;
+
+  if (trajectory.length === 0) {
+    stats.innerHTML = `
+      <span>Model case: ${meta.p1Name}, ${meta.p2Name}</span>
+      <span>Synthetic samples: ${dataCount}</span>
+      <span>No trajectory yet. Click Run Gradient Descent.</span>
+      <span>Use Next Step or Automatic Run to show the path.</span>
+    `;
+    return;
+  }
+
+  const idx = Math.min(stepIndex, trajectory.length - 1);
+  const curr = trajectory[idx];
+  const start = trajectory[0];
+  const last = trajectory[trajectory.length - 1];
+
+  stats.innerHTML = `
+    <span>Model case: ${meta.p1Name}, ${meta.p2Name}</span>
+    <span>Synthetic samples: ${dataCount}</span>
+    <span>Current step: ${idx} / ${trajectory.length - 1}</span>
+    <span>Current params: ${meta.p1Name}=${curr.p1.toFixed(3)}, ${meta.p2Name}=${curr.p2.toFixed(3)}</span>
+    <span>Current cost J: ${curr.cost.toFixed(5)}</span>
+    <span>Start J: ${start.cost.toFixed(5)} -> Final J: ${last.cost.toFixed(5)}</span>
+  `;
+}
+
+function render() {
+  const caseKey = controls.caseSelect.value;
+
+  labels.formula.textContent = caseMeta[caseKey].logistic;
+  labels.lr.textContent = Number(controls.lr.value).toFixed(3);
+  labels.iters.textContent = controls.iters.value;
+  labels.p1.textContent = Number(controls.p1.value).toFixed(2);
+  labels.p2.textContent = Number(controls.p2.value).toFixed(2);
+  labels.speed.textContent = controls.speed.value;
+
+  drawSurface(caseKey);
+  drawTrajectory3D(caseKey);
+  renderStats(caseKey);
+}
+
+function stopAnimation() {
+  if (animationTimer) {
+    clearInterval(animationTimer);
+    animationTimer = null;
+    controls.autoBtn.textContent = "Automatic Run";
+  }
+}
+
+function runTrajectory() {
+  stopAnimation();
+
+  const caseKey = controls.caseSelect.value;
+  const start = [Number(controls.p1.value), Number(controls.p2.value)];
+  const lr = Number(controls.lr.value);
+  const iters = Number(controls.iters.value);
+
+  trajectory = buildTrajectory(caseKey, start, lr, iters);
+  stepIndex = 0;
+  render();
+}
+
+function nextStep() {
+  if (trajectory.length === 0) {
+    runTrajectory();
+    return;
+  }
+  if (stepIndex < trajectory.length - 1) {
+    stepIndex += 1;
+    render();
+  }
+}
+
+function automaticRun() {
+  if (animationTimer) {
+    stopAnimation();
+    return;
+  }
+
+  if (trajectory.length === 0) {
+    runTrajectory();
+  }
+
+  controls.autoBtn.textContent = "Stop Auto";
+
+  animationTimer = setInterval(() => {
+    if (stepIndex >= trajectory.length - 1) {
+      stopAnimation();
+      return;
+    }
+    stepIndex += 1;
+    render();
+  }, Number(controls.speed.value));
+}
+
+function restartPath() {
+  stopAnimation();
+  if (trajectory.length > 0) {
+    stepIndex = 0;
+  }
+  render();
+}
+
+function clearPath() {
+  stopAnimation();
+  trajectory = [];
+  stepIndex = 0;
+  render();
+}
+
+function syncLrFromSlider() {
+  controls.lrInput.value = Number(controls.lr.value).toFixed(3);
+  render();
+}
+
+function syncLrFromInput() {
+  let v = Number(controls.lrInput.value);
+  if (!Number.isFinite(v)) v = 0.2;
+  v = Math.max(0.001, Math.min(1.0, v));
+  controls.lr.value = v;
+  controls.lrInput.value = v.toFixed(3);
+  render();
+}
+
+function applyCaseDefaults(caseKey) {
+  if (caseKey === "case1") {
+    controls.p1.value = -4.0;
+    controls.p2.value = 4.0;
+    controls.lr.value = 0.20;
+  } else {
+    controls.p1.value = -2.2;
+    controls.p2.value = -2.0;
+    controls.lr.value = 0.14;
+  }
+  controls.lrInput.value = Number(controls.lr.value).toFixed(3);
+  controls.iters.value = 80;
+  controls.speed.value = 90;
+  clearPath();
+}
+
+for (const el of [controls.iters, controls.p1, controls.p2, controls.speed]) {
+  el.addEventListener("input", render);
+}
+
+controls.lr.addEventListener("input", syncLrFromSlider);
+controls.lrInput.addEventListener("change", syncLrFromInput);
+controls.caseSelect.addEventListener("change", () => {
+  applyCaseDefaults(controls.caseSelect.value);
+});
+
+controls.runBtn.addEventListener("click", runTrajectory);
+controls.stepBtn.addEventListener("click", nextStep);
+controls.autoBtn.addEventListener("click", automaticRun);
+controls.restartBtn.addEventListener("click", restartPath);
+controls.regenBtn.addEventListener("click", () => {
+  generateSyntheticData();
+  clearPath();
+});
+controls.clearBtn.addEventListener("click", clearPath);
+
+generateSyntheticData();
+applyCaseDefaults("case1");

logistic-regression/index.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DDW Interface - Home</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <div>
+        <p class="kicker">Data Driven World</p>
+        <h1>Classification Categorical Data</h1>
+      </div>
+      <nav>
+        <a class="active" href="index.html">Home</a>
+        <a href="simple-sigmoid.html">Simple Sigmoid</a>
+        <a href="confusion-matrix.html">Confusion Matrix (Page 3)</a>
+        <a href="sigmoid.html">Sigmoid Function</a>
+        <a href="cost-visualization.html">Cost Function</a>
+        <a href="about.html">Notes</a>
+      </nav>
+    </header>
+
+    <main class="panel page-copy home-page">
+      <h2>Lecture Objective</h2>
+      <p>
+        The objective of this lecture is classification of categorical data. Use these interactive pages to understand
+        how logistic regression and threshold-based decisions classify observations into categories.
+      </p>
+
+      <section class="home-grid">
+        <article class="home-card">
+          <h3>Simple Sigmoid (Page 1)</h3>
+          <p>Basic illustration of the function 1/(1+np.exp(-z)) with a single z control.</p>
+          <a class="cta-button" href="simple-sigmoid.html">Simple Sigmoid</a>
+        </article>
+
+        <article class="home-card">
+          <h3>Confusion Matrix Practice (Page 3)</h3>
+          <p>Practice threshold-based 2-class and 3-class predictions, then build confusion matrix and key metrics.</p>
+          <a class="cta-button secondary" href="confusion-matrix.html">Confusion Matrix</a>
+        </article>
+
+        <article class="home-card">
+          <h3>Sigmoid Function</h3>
+          <p>Interactive plot of p = 1 / (1 + exp(-(b0 + b1x))) with sliders and chart actions.</p>
+          <a class="cta-button secondary" href="sigmoid.html">Sigmoid Function</a>
+        </article>
+
+        <article class="home-card">
+          <h3>Visualization for Cost Function</h3>
+          <p>Compare two logistic-model cases and track gradient descent trajectory on the cost surface.</p>
+          <a class="cta-button secondary" href="cost-visualization.html">Cost Function</a>
+        </article>
+      </section>
+    </main>
+  </body>
+</html>

logistic-regression/sigmoid.html

@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DDW Interface - Sigmoid Function</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <div>
+        <p class="kicker">Data Driven World</p>
+        <h1>Sigmoid Function Playground</h1>
+      </div>
+      <nav>
+        <a href="index.html">Home</a>
+        <a href="simple-sigmoid.html">Simple Sigmoid</a>
+        <a href="confusion-matrix.html">Confusion Matrix (Page 3)</a>
+        <a class="active" href="sigmoid.html">Sigmoid Function</a>
+        <a href="cost-visualization.html">Cost Function</a>
+        <a href="about.html">Notes</a>
+      </nav>
+    </header>
+
+    <main class="layout">
+      <section class="panel controls">
+        <h2>Model Controls</h2>
+
+        <label for="b0">b0 (intercept): <span id="b0Value">0.00</span></label>
+        <input id="b0" type="range" min="-10" max="10" step="0.1" value="0" />
+
+        <label for="b1">b1 (slope): <span id="b1Value">1.00</span></label>
+        <input id="b1" type="range" min="-5" max="5" step="0.1" value="1" />
+
+        <label for="t">threshold t: <span id="tValue">0.50</span></label>
+        <input id="t" type="range" min="0.05" max="0.95" step="0.01" value="0.5" />
+
+        <label for="probeX">probe x: <span id="probeValue">0.00</span></label>
+        <input id="probeX" type="range" min="-10" max="10" step="0.1" value="0" />
+
+        <div class="button-row">
+          <button id="resetBtn" type="button">Reset</button>
+          <button id="animateBtn" type="button">Animate Probe</button>
+        </div>
+
+        <label for="preset">Preset examples</label>
+        <select id="preset">
+          <option value="default">Default (b0=0, b1=1, t=0.5)</option>
+          <option value="steep">Steep classifier</option>
+          <option value="reversed">Reversed slope</option>
+          <option value="high-threshold">High threshold</option>
+        </select>
+
+        <div class="checkboxes">
+          <label><input id="showGrid" type="checkbox" checked /> Show grid</label>
+          <label><input id="showShade" type="checkbox" checked /> Shade positive region</label>
+          <label><input id="showDerivative" type="checkbox" /> Show derivative curve</label>
+        </div>
+      </section>
+
+      <section class="panel chart-panel">
+        <h2>p(x) = 1 / (1 + exp(-(b0 + b1x)))</h2>
+        <canvas id="plot" width="900" height="520" aria-label="Logistic curve chart"></canvas>
+
+        <div class="stats" id="stats"></div>
+        <p class="hint">Interactive option: click anywhere on the chart to add sample x points and see class labels using threshold t.</p>
+      </section>
+    </main>
+
+    <script src="app.js"></script>
+  </body>
+</html>

logistic-regression/simple-sigmoid.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>DDW Interface - Simple Sigmoid</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header class="site-header">
+      <div>
+        <p class="kicker">Data Driven World</p>
+        <h1>Simple Sigmoid (Page 1)</h1>
+      </div>
+      <nav>
+        <a href="index.html">Home</a>
+        <a class="active" href="simple-sigmoid.html">Simple Sigmoid</a>
+        <a href="confusion-matrix.html">Confusion Matrix (Page 3)</a>
+        <a href="sigmoid.html">Sigmoid Function</a>
+        <a href="cost-visualization.html">Cost Function</a>
+        <a href="about.html">Notes</a>
+      </nav>
+    </header>
+
+    <main class="layout">
+      <section class="panel controls">
+        <h2>Single-Variable Function</h2>
+
+        <p class="hint">
+          Illustrating: <code>1 / (1 + np.exp(-z))</code>
+        </p>
+
+        <label for="z">z value: <span id="zValue">0.00</span></label>
+        <input id="z" type="range" min="-10" max="10" step="0.1" value="0" />
+
+        <div class="button-row">
+          <button id="resetSimple" type="button">Reset</button>
+          <button id="animateSimple" type="button">Animate z</button>
+        </div>
+
+        <div class="checkboxes">
+          <label><input id="showHalf" type="checkbox" checked /> Show y = 0.5 line</label>
+          <label><input id="showFormula" type="checkbox" checked /> Show formula annotation</label>
+        </div>
+      </section>
+
+      <section class="panel chart-panel">
+        <h2>sigmoid(z) = 1 / (1 + np.exp(-z))</h2>
+        <canvas id="simplePlot" width="900" height="520" aria-label="Simple sigmoid chart"></canvas>
+        <div class="stats" id="simpleStats"></div>
+      </section>
+    </main>
+
+    <script src="simple.js"></script>
+  </body>
+</html>

logistic-regression/simple.js

@@ -0,0 +1,205 @@
+const canvas = document.getElementById("simplePlot");
+const ctx = canvas.getContext("2d");
+
+const zSlider = document.getElementById("z");
+const zValue = document.getElementById("zValue");
+const showHalf = document.getElementById("showHalf");
+const showFormula = document.getElementById("showFormula");
+const resetBtn = document.getElementById("resetSimple");
+const animateBtn = document.getElementById("animateSimple");
+const stats = document.getElementById("simpleStats");
+
+const MARGIN = { left: 72, right: 24, top: 24, bottom: 58 };
+const Z_MIN = -10;
+const Z_MAX = 10;
+
+let timer = null;
+let direction = 1;
+
+function sigmoid(z) {
+  return 1 / (1 + Math.exp(-z));
+}
+
+function zToX(z) {
+  const width = canvas.width - MARGIN.left - MARGIN.right;
+  return MARGIN.left + ((z - Z_MIN) / (Z_MAX - Z_MIN)) * width;
+}
+
+function yToCanvas(y) {
+  const height = canvas.height - MARGIN.top - MARGIN.bottom;
+  return canvas.height - MARGIN.bottom - y * height;
+}
+
+function drawAxes() {
+  const left = MARGIN.left;
+  const right = canvas.width - MARGIN.right;
+  const top = MARGIN.top;
+  const bottom = canvas.height - MARGIN.bottom;
+
+  ctx.strokeStyle = "#c9d9df";
+  ctx.lineWidth = 1;
+
+  for (let z = -10; z <= 10; z += 2) {
+    const x = zToX(z);
+    ctx.beginPath();
+    ctx.moveTo(x, top);
+    ctx.lineTo(x, bottom);
+    ctx.stroke();
+  }
+
+  for (let y = 0; y <= 1.001; y += 0.1) {
+    const py = yToCanvas(y);
+    ctx.beginPath();
+    ctx.moveTo(left, py);
+    ctx.lineTo(right, py);
+    ctx.stroke();
+  }
+
+  ctx.strokeStyle = "#14343f";
+  ctx.lineWidth = 1.4;
+
+  ctx.beginPath();
+  ctx.moveTo(left, yToCanvas(0));
+  ctx.lineTo(right, yToCanvas(0));
+  ctx.stroke();
+
+  ctx.beginPath();
+  ctx.moveTo(zToX(0), top);
+  ctx.lineTo(zToX(0), bottom);
+  ctx.stroke();
+
+  ctx.fillStyle = "#14343f";
+  ctx.font = "13px 'Avenir Next', sans-serif";
+
+  for (let z = -10; z <= 10; z += 2) {
+    ctx.fillText(String(z), zToX(z) - 8, yToCanvas(0) + 19);
+  }
+  for (let y = 0; y <= 1.001; y += 0.2) {
+    ctx.fillText(y.toFixed(1), left - 40, yToCanvas(y) + 4);
+  }
+
+  ctx.fillText("z", right - 12, yToCanvas(0) + 38);
+  ctx.fillText("y", zToX(0) + 12, top + 12);
+}
+
+function drawSigmoid() {
+  ctx.strokeStyle = "#0a8f7b";
+  ctx.lineWidth = 3;
+  ctx.beginPath();
+
+  const steps = 600;
+  for (let i = 0; i <= steps; i += 1) {
+    const z = Z_MIN + (i / steps) * (Z_MAX - Z_MIN);
+    const y = sigmoid(z);
+    const x = zToX(z);
+    const py = yToCanvas(y);
+    if (i === 0) ctx.moveTo(x, py);
+    else ctx.lineTo(x, py);
+  }
+
+  ctx.stroke();
+}
+
+function drawHalfLine() {
+  ctx.strokeStyle = "#d8534f";
+  ctx.lineWidth = 1.3;
+  ctx.setLineDash([7, 5]);
+  ctx.beginPath();
+  ctx.moveTo(MARGIN.left, yToCanvas(0.5));
+  ctx.lineTo(canvas.width - MARGIN.right, yToCanvas(0.5));
+  ctx.stroke();
+  ctx.setLineDash([]);
+}
+
+function drawProbe(z) {
+  const y = sigmoid(z);
+  const px = zToX(z);
+  const py = yToCanvas(y);
+
+  ctx.strokeStyle = "#14343f";
+  ctx.setLineDash([4, 4]);
+  ctx.beginPath();
+  ctx.moveTo(px, yToCanvas(0));
+  ctx.lineTo(px, py);
+  ctx.stroke();
+  ctx.setLineDash([]);
+
+  ctx.fillStyle = "#14343f";
+  ctx.beginPath();
+  ctx.arc(px, py, 6, 0, Math.PI * 2);
+  ctx.fill();
+
+  if (showFormula.checked) {
+    ctx.font = "13px 'Avenir Next', sans-serif";
+    ctx.fillText(`z=${z.toFixed(2)}, y=${y.toFixed(4)}`, px + 8, py - 8);
+  }
+}
+
+function renderStats(z) {
+  const y = sigmoid(z);
+  const inverse = Math.log(y / (1 - y));
+
+  stats.innerHTML = `
+    <span>Function: y = 1 / (1 + np.exp(-z))</span>
+    <span>Current z: ${z.toFixed(2)}</span>
+    <span>Output y: ${y.toFixed(4)}</span>
+    <span>Cross-check logit(y): ${inverse.toFixed(4)}</span>
+  `;
+}
+
+function render() {
+  const z = Number(zSlider.value);
+  zValue.textContent = z.toFixed(2);
+
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  drawAxes();
+  drawSigmoid();
+  if (showHalf.checked) drawHalfLine();
+  drawProbe(z);
+  renderStats(z);
+}
+
+function stopAnimation() {
+  if (timer) {
+    clearInterval(timer);
+    timer = null;
+  }
+  animateBtn.textContent = "Animate z";
+}
+
+function startAnimation() {
+  if (timer) return;
+  animateBtn.textContent = "Stop Animation";
+
+  timer = setInterval(() => {
+    let next = Number(zSlider.value) + direction * 0.18;
+    if (next >= Z_MAX) {
+      next = Z_MAX;
+      direction = -1;
+    } else if (next <= Z_MIN) {
+      next = Z_MIN;
+      direction = 1;
+    }
+    zSlider.value = next;
+    render();
+  }, 30);
+}
+
+function reset() {
+  zSlider.value = 0;
+  showHalf.checked = true;
+  showFormula.checked = true;
+  stopAnimation();
+  render();
+}
+
+zSlider.addEventListener("input", render);
+showHalf.addEventListener("input", render);
+showFormula.addEventListener("input", render);
+resetBtn.addEventListener("click", reset);
+animateBtn.addEventListener("click", () => {
+  if (timer) stopAnimation();
+  else startAnimation();
+});
+
+reset();

logistic-regression/styles.css

@@ -0,0 +1,293 @@
+:root {
+  --bg: #f4f7f8;
+  --panel: #ffffff;
+  --ink: #13272f;
+  --muted: #597179;
+  --accent: #0a8f7b;
+  --accent-2: #f2b84b;
+  --danger: #d8534f;
+  --line: #e1ebee;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "Avenir Next", "Segoe UI", sans-serif;
+  color: var(--ink);
+  background:
+    radial-gradient(circle at 20% 10%, #d8f4ef 0%, transparent 35%),
+    radial-gradient(circle at 90% 90%, #fff4da 0%, transparent 30%),
+    var(--bg);
+}
+
+.site-header {
+  padding: 1.2rem 1.6rem;
+  border-bottom: 1px solid var(--line);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(4px);
+  display: flex;
+  gap: 1rem;
+  justify-content: space-between;
+  align-items: end;
+  flex-wrap: wrap;
+}
+
+.kicker {
+  margin: 0;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-size: 0.72rem;
+  color: var(--muted);
+}
+
+h1 {
+  margin: 0.1rem 0;
+  font-size: 1.4rem;
+}
+
+h2 {
+  margin-top: 0;
+  font-size: 1.1rem;
+}
+
+nav {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+nav a {
+  text-decoration: none;
+  color: var(--ink);
+  border: 1px solid var(--line);
+  padding: 0.45rem 0.7rem;
+  border-radius: 999px;
+  font-size: 0.9rem;
+  background: #fff;
+}
+
+nav a.active {
+  border-color: var(--accent);
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.layout {
+  display: grid;
+  grid-template-columns: minmax(260px, 340px) 1fr;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+.panel {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 14px;
+  padding: 1rem;
+  box-shadow: 0 12px 20px rgba(14, 33, 41, 0.06);
+}
+
+.controls label,
+.controls select,
+.controls input,
+.controls button {
+  display: block;
+  width: 100%;
+}
+
+.controls label {
+  margin-top: 0.7rem;
+  margin-bottom: 0.25rem;
+  font-size: 0.9rem;
+}
+
+.controls input[type="range"] {
+  accent-color: var(--accent);
+}
+
+.button-row {
+  margin-top: 0.8rem;
+  display: flex;
+  gap: 0.6rem;
+}
+
+button {
+  border: 1px solid var(--line);
+  background: #fff;
+  color: var(--ink);
+  border-radius: 9px;
+  padding: 0.5rem;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+button:hover {
+  border-color: var(--accent);
+}
+
+select {
+  padding: 0.45rem;
+  border-radius: 8px;
+  border: 1px solid var(--line);
+}
+
+.checkboxes {
+  margin-top: 0.8rem;
+  display: grid;
+  gap: 0.3rem;
+}
+
+.checkboxes label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin: 0;
+}
+
+.chart-panel canvas {
+  width: 100%;
+  height: auto;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+  background: #fff;
+}
+
+.stats {
+  margin-top: 0.8rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 0.55rem;
+  font-size: 0.9rem;
+}
+
+.stats span {
+  display: block;
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  padding: 0.45rem 0.6rem;
+  background: #fcfeff;
+}
+
+.hint {
+  margin: 0.8rem 0 0;
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
+.page-copy {
+  max-width: 760px;
+  margin: 1.2rem auto;
+  line-height: 1.6;
+}
+
+@media (max-width: 980px) {
+  .layout {
+    grid-template-columns: 1fr;
+  }
+}
+
+.home-page {
+  margin-top: 1rem;
+}
+
+.home-grid {
+  margin-top: 1rem;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
+  gap: 0.9rem;
+}
+
+.home-card {
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 0.9rem;
+  background: #fcfeff;
+}
+
+.home-card h3 {
+  margin: 0;
+  font-size: 1.05rem;
+}
+
+.home-card p {
+  margin: 0.45rem 0 0.9rem;
+  color: var(--muted);
+}
+
+.cta-button {
+  display: inline-block;
+  text-decoration: none;
+  border: 1px solid var(--accent);
+  color: #fff;
+  background: var(--accent);
+  border-radius: 9px;
+  padding: 0.5rem 0.7rem;
+  font-weight: 600;
+}
+
+.cta-button.secondary {
+  background: #fff;
+  color: var(--ink);
+  border-color: var(--line);
+}
+
+.home-card.muted {
+  background: #f8fafb;
+}
+
+.coming-soon {
+  color: var(--muted);
+  font-size: 0.9rem;
+  font-weight: 600;
+}
+
+.confusion-panel h3 {
+  margin: 1rem 0 0.45rem;
+  font-size: 1rem;
+}
+
+.exercise-table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 0.45rem 0 1rem;
+  font-size: 0.9rem;
+}
+
+.exercise-table th,
+.exercise-table td {
+  border: 1px solid var(--line);
+  padding: 0.45rem 0.5rem;
+  text-align: left;
+  vertical-align: middle;
+  background: #fff;
+}
+
+.exercise-table th {
+  background: #f6fbfc;
+}
+
+.exercise-table input,
+.exercise-table select {
+  width: 100%;
+  padding: 0.4rem;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+}
+
+.worked-tag {
+  color: var(--muted);
+  font-size: 0.82rem;
+}
+
+.solution-block {
+  margin-top: 1rem;
+  border-top: 1px dashed var(--line);
+  padding-top: 0.8rem;
+}
+
+.solution-block h4 {
+  margin: 0.8rem 0 0.35rem;
+}