Cine Viewer

A web-based cinematography tool for professional image analysis and evaluation.

Live Demo

Features

Analysis Tools

• False Color: Industry-standard exposure analysis — ARRI/Canon, Sony, and Blackmagic profiles
• Vectorscope: Chrominance distribution plot with R, G, B, Cy, Mg, Yl reference markers
• Histogram: Real-time RGB histogram with reference lines
• Color Palette: Extract up to 8 dominant colors using k-means clustering in LAB color space
• Contrast Ratio: Dynamic range measurement via Rec. 709 luminance (1st/99th percentile)

Creative Tools

• LUT Import: Apply .cube LUTs (1D and 3D) with WebGL2 acceleration and JS fallback
• Exposure Compensation: ±1 stop in 1/3-stop increments
• Film Grain: 8mm, 16mm, 35mm, and 35mm Reversal overlays
• Aspect Ratio Overlay: 16:9, 9:16, 1:1, 2:1, 2.35:1, 4:3, and custom ratios with reframe slider

Composition Overlays

• Center Markers: Standard, Small, and Square styles
• Thirds Grid: Rule of thirds with adjustable line thickness (1–5px)

Formats Supported

• PNG, JPG/JPEG, BMP, WebP, TIFF (via UTIF.js)

Privacy

All processing runs entirely in your browser. Images are never uploaded to any server.

Installation

Cloudflare Pages / Static Hosting

No build step required. Point your host at the public/ directory.

Docker (Self-Hosting)

Pull the prebuilt image:

docker run -d -p 8080:8080 --name cine-viewer ghcr.io/retrovisuals/cine-viewer-oss:latest

Or build from source:

git clone https://github.com/RetroVisuals/cine-viewer-oss.git
cd cine-viewer-oss
docker build -t cine-viewer .
docker run -d -p 8080:8080 --name cine-viewer cine-viewer

Or with Docker Compose — see DOCKER_DEPLOYMENT.md.

Manual / Local

git clone https://github.com/RetroVisuals/cine-viewer-oss.git
cd cine-viewer-oss
pip install -r requirements.txt
cd src
python -m cineviewer.app

App serves on http://localhost:8080.

Architecture

Processing Model

All image compute runs in the browser — Flask serves static files only.

Task	Technology
Image decode	Canvas getImageData() / UTIF.js (TIFF)
Histogram, vectorscope, false color, exposure	Pure JavaScript on ImageData
LUT application	WebGL2 fragment shader + JS trilinear fallback
Color palette	Web Worker (k-means in LAB color space, Blob URL)

Stack

• Backend: Flask + Waitress — static file server only
• Frontend: Vanilla JavaScript, Canvas API, WebGL2, Web Workers
• No build tools: no bundlers, no transpilers, no npm

Project Structure

cine-viewer/
├── public/                   # Static site root
│   ├── index.html
│   └── static/
│       ├── css/style.css
│       ├── images/
│       ├── js/
│       │   ├── app.js        # All frontend logic
│       │   └── utif.js       # TIFF decoder (vendored)
│       └── version.json
├── src/cineviewer/           # Flask app (static serving only)
│   ├── app.py
│   ├── VERSION
│   └── __init__.py
├── Dockerfile
├── wrangler.toml             # Cloudflare Pages config
├── example-compose.yml
└── requirements.txt

Dependencies

Python (server)

• Flask==3.0.0
• werkzeug>=3.0.0
• waitress>=2.1.2
• flask-cors>=4.0.0

JavaScript (browser, no install)

• utif.js — vendored TIFF decoder (MIT)

Browser Support

Requires a modern browser with:

• Canvas API
• WebGL2 (LUT application — falls back to JS if unavailable)
• Web Workers
• File API

Tested on Chrome/Edge 90+, Firefox 88+, Safari 14+.

Version History

See CHANGELOG.md.

License

Released under the MIT License.

Author

Reid Petro Cinematographer & Developer reidpetro.com