How This Demo Was Created
Created with Codex (GPT-6). This is the updated brief for the backpropagation implementation.
# Updated Brief: AILT1001 L2 Neural Network Demo
Start again from a fresh implementation of Demo3 for AILT1001 Lecture 2. Pedagogy and technical correctness are the highest priorities. Preserve the previous candidates and creation records as an earlier iteration; do not adapt their discrete-search training into something labelled backpropagation.
Build three independent candidate webpages. Keep the familiar two-input, three-hidden-neuron, one-output network and red knobs from the lecture. The candidates should differ in teaching approach and interaction design, while using the same verified mathematical model, training algorithm, and default data. After independent development, have each agent review both other candidates, make one improvement round, and present all three for the instructor to choose.
## Teaching Purpose
Help students explain this sequence:
1. The network makes predictions using its current parameters.
2. A cost measures the difference between predictions and known outcomes across the training examples.
3. Backpropagation calculates how the cost changes with each parameter.
4. The optimizer uses those gradients to update the parameters.
5. Repeating this process can improve the fit, but does not guarantee a perfect model or reliable predictions for new cases.
Ask students to predict an effect before revealing it. Keep the main screen simple enough for a short live lecture demonstration. Stage detail on demand instead of displaying every formula, control and explanation at once. The cost curve and changing knobs must support one coherent story.
## Exact Examples and Model
Use these synthetic examples from the slides, with editable inputs and known scores:
| Example | Sleep (Hours) | Study (Hours) | Known Score |
|---|---:|---:|---:|
| Apple Cheung | 3 | 5 | 75 |
| Rainbow Wong | 5 | 1 | 82 |
| Sunny Choi | 10 | 2 | 93 |
Use a genuine feedforward neural network:
- Two inputs, three ReLU hidden neurons, one linear output.
- Nine continuous floating-point connection weights, allowing positive, zero and negative values.
- A learnable bias for each hidden neuron and the output neuron: four biases, thirteen trainable parameters in total.
- Explain a bias briefly as an adjustable offset. Show its existence clearly, with its value and adjustment available on inspection. Keep the familiar nine connection knobs as the dominant visual rather than crowding the network with four equally prominent new knobs.
- Keep all calculations at full floating-point precision internally. Round only displayed values. Expose extra precision on inspection.
- Knobs turn smoothly. Tick marks are visual guides, not permitted discrete weight values. No snapping, quantized training, or clipping trained parameters to a display range. Make the zero position and positive/negative direction clear.
Use explicit fixed scaling: divide each input in hours by 10 and each target score by 100. Calculate training predictions and mean squared error in these scaled units. Multiply the output by 100 when displaying a predicted score. Show the conversion when a student traces the calculation, so the displayed arithmetic never mixes raw and scaled units. Do not silently clamp predictions to 0–100. These are scale factors, not a claim that every possible input falls between 0 and 1.
The forward calculation is:
```
x = [sleep / 10, study / 10]
h = ReLU(W_hidden @ x + b_hidden)
prediction_scaled = W_output @ h + b_output
prediction_score = 100 * prediction_scaled
cost = mean((prediction_scaled - known_score / 100) ** 2)
```
This is an intentional update to the earlier bias-free, integer-weight example. Do not carry forward its claim that Sunny's prediction must be twice Rainbow's. That restriction does not generally hold once biases are present.
## Genuine Training
Use analytical backpropagation and full-batch gradient descent on the three current examples. Keep the update rule simple: calculate every gradient from the same pre-update state, then update all weights and biases together with a learning rate. Backpropagation calculates the gradients; the optimizer applies the updates. Do not search alternative knob positions, use finite differences as the training algorithm, or precompute a desired sequence of predictions.
Choose and document a sensible random initialization and stable default learning rate through reference testing before candidate development. Give all three agents that same numerical contract. Randomize connection weights on every new run; document bias initialization. A reproducible seed may be available for inspection or testing. Never silently retry seeds or select only successful runs. Handle inactive ReLU units and stalled training honestly. New Start resets parameters, iteration, optimizer state and history.
Provide One Step, Train/Pause and New Start. Train must remain responsive and bounded. Stop visibly on nonfinite values, a documented stopping criterion or an iteration limit. A stop must not imply that a global optimum or a good real-world predictor has been found.
## Visualize the Process
Use the lecture's restrained white background, readable black text, network geometry and red knob treatment. Match the established style rather than introducing a decorative dashboard.
- Hover or keyboard focus reveals the inspected connection, its actual input, weight and product. Include the bias when explaining a neuron's sum, and show what ReLU does.
- Make negative and inactive values intelligible. Do not imply every signal is positive or every neuron is active.
- During a training step, optionally stage prediction, cost, gradients and update, but never display old values as if they belong to new parameter settings.
- Plot real cost against training iteration, including the random initial state at iteration zero. Label the cost's scaled units and axes. Display the actual curve, including increases or plateaus. Do not teach that every gradient-based update must decrease cost.
- Keep the three current predictions and known scores accessible. Distinguish lower aggregate cost from improvement for every individual example.
- Offer a simple way to try a new input after training with parameters held fixed. Clearly separate inference from editing the training data. A good fit to three examples does not establish generalization.
Data editing pauses training and starts a new history. Invalid input must block training and remove or clearly mark stale predictions and costs. Restore Slide Examples should recover the original three rows. Allow sleep/study values from 0 to 24 hours and known scores from 0 to 100; reject blank and nonfinite values.
Make every essential interaction work with mouse and keyboard. Provide meaningful focus states and a complete reduced-motion presentation. Verify that essential content fits and remains readable at both Deckroom demo resolutions, 1280×720 and 1920×1080.
## Independent Verification and Reviews
Before claiming correctness, compare the exact model against a PyTorch reference with identical inputs, scaling, parameters, MSE reduction and learning rate. Verify forward values, every weight and bias gradient, one simultaneous update and a multi-step training trajectory. Use finite-difference gradient checks away from ReLU's nondifferentiable zero as an additional test, not as the learning algorithm.
Test multiple random starts, edited data, inactive ReLU units, pause/resume, restart, invalid-input recovery and inference with frozen parameters. Verify animation/numeric consistency and the real cost history. Report limitations and failures rather than hiding them.
Have all three agents independently critique both other candidates for pedagogy, mathematical fidelity, readability and usability. Preserve the initial proposals, six peer assessments and the concrete changes from one improvement round. The instructor chooses the final candidate.
## Lecture Integration and Creation Record
Build self-contained webpages suitable for the local L2 package and Demo3 tab, with no external service required to run them. Use the current verified Deckroom runtime. Preserve Demo1, Demo2, the existing slides and published releases while developing the new candidates.
Identify the precise slide changes needed for consistency, including:
- Reframing ten positions and one billion combinations as a hypothetical simplification.
- Introducing continuous signed weights and biases.
- Showing any scaling when tracing arithmetic.
- Replacing illustrative prediction values with values the updated network can actually produce.
Present those slide changes for the instructor's design approval rather than silently changing their visual composition.
On each candidate, show “Created with Codex (GPT-6)” and an unobtrusive expandable prompt. Provide a readable creation page containing this updated brief, the reason for restarting, the independent proposals, peer reviews, verification summary and improvement record. Clearly distinguish the earlier discrete-search prototypes from the new backpropagation candidates. Include shareable review conclusions, not private model reasoning or student survey records.
After verification and the improvement round, place a chooser in Demo3 and show all three candidates locally. Do not publish a new lecture release or select the final design without the instructor's instruction.
Read the Peer Reviews and Verification