# trumanchho/omr-jianpu-melody-generator architecture

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

- Interactive diagram: https://gitdiagram.com/trumanchho/omr-jianpu-melody-generator
- Repository: https://github.com/trumanchho/omr-jianpu-melody-generator

## Overview

OMR Melody Generator turns uploaded Jianpu sheet images into editable symbol tokens and downloadable, playable MIDI. The principal workflow runs from image upload through server-side segmentation and CNN classification, then token editing and MIDI generation. The README also describes training, playback, and image preview. Source excerpts establish the upload and generation calls; some UI features are documented but their implementation was not sampled.

Main entry points: [`flask-server/server.py`](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/server.py) (OMR endpoint), [`omr-project/src/components/CharGrid.tsx`](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/components/CharGrid.tsx) (Symbol editor), [`omr-project/src/components/ImageList.tsx`](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/components/ImageList.tsx) (Image uploads), [`omr-project/src/App.tsx`](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/App.tsx) (Scanner app)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_web["Web application"]
  node_app["Scanner app<br/>[App.tsx]"]
  node_uploads["Image uploads<br/>[ImageList.tsx]"]
  node_editor["Symbol editor<br/>[CharGrid.tsx]"]
  node_gridstate["Symbol grid state"]
  node_tokenstate["Token state<br/>[tokenContext.tsx]"]
  node_predictstate["Prediction state"]
end

subgraph group_omr["Recognition backend"]
  node_api["OMR endpoint<br/>[server.py]"]
  node_segment["Image segmentation<br/>[generate.py]"]
  node_classifier["Symbol classifier<br/>[generate.py]"]
  node_classes["Class labels<br/>[variables.py]"]
end

subgraph group_music["Melody output"]
  node_tokens["Token parsing"]
  node_midi["MIDI generation"]
  node_midifile["Generated MIDI"]
  node_playback["Melody playback<br/>[CharGrid.tsx]"]
end

subgraph group_model["Model training"]
  node_model["Trained CNN<br/>[jianpu.model.keras]"]
  node_training["Model training<br/>[train.py]"]
end

node_user(("Musician"))

node_user -->|"uploads score"| node_uploads
node_app -->|"renders"| node_uploads
node_app -->|"renders"| node_editor
node_uploads -->|"posts image"| node_api
node_api -->|"segments image"| node_segment
node_api -->|"returns preview"| node_uploads
node_api -->|"returns symbols"| node_editor
node_editor -->|"requests predictions"| node_api
node_api -->|"classifies symbols"| node_classifier
node_classifier -->|"uses labels"| node_classes
node_classifier -->|"loads model"| node_model
node_training -->|"uses labels"| node_classes
node_training -->|"trains model"| node_model
node_api -->|"parses tokens"| node_tokens
node_api -->|"generates MIDI"| node_midi
node_tokens -->|"provides parsed tokens"| node_midi
node_midi -->|"writes file"| node_midifile
node_api -->|"returns predictions"| node_editor
node_editor -->|"downloads MIDI"| node_midifile
node_editor -->|"plays melody"| node_playback
node_app -->|"provides state"| node_gridstate
node_app -->|"provides state"| node_tokenstate
node_app -->|"provides state"| node_predictstate
node_uploads -->|"updates grid"| node_gridstate
node_uploads -->|"updates tokens"| node_tokenstate
node_editor -->|"reads and updates"| node_gridstate
node_editor -->|"reads and updates"| node_tokenstate
node_editor -->|"tracks prediction"| node_predictstate

click node_app "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/App.tsx"
click node_uploads "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/components/ImageList.tsx"
click node_editor "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/components/CharGrid.tsx"
click node_gridstate "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/contexts/charGridContext.tsx"
click node_tokenstate "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/contexts/tokenContext.tsx"
click node_predictstate "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/contexts/isPredictingContext.tsx"
click node_api "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/server.py"
click node_segment "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/generate.py"
click node_classifier "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/generate.py"
click node_classes "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/variables.py"
click node_model "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/jianpu.model.keras"
click node_training "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/train.py"
click node_tokens "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/melody_generator.py"
click node_midi "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/melody_generator.py"
click node_playback "https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/components/CharGrid.tsx"

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_app,node_uploads,node_editor,node_gridstate,node_tokenstate,node_predictstate toneBlue
class node_api,node_segment,node_classifier,node_classes toneAmber
class node_tokens,node_midi,node_midifile,node_playback toneMint
class node_model,node_training toneRose
class node_user toneIndigo
```

## Components

### Web application

- [Scanner app](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/App.tsx): `omr-project/src/App.tsx`
- [Image uploads](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/components/ImageList.tsx): `omr-project/src/components/ImageList.tsx`
- [Symbol editor](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/components/CharGrid.tsx): `omr-project/src/components/CharGrid.tsx`
- [Symbol grid state](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/contexts/charGridContext.tsx): `omr-project/src/contexts/charGridContext.tsx`
- [Token state](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/contexts/tokenContext.tsx): `omr-project/src/contexts/tokenContext.tsx`
- [Prediction state](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/contexts/isPredictingContext.tsx): `omr-project/src/contexts/isPredictingContext.tsx`

### Recognition backend

- [OMR endpoint](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/server.py): `flask-server/server.py`
- [Image segmentation](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/generate.py): `flask-server/generate.py`
- [Symbol classifier](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/generate.py): `flask-server/generate.py`
- [Class labels](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/variables.py): `flask-server/variables.py`

### Melody output

- [Token parsing](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/melody_generator.py): `flask-server/melody_generator.py`
- [MIDI generation](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/melody_generator.py): `flask-server/melody_generator.py`
- **Generated MIDI**
- [Melody playback](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/omr-project/src/components/CharGrid.tsx): `omr-project/src/components/CharGrid.tsx`

### Model training

- [Trained CNN](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/jianpu.model.keras): `flask-server/jianpu.model.keras`
- [Model training](https://github.com/trumanchho/omr-jianpu-melody-generator/blob/main/flask-server/train.py): `flask-server/train.py`

### Other components

- **Musician**

## Connections

- Musician → Image uploads: uploads score (evidence: `omr-project/src/components/ImageList.tsx`)
- Scanner app → Image uploads: renders (evidence: `omr-project/src/App.tsx`)
- Scanner app → Symbol editor: renders (evidence: `omr-project/src/App.tsx`)
- Image uploads → OMR endpoint: posts image (evidence: `omr-project/src/components/ImageList.tsx`)
- OMR endpoint → Image segmentation: segments image (evidence: `flask-server/server.py`)
- OMR endpoint → Image uploads: returns preview (evidence: `flask-server/server.py`)
- OMR endpoint → Symbol editor: returns symbols (evidence: `flask-server/server.py`)
- Symbol editor → OMR endpoint: requests predictions (evidence: `omr-project/src/components/CharGrid.tsx`)
- OMR endpoint → Symbol classifier: classifies symbols (evidence: `flask-server/server.py`)
- Symbol classifier → Class labels: uses labels (evidence: `flask-server/generate.py`)
- Symbol classifier → Trained CNN: loads model (evidence: `README.md`)
- Model training → Class labels: uses labels (evidence: `flask-server/train.py`)
- Model training → Trained CNN: trains model (evidence: `README.md`)
- OMR endpoint → Token parsing: parses tokens (evidence: `flask-server/server.py`)
- OMR endpoint → MIDI generation: generates MIDI (evidence: `flask-server/server.py`)
- Token parsing → MIDI generation: provides parsed tokens (evidence: `flask-server/server.py`)
- MIDI generation → Generated MIDI: writes file (evidence: `flask-server/melody_generator.py`)
- OMR endpoint → Symbol editor: returns predictions (evidence: `omr-project/src/components/CharGrid.tsx`)
- Symbol editor → Generated MIDI: downloads MIDI (evidence: `omr-project/src/components/CharGrid.tsx`)
- Symbol editor → Melody playback: plays melody (evidence: `README.md`)
- Scanner app → Symbol grid state: provides state (evidence: `omr-project/src/App.tsx`)
- Scanner app → Token state: provides state (evidence: `omr-project/src/App.tsx`)
- Scanner app → Prediction state: provides state (evidence: `omr-project/src/App.tsx`)
- Image uploads → Symbol grid state: updates grid (evidence: `omr-project/src/components/ImageList.tsx`)
- Image uploads → Token state: updates tokens (evidence: `omr-project/src/components/ImageList.tsx`)
- Symbol editor → Symbol grid state: reads and updates (evidence: `omr-project/src/components/CharGrid.tsx`)
- Symbol editor → Token state: reads and updates (evidence: `omr-project/src/components/CharGrid.tsx`)
- Symbol editor → Prediction state: tracks prediction (evidence: `omr-project/src/components/CharGrid.tsx`)