import React, { useState, useEffect, useRef } from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import { Camera, Upload, CheckCircle2, Trash2, Sparkles, User, Shirt, Image as ImageIcon, Loader2, Download, Maximize2, Layers, ChevronRight, Plus } from 'lucide-react'; // FIX: Pull from Vite environment variable const apiKey = import.meta.env.VITE_GEMINI_API_KEY; function App() { const [modelImage, setModelImage] = useState(null); const [wardrobe, setWardrobe] = useState([]); const [results, setResults] = useState([]); const [isGenerating, setIsGenerating] = useState(false); const [activeTab, setActiveTab] = useState('studio'); const modelInputRef = useRef(null); const wardrobeInputRef = useRef(null); const fileToBase64 = (file) => { return new Promise((resolve, reject) => { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => resolve(reader.result.split(',')[1]); reader.onerror = (error) => reject(error); }); }; const handleModelUpload = async (e) => { const file = e.target.files[0]; if (!file) return; const base64 = await fileToBase64(file); setModelImage(`data:${file.type};base64,${base64}`); }; const handleWardrobeUpload = async (e) => { const files = Array.from(e.target.files); const newItems = await Promise.all(files.map(async (file) => ({ id: Math.random().toString(36).substr(2, 9), url: await fileToBase64(file), type: file.type, name: file.name }))); setWardrobe(prev => [...prev, ...newItems]); }; const removeWardrobeItem = (id) => { setWardrobe(prev => prev.filter(item => item.id !== id)); }; const generateTryOn = async () => { if (!modelImage || wardrobe.length === 0) return; setIsGenerating(true); setActiveTab('results'); const newResults = []; for (const item of wardrobe) { try { // Step 1: Spatial & Pose Analysis of the Reference Image const spatialAnalysisPrompt = "Identify the person's pose and orientation in Image 1. Specifically: What direction is the head facing? What is the angle of the shoulders? Where is the main light source coming from? Answer with technical detail for a 3D mapping task."; const analysisRes = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [ { text: spatialAnalysisPrompt }, { inlineData: { mimeType: "image/png", data: modelImage.split(',')[1] } } ] }] }) }); const spatialData = await analysisRes.json(); const poseTraits = spatialData.candidates?.[0]?.content?.parts?.[0]?.text; // Step 2: Clothing Texture Analysis const clothAnalysisRes = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-09-2025:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [ { text: "Describe this clothing item's fabric, silhouette, and drape." }, { inlineData: { mimeType: item.type, data: item.url } } ] }] }) }); const clothData = await clothAnalysisRes.json(); const clothTraits = clothData.candidates?.[0]?.content?.parts?.[0]?.text; // Step 3: Pose-Synchronized Synthesis const synthesisPrompt = `HIGH-FIDELITY POSE-MATCHED IN-PAINTING: - REFERENCE IMAGE 1: The Human Subject (Locked Face & Pose) - REFERENCE IMAGE 2: Target Garment CRITICAL CONSTRAINTS: 1. POSE SYNC: The person is oriented as follows: ${poseTraits}. You MUST render the new clothing to match this EXACT body orientation and head angle. 2. PIXEL LOCK: Do not change the facial features, hairstyle, or background of Image 1. 3. LIGHTING MATCH: The shadows on the new garment must match the light direction identified in the pose analysis. 4. OUTFIT SWAP: Replace the existing clothes with ${item.name} (${clothTraits}). Ensure the clothing drapes realistically over the body silhouette in Image 1. 5. PERSPECTIVE: If the person is facing sideways, the clothing must be seen from that same sideways perspective.`; const synthesisRes = await fetch(`https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-image-preview:generateContent?key=${apiKey}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ contents: [{ parts: [ { text: synthesisPrompt }, { inlineData: { mimeType: "image/png", data: modelImage.split(',')[1] } }, { inlineData: { mimeType: item.type, data: item.url } } ] }], generationConfig: { responseModalities: ['TEXT', 'IMAGE'], temperature: 0.1 } }) }); const synthesisData = await synthesisRes.json(); const base64Image = synthesisData.candidates?.[0]?.content?.parts?.find(p => p.inlineData)?.inlineData?.data; if (base64Image) { newResults.push({ id: Math.random(), url: `data:image/png;base64,${base64Image}`, outfit: item.name }); } } catch (err) { console.error("Pose mapping failed", err); } } setResults(prev => [...newResults, ...prev]); setIsGenerating(false); }; return (
{activeTab === 'studio' ? (

Ref. Alpha

Human Silhouette

{modelImage && (
Pose & Face Locked
)}
{modelImage ? ( <> Reference
) : (
)}

Ref. Beta

Garment Selection

{wardrobe.map((item) => (
Cloth
))}
) : (

Curated Lookbook

Synchronized to your reference orientation

{isGenerating && (

Aligning Perspective

Matching clothing shadows to your reference lighting...

)} {results.map((res) => (
Result

{res.outfit}

))}
)}
); } export default App; ReactDOM.createRoot(document.getElementById('root')).render( , );