---
title: Chrome Neural Colorizer
emoji: π¨
colorFrom: blue
colorTo: indigo
sdk: docker
pinned: false
---
# π¨ Chrome Neural Colorizer
### Bring Black & White History Back to Life with Neural Networks
[](https://python.org)
[](https://react.dev)
[](https://flask.palletsprojects.com)
[](https://opencv.org)
[](LICENSE)
> **Upload a black & white photograph β Watch Neural Networks breathe color into it in seconds.**
---
## β¨ What Is This?
**Chrome Neural Colorizer** is a full-stack Deep Learning web application that uses a pre-trained convolutional neural network to automatically add realistic color to grayscale images.
- Drop a vintage photograph, an old newspaper clipping, or any B&W image.
- The Machine Learning model (trained on millions of images by researchers at UC Berkeley) detects objects and infers their most likely colors.
- An interactive **before/after comparison slider** lets you experience the transformation.
> π **Want to understand every line of code?** Read the [Comprehensive Guide](COMPREHENSIVE_GUIDE.md) β a 1,400+ line beginner-friendly book that teaches you how to build this from absolute zero.
---
## ποΈ Architecture Overview
```
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
β USER'S BROWSER β
β β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββ β
β β React Frontend (Port 5173) β β
β β Drag & Drop βββΊ Before/After Slider βββΊ Save β β
β ββββββββββββββββββββββββββ¬ββββββββββββββββββββββββββ β
β β HTTP POST /api/colorize β
ββββββββββββββββββββββββββββββΌβββββββββββββββββββββββββββββ
β
ββββββββββββββββββββββββββββββΌβββββββββββββββββββββββββββββ
β βΌ β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββ β
β β Flask Backend (Port 5000) β β
β β Receive image bytes βββΊ colorizer.py β β
β ββββββββββββββββββββββββββ¬ββββββββββββββββββββββββββ β
β β β
β ββββββββββββββββββββββββββΌββββββββββββββββββββββββββ β
β β OpenCV DNN + Caffe Model β β
β β BGRβLab βββΊ Predict ab βββΊ Reconstruct βββΊ JPEGβ β
β ββββββββββββββββββββββββββββββββββββββββββββββββββββ β
β PYTHON SERVER β
βββββββββββββββββββββββββββββββββββββββββββββββββββββββββββ
```
---
## π§ The Science Behind It
This app uses a technique from a landmark 2016 research paper:
> **"Colorful Image Colorization"** β Richard Zhang, Phillip Isola, Alexei Efros
> European Conference on Computer Vision (ECCV), 2016
> https://arxiv.org/abs/1603.08511
### How It Works in 3 Steps
**1. Color Space Conversion (BGR β Lab)**
The image is converted from standard BGR to the **Lab color space**, which separates lightness (L) from color information (a = green-red axis, b = blue-yellow axis). A grayscale image IS the L channel β so we already have it.
**2. Neural Network Inference**
The model (a Convolutional Neural Network trained on millions of color photos) takes the L channel and predicts a probability distribution across **313 quantized color bins** for every pixel in the image. This approach produces more vibrant, realistic results than predicting a single value.
**3. Reconstruction**
The predicted `ab` channels are combined with the original `L` channel, then converted back to BGR for display. The result: a full-color image.
---
## π οΈ Tech Stack
| Layer | Technology | Why |
|---|---|---|
| **Neural Model** | Caffe DNN (pre-trained) | State-of-the-art colorization model |
| **Image Processing** | OpenCV 4.x | Industry-standard computer vision |
| **Math** | NumPy | Fast array operations on pixel data |
| **Backend** | Flask 3.x | Lightweight Python web framework |
| **CORS** | flask-cors | Allows frontend-backend communication |
| **Frontend** | React 18 + Vite | Fast, modern component-based UI |
| **Styling** | Vanilla CSS | Glassmorphism dark-mode design |
| **Version Control** | Git + Git LFS | Large model files tracked via LFS |
---
## β‘ Quick Start
### Prerequisites
Make sure these are installed:
- [Python 3.11+](https://python.org/downloads/)
- [Node.js LTS](https://nodejs.org/)
### 1. Clone & Setup
```bash
pip install opencv-python numpy flask flask-cors
python app.py
```
### 2. Frontend
```bash
cd frontend
npm install
npm run dev
```
---
## π€ How to Contribute
Contributions are welcome! Please open a Pull Request on GitHub.
---
## π Learn How It Was Built
π **[Read the Complete Guide β](COMPREHENSIVE_GUIDE.md)**
---
**Made with β€οΈ by [Anannya Vyas](https://github.com/Anannya-Vyas)**
β If this project helped you, please give it a star!