# sb2702/free-ai-video-upscaler architecture

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

- Interactive diagram: https://gitdiagram.com/sb2702/free-ai-video-upscaler
- Repository: https://github.com/sb2702/free-ai-video-upscaler

## Overview

Free AI Video Upscaler is a browser-based tool for selecting a video, previewing it, choosing an AI upscaling network, processing it locally, and downloading the result. The main thread manages the interface and communicates with a worker; the worker initializes WebSR and delegates video processing to the active pipeline. That pipeline demuxes video, decodes and upscales frames, re-encodes them, and muxes MP4 output, with audio packets and output storage handled alongside video. The worker also supports pause/resume and reports progress. The graph follows the sampled active processor; the separate MediaBunny processor is an alternate implementation, not an asserted fallback path.

Main entry points: [`src/worker.ts`](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/worker.ts) (Processing Worker), [`src/processors/pipeline-processor.ts`](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts) (Pipeline Processor), [`src/index.ts`](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/index.ts) (App Interface), [`src/processors/in-memory-storage.ts`](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/in-memory-storage.ts) (Memory Storage)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_interface["User Interface"]
  node_ui["App Interface<br/>[index.ts]"]
  node_compare["Preview Compare"]
end

subgraph group_worker["Worker Control"]
  node_messages["Worker Messages<br/>[worker-messages.ts]"]
  node_worker["Processing Worker<br/>[worker.ts]"]
  node_weights["AI Weights"]
end

subgraph group_processing["Video Processing"]
  node_websr["WebSR Runtime"]
  node_pipeline["Pipeline Processor"]
  node_demux["Video Demux"]
  node_decode["Frame Decode"]
  node_upscale["AI Upscale"]
  node_encode["Video Encode"]
  node_audio["Audio Packets"]
  node_mux["MP4 Mux"]
  node_demuxlib["WebDemuxer"]
  node_mediabunny["MediaBunny"]
end

subgraph group_output["Output"]
  node_storage["Memory Storage"]
  node_browser["Browser Files"]
  node_result["Upscaled Video"]
end

node_user(("Video User"))

node_user -->|"selects video"| node_ui
node_ui -->|"mounts preview"| node_compare
node_ui -->|"sends commands"| node_worker
node_worker -->|"reports status"| node_ui
node_ui -->|"uses message types"| node_messages
node_worker -->|"uses message types"| node_messages
node_worker -->|"loads weights"| node_weights
node_worker -->|"initializes runtime"| node_websr
node_worker -->|"switches network"| node_websr
node_worker -->|"starts processing"| node_pipeline
node_pipeline -->|"loads input"| node_demuxlib
node_demux -->|"reads tracks"| node_demuxlib
node_pipeline -->|"demuxes video"| node_demux
node_demux -->|"streams chunks"| node_decode
node_decode -->|"yields frames"| node_upscale
node_upscale -->|"renders frames"| node_websr
node_upscale -->|"passes frames"| node_encode
node_encode -->|"writes packets"| node_mux
node_pipeline -->|"handles audio"| node_audio
node_audio -->|"adds audio packets"| node_mux
node_pipeline -->|"creates MP4 output"| node_mux
node_mux -->|"writes MP4"| node_mediabunny
node_pipeline -->|"stores output chunks"| node_storage
node_pipeline -->|"writes selected file"| node_browser
node_storage -->|"builds Blob"| node_result
node_browser -->|"saves file"| node_result
node_worker -->|"returns completed Blob"| node_ui
node_ui -->|"provides download"| node_result

click node_ui "https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/index.ts"
click node_messages "https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/types/worker-messages.ts"
click node_worker "https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/worker.ts"
click node_weights "https://github.com/sb2702/free-ai-video-upscaler/tree/main/src/weights"
click node_pipeline "https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts"
click node_demux "https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts"
click node_decode "https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts"
click node_upscale "https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts"
click node_encode "https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts"
click node_audio "https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts"
click node_mux "https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts"
click node_storage "https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/in-memory-storage.ts"

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_ui,node_compare,node_user toneBlue
class node_messages,node_worker,node_weights toneAmber
class node_websr,node_pipeline,node_demux,node_decode,node_upscale,node_encode,node_audio,node_mux,node_demuxlib,node_mediabunny toneMint
class node_storage,node_browser,node_result toneRose
```

## Components

### User Interface

- [App Interface](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/index.ts): `src/index.ts`
- **Preview Compare**

### Worker Control

- [Worker Messages](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/types/worker-messages.ts): `src/types/worker-messages.ts`
- [Processing Worker](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/worker.ts): `src/worker.ts`
- [AI Weights](https://github.com/sb2702/free-ai-video-upscaler/tree/main/src/weights): `src/weights`

### Video Processing

- **WebSR Runtime**
- [Pipeline Processor](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts): `src/processors/pipeline-processor.ts`
- [Video Demux](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts): `src/processors/pipeline-processor.ts`
- [Frame Decode](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts): `src/processors/pipeline-processor.ts`
- [AI Upscale](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts): `src/processors/pipeline-processor.ts`
- [Video Encode](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts): `src/processors/pipeline-processor.ts`
- [Audio Packets](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts): `src/processors/pipeline-processor.ts`
- [MP4 Mux](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/pipeline-processor.ts): `src/processors/pipeline-processor.ts`
- **WebDemuxer**
- **MediaBunny**

### Output

- [Memory Storage](https://github.com/sb2702/free-ai-video-upscaler/blob/main/src/processors/in-memory-storage.ts): `src/processors/in-memory-storage.ts`
- **Browser Files**
- **Upscaled Video**

### Other components

- **Video User**

## Connections

- Video User → App Interface: selects video
- App Interface → Preview Compare: mounts preview
- App Interface → Processing Worker: sends commands
- Processing Worker → App Interface: reports status
- App Interface → Worker Messages: uses message types
- Processing Worker → Worker Messages: uses message types
- Processing Worker → AI Weights: loads weights
- Processing Worker → WebSR Runtime: initializes runtime
- Processing Worker → WebSR Runtime: switches network
- Processing Worker → Pipeline Processor: starts processing
- Pipeline Processor → WebDemuxer: loads input
- Video Demux → WebDemuxer: reads tracks
- Pipeline Processor → Video Demux: demuxes video
- Video Demux → Frame Decode: streams chunks
- Frame Decode → AI Upscale: yields frames
- AI Upscale → WebSR Runtime: renders frames
- AI Upscale → Video Encode: passes frames
- Video Encode → MP4 Mux: writes packets
- Pipeline Processor → Audio Packets: handles audio
- Audio Packets → MP4 Mux: adds audio packets
- Pipeline Processor → MP4 Mux: creates MP4 output
- MP4 Mux → MediaBunny: writes MP4
- Pipeline Processor → Memory Storage: stores output chunks
- Pipeline Processor → Browser Files: writes selected file
- Memory Storage → Upscaled Video: builds Blob
- Browser Files → Upscaled Video: saves file
- Processing Worker → App Interface: returns completed Blob
- App Interface → Upscaled Video: provides download