# amino997h/board architecture

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

- Interactive diagram: https://gitdiagram.com/amino997h/board
- Repository: https://github.com/amino997h/board

## Overview

This is a web-based AI whiteboard explainer. A user submits a topic and language; the API obtains a scene plan from a configurable language model, creates per-scene audio and optional illustrative images, then returns the enriched plan for animated playback on an interactive canvas. Settings are loaded and saved separately. The README also describes freehand camera navigation, drawing and text animation, image retrieval, and configurable LLM providers. The sampled excerpts show the main orchestration and rendering; the HTML and CSS contents were not sampled.

Main entry points: [`main.py`](https://github.com/amino997h/board/blob/main/main.py) (FastAPI routes), [`static/js/app.js`](https://github.com/amino997h/board/blob/main/static/js/app.js) (Lesson controls), [`static/index.html`](https://github.com/amino997h/board/blob/main/static/index.html) (Explainer page), [`static/js/whiteboard.js`](https://github.com/amino997h/board/blob/main/static/js/whiteboard.js) (Animated whiteboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web experience"]
  node_page["Explainer page<br/>[index.html]"]
  node_lesson_ui["Lesson controls<br/>[app.js]"]
  node_canvas["Animated whiteboard<br/>[whiteboard.js]"]
  node_styles["Page styling<br/>[style.css]"]
end

subgraph group_api["API orchestration"]
  node_api_server["FastAPI routes<br/>[main.py]"]
  node_media[("Generated media files<br/>[main.py]")]
end

subgraph group_services["Generation services"]
  node_llm["Scene planner<br/>[llm_service.py]"]
  node_tts["Speech synthesis<br/>[tts_service.py]"]
  node_images["Image search and download<br/>[image_service.py]"]
end

subgraph group_settings["Configuration"]
  node_config_api["Config manager<br/>[config_manager.py]"]
  node_config_file[("Saved settings<br/>[config.json]")]
end

node_user(("Learner"))
node_llm_provider{{"Configured LLM API"}}
node_bing{{"Bing Images"}}
node_speech_provider{{"Edge TTS / gTTS"}}

node_user -->|"opens"| node_page
node_page -.->|"hosts controls"| node_lesson_ui
node_lesson_ui -->|"requests lessons and settings"| node_api_server
node_api_server -->|"loads and saves settings"| node_config_api
node_config_api -->|"reads and writes"| node_config_file
node_api_server -->|"requests scene plan"| node_llm
node_llm -->|"requests completion"| node_llm_provider
node_api_server -->|"synthesizes each scene"| node_tts
node_tts -->|"synthesizes speech"| node_speech_provider
node_api_server -->|"searches and downloads"| node_images
node_images -->|"searches images"| node_bing
node_api_server -->|"stores generated files"| node_media
node_api_server -->|"returns enriched plan"| node_lesson_ui
node_lesson_ui -->|"lays out and draws scenes"| node_canvas
node_page -.->|"loads styling"| node_styles
node_lesson_ui -->|"plays scene audio"| node_media
node_canvas -->|"loads scene images"| node_media

click node_page "https://github.com/amino997h/board/blob/main/static/index.html"
click node_lesson_ui "https://github.com/amino997h/board/blob/main/static/js/app.js"
click node_canvas "https://github.com/amino997h/board/blob/main/static/js/whiteboard.js"
click node_styles "https://github.com/amino997h/board/blob/main/static/css/style.css"
click node_api_server "https://github.com/amino997h/board/blob/main/main.py"
click node_config_api "https://github.com/amino997h/board/blob/main/config_manager.py"
click node_config_file "https://github.com/amino997h/board/blob/main/config.json"
click node_llm "https://github.com/amino997h/board/blob/main/services/llm_service.py"
click node_tts "https://github.com/amino997h/board/blob/main/services/tts_service.py"
click node_images "https://github.com/amino997h/board/blob/main/services/image_service.py"
click node_media "https://github.com/amino997h/board/blob/main/main.py"

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_lesson_ui,node_canvas,node_styles toneBlue
class node_api_server,node_media toneAmber
class node_llm,node_tts,node_images,node_llm_provider toneMint
class node_config_api,node_config_file toneRose
class node_user,node_bing,node_speech_provider toneIndigo
```

## Components

### Web experience

- [Explainer page](https://github.com/amino997h/board/blob/main/static/index.html): `static/index.html`
- [Lesson controls](https://github.com/amino997h/board/blob/main/static/js/app.js): `static/js/app.js`
- [Animated whiteboard](https://github.com/amino997h/board/blob/main/static/js/whiteboard.js): `static/js/whiteboard.js`
- [Page styling](https://github.com/amino997h/board/blob/main/static/css/style.css): `static/css/style.css`

### API orchestration

- [FastAPI routes](https://github.com/amino997h/board/blob/main/main.py): `main.py`
- [Generated media files](https://github.com/amino997h/board/blob/main/main.py): `main.py`

### Generation services

- [Scene planner](https://github.com/amino997h/board/blob/main/services/llm_service.py): `services/llm_service.py`
- [Speech synthesis](https://github.com/amino997h/board/blob/main/services/tts_service.py): `services/tts_service.py`
- [Image search and download](https://github.com/amino997h/board/blob/main/services/image_service.py): `services/image_service.py`

### Configuration

- [Config manager](https://github.com/amino997h/board/blob/main/config_manager.py): `config_manager.py`
- [Saved settings](https://github.com/amino997h/board/blob/main/config.json): `config.json`

### Other components

- **Learner**
- **Configured LLM API**
- **Bing Images**
- **Edge TTS / gTTS**

## Connections

- Learner → Explainer page: opens (evidence: `README.md`)
- Explainer page → Lesson controls: hosts controls
- Lesson controls → FastAPI routes: requests lessons and settings (evidence: `static/js/app.js`)
- FastAPI routes → Config manager: loads and saves settings (evidence: `main.py`)
- Config manager → Saved settings: reads and writes (evidence: `config_manager.py`)
- FastAPI routes → Scene planner: requests scene plan (evidence: `main.py`)
- Scene planner → Configured LLM API: requests completion (evidence: `services/llm_service.py`)
- FastAPI routes → Speech synthesis: synthesizes each scene (evidence: `main.py`)
- Speech synthesis → Edge TTS / gTTS: synthesizes speech (evidence: `services/tts_service.py`)
- FastAPI routes → Image search and download: searches and downloads (evidence: `main.py`)
- Image search and download → Bing Images: searches images (evidence: `services/image_service.py`)
- FastAPI routes → Generated media files: stores generated files (evidence: `main.py`)
- FastAPI routes → Lesson controls: returns enriched plan (evidence: `main.py`)
- Lesson controls → Animated whiteboard: lays out and draws scenes (evidence: `static/js/app.js`)
- Explainer page → Page styling: loads styling
- Lesson controls → Generated media files: plays scene audio (evidence: `static/js/app.js`)
- Animated whiteboard → Generated media files: loads scene images (evidence: `static/js/whiteboard.js`)