5DV248 · TRUSTWORTHY HUMAN-AI INTERACTION

Neural Networks in Action

From a hand-drawn digit to numerical pixels, convolutional features and a classification output. Explore the main ideas behind convolutional neural networks (CNNs).

Interactive laboratory45–60 minutesBrowser-based
Learning goals: explain how an image is represented numerically; describe convolution, filters and feature maps; trace a simplified CNN pipeline; and critically interpret classification confidence.
Important scientific distinction: this is a self-contained teaching demonstrator. The feature maps are computed using real, fixed, hand-designed convolution kernels. The ten class scores are explicitly illustrative teaching scores—not predictions from a trained MNIST neural network and not calibrated probabilities. The fixed filters are not learned CNN weights. Keep this distinction clear when teaching.

Instructor and student guide

Suggested activity sequence for pairs or small groups.

Learning outcomes

  • Represent an image as a numerical tensor.
  • Explain convolution, filters and feature maps.
  • Describe the stages of a CNN.
  • Distinguish confidence from correctness.

Suggested format

  • Pairs or groups of three.
  • 45–60 minutes.
  • One student operates the interface; another records observations.
  • Switch roles halfway through.
Step 1 — Predict before interacting (5 min)
  1. Ask students to draw a digit (e.g., 3, 5 or 8) without using the output section.
  2. Write down the intended digit and predict which features might distinguish it.
  3. Discuss whether another person could interpret the same drawing differently.
Teaching point: the system receives an image, not the student's intention.
Step 2 — Inspect the pixel representation (8 min)
  1. Draw a digit and select Prepare 28×28 input.
  2. Inspect the pixel grid and compare it with the original canvas.
  3. Change the size or position of the digit and prepare it again.
  4. Discuss information lost through resizing and normalisation.
Teaching point: a neural network operates on numerical input values, not on the visual concept of a digit.
Step 3 — Explore convolutional filters (10–12 min)
  1. Inspect vertical, horizontal and diagonal filters.
  2. Compare each kernel with its resulting feature map.
  3. Identify where the filter responds strongly.
  4. Change the drawing and observe how the feature map changes.
Teaching point: convolution applies a small kernel to local image regions. A trained CNN learns filter weights; the filters here are fixed examples.
Step 4 — Explain the CNN pipeline (8 min)
  1. Trace input → convolution → activation → pooling → dense layer → output.
  2. Explain what each stage transforms.
  3. Use the max-pooling example to discuss reduced spatial resolution.
Teaching point: this is a conceptual architecture, not a display of hidden activations from a trained network.
Step 5 — Discuss output and uncertainty (8–10 min)
  1. Generate the illustrative class scores.
  2. Compare the highest score with the digit students intended.
  3. Change the drawing and observe the score changes.
  4. Discuss what evidence would be needed to trust a real classifier.
Teaching point: the bars are not learned probabilities. Even a real model's high softmax score does not prove correctness or calibration.
Step 6 — Debrief: connect to trustworthy AI (5–10 min)
  1. Distinguish accuracy, confidence and calibration.
  2. Discuss how uncertainty and limitations should be communicated.
  3. Identify documentation needed: training data, intended use, evaluation, limitations and failure cases.
Suggested student evidence: submit the intended digit, a screenshot of one feature map, a short explanation of the filter, and a reflection explaining why this page's class scores are illustrative rather than learned predictions.

1 · Draw a digit

Use a mouse, trackpad, stylus or finger. Draw one large digit near the centre.

Drawing canvas

Use a continuous stroke where possible.

Ready for a drawing.

The classification task

The input is a grayscale image. Each pixel is represented by an intensity value. A digit recogniser aims to assign the image to one of ten classes: 0–9.

Image → Numbers → Features → Class

Before proceeding: write down the digit you intended to draw.

2 · From pixels to numbers

Inspect the 28×28 grayscale input.

Pixel grid

Brighter cells represent higher pixel intensity.

What does a pixel value mean?

Each pixel can be represented by a scalar normalised to [0, 1]. Dark background values are close to 0; bright strokes are closer to 1.

Discuss: What happens if the digit is too small, off-centre, faint, or written in a style unlike the training examples?

3 · Inside a convolutional neural network

These fixed kernels illustrate local pattern detection. Select a filter to calculate its feature map from the prepared drawing.

Vertical edges
-101-101-101
Horizontal edges
-1-1-1000111
Diagonal edges
-1-10-101011

Feature map · vertical edges

Interpret the map

This filter compares left and right neighbourhoods. Brighter cells indicate stronger positive responses to local intensity changes.

The feature map is calculated from the current 28×28 image using the selected fixed kernel. It is not an activation extracted from a trained network.

A simplified CNN architecture

Input28×28 pixels
→
Convolutionlocal filters
→
ReLUnon-linearity
→
Poolingsmaller maps
→
Denseclass scores
→
Output10 classes

Real CNNs may use multiple convolutional blocks, channels, normalisation, dropout and other components.

4 · Prediction and interpretation

Use this stage to discuss classification outputs and the limits of confidence scores.

Illustrative class scores

A simple rule-based teaching heuristic produces these scores from coarse image regions and stroke density. They are not produced by a trained neural network and are not calibrated probabilities.

—
No scores yet

What would a real classifier do?

  1. Apply learned convolution kernels and biases.
  2. Pass feature maps through nonlinear transformations.
  3. Reduce or aggregate spatial information.
  4. Compute class logits in a final layer.
  5. Optionally apply softmax to obtain a distribution.
Critical distinction: softmax outputs sum to one, but this does not guarantee calibrated confidence. A model can be highly confident and wrong.

Reflection and group discussion

  1. Representation: What information is lost when a drawing is converted to a 28×28 grid?
  2. Convolution: Why are small filters useful for detecting local patterns?
  3. Learning: How do fixed filters differ from filters learned during CNN training?
  4. Generalisation: Would a model trained on neat handwritten digits necessarily work for every student's handwriting?
  5. Uncertainty: Why is a high class score not proof that the prediction is correct?
  6. Transparency: What should a developer disclose about training data, intended use, performance and limitations?

Exit ticket

In 3–5 sentences, explain the journey from a hand-drawn digit to a CNN classification. Include one limitation and one reason confidence should be interpreted carefully.