Spaces:

Harsha1845
/

StyleGenie-Tryon

Running

App Files Files Community

Harsha1845 commited on Dec 16, 2025

Commit

370c714

verified ·

1 Parent(s): 3a63cb8

Upload 16 files

Browse files

Files changed (16) hide show

.env.local +1 -0
README.md +20 -10
index.html +46 -0
metadata.json +7 -0
package.json +25 -0
src/App.tsx +111 -0
src/components/CameraView.tsx +377 -0
src/components/Navigation.tsx +39 -0
src/components/ProductCard.tsx +57 -0
src/components/ResultView.tsx +122 -0
src/constants.ts +55 -0
src/index.tsx +15 -0
src/services/geminiService.ts +178 -0
src/types.ts +33 -0
tsconfig.json +20 -0
vite.config.ts +25 -0

.env.local ADDED Viewed

	@@ -0,0 +1 @@


1	+ GEMINI_API_KEY=PLACEHOLDER_API_KEY

README.md CHANGED Viewed

@@ -1,10 +1,20 @@
----
-title: StyleGenie Tryon
-emoji: 👁
-colorFrom: purple
-colorTo: purple
-sdk: docker
-pinned: false
----
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

+<div align="center">
+<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+# Run and deploy your AI Studio app
+This contains everything you need to run your app locally.
+View your app in AI Studio: https://ai.studio/apps/drive/1ShSNx9xZ78b_bOyqzEXVeLKn_m1VDIrC
+## Run Locally
+**Prerequisites:**  Node.js
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

index.html ADDED Viewed

	@@ -0,0 +1,46 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>StyleGenie - AI Virtual Try-On</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            colors: {
+              brand: {
+                50: '#f0f9ff',
+                100: '#e0f2fe',
+                500: '#0ea5e9',
+                600: '#0284c7',
+                900: '#0c4a6e',
+              }
+            }
+          }
+        }
+      }
+    </script>
+<script type="importmap">
+{
+  "imports": {
+    "react": "https://esm.sh/react@^19.2.3",
+    "react-dom/": "https://esm.sh/react-dom@^19.2.3/",
+    "react/": "https://esm.sh/react@^19.2.3/",
+    "@google/genai": "https://esm.sh/@google/genai@^1.33.0",
+    "lucide-react": "https://esm.sh/lucide-react@^0.561.0",
+    "@mediapipe/tasks-vision": "https://esm.sh/@mediapipe/tasks-vision@^0.10.22-rc.20250304",
+    "vite": "https://esm.sh/vite@^7.3.0",
+    "@vitejs/plugin-react": "https://esm.sh/@vitejs/plugin-react@^5.1.2"
+  }
+}
+</script>
+<link rel="stylesheet" href="/index.css">
+</head>
+  <body class="bg-slate-50 text-slate-900 antialiased">
+    <div id="root"></div>
+    <script type="module" src="/index.tsx"></script>
+  </body>
+</html>

metadata.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "name": "StyleGenie AI Try-On",
+  "description": "Virtual wardrobe try-on experience using Generative AI. Select an item, snap a photo, and see yourself wearing it realistically.",
+  "requestFramePermissions": [
+    "camera"
+  ]
+}

package.json ADDED Viewed

	@@ -0,0 +1,25 @@

+{
+  "name": "stylegenie-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@google/genai": "^0.1.2",
+    "lucide-react": "^0.344.0",
+    "@mediapipe/tasks-vision": "^0.10.17"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.66",
+    "@types/react-dom": "^18.2.22",
+    "@vitejs/plugin-react": "^4.2.1",
+    "typescript": "^5.2.2",
+    "vite": "^5.2.0"
+  }
+}

src/App.tsx ADDED Viewed

	@@ -0,0 +1,111 @@

+import React, { useState } from 'react';
+import { Product, AppView } from './types';
+import { PRODUCTS } from './constants';
+import { generateTryOn } from './services/geminiService';
+import Navigation from './components/Navigation';
+import ProductCard from './components/ProductCard';
+import CameraView from './components/CameraView';
+import ResultView from './components/ResultView';
+function App() {
+  const [currentView, setCurrentView] = useState<AppView>(AppView.CATALOG);
+  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null);
+  const [userImage, setUserImage] = useState<string | null>(null);
+  const [generatedResult, setGeneratedResult] = useState<string | null>(null);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [generationError, setGenerationError] = useState<string | null>(null);
+  const handleSelectProduct = (product: Product) => {
+    setSelectedProduct(product);
+    setCurrentView(AppView.CAMERA);
+  };
+  const handleBackToCatalog = () => {
+    setCurrentView(AppView.CATALOG);
+    setSelectedProduct(null);
+    setUserImage(null);
+    setGeneratedResult(null);
+    setGenerationError(null);
+  };
+  const handleCapture = async (imageSrc: string) => {
+    setUserImage(imageSrc);
+    setCurrentView(AppView.RESULT);
+    // Automatically trigger generation
+    if (selectedProduct) {
+        await processTryOn(imageSrc, selectedProduct);
+    }
+  };
+  const processTryOn = async (imageSrc: string, product: Product) => {
+    setIsGenerating(true);
+    setGenerationError(null);
+    try {
+        const resultImage = await generateTryOn(imageSrc, product);
+        setGeneratedResult(resultImage);
+    } catch (error: any) {
+        console.error("Try-on failed", error);
+        setGenerationError("Sorry, we couldn't generate the try-on image. Please try a different pose or lighting.");
+    } finally {
+        setIsGenerating(false);
+    }
+  };
+  const handleRetake = () => {
+    setCurrentView(AppView.CAMERA);
+    setGeneratedResult(null);
+    setGenerationError(null);
+  };
+  return (
+    <div className="min-h-screen bg-slate-50 font-sans text-slate-900">
+      {currentView === AppView.CATALOG && (
+        <>
+          <Navigation showBack={false} />
+          <main className="max-w-7xl mx-auto p-4 md:p-6 lg:p-8">
+            <div className="mb-8 text-center max-w-2xl mx-auto">
+                <h1 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Virtual Wardrobe</h1>
+                <p className="text-gray-500 text-lg">Select any item to virtually try it on instantly using our advanced AI technology.</p>
+            </div>
+            <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
+              {PRODUCTS.map(product => (
+                <ProductCard
+                  key={product.id}
+                  product={product}
+                  onTryOn={handleSelectProduct}
+                />
+              ))}
+            </div>
+          </main>
+        </>
+      )}
+      {currentView === AppView.CAMERA && selectedProduct && (
+        <CameraView
+          product={selectedProduct}
+          onCapture={handleCapture}
+          onClose={handleBackToCatalog}
+        />
+      )}
+      {currentView === AppView.RESULT && selectedProduct && userImage && (
+        <>
+           <Navigation showBack={true} onBack={handleBackToCatalog} />
+           <ResultView
+             product={selectedProduct}
+             originalImage={userImage}
+             generatedImage={generatedResult}
+             loading={isGenerating}
+             error={generationError}
+             onRetake={handleRetake}
+           />
+        </>
+      )}
+    </div>
+  );
+}
+export default App;

src/components/CameraView.tsx ADDED Viewed

	@@ -0,0 +1,377 @@

+import React, { useRef, useEffect, useState, useCallback } from 'react';
+import { X, RefreshCw, Image as ImageIcon, AlertCircle, Layers, ScanFace, BoxSelect } from 'lucide-react';
+import { Product, ProductCategory } from '../types';
+import { FilesetResolver, PoseLandmarker } from '@mediapipe/tasks-vision';
+interface CameraViewProps {
+  product: Product;
+  onCapture: (imageSrc: string) => void;
+  onClose: () => void;
+}
+const CameraView: React.FC<CameraViewProps> = ({ product, onCapture, onClose }) => {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const lastVideoTimeRef = useRef<number>(-1);
+  // State
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [countdown, setCountdown] = useState<number | null>(null);
+  const [isCameraReady, setIsCameraReady] = useState(false);
+  const [isTracking, setIsTracking] = useState(false);
+  // AR Transform State (Calculated in real-time)
+  const [arStyle, setArStyle] = useState<React.CSSProperties>({
+    opacity: 0, // Hide until tracked
+    transform: 'translate(-50%, -50%) scale(1) rotate(0deg)',
+    top: '50%',
+    left: '50%',
+    width: '50%',
+  });
+  // Manual override state (if tracking fails or user wants to adjust)
+  const [manualMode, setManualMode] = useState(false);
+  const [manualScale, setManualScale] = useState(1);
+  const [manualY, setManualY] = useState(0);
+  const landmarkerRef = useRef<any>(null);
+  const requestRef = useRef<number | null>(null);
+  // 1. Initialize Camera
+  useEffect(() => {
+    let mediaStream: MediaStream | null = null;
+    const startCamera = async () => {
+      try {
+        if (!navigator.mediaDevices?.getUserMedia) throw new Error("No camera access");
+        mediaStream = await navigator.mediaDevices.getUserMedia({
+            video: {
+                width: { ideal: 1280 },
+                height: { ideal: 720 },
+                facingMode: 'user'
+            },
+            audio: false,
+        });
+        setStream(mediaStream);
+      } catch (err) {
+        console.error("Camera Error:", err);
+        setError("Could not access camera. Please allow permissions.");
+      }
+    };
+    startCamera();
+    return () => {
+      if (mediaStream) mediaStream.getTracks().forEach(t => t.stop());
+      if (requestRef.current) cancelAnimationFrame(requestRef.current);
+      if (landmarkerRef.current) landmarkerRef.current.close();
+    };
+  }, []);
+  // 2. Initialize MediaPipe Pose Landmarker
+  useEffect(() => {
+    const loadLandmarker = async () => {
+        try {
+            const vision = await FilesetResolver.forVisionTasks(
+                "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.17/wasm"
+            );
+            landmarkerRef.current = await PoseLandmarker.createFromOptions(vision, {
+                baseOptions: {
+                    modelAssetPath: `https://storage.googleapis.com/mediapipe-models/pose_landmarker/pose_landmarker_lite/float16/1/pose_landmarker_lite.task`,
+                    delegate: "GPU"
+                },
+                runningMode: "VIDEO",
+                numPoses: 1
+            });
+            console.log("AR Engine Loaded");
+        } catch (err) {
+            console.error("Failed to load AR engine:", err);
+            // Fallback to manual mode if AR fails
+            setManualMode(true);
+        }
+    };
+    loadLandmarker();
+  }, []);
+  // 3. Real-time Tracking Loop
+  const predictWebcam = useCallback(() => {
+    if (!landmarkerRef.current || !videoRef.current || !isCameraReady) {
+        requestRef.current = requestAnimationFrame(predictWebcam);
+        return;
+    }
+    const video = videoRef.current;
+    // Performance optimization: Only process if frame changed
+    if (video.currentTime !== lastVideoTimeRef.current) {
+        lastVideoTimeRef.current = video.currentTime;
+        try {
+            const result = landmarkerRef.current.detectForVideo(video, performance.now());
+            if (result.landmarks && result.landmarks.length > 0) {
+                setIsTracking(true);
+                const landmarks = result.landmarks[0]; // First person
+                updateOverlay(landmarks);
+            } else {
+                setIsTracking(false);
+            }
+        } catch (e) {
+            console.warn("Tracking glitch", e);
+        }
+    }
+    if (!manualMode) {
+        requestRef.current = requestAnimationFrame(predictWebcam);
+    }
+  }, [isCameraReady, manualMode, product.category]);
+  useEffect(() => {
+    if (isCameraReady && !manualMode) {
+        requestRef.current = requestAnimationFrame(predictWebcam);
+    }
+    return () => {
+        if (requestRef.current) cancelAnimationFrame(requestRef.current);
+    };
+  }, [isCameraReady, manualMode, predictWebcam]);
+  // 4. Calculate Coordinates & Apply Physics
+  const updateOverlay = (landmarks: any[]) => {
+    // MediaPipe Landmarks:
+    // 11: left_shoulder, 12: right_shoulder, 0: nose, 15: left_wrist, 16: right_wrist
+    let top = 50;
+    let left = 50;
+    let width = 50;
+    let rotation = 0;
+    const lShoulder = landmarks[11];
+    const rShoulder = landmarks[12];
+    const nose = landmarks[0];
+    const lEar = landmarks[7];
+    const rEar = landmarks[8];
+    // Calculate Shoulder Width (Screen Space)
+    const shoulderDx = (rShoulder.x - lShoulder.x);
+    const shoulderDy = (rShoulder.y - lShoulder.y);
+    const shoulderDist = Math.sqrt(shoulderDx*shoulderDx + shoulderDy*shoulderDy);
+    // Calculate Body Rotation (Tilt)
+    const angleRad = Math.atan2(shoulderDy, shoulderDx);
+    const angleDeg = angleRad * (180 / Math.PI);
+    // LOGIC PER CATEGORY
+    if (product.category === ProductCategory.SHIRT || product.category === ProductCategory.PANTS) {
+        // Anchor to Chest (Midpoint of shoulders)
+        left = (lShoulder.x + rShoulder.x) / 2 * 100;
+        top = ((lShoulder.y + rShoulder.y) / 2) * 100;
+        // Shirt width is roughly 2.5x shoulder width
+        width = shoulderDist * 280; // Multiplier heuristic
+        rotation = angleDeg;
+        // Offset down slightly for shirts so it covers torso
+        top += 15;
+    }
+    else if (product.category === ProductCategory.EYEWEAR) {
+        // Anchor to Eyes
+        const lEye = landmarks[2];
+        const rEye = landmarks[5];
+        const eyeDist = Math.sqrt(Math.pow(rEye.x - lEye.x, 2) + Math.pow(rEye.y - lEye.y, 2));
+        left = (nose.x * 100);
+        top = (nose.y * 100) - 2; // Slightly above nose tip
+        width = eyeDist * 350; // Glasses are wider than eye-distance
+        rotation = Math.atan2(rEye.y - lEye.y, rEye.x - lEye.x) * (180/Math.PI);
+    }
+    else if (product.category === ProductCategory.HEADWEAR) {
+        // Anchor to Forehead
+        left = (nose.x * 100);
+        const headTopY = Math.min(lEar.y, rEar.y) - (Math.abs(lEar.x - rEar.x) * 0.8);
+        top = (headTopY * 100);
+        width = Math.abs(lEar.x - rEar.x) * 250;
+        rotation = angleDeg; // Follow head tilt (approx shoulder tilt or calc ears)
+    }
+    setArStyle({
+        position: 'absolute',
+        left: `${left}%`,
+        top: `${top}%`,
+        width: `${width}%`,
+        transform: `translate(-50%, -50%) rotate(${rotation}deg)`,
+        opacity: 1,
+        transition: 'all 0.1s linear', // Smooth interpolation
+        mixBlendMode: 'multiply',
+        filter: 'brightness(1.1) contrast(1.1)',
+        pointerEvents: 'none'
+    });
+  };
+  // Video Binding
+  useEffect(() => {
+    if (videoRef.current && stream) {
+      videoRef.current.srcObject = stream;
+    }
+  }, [stream]);
+  const handleCapture = () => {
+    if (countdown !== null) return;
+    setCountdown(3);
+    let count = 3;
+    const timer = setInterval(() => {
+        count--;
+        if (count > 0) setCountdown(count);
+        else {
+            clearInterval(timer);
+            setCountdown(null);
+            takePhoto();
+        }
+    }, 1000);
+  };
+  const takePhoto = () => {
+    if (videoRef.current && canvasRef.current) {
+      const video = videoRef.current;
+      const canvas = canvasRef.current;
+      const context = canvas.getContext('2d');
+      if (context) {
+        canvas.width = video.videoWidth;
+        canvas.height = video.videoHeight;
+        context.translate(canvas.width, 0);
+        context.scale(-1, 1);
+        context.drawImage(video, 0, 0, canvas.width, canvas.height);
+        onCapture(canvas.toDataURL('image/jpeg', 0.9));
+      }
+    }
+  };
+  const getFinalStyle = () => {
+      if (manualMode) {
+          return {
+              position: 'absolute' as const,
+              top: '50%',
+              left: '50%',
+              transform: `translate(-50%, -50%) scale(${manualScale}) translateY(${manualY}px)`,
+              width: product.category === ProductCategory.EYEWEAR ? '40%' : '60%',
+              mixBlendMode: 'multiply' as const,
+              opacity: 1
+          };
+      }
+      return arStyle;
+  };
+  return (
+    <div className="fixed inset-0 z-[60] bg-black flex flex-col">
+      {/* Header */}
+      <div className="absolute top-0 left-0 right-0 p-4 flex justify-between items-center z-10 bg-gradient-to-b from-black/80 to-transparent">
+        <button onClick={onClose} className="p-2 bg-white/10 backdrop-blur-md rounded-full text-white hover:bg-white/20 border border-white/10">
+          <X className="w-6 h-6" />
+        </button>
+        <div className="flex flex-col items-center">
+            <span className="text-white/80 text-[10px] uppercase tracking-widest mb-0.5">
+                {manualMode ? "Manual Adjust" : isTracking ? "AR Active" : "Scanning..."}
+            </span>
+            <span className="text-white font-bold text-sm shadow-sm">{product.name}</span>
+        </div>
+        <button
+            onClick={() => setManualMode(!manualMode)}
+            className={`p-2 rounded-full border ${manualMode ? 'bg-white text-black' : 'bg-white/10 text-white'} transition-colors`}
+        >
+            <BoxSelect className="w-5 h-5" />
+        </button>
+      </div>
+      {/* Main Viewport */}
+      <div className="flex-1 relative bg-gray-900 overflow-hidden flex items-center justify-center">
+        {!isCameraReady && !error && (
+            <div className="absolute inset-0 flex flex-col items-center justify-center z-20 bg-gray-900 text-white gap-3">
+                <div className="w-10 h-10 border-4 border-brand-500 border-t-transparent rounded-full animate-spin"></div>
+                <p className="text-sm font-medium animate-pulse">Initializing Vision Engine...</p>
+            </div>
+        )}
+        {error ? (
+           <div className="text-white text-center p-6 max-w-sm z-20 flex flex-col items-center">
+             <AlertCircle className="w-12 h-12 text-red-500 mb-4" />
+             <p className="mb-6 font-medium text-lg">{error}</p>
+             <button onClick={() => window.location.reload()} className="bg-white text-black px-6 py-3 rounded-xl font-bold">Reload</button>
+           </div>
+        ) : (
+          <div className="relative w-full h-full flex items-center justify-center">
+            {/* The wrapper handles the flipping for BOTH video and overlay */}
+            <div className="relative w-full h-full transform -scale-x-100 origin-center">
+              <video
+                ref={videoRef}
+                autoPlay
+                playsInline
+                muted
+                onLoadedData={() => setIsCameraReady(true)}
+                className="absolute w-full h-full object-cover"
+              />
+              {/* AR OVERLAY */}
+              {isCameraReady && (
+                  <div style={getFinalStyle()} className="pointer-events-none z-10">
+                      <img
+                        src={product.imageUrl}
+                        crossOrigin="anonymous"
+                        alt="AR Overlay"
+                        className="w-full h-full object-contain"
+                      />
+                  </div>
+              )}
+            </div>
+            {/* Tracking Indicator - Displayed Normally (Not flipped) */}
+            {!manualMode && !isTracking && isCameraReady && (
+                <div className="absolute top-20 bg-black/50 text-white text-xs px-3 py-1 rounded-full backdrop-blur flex items-center gap-2 animate-pulse z-20">
+                    <ScanFace className="w-3 h-3" />
+                    Stand further back to track body
+                </div>
+            )}
+            {countdown !== null && (
+                <div className="absolute inset-0 flex items-center justify-center bg-black/40 backdrop-blur-sm z-30">
+                    <span className="text-[10rem] font-bold text-white animate-bounce">{countdown}</span>
+                </div>
+            )}
+          </div>
+        )}
+        <canvas ref={canvasRef} className="hidden" />
+      </div>
+      {/* Controls */}
+      <div className="bg-black/90 backdrop-blur-md pb-8 pt-4 px-6 border-t border-white/10 z-50">
+         {/* Manual Controls (Only visible in Manual Mode) */}
+         {manualMode && (
+             <div className="flex justify-center gap-4 mb-6 animate-in slide-in-from-bottom duration-300">
+                 <div className="flex items-center gap-2 bg-gray-800 rounded-lg p-2 border border-gray-700">
+                     <span className="text-[10px] text-gray-400 uppercase w-8 text-center">Size</span>
+                     <input type="range" min="0.5" max="2" step="0.1" value={manualScale} onChange={(e) => setManualScale(parseFloat(e.target.value))} className="w-20 h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-brand-500" />
+                 </div>
+                 <div className="flex items-center gap-2 bg-gray-800 rounded-lg p-2 border border-gray-700">
+                     <span className="text-[10px] text-gray-400 uppercase w-8 text-center">Pos</span>
+                     <input type="range" min="-200" max="200" step="10" value={manualY} onChange={(e) => setManualY(parseFloat(e.target.value))} className="w-20 h-1 bg-gray-600 rounded-lg appearance-none cursor-pointer accent-brand-500" />
+                 </div>
+             </div>
+         )}
+         {/* Shutter Button */}
+         <div className="flex items-center justify-center">
+            <button
+                onClick={handleCapture}
+                className="w-20 h-20 rounded-full border-4 border-white/90 flex items-center justify-center relative group shadow-[0_0_30px_rgba(255,255,255,0.2)] hover:shadow-[0_0_40px_rgba(255,255,255,0.4)] transition-all"
+            >
+                <div className="w-16 h-16 bg-white rounded-full group-hover:scale-90 transition-transform duration-200" />
+            </button>
+         </div>
+      </div>
+    </div>
+  );
+};
+export default CameraView;

src/components/Navigation.tsx ADDED Viewed

	@@ -0,0 +1,39 @@

+import React from 'react';
+import { ShoppingBag, ChevronLeft } from 'lucide-react';
+import { APP_NAME } from '../constants';
+interface NavigationProps {
+  onBack?: () => void;
+  showBack: boolean;
+}
+const Navigation: React.FC<NavigationProps> = ({ onBack, showBack }) => {
+  return (
+    <nav className="sticky top-0 z-50 bg-white border-b border-gray-100 shadow-sm h-16 flex items-center px-4 justify-between">
+      <div className="flex items-center gap-2">
+        {showBack && (
+          <button
+            onClick={onBack}
+            className="p-2 hover:bg-gray-100 rounded-full transition-colors mr-1"
+          >
+            <ChevronLeft className="w-6 h-6 text-gray-700" />
+          </button>
+        )}
+        <div className="flex items-center gap-2">
+            <div className="bg-brand-600 p-1.5 rounded-lg">
+                <ShoppingBag className="w-5 h-5 text-white" />
+            </div>
+            <span className="font-bold text-xl tracking-tight text-gray-900">{APP_NAME}</span>
+        </div>
+      </div>
+      <div>
+         {/* Placeholder for cart or profile */}
+         <div className="w-8 h-8 bg-gray-200 rounded-full overflow-hidden border border-gray-300">
+            <img src="https://picsum.photos/100/100" alt="Profile" className="w-full h-full object-cover" />
+         </div>
+      </div>
+    </nav>
+  );
+};
+export default Navigation;

src/components/ProductCard.tsx ADDED Viewed

	@@ -0,0 +1,57 @@

+import React, { useState } from 'react';
+import { Product } from '../types';
+import { Camera, Eye, ImageOff } from 'lucide-react';
+interface ProductCardProps {
+  product: Product;
+  onTryOn: (product: Product) => void;
+}
+const ProductCard: React.FC<ProductCardProps> = ({ product, onTryOn }) => {
+  const [imgError, setImgError] = useState(false);
+  return (
+    <div className="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden flex flex-col group hover:shadow-md transition-shadow">
+      <div className="relative aspect-[4/5] overflow-hidden bg-gray-100">
+        {!imgError ? (
+          <img
+            src={product.imageUrl}
+            alt={product.name}
+            onError={() => setImgError(true)}
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-500"
+          />
+        ) : (
+          <div className="w-full h-full flex flex-col items-center justify-center text-gray-400 bg-gray-50">
+            <ImageOff className="w-8 h-8 mb-2" />
+            <span className="text-xs">Image Unavailable</span>
+          </div>
+        )}
+        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition-colors" />
+        <button
+          onClick={() => onTryOn(product)}
+          className="absolute bottom-4 right-4 bg-white/90 backdrop-blur-sm text-brand-600 hover:bg-brand-600 hover:text-white px-4 py-2 rounded-full font-medium text-sm shadow-lg flex items-center gap-2 transition-all transform translate-y-2 opacity-0 group-hover:translate-y-0 group-hover:opacity-100"
+        >
+          <Camera className="w-4 h-4" />
+          Try On
+        </button>
+      </div>
+      <div className="p-4 flex flex-col flex-grow">
+        <div className="text-xs font-semibold text-brand-600 uppercase tracking-wider mb-1">
+          {product.category}
+        </div>
+        <h3 className="font-medium text-gray-900 mb-1 leading-snug">{product.name}</h3>
+        <p className="text-gray-500 text-sm line-clamp-2 mb-4 flex-grow">{product.description}</p>
+        <div className="flex items-center justify-between mt-auto pt-3 border-t border-gray-50">
+          <span className="font-bold text-lg text-gray-900">${product.price.toFixed(2)}</span>
+          <button className="text-sm font-medium text-gray-600 hover:text-brand-600">
+            View Details
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ProductCard;

src/components/ResultView.tsx ADDED Viewed

	@@ -0,0 +1,122 @@

+import React, { useEffect, useState } from 'react';
+import { Product } from '../types';
+import { RefreshCw, Download, Share2, AlertCircle, ShoppingCart, Sparkles, ScanFace } from 'lucide-react';
+interface ResultViewProps {
+  originalImage: string;
+  generatedImage: string | null;
+  product: Product;
+  loading: boolean;
+  error: string | null;
+  onRetake: () => void;
+}
+const ResultView: React.FC<ResultViewProps> = ({
+  originalImage,
+  generatedImage,
+  product,
+  loading,
+  error,
+  onRetake
+}) => {
+  // Simulate progress steps for better UX during the wait
+  const [progressStep, setProgressStep] = useState(0);
+  useEffect(() => {
+    if (loading) {
+      setProgressStep(0);
+      const interval = setInterval(() => {
+        setProgressStep(prev => (prev < 3 ? prev + 1 : prev));
+      }, 1500); // Change text every 1.5s
+      return () => clearInterval(interval);
+    }
+  }, [loading]);
+  const loadingTexts = [
+    "Analyzing body pose and lighting...",
+    "Extracting product details...",
+    "Warping fabric to fit your shape...",
+    "Finalizing realistic shadows..."
+  ];
+  return (
+    <div className="min-h-screen bg-gray-50 flex flex-col">
+      <div className="flex-1 max-w-4xl mx-auto w-full p-4 flex flex-col md:flex-row gap-6 items-start justify-center pt-8">
+        {/* Original Image (Small preview) */}
+        <div className="w-full md:w-1/3 bg-white p-3 rounded-2xl shadow-sm border border-gray-100 flex flex-col gap-2">
+             <h3 className="text-sm font-semibold text-gray-500 uppercase tracking-wide px-1">Original Capture</h3>
+             <div className="aspect-[3/4] rounded-xl overflow-hidden bg-gray-100 relative group">
+                 <img src={originalImage} alt="Original" className="w-full h-full object-cover" />
+                 {/* Product Overlay Badge */}
+                 <div className="absolute bottom-2 right-2 bg-white/90 backdrop-blur rounded-lg p-1 shadow-sm w-12 h-12 border border-gray-200">
+                     <img src={product.imageUrl} className="w-full h-full object-contain mix-blend-multiply" alt="item" />
+                 </div>
+             </div>
+        </div>
+        {/* Generated Result */}
+        <div className="w-full md:w-2/3 bg-white p-3 rounded-2xl shadow-lg border border-gray-100 flex flex-col gap-2 relative min-h-[400px]">
+             <h3 className="text-sm font-semibold text-brand-600 uppercase tracking-wide px-1 flex items-center gap-2">
+                 <Sparkles className="w-4 h-4 text-brand-500" />
+                 AI Generated Look
+             </h3>
+             <div className="aspect-[3/4] md:aspect-square rounded-xl overflow-hidden bg-gray-900 relative flex items-center justify-center">
+                 {loading && (
+                     <div className="absolute inset-0 flex flex-col items-center justify-center bg-gray-900/80 backdrop-blur-md z-10 text-white p-6 text-center">
+                         <div className="relative mb-6">
+                            <div className="w-16 h-16 border-4 border-brand-500/30 rounded-full animate-pulse"></div>
+                            <div className="absolute inset-0 w-16 h-16 border-4 border-brand-500 border-t-transparent rounded-full animate-spin"></div>
+                            <ScanFace className="absolute inset-0 w-8 h-8 m-auto text-brand-500 animate-pulse" />
+                         </div>
+                         <h4 className="text-xl font-bold mb-2">Creating Your Try-On</h4>
+                         <p className="text-brand-300 font-medium animate-pulse">{loadingTexts[progressStep]}</p>
+                         <p className="text-xs text-gray-500 mt-4">Powered by Gemini Nano Banana</p>
+                     </div>
+                 )}
+                 {error && (
+                     <div className="absolute inset-0 flex flex-col items-center justify-center p-8 text-center bg-gray-800">
+                         <div className="bg-red-500/10 p-4 rounded-full mb-4">
+                            <AlertCircle className="w-10 h-10 text-red-500" />
+                         </div>
+                         <h4 className="text-white font-bold text-lg mb-2">Generation Failed</h4>
+                         <p className="text-gray-400 text-sm mb-6 max-w-xs">{error}</p>
+                         <button
+                            onClick={onRetake}
+                            className="px-6 py-2.5 bg-white text-black rounded-full font-bold text-sm hover:bg-gray-100 transition-colors"
+                         >
+                             Try Again
+                         </button>
+                     </div>
+                 )}
+                 {!loading && !error && generatedImage && (
+                     <img src={generatedImage} alt="Generated Try-On" className="w-full h-full object-contain animate-in fade-in duration-700" />
+                 )}
+             </div>
+             {/* Actions */}
+             {!loading && !error && generatedImage && (
+                 <div className="grid grid-cols-2 gap-3 mt-2">
+                     <button
+                        onClick={onRetake}
+                        className="flex items-center justify-center gap-2 py-3 bg-gray-100 hover:bg-gray-200 text-gray-800 rounded-xl font-bold transition-colors"
+                     >
+                         <RefreshCw className="w-4 h-4" />
+                         Retake
+                     </button>
+                     <button className="flex items-center justify-center gap-2 py-3 bg-brand-600 hover:bg-brand-700 text-white rounded-xl font-bold transition-colors shadow-lg shadow-brand-200 hover:shadow-brand-300">
+                         <ShoppingCart className="w-4 h-4" />
+                         Add to Cart
+                     </button>
+                 </div>
+             )}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default ResultView;

src/constants.ts ADDED Viewed

	@@ -0,0 +1,55 @@

+import { Product, ProductCategory } from './types';
+// We use high-quality Unsplash images.
+export const PRODUCTS: Product[] = [
+  {
+    id: '1',
+    name: 'Classic Aviator Sunglasses',
+    category: ProductCategory.EYEWEAR,
+    price: 150.00,
+    imageUrl: 'https://images.unsplash.com/photo-1511499767150-a48a237f0083?auto=format&fit=crop&q=80&w=500',
+    description: 'Timeless aviator sunglasses with gold frames and dark lenses.'
+  },
+  {
+    id: '2',
+    name: 'Oxford Blue Shirt',
+    category: ProductCategory.SHIRT,
+    price: 89.50,
+    imageUrl: 'https://images.unsplash.com/photo-1596755094514-f87e34085b2c?auto=format&fit=crop&q=80&w=500',
+    description: 'Premium cotton oxford shirt in a versatile blue shade.'
+  },
+  {
+    id: '3',
+    name: 'Gold Layered Necklace',
+    category: ProductCategory.NECKLACE,
+    price: 45.00,
+    imageUrl: 'https://images.unsplash.com/photo-1601121141461-9d6647bca1ed?auto=format&fit=crop&q=80&w=500',
+    description: 'Delicate layered gold chain necklace.'
+  },
+  {
+    id: '4',
+    name: 'Beige Chino Pants',
+    category: ProductCategory.PANTS,
+    price: 65.00,
+    imageUrl: 'https://images.unsplash.com/photo-1624378439575-d8705ad7ae80?auto=format&fit=crop&q=80&w=500',
+    description: 'Slim fit beige chinos suitable for casual or formal wear.'
+  },
+  {
+    id: '5',
+    name: 'Wide Brim Fedora',
+    category: ProductCategory.HEADWEAR,
+    price: 55.00,
+    imageUrl: 'https://images.unsplash.com/photo-1514327605112-b887c0e61c0a?auto=format&fit=crop&q=80&w=500',
+    description: 'Stylish wide-brimmed felt hat in charcoal grey.'
+  },
+  {
+    id: '6',
+    name: 'Denim Jacket',
+    category: ProductCategory.SHIRT,
+    price: 120.00,
+    imageUrl: 'https://images.unsplash.com/photo-1576871337622-98d48d1cf531?auto=format&fit=crop&q=80&w=500',
+    description: 'Classic vintage-wash denim jacket.'
+  }
+];
+export const APP_NAME = "StyleGenie";

src/index.tsx ADDED Viewed

	@@ -0,0 +1,15 @@

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+const rootElement = document.getElementById('root');
+if (!rootElement) {
+  throw new Error("Could not find root element to mount to");
+}
+const root = ReactDOM.createRoot(rootElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/services/geminiService.ts ADDED Viewed

	@@ -0,0 +1,178 @@

+import { GoogleGenAI } from "@google/genai";
+import { Product, ProductCategory } from "../types";
+// Helper to clean base64 string
+const cleanBase64 = (data: string) => {
+  return data.replace(/^data:image\/(png|jpeg|jpg|webp);base64,/, '');
+};
+const getMimeType = (data: string) => {
+    const match = data.match(/^data:(image\/\w+);base64,/);
+    return match ? match[1] : 'image/jpeg';
+}
+// Robust image fetcher that handles CORS better than simple fetch in some cases
+const urlToBase64 = async (url: string): Promise<string> => {
+  try {
+    const response = await fetch(url);
+    if (!response.ok) throw new Error(`Failed to fetch image: ${response.statusText}`);
+    const blob = await response.blob();
+    return await new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onloadend = () => resolve(reader.result as string);
+      reader.onerror = reject;
+      reader.readAsDataURL(blob);
+    });
+  } catch (error) {
+    console.warn("Fetch failed, attempting canvas fallback...", error);
+    // Fallback: Load via Image tag (handles some CORS headers differently) and draw to canvas
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.crossOrigin = "Anonymous";
+      img.onload = () => {
+        const canvas = document.createElement('canvas');
+        canvas.width = img.width;
+        canvas.height = img.height;
+        const ctx = canvas.getContext('2d');
+        if (!ctx) {
+             reject(new Error("Could not get canvas context"));
+             return;
+        }
+        ctx.drawImage(img, 0, 0);
+        try {
+          const dataURL = canvas.toDataURL('image/jpeg');
+          resolve(dataURL);
+        } catch (e) {
+          reject(new Error("Canvas tainted by cross-origin data"));
+        }
+      };
+      img.onerror = () => reject(new Error("Image load failed"));
+      img.src = url;
+    });
+  }
+};
+export const generateTryOn = async (userImageBase64: string, product: Product): Promise<string> => {
+  const apiKey = process.env.API_KEY;
+  if (!apiKey) {
+    throw new Error("API Key is missing. Please set the API_KEY environment variable.");
+  }
+  const ai = new GoogleGenAI({ apiKey });
+  // Fetch product image to base64 with robust handling
+  let productBase64 = '';
+  try {
+      productBase64 = await urlToBase64(product.imageUrl);
+  } catch (e) {
+      console.error("Failed to load product image", e);
+      throw new Error("Could not load product image. Please try another item.");
+  }
+  // --- PROMPT ENGINEERING FOR VIRTUAL TRY-ON ---
+  // We use Gemini 2.5 Flash Image ('nano banana') capabilities.
+  // The key is to instruct it to act as a segmentation and warping engine.
+  const basePrompt = `Act as an advanced Virtual Try-On (VTON) AI model.
+  TASK:
+  Synthesize a photorealistic image of the USER (Image A) wearing the GARMENT (Image B).
+  STRICT PROCESSING STEPS:
+  1. SEGMENTATION: Identify the user's body parts relevant to the garment (e.g., torso for shirts, legs for pants, face for glasses).
+  2. EXTRACTION: Extract the garment from Image B, completely ignoring any white background, hangers, or mannequins.
+  3. WARPING: Warp the extracted garment to match the user's body pose, rotation, and shape in Image A.
+     - If the user is turning, the garment must turn.
+     - If the user has arms crossed, the garment must fold realistically.
+  4. COMPOSITING: Blend the warped garment onto the user.
+     - Apply lighting from the user's environment to the garment.
+     - Cast shadows from the garment onto the user's skin/body to create depth.
+  CONSTRAINTS:
+  - PRESERVE FACE IDENTITY: Do not modify the user's facial features.
+  - PRESERVE BACKGROUND: Do not change the background behind the user.
+  - REALISM: The output must look like a photograph, not a photoshop cut-paste.
+  CATEGORY SPECIFIC INSTRUCTIONS:
+  `;
+  let categoryInstruction = "";
+  switch (product.category) {
+    case ProductCategory.EYEWEAR:
+      categoryInstruction = `Category: EYEWEAR.
+      - Fit: Align perfectly with the eyes and nose bridge.
+      - Scale: Ensure the glasses width matches the face width.
+      - Reality: If the glasses are sunglasses, add reflections. If clear, show the eyes through the lenses.`;
+      break;
+    case ProductCategory.NECKLACE:
+      categoryInstruction = `Category: JEWELRY.
+      - Fit: Drape the necklace around the neck curve. Gravity is important.
+      - Layering: It must sit ON TOP of skin or the shirt the user is already wearing (unless it's a shirt try-on, then on the new shirt).`;
+      break;
+    case ProductCategory.HEADWEAR:
+      categoryInstruction = `Category: HAT.
+      - Fit: Sit naturally on the crown of the head.
+      - Occlusion: If the user has hair volume, the hat should compress it slightly or sit behind fringe.`;
+      break;
+    case ProductCategory.SHIRT:
+      categoryInstruction = `Category: UPPER BODY GARMENT.
+      - Action: Completely replace the user's current top.
+      - Sleeves: Match the sleeve length of the target garment. If the user's arm pose is complex, warp the sleeves accordingly.
+      - Tucking: Determine if a tuck is natural based on the user's pose.`;
+      break;
+    case ProductCategory.PANTS:
+      categoryInstruction = `Category: LOWER BODY GARMENT.
+      - Action: Replace the user's pants/skirt.
+      - Waist: Align with the natural waistline.`;
+      break;
+    default:
+      categoryInstruction = `Category: FASHION ITEM. Wear it naturally.`;
+      break;
+  }
+  const fullPrompt = `${basePrompt}\n${categoryInstruction}`;
+  const userMime = getMimeType(userImageBase64);
+  const productMime = getMimeType(productBase64);
+  try {
+    // gemini-2.5-flash-image is the recommended model for high-fidelity image manipulation tasks
+    const response = await ai.models.generateContent({
+      model: 'gemini-2.5-flash-image',
+      contents: {
+        parts: [
+          {
+            text: fullPrompt
+          },
+          {
+            inlineData: {
+              mimeType: userMime,
+              data: cleanBase64(userImageBase64)
+            }
+          },
+          {
+            inlineData: {
+              mimeType: productMime,
+              data: cleanBase64(productBase64)
+            }
+          }
+        ]
+      }
+    });
+    const parts = response.candidates?.[0]?.content?.parts;
+    if (parts) {
+      for (const part of parts) {
+        if (part.inlineData && part.inlineData.data) {
+           return `data:${part.inlineData.mimeType || 'image/png'};base64,${part.inlineData.data}`;
+        }
+      }
+    }
+    throw new Error("No image generated by the AI.");
+  } catch (error) {
+    console.error("Gemini API Error:", error);
+    throw error;
+  }
+};

src/types.ts ADDED Viewed

	@@ -0,0 +1,33 @@

+export enum ProductCategory {
+  SHIRT = 'Shirt',
+  PANTS = 'Pants',
+  EYEWEAR = 'Eyewear',
+  NECKLACE = 'Necklace',
+  HEADWEAR = 'Headwear'
+}
+export interface Product {
+  id: string;
+  name: string;
+  category: ProductCategory;
+  price: number;
+  imageUrl: string;
+  description: string;
+}
+export enum AppView {
+  CATALOG = 'CATALOG',
+  CAMERA = 'CAMERA',
+  RESULT = 'RESULT'
+}
+export interface TryOnRequest {
+  product: Product;
+  userImageBase64: string; // The captured frame
+}
+export interface TryOnResult {
+  generatedImageBase64: string | null;
+  loading: boolean;
+  error: string | null;
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,20 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["**/*.ts", "**/*.tsx"]
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,25 @@

+import { defineConfig, loadEnv } from 'vite'
+import react from '@vitejs/plugin-react'
+// https://vitejs.dev/config/
+export default defineConfig(({ mode }) => {
+  // Load env file based on `mode` in the current working directory.
+  // We pass '' as the third argument to load ALL env vars, including API_KEY from Hugging Face Secrets.
+  const env = loadEnv(mode, process.cwd(), '')
+  return {
+    plugins: [react()],
+    define: {
+      // Inject the API Key securely from the build environment
+      'process.env.API_KEY': JSON.stringify(env.API_KEY || process.env.API_KEY)
+    },
+    server: {
+      host: '0.0.0.0', // Required for Docker containers
+      port: 7860,      // Required port for Hugging Face Spaces
+      strictPort: true,
+      hmr: {
+        clientPort: 443 // Fixes HMR behind Hugging Face SSL proxy
+      }
+    }
+  }
+})