# chloridesnail/neural-network architecture

> Architecture diagram of the GitHub repository chloridesnail/neural-network, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-26). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/chloridesnail/neural-network
- Repository: https://github.com/chloridesnail/neural-network

## Overview

This is a browser-based handwritten-digit training demo: a user draws a digit, the browser encodes the 40×40 canvas as 1,600 binary inputs, and Flask sends those inputs and the supplied label to a from-scratch neural network. The network trains and returns a guess and loss; the browser currently logs that response. The model loads and saves weights in JSON. The README describes prediction as a capability, and prediction is implemented inside the network, but no browser prediction endpoint is shown. The graph reflects the sampled source; unsampled HTML details and serving behavior are not expanded.

Main entry points: [`neural-network/server.py`](https://github.com/chloridesnail/neural-network/blob/numpy-version/neural-network/server.py) (Flask routes), [`neural-network/network.py`](https://github.com/chloridesnail/neural-network/blob/numpy-version/neural-network/network.py) (Network training), [`web-application/script.js`](https://github.com/chloridesnail/neural-network/blob/numpy-version/web-application/script.js) (Canvas encoding), [`web-application/index.html`](https://github.com/chloridesnail/neural-network/blob/numpy-version/web-application/index.html) (Drawing page)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_browser["Browser input"]
  node_page["Drawing page<br/>[index.html]"]
  node_canvas["Canvas encoding<br/>[script.js]"]
end

subgraph group_api["Flask API"]
  node_server["Flask routes<br/>[server.py]"]
end

subgraph group_nn["Neural network"]
  node_network["Network training<br/>[network.py]"]
  node_layer["Layer calculations<br/>[layer.py]"]
end

subgraph group_state["Model state"]
  node_model[("Saved weights<br/>[model.json]")]
end

node_user(("Digit user"))

node_user -->|"opens"| node_page
node_user -->|"draws and labels"| node_canvas
node_server -->|"serves page"| node_page
node_server -->|"serves assets"| node_canvas
node_canvas -->|"POSTs inputs and label"| node_server
node_server -->|"trains"| node_network
node_network -->|"constructs and calculates"| node_layer
node_network -->|"forwards and predicts"| node_network
node_server -->|"loads on startup"| node_model
node_network -->|"saves weights"| node_model
node_server -->|"returns guess and loss"| node_canvas

click node_page "https://github.com/chloridesnail/neural-network/blob/numpy-version/web-application/index.html"
click node_canvas "https://github.com/chloridesnail/neural-network/blob/numpy-version/web-application/script.js"
click node_server "https://github.com/chloridesnail/neural-network/blob/numpy-version/neural-network/server.py"
click node_network "https://github.com/chloridesnail/neural-network/blob/numpy-version/neural-network/network.py"
click node_layer "https://github.com/chloridesnail/neural-network/blob/numpy-version/neural-network/layer.py"
click node_model "https://github.com/chloridesnail/neural-network/blob/numpy-version/neural-network/model.json"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_page,node_canvas,node_user toneBlue
class node_server toneAmber
class node_network,node_layer toneMint
class node_model toneRose
```

## Components

### Browser input

- [Drawing page](https://github.com/chloridesnail/neural-network/blob/numpy-version/web-application/index.html): `web-application/index.html`
- [Canvas encoding](https://github.com/chloridesnail/neural-network/blob/numpy-version/web-application/script.js): `web-application/script.js`

### Flask API

- [Flask routes](https://github.com/chloridesnail/neural-network/blob/numpy-version/neural-network/server.py): `neural-network/server.py`

### Neural network

- [Network training](https://github.com/chloridesnail/neural-network/blob/numpy-version/neural-network/network.py): `neural-network/network.py`
- [Layer calculations](https://github.com/chloridesnail/neural-network/blob/numpy-version/neural-network/layer.py): `neural-network/layer.py`

### Model state

- [Saved weights](https://github.com/chloridesnail/neural-network/blob/numpy-version/neural-network/model.json): `neural-network/model.json`

### Other components

- **Digit user**

## Connections

- Digit user → Drawing page: opens
- Digit user → Canvas encoding: draws and labels
- Flask routes → Drawing page: serves page
- Flask routes → Canvas encoding: serves assets
- Canvas encoding → Flask routes: POSTs inputs and label
- Flask routes → Network training: trains
- Network training → Layer calculations: constructs and calculates
- Network training → Network training: forwards and predicts
- Flask routes → Saved weights: loads on startup
- Network training → Saved weights: saves weights
- Flask routes → Canvas encoding: returns guess and loss