import React, { useState, useCallback, useEffect, useMemo, DragEvent, } from 'react'; import ReactDOM from 'react-dom/client'; import { GoogleGenAI, Modality } from '@google/genai'; // ====================== TYPES ====================== interface Config { basePrompt: string; ethnicity: string; bodyShape: string; eyeColor: string; hairStyle: string; hairColor: string; style: string; expression: string; background: string; skinTexture: string; accessories: string; aspectRatio: string; numImages: number; } interface Toast { id: number; message: string; type: 'success' | 'error'; } // ====================== HELPER ====================== const fileToGenerativePart = async (file: File): Promise => { const base64 = await new Promise((resolve, reject) => { const reader = new FileReader(); reader.onloadend = () => resolve((reader.result as string).split(',')[1]); reader.onerror = reject; reader.readAsDataURL(file); }); return { inlineData: { data: base64, mimeType: file.type } }; }; // ====================== CONSTANTS ====================== const PRESETS: Record = { Cyberpunk: 'Neon-lit cyberpunk city, high-tech interface, chrome accents, futuristic streetwear, rain-slicked streets, vibrant blue and pink rim lights.', Editorial: 'High-fashion vogue editorial, studio lighting, neutral background, sharp focus, minimalist styling, haute couture.', Cinematic: 'Movie still, dramatic lighting, shallow depth of field, anamorphic lens flares, color graded, atmospheric smoke.', Ethereal: 'Soft dreamy atmosphere, blooming light, pastel colors, floating particles, fantasy elements, angelic glow.', Noir: 'Black and white photography, high contrast, dramatic shadows, venetian blind lighting, mysterious atmosphere, detective aesthetic.', }; const RANDOM_DATA = { ethnicity: ['African', 'Asian', 'Caucasian', 'Hispanic/Latin', 'Middle Eastern', 'Pacific Islander', 'Mixed Race'], bodyShape: ['Curvy', 'Athletic', 'Slim', 'Petite', 'Plus Size', 'Hourglass'], eyeColor: ['Brown', 'Blue', 'Green', 'Hazel', 'Grey', 'Amber'], hairStyle: ['Sleek Bob', 'Long Waves', 'Pixie Cut', 'Braids', 'Messy Bun', 'Straight', 'Curly Afro'], hairColor: ['Black', 'Brunette', 'Blonde', 'Platinum', 'Red', 'Pastel Pink', 'Silver'], style: ['Streetwear', 'Business', 'Bohemian', 'Minimalist', 'Grunge', 'Luxury', 'Techwear'], expression: ['Confident', 'Mysterious', 'Joyful', 'Serious', 'Seductive', 'Calm'], background: ['Studio', 'Urban Night', 'Forest', 'Beach Sunset', 'Cyberpunk City', 'Minimal White', 'Dark Moody'], }; const ASPECT_RATIOS = [ { label: '1:1 Square', value: '1:1' }, { label: '4:5 Portrait', value: '4:5' }, { label: '9:16 Vertical', value: '9:16' }, { label: '16:9 Landscape', value: '16:9' }, ]; // ====================== TOAST COMPONENT ====================== const ToastContainer: React.FC<{ toasts: Toast[]; removeToast: (id: number) => void }> = ({ toasts, removeToast }) => { return (
{toasts.map((t) => (
removeToast(t.id)} > {t.message}
))}
); }; // ====================== STYLES ====================== const Style = () => ( ); // ====================== COMPONENTS ====================== const GalleryView: React.FC<{ images: string[]; setGallery: React.Dispatch> }> = ({ images, setGallery }) => { return (
{images.length === 0 ? (

No archived identities yet. Generate some to see them here.

) : (
{images.map((src, i) => (
{`Archive
))}
)}
); }; const GenerateTwinView: React.FC<{ ai: GoogleGenAI; addToast: (msg: string, type: 'success' | 'error') => void; isGenerating: boolean; setIsGenerating: React.Dispatch>; onImageGenerated: (imgs: string[]) => void; config: Config; setConfig: React.Dispatch>; refFiles: File[]; setRefFiles: React.Dispatch>; previews: string[]; setPreviews: React.Dispatch>; }> = ({ ai, addToast, isGenerating, setIsGenerating, onImageGenerated, config, setConfig, refFiles, setRefFiles, previews, setPreviews }) => { const [generatedImages, setGeneratedImages] = useState([]); const [dragOver, setDragOver] = useState(false); const updateConfig = useCallback((key: keyof Config, value: any) => { setConfig(prev => ({ ...prev, [key]: value })); }, [setConfig]); const randomize = useCallback(() => { const r = (arr: string[]) => arr[Math.floor(Math.random() * arr.length)]; setConfig(prev => ({ ...prev, ethnicity: r(RANDOM_DATA.ethnicity), bodyShape: r(RANDOM_DATA.bodyShape), eyeColor: r(RANDOM_DATA.eyeColor), hairStyle: r(RANDOM_DATA.hairStyle), hairColor: r(RANDOM_DATA.hairColor), style: r(RANDOM_DATA.style), expression: r(RANDOM_DATA.expression), background: r(RANDOM_DATA.background), })); }, []); const handleDrop = useCallback((e: DragEvent) => { e.preventDefault(); setDragOver(false); const files = Array.from(e.dataTransfer.files).filter(f => f.type.startsWith('image/')).slice(0, 5); setRefFiles(files); setPreviews(files.map(f => URL.createObjectURL(f))); }, [setRefFiles, setPreviews]); const handleFiles = useCallback((e: React.ChangeEvent) => { if (!e.target.files) return; const files = Array.from(e.target.files).slice(0, 5); setRefFiles(files); setPreviews(files.map(f => URL.createObjectURL(f))); }, [setRefFiles, setPreviews]); const removeRef = useCallback((index: number) => { setRefFiles(prev => prev.filter((_, i) => i !== index)); setPreviews(prev => { // Note: We don't strictly revoke here because we might re-use, // but for proper cleanup, revoking the removed one is good practice. // However, since state is lifted, be careful not to revoke if it's still needed elsewhere. // For simplicity in this persist-mode, we just filter. return prev.filter((_, i) => i !== index); }); }, [setRefFiles, setPreviews]); const clearRefs = useCallback(() => { setRefFiles([]); setPreviews([]); }, [setRefFiles, setPreviews]); const generate = async () => { if (refFiles.length === 0 && config.numImages > 1) { addToast('Imagen currently supports only 1 image without reference. Using 1.', 'error'); } setIsGenerating(true); setGeneratedImages([]); try { let prompt = refFiles.length > 0 ? `CRITICAL: Generate an IDENTICAL TWIN of the reference person(s). Preserve exact facial structure, identity, and features. ` : `${config.basePrompt}, `; prompt += `${config.ethnicity} ethnicity, ${config.bodyShape} physique, ${config.eyeColor} eyes, `; prompt += `${config.hairStyle} ${config.hairColor} hair, wearing ${config.style} fashion, ${config.expression} expression. `; prompt += `Setting: ${config.background}. `; if (config.accessories) prompt += `Accessories: ${config.accessories}. `; prompt += `Skin: ${config.skinTexture}. Hyper-realistic, 8k, cinematic lighting, masterpiece, sharp focus.`; let results: string[] = []; if (refFiles.length > 0) { const parts = await Promise.all(refFiles.map(fileToGenerativePart)); parts.push({ text: prompt }); for (let i = 0; i < config.numImages; i++) { const resp = await ai.models.generateContent({ model: 'gemini-2.5-flash-image', contents: { parts }, config: { responseModalities: [Modality.IMAGE] }, }); const imgPart = resp.candidates?.[0]?.content?.parts?.find((p: any) => p.inlineData); if (imgPart) results.push(`data:image/png;base64,${imgPart.inlineData.data}`); } } else { const resp = await ai.models.generateImages({ model: 'imagen-4.0-generate-001', prompt, config: { numberOfImages: config.numImages, aspectRatio: config.aspectRatio }, }); resp.generatedImages?.forEach(g => { if (g.image?.imageBytes) results.push(`data:image/png;base64,${g.image.imageBytes}`); }); } if (results.length > 0) { setGeneratedImages(results); onImageGenerated(results); addToast(`Successfully generated ${results.length} image(s)!`, 'success'); } else { throw new Error('No images returned'); } } catch (err: any) { addToast(err.message || 'Generation failed', 'error'); } finally { setIsGenerating(false); } }; return (
{/* Reference Upload */}
01
SOURCE IDENTITY (OPTIONAL)
{refFiles.length > 0 && }
{ e.preventDefault(); setDragOver(true); }} onDragLeave={() => setDragOver(false)} onDrop={handleDrop} >
{previews.length > 0 && (
{previews.map((src, i) => (
{`ref
))}
)} {/* Physical Attributes */}
02
PHYSICAL ATTRIBUTES
{/* Style & Hair */}
03
STYLE & ENVIRONMENT
{/* Variants Selection */}
{Object.keys(PRESETS).map(k => ( ))}