# gclef-cmu/icm-web architecture

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

- Interactive diagram: https://gitdiagram.com/gclef-cmu/icm-web
- Repository: https://github.com/gclef-cmu/icm-web

## Overview

This repository is the source for CMU’s Intro to Computer Music course site and textbook. A learner enters through the site, reads course or book material, and can run notebook cells in-browser; the live-code path boots a browser Python kernel and renders interactive outputs. Other documented branches provide Pyquist documentation, pre-rendered animations, and audio media. The README describes generated course and Pyquist content, while sampled source confirms parts of the live-cell, plotting, animation, and audio behavior; links not supported by that evidence are omitted.

Main entry points: [`README.md`](https://github.com/gclef-cmu/icm-web/blob/main/README.md) (Course site), [`_static/live-cells.js`](https://github.com/gclef-cmu/icm-web/blob/main/_static/live-cells.js) (Live cell runtime), [`content/book`](https://github.com/gclef-cmu/icm-web/tree/main/content/book) (Textbook chapters), [`_ext/icm_showcase.py`](https://github.com/gclef-cmu/icm-web/blob/main/_ext/icm_showcase.py) (Course showcase)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_learning["Course and textbook"]
  node_site["Course site<br/>[README.md]"]
  node_course["Course materials"]
  node_textbook["Textbook chapters"]
  node_templates["Authoring templates"]
  node_pyquistdocs["Pyquist docs"]
  node_splitter["Chapter content source<br/>[split_chapters.py]"]
end

subgraph group_interactive["Interactive learning"]
  node_notebooks["Runnable notebooks"]
  node_livecells["Live cell runtime<br/>[live-cells.js]"]
  node_kernel["Browser Python kernel<br/>[live-cells.js]"]
  node_plotly["Interactive plotting<br/>[icm_plotly.py]"]
  node_pyquist["Pyquist library"]
end

subgraph group_media["Media and authoring"]
  node_audio["Audio playback<br/>[audio-chip.js]"]
  node_audioext["Audio directives<br/>[icm_audio.py]"]
  node_showcase["Course showcase<br/>[icm_showcase.py]"]
  node_animation["Animation clips<br/>[icm_anim.py]"]
end

node_learner(("Learner"))

node_learner -->|"opens"| node_site
node_site -->|"serves"| node_course
node_site -->|"serves"| node_textbook
node_site -->|"serves"| node_templates
node_site -->|"serves"| node_pyquistdocs
node_notebooks -->|"mounts cells"| node_livecells
node_livecells -->|"boots on run"| node_kernel
node_livecells -->|"renders outputs"| node_plotly
node_livecells -->|"installs when used"| node_pyquist
node_audioext -->|"emits controls"| node_audio
node_showcase -->|"uses controls"| node_audioext
node_showcase -->|"wires media"| node_audio
node_splitter -->|"generates chapters"| node_textbook
node_textbook -->|"includes clips"| node_animation

click node_site "https://github.com/gclef-cmu/icm-web/blob/main/README.md"
click node_course "https://github.com/gclef-cmu/icm-web/tree/main/icm-f26"
click node_textbook "https://github.com/gclef-cmu/icm-web/tree/main/content/book"
click node_templates "https://github.com/gclef-cmu/icm-web/tree/main/content/templates"
click node_pyquistdocs "https://github.com/gclef-cmu/icm-web/tree/main/content/pyquist"
click node_notebooks "https://github.com/gclef-cmu/icm-web/tree/main/content/templates/template-interactive"
click node_livecells "https://github.com/gclef-cmu/icm-web/blob/main/_static/live-cells.js"
click node_kernel "https://github.com/gclef-cmu/icm-web/blob/main/_static/live-cells.js"
click node_plotly "https://github.com/gclef-cmu/icm-web/blob/main/tools/icm_plotly/icm_plotly.py"
click node_pyquist "https://github.com/gclef-cmu/icm-web/tree/main/pyquist"
click node_audio "https://github.com/gclef-cmu/icm-web/blob/main/_static/audio-chip.js"
click node_audioext "https://github.com/gclef-cmu/icm-web/blob/main/_ext/icm_audio.py"
click node_showcase "https://github.com/gclef-cmu/icm-web/blob/main/_ext/icm_showcase.py"
click node_animation "https://github.com/gclef-cmu/icm-web/blob/main/tools/icm_anim/icm_anim.py"
click node_splitter "https://github.com/gclef-cmu/icm-web/blob/main/tools/split_chapters.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_site,node_course,node_textbook,node_templates,node_pyquistdocs,node_splitter toneBlue
class node_notebooks,node_livecells,node_kernel,node_plotly,node_pyquist toneAmber
class node_audio,node_audioext,node_showcase,node_animation toneMint
class node_learner toneIndigo
```

## Components

### Course and textbook

- [Course site](https://github.com/gclef-cmu/icm-web/blob/main/README.md): `README.md`
- [Course materials](https://github.com/gclef-cmu/icm-web/tree/main/icm-f26): `icm-f26`
- [Textbook chapters](https://github.com/gclef-cmu/icm-web/tree/main/content/book): `content/book`
- [Authoring templates](https://github.com/gclef-cmu/icm-web/tree/main/content/templates): `content/templates`
- [Pyquist docs](https://github.com/gclef-cmu/icm-web/tree/main/content/pyquist): `content/pyquist`
- [Chapter content source](https://github.com/gclef-cmu/icm-web/blob/main/tools/split_chapters.py): `tools/split_chapters.py`

### Interactive learning

- [Runnable notebooks](https://github.com/gclef-cmu/icm-web/tree/main/content/templates/template-interactive): `content/templates/template-interactive`
- [Live cell runtime](https://github.com/gclef-cmu/icm-web/blob/main/_static/live-cells.js): `_static/live-cells.js`
- [Browser Python kernel](https://github.com/gclef-cmu/icm-web/blob/main/_static/live-cells.js): `_static/live-cells.js`
- [Interactive plotting](https://github.com/gclef-cmu/icm-web/blob/main/tools/icm_plotly/icm_plotly.py): `tools/icm_plotly/icm_plotly.py`
- [Pyquist library](https://github.com/gclef-cmu/icm-web/tree/main/pyquist): `pyquist`

### Media and authoring

- [Audio playback](https://github.com/gclef-cmu/icm-web/blob/main/_static/audio-chip.js): `_static/audio-chip.js`
- [Audio directives](https://github.com/gclef-cmu/icm-web/blob/main/_ext/icm_audio.py): `_ext/icm_audio.py`
- [Course showcase](https://github.com/gclef-cmu/icm-web/blob/main/_ext/icm_showcase.py): `_ext/icm_showcase.py`
- [Animation clips](https://github.com/gclef-cmu/icm-web/blob/main/tools/icm_anim/icm_anim.py): `tools/icm_anim/icm_anim.py`

### Other components

- **Learner**

## Connections

- Learner → Course site: opens
- Course site → Course materials: serves
- Course site → Textbook chapters: serves
- Course site → Authoring templates: serves
- Course site → Pyquist docs: serves
- Runnable notebooks → Live cell runtime: mounts cells
- Live cell runtime → Browser Python kernel: boots on run
- Live cell runtime → Interactive plotting: renders outputs
- Live cell runtime → Pyquist library: installs when used
- Audio directives → Audio playback: emits controls
- Course showcase → Audio directives: uses controls
- Course showcase → Audio playback: wires media
- Chapter content source → Textbook chapters: generates chapters
- Textbook chapters → Animation clips: includes clips