From b28ec4a4b10be3edb8d309b2695681802a319f8a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 6 Feb 2026 07:33:38 +0000
Subject: [PATCH 1/3] Initial plan


From 8e108db4c3f8b57e6d056c069f1fd6c2831f4e72 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 6 Feb 2026 07:37:18 +0000
Subject: [PATCH 2/3] Add image modification features with crop, resize, and
 optimize

Co-authored-by: githuba42r <12091914+githuba42r@users.noreply.github.com>
---
 .gitignore           |  11 +
 Dockerfile           |  23 ++
 README.md            |  83 +++++
 app.py               | 179 +++++++++++
 docker-compose.yml   |  11 +
 requirements.txt     |   3 +
 templates/index.html | 746 +++++++++++++++++++++++++++++++++++++++++++
 uploads/.gitkeep     |   1 +
 8 files changed, 1057 insertions(+)
 create mode 100644 .gitignore
 create mode 100644 Dockerfile
 create mode 100644 app.py
 create mode 100644 docker-compose.yml
 create mode 100644 requirements.txt
 create mode 100644 templates/index.html
 create mode 100644 uploads/.gitkeep

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..d46b82e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,11 @@
+__pycache__/
+*.py[cod]
+*$py.class
+*.so
+.Python
+uploads/*
+!uploads/.gitkeep
+venv/
+env/
+*.log
+.DS_Store
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..737ce89
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,23 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+# Install system dependencies for image processing
+RUN apt-get update && apt-get install -y \
+    libpng-dev \
+    libjpeg-dev \
+    libwebp-dev \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements and install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application files
+COPY . .
+
+# Expose port
+EXPOSE 5000
+
+# Run the application
+CMD ["python", "app.py"]
diff --git a/README.md b/README.md
index 0382a41..2977d93 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,85 @@
 # ImageTools
+
 Docker container with web frontend for simple image manipulation and editing.
+
+Designed to quickly allow the modification of images from a camera to be cropped, resized, and optimized for adding to a webpage or email.
+
+## Features
+
+- 📸 **Camera Capture** - Capture images directly from your device camera
+- 📁 **File Upload** - Upload images from your device
+- ✂️ **Crop** - Select and crop specific areas of your images
+- 📏 **Resize** - Resize images with presets for:
+  - Email (thumbnails, headers, content)
+  - Web (various sizes from thumbnail to hero images)
+  - Social Media (Facebook, Twitter, Instagram)
+- ⚡ **Optimize** - Compress images with adjustable quality
+- 🔄 **Format Conversion** - Convert between JPEG, PNG, and WebP formats
+- 💾 **Download** - Save processed images instantly
+
+## Quick Start
+
+### Using Docker Compose (Recommended)
+
+```bash
+docker-compose up
+```
+
+Then open your browser to `http://localhost:5000`
+
+### Using Docker
+
+```bash
+docker build -t imagetools .
+docker run -p 5000:5000 imagetools
+```
+
+### Local Development
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+Then open your browser to `http://localhost:5000`
+
+## Usage
+
+1. **Load an Image**
+   - Click "Upload Image" to select a file from your device
+   - Or click "Use Camera" to capture a photo directly
+
+2. **Crop (Optional)**
+   - Click "Enable Crop"
+   - Click and drag on the image to select the area you want to keep
+   - Click "Apply Crop" to crop the image
+
+3. **Resize**
+   - Choose a preset from Email, Web, or Social tabs
+   - Or enter custom dimensions in the Width/Height fields
+   - Leave one dimension empty to maintain aspect ratio
+
+4. **Optimize**
+   - Select output format (JPEG, PNG, or WebP)
+   - Adjust quality slider (1-100)
+   - Higher quality = larger file size
+
+5. **Process & Download**
+   - Click "Process & Download" to apply all changes
+   - The optimized image will be automatically downloaded
+
+## Technology Stack
+
+- **Backend**: Python Flask
+- **Image Processing**: Pillow (PIL)
+- **Frontend**: HTML5, CSS3, Vanilla JavaScript
+- **Containerization**: Docker
+
+## Requirements
+
+- Docker (for containerized deployment)
+- Or Python 3.11+ with pip (for local development)
+
+## License
+
+MIT
diff --git a/app.py b/app.py
new file mode 100644
index 0000000..e7beed4
--- /dev/null
+++ b/app.py
@@ -0,0 +1,179 @@
+from flask import Flask, render_template, request, send_file, jsonify
+from PIL import Image
+import io
+import os
+from werkzeug.utils import secure_filename
+import base64
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 16 * 1024 * 1024  # 16MB max file size
+app.config['UPLOAD_FOLDER'] = 'uploads'
+
+# Ensure upload directory exists
+os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)
+
+ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif', 'webp'}
+
+def allowed_file(filename):
+    return '.' in filename and filename.rsplit('.', 1)[1].lower() in ALLOWED_EXTENSIONS
+
+@app.route('/')
+def index():
+    return render_template('index.html')
+
+@app.route('/upload', methods=['POST'])
+def upload_image():
+    """Handle image upload from file or camera"""
+    try:
+        if 'file' not in request.files and 'image' not in request.form:
+            return jsonify({'error': 'No file provided'}), 400
+        
+        # Handle file upload
+        if 'file' in request.files:
+            file = request.files['file']
+            if file.filename == '':
+                return jsonify({'error': 'No file selected'}), 400
+            
+            if file and allowed_file(file.filename):
+                image = Image.open(file.stream)
+        # Handle camera capture (base64 data)
+        elif 'image' in request.form:
+            image_data = request.form['image']
+            # Remove data URL prefix
+            if ',' in image_data:
+                image_data = image_data.split(',')[1]
+            image_bytes = base64.b64decode(image_data)
+            image = Image.open(io.BytesIO(image_bytes))
+        
+        # Convert to RGB if necessary
+        if image.mode in ('RGBA', 'LA', 'P'):
+            background = Image.new('RGB', image.size, (255, 255, 255))
+            if image.mode == 'P':
+                image = image.convert('RGBA')
+            background.paste(image, mask=image.split()[-1] if image.mode in ('RGBA', 'LA') else None)
+            image = background
+        
+        # Return image info
+        img_io = io.BytesIO()
+        image.save(img_io, 'JPEG', quality=95)
+        img_io.seek(0)
+        img_base64 = base64.b64encode(img_io.getvalue()).decode()
+        
+        return jsonify({
+            'success': True,
+            'image': f'data:image/jpeg;base64,{img_base64}',
+            'width': image.width,
+            'height': image.height
+        })
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/process', methods=['POST'])
+def process_image():
+    """Process image with crop, resize, and optimization"""
+    try:
+        data = request.get_json()
+        
+        if 'image' not in data:
+            return jsonify({'error': 'No image data provided'}), 400
+        
+        # Decode base64 image
+        image_data = data['image']
+        if ',' in image_data:
+            image_data = image_data.split(',')[1]
+        image_bytes = base64.b64decode(image_data)
+        image = Image.open(io.BytesIO(image_bytes))
+        
+        # Apply crop if specified
+        if 'crop' in data:
+            crop = data['crop']
+            image = image.crop((
+                int(crop['x']),
+                int(crop['y']),
+                int(crop['x'] + crop['width']),
+                int(crop['y'] + crop['height'])
+            ))
+        
+        # Apply resize if specified
+        if 'resize' in data:
+            resize = data['resize']
+            width = int(resize.get('width', image.width))
+            height = int(resize.get('height', image.height))
+            
+            # Maintain aspect ratio if only one dimension specified
+            if 'width' in resize and 'height' not in resize:
+                aspect_ratio = image.height / image.width
+                height = int(width * aspect_ratio)
+            elif 'height' in resize and 'width' not in resize:
+                aspect_ratio = image.width / image.height
+                width = int(height * aspect_ratio)
+            
+            image = image.resize((width, height), Image.Resampling.LANCZOS)
+        
+        # Apply optimization
+        quality = int(data.get('quality', 85))
+        optimize = data.get('optimize', True)
+        output_format = data.get('format', 'JPEG').upper()
+        
+        # Prepare output
+        img_io = io.BytesIO()
+        
+        if output_format == 'PNG':
+            image.save(img_io, 'PNG', optimize=optimize)
+            mime_type = 'image/png'
+        elif output_format == 'WEBP':
+            image.save(img_io, 'WEBP', quality=quality, method=6)
+            mime_type = 'image/webp'
+        else:  # JPEG
+            if image.mode in ('RGBA', 'LA', 'P'):
+                background = Image.new('RGB', image.size, (255, 255, 255))
+                if image.mode == 'P':
+                    image = image.convert('RGBA')
+                background.paste(image, mask=image.split()[-1] if image.mode in ('RGBA', 'LA') else None)
+                image = background
+            image.save(img_io, 'JPEG', quality=quality, optimize=optimize)
+            mime_type = 'image/jpeg'
+        
+        img_io.seek(0)
+        img_base64 = base64.b64encode(img_io.getvalue()).decode()
+        
+        return jsonify({
+            'success': True,
+            'image': f'data:{mime_type};base64,{img_base64}',
+            'width': image.width,
+            'height': image.height,
+            'size': len(img_io.getvalue())
+        })
+    
+    except Exception as e:
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/presets/<preset_type>')
+def get_preset(preset_type):
+    """Get preset dimensions for common use cases"""
+    presets = {
+        'email': [
+            {'name': 'Email Thumbnail', 'width': 150, 'height': 150},
+            {'name': 'Email Header', 'width': 600, 'height': 200},
+            {'name': 'Email Content', 'width': 600, 'height': 400},
+        ],
+        'web': [
+            {'name': 'Thumbnail', 'width': 200, 'height': 200},
+            {'name': 'Small', 'width': 400, 'height': 300},
+            {'name': 'Medium', 'width': 800, 'height': 600},
+            {'name': 'Large', 'width': 1200, 'height': 900},
+            {'name': 'Hero Image', 'width': 1920, 'height': 600},
+        ],
+        'social': [
+            {'name': 'Facebook Post', 'width': 1200, 'height': 630},
+            {'name': 'Twitter Post', 'width': 1200, 'height': 675},
+            {'name': 'Instagram Square', 'width': 1080, 'height': 1080},
+            {'name': 'Instagram Portrait', 'width': 1080, 'height': 1350},
+        ]
+    }
+    
+    return jsonify(presets.get(preset_type, []))
+
+if __name__ == '__main__':
+    app.run(host='0.0.0.0', port=5000, debug=False)
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..02c42f8
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,11 @@
+version: '3.8'
+
+services:
+  imagetools:
+    build: .
+    ports:
+      - "5000:5000"
+    volumes:
+      - ./uploads:/app/uploads
+    environment:
+      - FLASK_ENV=production
diff --git a/requirements.txt b/requirements.txt
new file mode 100644
index 0000000..f06c9a0
--- /dev/null
+++ b/requirements.txt
@@ -0,0 +1,3 @@
+Flask==3.0.0
+Pillow==10.2.0
+Werkzeug==3.0.1
diff --git a/templates/index.html b/templates/index.html
new file mode 100644
index 0000000..361d0c8
--- /dev/null
+++ b/templates/index.html
@@ -0,0 +1,746 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ImageTools - Quick Image Editor</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            min-height: 100vh;
+            padding: 20px;
+        }
+
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 10px;
+            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+            overflow: hidden;
+        }
+
+        header {
+            background: #667eea;
+            color: white;
+            padding: 20px;
+            text-align: center;
+        }
+
+        header h1 {
+            font-size: 2em;
+            margin-bottom: 10px;
+        }
+
+        header p {
+            opacity: 0.9;
+        }
+
+        .main-content {
+            display: grid;
+            grid-template-columns: 300px 1fr;
+            gap: 20px;
+            padding: 20px;
+        }
+
+        .sidebar {
+            border-right: 1px solid #e0e0e0;
+            padding-right: 20px;
+        }
+
+        .section {
+            margin-bottom: 25px;
+        }
+
+        .section h3 {
+            font-size: 1.1em;
+            margin-bottom: 15px;
+            color: #667eea;
+            border-bottom: 2px solid #667eea;
+            padding-bottom: 5px;
+        }
+
+        .btn {
+            background: #667eea;
+            color: white;
+            border: none;
+            padding: 12px 20px;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 1em;
+            width: 100%;
+            margin-bottom: 10px;
+            transition: background 0.3s;
+        }
+
+        .btn:hover {
+            background: #5568d3;
+        }
+
+        .btn-secondary {
+            background: #764ba2;
+        }
+
+        .btn-secondary:hover {
+            background: #653a8a;
+        }
+
+        .btn-success {
+            background: #10b981;
+        }
+
+        .btn-success:hover {
+            background: #059669;
+        }
+
+        input[type="file"] {
+            display: none;
+        }
+
+        .form-group {
+            margin-bottom: 15px;
+        }
+
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: 500;
+            color: #333;
+        }
+
+        .form-group input,
+        .form-group select {
+            width: 100%;
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            font-size: 0.95em;
+        }
+
+        .preset-buttons {
+            display: flex;
+            gap: 5px;
+            margin-bottom: 10px;
+        }
+
+        .preset-btn {
+            flex: 1;
+            padding: 8px;
+            background: #f3f4f6;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            cursor: pointer;
+            font-size: 0.85em;
+        }
+
+        .preset-btn.active {
+            background: #667eea;
+            color: white;
+            border-color: #667eea;
+        }
+
+        .preset-list {
+            display: none;
+            max-height: 200px;
+            overflow-y: auto;
+            border: 1px solid #ddd;
+            border-radius: 5px;
+            padding: 5px;
+        }
+
+        .preset-list.active {
+            display: block;
+        }
+
+        .preset-item {
+            padding: 8px;
+            cursor: pointer;
+            border-radius: 3px;
+            margin-bottom: 3px;
+            background: #f9fafb;
+        }
+
+        .preset-item:hover {
+            background: #e5e7eb;
+        }
+
+        .canvas-area {
+            position: relative;
+            background: #f9fafb;
+            border: 2px dashed #ddd;
+            border-radius: 5px;
+            min-height: 400px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .canvas-area.has-image {
+            border-style: solid;
+            background: #fff;
+        }
+
+        #imageCanvas {
+            max-width: 100%;
+            max-height: 600px;
+            display: none;
+        }
+
+        #imageCanvas.visible {
+            display: block;
+        }
+
+        .placeholder {
+            text-align: center;
+            color: #9ca3af;
+        }
+
+        .placeholder svg {
+            width: 100px;
+            height: 100px;
+            margin-bottom: 20px;
+            opacity: 0.3;
+        }
+
+        .image-info {
+            margin-top: 15px;
+            padding: 15px;
+            background: #f3f4f6;
+            border-radius: 5px;
+            font-size: 0.9em;
+        }
+
+        .image-info div {
+            margin-bottom: 5px;
+        }
+
+        .crop-controls {
+            display: none;
+            padding: 15px;
+            background: #fef3c7;
+            border: 1px solid #fbbf24;
+            border-radius: 5px;
+            margin-top: 10px;
+        }
+
+        .crop-controls.active {
+            display: block;
+        }
+
+        .crop-instructions {
+            margin-bottom: 10px;
+            font-size: 0.9em;
+            color: #92400e;
+        }
+
+        .loading {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.7);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .loading.active {
+            display: flex;
+        }
+
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #667eea;
+            border-radius: 50%;
+            width: 50px;
+            height: 50px;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        #cameraModal {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 1000;
+            align-items: center;
+            justify-content: center;
+        }
+
+        #cameraModal.active {
+            display: flex;
+        }
+
+        .modal-content {
+            background: white;
+            padding: 20px;
+            border-radius: 10px;
+            max-width: 600px;
+            width: 90%;
+        }
+
+        #cameraPreview {
+            width: 100%;
+            border-radius: 5px;
+            margin-bottom: 15px;
+        }
+
+        .modal-buttons {
+            display: flex;
+            gap: 10px;
+        }
+
+        @media (max-width: 768px) {
+            .main-content {
+                grid-template-columns: 1fr;
+            }
+
+            .sidebar {
+                border-right: none;
+                border-bottom: 1px solid #e0e0e0;
+                padding-right: 0;
+                padding-bottom: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <header>
+            <h1>🖼️ ImageTools</h1>
+            <p>Quickly crop, resize, and optimize images for web and email</p>
+        </header>
+
+        <div class="main-content">
+            <div class="sidebar">
+                <div class="section">
+                    <h3>1. Load Image</h3>
+                    <input type="file" id="fileInput" accept="image/*">
+                    <button class="btn" onclick="document.getElementById('fileInput').click()">
+                        📁 Upload Image
+                    </button>
+                    <button class="btn btn-secondary" onclick="openCamera()">
+                        📷 Use Camera
+                    </button>
+                </div>
+
+                <div class="section">
+                    <h3>2. Crop (Optional)</h3>
+                    <button class="btn" id="cropBtn" onclick="enableCrop()" disabled>
+                        ✂️ Enable Crop
+                    </button>
+                    <div class="crop-controls" id="cropControls">
+                        <div class="crop-instructions">
+                            Click and drag on the image to select crop area
+                        </div>
+                        <button class="btn btn-success" onclick="applyCrop()">
+                            ✓ Apply Crop
+                        </button>
+                        <button class="btn" onclick="cancelCrop()">
+                            ✕ Cancel
+                        </button>
+                    </div>
+                </div>
+
+                <div class="section">
+                    <h3>3. Resize</h3>
+                    <div class="preset-buttons">
+                        <button class="preset-btn active" onclick="selectPresetType('email')">Email</button>
+                        <button class="preset-btn" onclick="selectPresetType('web')">Web</button>
+                        <button class="preset-btn" onclick="selectPresetType('social')">Social</button>
+                    </div>
+                    <div class="preset-list active" id="emailPresets"></div>
+                    <div class="preset-list" id="webPresets"></div>
+                    <div class="preset-list" id="socialPresets"></div>
+                    
+                    <div class="form-group">
+                        <label>Custom Width (px):</label>
+                        <input type="number" id="resizeWidth" placeholder="Auto">
+                    </div>
+                    <div class="form-group">
+                        <label>Custom Height (px):</label>
+                        <input type="number" id="resizeHeight" placeholder="Auto">
+                    </div>
+                </div>
+
+                <div class="section">
+                    <h3>4. Optimize</h3>
+                    <div class="form-group">
+                        <label>Format:</label>
+                        <select id="outputFormat">
+                            <option value="JPEG">JPEG (smaller)</option>
+                            <option value="PNG">PNG (lossless)</option>
+                            <option value="WEBP">WebP (modern)</option>
+                        </select>
+                    </div>
+                    <div class="form-group">
+                        <label>Quality (1-100):</label>
+                        <input type="range" id="quality" min="1" max="100" value="85" 
+                               oninput="document.getElementById('qualityValue').textContent = this.value">
+                        <span id="qualityValue">85</span>
+                    </div>
+                </div>
+
+                <div class="section">
+                    <button class="btn btn-success" id="processBtn" onclick="processImage()" disabled>
+                        ⚡ Process & Download
+                    </button>
+                </div>
+            </div>
+
+            <div class="canvas-area" id="canvasArea">
+                <div class="placeholder" id="placeholder">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                        <circle cx="8.5" cy="8.5" r="1.5"/>
+                        <polyline points="21 15 16 10 5 21"/>
+                    </svg>
+                    <h3>No Image Loaded</h3>
+                    <p>Upload an image or capture from camera to get started</p>
+                </div>
+                <canvas id="imageCanvas"></canvas>
+                <div class="image-info" id="imageInfo" style="display: none;"></div>
+            </div>
+        </div>
+    </div>
+
+    <div class="loading" id="loading">
+        <div class="spinner"></div>
+    </div>
+
+    <div id="cameraModal">
+        <div class="modal-content">
+            <h3 style="margin-bottom: 15px;">Camera Capture</h3>
+            <video id="cameraPreview" autoplay></video>
+            <div class="modal-buttons">
+                <button class="btn btn-success" onclick="captureFromCamera()">📸 Capture</button>
+                <button class="btn" onclick="closeCamera()">Cancel</button>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        let currentImage = null;
+        let canvas = document.getElementById('imageCanvas');
+        let ctx = canvas.getContext('2d');
+        let cropMode = false;
+        let cropStart = null;
+        let cropEnd = null;
+        let cameraStream = null;
+
+        // Load presets
+        async function loadPresets() {
+            const types = ['email', 'web', 'social'];
+            for (const type of types) {
+                const response = await fetch(`/presets/${type}`);
+                const presets = await response.json();
+                const container = document.getElementById(`${type}Presets`);
+                container.innerHTML = presets.map(p => 
+                    `<div class="preset-item" onclick="applyPreset(${p.width}, ${p.height})">
+                        ${p.name} (${p.width}x${p.height})
+                    </div>`
+                ).join('');
+            }
+        }
+
+        function selectPresetType(type) {
+            document.querySelectorAll('.preset-btn').forEach(btn => btn.classList.remove('active'));
+            document.querySelectorAll('.preset-list').forEach(list => list.classList.remove('active'));
+            event.target.classList.add('active');
+            document.getElementById(`${type}Presets`).classList.add('active');
+        }
+
+        function applyPreset(width, height) {
+            document.getElementById('resizeWidth').value = width;
+            document.getElementById('resizeHeight').value = height;
+        }
+
+        // File upload
+        document.getElementById('fileInput').addEventListener('change', async (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                await uploadImage(file);
+            }
+        });
+
+        async function uploadImage(file) {
+            showLoading(true);
+            const formData = new FormData();
+            formData.append('file', file);
+
+            try {
+                const response = await fetch('/upload', {
+                    method: 'POST',
+                    body: formData
+                });
+                const data = await response.json();
+                if (data.success) {
+                    displayImage(data.image, data.width, data.height);
+                } else {
+                    alert('Error uploading image: ' + data.error);
+                }
+            } catch (error) {
+                alert('Error uploading image: ' + error.message);
+            } finally {
+                showLoading(false);
+            }
+        }
+
+        // Camera functions
+        async function openCamera() {
+            try {
+                cameraStream = await navigator.mediaDevices.getUserMedia({ video: true });
+                document.getElementById('cameraPreview').srcObject = cameraStream;
+                document.getElementById('cameraModal').classList.add('active');
+            } catch (error) {
+                alert('Error accessing camera: ' + error.message);
+            }
+        }
+
+        function closeCamera() {
+            if (cameraStream) {
+                cameraStream.getTracks().forEach(track => track.stop());
+                cameraStream = null;
+            }
+            document.getElementById('cameraModal').classList.remove('active');
+        }
+
+        async function captureFromCamera() {
+            const video = document.getElementById('cameraPreview');
+            const captureCanvas = document.createElement('canvas');
+            captureCanvas.width = video.videoWidth;
+            captureCanvas.height = video.videoHeight;
+            const captureCtx = captureCanvas.getContext('2d');
+            captureCtx.drawImage(video, 0, 0);
+            
+            const imageData = captureCanvas.toDataURL('image/jpeg');
+            closeCamera();
+            
+            showLoading(true);
+            try {
+                const response = await fetch('/upload', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ image: imageData })
+                });
+                const data = await response.json();
+                if (data.success) {
+                    displayImage(data.image, data.width, data.height);
+                } else {
+                    alert('Error processing camera image: ' + data.error);
+                }
+            } catch (error) {
+                alert('Error processing camera image: ' + error.message);
+            } finally {
+                showLoading(false);
+            }
+        }
+
+        function displayImage(imageDataUrl, width, height) {
+            currentImage = imageDataUrl;
+            
+            const img = new Image();
+            img.onload = () => {
+                canvas.width = img.width;
+                canvas.height = img.height;
+                ctx.drawImage(img, 0, 0);
+                
+                canvas.classList.add('visible');
+                document.getElementById('placeholder').style.display = 'none';
+                document.getElementById('canvasArea').classList.add('has-image');
+                
+                updateImageInfo(width, height, imageDataUrl);
+                
+                document.getElementById('cropBtn').disabled = false;
+                document.getElementById('processBtn').disabled = false;
+            };
+            img.src = imageDataUrl;
+        }
+
+        function updateImageInfo(width, height, dataUrl) {
+            const sizeInBytes = Math.round((dataUrl.length * 3) / 4);
+            const sizeInKB = (sizeInBytes / 1024).toFixed(2);
+            
+            document.getElementById('imageInfo').innerHTML = `
+                <div><strong>Dimensions:</strong> ${width} × ${height} px</div>
+                <div><strong>Size:</strong> ${sizeInKB} KB</div>
+            `;
+            document.getElementById('imageInfo').style.display = 'block';
+        }
+
+        // Crop functionality
+        function enableCrop() {
+            cropMode = true;
+            document.getElementById('cropControls').classList.add('active');
+            canvas.style.cursor = 'crosshair';
+        }
+
+        function cancelCrop() {
+            cropMode = false;
+            cropStart = null;
+            cropEnd = null;
+            document.getElementById('cropControls').classList.remove('active');
+            canvas.style.cursor = 'default';
+            // Redraw image to remove crop rectangle
+            const img = new Image();
+            img.onload = () => ctx.drawImage(img, 0, 0);
+            img.src = currentImage;
+        }
+
+        canvas.addEventListener('mousedown', (e) => {
+            if (!cropMode) return;
+            const rect = canvas.getBoundingClientRect();
+            cropStart = {
+                x: (e.clientX - rect.left) * (canvas.width / rect.width),
+                y: (e.clientY - rect.top) * (canvas.height / rect.height)
+            };
+        });
+
+        canvas.addEventListener('mousemove', (e) => {
+            if (!cropMode || !cropStart) return;
+            const rect = canvas.getBoundingClientRect();
+            cropEnd = {
+                x: (e.clientX - rect.left) * (canvas.width / rect.width),
+                y: (e.clientY - rect.top) * (canvas.height / rect.height)
+            };
+            
+            // Redraw image and crop rectangle
+            const img = new Image();
+            img.onload = () => {
+                ctx.drawImage(img, 0, 0);
+                ctx.strokeStyle = '#667eea';
+                ctx.lineWidth = 2;
+                ctx.strokeRect(
+                    cropStart.x,
+                    cropStart.y,
+                    cropEnd.x - cropStart.x,
+                    cropEnd.y - cropStart.y
+                );
+            };
+            img.src = currentImage;
+        });
+
+        canvas.addEventListener('mouseup', () => {
+            if (cropMode && cropStart && cropEnd) {
+                // Crop is ready
+            }
+        });
+
+        async function applyCrop() {
+            if (!cropStart || !cropEnd) {
+                alert('Please select a crop area first');
+                return;
+            }
+
+            showLoading(true);
+            try {
+                const cropData = {
+                    x: Math.min(cropStart.x, cropEnd.x),
+                    y: Math.min(cropStart.y, cropEnd.y),
+                    width: Math.abs(cropEnd.x - cropStart.x),
+                    height: Math.abs(cropEnd.y - cropStart.y)
+                };
+
+                const response = await fetch('/process', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        image: currentImage,
+                        crop: cropData
+                    })
+                });
+                
+                const data = await response.json();
+                if (data.success) {
+                    displayImage(data.image, data.width, data.height);
+                    cancelCrop();
+                } else {
+                    alert('Error cropping image: ' + data.error);
+                }
+            } catch (error) {
+                alert('Error cropping image: ' + error.message);
+            } finally {
+                showLoading(false);
+            }
+        }
+
+        // Process and download
+        async function processImage() {
+            if (!currentImage) {
+                alert('Please load an image first');
+                return;
+            }
+
+            showLoading(true);
+            try {
+                const processData = {
+                    image: currentImage,
+                    quality: parseInt(document.getElementById('quality').value),
+                    format: document.getElementById('outputFormat').value,
+                    optimize: true
+                };
+
+                const width = document.getElementById('resizeWidth').value;
+                const height = document.getElementById('resizeHeight').value;
+                
+                if (width || height) {
+                    processData.resize = {};
+                    if (width) processData.resize.width = parseInt(width);
+                    if (height) processData.resize.height = parseInt(height);
+                }
+
+                const response = await fetch('/process', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(processData)
+                });
+                
+                const data = await response.json();
+                if (data.success) {
+                    // Update display
+                    displayImage(data.image, data.width, data.height);
+                    
+                    // Trigger download
+                    const link = document.createElement('a');
+                    link.href = data.image;
+                    link.download = `processed_image.${processData.format.toLowerCase()}`;
+                    link.click();
+                    
+                    const sizeInKB = (data.size / 1024).toFixed(2);
+                    alert(`Image processed successfully!\nSize: ${sizeInKB} KB\nDimensions: ${data.width}×${data.height}px`);
+                } else {
+                    alert('Error processing image: ' + data.error);
+                }
+            } catch (error) {
+                alert('Error processing image: ' + error.message);
+            } finally {
+                showLoading(false);
+            }
+        }
+
+        function showLoading(show) {
+            document.getElementById('loading').classList.toggle('active', show);
+        }
+
+        // Initialize
+        loadPresets();
+    </script>
+</body>
+</html>
diff --git a/uploads/.gitkeep b/uploads/.gitkeep
new file mode 100644
index 0000000..e5e0d72
--- /dev/null
+++ b/uploads/.gitkeep
@@ -0,0 +1 @@
+# Keep this directory but not its contents

From 7abc7b22b0eb90db08d3a65efc7aedb2eacbd5b7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Fri, 6 Feb 2026 07:38:08 +0000
Subject: [PATCH 3/3] Fix security vulnerability: Update Pillow to 10.3.0

Co-authored-by: githuba42r <12091914+githuba42r@users.noreply.github.com>
---
 requirements.txt | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/requirements.txt b/requirements.txt
index f06c9a0..18d7442 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,3 +1,3 @@
 Flask==3.0.0
-Pillow==10.2.0
+Pillow==10.3.0
 Werkzeug==3.0.1