init

Dockerfile

@@ -0,0 +1,34 @@
+FROM python:3.9-slim
+
+# Set working directory
+WORKDIR /app
+
+# Install system dependencies (if any needed for Pillow)
+# libjpeg-dev zlib1g-dev are usually included in slim or wheels handle it, 
+# but good to be safe if we were building from source. 
+# For standard Pillow wheels, slim is fine.
+# We might need fonts for watermark if we want better than default.
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    fonts-dejavu-core \
+    && rm -rf /var/lib/apt/lists/*
+
+# Copy requirements
+COPY requirements.txt .
+
+# Install python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy application code
+COPY . .
+
+# Create a non-root user (mandatory for HF Spaces)
+RUN useradd -m -u 1000 user
+USER user
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Expose the port
+EXPOSE 7860
+
+# Command to run the app using Gunicorn
+CMD ["gunicorn", "-b", "0.0.0.0:7860", "app:app"]

app.py

@@ -0,0 +1,163 @@
+import os
+import zipfile
+import io
+from flask import Flask, render_template, request, send_file, after_this_request
+from PIL import Image, ImageDraw, ImageFont, ImageOps
+import tempfile
+import shutil
+import time
+
+app = Flask(__name__)
+app.config['MAX_CONTENT_LENGTH'] = 50 * 1024 * 1024  # 50MB limit
+
+def process_image(img, options):
+    # 1. Strip EXIF (by creating a new image)
+    if options.get('strip_exif'):
+        data = list(img.getdata())
+        image_without_exif = Image.new(img.mode, img.size)
+        image_without_exif.putdata(data)
+        img = image_without_exif
+
+    # 2. Resize
+    resize_mode = options.get('resize_mode')
+    if resize_mode == 'percentage':
+        scale = int(options.get('resize_value', 100)) / 100.0
+        if scale != 1.0:
+            new_size = (int(img.width * scale), int(img.height * scale))
+            img = img.resize(new_size, Image.Resampling.LANCZOS)
+    elif resize_mode == 'width':
+        target_width = int(options.get('resize_value', img.width))
+        if target_width != img.width:
+            ratio = target_width / img.width
+            new_size = (target_width, int(img.height * ratio))
+            img = img.resize(new_size, Image.Resampling.LANCZOS)
+
+    # 3. Watermark
+    watermark_text = options.get('watermark_text')
+    if watermark_text:
+        # Create a transparent layer
+        txt_layer = Image.new('RGBA', img.size, (255, 255, 255, 0))
+        draw = ImageDraw.Draw(txt_layer)
+        
+        # Calculate font size (relative to image width)
+        fontsize = int(img.width / 20)
+        if fontsize < 10: fontsize = 10
+        
+        try:
+            # Try to load a default font, otherwise load default
+            # On Linux/Docker, paths might differ. 
+            # We'll use default bitmap font if TTF not found or just try-except
+            font = ImageFont.truetype("DejaVuSans.ttf", fontsize)
+        except IOError:
+            font = ImageFont.load_default()
+            
+        # Position: Bottom Right with padding
+        # Get text size
+        bbox = draw.textbbox((0, 0), watermark_text, font=font)
+        textwidth = bbox[2] - bbox[0]
+        textheight = bbox[3] - bbox[1]
+        
+        padding = 10
+        x = img.width - textwidth - padding
+        y = img.height - textheight - padding
+        
+        # Draw semi-transparent text
+        draw.text((x, y), watermark_text, font=font, fill=(255, 255, 255, 128))
+        
+        if img.mode != 'RGBA':
+            img = img.convert('RGBA')
+            
+        img = Image.alpha_composite(img, txt_layer)
+
+    # 4. Format Conversion handled during save
+    return img
+
+@app.route('/', methods=['GET'])
+def index():
+    return render_template('index.html')
+
+@app.route('/process', methods=['POST'])
+def process():
+    if 'files' not in request.files:
+        return "No files uploaded", 400
+    
+    files = request.files.getlist('files')
+    if not files or files[0].filename == '':
+        return "No files selected", 400
+
+    # Get options
+    target_format = request.form.get('target_format', 'original')
+    resize_mode = request.form.get('resize_mode', 'none') # none, percentage, width
+    resize_value = request.form.get('resize_value', 0)
+    watermark_text = request.form.get('watermark_text', '').strip()
+    strip_exif = 'strip_exif' in request.form
+    
+    options = {
+        'resize_mode': resize_mode,
+        'resize_value': resize_value,
+        'watermark_text': watermark_text,
+        'strip_exif': strip_exif
+    }
+
+    # Create a temporary directory for processing
+    temp_dir = tempfile.mkdtemp()
+    
+    try:
+        zip_buffer = io.BytesIO()
+        with zipfile.ZipFile(zip_buffer, 'w', zipfile.ZIP_DEFLATED) as zip_file:
+            for file in files:
+                if not file.filename:
+                    continue
+                
+                try:
+                    img = Image.open(file.stream)
+                    
+                    # Process
+                    img = process_image(img, options)
+                    
+                    # Determine output filename and format
+                    original_name = os.path.splitext(file.filename)[0]
+                    ext = os.path.splitext(file.filename)[1].lower()
+                    
+                    if target_format != 'original':
+                        ext = '.' + target_format.lower()
+                        if target_format.lower() == 'jpeg':
+                            img = img.convert('RGB')
+                        elif target_format.lower() == 'png':
+                            # Keep RGBA if possible, or convert if needed
+                            pass
+                    
+                    # Save to temp buffer
+                    img_byte_arr = io.BytesIO()
+                    save_format = ext.strip('.').upper()
+                    if save_format == 'JPG': save_format = 'JPEG'
+                    
+                    # Handle WEBP/JPEG quality if needed (using default for now)
+                    img.save(img_byte_arr, format=save_format)
+                    
+                    # Add to ZIP
+                    zip_file.writestr(f"processed/{original_name}{ext}", img_byte_arr.getvalue())
+                    
+                except Exception as e:
+                    print(f"Error processing {file.filename}: {e}")
+                    # Optionally add an error log to the zip
+                    zip_file.writestr(f"processed/errors/{file.filename}.txt", str(e))
+
+        zip_buffer.seek(0)
+        
+        # Cleanup temp dir (we didn't actually write files to disk, just memory, 
+        # but if we did, we'd clean here. The `img_byte_arr` approach avoids disk IO)
+        
+        return send_file(
+            zip_buffer,
+            mimetype='application/zip',
+            as_attachment=True,
+            download_name=f'processed_images_{int(time.time())}.zip'
+        )
+
+    finally:
+        shutil.rmtree(temp_dir)
+
+if __name__ == '__main__':
+    port = int(os.environ.get('PORT', 7860))
+    app.run(host='0.0.0.0', port=port)

requirements.txt

@@ -0,0 +1,3 @@
+Flask>=2.0.0
+Pillow>=9.0.0
+gunicorn>=20.1.0

templates/index.html

@@ -0,0 +1,203 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>批量图片处理工坊 - Batch Image Workshop</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        .drop-zone {
+            border: 2px dashed #cbd5e1;
+            transition: all 0.3s ease;
+        }
+        .drop-zone.dragover {
+            border-color: #3b82f6;
+            background-color: #eff6ff;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen text-gray-800 font-sans">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        <!-- Header -->
+        <header class="text-center mb-10">
+            <h1 class="text-4xl font-bold text-gray-900 mb-2">
+                <i class="fas fa-images text-blue-500 mr-2"></i>批量图片处理工坊
+            </h1>
+            <p class="text-gray-600">
+                完全本地运行（CPU），隐私安全。支持批量缩放、格式转换、水印添加。
+            </p>
+        </header>
+
+        <form action="/process" method="POST" enctype="multipart/form-data" id="processForm" class="bg-white rounded-xl shadow-lg p-6 md:p-8">
+            
+            <!-- Upload Section -->
+            <div class="mb-8">
+                <h2 class="text-xl font-semibold mb-4 flex items-center">
+                    <span class="bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">1</span>
+                    上传图片
+                </h2>
+                <div id="dropZone" class="drop-zone rounded-lg p-10 text-center cursor-pointer hover:bg-gray-50">
+                    <input type="file" name="files" id="fileInput" multiple accept="image/*" class="hidden">
+                    <div class="space-y-3">
+                        <i class="fas fa-cloud-upload-alt text-4xl text-gray-400"></i>
+                        <div class="text-lg text-gray-600">点击或拖拽图片到这里</div>
+                        <p class="text-sm text-gray-400" id="fileCount">支持 JPG, PNG, WEBP 等常见格式</p>
+                    </div>
+                </div>
+                <div id="fileList" class="mt-4 flex flex-wrap gap-2 text-sm text-gray-600"></div>
+            </div>
+
+            <!-- Settings Section -->
+            <div class="mb-8">
+                <h2 class="text-xl font-semibold mb-4 flex items-center">
+                    <span class="bg-blue-100 text-blue-600 rounded-full w-8 h-8 flex items-center justify-center mr-3 text-sm">2</span>
+                    处理选项
+                </h2>
+                
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <!-- Format -->
+                    <div class="space-y-2">
+                        <label class="block font-medium text-gray-700">目标格式</label>
+                        <select name="target_format" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 border">
+                            <option value="original">保持原格式</option>
+                            <option value="jpeg">JPG / JPEG</option>
+                            <option value="png">PNG</option>
+                            <option value="webp">WEBP</option>
+                        </select>
+                    </div>
+
+                    <!-- Resize -->
+                    <div class="space-y-2">
+                        <label class="block font-medium text-gray-700">调整大小</label>
+                        <div class="flex gap-2">
+                            <select name="resize_mode" id="resizeMode" class="w-1/2 border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 border">
+                                <option value="none">不调整</option>
+                                <option value="percentage">按百分比缩放</option>
+                                <option value="width">固定宽度 (保持比例)</option>
+                            </select>
+                            <input type="number" name="resize_value" id="resizeValue" placeholder="100" class="w-1/2 border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 border hidden">
+                        </div>
+                    </div>
+
+                    <!-- Watermark -->
+                    <div class="space-y-2">
+                        <label class="block font-medium text-gray-700">文字水印 (可选)</label>
+                        <input type="text" name="watermark_text" placeholder="例如：@我的版权" class="w-full border-gray-300 rounded-md shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 p-2 border">
+                    </div>
+
+                    <!-- Extras -->
+                    <div class="space-y-2 flex items-center pt-6">
+                        <label class="inline-flex items-center cursor-pointer">
+                            <input type="checkbox" name="strip_exif" class="form-checkbox h-5 w-5 text-blue-600" checked>
+                            <span class="ml-2 text-gray-700">清除 EXIF 信息 (隐私保护)</span>
+                        </label>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Submit -->
+            <div class="text-center">
+                <button type="submit" id="submitBtn" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-10 rounded-full shadow-lg transition duration-200 transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed">
+                    <i class="fas fa-magic mr-2"></i>开始处理并下载
+                </button>
+            </div>
+        </form>
+
+        <footer class="mt-12 text-center text-gray-400 text-sm">
+            <p>&copy; 2026 Batch Image Workshop. Open Source Project.</p>
+        </footer>
+    </div>
+
+    <script>
+        const dropZone = document.getElementById('dropZone');
+        const fileInput = document.getElementById('fileInput');
+        const fileList = document.getElementById('fileList');
+        const fileCount = document.getElementById('fileCount');
+        const resizeMode = document.getElementById('resizeMode');
+        const resizeValue = document.getElementById('resizeValue');
+        const processForm = document.getElementById('processForm');
+        const submitBtn = document.getElementById('submitBtn');
+
+        // Drag & Drop interactions
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('dragover');
+        });
+
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('dragover');
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('dragover');
+            fileInput.files = e.dataTransfer.files;
+            updateFileList();
+        });
+
+        dropZone.addEventListener('click', () => {
+            fileInput.click();
+        });
+
+        fileInput.addEventListener('change', updateFileList);
+
+        function updateFileList() {
+            const files = fileInput.files;
+            if (files.length > 0) {
+                fileCount.innerText = `已选择 ${files.length} 个文件`;
+                fileList.innerHTML = '';
+                // Only show first 5 names
+                Array.from(files).slice(0, 5).forEach(file => {
+                    const span = document.createElement('span');
+                    span.className = 'bg-gray-100 px-2 py-1 rounded border';
+                    span.innerText = file.name;
+                    fileList.appendChild(span);
+                });
+                if (files.length > 5) {
+                    const more = document.createElement('span');
+                    more.innerText = `... 等共 ${files.length} 个文件`;
+                    fileList.appendChild(more);
+                }
+            } else {
+                fileCount.innerText = '支持 JPG, PNG, WEBP 等常见格式';
+                fileList.innerHTML = '';
+            }
+        }
+
+        // Resize inputs logic
+        resizeMode.addEventListener('change', () => {
+            if (resizeMode.value === 'none') {
+                resizeValue.classList.add('hidden');
+            } else {
+                resizeValue.classList.remove('hidden');
+                if (resizeMode.value === 'percentage') {
+                    resizeValue.placeholder = '缩放比例 % (例如 50)';
+                    resizeValue.value = 50;
+                } else {
+                    resizeValue.placeholder = '目标宽度 px (例如 800)';
+                    resizeValue.value = 800;
+                }
+            }
+        });
+
+        // Form Submit
+        processForm.addEventListener('submit', () => {
+            if (fileInput.files.length === 0) {
+                alert('请先上传图片！');
+                event.preventDefault();
+                return;
+            }
+            // Show loading state
+            submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>处理中...';
+            submitBtn.disabled = true;
+            
+            // Re-enable after a few seconds (since download doesn't trigger page reload)
+            setTimeout(() => {
+                submitBtn.innerHTML = '<i class="fas fa-magic mr-2"></i>开始处理并下载';
+                submitBtn.disabled = false;
+            }, 3000);
+        });
+    </script>
+</body>
+</html>