improve the model and fix girls try on issue

.gitattributes

@@ -0,0 +1,36 @@
+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text
+img/young-male-entrepreneur-making-eye-contact-against-blue-background.jpg filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,7 @@
+# Ignore user uploads and generated output
+static/uploads/*
+static/outputs/*
+
+# But keep the directories themselves
+!static/uploads/.gitkeep
+!static/outputs/.gitkeep

Dockerfile

@@ -0,0 +1,36 @@
+FROM python:3.10.12-slim
+
+WORKDIR /app
+
+# Set cache directories and performance optimizations
+ENV HF_HOME=/tmp/.cache
+ENV MPLCONFIGDIR=/tmp/.cache
+ENV OMP_NUM_THREADS=4
+ENV TOKENIZERS_PARALLELISM=false
+
+# Install dependencies including CUDA support
+RUN apt-get update && apt-get install -y \
+    libgl1-mesa-glx \
+    libglib2.0-0 \
+    libgomp1 \
+    && apt-get clean \
+    && rm -rf /var/lib/apt/lists/*
+
+# Create upload and output directories
+RUN mkdir -p /tmp/uploads /tmp/outputs && chmod -R 777 /tmp/uploads /tmp/outputs
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Create temporary cache directory (will be created at runtime)
+RUN mkdir -p /tmp/.cache && chmod -R 777 /tmp/.cache
+
+# Copy app code
+COPY . .
+
+# Set port
+ENV PORT=7860
+
+# Run with Gunicorn with optimized settings
+CMD ["gunicorn", "app:app", "--bind", "0.0.0.0:7860", "--workers", "1", "--threads", "4", "--worker-class", "gthread", "--timeout", "300"]

README.md

@@ -0,0 +1,11 @@
+---
+title: V Try On
+emoji: 👁
+colorFrom: pink
+colorTo: purple
+sdk: docker
+pinned: false
+short_description: virtual try on
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -0,0 +1,321 @@
+from flask import Flask, render_template, request, send_from_directory, session, redirect, url_for
+from PIL import Image
+import os, torch, cv2, mediapipe as mp
+from transformers import SamModel, SamProcessor, logging as hf_logging
+from torchvision import transforms
+from diffusers.utils import load_image
+from flask_cors import CORS 
+import json
+import time
+
+app = Flask(__name__)
+app.secret_key = os.environ.get('SECRET_KEY', 'dev-secret-key-change-in-production')
+CORS(app)
+
+# Enable Hugging Face logs
+hf_logging.set_verbosity_info()
+
+UPLOAD_FOLDER = '/tmp/uploads'
+OUTPUT_FOLDER = '/tmp/outputs'
+
+os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+os.makedirs(OUTPUT_FOLDER, exist_ok=True)
+
+# Global model vars
+model, processor, device = None, None, None
+
+def load_model():
+    """Load SAM model (CPU only)."""
+    global model, processor, device
+    device = "cpu"
+    print(f"[INFO] Using device: {device}")
+    model = SamModel.from_pretrained(
+        "Zigeng/SlimSAM-uniform-50",
+        cache_dir="/tmp/.cache",
+        torch_dtype=torch.float32,
+    )
+    processor = SamProcessor.from_pretrained("Zigeng/SlimSAM-uniform-50", cache_dir="/tmp/.cache")
+    print("[INFO] Model loaded successfully!")
+
+def cleanup_temp_files():
+    import shutil
+    try:
+        if os.path.exists("/tmp/.cache"):
+            shutil.rmtree("/tmp/.cache")
+        print("[INFO] Cleaned up cache")
+    except Exception as e:
+        print(f"[WARNING] Cleanup failed: {e}")
+
+def cleanup_old_outputs():
+    try:
+        if os.path.exists(OUTPUT_FOLDER):
+            for file in os.listdir(OUTPUT_FOLDER):
+                file_path = os.path.join(OUTPUT_FOLDER, file)
+                if os.path.isfile(file_path) and (time.time() - os.path.getctime(file_path) > 3600):
+                    os.remove(file_path)
+                    print(f"[INFO] Removed old file: {file}")
+    except Exception as e:
+        print(f"[WARNING] Cleanup outputs failed: {e}")
+
+@app.before_request
+def log_request_info():
+    print(f"[INFO] Incoming request: {request.method} {request.path}")
+
+@app.route('/health')
+def health():
+    return "OK", 200
+
+@app.route('/outputs/<filename>')
+def serve_output(filename):
+    file_path = os.path.join(OUTPUT_FOLDER, filename)
+    if not os.path.exists(file_path):
+        return "File not found", 404
+    if filename.lower().endswith(('.jpg', '.jpeg')):
+        mimetype = 'image/jpeg'
+    elif filename.lower().endswith('.png'):
+        mimetype = 'image/png'
+    else:
+        mimetype = 'application/octet-stream'
+    return send_from_directory(OUTPUT_FOLDER, filename, mimetype=mimetype)
+
+@app.route('/uploads/<filename>')
+def serve_upload(filename):
+    return send_from_directory(UPLOAD_FOLDER, filename)
+
+def detect_upper_body_coordinates(person_path, is_female=False):
+    mp_pose = mp.solutions.pose
+    pose = mp_pose.Pose()
+    image = cv2.imread(person_path)
+    if image is None:
+        raise Exception("No image detected.")
+    image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+    results = pose.process(image_rgb)
+    if not results.pose_landmarks:
+        raise Exception("No pose detected.")
+    h, w, _ = image.shape
+    lm = results.pose_landmarks.landmark
+    
+    # Get key body landmarks
+    left_shoulder = (int(lm[11].x * w), int(lm[11].y * h))
+    right_shoulder = (int(lm[12].x * w), int(lm[12].y * h))
+    left_hip = (int(lm[23].x * w), int(lm[23].y * h))
+    right_hip = (int(lm[24].x * w), int(lm[24].y * h))
+    
+    # Calculate centers
+    shoulder_center_x = (left_shoulder[0] + right_shoulder[0]) // 2
+    shoulder_center_y = (left_shoulder[1] + right_shoulder[1]) // 2
+    hip_center_x = (left_hip[0] + right_hip[0]) // 2
+    hip_center_y = (left_hip[1] + right_hip[1]) // 2
+    
+    if is_female:
+        # For girls: Focus on chest-to-hip area to avoid hair on shoulders
+        # Calculate chest points (below shoulders to avoid hair)
+        chest_offset = 80  # pixels below shoulders
+        left_chest_x = left_shoulder[0]
+        left_chest_y = left_shoulder[1] + chest_offset
+        right_chest_x = right_shoulder[0]
+        right_chest_y = right_shoulder[1] + chest_offset
+        
+        # Chest center point
+        chest_center_x = (left_chest_x + right_chest_x) // 2
+        chest_center_y = (left_chest_y + right_chest_y) // 2
+        
+        # Waist center point (between chest and hips)
+        waist_center_x = chest_center_x
+        waist_center_y = chest_center_y + (hip_center_y - chest_center_y) // 2
+        
+        coords = {
+            "left_chest": (left_chest_x, left_chest_y),
+            "right_chest": (right_chest_x, right_chest_y),
+            "left_hip": left_hip,
+            "right_hip": right_hip,
+            "chest_center": (chest_center_x, chest_center_y),
+            "waist_center": (waist_center_x, waist_center_y),
+            "detection_type": "female_chest_to_hip"
+        }
+    else:
+        # For boys: Use shoulder-based detection (original approach)
+        chest_center_x = shoulder_center_x
+        chest_center_y = shoulder_center_y + (hip_center_y - shoulder_center_y) // 3
+        waist_center_x = shoulder_center_x
+        waist_center_y = shoulder_center_y + 2 * (hip_center_y - shoulder_center_y) // 3
+        
+        coords = {
+            "left_shoulder": left_shoulder,
+            "right_shoulder": right_shoulder,
+            "left_hip": left_hip,
+            "right_hip": right_hip,
+            "chest_center": (chest_center_x, chest_center_y),
+            "waist_center": (waist_center_x, waist_center_y),
+            "shoulder_center": (shoulder_center_x, shoulder_center_y),
+            "detection_type": "male_shoulder_based"
+        }
+    
+    return coords
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    start_time = time.time()
+    if request.method == 'POST':
+        try:
+            load_model()
+
+            # Person image handling
+            use_cached_person = 'person_coordinates' in session and 'person_image_path' in session
+            cached_person_flag = use_cached_person
+            person_path = None
+            person_disk_path = os.path.join(UPLOAD_FOLDER, 'person.jpg')
+            
+            # Get gender selection from form
+            is_female = request.form.get('gender') == 'female'
+            print(f"[INFO] Gender selection: {'Female' if is_female else 'Male'}")
+
+            if use_cached_person:
+                person_path = session['person_image_path']
+                person_coordinates = session['person_coordinates']
+                print(f"[INFO] Using cached person {person_path}")
+            else:
+                person_file = request.files.get('person_image')
+                if person_file and person_file.filename != '':
+                    person_path = person_disk_path
+                    person_file.save(person_path)
+                    print(f"[INFO] Saved new person {person_path}")
+                elif os.path.exists(person_disk_path):
+                    person_path = person_disk_path
+                    print(f"[INFO] Reusing person {person_path}")
+                else:
+                    return "No person image provided."
+
+                # Detect pose with gender-aware coordinates
+                coords = detect_upper_body_coordinates(person_path, is_female=is_female)
+                person_coordinates = coords.copy()  # Use all coordinates from detection
+
+                # Cache
+                session['person_image_path'] = person_path
+                session['person_coordinates'] = person_coordinates
+                cached_person_flag = True
+
+            # Garment handling
+            tshirt_file = request.files['tshirt_image']
+            tshirt_path = os.path.join(UPLOAD_FOLDER, 'tshirt.png')
+            tshirt_file.save(tshirt_path)
+
+            # Inference
+            img = load_image(person_path)
+            new_tshirt = load_image(tshirt_path)
+            
+            # Use cached or fresh coordinates
+            coords = person_coordinates
+            detection_type = coords.get('detection_type', 'male_shoulder_based')
+            
+            # Create input points based on detection type
+            if detection_type == 'female_chest_to_hip':
+                # For girls: Use chest-to-hip points (avoiding shoulders/hair)
+                input_points = [[
+                    list(coords['left_chest']),
+                    list(coords['right_chest']),
+                    list(coords['chest_center']),
+                    list(coords['waist_center']),
+                    list(coords['left_hip']),
+                    list(coords['right_hip'])
+                ]]
+                print("[INFO] Using female chest-to-hip detection (avoiding hair on shoulders)")
+            else:
+                # For boys: Use shoulder-based points
+                input_points = [[
+                    list(coords['left_shoulder']),
+                    list(coords['right_shoulder']),
+                    list(coords['chest_center']),
+                    list(coords['waist_center']),
+                    list(coords['left_hip']),
+                    list(coords['right_hip']),
+                    list(coords['shoulder_center'])
+                ]]
+                print("[INFO] Using male shoulder-based detection")
+
+            inputs = processor(img, input_points=input_points, return_tensors="pt")
+            inputs = {k: v.to(device) for k, v in inputs.items()}
+
+            with torch.no_grad():
+                outputs = model(**inputs)
+
+            masks = processor.image_processor.post_process_masks(
+                outputs.pred_masks.cpu(),
+                inputs["original_sizes"].cpu(),
+                inputs["reshaped_input_sizes"].cpu()
+            )
+            mask_tensor = masks[0][0][2].to(dtype=torch.uint8)
+            mask = transforms.ToPILImage()(mask_tensor * 255)
+
+            # Merge
+            new_tshirt = new_tshirt.resize(img.size, Image.LANCZOS)
+            img_with_new_tshirt = Image.composite(new_tshirt, img, mask)
+            result_path = os.path.join(OUTPUT_FOLDER, 'result.jpg')
+            os.makedirs(OUTPUT_FOLDER, exist_ok=True)
+            img_with_new_tshirt.save(result_path)
+
+            # Unique result name
+            import uuid, shutil
+            unique_filename = f"result_{uuid.uuid4().hex[:8]}.jpg"
+            unique_result_path = os.path.join(OUTPUT_FOLDER, unique_filename)
+            shutil.copy2(result_path, unique_result_path)
+
+            processing_time = time.time() - start_time
+            cleanup_old_outputs()
+
+            return render_template(
+                'index.html',
+                result_img=f'/outputs/{unique_filename}',
+                cached_person=cached_person_flag,
+                person_image_path=person_path,
+                processing_time=f"{processing_time:.2f}s"
+            )
+        except Exception as e:
+            print(f"[ERROR] {e}")
+            return f"Error: {e}"
+
+    # GET
+    has_cached = 'person_coordinates' in session and 'person_image_path' in session
+    return render_template(
+        'index.html',
+        cached_person=has_cached,
+        person_image_path=session.get('person_image_path') if has_cached else None
+    )
+
+@app.route('/change_person', methods=['POST'])
+def change_person():
+    session.pop('person_coordinates', None)
+    session.pop('person_image_path', None)
+    try:
+        for f in ['person.jpg', 'tshirt.png']:
+            path = os.path.join(UPLOAD_FOLDER, f)
+            if os.path.exists(path):
+                os.remove(path)
+        for f in os.listdir(OUTPUT_FOLDER):
+            fp = os.path.join(OUTPUT_FOLDER, f)
+            if os.path.isfile(fp):
+                os.remove(fp)
+        print("[INFO] Cleared person data")
+    except Exception as e:
+        print(f"[WARNING] Failed to clear: {e}")
+    return redirect(url_for('index'))
+
+@app.route('/cleanup', methods=['POST'])
+def cleanup():
+    cleanup_temp_files()
+    cleanup_old_outputs()
+    return "Cleanup completed", 200
+
+@app.route('/test-image')
+def test_image():
+    from PIL import ImageDraw
+    img = Image.new('RGB', (200, 200), color='red')
+    draw = ImageDraw.Draw(img)
+    draw.text((50, 100), "TEST", fill='white')
+    test_path = os.path.join(OUTPUT_FOLDER, 'test.jpg')
+    img.save(test_path)
+    return f'<img src="/outputs/test.jpg" alt="Test">'
+
+if __name__ == '__main__':
+    print("[INFO] Starting Flask server...")
+    app.run(debug=True, host='0.0.0.0')

requirements.txt

@@ -0,0 +1,12 @@
+Flask
+gunicorn
+Pillow
+opencv-python
+torch
+torchvision
+mediapipe
+transformers
+diffusers
+safetensors
+flask-cors
+accelerate

runtime.txt

@@ -0,0 +1 @@
+python-3.10.12

templates/index.html

@@ -0,0 +1,339 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Virtual Fashion Try-On</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <!-- Cropper.js CSS -->
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.css" rel="stylesheet">
+</head>
+
+<body class="bg-gray-900 text-white min-h-screen flex flex-col items-center py-10">
+
+    <h1 class="text-4xl font-bold text-blue-400 mb-10">Virtual Fashion Try-On</h1>
+
+    <div class="flex flex-col md:flex-row gap-10 w-full max-w-6xl">
+
+        <!-- LEFT: Input Form -->
+        <form id="tryon-form" action="/" method="post" enctype="multipart/form-data" class="w-full md:w-1/2 bg-gray-800 rounded-2xl shadow-lg p-8 space-y-6">
+
+            <div class="grid grid-cols-1 gap-8">
+                <!-- Person Image Upload -->
+                <div>
+                    <div class="flex justify-between items-center mb-2">
+                        <h2 class="text-lg font-semibold">Upload your photo</h2>
+                        {% if cached_person %}
+                        <button type="button" onclick="changePerson()" class="bg-yellow-500 hover:bg-yellow-600 text-white text-sm px-3 py-1 rounded-lg transition">
+                            Change Person
+                        </button>
+                        {% endif %}
+                    </div>
+                    
+                    {% if cached_person %}
+                    <!-- Show cached person image -->
+                    <div class="border-2 border-green-500 rounded-xl p-4 bg-green-900/20">
+                        <div class="flex flex-col items-center">
+                            <div class="flex items-center gap-2 mb-2">
+                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-green-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
+                                </svg>
+                                <p class="text-green-400 text-sm font-medium">Person image cached</p>
+                            </div>
+                            <img src="/uploads/person.jpg" alt="Cached Person" class="max-h-32 rounded-lg border border-gray-600">
+                            <p class="text-gray-400 text-xs mt-2">Coordinates saved - no need to re-upload!</p>
+                        </div>
+                    </div>
+                    {% else %}
+                    <label for="person_image" class="flex flex-col items-center justify-center border-2 border-dashed border-gray-600 rounded-xl p-6 hover:bg-gray-700 cursor-pointer">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400 mb-2" fill="none"
+                            viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M7 16v4m0 0h10m-10 0v-4m0 0h10m-10 0V5m0 0h10m-10 0H5m14 0h-2" />
+                        </svg>
+                        <p class="text-gray-400">Drag & drop or click to upload</p>
+                        <input id="person_image" type="file" name="person_image" class="hidden" 
+                            onchange="showFileName('person_image', 'person_filename', 'person_preview')">
+                    </label>
+                    <p id="person_filename" class="text-green-400 text-sm mt-2 text-center"></p>
+                    <div class="mt-3 flex justify-center">
+                        <img id="person_preview" class="hidden max-h-32 rounded-lg border border-gray-600">
+                    </div>
+                    {% endif %}
+                </div>
+
+                <!-- Gender Selection -->
+                <div>
+                    <h2 class="text-lg font-semibold mb-3">Select Gender</h2>
+                    <div class="flex gap-4">
+                        <label class="flex items-center cursor-pointer">
+                            <input type="radio" name="gender" value="male" checked class="sr-only">
+                            <div class="gender-option flex items-center gap-2 px-4 py-2 rounded-lg border-2 border-blue-500 bg-blue-500/20 text-blue-400">
+                                <!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                                </svg> -->
+                                <span>Male</span>
+                            </div>
+                        </label>
+                        <label class="flex items-center cursor-pointer">
+                            <input type="radio" name="gender" value="female" class="sr-only">
+                            <div class="gender-option flex items-center gap-2 px-4 py-2 rounded-lg border-2 border-gray-600 text-gray-400">
+                                <!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
+                                </svg> -->
+                                <span>Female</span>
+                            </div>
+                        </label>
+                    </div>
+                    <!-- <p class="text-xs text-gray-400 mt-2">
+                        <span class="text-pink-400">Female mode:</span> Uses chest-to-hip detection to avoid hair on shoulders
+                    </p> -->
+                </div>
+
+                <!-- Garment Image Upload with Cropper -->
+                <div>
+                    <div class="flex justify-between items-center mb-2">
+                        <h2 class="text-lg font-semibold">Upload garment image</h2>
+                        {% if cached_person %}
+                        <div class="flex items-center gap-1 text-xs text-green-400">
+                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
+                            </svg>
+                            <span>Fast mode</span>
+                        </div>
+                        {% endif %}
+                    </div>
+                    <label for="tshirt_image" class="flex flex-col items-center justify-center border-2 border-dashed border-gray-600 rounded-xl p-6 hover:bg-gray-700 cursor-pointer">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-gray-400 mb-2" fill="none"
+                            viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M7 16v4m0 0h10m-10 0v-4m0 0h10m-10 0V5m0 0h10m-10 0H5m14 0h-2" />
+                        </svg>
+                        <p class="text-gray-400">Drag & drop or click to upload</p>
+                        <input id="tshirt_image" type="file" name="tshirt_image" class="hidden" required>
+                    </label>
+                    <p id="tshirt_filename" class="text-green-400 text-sm mt-2 text-center"></p>
+
+                    <!-- Cropping Container -->
+                    <div class="mt-3 flex justify-center">
+                        <img id="tshirt_preview" class="hidden max-h-64 rounded-lg border border-gray-600">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Submit Button -->
+            <div class="flex justify-center">
+                <button type="submit" class="bg-pink-500 hover:bg-pink-600 text-white font-semibold py-3 px-8 rounded-xl shadow-md transition">
+                    🚀 Perform Virtual Try-On
+                </button>
+            </div>
+
+        </form>
+
+        <!-- RIGHT: Output -->
+        <div class="w-full md:w-1/2 bg-gray-800 rounded-2xl shadow-lg p-8 flex items-center justify-center text-center">
+            {% if result_img %}
+            <div>
+                <h2 class="text-2xl font-bold mb-6 text-center">🎉 Your Virtual Try-On Result</h2>
+                {% if processing_time %}
+                <div class="text-center mb-4">
+                    <span class="bg-blue-500 text-white px-3 py-1 rounded-full text-sm">
+                        ⚡ Processed in {{ processing_time }}
+                    </span>
+                </div>
+                {% endif %}
+                <div class="flex justify-center mb-6">
+                    <img id="result-image" src="{{ result_img }}" alt="Result Image" class="rounded-xl" 
+                         onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
+                    <div style="display:none;" class="text-red-500 p-4 border border-red-500 rounded-xl">
+                        <p>❌ Image failed to load</p>
+                        <p class="text-sm">Please try again or check the server logs</p>
+                        <p class="text-xs">Image URL: {{ result_img }}</p>
+                    </div>
+                </div>
+                <div class="flex justify-center">
+                    <button onclick="downloadImage()" class="bg-green-500 hover:bg-green-600 text-white font-semibold py-3 px-6 rounded-xl shadow-md transition flex items-center gap-2">
+                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
+                            stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                                d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
+                        </svg>
+                        Download Image
+                    </button>
+                </div>
+            </div>
+            {% else %}
+            <div id="output-container">
+                <div id="loading-spinner" style="display: none;" class="flex flex-col items-center">
+                    <svg class="animate-spin h-16 w-16 text-pink-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4">
+                        </circle>
+                        <path class="opacity-75" fill="currentColor"
+                            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 
+                            12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                    </svg>
+                    <p class="mt-4 text-lg">Processing... Please wait.</p>
+                </div>
+                <div id="placeholder-text">
+                    <h2 class="text-2xl font-bold text-center text-gray-500">Your result will appear here</h2>
+                </div>
+            </div>
+            {% endif %}
+        </div>
+
+    </div>
+
+        <!-- Global Full-screen Loader Overlay -->
+    <div id="global-loader" style="display:none;" class="fixed inset-0 z-50 bg-black/70 flex items-center justify-center">
+        <div class="flex flex-col items-center">
+            <svg class="animate-spin h-16 w-16 text-pink-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <p class="mt-4 text-lg">Processing... Please wait.</p>
+        </div>
+    </div>
+
+    <!-- Cropper.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
+
+    <script>
+        let cropper;
+
+        // Global loader on every submit
+        document.getElementById('tryon-form').addEventListener('submit', function(e) {
+            const overlay = document.getElementById('global-loader');
+            if (overlay) overlay.style.display = 'flex';
+
+            // If garment cropper is active → replace original file with cropped version
+            if (cropper) {
+                e.preventDefault();
+
+                cropper.getCroppedCanvas().toBlob((blob) => {
+                    const file = new File([blob], "cropped_garment.png", { type: "image/png" });
+
+                    // Replace original input
+                    const dataTransfer = new DataTransfer();
+                    dataTransfer.items.add(file);
+                    document.getElementById('tshirt_image').files = dataTransfer.files;
+
+                    // Now submit form
+                    e.target.submit();
+                });
+                return;
+            }
+        });
+
+        // Change Person: full refresh via POST + server redirect
+        function changePerson() {
+            const form = document.createElement('form');
+            form.method = 'POST';
+            form.action = '/change_person';
+            document.body.appendChild(form);
+            form.submit();
+        }
+
+        // Gender selection handling
+        document.querySelectorAll('input[name="gender"]').forEach(radio => {
+            radio.addEventListener('change', function() {
+                // Update visual styling
+                document.querySelectorAll('.gender-option').forEach(option => {
+                    option.classList.remove('border-blue-500', 'bg-blue-500/20', 'text-blue-400', 'border-pink-500', 'bg-pink-500/20', 'text-pink-400');
+                    option.classList.add('border-gray-600', 'text-gray-400');
+                });
+                
+                const selectedOption = this.parentElement.querySelector('.gender-option');
+                if (this.value === 'male') {
+                    selectedOption.classList.remove('border-gray-600', 'text-gray-400');
+                    selectedOption.classList.add('border-blue-500', 'bg-blue-500/20', 'text-blue-400');
+                } else {
+                    selectedOption.classList.remove('border-gray-600', 'text-gray-400');
+                    selectedOption.classList.add('border-pink-500', 'bg-pink-500/20', 'text-pink-400');
+                }
+            });
+        });
+
+        // Show file name + preview (person only)
+        function showFileName(inputId, filenameId, previewId) {
+            const input = document.getElementById(inputId);
+            const filename = document.getElementById(filenameId);
+            const preview = document.getElementById(previewId);
+
+            if (input.files.length > 0) {
+                const file = input.files[0];
+                filename.textContent = "✔️ " + file.name + " uploaded";
+
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    preview.src = e.target.result;
+                    preview.classList.remove("hidden");
+                };
+                reader.readAsDataURL(file);
+            } else {
+                filename.textContent = "";
+                preview.classList.add("hidden");
+            }
+        }
+
+        // Garment upload with Cropper
+        document.getElementById('tshirt_image').addEventListener('change', function() {
+            const input = this;
+            const filename = document.getElementById('tshirt_filename');
+            const preview = document.getElementById('tshirt_preview');
+
+            if (input.files.length > 0) {
+                const file = input.files[0];
+                filename.textContent = "✔️ " + file.name + " uploaded";
+
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    preview.src = e.target.result;
+                    preview.classList.remove("hidden");
+
+                    // Destroy old cropper if exists
+                    if (cropper) {
+                        cropper.destroy();
+                    }
+
+                    // Initialize Cropper.js with square ratio
+                    cropper = new Cropper(preview, {
+                        aspectRatio: 1,
+                        viewMode: 1,
+                        autoCropArea: 1,
+                    });
+                };
+                reader.readAsDataURL(file);
+            } else {
+                filename.textContent = "";
+                preview.classList.add("hidden");
+                if (cropper) {
+                    cropper.destroy();
+                    cropper = null;
+                }
+            }
+        });
+
+        // Download result
+        function downloadImage() {
+            const img = document.getElementById('result-image');
+            const canvas = document.createElement('canvas');
+            const ctx = canvas.getContext('2d');
+            canvas.width = img.naturalWidth;
+            canvas.height = img.naturalHeight;
+            ctx.drawImage(img, 0, 0);
+            canvas.toBlob(function(blob) {
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = 'virtual-try-on-result.png';
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+            }, 'image/png');
+        }
+    </script>
+
+</body>
+
+</html>