ImageColoriser: Flask app and colorization models for Hugging Face Space

.dockerignore

@@ -0,0 +1,9 @@
+.git
+.gitignore
+**/__pycache__
+**/*.pyc
+uploads
+outputs
+.env
+*.md
+ImageColoriser

.gitignore

@@ -0,0 +1,13 @@
+uploads/
+outputs/
+imgs/
+imgs_out/
+/saved_eccv16.png
+/saved_siggraph17.png
+ImageColoriser/
+__pycache__/
+*.py[cod]
+*$py.class
+.env
+.venv/
+venv/

Dockerfile

@@ -0,0 +1,23 @@
+# Hugging Face Docker Space: https://huggingface.co/docs/hub/spaces-sdks-docker
+FROM python:3.10-slim
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    libgl1 \
+    libglib2.0-0 \
+    && rm -rf /var/lib/apt/lists/*
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+WORKDIR /app
+
+COPY --chown=user requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade pip \
+    && pip install --no-cache-dir -r requirements.txt \
+        --index-url https://download.pytorch.org/whl/cpu \
+        --extra-index-url https://pypi.org/simple
+
+COPY --chown=user . /app
+
+EXPOSE 7860
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "1", "--threads", "2", "--timeout", "180", "app:app"]

LICENSE

@@ -0,0 +1,23 @@
+Copyright (c) 2016, Richard Zhang, Phillip Isola, Alexei A. Efros
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

README.md

@@ -0,0 +1,73 @@
+---
+title: ImageColoriser
+emoji: 🎨
+colorFrom: gray
+colorTo: red
+sdk: docker
+pinned: false
+license: apache-2.0
+short_description: Colorize B&W photos with ECCV16 and SIGGRAPH17.
+---
+
+<!--<h3><b>Colorful Image Colorization</b></h3>-->
+## <b>Colorful Image Colorization</b> [[Project Page]](http://richzhang.github.io/colorization/) <br>
+[Richard Zhang](https://richzhang.github.io/), [Phillip Isola](http://web.mit.edu/phillipi/), [Alexei A. Efros](http://www.eecs.berkeley.edu/~efros/). In [ECCV, 2016](http://arxiv.org/pdf/1603.08511.pdf).
+
+**+ automatic colorization functionality for Real-Time User-Guided Image Colorization with Learned Deep Priors, SIGGRAPH 2017!**
+
+**[Sept20 Update]** Since it has been 3-4 years, I converted this repo to support minimal test-time usage in PyTorch. I also added our SIGGRAPH 2017 (it's an interactive method but can also do automatic). See the [Caffe branch](https://github.com/richzhang/colorization/tree/caffe) for the original release.
+
+![Teaser Image](http://richzhang.github.io/colorization/resources/images/teaser4.jpg)
+
+**Clone the repository; install dependencies**
+
+```
+git clone https://github.com/richzhang/colorization.git
+pip install requirements.txt
+```
+
+**Colorize!** This script will colorize an image. The results should match the images in the `imgs_out` folder.
+
+```
+python demo_release.py -i imgs/ansel_adams3.jpg
+```
+
+**Model loading in Python** The following loads pretrained colorizers. See [demo_release.py](demo_release.py) for some details on how to run the model. There are some pre and post-processing steps: convert to Lab space, resize to 256x256, colorize, and concatenate to the original full resolution, and convert to RGB.
+
+```python
+import colorizers
+colorizer_eccv16 = colorizers.eccv16().eval()
+colorizer_siggraph17 = colorizers.siggraph17().eval()
+```
+
+### Original implementation (Caffe branch)
+
+The original implementation contained train and testing, our network and AlexNet (for representation learning tests), as well as representation learning tests. It is in Caffe and is no longer supported. Please see the [caffe](https://github.com/richzhang/colorization/tree/caffe) branch for it.
+
+### Citation ###
+
+If you find these models useful for your resesarch, please cite with these bibtexs.
+
+```
+@inproceedings{zhang2016colorful,
+  title={Colorful Image Colorization},
+  author={Zhang, Richard and Isola, Phillip and Efros, Alexei A},
+  booktitle={ECCV},
+  year={2016}
+}
+
+@article{zhang2017real,
+  title={Real-Time User-Guided Image Colorization with Learned Deep Priors},
+  author={Zhang, Richard and Zhu, Jun-Yan and Isola, Phillip and Geng, Xinyang and Lin, Angela S and Yu, Tianhe and Efros, Alexei A},
+  journal={ACM Transactions on Graphics (TOG)},
+  volume={9},
+  number={4},
+  year={2017},
+  publisher={ACM}
+}
+```
+
+### Misc ###
+Contact Richard Zhang at rich.zhang at eecs.berkeley.edu for any questions or comments.
+
+Space metadata: [Hugging Face Spaces config reference](https://huggingface.co/docs/hub/spaces-config-reference)

app.py

@@ -0,0 +1,114 @@
+from flask import Flask, render_template, request, send_file, redirect, url_for
+import os
+import uuid
+from colorizers import *
+import torch
+from colorizers.util import load_img, preprocess_img, postprocess_tens
+from PIL import Image
+import numpy as np
+import gc
+
+# Disable CUDA to save memory on Render
+torch.cuda.is_available = lambda: False
+
+UPLOAD_FOLDER = 'uploads'
+OUTPUT_FOLDER = 'outputs'
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'bmp'}
+
+app = Flask(__name__)
+app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
+app.config['OUTPUT_FOLDER'] = OUTPUT_FOLDER
+
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(OUTPUT_FOLDER, exist_ok=True)
+
+# Load models once at startup (CPU only)
+print("Loading colorization models...")
+colorizer_eccv16 = eccv16(pretrained=True).eval()
+colorizer_siggraph17 = siggraph17(pretrained=True).eval()
+print("Models loaded successfully!")
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    if request.method == 'POST':
+        files = request.files.getlist('files')
+        
+        if not files or len(files) == 0:
+            return render_template('index.html', error='No files selected')
+        
+        results = []
+        for file in files:
+            if file.filename == '':
+                continue
+            if file and allowed_file(file.filename):
+                filename = str(uuid.uuid4()) + os.path.splitext(file.filename)[1]
+                filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
+                file.save(filepath)
+                
+                try:
+                    out_paths = colorize_and_save(filepath, filename)
+                    results.append({
+                        'orig_img': url_for('uploaded_file', filename=filename),
+                        'eccv16_img': url_for('output_file', filename=os.path.basename(out_paths['eccv16'])),
+                        'siggraph17_img': url_for('output_file', filename=os.path.basename(out_paths['siggraph17'])),
+                        'filename': os.path.splitext(filename)[0]
+                    })
+                except Exception as e:
+                    print(f"Error processing {filename}: {str(e)}")
+                    continue
+            else:
+                continue
+        
+        if len(results) == 0:
+            return render_template('index.html', error='No valid files to process')
+        
+        return render_template('result.html', images=results, total_count=len(results))
+    
+    return render_template('index.html')
+
+@app.route('/uploads/<filename>')
+def uploaded_file(filename):
+    return send_file(os.path.join(app.config['UPLOAD_FOLDER'], filename))
+
+@app.route('/outputs/<filename>')
+def output_file(filename):
+    return send_file(os.path.join(app.config['OUTPUT_FOLDER'], filename))
+
+def colorize_and_save(img_path, filename):
+    global colorizer_eccv16, colorizer_siggraph17
+    img = load_img(img_path)
+    (tens_l_orig, tens_l_rs) = preprocess_img(img, HW=(256,256))
+    
+    # Colorize with both models (tens_l_rs is already a PyTorch tensor)
+    with torch.no_grad():
+        out_ab_eccv16 = colorizer_eccv16(tens_l_rs)
+        out_ab_siggraph17 = colorizer_siggraph17(tens_l_rs)
+    
+    out_img_eccv16 = postprocess_tens(tens_l_orig, out_ab_eccv16.cpu())
+    out_img_siggraph17 = postprocess_tens(tens_l_orig, out_ab_siggraph17.cpu())
+    
+    # Convert to uint8 and save with PIL
+    base_filename = os.path.splitext(filename)[0]
+    
+    out_img_eccv16_uint8 = (np.clip(out_img_eccv16, 0, 1) * 255).astype(np.uint8)
+    eccv16_path = os.path.join(OUTPUT_FOLDER, f'{base_filename}_eccv16.png')
+    Image.fromarray(out_img_eccv16_uint8).save(eccv16_path)
+    
+    out_img_siggraph17_uint8 = (np.clip(out_img_siggraph17, 0, 1) * 255).astype(np.uint8)
+    siggraph17_path = os.path.join(OUTPUT_FOLDER, f'{base_filename}_siggraph17.png')
+    Image.fromarray(out_img_siggraph17_uint8).save(siggraph17_path)
+    
+    # Clean up memory
+    del tens_l_rs, out_ab_eccv16, out_ab_siggraph17, img, tens_l_orig
+    del out_img_eccv16, out_img_siggraph17, out_img_eccv16_uint8, out_img_siggraph17_uint8
+    gc.collect()
+    
+    return {'eccv16': eccv16_path, 'siggraph17': siggraph17_path}
+
+if __name__ == '__main__':
+    # Support both Render (PORT env var) and HuggingFace Spaces (default 7860)
+    port = int(os.getenv('PORT', os.getenv('SERVER_PORT', 7860)))
+    app.run(host='0.0.0.0', port=port, debug=False)

colorizers/__init__.py

@@ -0,0 +1,6 @@
+
+from .base_color import *
+from .eccv16 import *
+from .siggraph17 import *
+from .util import *
+

colorizers/base_color.py

@@ -0,0 +1,24 @@
+
+import torch
+from torch import nn
+
+class BaseColor(nn.Module):
+	def __init__(self):
+		super(BaseColor, self).__init__()
+
+		self.l_cent = 50.
+		self.l_norm = 100.
+		self.ab_norm = 110.
+
+	def normalize_l(self, in_l):
+		return (in_l-self.l_cent)/self.l_norm
+
+	def unnormalize_l(self, in_l):
+		return in_l*self.l_norm + self.l_cent
+
+	def normalize_ab(self, in_ab):
+		return in_ab/self.ab_norm
+
+	def unnormalize_ab(self, in_ab):
+		return in_ab*self.ab_norm
+

colorizers/eccv16.py

@@ -0,0 +1,104 @@
+
+import torch
+import torch.nn as nn
+import numpy as np
+
+from .base_color import *
+
+class ECCVGenerator(BaseColor):
+    def __init__(self, norm_layer=nn.BatchNorm2d):
+        super(ECCVGenerator, self).__init__()
+
+        model1=[nn.Conv2d(1, 64, kernel_size=3, stride=1, padding=1, bias=True),]
+        model1+=[nn.ReLU(True),]
+        model1+=[nn.Conv2d(64, 64, kernel_size=3, stride=2, padding=1, bias=True),]
+        model1+=[nn.ReLU(True),]
+        model1+=[norm_layer(64),]
+
+        model2=[nn.Conv2d(64, 128, kernel_size=3, stride=1, padding=1, bias=True),]
+        model2+=[nn.ReLU(True),]
+        model2+=[nn.Conv2d(128, 128, kernel_size=3, stride=2, padding=1, bias=True),]
+        model2+=[nn.ReLU(True),]
+        model2+=[norm_layer(128),]
+
+        model3=[nn.Conv2d(128, 256, kernel_size=3, stride=1, padding=1, bias=True),]
+        model3+=[nn.ReLU(True),]
+        model3+=[nn.Conv2d(256, 256, kernel_size=3, stride=1, padding=1, bias=True),]
+        model3+=[nn.ReLU(True),]
+        model3+=[nn.Conv2d(256, 256, kernel_size=3, stride=2, padding=1, bias=True),]
+        model3+=[nn.ReLU(True),]
+        model3+=[norm_layer(256),]
+
+        model4=[nn.Conv2d(256, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model4+=[nn.ReLU(True),]
+        model4+=[nn.Conv2d(512, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model4+=[nn.ReLU(True),]
+        model4+=[nn.Conv2d(512, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model4+=[nn.ReLU(True),]
+        model4+=[norm_layer(512),]
+
+        model5=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model5+=[nn.ReLU(True),]
+        model5+=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model5+=[nn.ReLU(True),]
+        model5+=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model5+=[nn.ReLU(True),]
+        model5+=[norm_layer(512),]
+
+        model6=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model6+=[nn.ReLU(True),]
+        model6+=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model6+=[nn.ReLU(True),]
+        model6+=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model6+=[nn.ReLU(True),]
+        model6+=[norm_layer(512),]
+
+        model7=[nn.Conv2d(512, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model7+=[nn.ReLU(True),]
+        model7+=[nn.Conv2d(512, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model7+=[nn.ReLU(True),]
+        model7+=[nn.Conv2d(512, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model7+=[nn.ReLU(True),]
+        model7+=[norm_layer(512),]
+
+        model8=[nn.ConvTranspose2d(512, 256, kernel_size=4, stride=2, padding=1, bias=True),]
+        model8+=[nn.ReLU(True),]
+        model8+=[nn.Conv2d(256, 256, kernel_size=3, stride=1, padding=1, bias=True),]
+        model8+=[nn.ReLU(True),]
+        model8+=[nn.Conv2d(256, 256, kernel_size=3, stride=1, padding=1, bias=True),]
+        model8+=[nn.ReLU(True),]
+
+        model8+=[nn.Conv2d(256, 313, kernel_size=1, stride=1, padding=0, bias=True),]
+
+        self.model1 = nn.Sequential(*model1)
+        self.model2 = nn.Sequential(*model2)
+        self.model3 = nn.Sequential(*model3)
+        self.model4 = nn.Sequential(*model4)
+        self.model5 = nn.Sequential(*model5)
+        self.model6 = nn.Sequential(*model6)
+        self.model7 = nn.Sequential(*model7)
+        self.model8 = nn.Sequential(*model8)
+
+        self.softmax = nn.Softmax(dim=1)
+        self.model_out = nn.Conv2d(313, 2, kernel_size=1, padding=0, dilation=1, stride=1, bias=False)
+        self.upsample4 = nn.Upsample(scale_factor=4, mode='bilinear')
+
+    def forward(self, input_l):
+        conv1_2 = self.model1(self.normalize_l(input_l))
+        conv2_2 = self.model2(conv1_2)
+        conv3_3 = self.model3(conv2_2)
+        conv4_3 = self.model4(conv3_3)
+        conv5_3 = self.model5(conv4_3)
+        conv6_3 = self.model6(conv5_3)
+        conv7_3 = self.model7(conv6_3)
+        conv8_3 = self.model8(conv7_3)
+        out_reg = self.model_out(self.softmax(conv8_3))
+
+        return self.unnormalize_ab(self.upsample4(out_reg))
+
+def eccv16(pretrained=True):
+	model = ECCVGenerator()
+	if(pretrained):
+		import torch.utils.model_zoo as model_zoo
+		model.load_state_dict(model_zoo.load_url('https://colorizers.s3.us-east-2.amazonaws.com/colorization_release_v2-9b330a0b.pth',map_location='cpu',check_hash=True))
+	return model

colorizers/siggraph17.py

@@ -0,0 +1,168 @@
+import torch
+import torch.nn as nn
+
+from .base_color import *
+
+class SIGGRAPHGenerator(BaseColor):
+    def __init__(self, norm_layer=nn.BatchNorm2d, classes=529):
+        super(SIGGRAPHGenerator, self).__init__()
+
+        # Conv1
+        model1=[nn.Conv2d(4, 64, kernel_size=3, stride=1, padding=1, bias=True),]
+        model1+=[nn.ReLU(True),]
+        model1+=[nn.Conv2d(64, 64, kernel_size=3, stride=1, padding=1, bias=True),]
+        model1+=[nn.ReLU(True),]
+        model1+=[norm_layer(64),]
+        # add a subsampling operation
+
+        # Conv2
+        model2=[nn.Conv2d(64, 128, kernel_size=3, stride=1, padding=1, bias=True),]
+        model2+=[nn.ReLU(True),]
+        model2+=[nn.Conv2d(128, 128, kernel_size=3, stride=1, padding=1, bias=True),]
+        model2+=[nn.ReLU(True),]
+        model2+=[norm_layer(128),]
+        # add a subsampling layer operation
+
+        # Conv3
+        model3=[nn.Conv2d(128, 256, kernel_size=3, stride=1, padding=1, bias=True),]
+        model3+=[nn.ReLU(True),]
+        model3+=[nn.Conv2d(256, 256, kernel_size=3, stride=1, padding=1, bias=True),]
+        model3+=[nn.ReLU(True),]
+        model3+=[nn.Conv2d(256, 256, kernel_size=3, stride=1, padding=1, bias=True),]
+        model3+=[nn.ReLU(True),]
+        model3+=[norm_layer(256),]
+        # add a subsampling layer operation
+
+        # Conv4
+        model4=[nn.Conv2d(256, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model4+=[nn.ReLU(True),]
+        model4+=[nn.Conv2d(512, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model4+=[nn.ReLU(True),]
+        model4+=[nn.Conv2d(512, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model4+=[nn.ReLU(True),]
+        model4+=[norm_layer(512),]
+
+        # Conv5
+        model5=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model5+=[nn.ReLU(True),]
+        model5+=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model5+=[nn.ReLU(True),]
+        model5+=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model5+=[nn.ReLU(True),]
+        model5+=[norm_layer(512),]
+
+        # Conv6
+        model6=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model6+=[nn.ReLU(True),]
+        model6+=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model6+=[nn.ReLU(True),]
+        model6+=[nn.Conv2d(512, 512, kernel_size=3, dilation=2, stride=1, padding=2, bias=True),]
+        model6+=[nn.ReLU(True),]
+        model6+=[norm_layer(512),]
+
+        # Conv7
+        model7=[nn.Conv2d(512, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model7+=[nn.ReLU(True),]
+        model7+=[nn.Conv2d(512, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model7+=[nn.ReLU(True),]
+        model7+=[nn.Conv2d(512, 512, kernel_size=3, stride=1, padding=1, bias=True),]
+        model7+=[nn.ReLU(True),]
+        model7+=[norm_layer(512),]
+
+        # Conv7
+        model8up=[nn.ConvTranspose2d(512, 256, kernel_size=4, stride=2, padding=1, bias=True)]
+        model3short8=[nn.Conv2d(256, 256, kernel_size=3, stride=1, padding=1, bias=True),]
+
+        model8=[nn.ReLU(True),]
+        model8+=[nn.Conv2d(256, 256, kernel_size=3, stride=1, padding=1, bias=True),]
+        model8+=[nn.ReLU(True),]
+        model8+=[nn.Conv2d(256, 256, kernel_size=3, stride=1, padding=1, bias=True),]
+        model8+=[nn.ReLU(True),]
+        model8+=[norm_layer(256),]
+
+        # Conv9
+        model9up=[nn.ConvTranspose2d(256, 128, kernel_size=4, stride=2, padding=1, bias=True),]
+        model2short9=[nn.Conv2d(128, 128, kernel_size=3, stride=1, padding=1, bias=True),]
+        # add the two feature maps above        
+
+        model9=[nn.ReLU(True),]
+        model9+=[nn.Conv2d(128, 128, kernel_size=3, stride=1, padding=1, bias=True),]
+        model9+=[nn.ReLU(True),]
+        model9+=[norm_layer(128),]
+
+        # Conv10
+        model10up=[nn.ConvTranspose2d(128, 128, kernel_size=4, stride=2, padding=1, bias=True),]
+        model1short10=[nn.Conv2d(64, 128, kernel_size=3, stride=1, padding=1, bias=True),]
+        # add the two feature maps above
+
+        model10=[nn.ReLU(True),]
+        model10+=[nn.Conv2d(128, 128, kernel_size=3, dilation=1, stride=1, padding=1, bias=True),]
+        model10+=[nn.LeakyReLU(negative_slope=.2),]
+
+        # classification output
+        model_class=[nn.Conv2d(256, classes, kernel_size=1, padding=0, dilation=1, stride=1, bias=True),]
+
+        # regression output
+        model_out=[nn.Conv2d(128, 2, kernel_size=1, padding=0, dilation=1, stride=1, bias=True),]
+        model_out+=[nn.Tanh()]
+
+        self.model1 = nn.Sequential(*model1)
+        self.model2 = nn.Sequential(*model2)
+        self.model3 = nn.Sequential(*model3)
+        self.model4 = nn.Sequential(*model4)
+        self.model5 = nn.Sequential(*model5)
+        self.model6 = nn.Sequential(*model6)
+        self.model7 = nn.Sequential(*model7)
+        self.model8up = nn.Sequential(*model8up)
+        self.model8 = nn.Sequential(*model8)
+        self.model9up = nn.Sequential(*model9up)
+        self.model9 = nn.Sequential(*model9)
+        self.model10up = nn.Sequential(*model10up)
+        self.model10 = nn.Sequential(*model10)
+        self.model3short8 = nn.Sequential(*model3short8)
+        self.model2short9 = nn.Sequential(*model2short9)
+        self.model1short10 = nn.Sequential(*model1short10)
+
+        self.model_class = nn.Sequential(*model_class)
+        self.model_out = nn.Sequential(*model_out)
+
+        self.upsample4 = nn.Sequential(*[nn.Upsample(scale_factor=4, mode='bilinear'),])
+        self.softmax = nn.Sequential(*[nn.Softmax(dim=1),])
+
+    def forward(self, input_A, input_B=None, mask_B=None):
+        if(input_B is None):
+            input_B = torch.cat((input_A*0, input_A*0), dim=1)
+        if(mask_B is None):
+            mask_B = input_A*0
+
+        conv1_2 = self.model1(torch.cat((self.normalize_l(input_A),self.normalize_ab(input_B),mask_B),dim=1))
+        conv2_2 = self.model2(conv1_2[:,:,::2,::2])
+        conv3_3 = self.model3(conv2_2[:,:,::2,::2])
+        conv4_3 = self.model4(conv3_3[:,:,::2,::2])
+        conv5_3 = self.model5(conv4_3)
+        conv6_3 = self.model6(conv5_3)
+        conv7_3 = self.model7(conv6_3)
+
+        conv8_up = self.model8up(conv7_3) + self.model3short8(conv3_3)
+        conv8_3 = self.model8(conv8_up)
+        conv9_up = self.model9up(conv8_3) + self.model2short9(conv2_2)
+        conv9_3 = self.model9(conv9_up)
+        conv10_up = self.model10up(conv9_3) + self.model1short10(conv1_2)
+        conv10_2 = self.model10(conv10_up)
+        out_reg = self.model_out(conv10_2)
+
+        conv9_up = self.model9up(conv8_3) + self.model2short9(conv2_2)
+        conv9_3 = self.model9(conv9_up)
+        conv10_up = self.model10up(conv9_3) + self.model1short10(conv1_2)
+        conv10_2 = self.model10(conv10_up)
+        out_reg = self.model_out(conv10_2)
+
+        return self.unnormalize_ab(out_reg)
+
+def siggraph17(pretrained=True):
+    model = SIGGRAPHGenerator()
+    if(pretrained):
+        import torch.utils.model_zoo as model_zoo
+        model.load_state_dict(model_zoo.load_url('https://colorizers.s3.us-east-2.amazonaws.com/siggraph17-df00044c.pth',map_location='cpu',check_hash=True))
+    return model
+

colorizers/util.py

@@ -0,0 +1,50 @@
+
+from PIL import Image
+import numpy as np
+from skimage import color
+import torch
+import torch.nn.functional as F
+
+def load_img(img_path):
+	img = Image.open(img_path)
+	# Convert RGBA to RGB if needed
+	if img.mode == 'RGBA':
+		img = img.convert('RGB')
+	out_np = np.asarray(img)
+	if out_np.ndim == 2:
+		out_np = np.tile(out_np[:, :, None], 3)
+	return out_np
+
+def resize_img(img, HW=(256,256), resample=3):
+	return np.asarray(Image.fromarray(img).resize((HW[1],HW[0]), resample=resample))
+
+def preprocess_img(img_rgb_orig, HW=(256,256), resample=3):
+	# return original size L and resized L as torch Tensors
+	img_rgb_rs = resize_img(img_rgb_orig, HW=HW, resample=resample)
+	
+	img_lab_orig = color.rgb2lab(img_rgb_orig)
+	img_lab_rs = color.rgb2lab(img_rgb_rs)
+
+	img_l_orig = img_lab_orig[:,:,0]
+	img_l_rs = img_lab_rs[:,:,0]
+
+	tens_orig_l = torch.Tensor(img_l_orig)[None,None,:,:]
+	tens_rs_l = torch.Tensor(img_l_rs)[None,None,:,:]
+
+	return (tens_orig_l, tens_rs_l)
+
+def postprocess_tens(tens_orig_l, out_ab, mode='bilinear'):
+	# tens_orig_l 	1 x 1 x H_orig x W_orig
+	# out_ab 		1 x 2 x H x W
+
+	HW_orig = tens_orig_l.shape[2:]
+	HW = out_ab.shape[2:]
+
+	# call resize function if needed
+	if(HW_orig[0]!=HW[0] or HW_orig[1]!=HW[1]):
+		out_ab_orig = F.interpolate(out_ab, size=HW_orig, mode='bilinear')
+	else:
+		out_ab_orig = out_ab
+
+	out_lab_orig = torch.cat((tens_orig_l, out_ab_orig), dim=1)
+	return color.lab2rgb(out_lab_orig.data.cpu().numpy()[0,...].transpose((1,2,0)))

demo_release.py

@@ -0,0 +1,138 @@
+import argparse
+import matplotlib.pyplot as plt
+from colorizers import *
+
+# --- GUI Imports ---
+import tkinter as tk
+from tkinter import filedialog, messagebox
+from PIL import Image, ImageTk
+import os
+
+def colorize_image(img_path, use_gpu=False, save_prefix='saved'):
+	# load colorizers
+	colorizer_eccv16 = eccv16(pretrained=True).eval()
+	colorizer_siggraph17 = siggraph17(pretrained=True).eval()
+	if use_gpu:
+		colorizer_eccv16.cuda()
+		colorizer_siggraph17.cuda()
+
+	img = load_img(img_path)
+	(tens_l_orig, tens_l_rs) = preprocess_img(img, HW=(256,256))
+	if use_gpu:
+		tens_l_rs = tens_l_rs.cuda()
+
+	img_bw = postprocess_tens(tens_l_orig, torch.cat((0*tens_l_orig,0*tens_l_orig),dim=1))
+	out_img_eccv16 = postprocess_tens(tens_l_orig, colorizer_eccv16(tens_l_rs).cpu())
+	out_img_siggraph17 = postprocess_tens(tens_l_orig, colorizer_siggraph17(tens_l_rs).cpu())
+
+	plt.imsave(f'{save_prefix}_eccv16.png', out_img_eccv16)
+	plt.imsave(f'{save_prefix}_siggraph17.png', out_img_siggraph17)
+
+	return img, img_bw, out_img_eccv16, out_img_siggraph17, f'{save_prefix}_eccv16.png', f'{save_prefix}_siggraph17.png'
+
+def run_cli():
+	parser = argparse.ArgumentParser()
+	parser.add_argument('-i','--img_path', type=str, default='imgs/ansel_adams3.jpg')
+	parser.add_argument('--use_gpu', action='store_true', help='whether to use GPU')
+	parser.add_argument('-o','--save_prefix', type=str, default='saved', help='will save into this file with {eccv16.png, siggraph17.png} suffixes')
+	opt = parser.parse_args()
+
+	img, img_bw, out_img_eccv16, out_img_siggraph17, out_eccv16_path, out_siggraph17_path = colorize_image(opt.img_path, opt.use_gpu, opt.save_prefix)
+
+	plt.figure(figsize=(12,8))
+	plt.subplot(2,2,1)
+	plt.imshow(img)
+	plt.title('Original')
+	plt.axis('off')
+
+	plt.subplot(2,2,2)
+	plt.imshow(img_bw)
+	plt.title('Input')
+	plt.axis('off')
+
+	plt.subplot(2,2,3)
+	plt.imshow(out_img_eccv16)
+	plt.title('Output (ECCV 16)')
+	plt.axis('off')
+
+	plt.subplot(2,2,4)
+	plt.imshow(out_img_siggraph17)
+	plt.title('Output (SIGGRAPH 17)')
+	plt.axis('off')
+	plt.show()
+
+# --- GUI Implementation ---
+def run_gui():
+	root = tk.Tk()
+	root.title('Image Colorization Demo')
+	root.geometry('600x400')
+
+	img_path_var = tk.StringVar()
+	save_prefix_var = tk.StringVar(value='saved')
+	use_gpu_var = tk.BooleanVar(value=False)
+
+	def select_image():
+		file_path = filedialog.askopenfilename(filetypes=[('Image Files', '*.jpg;*.jpeg;*.png;*.bmp')])
+		if file_path:
+			img_path_var.set(file_path)
+
+	def process_image():
+		img_path = img_path_var.get()
+		save_prefix = save_prefix_var.get()
+		use_gpu = use_gpu_var.get()
+		if not img_path:
+			messagebox.showerror('Error', 'Please select an image file.')
+			return
+		try:
+			img, img_bw, out_img_eccv16, out_img_siggraph17, out_eccv16_path, out_siggraph17_path = colorize_image(img_path, use_gpu, save_prefix)
+			messagebox.showinfo('Success', f'Colorized images saved as:\n{out_eccv16_path}\n{out_siggraph17_path}')
+			show_all_images(img, img_bw, out_img_eccv16, out_img_siggraph17)
+		except Exception as e:
+			messagebox.showerror('Error', str(e))
+
+	def show_all_images(img, img_bw, out_img_eccv16, out_img_siggraph17):
+		top = tk.Toplevel(root)
+		top.title('Input and Output Images')
+		# Convert numpy arrays to PIL Images if needed
+		def to_pil(im):
+			if isinstance(im, Image.Image):
+				return im
+			import numpy as np
+			arr = (im * 255).astype('uint8') if im.max() <= 1.0 else im.astype('uint8')
+			if arr.ndim == 2:
+				return Image.fromarray(arr, mode='L')
+			return Image.fromarray(arr)
+		pil_imgs = [to_pil(img), to_pil(img_bw), to_pil(out_img_eccv16), to_pil(out_img_siggraph17)]
+		titles = ['Original', 'Grayscale', 'ECCV16', 'SIGGRAPH17']
+		img_tks = []
+		for i, pil_img in enumerate(pil_imgs):
+			pil_img = pil_img.resize((200, 200))
+			img_tk = ImageTk.PhotoImage(pil_img)
+			img_tks.append(img_tk)
+			row, col = divmod(i, 2)
+			label = tk.Label(top, image=img_tk)
+			label.image = img_tk
+			label.grid(row=row*2, column=col, padx=10, pady=5)
+			title_label = tk.Label(top, text=titles[i])
+			title_label.grid(row=row*2+1, column=col)
+
+	tk.Label(root, text='Select Image:').pack(pady=10)
+	tk.Entry(root, textvariable=img_path_var, width=50).pack()
+	tk.Button(root, text='Browse', command=select_image).pack(pady=5)
+
+	tk.Label(root, text='Save Prefix:').pack(pady=10)
+	tk.Entry(root, textvariable=save_prefix_var, width=20).pack()
+
+	tk.Checkbutton(root, text='Use GPU', variable=use_gpu_var).pack(pady=5)
+
+	tk.Button(root, text='Colorize Image', command=process_image, bg='lightblue').pack(pady=20)
+
+	root.mainloop()
+
+# --- Entry Point ---
+if __name__ == '__main__':
+	import sys
+	if len(sys.argv) > 1:
+		run_cli()
+	else:
+		run_gui()

how_colorization_deep_dive.md

@@ -0,0 +1,140 @@
+# Deep Dive: How Image Colorization Works in This Project
+
+This document explains, step by step, how your image moves through the code, what the colorizers do, and how everything fits together. It's written for beginners, but goes deeper into the code and logic.
+
+---
+
+## 1. Where Does the Image Come From?
+- The user picks an image using the GUI or command line.
+- The path to the image is sent to the `colorize_image` function in `demo_release.py`.
+
+```python
+def colorize_image(img_path, use_gpu=False, save_prefix='saved'):
+    # ...
+```
+
+---
+
+## 2. Loading and Preprocessing the Image
+- The image is loaded as a numpy array (numbers for each pixel).
+- It is resized and converted from RGB (red, green, blue) to LAB color space (L = lightness, a/b = color info).
+- Only the 'L' (lightness) channel is used for colorization.
+
+```python
+img = load_img(img_path)  # Loads image as array
+(tens_l_orig, tens_l_rs) = preprocess_img(img, HW=(256,256))
+```
+
+- `tens_l_orig`: The original lightness channel (for final output size)
+- `tens_l_rs`: The resized lightness channel (for the model)
+
+---
+
+## 3. What Are the Colorizers?
+- **Colorizers** are deep neural networks trained to guess what colors should go where in a grayscale image.
+- There are two: `eccv16` and `siggraph17`. Each is a different model architecture, trained on lots of color photos.
+- They are defined in `colorizers/eccv16.py` and `colorizers/siggraph17.py`.
+
+### Why Two Colorizers?
+- They use different tricks and training data, so their results look a bit different. You can compare both!
+
+---
+
+## 4. How Do the Colorizers Work?
+- Each colorizer is a big stack of layers (like LEGO blocks):
+    - Convolutional layers (to look at small parts of the image)
+    - Activation layers (to help the model learn)
+    - Upsampling layers (to make the output bigger again)
+- The model takes the 'L' channel and predicts the 'ab' channels (the color part).
+
+```python
+colorizer_eccv16 = eccv16(pretrained=True).eval()
+colorizer_siggraph17 = siggraph17(pretrained=True).eval()
+
+# Move to GPU if needed
+if use_gpu:
+    colorizer_eccv16.cuda()
+    colorizer_siggraph17.cuda()
+```
+
+- The model is loaded with pretrained weights (learned from real photos).
+
+---
+
+## 5. Running the Model
+- The grayscale image (L channel) is sent through the colorizer.
+- The output is the 'ab' channels (color guesses).
+
+```python
+out_img_eccv16 = postprocess_tens(tens_l_orig, colorizer_eccv16(tens_l_rs).cpu())
+out_img_siggraph17 = postprocess_tens(tens_l_orig, colorizer_siggraph17(tens_l_rs).cpu())
+```
+
+- `colorizer_eccv16(tens_l_rs)` runs the model and returns color info.
+- `postprocess_tens` combines the original L with the new ab to make a color image.
+
+---
+
+## 6. Output
+- The colorized images are saved and shown to you.
+- You see the original, grayscale, and both colorized results.
+
+---
+
+## 7. How Data Moves (Step by Step)
+
+```mermaid
+graph TD
+    A[User picks image] --> B[demo_release.py: colorize_image()]
+    B --> C[util.py: load_img()]
+    C --> D[util.py: preprocess_img()]
+    D --> E[colorizers: eccv16/siggraph17]
+    E --> F[Model predicts color (ab)]
+    F --> G[util.py: postprocess_tens()]
+    G --> H[Color image is made]
+    H --> I[Image is saved and shown]
+```
+
+---
+
+## 8. Code Snippet: Model Forward Pass (ECCV16 Example)
+
+```python
+def forward(self, input_l):
+    conv1_2 = self.model1(self.normalize_l(input_l))
+    conv2_2 = self.model2(conv1_2)
+    # ... more layers ...
+    out_reg = self.model_out(self.softmax(conv8_3))
+    return self.unnormalize_ab(self.upsample4(out_reg))
+```
+- The image goes through many layers, gets processed, and comes out as color info.
+
+---
+
+## 9. Why LAB Color Space?
+- LAB splits lightness (L) from color (ab).
+- The model only needs to guess the color part, not the brightness, making learning easier!
+
+---
+
+## 10. Summary Table
+| Step | File | Function | What Happens |
+|------|------|----------|--------------|
+| 1    | demo_release.py | colorize_image | Starts the process |
+| 2    | util.py         | load_img | Loads the image |
+| 3    | util.py         | preprocess_img | Converts to LAB, gets L |
+| 4    | colorizers/eccv16.py | ECCVGenerator | Predicts color |
+| 5    | util.py | postprocess_tens | Combines L+ab, makes color image |
+| 6    | demo_release.py | (save/show) | Shows you the result |
+
+---
+
+## 11. In Short
+- The image is loaded, split into lightness and color.
+- The model guesses the color.
+- The color is combined with the lightness.
+- You get a colorized image!
+
+---
+
+If you want to see how any part works, just ask for more details!

how_colorization_works.md

@@ -0,0 +1,86 @@
+# How Colorization Works (Like You're 5!)
+
+This guide explains how a black-and-white (B&W) photo gets its colors back using the code in your project. We'll use simple words and pictures (code snippets) to show how the data moves from start to end!
+
+---
+
+## 1. You Pick a B&W Picture
+- You choose a photo (like a coloring book page).
+- The computer loads it in as numbers (pixels).
+
+```python
+img = load_img(img_path)  # Loads your image as numbers
+```
+
+---
+
+## 2. The Computer Prepares the Picture
+- The picture is made smaller (so it's easier to color).
+- It gets split into 'L' (lightness) and 'ab' (color) parts.
+- For B&W, only 'L' is there!
+
+```python
+(tens_l_orig, tens_l_rs) = preprocess_img(img, HW=(256,256))
+# tens_l_orig: original size, tens_l_rs: resized for the model
+```
+
+---
+
+## 3. The Magic Coloring Machine (Neural Network)
+- The model (like a robot artist) looks at the 'L' part and guesses what colors ('ab') should go where.
+- There are two artists: ECCV16 and SIGGRAPH17. Both try to color the picture!
+
+```python
+colorizer_eccv16 = eccv16(pretrained=True).eval()
+colorizer_siggraph17 = siggraph17(pretrained=True).eval()
+
+out_img_eccv16 = postprocess_tens(tens_l_orig, colorizer_eccv16(tens_l_rs).cpu())
+out_img_siggraph17 = postprocess_tens(tens_l_orig, colorizer_siggraph17(tens_l_rs).cpu())
+```
+
+---
+
+## 4. The Model Adds Color
+- The model takes the gray picture and adds color guesses.
+- It makes a new picture with both 'L' (lightness) and 'ab' (color) parts.
+
+```python
+# The model's output is combined with the original lightness
+out_lab_orig = torch.cat((tens_orig_l, out_ab_orig), dim=1)
+# This is turned back into a normal color image
+color_img = color.lab2rgb(...)
+```
+
+---
+
+## 5. You See the Results!
+- The computer saves the new color pictures.
+- You can see the original, the B&W, and the colorized versions side by side!
+
+```python
+plt.imsave('saved_eccv16.png', out_img_eccv16)
+plt.imsave('saved_siggraph17.png', out_img_siggraph17)
+```
+
+---
+
+## The Journey in a Picture
+
+```mermaid
+graph TD
+    A[You pick a B&W image] --> B[Image loaded as numbers]
+    B --> C[Image resized and split into L (lightness)]
+    C --> D[Magic model guesses color (ab)]
+    D --> E[Model combines L + ab]
+    E --> F[Color image is made!]
+    F --> G[You see the result!]
+```
+
+---
+
+## In Short
+- The computer looks at your gray picture.
+- It uses a smart robot (model) to guess what colors should be there.
+- It puts the colors back and shows you the new, colorful picture!
+
+That's how the magic happens, step by step!

requirements.txt

@@ -0,0 +1,6 @@
+flask
+gunicorn
+torch
+numpy
+scikit-image
+Pillow

templates/index.html

@@ -0,0 +1,414 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colorize — Bring Photos to Life</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --black:    #ffffff;
+            --dark:     #f8f8f8;
+            --surface:  #f2f2f2;
+            --border:   #e0e0e0;
+            --muted:    #888888;
+            --silver:   #666666;
+            --light:    #1a1a1a;
+            --amber:    #ff6b35;
+            --amber-dim:#ff8c5a;
+            --amber-glow: rgba(255, 107, 53, 0.1);
+            --red:      #e74c3c;
+        }
+
+        *, *::before, *::after {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        html, body {
+            height: 100%;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background: linear-gradient(135deg, #ffffff 0%, #f9f5f0 100%);
+            color: var(--light);
+            min-height: 100vh;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 24px;
+            overflow-x: hidden;
+        }
+
+        /* Grain overlay */
+        body::before {
+            content: '';
+            position: fixed;
+            inset: 0;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.01'/%3E%3C/svg%3E");
+            pointer-events: none;
+            z-index: 0;
+            opacity: 0.3;
+        }
+
+        /* Ambient amber glow behind card */
+        body::after {
+            content: '';
+            position: fixed;
+            width: 900px;
+            height: 900px;
+            background: radial-gradient(ellipse, rgba(255, 107, 53, 0.08) 0%, transparent 70%);
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            z-index: 0;
+        }
+
+        .page-wrapper {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            max-width: 520px;
+            animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+        }
+
+        @keyframes fadeUp {
+            from { opacity: 0; transform: translateY(32px); }
+            to   { opacity: 1; transform: translateY(0); }
+        }
+
+        /* ── Header ── */
+        .header {
+            text-align: center;
+            margin-bottom: 44px;
+        }
+
+        .eyebrow {
+            font-family: 'Outfit', sans-serif;
+            font-size: 0.7rem;
+            font-weight: 500;
+            letter-spacing: 0.22em;
+            text-transform: uppercase;
+            color: var(--amber);
+            margin-bottom: 14px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+        }
+
+        .eyebrow::before,
+        .eyebrow::after {
+            content: '';
+            display: inline-block;
+            width: 32px;
+            height: 1px;
+            background: var(--amber);
+        }
+
+        .title {
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 3.6rem;
+            font-weight: 300;
+            line-height: 1;
+            letter-spacing: -0.02em;
+            color: var(--light);
+            margin-bottom: 10px;
+        }
+
+        .title em {
+            font-style: italic;
+            color: var(--amber);
+        }
+
+        .subtitle {
+            font-size: 0.875rem;
+            font-weight: 300;
+            color: var(--silver);
+            letter-spacing: 0.02em;
+        }
+
+        /* ── Card ── */
+        .card {
+            background: var(--dark);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            padding: 40px;
+            position: relative;
+            overflow: hidden;
+            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
+        }
+
+        .card::before {
+            content: '';
+            position: absolute;
+            top: 0; left: 0; right: 0;
+            height: 1px;
+            background: linear-gradient(90deg, transparent, var(--amber), transparent);
+        }
+
+        /* ── Error ── */
+        .error {
+            background: rgba(231, 76, 60, 0.08);
+            border: 1px solid rgba(231, 76, 60, 0.2);
+            border-left: 3px solid var(--red);
+            color: #d63031;
+            padding: 14px 18px;
+            border-radius: 3px;
+            margin-bottom: 28px;
+            font-size: 0.875rem;
+            animation: shake 0.4s ease;
+        }
+
+        @keyframes shake {
+            0%, 100% { transform: translateX(0); }
+            20%       { transform: translateX(-6px); }
+            60%       { transform: translateX(6px); }
+        }
+
+        /* ── Upload Zone ── */
+        .drop-label {
+            font-family: 'Outfit', sans-serif;
+            font-size: 0.7rem;
+            font-weight: 500;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            color: var(--silver);
+            display: block;
+            margin-bottom: 16px;
+        }
+
+        .drop-zone {
+            position: relative;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            gap: 14px;
+            width: 100%;
+            padding: 52px 24px;
+            border: 2px dashed var(--border);
+            border-radius: 3px;
+            background: var(--surface);
+            cursor: pointer;
+            transition: border-color 0.25s, background 0.25s, box-shadow 0.25s;
+            margin-bottom: 10px;
+        }
+
+        .drop-zone:hover {
+            border-color: var(--amber);
+            background: rgba(255, 107, 53, 0.04);
+            box-shadow: 0 0 40px var(--amber-glow);
+        }
+
+        .drop-zone.dragover {
+            border-color: var(--amber);
+            background: rgba(255, 107, 53, 0.08);
+            box-shadow: 0 0 60px rgba(255, 107, 53, 0.2);
+        }
+
+        .drop-icon {
+            width: 44px;
+            height: 44px;
+            color: var(--amber);
+            transition: color 0.25s, transform 0.25s;
+        }
+
+        .drop-zone:hover .drop-icon {
+            color: var(--amber);
+            transform: translateY(-2px);
+        }
+
+        .drop-text-main {
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 1.25rem;
+            font-weight: 400;
+            color: var(--light);
+            letter-spacing: 0.01em;
+        }
+
+        .drop-text-sub {
+            font-size: 0.78rem;
+            color: var(--muted);
+            letter-spacing: 0.04em;
+        }
+
+        #file {
+            display: none;
+        }
+
+        /* ── File name pill ── */
+        .file-name {
+            display: none;
+            align-items: center;
+            gap: 8px;
+            padding: 9px 14px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 3px;
+            font-size: 0.8rem;
+            color: var(--muted);
+            margin-bottom: 28px;
+            animation: fadeIn 0.3s ease;
+        }
+
+        .file-name.show {
+            display: flex;
+        }
+
+        .file-name svg {
+            color: var(--amber);
+            flex-shrink: 0;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(-4px); }
+            to   { opacity: 1; transform: translateY(0); }
+        }
+
+        /* ── Submit ── */
+        .submit-btn {
+            width: 100%;
+            padding: 16px;
+            font-family: 'Outfit', sans-serif;
+            font-size: 0.8rem;
+            font-weight: 600;
+            letter-spacing: 0.14em;
+            text-transform: uppercase;
+            color: white;
+            background: var(--amber);
+            border: none;
+            border-radius: 3px;
+            cursor: pointer;
+            transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .submit-btn::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.2) 50%, transparent 100%);
+            transform: translateX(-100%);
+            transition: transform 0.5s;
+        }
+
+        .submit-btn:hover {
+            background: #ff5522;
+            box-shadow: 0 4px 24px rgba(255, 107, 53, 0.35);
+            transform: translateY(-1px);
+        }
+
+        .submit-btn:hover::after {
+            transform: translateX(100%);
+        }
+
+        .submit-btn:active {
+            transform: translateY(0);
+            box-shadow: none;
+        }
+
+        /* ── Footer tag ── */
+        .footer-tag {
+            text-align: center;
+            margin-top: 28px;
+            font-size: 0.72rem;
+            color: var(--muted);
+            letter-spacing: 0.06em;
+        }
+
+        .footer-tag span {
+            color: var(--amber);
+        }
+    </style>
+</head>
+<body>
+
+    <div class="page-wrapper">
+
+        <div class="header">
+            <div class="eyebrow">AI Photo Lab</div>
+            <h1 class="title">Colo<em>rize</em></h1>
+            <p class="subtitle">Restore life to black &amp; white photographs</p>
+        </div>
+
+        <div class="card">
+            {% if error %}
+            <div class="error">⚠ {{ error }}</div>
+            {% endif %}
+
+            <form method="post" enctype="multipart/form-data" id="uploadForm">
+
+                <label class="drop-label">Upload Image</label>
+
+                <label for="file" class="drop-zone" id="dropZone">
+                    <svg class="drop-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5m-13.5-9L12 3m0 0l4.5 4.5M12 3v13.5" />
+                    </svg>
+                    <span class="drop-text-main">Drop your photos here</span>
+                    <span class="drop-text-sub">or click to browse &nbsp;·&nbsp; JPG, PNG, BMP &nbsp;·&nbsp; Multiple files</span>
+                </label>
+
+<input type="file" id="file" name="files" accept="image/*" multiple required>
+
+                <div class="file-name" id="fileName">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
+                    </svg>
+                    <span id="fileNameText"></span>
+                </div>
+
+                <button class="submit-btn" type="submit">Colorize Now</button>
+
+            </form>
+        </div>
+
+        <p class="footer-tag">Powered by <span>AI colorization</span> &nbsp;·&nbsp; Results in seconds</p>
+
+    </div>
+
+    <script>
+        const fileInput  = document.getElementById('file');
+        const dropZone   = document.getElementById('dropZone');
+        const fileNameEl = document.getElementById('fileName');
+        const fileNameTx = document.getElementById('fileNameText');
+
+        fileInput.addEventListener('change', function () {
+            if (this.files.length > 0) {
+                const fileCount = this.files.length;
+                fileNameTx.textContent = fileCount + ' file' + (fileCount > 1 ? 's' : '') + ' selected';
+                fileNameEl.classList.add('show');
+            }
+        });
+
+        dropZone.addEventListener('dragover', function (e) {
+            e.preventDefault();
+            dropZone.classList.add('dragover');
+        });
+
+        dropZone.addEventListener('dragleave', function (e) {
+            e.preventDefault();
+            dropZone.classList.remove('dragover');
+        });
+
+        dropZone.addEventListener('drop', function (e) {
+            e.preventDefault();
+            dropZone.classList.remove('dragover');
+            const files = e.dataTransfer.files;
+            fileInput.files = files;
+            if (files.length > 0) {
+                const fileCount = files.length;
+                fileNameTx.textContent = fileCount + ' file' + (fileCount > 1 ? 's' : '') + ' selected';
+                fileNameEl.classList.add('show');
+            }
+        });
+    </script>
+
+</body>
+</html>

templates/result.html

@@ -0,0 +1,382 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colorize — Results</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --black:      #ffffff;
+            --dark:       #f8f8f8;
+            --surface:    #f2f2f2;
+            --border:     #e0e0e0;
+            --muted:      #888888;
+            --silver:     #666666;
+            --light:      #1a1a1a;
+            --amber:      #ff6b35;
+            --amber-dim:  #ff8c5a;
+            --amber-glow: rgba(255, 107, 53, 0.1);
+        }
+
+        * {
+            margin: 0; padding: 0; box-sizing: border-box;
+        }
+
+        body {
+            font-family: 'Outfit', sans-serif;
+            background: linear-gradient(135deg, #ffffff 0%, #f9f5f0 100%);
+            color: var(--light);
+            min-height: 100vh;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            padding: 40px 24px;
+            overflow-x: hidden;
+        }
+
+        body::before {
+            content: '';
+            position: fixed;
+            inset: 0;
+            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.01'/%3E%3C/svg%3E");
+            pointer-events: none;
+            z-index: 0;
+            opacity: 0.3;
+        }
+
+        body::after {
+            content: '';
+            position: fixed;
+            width: 900px; height: 900px;
+            background: radial-gradient(ellipse, rgba(255,107,53,0.08) 0%, transparent 70%);
+            top: 20%; left: 50%;
+            transform: translate(-50%, -50%);
+            pointer-events: none;
+            z-index: 0;
+        }
+
+        .page-wrapper {
+            position: relative;
+            z-index: 1;
+            width: 100%;
+            max-width: 1200px;
+            animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
+        }
+
+        @keyframes fadeUp {
+            from { opacity: 0; transform: translateY(32px); }
+            to   { opacity: 1; transform: translateY(0); }
+        }
+
+        .nav {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 48px;
+        }
+
+        .nav-brand {
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 1.5rem;
+            font-weight: 300;
+            color: var(--light);
+            text-decoration: none;
+            letter-spacing: 0.02em;
+        }
+
+        .nav-brand em {
+            font-style: italic;
+            color: var(--amber);
+        }
+
+        .back-btn {
+            display: inline-flex;
+            align-items: center;
+            gap: 8px;
+            font-size: 0.78rem;
+            font-weight: 500;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            color: var(--silver);
+            text-decoration: none;
+            padding: 9px 18px;
+            border: 1px solid var(--border);
+            border-radius: 3px;
+            background: var(--surface);
+            transition: all 0.2s;
+        }
+
+        .back-btn:hover {
+            border-color: var(--amber);
+            color: var(--amber);
+            background: rgba(255, 107, 53, 0.08);
+        }
+
+        .result-header {
+            margin-bottom: 36px;
+        }
+
+        .result-eyebrow {
+            font-size: 0.7rem;
+            font-weight: 500;
+            letter-spacing: 0.22em;
+            text-transform: uppercase;
+            color: var(--amber);
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 12px;
+        }
+
+        .result-eyebrow::before {
+            content: '';
+            display: inline-block;
+            width: 24px; height: 1px;
+            background: var(--amber);
+        }
+
+        .result-title {
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 2.8rem;
+            font-weight: 300;
+            line-height: 1.1;
+            color: var(--light);
+        }
+
+        .result-title em {
+            font-style: italic;
+            color: var(--amber);
+        }
+
+        .gallery {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+
+        @media (max-width: 768px) {
+            .gallery {
+                grid-template-columns: 1fr;
+            }
+        }
+
+        .gallery-item {
+            background: var(--dark);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            overflow: hidden;
+            transition: all 0.3s cubic-bezier(0.22,1,0.36,1);
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+        }
+
+        .gallery-item:hover {
+            border-color: var(--amber);
+            box-shadow: 0 8px 32px rgba(255, 107, 53, 0.15);
+            transform: translateY(-4px);
+        }
+
+        .comparison-split {
+            display: flex;
+            width: 100%;
+            height: 240px;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .comparison-side {
+            flex: 1;
+            overflow: hidden;
+            position: relative;
+        }
+
+        .comparison-side img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            display: block;
+            transition: transform 0.3s ease;
+        }
+
+        .gallery-item:hover .comparison-side img {
+            transform: scale(1.05);
+        }
+
+        .gallery-side-label {
+            position: absolute;
+            top: 12px;
+            left: 12px;
+            font-size: 0.65rem;
+            font-weight: 600;
+            letter-spacing: 0.16em;
+            text-transform: uppercase;
+            padding: 4px 10px;
+            background: rgba(255, 255, 255, 0.95);
+            color: var(--silver);
+            border-radius: 2px;
+            backdrop-filter: blur(8px);
+        }
+
+        .gallery-side-label.colorized {
+            background: rgba(255, 107, 53, 0.15);
+            color: var(--amber);
+            border: 1px solid rgba(255, 107, 53, 0.3);
+            left: auto;
+            right: 12px;
+        }
+
+        .gallery-info {
+            padding: 18px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: 12px;
+            border-top: 1px solid var(--border);
+        }
+
+        .gallery-filename {
+            font-size: 0.8rem;
+            color: var(--muted);
+            flex: 1;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .download-link {
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            padding: 7px 14px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            color: white;
+            background: var(--amber);
+            border-radius: 2px;
+            text-decoration: none;
+            transition: background 0.2s, box-shadow 0.2s;
+            white-space: nowrap;
+            flex-shrink: 0;
+        }
+
+        .download-link:hover {
+            background: #ff5522;
+            box-shadow: 0 4px 16px rgba(255, 107, 53, 0.3);
+        }
+
+        .download-link svg {
+            width: 12px; height: 12px;
+        }
+
+        .summary {
+            text-align: center;
+            padding: 28px;
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            margin-bottom: 32px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
+        }
+
+        .summary-value {
+            font-family: 'Cormorant Garamond', serif;
+            font-size: 3rem;
+            font-weight: 400;
+            color: var(--amber);
+            line-height: 1;
+            margin-bottom: 8px;
+        }
+
+        .summary-label {
+            font-size: 0.78rem;
+            letter-spacing: 0.12em;
+            text-transform: uppercase;
+            color: var(--muted);
+        }
+
+        .footer-tag {
+            text-align: center;
+            margin-top: 32px;
+            font-size: 0.72rem;
+            color: var(--muted);
+            letter-spacing: 0.06em;
+        }
+
+        .footer-tag span {
+            color: var(--amber);
+        }
+    </style>
+</head>
+<body>
+
+    <div class="page-wrapper">
+
+        <nav class="nav">
+            <a href="/" class="nav-brand">Colo<em>rize</em></a>
+            <a href="/" class="back-btn">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" style="width: 14px; height: 14px;">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+                </svg>
+                New Photos
+            </a>
+        </nav>
+
+        <div class="result-header">
+            <div class="result-eyebrow">Colorization Complete</div>
+            <h1 class="result-title">All photos are <em>alive</em></h1>
+        </div>
+
+        <div class="summary">
+            <div class="summary-value">{{ total_count }}</div>
+            <div class="summary-label">Images Colorized Successfully</div>
+        </div>
+
+        <div class="gallery">
+            {% for item in images %}
+            <div class="gallery-item">
+                <div class="comparison-split">
+                    <div class="comparison-side">
+                        <img src="{{ item.orig_img }}" alt="Original">
+                        <span class="gallery-side-label">Original</span>
+                    </div>
+                    <div class="comparison-side">
+                        <img src="{{ item.eccv16_img }}" alt="ECCV16">
+                        <span class="gallery-side-label colorized">ECCV16</span>
+                    </div>
+                    <div class="comparison-side">
+                        <img src="{{ item.siggraph17_img }}" alt="SIGGRAPH17">
+                        <span class="gallery-side-label colorized">✦ SIGGRAPH17</span>
+                    </div>
+                </div>
+                <div class="gallery-info">
+                    <span class="gallery-filename">{{ item.filename }}</span>
+                    <div style="display: flex; gap: 6px;">
+                        <a href="{{ item.eccv16_img }}" download class="download-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12M12 16.5V3" />
+                            </svg>
+                            ECCV16
+                        </a>
+                        <a href="{{ item.siggraph17_img }}" download class="download-link">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.2">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 005.25 21h13.5A2.25 2.25 0 0021 18.75V16.5M16.5 12L12 16.5m0 0L7.5 12M12 16.5V3" />
+                            </svg>
+                            SG17
+                        </a>
+                    </div>
+                </div>
+            </div>
+            {% endfor %}
+        </div>
+
+        <p class="footer-tag">Powered by <span>AI colorization</span> &nbsp;·&nbsp; Results in seconds</p>
+
+    </div>
+
+</body>
+</html>