Demo Managing Long Sessions Effectively

Build a single image optimization web app using Flask.

Requirements:
- Flask web UI with drag-and-drop upload
- Support JPEG, PNG, WebP only (reject SVG/GIF)
- Rate limiting: 30 requests/min per IP
- Max upload size: 25 MB
- Auto-cleanup of temp files (no retention)
- Show "Before" uploaded image and an "After" pane (placeholder until optimized)
- Use Pillow (PIL) for image I/O; keep OpenCV available for future features
- Dockerize for production with Gunicorn (deployment later)
Deliverables:
- Flask app with routes, config, validators, cleanup
- HTML templates, static JS/CSS
- requirements.txt
- SESSION_NOTES.md documenting what was done

# app.py
import os
import uuid
import tempfile
import atexit
import traceback
from datetime import datetime, timedelta
from threading import Lock
from flask import Flask, request, render_template, jsonify, send_file, url_for
from flask_limiter import Limiter
from flask_limiter.util import get_remote_address
from PIL import Image, ImageFilter, ImageOps
import cv2  # kept available for future features
from werkzeug.utils import secure_filename

app = Flask(__name__)
app.config['MAX_CONTENT_LENGTH'] = 25 * 1024 * 1024  # 25 MB
app.config['SECRET_KEY'] = os.environ.get('SECRET_KEY', 'dev-secret-key-change-in-production')
app.config['UPLOAD_FOLDER'] = tempfile.mkdtemp()

# Rate limiting: 30 requests per minute per IP
limiter = Limiter(app, key_func=get_remote_address, default_limits=["30 per minute"])

ALLOWED_EXTENSIONS = {'jpg', 'jpeg', 'png', 'webp'}
TEMP_FILES = set()
TEMP_FILES_LOCK = Lock()

def allowed_file(filename: str) -> bool:
    ext = filename.rsplit('.', 1)[-1].lower() if '.' in filename else ''
    return ext in ALLOWED_EXTENSIONS

def register_temp_file(path: str):
    with TEMP_FILES_LOCK:
        TEMP_FILES.add(path)

def cleanup_temp_file(path: str):
    try:
        with TEMP_FILES_LOCK:
            TEMP_FILES.discard(path)
        if os.path.exists(path):
            os.remove(path)
    except Exception:
        traceback.print_exc()

@atexit.register
def cleanup_all_temp_files():
    with TEMP_FILES_LOCK:
        files = list(TEMP_FILES)
    for f in files:
        try:
            if os.path.exists(f):
                os.remove(f)
        except Exception:
            traceback.print_exc()

@app.errorhandler(413)
def too_large(e):
    return jsonify({'error': 'File too large. Maximum size is 25MB'}), 413

@app.errorhandler(429)
def ratelimit_handler(e):
    return jsonify({'error': 'Rate limit exceeded. Please try again later.'}), 429

@app.route('/', methods=['GET'])
def index():
    return render_template('index.html')

@app.route('/upload', methods=['POST'])
@limiter.limit("30/minute")
def upload():
    file = request.files.get('file')
    if not file or file.filename == '':
        return jsonify({'error': 'No file uploaded'}), 400
    if not allowed_file(file.filename):
        return jsonify({'error': 'Unsupported file type'}), 400

    filename = f"{uuid.uuid4().hex}_{secure_filename(file.filename)}"
    filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
    file.save(filepath)
    register_temp_file(filepath)

    return jsonify({
        'success': True,
        'filename': filename,
        'url': url_for('get_temp_file', filename=filename)
    }), 200

@app.route('/temp/<filename>')
def get_temp_file(filename):
    filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
    if not os.path.exists(filepath):
        return jsonify({'error': 'File not found'}), 404
    return send_file(filepath)

@app.route('/optimize/<filename>', methods=['POST'])
@limiter.limit("30/minute")
def optimize(filename):
    filepath = os.path.join(app.config['UPLOAD_FOLDER'], filename)
    if not os.path.exists(filepath):
        return jsonify({'error': 'Source file not found'}), 404

    try:
        # Read parameters
        quality = int(request.form.get('quality', 85))
        resize_percent = int(request.form.get('resize_percent', 100))
        strip_metadata = request.form.get('strip_metadata', 'true').lower() == 'true'
        auto_orient = request.form.get('auto_orient', 'true').lower() == 'true'
        sharpen_value = float(request.form.get('sharpen', 0.0))
        output_format = request.form.get('format', 'JPEG').upper()  # JPEG, PNG, WEBP

        # Prepare optimized filename
        optimized_filename = f"opt_{uuid.uuid4().hex}_{filename}"
        optimized_filepath = os.path.join(app.config['UPLOAD_FOLDER'], optimized_filename)

        # Ensure previous optimized file cleaned up
        if os.path.exists(optimized_filepath):
            cleanup_temp_file(optimized_filepath)

        # Open and process image with Pillow
        with Image.open(filepath) as img:
            if auto_orient:
                img = ImageOps.exif_transpose(img)

            # Resize if needed
            if resize_percent != 100:
                width = max(1, int(img.width * resize_percent / 100))
                height = max(1, int(img.height * resize_percent / 100))
                img = img.resize((width, height), Image.LANCZOS)

            # Sharpen/blur handling: use UnsharpMask for sharpening, GaussianBlur for negative values
            if sharpen_value > 0:
                # UnsharpMask expects integers for percent - compute safe int
                percent = max(0, min(500, int(round(sharpen_value * 100))))
                img = img.filter(ImageFilter.UnsharpMask(radius=2, percent=percent, threshold=3))
            elif sharpen_value < 0:
                radius = max(0, abs(sharpen_value))
                img = img.filter(ImageFilter.GaussianBlur(radius=radius))

            # Handle metadata: include EXIF only when strip_metadata is False and EXIF exists
            save_kwargs = {}
            if not strip_metadata:
                exif_bytes = img.info.get('exif')
                if exif_bytes:
                    save_kwargs['exif'] = exif_bytes

            # Format-aware saving and mode adjustments
            fmt = output_format
            if fmt == 'JPEG':
                # JPEG cannot handle alpha - convert if necessary
                if img.mode in ('RGBA', 'LA', 'P'):
                    img = img.convert('RGB')
                save_kwargs['quality'] = max(1, min(95, quality))
                save_kwargs['optimize'] = True
                save_kwargs['progressive'] = True
                fmt = 'JPEG'
            elif fmt == 'WEBP':
                save_kwargs['quality'] = max(1, min(100, quality))
                fmt = 'WEBP'
            else:  # PNG or other
                fmt = 'PNG'

            img.save(optimized_filepath, format=fmt, **save_kwargs)

        register_temp_file(optimized_filepath)
        return jsonify({'success': True, 'optimized_url': url_for('get_temp_file', filename=optimized_filename)}), 200

    except Exception as e:
        print(f"Optimization error: {e}")
        traceback.print_exc()
        return jsonify({'error': f'Failed to optimize image: {str(e)}'}), 500

if __name__ == '__main__':
    # If port 5000 is in use by system services (e.g., macOS AirPlay Receiver), choose a different port
    app.run(debug=True, port=5001)

Flask==2.3.3
Flask-Limiter==3.5.0
Pillow==10.0.0
opencv-python-headless==4.8.1.78
gunicorn==20.1.0

# Create virtual environment
python3 -m venv venv

# Activate (macOS/Linux)
source venv/bin/activate

# Install dependencies
pip install -r requirements.txt

# Run in development (choose an available port)
python app.py
# or explicitly
python -m flask run --port 5001

# Find process using port 5000
lsof -i :5000

# Kill process by PID (be careful)
kill -9 <PID>

# Alternatively, run app on a different port:
python app.py  # if app.py sets port=5001 or use flask run --port 5001

Failed to load resource: the server responded with a status of 500 (INTERNAL SERVER ERROR)
http://localhost:5001/optimize/b0376_eb95a_morgans.png 500 (INTERNAL SERVER ERROR)

## Project Overview
Built a Flask app for image optimization:
- Drag-and-drop upload
- JPEG/PNG/WebP support (SVG/GIF rejected)
- Rate limiting 30 req/min per IP
- Max upload 25MB
- Auto-cleanup of temp files
- Before/After UI
- Uses Pillow (OpenCV available)

## SESSION 1: Core features
- Upload, validation, temp file handling
- Rate limiting with Flask-Limiter (in-memory store for dev)
- Error handlers for 413 and 429 responses

## SESSION 2: Advanced features
- Quality slider, resize by percent
- Sharpen/blur controls, contrast/brightness (added)
- Format conversion (JPEG/PNG/WebP)
- Live iterative optimization workflow: upload once, optimize multiple times
- Fix: convert float sharpen values to int percent for UnsharpMask
- UI improvements: responsive layout, presets, live preview

## Development notes
- Use python3 -m venv venv and source venv/bin/activate
- If port 5000 in use on macOS, run on a different port or disable AirPlay Receiver
- For production, configure Redis for rate limiter storage

## Next steps / Roadmap
- Add persistent rate-limiter storage (Redis)
- Add presets persistence and user accounts (requires DB)
- Add server-side caching for repeated identical optimizations