Initialize Hugging Face Space with project files

.gitignore

@@ -0,0 +1,18 @@
+__pycache__/
+*.py[cod]
+*$py.class
+.env
+.venv
+env/
+venv/
+ENV/
+storage/uploads/*
+storage/processed/*
+storage/results/*
+!storage/uploads/.gitkeep
+!storage/processed/.gitkeep
+!storage/results/.gitkeep
+.DS_Store
+.vscode/
+.idea/
+*.log

DOCUMENTATION.md

@@ -0,0 +1,85 @@
+# 📜 ID Maker Studio: Technical Master Documentation
+
+This document serves as the comprehensive technical map for the **EL HELAL Studio Photo Pipeline**.
+
+---
+
+## 🏗 High-Level Architecture
+
+The system is a modular Python-based suite designed to automate the conversion of raw student portraits into professional, print-ready ID sheets. It bridges the gap between complex AI models and a production studio environment.
+
+### 🧩 Component Breakdown
+- **`/core` (The Brain):** Pure logic and AI processing. It is UI-agnostic and handles image math, landmark detection, and layout composition.
+- **`/web` (The Primary Interface):** A modern FastAPI backend coupled with a localized Arabic (RTL) frontend for batch processing.
+- **`/storage` (The Data):** Centralized storage for uploads, processed images, and final results.
+- **`/config` (The Settings):** Stores `settings.json` for global configuration.
+- **`/tools` (The Utilities):** Dev scripts, troubleshooting guides, and verification tools.
+- **`/assets` (The Identity):** Centralized storage for branding assets (logo), typography (Arabic fonts), and color grading LUTs.
+- **`/gui` (Legacy):** A Tkinter desktop wrapper for offline/workstation usage.
+
+---
+
+## 🚀 The 5-Step AI Pipeline
+
+Every photo processed by the studio follows a strictly sequenced pipeline:
+
+### 1. Auto-Crop & Face Detection (`crop.py`)
+- **Technology:** OpenCV Haar Cascades.
+- **Logic:** Detects the largest face, centers it, and calculates a 5:7 (4x6cm) aspect ratio crop.
+- **Fallback:** Centers the crop if no face is detected to ensure the pipeline never breaks.
+
+### 2. AI Background Removal (`process_images.py`)
+- **Model:** **BiRefNet (RMBG-2.0)**.
+- **Optimization:** Automatically detects and utilizes CUDA/GPU. In CPU environments (like HF Spaces), it uses dynamic quantization for speed.
+- **Resilience:** Includes critical monkeypatches for `transformers 4.50+` to handle tied weights and meta-tensor materialization bugs.
+
+### 3. Color Grading Style Transfer (`color_steal.py`)
+- **Mechanism:** Analyzes "Before" and "After" pairs to learn R, G, and B curves.
+- **Smoothing:** Uses **Savitzky-Golay filters** to prevent color banding.
+- **Application:** Applies learned styles via vectorized NumPy operations for near-instant processing.
+
+### 4. Surgical Retouching (`retouch.py`)
+- **Landmarking:** Uses **MediaPipe Face Mesh** (468 points) to generate a precise skin mask, excluding eyes, lips, and hair.
+- **Frequency Separation:** Splits the image into **High Frequency** (texture/pores) and **Low Frequency** (tone/color).
+- **Blemish Removal:** Detects anomalies on the High-Freq layer and inpaints them using surrounding texture. 
+- **Result:** Pores and skin texture are 100% preserved; only defects are removed.
+
+### 5. Layout Composition (`layout_engine.py`)
+- **Rendering:** Composes a 300 DPI canvas for printing.
+- **Localization:** Uses `arabic_reshaper` and `python-bidi` for correct Arabic script rendering.
+- **Dynamic Assets:** Overlays IDs with specific offsets and studio branding (logos).
+
+---
+
+## ⚙️ Configuration & Real-Time Tuning
+
+The system is controlled by `core/settings.json`.
+- **Hot Reloading:** The layout engine reloads this file on **every request**. You can adjust `id_font_size`, `grid_gap`, or `retouch_sensitivity` and see the changes in the next processed photo without restarting the server.
+
+---
+
+## 🐳 Deployment & Cloud Readiness
+
+The project is optimized for high-availability environments.
+
+### Docker Environment
+- **Base:** `python:3.10-slim`.
+- **System Deps:** Requires `libgl1` (OpenCV), `libraqm0` (Font rendering), and `libharfbuzz0b` (Arabic shaping).
+
+### Hugging Face Spaces
+- **Transformers Fix:** Patches `PretrainedConfig` to allow custom model loading without attribute errors.
+- **LFS Support:** Binary files (`.ttf`, `.cube`, `.png`) are managed via Git LFS to ensure integrity.
+
+---
+
+## 🛠 Troubleshooting (Common Pitfalls)
+
+| Issue | Root Cause | Solution |
+|-------|------------|----------|
+| **"Tofu" Boxes in Text** | Missing or corrupted fonts. | Ensure `assets/arialbd.ttf` is not a Git LFS pointer (size > 300KB). |
+| **Meta-Tensor Error** | Transformers 4.50+ CPU bug. | Handled by `torch.linspace` monkeypatch in `process_images.py`. |
+| **Slow Processing** | CPU bottleneck. | Ensure `torch` is using multiple threads or enable CUDA. |
+
+---
+
+*Last Updated: February 2026 — EL HELAL Studio Engineering*

Dockerfile

@@ -0,0 +1,56 @@
+# Use an official Python runtime as a parent image
+# We use the full image to ensure all AI/OpenCV dependencies are compatible
+FROM python:3.10
+
+# Set environment variables
+ENV PYTHONDONTWRITEBYTECODE 1
+ENV PYTHONUNBUFFERED 1
+
+# Install system dependencies for OpenCV, AI models, and Font Rendering
+RUN apt-get update && apt-get install -y \
+    wget \
+    fontconfig \
+    libfontconfig1 \
+    libgl1 \
+    libglib2.0-0 \
+    libsm6 \
+    libxext6 \
+    libxrender1 \
+    libasound2 \
+    fonts-dejavu-core \
+    fonts-liberation \
+    fonts-noto-core \
+    fonts-noto-extra \
+    fonts-noto-color-emoji \
+    libraqm0 \
+    libfreetype6 \
+    libfribidi0 \
+    libharfbuzz0b \
+    libprotobuf-dev \
+    protobuf-compiler \
+    && rm -rf /var/lib/apt/lists/*
+
+# Set the working directory in the container
+WORKDIR /app
+
+# Download high-quality fonts to bypass Git LFS issues
+RUN mkdir -p assets && \
+    wget -O assets/tahomabd.ttf "https://raw.githubusercontent.com/Esmaill1/color-stealer/main/tahomabd.ttf" && \
+    wget -O assets/TYBAH.TTF "https://raw.githubusercontent.com/Esmaill1/color-stealer/main/TYBAH.TTF" && \
+    wget -O assets/arialbd.ttf "https://raw.githubusercontent.com/Esmaill1/color-stealer/main/arialbd.ttf"
+
+# Copy the requirements file into the container
+COPY requirements.txt .
+
+# Install any needed packages specified in requirements.txt
+# We use --no-cache-dir to keep the image small
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy the rest of the application code
+COPY . .
+
+# Expose port 7860 for Hugging Face Spaces
+EXPOSE 7860
+
+# Run the server
+CMD ["python", "web/server.py"]

assets/My_Style.cube

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:66f671e50af9d77272208ed587a7bb50e26a9007573487852064e09b04a6779f
+size 7077935

assets/TYBAH.TTF

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:8d7d030e8d87bf1811cab4d350a632bd330a99b2c24746d89e823a2ab20c6474
+size 83612

assets/arialbd.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:df70597f0bdf49da3af270138f8a34396e4f5618c671a1db3480e626f38aaece
+size 352224

bucket.py

@@ -0,0 +1,50 @@
+import os
+import boto3
+import urllib3
+
+urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning)
+
+# Hardcoded
+ENDPOINT_URL = 'https://ba1add5d3df1b47fa4893182b8f5761e.eu.r2.cloudflarestorage.comhttps://ba1add5d3df1b47fa4893182b8f5761e.r2.cloudflarestorage.com'
+BUCKET_NAME = 'fonts'
+ACCESS_KEY_ID = '915b4668f3b146f10a869c753f0d6a12'
+SECRET_ACCESS_KEY = 'bcb6246a36b9732a9e1accf3fb7e3004d2cb130f46dd4c393408a3ef4433b869'
+LOCAL_DOWNLOAD_DIR = 'downloaded_fonts'
+
+print(f"Connecting to: {ENDPOINT_URL}")
+print(f"Bucket: {BUCKET_NAME}")
+
+s3 = boto3.client(
+    's3',
+    endpoint_url=ENDPOINT_URL,
+    aws_access_key_id=ACCESS_KEY_ID,
+    aws_secret_access_key=SECRET_ACCESS_KEY,
+    verify=False
+)
+
+if not os.path.exists(LOCAL_DOWNLOAD_DIR):
+    os.makedirs(LOCAL_DOWNLOAD_DIR)
+    print(f"Created: {LOCAL_DOWNLOAD_DIR}")
+
+print("Downloading files...")
+paginator = s3.get_paginator('list_objects_v2')
+file_count = 0
+
+try:
+    for page in paginator.paginate(Bucket=BUCKET_NAME):
+        if 'Contents' in page:
+            for obj in page['Contents']:
+                key = obj['Key']
+                local_path = os.path.join(LOCAL_DOWNLOAD_DIR, key)
+                
+                local_dir = os.path.dirname(local_path)
+                if local_dir and not os.path.exists(local_dir):
+                    os.makedirs(local_dir)
+                
+                print(f"  Downloading: {key}")
+                s3.download_file(BUCKET_NAME, key, local_path)
+                file_count += 1
+    
+    print(f"\n✓ Done! Downloaded {file_count} files to {LOCAL_DOWNLOAD_DIR}")
+except Exception as e:
+    print(f"✗ Error: {e}")

config/settings.json

@@ -0,0 +1,57 @@
+{
+    "layout": {
+        "dpi": 300,
+        "output_w_cm": 25.7,
+        "output_h_cm": 12.7,
+        "grid_rows": 2,
+        "grid_cols": 4,
+        "grid_gap": 10,
+        "grid_margin": 15,
+        "photo_bottom_pad_cm": 0.7,
+        "brand_border": 50,
+        "section_gap": 5
+    },
+    "overlays": {
+        "logo_size_small": 70,
+        "logo_size_large": 95,
+        "logo_margin": 8,
+        "id_font_size": 63,
+        "name_font_size": 42,
+        "date_font_size": 19,
+        "large_date_font_size": 24,
+        "id_lift_offset": 45,
+        "id_char_spacing": -8
+    },
+    "retouch": {
+        "enabled": true,
+        "sensitivity": 3,
+        "tone_smoothing": 0.6
+    },
+    "colors": {
+        "maroon": [
+            139,
+            69,
+            19
+        ],
+        "dark_red": [
+            180,
+            0,
+            0
+        ],
+        "gold": [
+            200,
+            150,
+            12
+        ],
+        "white": [
+            255,
+            255,
+            255
+        ],
+        "text_dark": [
+            60,
+            60,
+            60
+        ]
+    }
+}

context.md

@@ -0,0 +1,79 @@
+# 🧠 Project Context: ID Maker Studio (EL HELAL Pipeline)
+
+This document provides a high-level overview of the project's intent, architecture, and critical technical state for developers and AI agents.
+
+---
+
+## 🎯 Project Intent
+**ID Maker Studio** is a professional-grade image processing pipeline designed for **EL HELAL Studio**. Its primary goal is to automate the conversion of raw student portraits into high-resolution (300 DPI), print-ready ID sheets. 
+
+The system handles everything from blemish removal and color grading to complex Arabic typography and branding.
+
+---
+
+## 🏗 High-Level Architecture
+
+The project is strictly modular, separating core business logic from user interfaces.
+
+### 1. The Brain (`/core`)
+- **Pipeline Orchestration:** Sequentially runs 5 critical steps.
+- **AI Logic:**
+    - **Crop:** OpenCV-based face detection (5:7 ratio).
+    - **Background Removal:** BiRefNet (RMBG-2.0) running on CPU (quantized).
+    - **Retouching:** MediaPipe Face Mesh + Frequency Separation (preserves 100% skin texture).
+    - **Color Steal:** Custom algorithm to learn and apply professional color curves.
+- **Layout Engine:** Composite engine using Pillow. Handles complex Arabic script via manual shaping and reordering.
+
+### 2. The Interfaces
+- **Web Interface (`/web`):** The primary production tool. Built with FastAPI and a localized Arabic (RTL) frontend.
+    - **3-Column Layout:** Queue (Right) — Preview (Center) — Options & Settings (Left).
+    - **Dark/Light Theme:** Toggleable via header button, persisted in localStorage.
+    - **Batch Processing Counter:** Shows `1/5`, `2/5`... overlay with dim background during batch processing.
+    - **Per-Image Delete:** Hover delete button on each queue item.
+    - **Settings API:** Real-time slider-based tuning of retouch sensitivity, skin smoothing, font sizes — saved to `config/settings.json`.
+    - **Keyboard Shortcuts:** Arrow navigation, Delete, Enter (save & next), Ctrl+S (process), Escape.
+    - **Before/After Toggle:** Quick comparison between original and processed result.
+    - **Zoom Modal:** Scroll-wheel zoom for detailed inspection.
+    - **Mobile Drawer:** Responsive drawer for queue on mobile devices.
+- **Desktop GUI (`/gui`):** Legacy Tkinter application for offline machine usage.
+
+### 3. Data & Config
+- **`/storage`:** Managed directory for uploads, processing, and results.
+- **`/config`:** Centralized `settings.json` for real-time layout tuning (DPI, margins, font sizes).
+- **`/assets`:** Branding marks and font files.
+
+---
+
+## 🚀 Deployment & Environment
+
+- **Infrastructure:** Optimized for **Docker** and **Hugging Face Spaces**.
+- **Hardware Context:** Targeted for **2 CPUs / 16GB RAM**. 
+    - RAM allows for large image buffers.
+    - CPU is the bottleneck; inference is sequential and quantized.
+- **Binary Management:** Uses a hybrid approach. Smaller assets in Git; critical fonts are **automatically downloaded from GitHub** during Docker build to bypass Git LFS issues.
+
+---
+
+## ⚠️ Critical Technical "Gotchas"
+
+- **Arabic Rendering:** In the container environment (standard LTR), Arabic is rendered by:
+    1. Reshaping characters (connecting letters).
+    2. **Manually reversing** the string characters to ensure correct visual flow without requiring `libraqm`.
+- **MediaPipe Stability:** Explicitly imports submodules and includes safety checks to skip retouching if binary dependencies fail to initialize.
+- **Transformers Monkeypatch:** Contains deep patches in `process_images.py` to handle `transformers 4.50+` tied-weight and meta-tensor bugs on CPU.
+- **Dynamic Config:** `layout_engine.py` reloads `settings.json` on every request to allow "live" tuning of the output.
+
+---
+
+## 📂 Quick File Map
+- `web/server.py`: FastAPI entry point. Includes Settings API (`GET/POST /settings`).
+- `web/web_storage/index.html`: 3-column RTL frontend (Queue | Preview | Options).
+- `core/layout_engine.py`: Final sheet composition logic.
+- `core/retouch.py`: Advanced skin processing.
+- `config/settings.json`: Live-reloadable settings (retouch sensitivity, font sizes, etc.).
+- `Dockerfile`: Production environment definition.
+- `tools/problems.md`: Historical log of technical hurdles and fixes.
+
+---
+
+*Last Updated: February 2026 — Web UI v2 (3-Column Layout, Batch Counter, Theme Toggle)*

core/My_Style.cube

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:66f671e50af9d77272208ed587a7bb50e26a9007573487852064e09b04a6779f
+size 7077935

core/__init__.py

@@ -0,0 +1 @@
+# Core logic package

core/color_steal.py

@@ -0,0 +1,377 @@
+import numpy as np
+import os
+from PIL import Image
+from scipy.interpolate import interp1d
+from scipy.signal import savgol_filter
+
+# This file stores the learned color curves so we don't need to re-train every time
+_DIR = os.path.dirname(os.path.abspath(__file__))
+MODEL_CACHE = os.path.join(_DIR, "trained_curves.npz")
+
+
+def get_pairs_from_folders(before_folder, after_folder):
+    """
+    Scans 'before' and 'after' folders to find matching image pairs based on filenames.
+    Assumes files are named like '12_d.jpg' and '12_l.jpg' where '12' is the common prefix.
+    """
+    before_files = {}
+    after_files = {}
+    valid_ext = (".jpg", ".jpeg", ".png", ".tif", ".tiff")
+
+    # 1. Index 'before' files by their numeric prefix
+    for f in os.listdir(before_folder):
+        if f.lower().endswith(valid_ext):
+            prefix = f.split("_")[0]  # e.g. "12" from "12_d.jpg"
+            before_files[prefix] = os.path.join(before_folder, f)
+
+    # 2. Index 'after' files by their numeric prefix
+    for f in os.listdir(after_folder):
+        if f.lower().endswith(valid_ext):
+            prefix = f.split("_")[0]
+            after_files[prefix] = os.path.join(after_folder, f)
+
+    # 3. Match them up
+    pairs = []
+    matched = sorted(set(before_files.keys()) & set(after_files.keys()))
+    for prefix in matched:
+        pairs.append((before_files[prefix], after_files[prefix]))
+
+    # log unmatched files for debugging
+    unmatched_before = set(before_files.keys()) - set(after_files.keys())
+    unmatched_after = set(after_files.keys()) - set(before_files.keys())
+    if unmatched_before:
+        print(
+            f"   Warning: No match in after/ for: {[before_files[p] for p in unmatched_before]}"
+        )
+    if unmatched_after:
+        print(
+            f"   Warning: No match in before/ for: {[after_files[p] for p in unmatched_after]}"
+        )
+
+    print(f"   Found {len(pairs)} matched pairs")
+    return pairs
+
+
+def extract_curves_from_pairs(pairs):
+    """
+    The CORE function. It analyzes pixel differences between raw (before) and edited (after) photos
+    to "learn" the color grading style.
+
+    Returns:
+        luts: A list of 3 arrays [Red_Curve, Green_Curve, Blue_Curve] representing the color mapping.
+    """
+    # We'll store every single pixel value from all images here
+    channel_src = [[], [], []]  # R, G, B source pixels (Before)
+    channel_tgt = [[], [], []]  # R, G, B target pixels (After)
+
+    for i, (raw_path, edited_path) in enumerate(pairs, 1):
+        print(f"   Loading pair {i}/{len(pairs)}: {raw_path} -> {edited_path}")
+
+        raw_ref = np.array(Image.open(raw_path).convert("RGB"))
+        edited_ref = np.array(Image.open(edited_path).convert("RGB"))
+
+        # Safety check: if edited image was cropped/resized, scale it to match the raw source
+        if raw_ref.shape != edited_ref.shape:
+            edited_ref = np.array(
+                Image.open(edited_path)
+                .convert("RGB")
+                .resize((raw_ref.shape[1], raw_ref.shape[0]), Image.Resampling.LANCZOS)
+            )
+
+        # Flatten image into a long list of pixels and add to our big collection
+        for ch in range(3):
+            channel_src[ch].append(raw_ref[:, :, ch].flatten())
+            channel_tgt[ch].append(edited_ref[:, :, ch].flatten())
+
+    # Combine data from all images into one massive array per channel
+    for ch in range(3):
+        channel_src[ch] = np.concatenate(channel_src[ch])
+        channel_tgt[ch] = np.concatenate(channel_tgt[ch])
+
+    total_pixels = len(channel_src[0])
+    print(f"   Total training pixels: {total_pixels:,} (from {len(pairs)} pairs)")
+
+    # Build the LUT (Look Up Table) for each channel (R, G, B)
+    luts = []
+    channel_names = ["Red", "Green", "Blue"]
+    x_bins = np.arange(256)  # Input pixel values 0-255
+
+    for ch in range(3):
+        src_flat = channel_src[ch]
+        tgt_flat = channel_tgt[ch]
+
+        # Calculate average target value for every possible input value (0-255)
+        # e.g., "When input Red is 100, what is the average output Red?"
+        y_means = []
+        y_counts = []
+        for val in x_bins:
+            mask = src_flat == val
+            count = np.sum(mask)
+            if count > 0:
+                y_means.append(np.mean(tgt_flat[mask]))
+                y_counts.append(count)
+            else:
+                y_means.append(np.nan)  # No data for this specific pixel value
+                y_counts.append(0)
+
+        y_means = np.array(y_means)
+        y_counts = np.array(y_counts)
+
+        # Report how much of the color range we actually saw
+        coverage = np.sum(y_counts > 0)
+        print(f"   {channel_names[ch]}: {coverage}/256 values covered")
+
+        valid_mask = ~np.isnan(y_means)
+        if not valid_mask.any():
+            print(f"   ERROR: {channel_names[ch]} channel has no data!")
+            return None
+
+        # --- Weighting Logic ---
+        # We trust values that appeared frequently in the images more than rare pixel values.
+        max_count = np.max(y_counts[y_counts > 0])
+
+        # Weighted interpolation: if we have low confidence in a value (low count),
+        # allow it to be smoothed by its neighbors.
+        y_means_weighted = y_means.copy()
+        for i in np.where(valid_mask)[0]:
+            if y_counts[i] < 100:  # If we saw this pixel value fewer than 100 times...
+                # Look at neighbors to sanity check
+                neighbors = y_means[max(0, i - 2) : min(256, i + 3)]
+                valid_neighbors = neighbors[~np.isnan(neighbors)]
+                if len(valid_neighbors) > 0:
+                    y_means_weighted[i] = np.mean(valid_neighbors)
+
+        # Fill in missing values using linear interpolation
+        interpolator = interp1d(
+            x_bins[valid_mask],
+            y_means_weighted[valid_mask],
+            kind="linear",
+            fill_value="extrapolate",
+            bounds_error=False,
+        )
+
+        full_lut = interpolator(np.arange(256))
+
+        # --- Smoothing ---
+        # Apply Savitzky-Golay filter to make the curve smooth and "organic"
+        # This prevents color banding in the final image.
+        try:
+            full_lut = savgol_filter(full_lut, window_length=11, polyorder=2)
+        except ValueError:
+            # Fallback for small datasets
+            full_lut = savgol_filter(full_lut, window_length=5, polyorder=1)
+
+        # Ensure values stay valid (0-255) and integer type
+        full_lut = full_lut.clip(0, 255).astype(np.uint8)
+        luts.append(full_lut)
+
+    return luts
+
+
+def save_trained_curves(luts, filename=None):
+    """Saves trained LUT curves to disk (as a .npz file)."""
+    filename = filename or MODEL_CACHE
+    np.savez(filename, r=luts[0], g=luts[1], b=luts[2])
+    print(f"   Curves saved to {filename}")
+
+
+def load_trained_curves(filename=None):
+    """
+    Checks for a saved model file.
+    Returns the curves (array) if found, logic None otherwise.
+    """
+    filename = filename or MODEL_CACHE
+    if not os.path.exists(filename):
+        return None
+
+    data = np.load(filename)
+    print(f"   Loaded cached curves from {filename} (skipping training)")
+    return [data["r"], data["g"], data["b"]]
+
+
+def save_cube_file(luts, filename, lut_size=64):
+    """
+    Exports the style as a standard .cube file.
+    Use this file in Photoshop, Premiere, DaVinci Resolve, OBS, etc.
+    """
+    print(f"   Saving {lut_size}x{lut_size}x{lut_size} .cube file: {filename}")
+
+    with open(filename, "w") as f:
+        f.write(f'TITLE "Multi_Pair_Style_Match"\n')
+        f.write(f"LUT_3D_SIZE {lut_size}\n\n")
+
+        # Generate the 3D grid and apply our learned curves to it
+        domain = np.linspace(0, 255, lut_size).astype(int)
+        for b_val in domain:
+            for g_val in domain:
+                for r_val in domain:
+                    # Apply R, G, B curves independently
+                    new_r = luts[0][r_val] / 255.0
+                    new_g = luts[1][g_val] / 255.0
+                    new_b = luts[2][b_val] / 255.0
+                    f.write(f"{new_r:.6f} {new_g:.6f} {new_b:.6f}\n")
+
+    print(f"   .cube file saved!")
+
+
+def apply_to_folder(luts, target_folder, output_folder):
+    """
+    Takes the learned curves and applies them to every image in 'target_folder'.
+    Saves result to 'output_folder'.
+    """
+    if not os.path.exists(output_folder):
+        os.makedirs(output_folder)
+
+    files = [
+        f
+        for f in os.listdir(target_folder)
+        if f.lower().endswith((".jpg", ".jpeg", ".png", ".tif", ".tiff"))
+    ]
+
+    if not files:
+        print(f"   No images found in {target_folder}")
+        return
+
+    print(f"   Processing {len(files)} images...")
+    for filename in files:
+        img_path = os.path.join(target_folder, filename)
+        img = Image.open(img_path)
+        original_format = img.format  # Preserve original format info
+
+        # Handle Transparency (Alpha Channel):
+        # We must separate the alpha channel, grade the RGB channels, then put alpha back.
+        has_alpha = img.mode in ("RGBA", "LA", "PA")
+        alpha_channel = None
+
+        if has_alpha:
+            img_rgba = img.convert("RGBA")
+            alpha_channel = np.array(img_rgba)[:, :, 3]  # Save the transparency layer
+            img_rgb = img_rgba.convert("RGB")
+            print(f"   (Transparent PNG detected — alpha will be preserved)")
+        else:
+            img_rgb = img.convert("RGB")
+
+        img_array = np.array(img_rgb)
+
+        # Apply LUT per channel (Vectorized operation = very fast)
+        result_array = img_array.copy()
+        for ch in range(3):
+            # Map every pixel value using our lookup table
+            result_array[:, :, ch] = luts[ch][img_array[:, :, ch]]
+
+        # RESTORE Alpha Channel
+        if has_alpha and alpha_channel is not None:
+            result_rgba = np.dstack((result_array, alpha_channel))
+            result_img = Image.fromarray(result_rgba, "RGBA")
+        else:
+            result_img = Image.fromarray(result_array)
+
+        # Preserve EXIF metadata (camera settings, date, etc.)
+        exif_data = img.info.get("exif", None)
+
+        # Save options based on file type
+        name, ext = os.path.splitext(filename)
+        save_path = os.path.join(output_folder, f"Graded_{filename}")
+
+        save_kwargs = {}
+        if exif_data:
+            save_kwargs["exif"] = exif_data
+
+        if ext.lower() in (".jpg", ".jpeg"):
+            if has_alpha:  # JPG can't store alpha, must convert to RGB
+                result_img = result_img.convert("RGB")
+            save_kwargs["quality"] = 100
+            save_kwargs["subsampling"] = 0  # Highest color quality (4:4:4)
+        elif ext.lower() == ".png":
+            save_kwargs["compress_level"] = 1  # Low compression = faster
+        elif ext.lower() in (".tif", ".tiff"):
+            save_kwargs["compression"] = "tiff_lzw"
+
+        result_img.save(save_path, **save_kwargs)
+        print(f"   Done: {filename} ({img_array.shape[1]}x{img_array.shape[0]})")
+    print(f"   All images saved at original resolution & maximum quality.")
+
+
+def apply_to_image(luts, img: Image.Image) -> Image.Image:
+    """
+    Applies the learned curves to a single PIL Image and returns the result.
+    Handles transparency (alpha channel) correctly.
+    """
+    # Handle Transparency (Alpha Channel)
+    has_alpha = img.mode in ("RGBA", "LA", "PA")
+    alpha_channel = None
+
+    if has_alpha:
+        img_rgba = img.convert("RGBA")
+        alpha_channel = np.array(img_rgba)[:, :, 3]  # Save the transparency layer
+        img_rgb = img_rgba.convert("RGB")
+    else:
+        img_rgb = img.convert("RGB")
+
+    img_array = np.array(img_rgb)
+
+    # Apply LUT per channel
+    result_array = img_array.copy()
+    for ch in range(3):
+        result_array[:, :, ch] = luts[ch][img_array[:, :, ch]]
+
+    # Restore Alpha Channel
+    if has_alpha and alpha_channel is not None:
+        result_rgba = np.dstack((result_array, alpha_channel))
+        return Image.fromarray(result_rgba, "RGBA")
+    else:
+        return Image.fromarray(result_array)
+
+
+if __name__ == "__main__":
+    # ==========================================
+    #              EXECUTION SECTION
+    # ==========================================
+
+    # Folder setup
+    BEFORE_FOLDER = "./before"
+    AFTER_FOLDER = "./after"
+
+    # 1. Attempt to load existing model first to save time
+    luts = load_trained_curves()
+
+    # 2. If NO model helps, we attempt to learn from images
+    if luts is None:
+        # Check if folders actually exist before crashing
+        if os.path.exists(BEFORE_FOLDER) and os.path.exists(AFTER_FOLDER):
+            pairs = get_pairs_from_folders(BEFORE_FOLDER, AFTER_FOLDER)
+
+            if not pairs:
+                # Error only if we have NO model AND NO training data
+                print(
+                    "ERROR: No matching pairs found. Make sure before/ and after/ folders"
+                )
+                print(
+                    "       have images with matching prefixes (e.g. 12_d.jpg <-> 12_l.jpg)"
+                )
+            else:
+                print("=" * 50)
+                print("PHASE 1: Learning Color Grade")
+                print("=" * 50)
+                luts = extract_curves_from_pairs(pairs)
+                if luts:
+                    save_trained_curves(luts)  # Cache for next time
+        else:
+            print("Model not found and training folders are missing. Cannot proceed.")
+
+    # 3. If we successfully loaded or learned the style, apply it
+    if luts:
+        # Export .cube file (LUT) for external use
+        if not os.path.exists("My_Style.cube"):
+            print("\n" + "=" * 50)
+            print("PHASE 2: Exporting .cube LUT")
+            print("=" * 50)
+            save_cube_file(luts, "My_Style.cube", lut_size=64)
+        else:
+            print("\n   My_Style.cube already exists, skipping export.")
+
+        # Batch-apply to all photos in the 'crop' folder
+        print("\n" + "=" * 50)
+        print("PHASE 3: Batch Processing")
+        print("=" * 50)
+        apply_to_folder(luts, "./trans", "./colored")

core/crop.py

@@ -0,0 +1,113 @@
+import cv2
+import os
+from PIL import Image
+import sys
+import cv2.data
+import numpy as np
+
+# Locate the standard frontal face XML classifier provided by OpenCV
+cascade_path = os.path.join(
+    cv2.data.haarcascades, "haarcascade_frontalface_default.xml"
+)
+face_cascade = cv2.CascadeClassifier(cascade_path)
+
+
+def _load_image_exif_safe(image_path):
+    """Loads an image using PIL, handles EXIF orientation, and converts to OpenCV BGR."""
+    try:
+        from PIL import ImageOps
+        pil_img = Image.open(image_path)
+        pil_img = ImageOps.exif_transpose(pil_img)
+        # Convert to BGR for OpenCV
+        return cv2.cvtColor(np.array(pil_img.convert("RGB")), cv2.COLOR_RGB2BGR)
+    except Exception as e:
+        print(f"Error loading image safe: {e}")
+        return None
+
+
+def get_auto_crop_rect(image_path):
+    """
+    Detects a face and calculates the 5:7 crop rectangle.
+    Returns (x1, y1, x2, y2) in original image coordinates or None.
+    """
+    image = _load_image_exif_safe(image_path)
+    if image is None:
+        return None
+    h, w, _ = image.shape
+    gray = cv2.cvtColor(image, cv2.COLOR_BGR2GRAY)
+    faces = face_cascade.detectMultiScale(gray, scaleFactor=1.1, minNeighbors=5)
+
+    if len(faces) == 0:
+        # Fallback: Center crop if no face found
+        aspect_ratio = 5 / 7
+        crop_h = int(h * 0.8)
+        crop_w = int(crop_h * aspect_ratio)
+        x1 = (w - crop_w) // 2
+        y1 = (h - crop_h) // 2
+        return (x1, y1, x1 + crop_w, y1 + crop_h)
+
+    faces = sorted(faces, key=lambda x: x[2] * x[3], reverse=True)
+    (x, y, fw, fh) = faces[0]
+    cx, cy = x + fw // 2, y + fh // 2
+    aspect_ratio = 5 / 7
+
+    crop_height = int(min(h, w / aspect_ratio) * 0.7)
+    crop_width = int(crop_height * aspect_ratio)
+
+    head_top = y - int(fh * 0.35)
+    HEAD_SPACE_RATIO = 0.10
+    y1 = max(0, head_top - int(crop_height * HEAD_SPACE_RATIO))
+    x1 = max(0, cx - crop_width // 2)
+
+    x2 = min(w, x1 + crop_width)
+    y2 = min(h, y1 + crop_height)
+
+    # Adjust to maintain size
+    if x2 - x1 < crop_width:
+        x1 = max(0, x2 - crop_width)
+    if y2 - y1 < crop_height:
+        y1 = max(0, y2 - crop_height)
+
+    return (int(x1), int(y1), int(x1 + crop_width), int(y1 + crop_height))
+
+
+def apply_custom_crop(image_path, output_path, rect):
+    """
+    Applies a specific (x1, y1, x2, y2) crop and resizes to 10x14cm @ 300DPI.
+    """
+    x1, y1, x2, y2 = rect
+    try:
+        image = _load_image_exif_safe(image_path)
+        if image is None: return False
+
+        cropped = image[y1:y2, x1:x2]
+        final = cv2.resize(cropped, (1181, 1654))
+        final_rgb = cv2.cvtColor(final, cv2.COLOR_BGR2RGB)
+        pil_img = Image.fromarray(final_rgb)
+        pil_img.save(output_path, dpi=(300, 300), quality=95)
+        return True
+    except Exception as e:
+        print(f"Error applying custom crop: {e}")
+        return False
+
+
+def crop_to_4x6_opencv(image_path, output_path):
+    """Standard AI auto-crop."""
+    rect = get_auto_crop_rect(image_path)
+    if rect:
+        return apply_custom_crop(image_path, output_path, rect)
+    return False
+
+
+def batch_process(input_folder, output_folder):
+    if not os.path.exists(output_folder):
+        os.makedirs(output_folder)
+    files = [
+        f
+        for f in os.listdir(input_folder)
+        if f.lower().endswith((".jpg", ".jpeg", ".png"))
+    ]
+    for filename in files:
+        crop_to_4x6_opencv(
+            os.path.join(input_folder, filename), os.path.join(output_folder, filename)
+        )

core/layout_engine.py

@@ -0,0 +1,318 @@
+"""
+EL HELAL Studio – Photo Layout Engine
+Dynamically loads settings from settings.json
+"""
+
+from PIL import Image, ImageDraw, ImageFont, features
+import arabic_reshaper
+from bidi.algorithm import get_display
+import os
+import json
+from datetime import date
+
+# ──────────────────────────────────────────────────────────────
+# Paths & Config Loading
+# ──────────────────────────────────────────────────────────────
+# Use the directory of this script as a base
+_CORE_DIR = os.path.dirname(os.path.abspath(__file__))
+# The project root is one level up from 'core'
+_ROOT_DIR = os.path.abspath(os.path.join(_CORE_DIR, ".."))
+
+# Search for assets in both 'assets' folder and locally
+def find_asset(filename):
+    # 1. Try assets/ folder in root
+    p1 = os.path.join(_ROOT_DIR, "assets", filename)
+    if os.path.exists(p1): return p1
+    # 2. Try locally in core/
+    p2 = os.path.join(_CORE_DIR, filename)
+    if os.path.exists(p2): return p2
+    # 3. Try root directly
+    p3 = os.path.join(_ROOT_DIR, filename)
+    if os.path.exists(p3): return p3
+    return p1 # Fallback to default path
+
+LOGO_PATH = find_asset("logo.png")
+ARABIC_FONT_PATH = find_asset("TYBAH.TTF")
+SETTINGS_PATH = os.path.join(_ROOT_DIR, "config", "settings.json")
+
+def load_settings():
+    defaults = {
+        "layout": {
+            "dpi": 300, "output_w_cm": 25.7, "output_h_cm": 12.7,
+            "grid_rows": 2, "grid_cols": 4, "grid_gap": 10, "grid_margin": 15,
+            "photo_bottom_pad_cm": 0.7, "brand_border": 50, "section_gap": 5
+        },
+        "overlays": {
+            "logo_size_small": 77, "logo_size_large": 95, "logo_margin": 8,
+            "id_font_size": 50, "name_font_size": 30, "date_font_size": 19,
+            "large_date_font_size": 24, "id_lift_offset": 45, "id_char_spacing": -3
+        },
+        "colors": {
+            "maroon": [60, 0, 0], "dark_red": [180, 0, 0], "gold": [200, 150, 12],
+            "white": [255, 255, 255], "text_dark": [60, 60, 60]
+        },
+        "retouch": {
+            "enabled": True, "sensitivity": 3.0, "tone_smoothing": 0.6
+        }
+    }
+    if os.path.exists(SETTINGS_PATH):
+        try:
+            with open(SETTINGS_PATH, "r") as f:
+                user_settings = json.load(f)
+                # Merge user settings into defaults
+                for key, val in user_settings.items():
+                    if key in defaults and isinstance(val, dict):
+                        defaults[key].update(val)
+                    else:
+                        defaults[key] = val
+        except Exception as e:
+            print(f"Error loading settings.json: {e}")
+    return defaults
+
+S = load_settings()
+
+# Derived Constants
+DPI = S["layout"]["dpi"]
+OUTPUT_WIDTH  = round(S["layout"]["output_w_cm"] / 2.54 * DPI)
+OUTPUT_HEIGHT = round(S["layout"]["output_h_cm"] / 2.54 * DPI)
+PHOTO_BOTTOM_PAD = round(S["layout"]["photo_bottom_pad_cm"] / 2.54 * DPI)
+
+def c(key): return tuple(S["colors"][key])
+WHITE = c("white")
+MAROON = c("maroon")
+DARK_RED = c("dark_red")
+TEXT_DARK = c("text_dark")
+
+# ──────────────────────────────────────────────────────────────
+# Helpers
+# ──────────────────────────────────────────────────────────────
+
+def _load_logo() -> Image.Image | None:
+    if os.path.exists(LOGO_PATH):
+        try: 
+            return Image.open(LOGO_PATH).convert("RGBA")
+        except Exception as e:
+            print(f"Error loading logo from {LOGO_PATH}: {e}")
+    else:
+        print(f"Logo not found at: {LOGO_PATH}")
+    return None
+
+def _load_font_with_fallback(size: int, is_arabic: bool = False) -> ImageFont.FreeTypeFont:
+    """Aggressive font loader with deep system search."""
+    # 1. Assets (Downloaded via Dockerfile - Guaranteed binary files if links work)
+    candidates = [
+        os.path.join(_ROOT_DIR, "assets", "arialbd.ttf"),
+        os.path.join(_ROOT_DIR, "assets", "tahomabd.ttf"),
+        os.path.join(_ROOT_DIR, "assets", "TYBAH.TTF")
+    ]
+    
+    # 2. Add System Fonts based on priority
+    if os.name == "nt": # Windows
+        candidates += ["C:/Windows/Fonts/arialbd.ttf", "C:/Windows/Fonts/tahomabd.ttf"]
+    else: # Linux / Docker - SCAN SYSTEM
+        # We look for Noto (Arabic) and DejaVu (English/Fallback)
+        search_dirs = ["/usr/share/fonts", "/usr/local/share/fonts"]
+        found_system_fonts = []
+        for d in search_dirs:
+            if os.path.exists(d):
+                for root, _, files in os.walk(d):
+                    for f in files:
+                        if "NotoSansArabic-Bold" in f or "DejaVuSans-Bold" in f or "FreeSansBold" in f:
+                            found_system_fonts.append(os.path.join(root, f))
+        
+        # Prioritize Noto for Arabic, DejaVu for English
+        if is_arabic:
+            found_system_fonts.sort(key=lambda x: "Noto" in x, reverse=True)
+        else:
+            found_system_fonts.sort(key=lambda x: "DejaVu" in x, reverse=True)
+        
+        candidates += found_system_fonts
+
+    # 3. Final Search and Load
+    for path in candidates:
+        if path and os.path.exists(path):
+            try:
+                f_size = os.path.getsize(path)
+                if f_size < 2000: continue # Skip pointers and empty files
+                
+                font = ImageFont.truetype(path, size)
+                print(f"DEBUG: Using {os.path.basename(path)} for {'ARABIC' if is_arabic else 'ENGLISH'} (Size: {f_size})")
+                return font
+            except:
+                continue
+
+    print("CRITICAL: All font loads failed. Falling back to default.")
+    return ImageFont.load_default()
+
+def _find_font(size: int) -> ImageFont.FreeTypeFont:
+    return _load_font_with_fallback(size, is_arabic=False)
+
+def _arabic_font(size: int) -> ImageFont.FreeTypeFont:
+    return _load_font_with_fallback(size, is_arabic=True)
+
+def _reshape_arabic(text: str) -> str:
+    if not text: return ""
+    try:
+        # 1. Reshape the text to get connected glyphs
+        reshaped_text = arabic_reshaper.reshape(text)
+        
+        # 2. Manually reverse the string characters.
+        # In a pure LTR engine like Pillow (without Raqm), the reshaped glyphs 
+        # must be provided in reverse order so that the first logical character 
+        # ends up on the right side of the word visually.
+        return "".join(reversed(reshaped_text))
+    except Exception as e:
+        print(f"DEBUG: Arabic Shaping Error: {e}")
+        return text
+
+def _resize_to_fit(img: Image.Image, max_w: int, max_h: int) -> Image.Image:
+    w, h = img.size
+    scale = min(max_w / w, max_h / h)
+    return img.resize((int(w * scale), int(h * scale)), Image.LANCZOS)
+
+def _paste_logo_with_stroke(target: Image.Image, logo: Image.Image, x: int, y: int, stroke_width: int = 2):
+    mask = logo.split()[-1]
+    white_img = Image.new("RGBA", logo.size, (255, 255, 255, 255))
+    for dx in range(-stroke_width, stroke_width + 1):
+        for dy in range(-stroke_width, stroke_width + 1):
+            if dx*dx + dy*dy <= stroke_width*stroke_width:
+                target.paste(white_img, (x + dx, y + dy), mask)
+    target.paste(logo, (x, y), logo)
+
+def _to_arabic_digits(text: str) -> str:
+    latin_to_arabic = str.maketrans("0123456789", "٠١٢٣٤٥٦٧٨٩")
+    return text.translate(latin_to_arabic)
+
+def _draw_text_with_spacing(draw: ImageDraw.ImageDraw, x: int, y: int, text: str, font: ImageFont.FreeTypeFont, fill: tuple, spacing: int = 0):
+    # Use standard draw. Complex script shaping is handled by reshaper/bidi before this call.
+    if spacing == 0:
+        draw.text((x, y), text, fill=fill, font=font)
+        return
+
+    curr_x = x
+    for char in text:
+        draw.text((curr_x, y), char, fill=fill, font=font)
+        curr_x += font.getlength(char) + spacing
+
+def _today_str() -> str:
+    d = date.today()
+    return f"{d.day}.{d.month}.{d.year}"
+
+# ──────────────────────────────────────────────────────────────
+# Main API
+# ──────────────────────────────────────────────────────────────
+
+def generate_layout(input_image: Image.Image, person_name: str = "", id_number: str = "", 
+                    add_studio_name: bool = True, add_logo: bool = True, add_date: bool = True) -> Image.Image:
+    # Reload settings to ensure any changes to settings.json are applied immediately
+    global S, DPI, OUTPUT_WIDTH, OUTPUT_HEIGHT, PHOTO_BOTTOM_PAD, WHITE, MAROON, DARK_RED, TEXT_DARK
+    S = load_settings()
+    DPI = S["layout"]["dpi"]
+    OUTPUT_WIDTH  = round(S["layout"]["output_w_cm"] / 2.54 * DPI)
+    OUTPUT_HEIGHT = round(S["layout"]["output_h_cm"] / 2.54 * DPI)
+    PHOTO_BOTTOM_PAD = round(S["layout"]["photo_bottom_pad_cm"] / 2.54 * DPI)
+    WHITE = c("white")
+    MAROON = c("maroon")
+    DARK_RED = c("dark_red")
+    TEXT_DARK = c("text_dark")
+
+    print(f"LAYOUT: Starting generation | Name: '{person_name}' | ID: '{id_number}'")
+    print(f"LAYOUT: Options | Logo: {add_logo} | Studio: {add_studio_name} | Date: {add_date}")
+    print(f"LAYOUT: Font Sizes | ID: {S['overlays']['id_font_size']} | Name: {S['overlays']['name_font_size']}")
+
+    if input_image.mode in ("RGBA", "LA") or (input_image.mode == "P" and "transparency" in input_image.info):
+        img = Image.new("RGB", input_image.size, WHITE)
+        img.paste(input_image, (0, 0), input_image.convert("RGBA"))
+    else:
+        img = input_image.convert("RGB")
+
+    logo = _load_logo() if add_logo else None
+    today = _today_str()
+    studio_date_text = f"EL HELAL  {today}" if add_studio_name and add_date else \
+                       "EL HELAL" if add_studio_name else \
+                       today if add_date else ""
+
+    f_date = _find_font(S["overlays"]["date_font_size"])
+    f_id = _find_font(S["overlays"]["id_font_size"])
+    f_name = _arabic_font(S["overlays"]["name_font_size"])
+    f_date_l = _find_font(S["overlays"]["large_date_font_size"])
+    f_brand = _find_font(52)
+
+    display_name = _reshape_arabic(person_name)
+    id_display = _to_arabic_digits(id_number)
+
+    canvas = Image.new("RGB", (OUTPUT_WIDTH, OUTPUT_HEIGHT), WHITE)
+    draw = ImageDraw.Draw(canvas)
+
+    brand_w = round(9.2 / 2.54 * DPI)
+    grid_w = OUTPUT_WIDTH - brand_w - S["layout"]["section_gap"]
+
+    avail_w = grid_w - 2*S["layout"]["grid_margin"] - (S["layout"]["grid_cols"]-1)*S["layout"]["grid_gap"]
+    cell_w = avail_w // S["layout"]["grid_cols"]
+    avail_h = OUTPUT_HEIGHT - 2*S["layout"]["grid_margin"] - (S["layout"]["grid_rows"]-1)*S["layout"]["grid_gap"]
+    cell_h = avail_h // S["layout"]["grid_rows"]
+    
+    photo_h = cell_h - PHOTO_BOTTOM_PAD
+    small = _resize_to_fit(img, cell_w, photo_h)
+    sw, sh = small.size
+
+    small_dec = Image.new("RGBA", (sw, sh), (255, 255, 255, 0))
+    small_dec.paste(small, (0, 0))
+    
+    if id_display:
+        id_draw = ImageDraw.Draw(small_dec)
+        sp = S["overlays"]["id_char_spacing"]
+        tw = sum(f_id.getlength(c) for c in id_display) + (len(id_display)-1)*sp
+        tx, ty = (sw-tw)//2, sh - S["overlays"]["id_font_size"] - S["overlays"]["id_lift_offset"]
+        for off in [(-2,-2), (2,-2), (-2,2), (2,2), (0,-2), (0,2), (-2,0), (2,0)]:
+            _draw_text_with_spacing(id_draw, tx+off[0], ty+off[1], id_display, f_id, WHITE, sp)
+        _draw_text_with_spacing(id_draw, tx, ty, id_display, f_id, TEXT_DARK, sp)
+
+    if logo:
+        ls = S["overlays"]["logo_size_small"]
+        l_img = _resize_to_fit(logo, ls, ls)
+        _paste_logo_with_stroke(small_dec, l_img, S["overlays"]["logo_margin"], sh - l_img.size[1] - S["overlays"]["logo_margin"])
+
+    small_final = Image.new("RGB", small_dec.size, WHITE)
+    small_final.paste(small_dec, (0, 0), small_dec)
+
+    for r in range(S["layout"]["grid_rows"]):
+        for col in range(S["layout"]["grid_cols"]):
+            x = S["layout"]["grid_margin"] + col*(cell_w + S["layout"]["grid_gap"]) + (cell_w - sw)//2
+            y = S["layout"]["grid_margin"] + r*(cell_h + S["layout"]["grid_gap"])
+            canvas.paste(small_final, (x, y))
+            if studio_date_text:
+                draw.text((x + 5, y + sh + 1), studio_date_text, fill=DARK_RED, font=f_date)
+            if display_name:
+                nb = f_name.getbbox(display_name)
+                nx = x + (sw - (nb[2]-nb[0]))//2
+                # Draw reshaped/bidi text normally
+                draw.text((nx, y + sh + 23), display_name, fill=(0,0,0), font=f_name)
+
+    bx = grid_w + S["layout"]["section_gap"]
+    draw.rectangle([bx, 0, OUTPUT_WIDTH, OUTPUT_HEIGHT], fill=MAROON)
+    
+    lav_w = brand_w - 2*S["layout"]["brand_border"]
+    lav_h = OUTPUT_HEIGHT - 2*S["layout"]["brand_border"] - 100
+    large = _resize_to_fit(img, lav_w, lav_h)
+    lw, lh = large.size
+    px = bx + (brand_w - lw)//2
+    py = S["layout"]["brand_border"] + (lav_h - lh)//2
+    
+    draw.rectangle([px-6, py-6, px+lw+6, py+lh+6], fill=WHITE)
+    canvas.paste(large, (px, py))
+
+    if logo:
+        ls = S["overlays"]["logo_size_large"]
+        l_l = _resize_to_fit(logo, ls, ls)
+        _paste_logo_with_stroke(canvas, l_l, px + 15, py + lh - l_l.size[1] - 15)
+    
+    if add_date:
+        draw.text((px + lw//2, py + lh - 40), studio_date_text, fill=DARK_RED, font=f_date_l, anchor="ms")
+    
+    if add_studio_name:
+        btb = f_brand.getbbox("EL HELAL Studio")
+        draw.text((bx + (brand_w - (btb[2]-btb[0]))//2, OUTPUT_HEIGHT - 110), "EL HELAL Studio", fill=WHITE, font=f_brand)
+
+    canvas.info["dpi"] = (DPI, DPI)
+    return canvas

core/pipeline.py

@@ -0,0 +1,99 @@
+import os
+import time
+import argparse
+import sys
+import torch
+from pathlib import Path
+from PIL import Image
+
+# Import functions from existing scripts
+# We might need to handle the monkeypatch for transformers in process_images
+import crop
+import process_images
+import color_steal
+import white_bg
+
+def run_pipeline(raw_dir, crop_dir, trans_dir, colored_dir, white_dir, curves_file):
+    start_total = time.time()
+
+    # Step 1: Crop
+    print("\n" + "="*50)
+    print("STEP 1: Cropping and Face Detection")
+    print("="*50)
+    crop.batch_process(raw_dir, crop_dir)
+
+    # Step 2: Background Removal
+    print("\n" + "="*50)
+    print("STEP 2: Background Removal (AI)")
+    print("="*50)
+    
+    # Setup model (this is the heavy part)
+    model, device = process_images.setup_model()
+    transform = process_images.get_transform()
+    
+    input_path = Path(crop_dir)
+    output_path = Path(trans_dir)
+    output_path.mkdir(parents=True, exist_ok=True)
+    
+    files = [f for f in input_path.iterdir() if f.suffix.lower() in process_images.ALLOWED_EXTENSIONS]
+    if not files:
+        print(f"No images found in {crop_dir} for background removal.")
+    else:
+        for idx, file_path in enumerate(files, 1):
+            try:
+                print(f"[{idx}/{len(files)}] Removing background: {file_path.name}...", end='', flush=True)
+                img = Image.open(file_path)
+                from PIL import ImageOps
+                img = ImageOps.exif_transpose(img)
+                img = img.convert('RGB')
+                result = process_images.remove_background(model, img, transform)
+                out_name = file_path.stem + "_rmbg.png"
+                result.save(output_path / out_name, "PNG")
+                print(" Done.")
+            except Exception as e:
+                print(f" Failed! {e}")
+    
+    # Step 3: Color Grading
+    print("\n" + "="*50)
+    print("STEP 3: Color Grading")
+    print("="*50)
+    luts = color_steal.load_trained_curves(curves_file)
+    if not luts:
+        print(f"Warning: No trained curves found at {curves_file}. Skipping color grading.")
+        # If no grading, we might want to copy trans to colored or just skip to step 4 using trans_dir
+        # For simplicity, let's assume we need curves or we skip this step and use trans_dir for step 4
+        current_input_for_white = trans_dir
+    else:
+        color_steal.apply_to_folder(luts, trans_dir, colored_dir)
+        current_input_for_white = colored_dir
+
+    # Step 4: White Background
+    print("\n" + "="*50)
+    print("STEP 4: Adding White Background & Finalizing")
+    print("="*50)
+    white_bg.add_white_background(current_input_for_white, white_dir)
+
+    end_total = time.time()
+    print("\n" + "="*50)
+    print(f"PIPELINE COMPLETE in {end_total - start_total:.2f} seconds")
+    print(f"Final results are in: {os.path.abspath(white_dir)}")
+    print("="*50)
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="Full Image Processing Pipeline")
+    parser.add_argument("--raw", default="raw", help="Folder with raw images")
+    parser.add_argument("--crop", default="crop", help="Folder for cropped images")
+    parser.add_argument("--trans", default="trans", help="Folder for transparent images")
+    parser.add_argument("--colored", default="colored", help="Folder for color-graded images")
+    parser.add_argument("--white", default="white", help="Folder for final results")
+    parser.add_argument("--curves", default="trained_curves.npz", help="Pre-trained curves file")
+    
+    args = parser.parse_args()
+    
+    # Ensure all directories exist
+    for d in [args.raw, args.crop, args.trans, args.colored, args.white]:
+        if not os.path.exists(d):
+            os.makedirs(d)
+            print(f"Created directory: {d}")
+
+    run_pipeline(args.raw, args.crop, args.trans, args.colored, args.white, args.curves)

core/process_images.py

@@ -0,0 +1,214 @@
+import os
+import sys
+import argparse
+import time
+import traceback
+from pathlib import Path
+from PIL import Image, ImageOps
+import torch
+from torchvision import transforms
+
+# ---- Monkeypatch for transformers 4.50+ compatibility with custom Config classes ----
+from transformers import configuration_utils
+_original_get_text_config = configuration_utils.PretrainedConfig.get_text_config
+
+def _patched_get_text_config(self, *args, **kwargs):
+    if not hasattr(self, 'is_encoder_decoder'):
+        self.is_encoder_decoder = False
+    return _original_get_text_config(self, *args, **kwargs)
+
+configuration_utils.PretrainedConfig.get_text_config = _patched_get_text_config
+# ---- End Monkeypatch ----
+
+# ---- Monkeypatch for BiRefNet/RMBG-2.0 meta-tensor bug during initialization ----
+_orig_linspace = torch.linspace
+def _patched_linspace(*args, **kwargs):
+    t = _orig_linspace(*args, **kwargs)
+    if t.is_meta:
+        return _orig_linspace(*args, **{**kwargs, "device": "cpu"})
+    return t
+torch.linspace = _patched_linspace
+# ---- End Monkeypatch ----
+
+# ---- Monkeypatch for BiRefNet tied weights compatibility with transformers 4.50+ ----
+def patch_birefnet_tied_weights():
+    try:
+        from transformers import PreTrainedModel
+        
+        # Force the property to always return a dict, even if _tied_weights_keys is None
+        def _get_all_tied_weights_keys(self):
+            return getattr(self, "_tied_weights_keys", {}) or {}
+            
+        PreTrainedModel.all_tied_weights_keys = property(_get_all_tied_weights_keys)
+        print("Applied robust BiRefNet tied weights patch")
+            
+    except Exception as e:
+        print(f"Failed to apply BiRefNet tied weights patch: {e}")
+
+patch_birefnet_tied_weights()
+# ---- End Monkeypatch ----
+
+from transformers import AutoModelForImageSegmentation, AutoConfig
+import retouch
+
+# Try to import devicetorch (from your project dependencies)
+try:
+    import devicetorch
+except ImportError:
+    print("Error: 'devicetorch' not found. Please run this script from the project root or install requirements.")
+    sys.exit(1)
+
+# Configure allowed extensions
+ALLOWED_EXTENSIONS = {'.png', '.jpg', '.jpeg', '.gif', '.webp', '.bmp'}
+
+def setup_model():
+    """Load and configure the RMBG-2.0 model"""
+    print("Loading BRIA-RMBG-2.0 model...")
+    
+    # 1. Device Selection
+    device = devicetorch.get(torch)
+    print(f"Device: {device}")
+    
+    if device == 'cpu':
+        torch.set_num_threads(max(1, os.cpu_count() or 1))
+
+    # 2. Load Model
+    try:
+        print("Loading model config...")
+        config = AutoConfig.from_pretrained("cocktailpeanut/rm", trust_remote_code=True)
+        
+        # Explicitly set low_cpu_mem_usage=False to avoid meta-tensor issues
+        model = AutoModelForImageSegmentation.from_pretrained(
+            "cocktailpeanut/rm", 
+            config=config,
+            trust_remote_code=True,
+            low_cpu_mem_usage=False
+        )
+        model = devicetorch.to(torch, model)
+        model.eval()
+    except Exception as e:
+        print(f"Error loading model: {e}")
+        traceback.print_exc()
+        sys.exit(1)
+
+    # 3. CPU Optimization (Optional)
+    if device == 'cpu':
+        print("Applying Dynamic Quantization for CPU speedup...")
+        try:
+            model = torch.quantization.quantize_dynamic(
+                model, {torch.nn.Linear}, dtype=torch.qint8
+            )
+        except Exception:
+            pass
+
+    return model, device
+
+def get_transform():
+    """Get the specific image transformation required by the model"""
+    return transforms.Compose([
+        transforms.Resize((1024, 1024)),
+        transforms.ToTensor(),
+        transforms.Normalize([0.485, 0.456, 0.406], [0.229, 0.224, 0.225]),
+    ])
+
+def remove_background(model, image, transform):
+    """Process a single image"""
+    # Keep original size for later resizing
+    orig_size = image.size
+    
+    # Preprocess
+    input_tensor = transform(image).unsqueeze(0)
+    input_tensor = devicetorch.to(torch, input_tensor)
+    
+    # Inference
+    with torch.inference_mode():
+        outputs = model(input_tensor)
+        if isinstance(outputs, (list, tuple)):
+            preds = outputs[-1].sigmoid().cpu()
+        else:
+            preds = outputs.sigmoid().cpu()
+    
+    # Post-process mask
+    pred = preds[0].squeeze()
+    pred_pil = transforms.ToPILImage()(pred)
+    mask = pred_pil.resize(orig_size)
+    
+    # Apply mask
+    result = image.copy()
+    result.putalpha(mask)
+    
+    # Cleanup VRAM if needed
+    devicetorch.empty_cache(torch)
+    
+    return result
+
+def retouch_face(image, sensitivity=3.0, tone_smoothing=0.6):
+    """Wrapper for the surgical retouch logic with detailed logging"""
+    start_time = time.time()
+    try:
+        retouched_img, count = retouch.retouch_image_pil(image, sensitivity, tone_smoothing)
+        duration = (time.time() - start_time) * 1000
+        print(f"RETOUCH: Success | Blemishes: {count} | Time: {duration:.1f}ms")
+        return retouched_img
+    except Exception as e:
+        print(f"RETOUCH: Failed | Error: {e}")
+        return image
+
+def main():
+    parser = argparse.ArgumentParser(description="Batch Background Removal Tool")
+    parser.add_argument('--input', '-i', required=True, help="Input folder containing images")
+    parser.add_argument('--output', '-o', required=True, help="Output folder for processed images")
+    args = parser.parse_args()
+
+    input_path = Path(args.input)
+    output_path = Path(args.output)
+
+    if not input_path.exists():
+        print(f"Error: Input folder '{input_path}' does not exist.")
+        sys.exit(1)
+
+    # Create output folder if it doesn't exist
+    output_path.mkdir(parents=True, exist_ok=True)
+
+    # Setup
+    model, device = setup_model()
+    transform = get_transform()
+    
+    # Process files
+    files = [f for f in input_path.iterdir() if f.suffix.lower() in ALLOWED_EXTENSIONS]
+    total = len(files)
+    
+    print(f"\nFound {total} images. Starting processing...")
+    print("-" * 50)
+
+    start_time = time.time()
+    for idx, file_path in enumerate(files, 1):
+        try:
+            filename = file_path.name
+            print(f"[{idx}/{total}] Processing {filename}...", end='', flush=True)
+            
+            # Load image and handle orientation
+            img = Image.open(file_path)
+            img = ImageOps.exif_transpose(img) 
+            img = img.convert('RGB')
+            
+            # Process
+            result = remove_background(model, img, transform)
+            
+            # Save (force PNG for transparency)
+            out_name = file_path.stem + "_rmbg.png"
+            out_file = output_path / out_name
+            result.save(out_file, "PNG")
+            
+            print(" Done.")
+            
+        except Exception as e:
+            print(f" Failed! Error: {e}")
+
+    duration = time.time() - start_time
+    print("-" * 50)
+    print(f"Finished! Processed {total} images in {duration:.2f} seconds.")
+    print(f"Output saved to: {output_path.absolute()}")
+
+if __name__ == "__main__":
+    main()

core/retouch.py

@@ -0,0 +1,158 @@
+
+"""
+Surgical Skin Retouching Script - Refactored for PIL Integration
+"""
+import cv2
+import numpy as np
+from PIL import Image
+
+# Robust Mediapipe Loading
+try:
+    import mediapipe as mp
+    import mediapipe.solutions.face_mesh as mp_face_mesh
+    import mediapipe.solutions.drawing_utils as mp_drawing
+except (ImportError, ModuleNotFoundError):
+    try:
+        import mediapipe as mp
+        mp_face_mesh = mp.solutions.face_mesh
+        mp_drawing = mp.solutions.drawing_utils
+    except (AttributeError, ImportError, ModuleNotFoundError):
+        mp_face_mesh = None
+        mp_drawing = None
+
+# Landmarks constants
+FACE_OVAL = [10, 338, 297, 332, 284, 251, 389, 356, 454, 323, 361, 288,
+             397, 365, 379, 378, 400, 377, 152, 148, 176, 149, 150, 136,
+             172, 58, 132, 93, 234, 127, 162, 21, 54, 103, 67, 109]
+
+LEFT_EYE = [362, 382, 381, 380, 374, 373, 390, 249, 263, 466, 388, 387, 386, 385, 384, 398]
+RIGHT_EYE = [33, 7, 163, 144, 145, 153, 154, 155, 133, 173, 157, 158, 159, 160, 161, 246]
+LEFT_EYEBROW = [336, 296, 334, 293, 300, 276, 283, 282, 295, 285]
+RIGHT_EYEBROW = [70, 63, 105, 66, 107, 55, 65, 52, 53, 46]
+LIPS_OUTER = [61, 146, 91, 181, 84, 17, 314, 405, 321, 375, 291, 409, 270, 269, 267, 0, 37, 39, 40, 185]
+LIPS_INNER = [78, 95, 88, 178, 87, 14, 317, 402, 318, 324, 308, 415, 310, 311, 312, 13, 82, 81, 80, 191]
+NOSE_TIP = [1, 2, 98, 327]
+
+def get_landmark_points(landmarks, indices, width, height):
+    pts = []
+    for i in indices:
+        lm = landmarks[i]
+        pts.append((int(lm.x * width), int(lm.y * height)))
+    return np.array(pts)
+
+def create_skin_mask(image, landmarks, width, height, feature_guard=5):
+    mask = np.zeros((height, width), dtype=np.uint8)
+    face_pts = get_landmark_points(landmarks, FACE_OVAL, width, height)
+    cv2.fillConvexPoly(mask, cv2.convexHull(face_pts), 255)
+
+    exclusions = [LEFT_EYE, RIGHT_EYE, LEFT_EYEBROW, RIGHT_EYEBROW,
+                  LIPS_OUTER, LIPS_INNER, NOSE_TIP]
+    for feature_indices in exclusions:
+        pts = get_landmark_points(landmarks, feature_indices, width, height)
+        hull = cv2.convexHull(pts)
+        cv2.fillConvexPoly(mask, hull, 0)
+        cv2.polylines(mask, [hull], True, 0, feature_guard)
+
+    img_ycrcb = cv2.cvtColor(image, cv2.COLOR_BGR2YCrCb)
+    lower = np.array([0, 133, 77], dtype=np.uint8)
+    upper = np.array([255, 173, 127], dtype=np.uint8)
+    color_mask = cv2.inRange(img_ycrcb, lower, upper)
+    mask = cv2.bitwise_and(mask, color_mask)
+    
+    kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE, (7, 7))
+    mask = cv2.erode(mask, kernel, iterations=1)
+    return mask
+
+def frequency_separation(image, blur_radius=15):
+    img_float = image.astype(np.float64)
+    if blur_radius % 2 == 0: blur_radius += 1
+    low_freq = cv2.GaussianBlur(img_float, (blur_radius, blur_radius), 0)
+    high_freq = img_float - low_freq
+    return low_freq, high_freq
+
+def detect_blemishes(high_freq, skin_mask, sensitivity=3.0, min_size=3, max_size=50):
+    hf_gray = cv2.cvtColor(np.clip(high_freq + 128, 0, 255).astype(np.uint8), cv2.COLOR_BGR2GRAY)
+    dog_fine = cv2.GaussianBlur(hf_gray.astype(np.float64), (3, 3), 1)
+    dog_coarse = cv2.GaussianBlur(hf_gray.astype(np.float64), (15, 15), 5)
+    dog = dog_fine - dog_coarse
+
+    skin_pixels = dog[skin_mask > 0]
+    if len(skin_pixels) == 0: return np.zeros_like(skin_mask)
+    
+    mean_val, std_val = np.mean(skin_pixels), np.std(skin_pixels)
+    threshold, threshold_bright = mean_val - sensitivity * std_val, mean_val + sensitivity * std_val
+
+    blemish_mask = np.zeros_like(skin_mask)
+    blemish_mask[(dog < threshold) & (skin_mask > 0)] = 255
+    blemish_mask[(dog > threshold_bright) & (skin_mask > 0)] = 255
+
+    contours, _ = cv2.findContours(blemish_mask, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    filtered_mask = np.zeros_like(blemish_mask)
+    for cnt in contours:
+        area = cv2.contourArea(cnt)
+        if min_size * min_size <= area <= max_size * max_size:
+            cv2.drawContours(filtered_mask, [cnt], -1, 255, -1)
+
+    kernel = cv2.getStructuringElement(cv2.MORPH_ELLIPSE, (5, 5))
+    return cv2.dilate(filtered_mask, kernel, iterations=1)
+
+def even_skin_tone(low_freq, skin_mask, strength=0.4):
+    mask_float = cv2.GaussianBlur(skin_mask.astype(np.float64)/255.0, (31, 31), 10)
+    mask_3ch = np.stack([mask_float] * 3, axis=-1)
+    smoothed = cv2.GaussianBlur(low_freq, (31, 31), 10)
+    return low_freq + (smoothed - low_freq) * mask_3ch * strength
+
+def retouch_image_pil(pil_image, sensitivity=3.0, tone_smoothing=0.6):
+    # Handle Transparency (Alpha Channel)
+    has_alpha = pil_image.mode in ("RGBA", "LA", "PA")
+    alpha_channel = None
+    if has_alpha:
+        alpha_channel = pil_image.getchannel('A')
+
+    # PIL to BGR (always process RGB part)
+    image = cv2.cvtColor(np.array(pil_image.convert("RGB")), cv2.COLOR_RGB2BGR)
+    height, width = image.shape[:2]
+
+    # Face Detection
+    if mp_face_mesh is None:
+        print("RETOUCH: Skipped (Mediapipe FaceMesh not loaded)")
+        return pil_image, 0
+
+    with mp_face_mesh.FaceMesh(static_image_mode=True, max_num_faces=1, refine_landmarks=True) as face_mesh:
+        results = face_mesh.process(cv2.cvtColor(image, cv2.COLOR_BGR2RGB))
+        if not results.multi_face_landmarks:
+            return pil_image, 0 # No face found, return original with 0 count
+
+        landmarks = results.multi_face_landmarks[0].landmark
+
+    # Processing
+    skin_mask = create_skin_mask(image, landmarks, width, height)
+    low_freq, high_freq = frequency_separation(image)
+    blemish_mask = detect_blemishes(high_freq, skin_mask, sensitivity)
+
+    hf_uint8 = np.clip(high_freq + 128, 0, 255).astype(np.uint8)
+    hf_inpainted = cv2.inpaint(hf_uint8, blemish_mask, inpaintRadius=5, flags=cv2.INPAINT_TELEA)
+    high_freq_clean = hf_inpainted.astype(np.float64) - 128.0
+
+    if tone_smoothing > 0:
+        low_freq = even_skin_tone(low_freq, skin_mask, tone_smoothing)
+
+    result = np.clip(low_freq + high_freq_clean, 0, 255).astype(np.uint8)
+    
+    # Seamless Blend
+    mask_f = cv2.GaussianBlur(skin_mask.astype(np.float64)/255.0, (21, 21), 7)
+    mask_3ch = np.stack([mask_f] * 3, axis=-1)
+    final_bgr = (result * mask_3ch + image * (1.0 - mask_3ch)).astype(np.uint8)
+
+    # Count blemishes for logging
+    blemish_count = len(cv2.findContours(blemish_mask, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)[0])
+
+    # BGR to PIL
+    final_pil = Image.fromarray(cv2.cvtColor(final_bgr, cv2.COLOR_BGR2RGB))
+    
+    # Restore Alpha Channel
+    if has_alpha and alpha_channel is not None:
+        final_pil.putalpha(alpha_channel)
+        return final_pil, blemish_count
+    else:
+        return final_pil, blemish_count

core/trained_curves.npz

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:f9686847cc033368e66bddaf4ebb214cc0442876e2d3451d55209b45a1632b85
+size 1492

core/white_bg.py

@@ -0,0 +1,61 @@
+import os
+import argparse
+from PIL import Image
+
+# Constants for 10cm x 14cm at 300 DPI
+# Calculation: (10 / 2.54 * 300) = 1181 px width
+#              (14 / 2.54 * 300) = 1654 px height
+TARGET_WIDTH = 1181
+TARGET_HEIGHT = 1654
+
+def add_white_background(input_folder, output_folder):
+    if not os.path.exists(output_folder):
+        os.makedirs(output_folder)
+        print(f"Created output folder: {output_folder}")
+
+    valid_exts = ('.png', '.tiff', '.tif')
+    files = [f for f in os.listdir(input_folder) if f.lower().endswith(valid_exts)]
+
+    if not files:
+        print(f"No transparent images (PNG/TIFF) found in {input_folder}")
+        return
+
+    print(f"Found {len(files)} images. Adding white background...")
+
+    for filename in files:
+        img_path = os.path.join(input_folder, filename)
+        out_path = os.path.join(output_folder, os.path.splitext(filename)[0] + ".jpg")
+
+        try:
+            print(f"Processing: {filename}...")
+            
+            # 1. Load Image (Ensure RGBA to handle transparency)
+            foreground = Image.open(img_path).convert("RGBA")
+            
+            # 2. Smart Resize to Target (10x14cm)
+            # Create a white canvas of the exact target size
+            final_image = Image.new("RGB", (TARGET_WIDTH, TARGET_HEIGHT), (255, 255, 255))
+            
+            # Resize the foreground to fit/fill
+            # Using LANCZOS for high quality downscaling/upscaling
+            fg_resized = foreground.resize((TARGET_WIDTH, TARGET_HEIGHT), Image.Resampling.LANCZOS)
+            
+            # 3. Composite Foreground onto White Canvas
+            # We use the alpha channel of the resized foreground as the mask
+            final_image.paste(fg_resized, (0, 0), fg_resized)
+
+            # 4. Save with 300 DPI metadata
+            final_image.save(out_path, quality=95, dpi=(300, 300))
+            print(f"   -> Saved to {out_path} (10x14cm @ 300DPI)")
+
+        except Exception as e:
+            print(f"   ERROR processing {filename}: {e}")
+
+if __name__ == "__main__":
+    parser = argparse.ArgumentParser(description="Add white background to transparent images and resize to 10x14cm @ 300DPI")
+    parser.add_argument("input", help="Input folder containing transparent images (PNG)")
+    parser.add_argument("output", help="Output folder")
+    
+    args = parser.parse_args()
+    
+    add_white_background(args.input, args.output)

docker-compose.yml

@@ -0,0 +1,17 @@
+version: '3.8'
+
+services:
+  studio-web:
+    build: .
+    ports:
+      - "8000:8000"
+    volumes:
+      - studio_storage:/app/storage
+      - ./assets:/app/assets
+      - ./core:/app/core
+    environment:
+      - PORT=8000
+    restart: unless-stopped
+
+volumes:
+  studio_storage:

gui/gui.py

@@ -0,0 +1,415 @@
+"""
+EL HELAL Studio – Professional Photo Workflow
+Integrated Pipeline with Memory Optimization and Manual Crop
+"""
+
+import tkinter as tk
+from tkinter import ttk, filedialog, messagebox
+from PIL import Image, ImageTk, ImageOps
+import os
+import threading
+from pathlib import Path
+import time
+import sys
+
+# Add core directory to python path
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..', 'core')))
+
+# Import our processing tools
+import crop
+import process_images
+import color_steal
+from layout_engine import generate_layout
+
+
+class CropDialog(tk.Toplevel):
+    """Interactive window to adjust crop manually."""
+    def __init__(self, parent, image_path, current_rect, callback):
+        super().__init__(parent)
+        self.title("Adjust Crop (5:7 Aspect Ratio)")
+        self.image_path = image_path
+        self.callback = callback
+        
+        # Load original image for reference
+        self.orig_pil = Image.open(image_path)
+        self.w, self.h = self.orig_pil.size
+        
+        # Scale for display
+        screen_h = self.winfo_screenheight()
+        target_h = int(screen_h * 0.8)
+        self.display_scale = min(target_h / self.h, 1.0)
+        
+        self.display_w = int(self.w * self.display_scale)
+        self.display_h = int(self.h * self.display_scale)
+        
+        self.display_img = self.orig_pil.resize((self.display_w, self.display_h), Image.LANCZOS)
+        self.tk_img = ImageTk.PhotoImage(self.display_img)
+        
+        # Rect in original coordinates (x1, y1, x2, y2)
+        self.rect = list(current_rect) if current_rect else [0, 0, 100, 140]
+        
+        # UI Layout
+        self.canvas = tk.Canvas(self, width=self.display_w, height=self.display_h, bg="black", highlightthickness=0)
+        self.canvas.pack(pady=10, padx=10)
+        self.canvas.create_image(0, 0, image=self.tk_img, anchor=tk.NW)
+        
+        self.rect_id = self.canvas.create_rectangle(0, 0, 0, 0, outline="yellow", width=3)
+        self._update_canvas_rect()
+        
+        ctrl = tk.Frame(self)
+        ctrl.pack(fill=tk.X, padx=20, pady=5)
+        tk.Label(ctrl, text="Drag the yellow box to move the crop. The size is fixed to 5:7.", font=("Arial", 10, "italic")).pack()
+        
+        btn_frame = tk.Frame(self)
+        btn_frame.pack(pady=15)
+        tk.Button(btn_frame, text=" Cancel ", command=self.destroy, width=10).pack(side=tk.LEFT, padx=10)
+        tk.Button(btn_frame, text=" Apply & Reprocess ", bg="#27ae60", fg="white", 
+                  command=self._apply, width=20, font=("Arial", 10, "bold")).pack(side=tk.LEFT, padx=10)
+        
+        # Mouse Events
+        self.canvas.bind("<B1-Motion>", self._on_drag)
+        self.canvas.bind("<Button-1>", self._on_click)
+        
+        # Center the window
+        self.update_idletasks()
+        wx = (self.winfo_screenwidth() - self.winfo_width()) // 2
+        wy = (self.winfo_screenheight() - self.winfo_height()) // 2
+        self.geometry(f"+{wx}+{wy}")
+        
+        self.grab_set() # Modal
+
+    def _update_canvas_rect(self):
+        x1, y1, x2, y2 = self.rect
+        self.canvas.coords(self.rect_id, 
+                           x1 * self.display_scale, y1 * self.display_scale,
+                           x2 * self.display_scale, y2 * self.display_scale)
+
+    def _on_click(self, event):
+        self.start_x = event.x
+        self.start_y = event.y
+
+    def _on_drag(self, event):
+        dx = (event.x - self.start_x) / self.display_scale
+        dy = (event.y - self.start_y) / self.display_scale
+        
+        rw = self.rect[2] - self.rect[0]
+        rh = self.rect[3] - self.rect[1]
+        
+        nx1 = self.rect[0] + dx
+        ny1 = self.rect[1] + dy
+        
+        if nx1 < 0: nx1 = 0
+        if ny1 < 0: ny1 = 0
+        if nx1 + rw > self.w: nx1 = self.w - rw
+        if ny1 + rh > self.h: ny1 = self.h - rh
+        
+        self.rect[0] = nx1
+        self.rect[1] = ny1
+        self.rect[2] = nx1 + rw
+        self.rect[3] = ny1 + rh
+        
+        self.start_x = event.x
+        self.start_y = event.y
+        self._update_canvas_rect()
+
+    def _apply(self):
+        self.callback(tuple(map(int, self.rect)))
+        self.destroy()
+
+
+class StudioApp:
+    """Main application with memory-efficient batch handling."""
+    def __init__(self, root: tk.Tk):
+        self.root = root
+        self.root.title("EL HELAL Studio — Professional Workflow")
+        self.root.minsize(1000, 900)
+        self.root.configure(bg="#f0f0f0")
+
+        self._image_data: list[dict] = []
+        self._current_index = 0
+        self._phase = "empty"  # "empty" | "input" | "preview"
+        
+        self.model = None
+        self.transform = None
+        self.luts = color_steal.load_trained_curves()
+        self.is_model_ready = False
+
+        self._build_ui()
+        self.root.bind("<Configure>", self._on_resize)
+        
+        threading.Thread(target=self._warm_up_model, daemon=True).start()
+
+    def _warm_up_model(self):
+        try:
+            self._set_status("Initializing AI Engine...")
+            self.model, _ = process_images.setup_model()
+            self.transform = process_images.get_transform()
+            self.is_model_ready = True
+            self._set_status("AI Engine Ready.")
+        except Exception as e:
+            self._set_status(f"Critical Error: AI Model failed to load ({e})")
+
+    def _build_ui(self):
+        # Header
+        header = tk.Frame(self.root, bg="#1a2634", pady=15)
+        header.pack(fill=tk.X)
+        tk.Label(header, text="EL HELAL Studio", font=("Arial", 26, "bold"), fg="#e8b923", bg="#1a2634").pack()
+        tk.Label(header, text="Memory Optimized Pipeline: Auto-Crop | AI Background | Color Grade | Layout", 
+                 font=("Arial", 10), fg="white", bg="#1a2634").pack()
+
+        # Input Area
+        input_frame = tk.Frame(self.root, bg="#f0f0f0", pady=10)
+        input_frame.pack(fill=tk.X, padx=20)
+        tk.Label(input_frame, text="Name (الاسم):", font=("Arial", 11, "bold"), bg="#f0f0f0").pack(side=tk.LEFT, padx=(0, 5))
+        self.entry_name = tk.Entry(input_frame, font=("Arial", 14), width=30, justify=tk.RIGHT)
+        self.entry_name.pack(side=tk.LEFT, padx=(0, 25))
+        tk.Label(input_frame, text="ID (الرقم):", font=("Arial", 11, "bold"), bg="#f0f0f0").pack(side=tk.LEFT, padx=(0, 5))
+        self.entry_id = tk.Entry(input_frame, font=("Arial", 14), width=20)
+        self.entry_id.pack(side=tk.LEFT)
+
+        # Toolbar
+        toolbar = tk.Frame(self.root, bg="#f0f0f0", pady=10)
+        toolbar.pack(fill=tk.X, padx=20)
+        self.btn_open = tk.Button(toolbar, text=" 📂 Select Photos ", command=self._open_files, 
+                                  bg="#3498db", fg="white", relief=tk.FLAT, padx=15, pady=8, font=("Arial", 10, "bold"))
+        self.btn_open.pack(side=tk.LEFT, padx=5)
+        self.btn_process = tk.Button(toolbar, text=" ⚡ Start All ", command=self._process_all, 
+                                     bg="#e67e22", fg="white", relief=tk.FLAT, padx=15, pady=8, 
+                                     font=("Arial", 10, "bold"), state=tk.DISABLED)
+        self.btn_process.pack(side=tk.LEFT, padx=5)
+        self.btn_save = tk.Button(toolbar, text=" 💾 Save All ", command=self._save_all, 
+                                  bg="#27ae60", fg="white", relief=tk.FLAT, padx=15, pady=8, 
+                                  font=("Arial", 10, "bold"), state=tk.DISABLED)
+        self.btn_save.pack(side=tk.LEFT, padx=5)
+        self.btn_edit_crop = tk.Button(toolbar, text=" ✂ Edit Crop ", command=self._edit_crop, 
+                                       bg="#95a5a6", fg="white", relief=tk.FLAT, padx=15, pady=8, 
+                                       font=("Arial", 10, "bold"), state=tk.DISABLED)
+        self.btn_edit_crop.pack(side=tk.LEFT, padx=(30, 0))
+
+        # Navigation
+        nav_frame = tk.Frame(toolbar, bg="#f0f0f0"); nav_frame.pack(side=tk.RIGHT)
+        self.btn_prev = tk.Button(nav_frame, text=" ◀ ", command=self._prev_image, state=tk.DISABLED, width=4)
+        self.btn_prev.pack(side=tk.LEFT, padx=2)
+        self.lbl_counter = tk.Label(nav_frame, text="", font=("Arial", 11, "bold"), bg="#f0f0f0", width=8)
+        self.lbl_counter.pack(side=tk.LEFT)
+        self.btn_next = tk.Button(nav_frame, text=" ▶ ", command=self._next_image, state=tk.DISABLED, width=4)
+        self.btn_next.pack(side=tk.LEFT, padx=2)
+
+        # Progress
+        self.progress = ttk.Progressbar(self.root, orient=tk.HORIZONTAL, mode='determinate')
+        self.progress.pack(fill=tk.X, padx=20, pady=(0, 10))
+
+        # Canvas
+        canvas_frame = tk.Frame(self.root, bg="#ddd", bd=1, relief=tk.SUNKEN)
+        canvas_frame.pack(fill=tk.BOTH, expand=True, padx=20, pady=5)
+        self.canvas = tk.Canvas(canvas_frame, bg="white", highlightthickness=0)
+        self.canvas.pack(fill=tk.BOTH, expand=True)
+
+        self.status = tk.Label(self.root, text="Ready", font=("Arial", 10), bg="#1a2634", 
+                               fg="white", anchor=tk.W, padx=15, pady=8)
+        self.status.pack(fill=tk.X, side=tk.BOTTOM)
+
+    # ── Operations ──
+
+    def _open_files(self):
+        paths = filedialog.askopenfilenames(
+            title="Select Student Photos",
+            filetypes=[("Image files", "*.jpg *.jpeg *.png *.bmp *.tiff")]
+        )
+        if not paths: return
+        
+        self._image_data = []
+        for path in paths:
+            # Generate thumbnail for preview to save memory
+            try:
+                with Image.open(path) as img:
+                    img.thumbnail((800, 800), Image.LANCZOS)
+                    thumb = img.copy()
+                
+                self._image_data.append({
+                    "path": path,
+                    "name": "",
+                    "id": "",
+                    "thumb": thumb,  # Store small version only
+                    "result": None,
+                    "crop_rect": None
+                })
+            except Exception as e:
+                print(f"Error loading {path}: {e}")
+            
+        self._current_index = 0
+        self._phase = "input"
+        self._load_current_fields()
+        self._update_nav()
+        self._update_ui_state()
+        self._show_current()
+        self._set_status(f"Loaded {len(self._image_data)} photos. Memory usage optimized.")
+
+    def _process_all(self):
+        self._save_current_fields()
+        if not self.is_model_ready:
+            messagebox.showwarning("Wait", "AI Model is still loading.")
+            return
+            
+        self.progress['value'] = 0
+        self.progress['maximum'] = len(self._image_data)
+        self.btn_open.config(state=tk.DISABLED)
+        self.btn_process.config(state=tk.DISABLED)
+        
+        threading.Thread(target=self._run_pipeline_batch, daemon=True).start()
+
+    def _run_pipeline_batch(self):
+        total = len(self._image_data)
+        for i in range(total):
+            self.root.after(0, self._set_status, f"Processing {i+1}/{total}...")
+            self._process_single_image(i)
+            self.root.after(0, lambda v=i+1: self.progress.configure(value=v))
+        self.root.after(0, self._on_batch_done)
+
+    def _process_single_image(self, idx):
+        data = self._image_data[idx]
+        try:
+            # 1. CROP (Face Detection) - Loads full resolution from disk
+            temp_crop = f"temp_{idx}_{int(time.time())}.jpg"
+            if not data["crop_rect"]:
+                data["crop_rect"] = crop.get_auto_crop_rect(data["path"])
+            
+            if not crop.apply_custom_crop(data["path"], temp_crop, data["crop_rect"]):
+                raise Exception("Crop failed")
+            
+            cropped_img = Image.open(temp_crop)
+            
+            # 2. BACKGROUND REMOVAL (AI)
+            trans = process_images.remove_background(self.model, cropped_img, self.transform)
+            
+            # 3. COLOR GRADING
+            graded = color_steal.apply_to_image(self.luts, trans) if self.luts else trans
+            
+            # 4. FINAL LAYOUT
+            data["result"] = generate_layout(graded, data["name"], data["id"])
+            
+            if os.path.exists(temp_crop): os.remove(temp_crop)
+            
+        except Exception as e:
+            print(f"Error processing index {idx}: {e}")
+            data["result"] = None
+
+    def _on_batch_done(self):
+        self._phase = "preview"
+        self.btn_open.config(state=tk.NORMAL)
+        self.btn_process.config(state=tk.NORMAL)
+        for i, d in enumerate(self._image_data):
+            if d["result"]:
+                self._current_index = i
+                break
+        self._update_ui_state()
+        self._load_current_fields()
+        self._update_nav()
+        self._show_current()
+        self._set_status("Processing complete.")
+
+    def _edit_crop(self):
+        data = self._image_data[self._current_index]
+        if not data["crop_rect"]:
+            data["crop_rect"] = crop.get_auto_crop_rect(data["path"])
+        
+        def on_apply(new_rect):
+            data["crop_rect"] = new_rect
+            self._set_status("Reprocessing image...")
+            threading.Thread(target=self._reprocess_current, daemon=True).start()
+
+        CropDialog(self.root, data["path"], data["crop_rect"], on_apply)
+
+    def _reprocess_current(self):
+        self._process_single_image(self._current_index)
+        self.root.after(0, self._show_current)
+        self.root.after(0, self._set_status, "Reprocess Done.")
+
+    # ── UI Sync ──
+
+    def _update_ui_state(self):
+        if not self._image_data:
+            self.btn_process.config(state=tk.DISABLED); self.btn_save.config(state=tk.DISABLED); self.btn_edit_crop.config(state=tk.DISABLED)
+            return
+        self.btn_process.config(state=tk.NORMAL)
+        self.btn_save.config(state=tk.NORMAL if self._phase == "preview" else tk.DISABLED)
+        self.btn_edit_crop.config(state=tk.NORMAL)
+
+    def _show_current(self):
+        if not self._image_data: return
+        data = self._image_data[self._current_index]
+        
+        if self._phase == "preview" and data["result"]:
+            img = data["result"]
+        else:
+            # Use thumbnail for navigation preview to stay memory-efficient
+            img = data["thumb"]
+            
+        self._show_image_on_canvas(img)
+
+    def _show_image_on_canvas(self, img):
+        self.canvas.update_idletasks()
+        cw, ch = self.canvas.winfo_width(), self.canvas.winfo_height()
+        if cw < 10 or ch < 10: return
+        
+        iw, ih = img.size
+        scale = min(cw/iw, ch/ih, 1.0)
+        preview = img.resize((int(iw*scale), int(ih*scale)), Image.LANCZOS)
+        self.tk_preview = ImageTk.PhotoImage(preview)
+        self.canvas.delete("all")
+        self.canvas.create_image(cw//2, ch//2, image=self.tk_preview, anchor=tk.CENTER)
+
+    def _save_current_fields(self):
+        if not self._image_data: return
+        data = self._image_data[self._current_index]
+        data["name"] = self.entry_name.get().strip()
+        data["id"] = self.entry_id.get().strip()
+
+    def _load_current_fields(self):
+        if not self._image_data: return
+        data = self._image_data[self._current_index]
+        self.entry_name.delete(0, tk.END); self.entry_name.insert(0, data["name"])
+        self.entry_id.delete(0, tk.END); self.entry_id.insert(0, data["id"])
+
+    def _prev_image(self):
+        if self._current_index > 0:
+            self._save_current_fields(); self._current_index -= 1
+            self._load_current_fields(); self._update_nav(); self._show_current()
+
+    def _next_image(self):
+        if self._current_index < len(self._image_data) - 1:
+            self._save_current_fields(); self._current_index += 1
+            self._load_current_fields(); self._update_nav(); self._show_current()
+
+    def _update_nav(self):
+        n = len(self._image_data)
+        self.btn_prev.config(state=tk.NORMAL if self._current_index > 0 else tk.DISABLED)
+        self.btn_next.config(state=tk.NORMAL if self._current_index < n-1 else tk.DISABLED)
+        self.lbl_counter.config(text=f"{self._current_index+1} / {n}" if n else "")
+
+    def _save_all(self):
+        results = [d for d in self._image_data if d["result"]]
+        if not results: return
+        folder = filedialog.askdirectory(title="Select Save Folder")
+        if not folder: return
+        count = 0
+        for d in results:
+            try:
+                name = Path(d["path"]).stem + "_layout.jpg"
+                d["result"].save(os.path.join(folder, name), "JPEG", quality=95, dpi=(300, 300))
+                count += 1
+            except: pass
+        messagebox.showinfo("Success", f"Saved {count} layouts.")
+
+    def _on_resize(self, event):
+        if self._image_data: self._show_current()
+
+    def _set_status(self, msg):
+        self.status.config(text=msg); self.root.update_idletasks()
+
+
+if __name__ == "__main__":
+    root = tk.Tk()
+    w, h = 1100, 950
+    root.geometry(f"{w}x{h}+{(root.winfo_screenwidth()-w)//2}+{(root.winfo_screenheight()-h)//2}")
+    StudioApp(root); root.mainloop()

gui/main.py

@@ -0,0 +1,31 @@
+"""
+EL HELAL Studio — Photo Layout Generator
+=========================================
+Run this file to launch the desktop application.
+
+Usage:
+    python main.py
+"""
+
+import tkinter as tk
+from gui import StudioApp
+
+
+def main():
+    root = tk.Tk()
+
+    # Centre window on screen
+    root.update_idletasks()
+    sw = root.winfo_screenwidth()
+    sh = root.winfo_screenheight()
+    w, h = 900, 1000
+    x = (sw - w) // 2
+    y = max((sh - h) // 2 - 30, 0)
+    root.geometry(f"{w}x{h}+{x}+{y}")
+
+    app = StudioApp(root)  # noqa: F841
+    root.mainloop()
+
+
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1,18 @@
+Pillow>=10.0.0
+arabic-reshaper
+python-bidi
+opencv-python
+numpy
+torch
+torchvision
+transformers==4.48.2
+scipy
+mediapipe==0.10.9
+devicetorch
+timm
+kornia
+accelerate
+fastapi
+uvicorn
+python-multipart
+jinja2

tools/problems.md

@@ -0,0 +1,102 @@
+# Resolved Technical Issues & Deployment Guide
+
+This document tracks critical problems encountered during development and deployment (especially for Docker and Hugging Face Spaces) and their corresponding solutions.
+
+## 1. Font Rendering & Layout Consistency
+
+### Problem: "Boxes" instead of Arabic Text
+- **Symptom**: Arabic names appeared as empty boxes (tofu) or incorrectly rendered characters.
+- **Cause**: The system was attempting to load Windows-specific font paths (e.g., `C:/Windows/Fonts/...`) which do not exist in Linux/Docker environments.
+- **Solution**: 
+    - Implemented platform-agnostic font discovery in `core/layout_engine.py`.
+    - Added automatic detection of bundled fonts in the `assets/` directory.
+    - Prioritized `arialbd.ttf` for Arabic support over legacy fonts.
+
+### Problem: Settings Changes Not Reflecting
+- **Symptom**: Changing `id_font_size` in `settings.json` had no effect until the app was restarted.
+- **Cause**: Settings were loaded once at module import time and cached as global constants.
+- **Solution**: Modified `generate_layout` to call `load_settings()` at the start of every execution, ensuring real-time updates from the JSON file.
+
+---
+
+## 2. Hugging Face Spaces (Docker) Deployment
+
+### Problem: Obsolete `libgl1-mesa-glx`
+- **Symptom**: Docker build failed with `E: Package 'libgl1-mesa-glx' has no installation candidate`.
+- **Cause**: The base Debian image (Trixie/Sid) used by HF has obsoleted this package.
+- **Solution**: Updated `Dockerfile` to use `libgl1` which provides the necessary OpenGL libraries for OpenCV.
+
+### Problem: Transformers 4.50+ Compatibility (BiRefNet/RMBG-2.0)
+- **Symptom**: `AttributeError: 'BiRefNet' object has no attribute 'all_tied_weights_keys'` or `'NoneType' object has no attribute 'keys'`.
+- **Cause**: The custom model code for BiRefNet/RMBG-2.0 is incompatible with internal changes in recent `transformers` versions regarding tied weight tracking.
+- **Solution**: 
+    - Applied a robust monkeypatch in `core/process_images.py` to the `PreTrainedModel` class.
+    - Forced `all_tied_weights_keys` to always return an empty dictionary `{}` instead of `None`.
+    - Pinned `transformers==4.48.2` in `requirements.txt` for a stable environment.
+
+### Problem: Meta-Tensor Initialization Bug
+- **Symptom**: Model failed to load on CPU due to "meta tensors" not being correctly materialized.
+- **Cause**: A bug in how `torch.linspace` interacts with transformers' `low_cpu_mem_usage` flag for custom models.
+- **Solution**: Monkeypatched `torch.linspace` in `core/process_images.py` to force materialization on CPU when a meta-tensor is detected.
+
+---
+
+## 3. Git & LFS Management
+
+### Problem: Binary File Rejection
+- **Symptom**: `remote: Your push was rejected because it contains binary files.`
+- **Cause**: Pushing large `.jpg`, `.png`, or `.cube` files directly to Hugging Face without Git LFS, or having them in the Git history from previous commits.
+- **Solution**: 
+    - Configured `.gitattributes` to track `*.png`, `*.TTF`, `*.npz`, and `*.cube` with LFS.
+    - Used `git filter-branch` to purge large binaries (`raw/`, `white/`, and root `.jpg` files) from the entire Git history to reduce repo size and satisfy HF hooks.
+
+---
+
+## 5. Image Processing Pipeline & Dependencies
+
+### Problem: `KeyError: 'setting text direction... not supported without libraqm'`
+- **Symptom**: Application crashes on Windows when attempting to render Arabic text in the layout.
+- **Cause**: Pillow's `direction` and `features` parameters require the `libraqm` library, which is difficult to install on Windows.
+- **Solution**: 
+    - Added a safety check using `PIL.features.check("raqm")`.
+    - Implemented a fallback that relies on `arabic-reshaper` and `python-bidi` for manual shaping/reordering when `raqm` is missing.
+
+### Problem: Background Removal failing when Retouching is enabled
+- **Symptom**: Background removal appeared "ignored" or reverted to original background after processing.
+- **Cause**: The `retouch_image_pil` function in `core/retouch.py` was converting the image to RGB for OpenCV processing, stripping the Alpha channel (transparency) created by the BG removal step.
+- **Solution**: 
+    - Updated `retouch_image_pil` to detect and save the Alpha channel before processing.
+    - Modified the logic to restore the Alpha channel to the final retouched PIL image before returning it to the pipeline.
+
+### Problem: BiRefNet Model Inference Error
+- **Symptom**: `TypeError` or indexing errors during background removal inference.
+- **Cause**: Inconsistent model output formats (list of tensors vs. a single tensor) depending on the environment or `transformers` version.
+- **Solution**: Updated `remove_background` in `core/process_images.py` to check if output is a list/tuple and handle both cases robustly.
+
+### Problem: `AttributeError: module 'mediapipe' has no attribute 'solutions'`
+- **Symptom**: Skin retouching fails in the Docker container with this error.
+- **Cause**: Inconsistent behavior of the `mediapipe` package initialization in some Linux environments.
+- **Solution**: 
+    - Explicitly imported submodules like `mediapipe.solutions.face_mesh` at the top of the file.
+    - Switched from `python:3.10-slim` to the full `python:3.10` image to ensure a complete build environment.
+    - Added `libprotobuf-dev` and `protobuf-compiler` to the `Dockerfile`.
+
+### Problem: Arabic/English Text appearing as "Boxes" (Tofu)
+- **Symptom**: All text on the print layout appears as empty squares in the Hugging Face Space.
+- **Cause**: The container lacked fonts with proper character support, and binary `.ttf` files were often corrupted as 130-byte Git LFS pointers.
+- **Solution**: 
+    - **Automated Downloads**: Updated `Dockerfile` to use `wget` to pull real binary fonts directly from GitHub during the build.
+    - **Deep Search**: Implemented a recursive font discovery system in `core/layout_engine.py` that scans `/usr/share/fonts`.
+    - **System Fallbacks**: Installed `fonts-noto-extra` and `fonts-dejavu-core` as guaranteed system-level backups.
+
+### Problem: Arabic Text appearing "Connected but Reversed"
+- **Symptom**: Arabic letters connect correctly but flow from Left-to-Right (e.g., "م ح م د" instead of "محمد").
+- **Cause**: The BiDi reordering algorithm was inconsistent in the LTR drawing environment of the container.
+- **Solution**: 
+    - **Manual Reversal**: After using `arabic_reshaper` to handle ligatures, the code now manually reverses the string characters (`"".join(reversed(text))`).
+    - This bypasses the need for the `libraqm` library and ensures perfect visual flow on standard LTR drawing canvases.
+
+### Problem: Manual Cropping ignored or shifted
+- **Symptom**: After manually adjusting the crop in the web interface, the result still looked like the AI auto-crop or was completely wrong.
+- **Cause**: The backend was using `cv2.imdecode` which ignores EXIF orientation tags. Since the frontend cropper works on correctly oriented thumbnails, the coordinates sent to the backend didn't match the raw image orientation on disk.
+- **Solution**: Updated `core/crop.py` to use a `_load_image_exif_safe` helper that uses PIL to transpose the image before converting it to OpenCV format. This ensures coordinates from the web UI always match the backend image state.

tools/scan_fonts.py

@@ -0,0 +1,31 @@
+
+import os
+import sys
+from PIL import Image, ImageFont, ImageDraw
+
+def list_fonts():
+    print("--- FONT SCANNER ---")
+    paths = [
+        "/usr/share/fonts",
+        "/usr/share/fonts/truetype",
+        "/usr/share/fonts/truetype/noto",
+        "/usr/share/fonts/truetype/dejavu",
+        "/usr/share/fonts/truetype/liberation",
+        "assets"
+    ]
+    
+    for p in paths:
+        if os.path.exists(p):
+            print(f"
+Directory: {p}")
+            files = [f for f in os.listdir(p) if f.lower().endswith(('.ttf', '.otf'))]
+            for f in sorted(files):
+                full_path = os.path.join(p, f)
+                size = os.path.getsize(full_path)
+                print(f"  - {f} ({size} bytes)")
+        else:
+            print(f"
+Directory NOT FOUND: {p}")
+
+if __name__ == "__main__":
+    list_fonts()

tools/verify_layout.py

@@ -0,0 +1,37 @@
+
+import os
+import sys
+from PIL import Image
+
+# Add root directory to python path
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..')))
+
+from core.layout_engine import generate_layout
+
+def test_layout():
+    print("Starting layout verification...")
+    
+    # Create a dummy input image
+    dummy_input = Image.new("RGB", (600, 800), (200, 200, 200))
+    
+    try:
+        # Generate the layout with dummy data
+        print("Generating layout...")
+        result = generate_layout(
+            dummy_input, 
+            person_name="محمد أحمد اسماعيل ", 
+            id_number="1234567"
+        )
+        
+        # Save the result
+        output_path = "layout_verification_result.jpg"
+        result.save(output_path, quality=95)
+        
+        print(f"Success! Layout generated and saved to: {output_path}")
+        print(f"Current Settings Used: ID Font Size = {generate_layout.__globals__['S']['overlays']['id_font_size']}")
+        
+    except Exception as e:
+        print(f"ERROR: {e}")
+
+if __name__ == "__main__":
+    test_layout()

web/server.py

@@ -0,0 +1,291 @@
+"""
+EL HELAL Studio — Web Backend (FastAPI)
+Integrated with Auto-Cleanup and Custom Cropping
+"""
+
+from fastapi import FastAPI, UploadFile, File, Form, BackgroundTasks
+from fastapi.responses import JSONResponse, FileResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.middleware.cors import CORSMiddleware
+from contextlib import asynccontextmanager
+import uvicorn
+import shutil
+import os
+import json
+import uuid
+from pathlib import Path
+from PIL import Image
+import threading
+import sys
+import asyncio
+import time
+
+# Add core directory to python path
+sys.path.append(os.path.abspath(os.path.join(os.path.dirname(__file__), '..', 'core')))
+
+# Import existing tools
+import crop
+import process_images
+import color_steal
+import retouch
+from layout_engine import generate_layout, load_settings
+
+# Setup Directories
+WEB_DIR = Path(os.path.dirname(__file__)) / "web_storage"
+ROOT_DIR = Path(os.path.dirname(__file__)).parent
+STORAGE_DIR = ROOT_DIR / "storage"
+
+UPLOAD_DIR = STORAGE_DIR / "uploads"
+PROCESSED_DIR = STORAGE_DIR / "processed"
+RESULT_DIR = STORAGE_DIR / "results"
+
+for d in [UPLOAD_DIR, PROCESSED_DIR, RESULT_DIR]:
+    d.mkdir(parents=True, exist_ok=True)
+
+# Global Model State
+models = {
+    "model": None,
+    "transform": None,
+    "luts": color_steal.load_trained_curves(),
+    "ready": False
+}
+
+def warm_up_ai():
+    print("AI Model: Loading in background...")
+    try:
+        models["model"], _ = process_images.setup_model()
+        models["transform"] = process_images.get_transform()
+        models["ready"] = True
+        print("AI Model: READY")
+    except Exception as e:
+        print(f"AI Model: FAILED to load - {e}")
+
+async def cleanup_task():
+    """Background task to delete files older than 24 hours."""
+    while True:
+        print("Cleanup: Checking for old files...")
+        now = time.time()
+        count = 0
+        for folder in [UPLOAD_DIR, PROCESSED_DIR, RESULT_DIR]:
+            for path in folder.glob("*"):
+                if path.is_file() and (now - path.stat().st_mtime) > 86400: # 24 hours
+                    path.unlink()
+                    count += 1
+        if count > 0: print(f"Cleanup: Removed {count} old files.")
+        await asyncio.sleep(3600) # Run every hour
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    # Startup
+    threading.Thread(target=warm_up_ai, daemon=True).start()
+    asyncio.create_task(cleanup_task())
+    yield
+    # Shutdown
+    pass
+
+app = FastAPI(title="EL HELAL Studio API", lifespan=lifespan)
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["*"],
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# ── API Endpoints ──
+
+@app.get("/")
+async def read_index():
+    return FileResponse(WEB_DIR / "index.html")
+
+@app.get("/status")
+async def get_status():
+    return {"ai_ready": models["ready"]}
+
+@app.post("/upload")
+async def upload_image(file: UploadFile = File(...)):
+    file_id = str(uuid.uuid4())
+    ext = Path(file.filename).suffix
+    file_path = UPLOAD_DIR / f"{file_id}{ext}"
+    
+    with file_path.open("wb") as buffer:
+        shutil.copyfileobj(file.file, buffer)
+    
+    with Image.open(file_path) as img:
+        from PIL import ImageOps
+        # FIX: Handle EXIF orientation (rotation)
+        img = ImageOps.exif_transpose(img)
+        
+        # Get original dimensions after transposition for the web cropper
+        width, height = img.size
+        
+        img.thumbnail((800, 800), Image.LANCZOS)
+        thumb_path = UPLOAD_DIR / f"{file_id}_thumb.jpg"
+        if img.mode in ("RGBA", "LA"):
+            bg = Image.new("RGB", img.size, (255, 255, 255))
+            bg.paste(img, mask=img.split()[-1])
+            bg.save(thumb_path, "JPEG")
+        else:
+            img.convert("RGB").save(thumb_path, "JPEG")
+        
+    return {
+        "id": file_id, 
+        "filename": file.filename, 
+        "thumb_url": f"/static/uploads/{file_id}_thumb.jpg",
+        "width": width,
+        "height": height
+    }
+
+@app.post("/process/{file_id}")
+async def process_image(
+    file_id: str, 
+    name: str = Form(""), 
+    id_number: str = Form(""),
+    # Steps toggles
+    do_rmbg: bool = Form(True),
+    do_color: bool = Form(True),
+    do_retouch: bool = Form(True),
+    do_crop: bool = Form(True),
+    # Branding toggles
+    add_studio_name: bool = Form(True),
+    add_logo: bool = Form(True),
+    add_date: bool = Form(True),
+    # Optional manual crop coordinates
+    x1: int = Form(None), 
+    y1: int = Form(None), 
+    x2: int = Form(None), 
+    y2: int = Form(None)
+):
+    if not models["ready"]:
+        return JSONResponse(status_code=503, content={"error": "AI Model not ready"})
+    
+    files = list(UPLOAD_DIR.glob(f"{file_id}.*"))
+    if not files: return JSONResponse(status_code=404, content={"error": "File not found"})
+    orig_path = files[0]
+    
+    try:
+        temp_crop = PROCESSED_DIR / f"{file_id}_processed_crop.jpg"
+        
+        # 1. CROP (Manual, Auto, or Skip)
+        if x1 is not None and y1 is not None:
+            print(f"Pipeline: Applying manual crop for {file_id} | Rect: ({x1}, {y1}, {x2}, {y2})")
+            rect = (x1, y1, x2, y2)
+            crop.apply_custom_crop(str(orig_path), str(temp_crop), rect)
+            cropped_img = Image.open(temp_crop)
+        elif do_crop:
+            print(f"Pipeline: Applying auto crop for {file_id}...")
+            crop.crop_to_4x6_opencv(str(orig_path), str(temp_crop))
+            cropped_img = Image.open(temp_crop)
+        else:
+            print(f"Pipeline: Skipping crop for {file_id}")
+            cropped_img = Image.open(orig_path)
+        
+        # 2. BACKGROUND REMOVAL
+        if do_rmbg:
+            print(f"Pipeline: Removing background for {file_id}...")
+            processed_img = process_images.remove_background(models["model"], cropped_img, models["transform"])
+            print(f"Pipeline: BG Removal Done. Image Mode: {processed_img.mode}")
+        else:
+            print(f"Pipeline: Skipping background removal for {file_id}")
+            processed_img = cropped_img
+        
+        # 3. COLOR GRADING
+        if do_color and models["luts"]:
+            print(f"Pipeline: Applying color grading for {file_id}...")
+            graded_img = color_steal.apply_to_image(models["luts"], processed_img)
+            print(f"Pipeline: Color Grading Done. Image Mode: {graded_img.mode}")
+        else:
+            print(f"Pipeline: Skipping color grading for {file_id}")
+            graded_img = processed_img
+            
+        # 4. RETOUCH
+        current_settings = load_settings()
+        # Retouch happens if BOTH the UI checkbox is checked AND it's enabled in global settings
+        if do_retouch and current_settings.get("retouch", {}).get("enabled", False):
+            retouch_cfg = current_settings["retouch"]
+            print(f"Pipeline: Retouching face for {file_id} (Sensitivity: {retouch_cfg.get('sensitivity', 3.0)})")
+            final_processed, count = retouch.retouch_image_pil(
+                graded_img, 
+                sensitivity=retouch_cfg.get("sensitivity", 3.0),
+                tone_smoothing=retouch_cfg.get("tone_smoothing", 0.6)
+            )
+            print(f"Pipeline: Retouch Done. Blemishes: {count}. Image Mode: {final_processed.mode}")
+        else:
+            print(f"Pipeline: Retouching skipped for {file_id}")
+            final_processed = graded_img
+            
+        print(f"Pipeline: Generating final layout for {file_id}...")
+        final_layout = generate_layout(
+            final_processed, name, id_number, 
+            add_studio_name=add_studio_name, 
+            add_logo=add_logo, 
+            add_date=add_date
+        )
+        
+        result_path = RESULT_DIR / f"{file_id}_layout.jpg"
+        final_layout.save(result_path, "JPEG", quality=95, dpi=(300, 300))
+        
+        if temp_crop.exists(): temp_crop.unlink()
+        
+        return {"id": file_id, "result_url": f"/static/results/{file_id}_layout.jpg"}
+        
+    except Exception as e:
+        import traceback
+        traceback.print_exc()
+        return JSONResponse(status_code=500, content={"error": str(e)})
+
+@app.post("/clear-all")
+async def clear_all():
+    """Manually clear all uploaded and processed files."""
+    count = 0
+    try:
+        for folder in [UPLOAD_DIR, PROCESSED_DIR, RESULT_DIR]:
+            for path in folder.glob("*"):
+                if path.is_file() and not path.name.endswith(".gitkeep"):
+                    path.unlink()
+                    count += 1
+        return {"status": "success", "removed_count": count}
+    except Exception as e:
+        return JSONResponse(status_code=500, content={"error": f"Failed to clear storage: {str(e)}"})
+
+# ── Settings API ──
+SETTINGS_PATH = ROOT_DIR / "config" / "settings.json"
+
+@app.get("/settings")
+async def get_settings():
+    """Return current settings.json contents."""
+    try:
+        if SETTINGS_PATH.exists():
+            with open(SETTINGS_PATH, "r") as f:
+                return json.load(f)
+        return {}
+    except Exception as e:
+        return JSONResponse(status_code=500, content={"error": str(e)})
+
+@app.post("/settings")
+async def update_settings(data: dict):
+    """Merge incoming settings into settings.json (partial update)."""
+    try:
+        current = {}
+        if SETTINGS_PATH.exists():
+            with open(SETTINGS_PATH, "r") as f:
+                current = json.load(f)
+        # Deep merge one level
+        for key, val in data.items():
+            if key in current and isinstance(val, dict) and isinstance(current[key], dict):
+                current[key].update(val)
+            else:
+                current[key] = val
+        SETTINGS_PATH.parent.mkdir(parents=True, exist_ok=True)
+        with open(SETTINGS_PATH, "w") as f:
+            json.dump(current, f, indent=4, ensure_ascii=False)
+        return {"status": "success"}
+    except Exception as e:
+        return JSONResponse(status_code=500, content={"error": str(e)})
+
+app.mount("/static", StaticFiles(directory=str(STORAGE_DIR)), name="static")
+
+if __name__ == "__main__":
+    # Hugging Face Spaces uses port 7860 by default
+    port = int(os.environ.get("PORT", 7860))
+    uvicorn.run(app, host="0.0.0.0", port=port)

web/web_storage/index.html

@@ -0,0 +1,1200 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl" data-theme="dark">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ستوديو الهلال — نظام معالجة الصور</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            darkMode: ['selector', '[data-theme="dark"]'],
+        }
+    </script>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <!-- Cropper.js -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
+    <!-- JSZip for Download All -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700&display=swap');
+
+        /* ── Theme Variables ── */
+        :root {
+            --bg-body: #f1f5f9;
+            --bg-card: #ffffff;
+            --bg-card-alt: #f8fafc;
+            --bg-input: #f1f5f9;
+            --border-card: #e2e8f0;
+            --border-input: #cbd5e1;
+            --text-primary: #0f172a;
+            --text-secondary: #475569;
+            --text-muted: #94a3b8;
+            --scrollbar-track: #f1f5f9;
+            --scrollbar-thumb: #cbd5e1;
+            --overlay-bg: rgba(255,255,255,0.92);
+        }
+        [data-theme="dark"] {
+            --bg-body: #0f172a;
+            --bg-card: #1e293b;
+            --bg-card-alt: #0f172a;
+            --bg-input: #0f172a;
+            --border-card: #334155;
+            --border-input: #334155;
+            --text-primary: #f8fafc;
+            --text-secondary: #94a3b8;
+            --text-muted: #475569;
+            --scrollbar-track: #0f172a;
+            --scrollbar-thumb: #334155;
+            --overlay-bg: rgba(15,23,42,0.92);
+        }
+
+        body {
+            font-family: 'Cairo', sans-serif;
+            background-color: var(--bg-body);
+            color: var(--text-primary);
+            transition: background-color 0.3s, color 0.3s;
+        }
+        .studio-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-card);
+            transition: background-color 0.3s, border-color 0.3s;
+        }
+        .studio-input {
+            background: var(--bg-input);
+            border-color: var(--border-input);
+            color: var(--text-primary);
+        }
+        .text-theme-primary { color: var(--text-primary); }
+        .text-theme-secondary { color: var(--text-secondary); }
+        .text-theme-muted { color: var(--text-muted); }
+
+        .gradient-text { background: linear-gradient(to left, #fbbf24, #f59e0b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
+        .cropper-view-box, .cropper-face { border-radius: 4px; outline: 2px solid #fbbf24; }
+        ::-webkit-scrollbar { width: 6px; }
+        ::-webkit-scrollbar-track { background: var(--scrollbar-track); }
+        ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
+
+        /* Indicators & Glow */
+        .badge { font-size: 8px; padding: 1px 4px; border-radius: 3px; font-weight: 800; text-transform: uppercase; }
+        .badge-rmbg { background: #10b981; color: #064e3b; }
+        .badge-retouch { background: #3b82f6; color: #1e3a8a; }
+        .badge-crop { background: #f59e0b; color: #78350f; }
+        .badge-color { background: #a855f7; color: #4c1d95; }
+        .badge-quality { font-size: 7px; padding: 1px 3px; border-radius: 2px; font-weight: 700; }
+        .badge-hd { background: #10b981; color: white; }
+        .badge-lowres { background: #ef4444; color: white; }
+        .badge-mid { background: #f59e0b; color: white; }
+
+        .drop-glow { border-color: #fbbf24 !important; box-shadow: 0 0 20px rgba(251, 191, 36, 0.3); }
+
+        /* Skeleton Animation */
+        @keyframes shimmer {
+            0% { background-position: -468px 0 }
+            100% { background-position: 468px 0 }
+        }
+        .skeleton {
+            background: var(--bg-card);
+            background-image: linear-gradient(to right, var(--bg-card) 0%, var(--border-card) 20%, var(--bg-card) 40%, var(--bg-card) 100%);
+            background-repeat: no-repeat;
+            background-size: 800px 104px;
+            animation: shimmer 1.5s infinite linear;
+        }
+
+        .preview-transition { transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; }
+        .processing-spin { animation: spin 2s linear infinite; }
+        @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+
+        /* ── Toast Notifications ── */
+        #toast-container {
+            position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
+            z-index: 9999; display: flex; flex-direction: column-reverse; gap: 8px; align-items: center;
+            pointer-events: none;
+        }
+        .toast {
+            pointer-events: auto;
+            padding: 12px 24px; border-radius: 12px; font-size: 14px; font-weight: 600;
+            display: flex; align-items: center; gap: 10px;
+            box-shadow: 0 8px 30px rgba(0,0,0,0.2);
+            animation: toastIn 0.35s ease-out;
+            max-width: 420px;
+        }
+        .toast-success { background: #065f46; color: #d1fae5; }
+        .toast-error { background: #7f1d1d; color: #fecaca; }
+        .toast-info { background: #1e3a5f; color: #bfdbfe; }
+        .toast-warning { background: #78350f; color: #fef3c7; }
+        @keyframes toastIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
+        @keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }
+
+        /* ── Upload Progress ── */
+        .upload-progress-bar {
+            height: 4px; border-radius: 2px; background: var(--border-card); overflow: hidden; margin-top: 8px;
+        }
+        .upload-progress-fill {
+            height: 100%; background: linear-gradient(90deg, #fbbf24, #f59e0b);
+            border-radius: 2px; transition: width 0.15s linear; width: 0%;
+        }
+
+        /* ── Zoom Modal ── */
+        #zoom-modal {
+            position: fixed; inset: 0; z-index: 100; display: none;
+            background: rgba(0,0,0,0.9); cursor: zoom-out;
+            align-items: center; justify-content: center;
+        }
+        #zoom-modal.active { display: flex; }
+        #zoom-modal img {
+            max-width: 95vw; max-height: 95vh; object-fit: contain;
+            transform-origin: center; transition: transform 0.2s;
+        }
+
+        /* ── Settings Panel ── */
+        .settings-panel { max-height: 0; overflow: hidden; transition: max-height 0.35s ease-out, opacity 0.25s; opacity: 0; }
+        .settings-panel.open { max-height: 500px; opacity: 1; }
+
+        /* ── Mobile Drawer ── */
+        .mobile-drawer-overlay {
+            position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 80; display: none;
+        }
+        .mobile-drawer-overlay.active { display: block; }
+        .mobile-drawer {
+            position: fixed; top: 0; bottom: 0; width: 85%; max-width: 380px;
+            z-index: 81; transition: transform 0.3s ease;
+            overflow-y: auto; padding: 20px;
+            background: var(--bg-card);
+        }
+        /* RTL: drawer slides from left */
+        [dir="rtl"] .mobile-drawer { left: 0; right: auto; transform: translateX(-100%); }
+        .mobile-drawer.active { transform: translateX(0) !important; }
+
+        /* ── Before/After Toggle ── */
+        .ba-toggle {
+            position: absolute; top: 12px; left: 12px; z-index: 10;
+            backdrop-filter: blur(8px);
+        }
+
+        /* ── Empty State Animation ── */
+        @keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
+        .float-anim { animation: float 3s ease-in-out infinite; }
+        @keyframes pointDown { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
+        .point-anim { animation: pointDown 1.5s ease-in-out infinite; }
+
+        /* ── Keyboard Shortcuts Modal ── */
+        #shortcuts-modal {
+            position: fixed; inset: 0; z-index: 90; display: none;
+            background: rgba(0,0,0,0.6); align-items: center; justify-content: center;
+            backdrop-filter: blur(4px);
+        }
+        #shortcuts-modal.active { display: flex; }
+
+        /* Horizontal queue slider */
+        .queue-slider {
+            display: flex; flex-direction: row; gap: 10px;
+            flex-wrap: wrap;
+            max-height: 340px;
+            overflow-y: auto; overflow-x: hidden;
+            padding: 8px 4px; scroll-behavior: smooth;
+            scrollbar-width: thin;
+        }
+        .queue-slider::-webkit-scrollbar { width: 5px; }
+        .queue-slider::-webkit-scrollbar-track { background: var(--scrollbar-track); border-radius: 10px; }
+        .queue-slider::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }
+        .queue-slider::-webkit-scrollbar-thumb:hover { background: #fbbf24; }
+
+        .queue-slide {
+            flex: 0 0 auto; width: 72px; cursor: pointer;
+            position: relative; border-radius: 10px;
+            transition: transform 0.15s, box-shadow 0.15s;
+        }
+        .queue-slide:hover { transform: translateY(-2px); }
+        .queue-slide.active {
+            box-shadow: 0 0 0 2px #fbbf24;
+            transform: translateY(-2px);
+        }
+        .queue-slide img {
+            width: 72px; height: 72px; object-fit: cover;
+            border-radius: 10px; display: block;
+            border: 1px solid var(--border-card);
+        }
+        .queue-slide .slide-status {
+            position: absolute; top: -4px; right: -4px;
+            width: 16px; height: 16px; border-radius: 50%;
+            display: flex; align-items: center; justify-content: center;
+            font-size: 9px; z-index: 5;
+            background: var(--bg-card); box-shadow: 0 1px 3px rgba(0,0,0,0.3);
+        }
+        .queue-slide .slide-delete {
+            position: absolute; top: -4px; left: -4px;
+            width: 18px; height: 18px; border-radius: 50%;
+            background: #ef4444; color: white;
+            display: flex; align-items: center; justify-content: center;
+            font-size: 8px; z-index: 5;
+            opacity: 0; transition: opacity 0.15s;
+            border: none; cursor: pointer;
+        }
+        .queue-slide:hover .slide-delete { opacity: 1; }
+        .queue-slide .slide-name {
+            font-size: 9px; text-align: center; margin-top: 4px;
+            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+            color: var(--text-secondary); font-weight: 600;
+            max-width: 72px;
+        }
+    </style>
+</head>
+<body class="min-h-screen p-4 md:p-10">
+
+    <!-- Toast Container -->
+    <div id="toast-container"></div>
+
+    <!-- Zoom Modal (#14) -->
+    <div id="zoom-modal" onclick="closeZoom()">
+        <img id="zoom-img" src="" alt="Zoomed preview">
+    </div>
+
+    <!-- Keyboard Shortcuts Modal -->
+    <div id="shortcuts-modal" onclick="this.classList.remove('active')">
+        <div class="studio-card rounded-2xl p-6 max-w-sm w-full mx-4 shadow-2xl" onclick="event.stopPropagation()">
+            <h3 class="font-bold text-lg mb-4 text-right gradient-text">اختصارات لوحة المفاتيح</h3>
+            <div class="space-y-3 text-sm" dir="ltr">
+                <div class="flex justify-between"><kbd class="bg-slate-700 text-white px-2 py-1 rounded text-xs">&larr;  &rarr;</kbd><span class="text-theme-secondary">Navigate images</span></div>
+                <div class="flex justify-between"><kbd class="bg-slate-700 text-white px-2 py-1 rounded text-xs">Delete</kbd><span class="text-theme-secondary">Delete selected</span></div>
+                <div class="flex justify-between"><kbd class="bg-slate-700 text-white px-2 py-1 rounded text-xs">Enter</kbd><span class="text-theme-secondary">Save &amp; Next</span></div>
+                <div class="flex justify-between"><kbd class="bg-slate-700 text-white px-2 py-1 rounded text-xs">Ctrl+S</kbd><span class="text-theme-secondary">Process current</span></div>
+                <div class="flex justify-between"><kbd class="bg-slate-700 text-white px-2 py-1 rounded text-xs">Escape</kbd><span class="text-theme-secondary">Close modals</span></div>
+            </div>
+            <button onclick="document.getElementById('shortcuts-modal').classList.remove('active')" class="mt-5 w-full py-2 bg-yellow-500 text-slate-900 rounded-lg font-bold">حسناً</button>
+        </div>
+    </div>
+
+    <!-- Mobile Drawer Overlay -->
+    <div class="mobile-drawer-overlay lg:hidden" id="drawer-overlay" onclick="toggleDrawer(false)"></div>
+    <div class="mobile-drawer lg:hidden studio-card" id="mobile-drawer">
+        <div class="flex justify-between items-center mb-4">
+            <h3 class="font-bold text-sm text-theme-secondary">قائمة المعالجة</h3>
+            <button onclick="toggleDrawer(false)" class="w-8 h-8 rounded-full bg-slate-700 flex items-center justify-center"><i class="fa-solid fa-xmark text-white text-sm"></i></button>
+        </div>
+        <div id="mobile-image-list" class="flex flex-col gap-3 overflow-y-auto"></div>
+    </div>
+
+    <!-- Header -->
+    <header class="max-w-[1400px] mx-auto mb-8 flex flex-col md:flex-row justify-between items-center gap-4">
+        <div>
+            <h1 class="text-4xl font-bold gradient-text text-right">ستوديو الهلال</h1>
+            <p class="text-theme-secondary text-right">سير عمل متكامل</p>
+        </div>
+        <div class="flex flex-wrap justify-center md:justify-end gap-2">
+            <a href="https://esmailx50-job.hf.space" target="_blank" class="flex items-center gap-2 px-3 py-2 rounded-full bg-indigo-900/30 border border-indigo-500/50 text-sm text-indigo-300 hover:bg-indigo-500 hover:text-white transition-all font-bold">
+                <i class="fa-solid fa-wand-magic-sparkles"></i>
+                <span class="hidden sm:inline">أداة تحسين الجودة</span>
+            </a>
+            <a href="https://esmailx50-rmbg2.hf.space" target="_blank" class="flex items-center gap-2 px-3 py-2 rounded-full bg-rose-900/30 border border-rose-500/50 text-sm text-rose-300 hover:bg-rose-500 hover:text-white transition-all font-bold">
+                <i class="fa-solid fa-eraser"></i>
+                <span class="hidden sm:inline">أداة إزالة الخلفية</span>
+            </a>
+
+            <!-- Theme Toggle (#11) -->
+            <button id="theme-toggle" onclick="toggleTheme()" title="تبديل السمة" class="w-10 h-10 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center hover:bg-slate-700 transition-all">
+                <i class="fa-solid fa-sun text-yellow-400 text-sm" id="theme-icon"></i>
+            </button>
+
+            <!-- Keyboard Shortcuts Hint -->
+            <button onclick="document.getElementById('shortcuts-modal').classList.add('active')" title="اختصارات لوحة المفاتيح" class="w-10 h-10 rounded-full bg-slate-800 border border-slate-700 flex items-center justify-center hover:bg-slate-700 transition-all">
+                <i class="fa-regular fa-keyboard text-slate-400 text-sm"></i>
+            </button>
+
+            <div id="ai-status" class="flex items-center gap-2 px-4 py-2 rounded-full bg-slate-800 border border-slate-700 text-sm text-slate-400">
+                <div class="w-3 h-3 rounded-full bg-yellow-500 animate-pulse"></div>
+            </div>
+        </div>
+    </header>
+
+    <main class="max-w-[1400px] mx-auto grid grid-cols-1 lg:grid-cols-12 gap-6 lg:gap-6">
+
+        <!-- Mobile Queue Toggle Button (#10) -->
+        <div class="lg:hidden flex gap-3">
+            <button onclick="toggleDrawer(true)" class="flex-1 studio-card rounded-xl p-3 flex items-center justify-center gap-3 active:scale-95 transition-transform">
+                <i class="fa-solid fa-list text-yellow-500"></i>
+                <span class="font-bold text-sm text-theme-secondary">قائمة الصور</span>
+                <span id="mobile-queue-count" class="text-xs bg-yellow-500 text-slate-900 px-2 py-0.5 rounded-full font-bold">0</span>
+            </button>
+        </div>
+
+        <!-- ── COLUMN 1: QUEUE (RIGHT SIDE) ── -->
+        <div class="hidden lg:flex lg:col-span-3 flex-col gap-4 order-1">
+            <div class="studio-card rounded-2xl p-5 text-center border-dashed border-2 hover:border-yellow-500 transition-all cursor-pointer group" style="border-color: var(--border-card);" id="drop-zone">
+                <input type="file" id="file-input" multiple class="hidden" accept="image/*">
+                <div class="float-anim">
+                    <i class="fa-solid fa-cloud-arrow-up text-4xl mb-2 text-slate-400 group-hover:text-yellow-500 transition-colors"></i>
+                </div>
+                <h3 class="font-semibold text-sm text-theme-primary">ارفع صورة</h3>
+                <p class="text-theme-muted text-[10px] mt-1">أو اسحب وأفلت هنا</p>
+                <div id="upload-progress-wrapper" class="hidden">
+                    <div class="upload-progress-bar">
+                        <div id="upload-progress-fill" class="upload-progress-fill"></div>
+                    </div>
+                    <p id="upload-progress-text" class="text-xs text-theme-muted mt-1">جاري الرفع...</p>
+                </div>
+            </div>
+
+            <div class="studio-card rounded-2xl p-4 flex flex-col">
+                <div class="flex justify-between items-center mb-2 px-1">
+                    <h3 class="font-bold uppercase text-[10px] tracking-widest text-theme-muted">قائمة المعالجة</h3>
+                    <span id="queue-count" class="text-[10px] bg-slate-700 text-white px-2 py-0.5 rounded">٠ صور</span>
+                </div>
+                <div id="image-list" class="queue-slider">
+                    <div class="text-center w-full py-6" id="empty-queue-placeholder">
+                        <p class="text-theme-muted text-xs font-medium">القائمة فارغة</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Mobile Drop Zone (shown only on mobile when drawer is closed) -->
+        <div class="lg:hidden">
+            <div class="studio-card rounded-2xl p-4 text-center border-dashed border-2 hover:border-yellow-500 transition-all cursor-pointer group" style="border-color: var(--border-card);" id="drop-zone-mobile">
+                <div class="float-anim inline-block">
+                    <i class="fa-solid fa-cloud-arrow-up text-3xl text-slate-400 group-hover:text-yellow-500 transition-colors"></i>
+                </div>
+                <p class="text-sm text-theme-muted mt-2">اضغط هنا لرفع الصور</p>
+                <div id="upload-progress-wrapper-mobile" class="hidden">
+                    <div class="upload-progress-bar">
+                        <div id="upload-progress-fill-mobile" class="upload-progress-fill"></div>
+                    </div>
+                    <p id="upload-progress-text-mobile" class="text-xs text-theme-muted mt-1">جاري الرفع...</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- ── COLUMN 2: CENTER (inputs + preview) ── -->
+        <div class="lg:col-span-6 flex flex-col gap-6 order-2">
+
+            <!-- Data Input Card -->
+            <div class="studio-card rounded-2xl p-4 shadow-lg">
+                <div class="flex items-center justify-between mb-4 flex-wrap gap-2">
+                    <div class="flex items-center gap-3">
+                        <h3 class="font-bold uppercase text-xs tracking-widest text-theme-muted">بيانات الطالب</h3>
+                        <span id="current-filename" class="text-xs font-bold text-theme-secondary truncate max-w-[140px]" style="border-right: 1px solid var(--border-card); padding-right: 12px;"></span>
+                    </div>
+                    <!-- Moved navigation here -->
+                    <div class="flex items-center gap-2" dir="ltr">
+                        <button onclick="navigate(-1)" class="w-8 h-8 rounded-full bg-slate-800 hover:bg-slate-700 border border-slate-700 flex items-center justify-center transition-all">
+                            <i class="fa-solid fa-chevron-left text-slate-400 text-xs"></i>
+                        </button>
+                        <span id="nav-counter" class="text-xs font-mono font-bold text-yellow-500 mx-1">0/0</span>
+                        <button onclick="navigate(1)" class="w-8 h-8 rounded-full bg-slate-800 hover:bg-slate-700 border border-slate-700 flex items-center justify-center transition-all">
+                            <i class="fa-solid fa-chevron-right text-slate-400 text-xs"></i>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-xs font-bold text-theme-muted uppercase mb-2 tracking-widest text-right">اسم الطالب</label>
+                        <input type="text" id="student-name" dir="rtl" class="w-full studio-input border rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-yellow-500 outline-none transition-all text-right" placeholder="الاسم هنا...">
+                    </div>
+                    <div>
+                        <label class="block text-xs font-bold text-theme-muted uppercase mb-2 tracking-widest text-right">الرقم القومي</label>
+                        <input type="text" id="student-id" class="w-full studio-input border rounded-lg px-4 py-2.5 focus:ring-2 focus:ring-yellow-500 outline-none transition-all text-right" placeholder="٣٠٠٠...">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Editor/Preview Area -->
+            <div class="studio-card rounded-2xl p-2 flex-grow relative min-h-[450px] flex items-center justify-center overflow-hidden" id="main-area">
+
+                <!-- Before/After Toggle (#3) -->
+                <div class="ba-toggle hidden" id="ba-toggle-wrapper">
+                    <button onclick="toggleBeforeAfter()" id="ba-toggle-btn" class="px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-2 transition-all" style="background: rgba(0,0,0,0.6); color: white; border: 1px solid rgba(255,255,255,0.15);">
+                        <i class="fa-solid fa-eye"></i>
+                        <span id="ba-toggle-label">الأصلية</span>
+                    </button>
+                </div>
+
+                <!-- Zoom Hint (#14) -->
+                <button onclick="openZoom()" id="zoom-hint" class="hidden absolute bottom-3 left-3 z-10 px-3 py-1.5 rounded-lg text-xs font-bold flex items-center gap-2 transition-all hover:scale-105" style="background: rgba(0,0,0,0.6); color: white; border: 1px solid rgba(255,255,255,0.15);">
+                    <i class="fa-solid fa-magnifying-glass-plus"></i>
+                    تكبير
+                </button>
+
+                <!-- Cropper Mode -->
+                <div id="cropper-container" class="hidden w-full h-full p-4 flex flex-col gap-4">
+                    <div class="flex-1 overflow-hidden rounded-lg bg-black">
+                        <img id="cropper-img" src="">
+                    </div>
+                    <div class="flex justify-end gap-4">
+                        <button onclick="cancelCrop()" class="px-6 py-2 bg-slate-700 rounded-lg font-bold text-white">إلغاء</button>
+                        <button onclick="applyCrop()" class="px-6 py-2 bg-yellow-500 text-slate-900 rounded-lg font-bold">حفظ وإعادة المعالجة</button>
+                    </div>
+                </div>
+
+                <!-- Preview Mode -->
+                <div id="preview-container" class="w-full h-full flex items-center justify-center">
+                    <div id="preview-skeleton" class="hidden w-[80%] h-[80%] skeleton rounded-lg shadow-2xl opacity-50"></div>
+                    <img id="main-preview" src="" class="max-w-full max-h-[500px] hidden rounded shadow-2xl preview-transition opacity-0 cursor-zoom-in" onclick="openZoom()">
+                    <!-- Improved Empty State (#13) -->
+                    <div id="preview-placeholder" class="text-center px-4" style="color: var(--text-muted);">
+                        <div class="float-anim inline-block mb-4">
+                            <svg width="100" height="100" viewBox="0 0 100 100" fill="none" class="mx-auto opacity-25">
+                                <rect x="12" y="18" width="76" height="64" rx="10" stroke="currentColor" stroke-width="2.5"/>
+                                <circle cx="35" cy="40" r="8" stroke="currentColor" stroke-width="2.5"/>
+                                <path d="M12 70 L35 50 L52 62 L65 45 L88 65" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+                                <path d="M62 22 L62 14 M62 14 L56 20 M62 14 L68 20" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                            </svg>
+                        </div>
+                        <p class="font-semibold text-sm">اختر صورة من القائمة</p>
+                    </div>
+                </div>
+
+                <!-- Batch Processing Overlay -->
+                <div id="batch-overlay" class="absolute inset-0 hidden items-center justify-center flex-col gap-5 z-50 rounded-2xl" style="background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);">
+                    <div class="w-14 h-14 border-4 border-yellow-500 border-t-transparent rounded-full animate-spin"></div>
+                    <p id="batch-counter" class="text-5xl font-extrabold text-yellow-400 font-mono tracking-wider" dir="ltr">0/0</p>
+                    <p class="text-sm text-slate-300 font-semibold">جاري المعالجة...</p>
+                </div>
+            </div>
+        </div>
+
+        <!-- ── COLUMN 3: OPTIONS (LEFT SIDE) ── -->
+        <div class="lg:col-span-3 flex flex-col gap-6 order-3">
+             <div class="studio-card rounded-2xl p-5 shadow-xl sticky top-6">
+                <label class="block text-[10px] font-bold text-theme-muted uppercase mb-4 tracking-widest text-right">الخيارات والإعدادات</label>
+                
+                <!-- Processing Steps -->
+                <div class="space-y-3 mb-6" dir="rtl">
+                    <label class="flex items-center gap-3 cursor-pointer group p-2 rounded-lg hover:bg-slate-500/5 transition-colors">
+                        <input type="checkbox" id="step-retouch" checked class="w-5 h-5 rounded border-slate-700 bg-slate-800 text-yellow-500 focus:ring-yellow-500">
+                        <span class="text-sm font-medium text-theme-secondary group-hover:text-yellow-500 transition-colors">تجميل البشرة</span>
+                    </label>
+                    <label class="flex items-center gap-3 cursor-pointer group p-2 rounded-lg hover:bg-slate-500/5 transition-colors">
+                        <input type="checkbox" id="step-color" checked class="w-5 h-5 rounded border-slate-700 bg-slate-800 text-yellow-500 focus:ring-yellow-500">
+                        <span class="text-sm font-medium text-theme-secondary group-hover:text-yellow-500 transition-colors">تحسين الألوان</span>
+                    </label>
+                    <label class="flex items-center gap-3 cursor-pointer group p-2 rounded-lg hover:bg-slate-500/5 transition-colors">
+                        <input type="checkbox" id="step-rmbg" checked class="w-5 h-5 rounded border-slate-700 bg-slate-800 text-yellow-500 focus:ring-yellow-500">
+                        <span class="text-sm font-medium text-theme-secondary group-hover:text-yellow-500 transition-colors">إزالة الخلفية</span>
+                    </label>
+                    <label class="flex items-center gap-3 cursor-pointer group p-2 rounded-lg hover:bg-slate-500/5 transition-colors">
+                        <input type="checkbox" id="step-crop" checked class="w-5 h-5 rounded border-slate-700 bg-slate-800 text-yellow-500 focus:ring-yellow-500">
+                        <span class="text-sm font-medium text-theme-secondary group-hover:text-yellow-500 transition-colors">قص تلقائي</span>
+                    </label>
+
+                    <div class="border-t my-3" style="border-color: var(--border-card);"></div>
+
+                    <label class="flex items-center gap-3 cursor-pointer group p-2 rounded-lg hover:bg-slate-500/5 transition-colors">
+                        <input type="checkbox" id="add-studio" checked class="w-5 h-5 rounded border-slate-700 bg-slate-800 text-emerald-500 focus:ring-emerald-500">
+                        <span class="text-sm font-medium text-theme-secondary group-hover:text-emerald-500 transition-colors">اسم الاستوديو</span>
+                    </label>
+                    <label class="flex items-center gap-3 cursor-pointer group p-2 rounded-lg hover:bg-slate-500/5 transition-colors">
+                        <input type="checkbox" id="add-logo" checked class="w-5 h-5 rounded border-slate-700 bg-slate-800 text-emerald-500 focus:ring-emerald-500">
+                        <span class="text-sm font-medium text-theme-secondary group-hover:text-emerald-500 transition-colors">شعار الاستوديو</span>
+                    </label>
+                    <label class="flex items-center gap-3 cursor-pointer group p-2 rounded-lg hover:bg-slate-500/5 transition-colors">
+                        <input type="checkbox" id="add-date" checked class="w-5 h-5 rounded border-slate-700 bg-slate-800 text-emerald-500 focus:ring-emerald-500">
+                        <span class="text-sm font-medium text-theme-secondary group-hover:text-emerald-500 transition-colors">إضافة التاريخ</span>
+                    </label>
+                </div>
+
+                <!-- Settings Panel (#5) - Always visible in side column? Or collapsible? Let's keep collapsible but cleaner -->
+                <div class="mb-6">
+                    <button onclick="toggleSettings()" class="w-full justify-between flex items-center gap-2 text-xs text-theme-muted hover:text-yellow-500 transition-colors font-bold p-2 bg-slate-500/5 rounded-lg">
+                        <div class="flex items-center gap-2">
+                             <i class="fa-solid fa-sliders text-xs"></i>
+                             <span>إعدادات متقدمة</span>
+                        </div>
+                        <i class="fa-solid fa-chevron-down text-[10px] transition-transform" id="settings-chevron"></i>
+                    </button>
+                    <div id="settings-panel" class="settings-panel mt-2">
+                        <div class="p-3 rounded-lg border space-y-4 text-right" style="background: var(--bg-card-alt); border-color: var(--border-card);">
+                            <!-- Retouch Sensitivity -->
+                            <div>
+                                <div class="flex justify-between items-center mb-1">
+                                    <label class="text-[10px] font-bold text-theme-muted">حساسية التجميل</label>
+                                    <span id="sensitivity-val" class="text-[10px] font-mono text-yellow-500">3.0</span>
+                                </div>
+                                <input type="range" id="setting-sensitivity" min="1" max="5" step="0.5" value="3.0" class="w-full accent-yellow-500 h-1.5" oninput="document.getElementById('sensitivity-val').textContent=this.value">
+                            </div>
+                            <!-- Tone Smoothing -->
+                            <div>
+                                <div class="flex justify-between items-center mb-1">
+                                    <label class="text-[10px] font-bold text-theme-muted">نعومة البشرة</label>
+                                    <span id="smoothing-val" class="text-[10px] font-mono text-yellow-500">0.6</span>
+                                </div>
+                                <input type="range" id="setting-smoothing" min="0" max="1" step="0.1" value="0.6" class="w-full accent-yellow-500 h-1.5" oninput="document.getElementById('smoothing-val').textContent=parseFloat(this.value).toFixed(1)">
+                            </div>
+                            <!-- ID Font Size -->
+                            <div>
+                                <div class="flex justify-between items-center mb-1">
+                                    <label class="text-[10px] font-bold text-theme-muted">حجم خط الرقم</label>
+                                    <span id="fontsize-val" class="text-[10px] font-mono text-yellow-500">63</span>
+                                </div>
+                                <input type="range" id="setting-fontsize" min="30" max="120" step="1" value="63" class="w-full accent-yellow-500 h-1.5" oninput="document.getElementById('fontsize-val').textContent=this.value">
+                            </div>
+                            <!-- Name Font Size -->
+                            <div>
+                                <div class="flex justify-between items-center mb-1">
+                                    <label class="text-[10px] font-bold text-theme-muted">حجم خط الاسم</label>
+                                    <span id="namefontsize-val" class="text-[10px] font-mono text-yellow-500">43</span>
+                                </div>
+                                <input type="range" id="setting-namefontsize" min="20" max="80" step="1" value="43" class="w-full accent-yellow-500 h-1.5" oninput="document.getElementById('namefontsize-val').textContent=this.value">
+                            </div>
+                            <button onclick="saveSettings()" class="w-full py-2 bg-yellow-500 hover:bg-yellow-600 text-slate-900 rounded-lg font-bold text-xs transition-all flex items-center justify-center gap-2">
+                                <i class="fa-solid fa-floppy-disk"></i> حفظ
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Actions List -->
+                <div class="flex flex-col gap-2">
+                    <button id="process-all-btn" disabled class="w-full bg-yellow-500 hover:bg-yellow-600 disabled:opacity-50 disabled:cursor-not-allowed text-slate-900 font-bold py-3 rounded-lg transition-all flex items-center justify-center gap-2 text-sm shadow-lg shadow-yellow-500/20">
+                        <i class="fa-solid fa-play"></i> بدء معالجة الكل
+                    </button>
+
+                    <div class="grid grid-cols-2 gap-2 mt-2">
+                        <!-- Re-process Single (#7) -->
+                        <button id="reprocess-btn" disabled onclick="reprocessCurrent()" title="إعادة معالجة هذه الصورة" class="bg-orange-600 hover:bg-orange-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-bold py-2 rounded-lg transition-all flex items-center justify-center gap-2 text-xs">
+                            <i class="fa-solid fa-rotate"></i> إعادة
+                        </button>
+
+                        <button id="edit-crop-btn" disabled class="bg-slate-700 hover:bg-slate-600 text-white font-bold py-2 rounded-lg transition-all flex items-center justify-center gap-2 text-xs">
+                             <i class="fa-solid fa-crop-simple"></i> قص
+                        </button>
+                    </div>
+
+                    <div class="grid grid-cols-2 gap-2 mt-1">
+                        <button id="save-btn" disabled title="تحميل" class="bg-emerald-600 hover:bg-emerald-700 disabled:opacity-50 text-white font-bold py-2 rounded-lg transition-all">
+                            <i class="fa-solid fa-download"></i>
+                        </button>
+                        <button id="download-all-btn" disabled title="ضغط الكل" class="bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white font-bold py-2 rounded-lg transition-all flex items-center justify-center gap-1">
+                            <i class="fa-solid fa-file-zipper"></i>
+                        </button>
+                    </div>
+                    
+                    <button id="clear-all-btn" title="حذف الكل" class="mt-4 w-full bg-transparent border border-rose-600/30 hover:bg-rose-600 hover:text-white text-rose-500 font-bold py-2 rounded-lg transition-all text-xs">
+                        <i class="fa-solid fa-trash-can ml-1"></i> حذف جميع الصور
+                    </button>
+                </div>
+
+             </div>
+        </div>
+
+    </main>
+
+    <script>
+        // ══════════════════════════════════════════════════
+        //  STATE
+        // ══════════════════════════════════════════════════
+        let imageData = [];
+        let currentIndex = -1;
+        let cropper = null;
+        let isAIReady = false;
+        let showingOriginal = false; // Before/After state
+
+        // ══════════════════════════════════════════════════
+        //  UI ELEMENTS
+        // ══════════════════════════════════════════════════
+        const fileInput = document.getElementById('file-input');
+        const imageList = document.getElementById('image-list');
+        const aiStatus = document.getElementById('ai-status');
+        const processAllBtn = document.getElementById('process-all-btn');
+        const downloadAllBtn = document.getElementById('download-all-btn');
+        const clearAllBtn = document.getElementById('clear-all-btn');
+        const editBtn = document.getElementById('edit-crop-btn');
+        const saveBtn = document.getElementById('save-btn');
+        const reprocessBtn = document.getElementById('reprocess-btn');
+        const mainPreview = document.getElementById('main-preview');
+        const previewPlaceholder = document.getElementById('preview-placeholder');
+        const previewContainer = document.getElementById('preview-container');
+        const cropperContainer = document.getElementById('cropper-container');
+        const cropperImg = document.getElementById('cropper-img');
+        const baToggleWrapper = document.getElementById('ba-toggle-wrapper');
+        const zoomHint = document.getElementById('zoom-hint');
+
+        // ══════════════════════════════════════════════════
+        //  THEME TOGGLE (#11)
+        // ══════════════════════════════════════════════════
+        function initTheme() {
+            const saved = localStorage.getItem('studio-theme') || 'dark';
+            document.documentElement.setAttribute('data-theme', saved);
+            updateThemeIcon(saved);
+        }
+        function toggleTheme() {
+            const current = document.documentElement.getAttribute('data-theme');
+            const next = current === 'dark' ? 'light' : 'dark';
+            document.documentElement.setAttribute('data-theme', next);
+            localStorage.setItem('studio-theme', next);
+            updateThemeIcon(next);
+        }
+        function updateThemeIcon(theme) {
+            const icon = document.getElementById('theme-icon');
+            if (theme === 'dark') {
+                icon.className = 'fa-solid fa-sun text-yellow-400 text-sm';
+            } else {
+                icon.className = 'fa-solid fa-moon text-slate-600 text-sm';
+            }
+        }
+        initTheme();
+
+        // ══════════════════════════════════════════════════
+        //  TOAST NOTIFICATIONS
+        // ══════════════════════════════════════════════════
+        function showToast(message, type = 'info', duration = 4000) {
+            const container = document.getElementById('toast-container');
+            const toast = document.createElement('div');
+            const icons = { success: 'fa-circle-check', error: 'fa-circle-exclamation', info: 'fa-circle-info', warning: 'fa-triangle-exclamation' };
+            toast.className = `toast toast-${type}`;
+            toast.innerHTML = `<i class="fa-solid ${icons[type] || icons.info}"></i><span>${message}</span>`;
+            container.appendChild(toast);
+            setTimeout(() => {
+                toast.style.animation = 'toastOut 0.3s ease-in forwards';
+                setTimeout(() => toast.remove(), 300);
+            }, duration);
+        }
+
+        // ══════════════════════════════════════════════════
+        //  SETTINGS PANEL (#5)
+        // ══════════════════════════════════════════════════
+        function toggleSettings() {
+            const panel = document.getElementById('settings-panel');
+            const chevron = document.getElementById('settings-chevron');
+            panel.classList.toggle('open');
+            chevron.style.transform = panel.classList.contains('open') ? 'rotate(180deg)' : '';
+        }
+
+        async function loadSettingsFromServer() {
+            try {
+                const res = await fetch('/settings');
+                const data = await res.json();
+                if (data.retouch) {
+                    if (data.retouch.sensitivity !== undefined) {
+                        document.getElementById('setting-sensitivity').value = data.retouch.sensitivity;
+                        document.getElementById('sensitivity-val').textContent = data.retouch.sensitivity;
+                    }
+                    if (data.retouch.tone_smoothing !== undefined) {
+                        document.getElementById('setting-smoothing').value = data.retouch.tone_smoothing;
+                        document.getElementById('smoothing-val').textContent = parseFloat(data.retouch.tone_smoothing).toFixed(1);
+                    }
+                }
+                if (data.overlays) {
+                    if (data.overlays.id_font_size !== undefined) {
+                        document.getElementById('setting-fontsize').value = data.overlays.id_font_size;
+                        document.getElementById('fontsize-val').textContent = data.overlays.id_font_size;
+                    }
+                    if (data.overlays.name_font_size !== undefined) {
+                        document.getElementById('setting-namefontsize').value = data.overlays.name_font_size;
+                        document.getElementById('namefontsize-val').textContent = data.overlays.name_font_size;
+                    }
+                }
+            } catch (e) { console.warn('Could not load settings', e); }
+        }
+
+        async function saveSettings() {
+            const payload = {
+                retouch: {
+                    sensitivity: parseFloat(document.getElementById('setting-sensitivity').value),
+                    tone_smoothing: parseFloat(document.getElementById('setting-smoothing').value)
+                },
+                overlays: {
+                    id_font_size: parseInt(document.getElementById('setting-fontsize').value),
+                    name_font_size: parseInt(document.getElementById('setting-namefontsize').value)
+                }
+            };
+            try {
+                const res = await fetch('/settings', {
+                    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload)
+                });
+                const result = await res.json();
+                if (result.status === 'success') {
+                    showToast('تم حفظ الإعدادات بنجاح', 'success');
+                } else {
+                    showToast('فشل حفظ الإعدادات', 'error');
+                }
+            } catch (e) {
+                showToast('خطأ في الاتصال بالسيرفر', 'error');
+            }
+        }
+        loadSettingsFromServer();
+
+        // ══════════════════════════════════════════════════
+        //  MOBILE DRAWER (#10)
+        // ══════════════════════════════════════════════════
+        function toggleDrawer(open) {
+            document.getElementById('drawer-overlay').classList.toggle('active', open);
+            document.getElementById('mobile-drawer').classList.toggle('active', open);
+        }
+        const dropZoneMobile = document.getElementById('drop-zone-mobile');
+        if (dropZoneMobile) {
+            dropZoneMobile.onclick = () => fileInput.click();
+        }
+
+        // ══════════════════════════════════════════════════
+        //  AI STATUS CHECK
+        // ══════════════════════════════════════════════════
+        async function checkStatus() {
+            try {
+                const res = await fetch('/status');
+                const data = await res.json();
+                if (data.ai_ready) {
+                    isAIReady = true;
+                    aiStatus.innerHTML = '<div class="w-3 h-3 rounded-full bg-emerald-500"></div>';
+                    aiStatus.className = "flex items-center gap-2 px-4 py-2 rounded-full bg-emerald-900/20 border border-emerald-800/50 text-sm text-emerald-400 font-bold";
+                }
+            } catch (e) {}
+        }
+        setInterval(checkStatus, 2000);
+
+        // ══════════════════════════════════════════════════
+        //  UPLOAD & QUEUE
+        // ══════════════════════════════════════════════════
+        const dropZone = document.getElementById('drop-zone');
+        dropZone.onclick = () => fileInput.click();
+
+        ['dragenter', 'dragover'].forEach(name => {
+            dropZone.addEventListener(name, (e) => { e.preventDefault(); dropZone.classList.add('drop-glow'); }, false);
+        });
+        ['dragleave', 'drop'].forEach(name => {
+            dropZone.addEventListener(name, (e) => { e.preventDefault(); dropZone.classList.remove('drop-glow'); }, false);
+        });
+        dropZone.addEventListener('drop', (e) => { handleFiles(e.dataTransfer.files); }, false);
+        fileInput.onchange = (e) => handleFiles(e.target.files);
+
+        function uploadFileWithProgress(file) {
+            return new Promise((resolve, reject) => {
+                const xhr = new XMLHttpRequest();
+                const formData = new FormData();
+                formData.append('file', file);
+                const wrappers = [document.getElementById('upload-progress-wrapper'), document.getElementById('upload-progress-wrapper-mobile')];
+                const fills = [document.getElementById('upload-progress-fill'), document.getElementById('upload-progress-fill-mobile')];
+                const texts = [document.getElementById('upload-progress-text'), document.getElementById('upload-progress-text-mobile')];
+
+                wrappers.forEach(w => { if (w) w.classList.remove('hidden'); });
+                xhr.upload.onprogress = (e) => {
+                    if (e.lengthComputable) {
+                        const pct = Math.round((e.loaded / e.total) * 100);
+                        fills.forEach(f => { if (f) f.style.width = pct + '%'; });
+                        texts.forEach(t => { if (t) t.textContent = `جاري الرفع... ${pct}%`; });
+                    }
+                };
+                xhr.onload = () => {
+                    wrappers.forEach(w => { if (w) w.classList.add('hidden'); });
+                    fills.forEach(f => { if (f) f.style.width = '0%'; });
+                    if (xhr.status >= 200 && xhr.status < 300) resolve(JSON.parse(xhr.responseText));
+                    else reject(new Error(`Upload failed: ${xhr.status}`));
+                };
+                xhr.onerror = () => {
+                    wrappers.forEach(w => { if (w) w.classList.add('hidden'); });
+                    reject(new Error('Network error'));
+                };
+                xhr.open('POST', '/upload');
+                xhr.send(formData);
+            });
+        }
+
+        async function handleFiles(files) {
+            for (let file of files) {
+                try {
+                    const data = await uploadFileWithProgress(file);
+                    imageData.push({ ...data, name: "", id_num: "", result_url: null, custom_crop: null, steps: null, status: 'waiting' });
+                    renderQueue();
+                    if (currentIndex === -1) selectImage(imageData.length - 1);
+                } catch (e) {
+                    showToast(`فشل رفع ${file.name}`, 'error');
+                }
+            }
+            fileInput.value = "";
+        }
+
+        function getQualityBadge(width, height) {
+            const megapixels = (width * height) / 1000000;
+            const minDim = Math.min(width, height);
+            if (minDim >= 1500 || megapixels >= 3) return '<span class="badge-quality badge-hd">HD</span>';
+            if (minDim >= 800 || megapixels >= 1) return '<span class="badge-quality badge-mid">OK</span>';
+            return '<span class="badge-quality badge-lowres" title="جودة منخفضة">⚠ LOW</span>';
+        }
+
+        // ══════════════════════════════════════════════════
+        //  QUEUE RENDER - WITH DELETE BUTTON
+        // ══════════════════════════════════════════════════
+        function renderQueue() {
+            const count = imageData.length;
+            document.getElementById('queue-count').innerText = `${count} صور`;
+            document.getElementById('nav-counter').innerText = count > 0 ? `${currentIndex + 1}/${count}` : "0/0";
+            const mobileCount = document.getElementById('mobile-queue-count');
+            if (mobileCount) mobileCount.innerText = count;
+
+            if (count === 0) {
+                const emptyHTML = `
+                    <div class="text-center py-12">
+                        <div class="float-anim inline-block mb-4">
+                            <i class="fa-solid fa-layer-group text-3xl opacity-30"></i>
+                        </div>
+                        <p class="text-theme-muted text-sm font-medium">القائمة فارغة</p>
+                    </div>`;
+                imageList.innerHTML = emptyHTML;
+                const mobileList = document.getElementById('mobile-image-list');
+                if (mobileList) mobileList.innerHTML = `<div class="text-center py-10 text-theme-muted italic text-sm">القائمة فارغة</div>`;
+                processAllBtn.disabled = true;
+                downloadAllBtn.disabled = true;
+                editBtn.disabled = true;
+                saveBtn.disabled = true;
+                reprocessBtn.disabled = true;
+                return;
+            }
+
+            const t = new Date().getTime();
+            const html = imageData.map((img, idx) => {
+                let statusIcon = '';
+                if (img.status === 'waiting') statusIcon = '<i class="fa-regular fa-clock text-slate-500"></i>';
+                else if (img.status === 'processing') statusIcon = '<i class="fa-solid fa-gear processing-spin text-yellow-500"></i>';
+                else if (img.status === 'done') statusIcon = '<i class="fa-solid fa-circle-check text-emerald-500"></i>';
+                else if (img.status === 'error') statusIcon = '<i class="fa-solid fa-circle-exclamation text-rose-500"></i>';
+
+                return `
+                <div onclick="selectImage(${idx})" class="queue-slide ${currentIndex === idx ? 'active' : ''}">
+                    <img src="${img.result_url ? img.result_url + '?t=' + t : img.thumb_url}" alt="">
+                    <div class="slide-status">${statusIcon}</div>
+                    <button onclick="deleteImage(event, ${idx})" class="slide-delete" title="حذف"><i class="fa-solid fa-xmark"></i></button>
+                    <div class="slide-name">${img.filename}</div>
+                </div>
+            `}).join('');
+
+            imageList.innerHTML = html;
+            const mobileList = document.getElementById('mobile-image-list');
+            if (mobileList) mobileList.innerHTML = html;
+
+            // Auto-scroll to the active slide
+            const activeSlide = imageList.querySelector('.queue-slide.active');
+            if (activeSlide) activeSlide.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'center' });
+
+            processAllBtn.disabled = count === 0;
+            const processedCount = imageData.filter(d => d.result_url).length;
+            downloadAllBtn.disabled = processedCount === 0;
+        }
+
+        // ══════════════════════════════════════════════════
+        //  SELECTION & NAVIGATION
+        // ══════════════════════════════════════════════════
+        function navigate(direction) {
+            if (imageData.length === 0) return;
+            let nextIndex = currentIndex + direction;
+            if (nextIndex >= 0 && nextIndex < imageData.length) selectImage(nextIndex);
+        }
+
+        function selectImage(idx) {
+            saveCurrentFields();
+            currentIndex = idx;
+            showingOriginal = false;
+            const data = imageData[idx];
+
+            document.getElementById('student-name').value = data.name;
+            document.getElementById('student-id').value = data.id_num;
+            document.getElementById('current-filename').innerText = data.filename;
+            
+            baToggleWrapper.classList.toggle('hidden', !data.result_url);
+            document.getElementById('ba-toggle-label').textContent = 'الأصلية';
+            zoomHint.classList.toggle('hidden', !data.result_url && !data.thumb_url);
+            reprocessBtn.disabled = !data.result_url;
+
+            const previewSkeleton = document.getElementById('preview-skeleton');
+            const url = data.result_url ? data.result_url + '?t=' + Date.now() : data.thumb_url;
+
+            // Reset the image completely before loading the new one
+            mainPreview.classList.add('hidden');
+            mainPreview.classList.remove('opacity-100');
+            mainPreview.classList.add('opacity-0');
+            mainPreview.removeAttribute('src');
+            
+            if (!data.result_url) {
+                previewSkeleton.classList.remove('hidden');
+            } else {
+                previewSkeleton.classList.add('hidden');
+            }
+            previewPlaceholder.classList.add('hidden');
+
+            // Create a fresh Image to avoid any caching/onload issues
+            const tempImg = new Image();
+            tempImg.onload = () => {
+                mainPreview.src = tempImg.src;
+                mainPreview.classList.remove('hidden');
+                mainPreview.classList.remove('opacity-0');
+                mainPreview.classList.add('opacity-100');
+                previewSkeleton.classList.add('hidden');
+            };
+            tempImg.onerror = () => {
+                console.error('Failed to load preview:', url);
+                previewSkeleton.classList.add('hidden');
+            };
+            tempImg.src = url;
+
+            editBtn.disabled = false;
+            saveBtn.disabled = !data.result_url;
+            renderQueue();
+            toggleDrawer(false);
+        }
+
+        function saveCurrentFields() {
+            if (currentIndex === -1) return;
+            imageData[currentIndex].name = document.getElementById('student-name').value;
+            imageData[currentIndex].id_num = document.getElementById('student-id').value;
+        }
+
+        function toggleBeforeAfter() {
+            if (currentIndex === -1) return;
+            const data = imageData[currentIndex];
+            if (!data.result_url) return;
+            showingOriginal = !showingOriginal;
+            const label = document.getElementById('ba-toggle-label');
+            const t = new Date().getTime();
+            mainPreview.classList.add('opacity-0');
+            setTimeout(() => {
+                if (showingOriginal) {
+                    mainPreview.src = data.thumb_url;
+                    label.textContent = 'النتيجة';
+                } else {
+                    mainPreview.src = data.result_url + '?t=' + t;
+                    label.textContent = 'الأصلية';
+                }
+                mainPreview.onload = () => {
+                    mainPreview.classList.remove('opacity-0');
+                    mainPreview.classList.add('opacity-100');
+                };
+            }, 150);
+        }
+
+        // ══════════════════════════════════════════════════
+        //  ZOOM
+        // ══════════════════════════════════════════════════
+        function openZoom() {
+            if (!mainPreview.src) return;
+            const modal = document.getElementById('zoom-modal');
+            const zoomImg = document.getElementById('zoom-img');
+            zoomImg.src = mainPreview.src;
+            zoomImg.style.transform = 'scale(1)';
+            modal.classList.add('active');
+            modal.onwheel = (e) => {
+                e.preventDefault();
+                const current = parseFloat(zoomImg.style.transform.replace('scale(', '').replace(')', '')) || 1;
+                const delta = e.deltaY > 0 ? -0.15 : 0.15;
+                const next = Math.max(0.5, Math.min(5, current + delta));
+                zoomImg.style.transform = `scale(${next})`;
+            };
+        }
+        function closeZoom() { document.getElementById('zoom-modal').classList.remove('active'); }
+
+        // ══════════════════════════════════════════════════
+        //  PROCESSING
+        // ══════════════════════════════════════════════════
+        processAllBtn.onclick = async () => {
+            if (!isAIReady) return showToast("انتظر تحميل المحرك...", 'warning');
+            saveCurrentFields();
+            processAllBtn.disabled = true;
+            fileInput.disabled = true;
+
+            const toProcess = imageData.filter(d => !d.result_url);
+            const total = toProcess.length;
+            if (total === 0) { processAllBtn.disabled = false; fileInput.disabled = false; return; }
+
+            // Show batch overlay with counter
+            const overlay = document.getElementById('batch-overlay');
+            const counter = document.getElementById('batch-counter');
+            overlay.classList.replace('hidden', 'flex');
+            let done = 0;
+            counter.textContent = `0/${total}`;
+
+            for (let i = 0; i < imageData.length; i++) {
+                if (imageData[i].result_url) continue;
+                await runPipelineForIndex(i);
+                done++;
+                counter.textContent = `${done}/${total}`;
+            }
+
+            // Hide overlay
+            overlay.classList.replace('flex', 'hidden');
+            processAllBtn.disabled = false;
+            fileInput.disabled = false;
+
+            // Refresh preview to show result of currently selected image
+            if (currentIndex !== -1) selectImage(currentIndex);
+            showToast(`تمت معالجة ${done} صورة`, 'success');
+        };
+
+        async function runPipelineForIndex(idx, isCustom = false) {
+            const data = imageData[idx];
+            data.status = 'processing';
+            renderQueue();
+            const formData = new FormData();
+            formData.append('name', data.name);
+            formData.append('id_number', data.id_num);
+            formData.append('do_rmbg', document.getElementById('step-rmbg').checked);
+            formData.append('do_color', document.getElementById('step-color').checked);
+            formData.append('do_retouch', document.getElementById('step-retouch').checked);
+            formData.append('do_crop', document.getElementById('step-crop').checked);
+            formData.append('add_studio_name', document.getElementById('add-studio').checked);
+            formData.append('add_logo', document.getElementById('add-logo').checked);
+            formData.append('add_date', document.getElementById('add-date').checked);
+            if (isCustom && data.custom_crop) {
+                formData.append('x1', data.custom_crop.x1);
+                formData.append('y1', data.custom_crop.y1);
+                formData.append('x2', data.custom_crop.x2);
+                formData.append('y2', data.custom_crop.y2);
+            }
+            try {
+                const res = await fetch(`/process/${data.id}`, { method: 'POST', body: formData });
+                const result = await res.json();
+                if (result.error) throw new Error(result.error);
+                imageData[idx].result_url = result.result_url;
+                imageData[idx].status = 'done';
+                imageData[idx].steps = {
+                    rmbg: document.getElementById('step-rmbg').checked,
+                    color: document.getElementById('step-color').checked,
+                    retouch: document.getElementById('step-retouch').checked,
+                    crop: document.getElementById('step-crop').checked || !!data.custom_crop
+                };
+            } catch (e) {
+                console.error("Processing", e);
+                imageData[idx].status = 'error';
+                showToast(`خطأ في ${data.filename}`, 'error');
+            }
+            renderQueue();
+        }
+
+        async function reprocessCurrent() {
+            if (currentIndex === -1 || !isAIReady) return;
+            saveCurrentFields();
+            const data = imageData[currentIndex];
+            data.result_url = null;
+            data.status = 'waiting';
+            data.steps = null;
+            renderQueue();
+            await runPipelineForIndex(currentIndex, !!data.custom_crop);
+            selectImage(currentIndex);
+            showToast('تمت إعادة المعالجة', 'success');
+        }
+
+        // ══════════════════════════════════════════════════
+        //  CROP & DOWNLOAD
+        // ══════════════════════════════════════════════════
+        editBtn.onclick = () => {
+            const data = imageData[currentIndex];
+            cropperImg.src = data.thumb_url;
+            previewContainer.classList.add('hidden');
+            baToggleWrapper.classList.add('hidden');
+            zoomHint.classList.add('hidden');
+            cropperContainer.classList.remove('hidden');
+            if (cropper) cropper.destroy();
+            cropper = new Cropper(cropperImg, { aspectRatio: 5/7, viewMode: 1, autoCropArea: 0.8 });
+        };
+        function cancelCrop() {
+            cropperContainer.classList.add('hidden');
+            previewContainer.classList.remove('hidden');
+            if (currentIndex >= 0 && imageData[currentIndex].result_url) baToggleWrapper.classList.remove('hidden');
+            zoomHint.classList.remove('hidden');
+        }
+        async function applyCrop() {
+            const cropData = cropper.getData(true);
+            const imgData = imageData[currentIndex];
+            const displayImg = cropper.getImageData();
+            const scaleX = imgData.width / displayImg.naturalWidth;
+            const scaleY = imgData.height / displayImg.naturalHeight;
+            imgData.custom_crop = {
+                x1: Math.max(0, Math.round(cropData.x * scaleX)),
+                y1: Math.max(0, Math.round(cropData.y * scaleY)),
+                x2: Math.min(imgData.width, Math.round((cropData.x + cropData.width) * scaleX)),
+                y2: Math.min(imgData.height, Math.round((cropData.y + cropData.height) * scaleY))
+            };
+            cancelCrop();
+            imgData.result_url = null;
+            imgData.status = 'waiting';
+            await runPipelineForIndex(currentIndex, true);
+            selectImage(currentIndex);
+        }
+
+        downloadAllBtn.onclick = async () => {
+            const processed = imageData.filter(d => d.result_url);
+            if (processed.length === 0) return;
+            const overlay = document.getElementById('batch-overlay');
+            const counter = document.getElementById('batch-counter');
+            overlay.classList.replace('hidden', 'flex');
+            counter.textContent = 'ZIP...';
+            const zip = new JSZip();
+            const folder = zip.folder("studio_layouts");
+            for (let data of processed) {
+                const res = await fetch(data.result_url);
+                const blob = await res.blob();
+                folder.file(`${PathStem(data.filename)}_layout.jpg`, blob);
+            }
+            const content = await zip.generateAsync({ type: "blob" });
+            const link = document.createElement('a');
+            link.href = URL.createObjectURL(content);
+            link.download = `Studio_Batch_${new Date().getTime()}.zip`;
+            link.click();
+            overlay.classList.replace('flex', 'hidden');
+            showToast(`تم تحميل ${processed.length} صورة`, 'success');
+        };
+
+        clearAllBtn.onclick = async () => {
+            if (!confirm("هل تريد حذف جميع الصور؟")) return;
+            try {
+                const res = await fetch('/clear-all', { method: 'POST' });
+                imageData = [];
+                currentIndex = -1;
+                fileInput.value = "";
+                mainPreview.classList.add('hidden');
+                previewPlaceholder.classList.remove('hidden');
+                baToggleWrapper.classList.add('hidden');
+                zoomHint.classList.add('hidden');
+                document.getElementById('student-name').value = "";
+                document.getElementById('student-id').value = "";
+                document.getElementById('current-filename').innerText = "";
+                renderQueue();
+                showToast("تم الحذف", 'success');
+            } catch (e) {}
+        };
+
+        function deleteImage(e, idx) {
+            e.stopPropagation();
+            if(!confirm("حذف الصورة؟")) return;
+            imageData.splice(idx, 1);
+            if (imageData.length === 0) {
+                currentIndex = -1;
+                mainPreview.classList.add('hidden');
+                previewPlaceholder.classList.remove('hidden');
+                baToggleWrapper.classList.add('hidden');
+                zoomHint.classList.add('hidden');
+                document.getElementById('student-name').value = "";
+            } else {
+                if (currentIndex === idx) {
+                    currentIndex = Math.max(0, currentIndex - 1);
+                    selectImage(currentIndex);
+                } else if (currentIndex > idx) {
+                    currentIndex--;
+                }
+            }
+            renderQueue();
+        }
+
+        // Global Delete function for header button (keep for keyboard/compatibility)
+        function deleteSelected() {
+            if (currentIndex !== -1) deleteImage({stopPropagation:()=>{}}, currentIndex);
+        }
+
+        saveBtn.onclick = () => {
+            const link = document.createElement('a');
+            link.href = mainPreview.src;
+            link.download = `${PathStem(imageData[currentIndex].filename)}_layout.jpg`;
+            link.click();
+        };
+
+        function PathStem(filename) { return filename.substring(0, filename.lastIndexOf('.')) || filename; }
+
+        window.addEventListener('keydown', (e) => {
+            if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
+            if (e.key === 'Escape') { closeZoom(); document.getElementById('shortcuts-modal').classList.remove('active'); toggleDrawer(false); return; }
+            if (e.key === 'ArrowRight') navigate(1);
+            else if (e.key === 'ArrowLeft') navigate(-1);
+            else if (e.key === 'Delete') deleteSelected();
+            else if (e.key === 'Enter') { saveCurrentFields(); if (currentIndex < imageData.length - 1) navigate(1); }
+            else if (e.key === 's' && (e.ctrlKey || e.metaKey)) { e.preventDefault(); saveCurrentFields(); runPipelineForIndex(currentIndex); }
+        });
+    </script>
+</body>
+</html>