Media Processor

😫 The Pain Point

E-commerce managers often have folders full of product images with different sizes and aspect ratios. Uploading these to a website (which usually requires uniform 1000x1000 squares) looks messy. Manually resizing and adding a logo to 500+ images in Photoshop takes hours.

🚀 Agentic Solution

A “Smart Image Processor” that standardizes your entire catalog in seconds with full progress tracking.

Key Features:

• Smart Padding: Adds white borders instead of cropping, preserving the whole product.
• Auto-Scaling: Resizes your watermark so it never covers the product, regardless of image size.
• Batch Processing: Handles thousands of images with progress bar and ETA.
• Error Handling: Skips corrupt images with warnings instead of crashing.

⚔️ Phase 1: Commander (Quick Fix)

For a quick one-off batch.

Prompt:

“I have a folder named input containing varied product images (JPG, PNG). I also have a watermark.png file.

Write a robust Python script using Pillow to process these images:

1. Smart Resize: Resize every image to fit within a 1000x1000 pixel canvas without cropping.
   • Maintain original aspect ratio.
   • Fill any empty space with a white background.
   • Ensure the final output is exactly 1000x1000.
2. Watermark:
   • Overlay watermark.png in the center of the image.
   • Auto-scale: If the watermark is larger than 30% of the canvas width, resize it down to 30% width (maintain aspect ratio).
   • Apply 50% opacity to the watermark.
3. Output: Save processed images to an output folder as JPG (quality=90). Handle RGBA to RGB conversion correctly.

Print a progress log (e.g., ‘Processed 1/500…’). Skip corrupt images with warning.”

Result: A script that processes 500 images in < 1 minute with full error handling.

🏗️ Phase 2: Architect (Permanent Tool)

For regular use by content teams.

Engineering Prompt:

**Role:** Full Stack Developer (Python + HTML)
**Task:** Create a "Hybrid E-commerce Image Processor".

**Requirements:**
1.  **Part 1: Visual Setup (HTML/JS)**
    *   File: `setup_watermark.html`
    *   Features:
        *   Upload Base Image and Watermark preview.
        *   Drag & Drop watermark to set X, Y coordinates.
        *   Sliders: Opacity (0-100%), Scale (0-100%).
        *   Export: `config.json` with all settings.

2.  **Part 2: Batch Processor (Python)**
    *   File: `process_images.py`
    *   Inputs: config.json, images from input/
    *   Logic:
        *   Smart resize to 1000x1000 (white padding).
        *   Apply watermark with config settings.
        *   Save to output/ as JPG (quality=90).
        *   **Progress bar** with ETA.
        *   **Error handling:** Skip corrupt images with warning.

3.  **Deliverables:**
    *   `setup_watermark.html`
    *   `process_images.py`
    *   `config.json` (sample)
    *   `requirements.txt` (Pillow)
    *   `run.bat` and `run.sh`

🧠 Prompt Decoding

• Smart Resize: The request “fit within 1000x1000 without cropping” tells the AI to calculate aspect ratios and apply padding (ImageOps.pad in Pillow), avoiding distorted images.
• Auto-scale: Essential for batch processing. Determining watermark size relative to the canvas (e.g., “30% width”) prevents it from being tiny on 4K images or huge on thumbnails.

🛠️ Instructions

1. Put images in input/ folder.
2. Run the script or use the visual setup tool.
3. Check output/ for standardized, watermarked images.