Developed Virtual try on

.gitattributes

@@ -0,0 +1,35 @@
+*.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

.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,31 @@
+FROM python:3.10.12-slim
+
+WORKDIR /app
+
+# Set cache directories
+ENV HF_HOME=/app/.cache
+ENV MPLCONFIGDIR=/app/.cache
+
+# Install dependencies
+RUN apt-get update && apt-get install -y libgl1-mesa-glx libglib2.0-0 && apt-get clean
+
+# Create cache directory
+RUN mkdir -p /app/.cache && chmod -R 777 /app/.cache
+
+# Install Python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Pre-download model
+RUN python -c "from transformers import SamModel, SamProcessor; \
+    SamModel.from_pretrained('Zigeng/SlimSAM-uniform-50', cache_dir='/app/.cache'); \
+    SamProcessor.from_pretrained('Zigeng/SlimSAM-uniform-50', cache_dir='/app/.cache')"
+
+# Copy app code
+COPY . .
+
+# Set port
+ENV PORT=7860
+
+# Run with Gunicorn
+CMD ["gunicorn", "app:app", "--bind", "0.0.0.0:7860", "--workers", "2"]

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,117 @@
+from flask import Flask, render_template, request, send_from_directory
+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 
+
+app= Flask(__name__)
+CORS(app)
+
+# Enable Hugging Face detailed logs (shows model download progress)
+hf_logging.set_verbosity_info()
+
+
+UPLOAD_FOLDER = '/tmp/uploads'
+OUTPUT_FOLDER = '/tmp/outputs'
+
+if not os.path.exists(UPLOAD_FOLDER):
+    print(f"[WARN] {UPLOAD_FOLDER} does not exist. Creating...")
+    os.makedirs(UPLOAD_FOLDER, exist_ok=True)
+
+if not os.path.exists(OUTPUT_FOLDER):
+    print(f"[WARN] {OUTPUT_FOLDER} does not exist. Creating...")
+    os.makedirs(OUTPUT_FOLDER, exist_ok=True)
+
+
+# Lazy-load model
+model, processor = None, None
+
+def load_model():
+    global model, processor
+    if model is None or processor is None:
+        print("[INFO] Loading SAM model and processor...")
+        model = SamModel.from_pretrained("Zigeng/SlimSAM-uniform-50", cache_dir="/app/.cache")
+        processor = SamProcessor.from_pretrained("Zigeng/SlimSAM-uniform-50", cache_dir="/app/.cache")
+        print("[INFO] Model and processor loaded successfully!")
+
+@app.before_request
+def log_request_info():
+    print(f"[INFO] Incoming request: {request.method} {request.path}")
+
+@app.route('/health')
+def health():
+    return "OK", 200
+
+# Route to serve outputs dynamically
+@app.route('/outputs/<filename>')
+def serve_output(filename):
+    return send_from_directory(OUTPUT_FOLDER, filename)
+
+@app.route('/', methods=['GET', 'POST'])
+def index():
+    print(f"[INFO] Handling {request.method} on /")
+    if request.method == 'POST':
+        try:
+            load_model()
+
+            # Save uploaded images
+            person_file = request.files['person_image']
+            tshirt_file = request.files['tshirt_image']
+            person_path = os.path.join(UPLOAD_FOLDER, 'person.jpg')
+            tshirt_path = os.path.join(UPLOAD_FOLDER, 'tshirt.png')
+            person_file.save(person_path)
+            tshirt_file.save(tshirt_path)
+            print(f"[INFO] Saved files to {UPLOAD_FOLDER}")
+
+            # Pose detection
+            mp_pose = mp.solutions.pose
+            pose = mp_pose.Pose()
+            image = cv2.imread(person_path)
+            if image is None:
+                return "No image detected."
+            image_rgb = cv2.cvtColor(image, cv2.COLOR_BGR2RGB)
+            results = pose.process(image_rgb)
+            if not results.pose_landmarks:
+                return "No pose detected."
+            height, width, _ = image.shape
+            landmarks = results.pose_landmarks.landmark
+            left_shoulder = (int(landmarks[11].x * width), int(landmarks[11].y * height))
+            right_shoulder = (int(landmarks[12].x * width), int(landmarks[12].y * height))
+            print(f"[INFO] Shoulder coordinates: {left_shoulder}, {right_shoulder}")
+
+            # SAM model inference
+            img = load_image(person_path)
+            new_tshirt = load_image(tshirt_path)
+            input_points = [[[left_shoulder[0], left_shoulder[1]], [right_shoulder[0], right_shoulder[1]]]]
+            inputs = processor(img, input_points=input_points, return_tensors="pt")
+            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)
+
+            # Combine images
+            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')
+            img_with_new_tshirt.save(result_path)
+            print(f"[INFO] Result saved to {result_path}")
+
+            # Serve via dynamic route
+            return render_template('index.html', result_img='/outputs/result.jpg')
+
+        except Exception as e:
+            print(f"[ERROR] {e}")
+            return f"Error: {e}"
+
+    return render_template('index.html')
+
+if __name__ == '__main__':
+        
+    print("[INFO] Starting Flask server...")
+    app.run(debug=True, host='0.0.0.0')

requirements.txt

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

runtime.txt

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

templates/index.html

@@ -0,0 +1,225 @@
+<!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>
+                    <h2 class="text-lg font-semibold mb-2">Upload your photo</h2>
+                    <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" required
+                            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>
+                </div>
+
+                <!-- Garment Image Upload with Cropper -->
+                <div>
+                    <h2 class="text-lg font-semibold mb-2">Upload garment image</h2>
+                    <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>
+                <div class="flex justify-center mb-6">
+                    <img id="result-image" src="{{ result_img }}" alt="Result Image" class="rounded-xl">
+                </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>
+
+    <!-- Cropper.js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.13/cropper.min.js"></script>
+
+    <script>
+        let cropper;
+
+        // Spinner
+        document.getElementById('tryon-form').addEventListener('submit', function(e) {
+            // 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();
+                });
+            }
+
+            document.getElementById('placeholder-text').style.display = 'none';
+            document.getElementById('loading-spinner').style.display = 'flex';
+        });
+
+        // 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>