# bunyaveedeechuay/automatic-panorama-stitcher architecture

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

- Interactive diagram: https://gitdiagram.com/bunyaveedeechuay/automatic-panorama-stitcher
- Repository: https://github.com/bunyaveedeechuay/automatic-panorama-stitcher

## Overview

Panorama Stitcher is a browser-only app: users add and reorder photos, stitch them sequentially, then download a PNG. Its main workflow loads and resizes each image, finds ORB features, matches them, estimates homographies, and warps/composites each pair. The graph reflects documented capabilities and the sampled orchestration; some UI wiring and OpenCV loading details were not present in the excerpts, so uncertain links are omitted.

Main entry points: [`app.js`](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js) (Sequential Stitching), [`index.html`](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/index.html) (Browser UI)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_ui["Photo Input"]
  node_page["Browser UI<br/>[index.html]"]
  node_photo_input["Photo Input<br/>[app.js]"]
  node_frame_state["Frame State<br/>[app.js]"]
  node_filmstrip["Filmstrip<br/>[app.js]"]
  node_stitch_control["Stitch Control<br/>[app.js]"]
end

subgraph group_cv["Stitch Pipeline"]
  node_image_load["Image Load/Resize<br/>[app.js]"]
  node_orb["ORB Features<br/>[app.js]"]
  node_matching["Feature Matching<br/>[app.js]"]
  node_homography["Homography<br/>[app.js]"]
  node_warp_composite["Warp &amp; Composite<br/>[app.js]"]
  node_sequence["Sequential Stitching<br/>[app.js]"]
end

subgraph group_result["Result Export"]
  node_output_canvas["Output Canvas<br/>[index.html]"]
  node_png_download["PNG Download<br/>[app.js]"]
end

node_user(("User"))
node_opencv["OpenCV.js"]

node_user -->|"uses"| node_page
node_page -->|"accepts files"| node_photo_input
node_photo_input -->|"adds frames"| node_frame_state
node_frame_state -->|"renders frames"| node_filmstrip
node_user -->|"reorders frames"| node_filmstrip
node_user -->|"starts stitching"| node_stitch_control
node_stitch_control -->|"invokes"| node_sequence
node_sequence -->|"loads frames"| node_image_load
node_image_load -->|"creates Mats"| node_opencv
node_sequence -->|"stitches each pair"| node_warp_composite
node_warp_composite -->|"detects features"| node_orb
node_orb -->|"provides descriptors"| node_matching
node_matching -->|"provides matches"| node_homography
node_homography -->|"provides transform"| node_warp_composite
node_warp_composite -->|"uses CV operations"| node_opencv
node_sequence -->|"displays result"| node_output_canvas
node_output_canvas -->|"exports PNG"| node_png_download
node_user -->|"downloads"| node_png_download

click node_page "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/index.html"
click node_photo_input "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js"
click node_frame_state "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js"
click node_filmstrip "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js"
click node_stitch_control "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js"
click node_image_load "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js"
click node_orb "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js"
click node_matching "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js"
click node_homography "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js"
click node_warp_composite "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js"
click node_sequence "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js"
click node_output_canvas "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/index.html"
click node_png_download "https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js"

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_photo_input,node_frame_state,node_filmstrip,node_stitch_control,node_user toneBlue
class node_image_load,node_orb,node_matching,node_homography,node_warp_composite,node_sequence toneAmber
class node_output_canvas,node_png_download toneMint
class node_opencv toneIndigo
```

## Components

### Photo Input

- [Browser UI](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/index.html): `index.html`
- [Photo Input](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js): `app.js`
- [Frame State](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js): `app.js`
- [Filmstrip](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js): `app.js`
- [Stitch Control](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js): `app.js`

### Stitch Pipeline

- [Image Load/Resize](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js): `app.js`
- [ORB Features](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js): `app.js`
- [Feature Matching](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js): `app.js`
- [Homography](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js): `app.js`
- [Warp & Composite](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js): `app.js`
- [Sequential Stitching](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js): `app.js`

### Result Export

- [Output Canvas](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/index.html): `index.html`
- [PNG Download](https://github.com/bunyaveedeechuay/automatic-panorama-stitcher/blob/main/app.js): `app.js`

### Other components

- **User**
- **OpenCV.js**

## Connections

- User → Browser UI: uses
- Browser UI → Photo Input: accepts files
- Photo Input → Frame State: adds frames
- Frame State → Filmstrip: renders frames
- User → Filmstrip: reorders frames
- User → Stitch Control: starts stitching
- Stitch Control → Sequential Stitching: invokes
- Sequential Stitching → Image Load/Resize: loads frames
- Image Load/Resize → OpenCV.js: creates Mats
- Sequential Stitching → Warp & Composite: stitches each pair
- Warp & Composite → ORB Features: detects features
- ORB Features → Feature Matching: provides descriptors
- Feature Matching → Homography: provides matches
- Homography → Warp & Composite: provides transform
- Warp & Composite → OpenCV.js: uses CV operations
- Sequential Stitching → Output Canvas: displays result
- Output Canvas → PNG Download: exports PNG
- User → PNG Download: downloads