[V0_FILE]json:file="package.json" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^0.9.9", "zod": "3.25.67", "ai": "5.0.41", "@ai-sdk/google": "2.0.13" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]markdown:file="ARCHITECTURE.md" # AI Image Playground - Arquitectura Técnica Completa ## Resumen Ejecutivo Este documento describe la arquitectura técnica del AI Image Playground, una aplicación que combina dos imágenes usando IA multimodal (Google Gemini 2.5 Flash Image) con un prompt de texto. La aplicación está optimizada para escalabilidad y funciona de manera excelente gracias a decisiones arquitectónicas específicas. ## Stack Tecnológico ### Frontend - **Next.js 14** con App Router - **React 19** con hooks modernos - **TypeScript** para type safety - **Tailwind CSS v4** con design tokens personalizados - **shadcn/ui** + **Radix UI** para componentes accesibles ### Backend & IA - **Vercel AI SDK 5.0.41** para integración con modelos de IA - **Google Gemini 2.5 Flash Image Preview** como modelo multimodal - **Vercel AI Gateway** para monitoreo, logging y control de costos - **Next.js API Routes** para el backend ### Infraestructura - **Vercel** para deployment y hosting - **Vercel Analytics** para métricas de uso ## Arquitectura del Sistema ### 1. Flujo de Datos Principal \`\`\` Usuario → Frontend (React) → API Route → AI Gateway → Google Gemini → Respuesta \`\`\` #### Paso a Paso: 1. **Upload de Imágenes**: Usuario sube 2 imágenes + prompt 2. **Validación Frontend**: Verificación de archivos y prompt 3. **Envío a API**: FormData con imágenes y texto 4. **Procesamiento Backend**: Conversión de formatos si es necesario 5. **Llamada a IA**: Gemini procesa imágenes + prompt 6. **Respuesta**: Imagen generada en base64 + metadatos ### 2. Componente Frontend (`app/page.tsx`) #### Estado Management: \`\`\`typescript const [image1, setImage1] = useState(null) const [image2, setImage2] = useState(null) const [prompt, setPrompt] = useState("") const [generatedImage, setGeneratedImage] = useState(null) const [isGenerating, setIsGenerating] = useState(false) const [error, setError] = useState(null) \`\`\` #### Características Clave: - **Upload Drag & Drop**: Interfaz intuitiva para subir imágenes - **Preview en Tiempo Real**: Muestra las imágenes subidas inmediatamente - **Validación Reactiva**: Botón deshabilitado hasta tener todos los inputs - **Estados de Loading**: Spinner y feedback visual durante generación - **Error Handling**: Manejo elegante de errores con UI feedback - **Download Functionality**: Descarga directa de imagen generada ### 3. API Route (`app/api/generate-image/route.ts`) #### Procesamiento de Imágenes: \`\`\`typescript async function convertImageToSupportedFormat(file: File): Promise<{ buffer: Buffer; mimeType: string }> \`\`\` **Formatos Soportados**: PNG, JPEG, WebP **Conversión Automática**: Otros formatos se convierten a JPEG #### Integración con Gemini: \`\`\`typescript const result = await generateText({ model: "google/gemini-2.5-flash-image-preview", providerOptions: { google: { responseModalities: ["TEXT", "IMAGE"] }, }, messages: [ { role: "user", content: [ { type: "text", text: prompt }, { type: "file", mediaType: convertedImage1.mimeType, data: convertedImage1.buffer }, { type: "file", mediaType: convertedImage2.mimeType, data: convertedImage2.buffer }, ], }, ], }) \`\`\` #### Respuesta Optimizada: - **Base64 Data URL**: Imagen lista para mostrar en frontend - **Metadatos**: Texto generado y usage statistics - **Error Handling**: Manejo robusto de errores de IA ### 4. AI Gateway Integration #### Configuración Transparente: - **Variable de Entorno**: `AI_GATEWAY_API_KEY` - **Interceptación Automática**: Todas las llamadas pasan por AI Gateway - **Sin Código Adicional**: Funciona como proxy transparente #### Beneficios: - **Monitoreo**: Tracking de todas las llamadas a IA - **Costos**: Control y análisis de gastos por request - **Performance**: Métricas de latencia y tokens - **Debugging**: Logs detallados de requests/responses ### 5. Design System #### Tokens de Color (globals.css): \`\`\`css :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); /* ... más tokens */ } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); /* ... tokens para dark mode */ } \`\`\` #### Tipografía: - **Geist Sans**: Font principal para UI - **Geist Mono**: Font monospace para código - **Configuración en layout.tsx**: Variables CSS automáticas #### Componentes UI: - **shadcn/ui**: Sistema de componentes consistente - **Radix UI**: Primitives accesibles y robustos - **Tailwind CSS v4**: Utility classes con design tokens ## Decisiones Arquitectónicas Clave ### 1. ¿Por qué Google Gemini 2.5 Flash Image? **Ventajas**: - **Multimodal Nativo**: Procesa texto + múltiples imágenes simultáneamente - **Calidad Superior**: Resultados más coherentes que modelos separados - **Latencia Optimizada**: "Flash" variant para respuestas rápidas - **Costo Eficiente**: Mejor relación calidad/precio para este use case ### 2. ¿Por qué Vercel AI SDK? **Beneficios**: - **Abstracción Unificada**: API consistente para múltiples providers - **Type Safety**: TypeScript nativo con tipos generados - **Streaming Support**: Preparado para streaming si se necesita - **Provider Agnostic**: Fácil cambio entre modelos sin refactoring ### 3. ¿Por qué AI Gateway? **Valor Agregado**: - **Observabilidad**: Visibilidad completa del uso de IA - **Control de Costos**: Prevención de gastos excesivos - **Rate Limiting**: Protección contra abuse - **Analytics**: Datos para optimización y scaling ### 4. ¿Por qué FormData en lugar de JSON? **Razones Técnicas**: - **File Upload Nativo**: Manejo eficiente de archivos binarios - **Menos Overhead**: No necesita base64 encoding en frontend - **Browser Compatibility**: Soporte universal sin polyfills - **Memory Efficient**: Streaming de archivos grandes ## Performance y Optimizaciones ### 1. Frontend Optimizations #### Image Handling: - **URL.createObjectURL()**: Preview inmediato sin upload - **Lazy Loading**: Componentes se cargan solo cuando se necesitan - **Memoization**: React hooks optimizados para re-renders #### UX Optimizations: - **Immediate Feedback**: Estados de loading y error claros - **Progressive Enhancement**: Funciona sin JavaScript básico - **Responsive Design**: Mobile-first approach ### 2. Backend Optimizations #### Image Processing: - **Format Conversion**: Solo cuando es necesario - **Buffer Management**: Manejo eficiente de memoria - **Error Recovery**: Fallbacks para formatos no soportados #### API Design: - **Single Endpoint**: Menos complejidad de routing - **Stateless**: Cada request es independiente - **Error Boundaries**: Manejo granular de errores ### 3. AI Integration Optimizations #### Model Selection: - **Flash Variant**: Optimizado para latencia - **Multimodal**: Una sola llamada vs múltiples requests - **Response Modalities**: Solo imagen + texto necesarios #### Request Optimization: - **Batch Processing**: Múltiples imágenes en una request - **Efficient Encoding**: Formatos optimizados para el modelo - **Timeout Handling**: Graceful degradation en fallos ## Escalabilidad ### 1. Horizontal Scaling #### Vercel Platform: - **Serverless Functions**: Auto-scaling automático - **Edge Network**: CDN global para assets estáticos - **Zero Config**: No infrastructure management #### Database Considerations: - **Stateless Design**: No necesita base de datos para funcionalidad básica - **Future Extensions**: Fácil agregar persistencia si se necesita ### 2. Cost Optimization #### AI Gateway Benefits: - **Usage Monitoring**: Prevención de gastos inesperados - **Rate Limiting**: Control de abuse - **Analytics**: Optimización basada en datos reales #### Efficient Resource Usage: - **On-Demand Processing**: Solo paga por uso real - **Optimized Requests**: Mínimo número de llamadas a IA - **Caching Strategy**: Preparado para implementar cache si se necesita ### 3. Monitoring y Observabilidad #### Built-in Analytics: - **Vercel Analytics**: Performance y usage metrics - **AI Gateway Logs**: Detailed AI usage tracking - **Error Tracking**: Comprehensive error monitoring #### Future Monitoring: - **Custom Metrics**: Fácil agregar métricas específicas - **User Analytics**: Tracking de comportamiento de usuarios - **Performance Monitoring**: APM integration ready ## Seguridad ### 1. Input Validation #### Frontend: - **File Type Validation**: Solo imágenes permitidas - **Size Limits**: Prevención de uploads masivos - **Content Validation**: Verificación de formatos #### Backend: - **Double Validation**: Server-side verification - **Buffer Sanitization**: Limpieza de datos binarios - **Error Sanitization**: No exposición de internals ### 2. API Security #### Rate Limiting: - **AI Gateway**: Built-in rate limiting - **Vercel Functions**: Natural request throttling - **Error Handling**: No information leakage #### Data Privacy: - **No Persistence**: Imágenes no se guardan - **Stateless Processing**: No tracking de usuarios - **Secure Transmission**: HTTPS everywhere ## Mantenimiento y Debugging ### 1. Logging Strategy #### Development Logs: \`\`\`typescript console.log("[v0] Original image types:", image1.type, image2.type) console.log("[v0] Converted image types:", convertedImage1.mimeType, convertedImage2.mimeType) \`\`\` #### Production Monitoring: - **AI Gateway Dashboard**: Real-time usage monitoring - **Vercel Analytics**: Performance insights - **Error Boundaries**: Graceful error handling ### 2. Development Workflow #### Hot Reloading: - **Next.js Dev Server**: Instant feedback - **TypeScript**: Compile-time error catching - **Tailwind JIT**: Instant style updates #### Testing Strategy: - **Type Safety**: TypeScript previene errores comunes - **Component Testing**: shadcn/ui components son pre-tested - **Integration Testing**: AI Gateway provides request validation ## Conclusiones ### Fortalezas del Sistema: 1. **Arquitectura Moderna**: Stack actualizado y mantenible 2. **Performance Optimizada**: Decisiones técnicas enfocadas en velocidad 3. **Escalabilidad Built-in**: Preparado para crecimiento sin refactoring 4. **Observabilidad Completa**: Monitoreo y debugging comprehensivo 5. **Developer Experience**: Tooling moderno y productive ### Recomendaciones para Scaling: 1. **Mantener la Arquitectura Actual**: El foundation es sólido 2. **Agregar Cache Layer**: Para requests repetitivos 3. **Implementar User Management**: Si se necesita personalización 4. **Database Integration**: Para persistencia de resultados 5. **Advanced Analytics**: Para insights de negocio ### Factores de Éxito: - **Vercel AI SDK**: Abstracción robusta para IA - **AI Gateway**: Observabilidad y control sin overhead - **Google Gemini**: Modelo optimizado para el use case - **Modern Stack**: Herramientas maduras y bien integradas - **Stateless Design**: Simplicidad y escalabilidad Esta arquitectura representa un balance óptimo entre simplicidad, performance y escalabilidad, diseñada específicamente para el use case de combinación de imágenes con IA. [V0_FILE]jpeg:file="public/products/nike-vomero.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/NIKE%2BVOMERO%2BPLUS.jpg-5J9wMa8trM3wYziPa888tsUu54CIbe.jpeg" [V0_FILE]jpeg:file="public/products/nike-cap.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/U%2BNK%2BCLUB%2BCAP%2BU%2BCB%2BFUT%2BWSH%2BL-1.jpg-LGu748gEatTxbx1PggteSMfK1G5GKb.jpeg" [V0_FILE]jpeg:file="public/products/nike-tech-set.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/M%2BNK%2BTECH%2BWVN%2BPANT%2BOS%2BGX%2BAOP.jpg-2cS5s7Qobr7FKy9jTxD9Nk5QSt2h1e.jpeg" [V0_FILE]jpeg:file="public/products/jordan-hoodie.jpeg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/M%2BJ%2BSPRT%2BGFX%2BFLC%2BHDY%2BWOF%2BJH.jpg-S23kj9fne4s2PJ6PGqvrByZsnQGhE6.jpeg" [V0_FILE]typescriptreact:file="app/loading.tsx" export default function Loading() { return (

{/* Header Skeleton */}

{/* Main Content Skeleton */}

{[...Array(4)].map((_, i) => (

))}

{/* Upload Area Skeleton */}

{/* Footer Skeleton */}

) } [V0_FILE]typescriptreact:file="components/image-with-loading.tsx" "use client" import { useState } from "react" import { cn } from "@/lib/utils" interface ImageWithLoadingProps { src: string alt: string className?: string placeholder?: string onLoad?: () => void } export function ImageWithLoading({ src, alt, className, placeholder = "/loading-screen-animation.png", onLoad, }: ImageWithLoadingProps) { const [isLoading, setIsLoading] = useState(true) const [hasError, setHasError] = useState(false) const handleLoad = () => { setIsLoading(false) onLoad?.() } const handleError = () => { setIsLoading(false) setHasError(true) } return (

{/* Loading placeholder */} {isLoading && (

)} {/* Actual image */} {alt}

) } [V0_FILE]css:file="app/globals.css" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: var(--font-geist-sans); --font-mono: var(--font-geist-mono); --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } /* Adding explicit button styling to fix contrast issue */ .add-button { background-color: #000000 !important; color: #ffffff !important; border: none !important; outline: none !important; padding: 8px 24px !important; } .add-button:hover { opacity: 0.8 !important; } /* Adding smooth loading animations */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes slide-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slide-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } .animate-fade-in { animation: fade-in 0.6s ease-out forwards; } .animate-slide-up { animation: slide-up 0.8s ease-out forwards; opacity: 0; } .animate-slide-down { animation: slide-down 0.6s ease-out forwards; opacity: 0; } .animate-scale-in { animation: scale-in 0.5s ease-out forwards; opacity: 0; } /* Enhanced staggered animations for product grid */ .stagger-animation { opacity: 0; animation: slide-up 0.8s ease-out forwards; } .stagger-1 { animation-delay: 0.1s; } .stagger-2 { animation-delay: 0.2s; } .stagger-3 { animation-delay: 0.3s; } .stagger-4 { animation-delay: 0.4s; } /* Smooth image loading transitions */ .image-loading { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } [V0_FILE]png:file="public/loading-screen-animation.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/loading-screen-animation-KQTm1R8LjVpU7VRAKfLvdqMzZM5956.png" [V0_FILE]png:file="public/acme-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/image_720-4r0mEE3ntzXe6WlU3B1GX4FUNCIUSk.png" [V0_FILE]typescriptreact:file="app/api/generate-model-image/route.ts" isQuickEdit="true" import { generateText } from "ai" import { type NextRequest, NextResponse } from "next/server" console.log("[v0] AI Gateway API key available:", !!process.env.AI_GATEWAY_API_KEY) async function convertImageToSupportedFormat(file: File): Promise<{ buffer: Buffer; mimeType: string }> { console.log("[v0] Converting image format:", file.type, "size:", file.size) const supportedTypes = ["image/png", "image/jpeg", "image/webp"] if (supportedTypes.includes(file.type)) { const buffer = Buffer.from(await file.arrayBuffer()) console.log("[v0] Image already supported, buffer size:", buffer.length) return { buffer, mimeType: file.type, } } console.log("[v0] Converting unsupported format", file.type, "to image/jpeg") const buffer = Buffer.from(await file.arrayBuffer()) console.log("[v0] Converted buffer size:", buffer.length) return { buffer, mimeType: "image/jpeg", } } export async function POST(request: NextRequest) { try { console.log("[v0] === Starting POST request ===") const formData = await request.formData() console.log("[v0] FormData received, keys:", Array.from(formData.keys())) const userPhoto = formData.get("userPhoto") as File const productImage = formData.get("productImage") as File const productName = formData.get("productName") as string const productCategory = formData.get("productCategory") as string console.log("[v0] Extracted data:") console.log("[v0] - userPhoto:", userPhoto?.name, userPhoto?.type, userPhoto?.size) console.log("[v0] - productImage:", productImage?.name, productImage?.type, productImage?.size) console.log("[v0] - productName:", productName) console.log("[v0] - productCategory:", productCategory) if (!userPhoto || !productImage || !productName) { console.log("[v0] Missing required fields") return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } console.log("[v0] Generating model image for:", productName) console.log("[v0] Converting user photo...") const convertedUserPhoto = await convertImageToSupportedFormat(userPhoto) console.log("[v0] User photo converted successfully") console.log("[v0] Converting product image...") const convertedProductImage = await convertImageToSupportedFormat(productImage) console.log("[v0] Product image converted successfully") let prompt = "" if (productName.includes("Vomero")) { prompt = `Create a professional product modeling photo showing the person from the first image wearing the exact Nike ZoomX Vomero Plus running shoes from the second image. The shoes must be the specific Nike Vomero Plus model - lightweight running sneakers with ZoomX foam technology, typically in colorways like blue/white, black/white, or other authentic Nike Vomero colorways. DO NOT substitute with other models. Frame the shot to show the full body with clear focus on the feet and shoes. The person should be posed naturally as a model in a running or athletic stance. ABSOLUTELY CRITICAL - FACIAL FIDELITY: Preserve the EXACT facial features, bone structure, eye shape, nose shape, lip shape, eyebrow shape, and facial proportions from the uploaded person's photo. DO NOT add, remove, or modify any facial features. DO NOT change or add hairstyles, haircuts, or hair textures - keep the exact same hair as in the original photo. DO NOT alter facial hair, makeup, or any other facial characteristics. The face should be an EXACT replica of the uploaded photo with zero modifications or "improvements." ABSOLUTELY CRITICAL - SKIN TONE CONSISTENCY: The person's face, neck, arms, hands, legs, and ALL visible skin areas must have the EXACT SAME skin tone, ethnicity, and complexion as shown in the uploaded person's photo. Do NOT mix different skin tones - if the person has light skin, ALL visible skin must be light; if they have dark skin, ALL visible skin must be dark. Ensure perfect skin tone uniformity across the entire body. The background should be a smooth dark gray gradient transitioning from darker gray at the top to lighter gray at the bottom, exactly like professional Nike product photography studio backgrounds. Make it look like a high-quality Nike advertisement photo showcasing specifically the Vomero Plus running shoes, not any other shoe model. IMPORTANT: Do not include any watermarks, logos, text overlays, or branding marks from stock photo sites like Freepik, Shutterstock, or Getty Images. Generate a clean, professional image without any watermarks or text overlays.` } else if (productName.includes("Club Cap")) { prompt = `Create a professional product modeling photo showing the person from the first image wearing the exact Nike Club Cap from the second image. The cap should be a classic Nike baseball cap with the Nike swoosh logo. Frame the shot from the chest up, focusing on the head and face area to showcase the cap clearly. The person should be posed naturally as a model. ABSOLUTELY CRITICAL - FACIAL FIDELITY: Preserve the EXACT facial features, bone structure, eye shape, nose shape, lip shape, eyebrow shape, and facial proportions from the uploaded person's photo. DO NOT add, remove, or modify any facial features. DO NOT change or add hairstyles, haircuts, or hair textures - keep the exact same hair as in the original photo. DO NOT alter facial hair, makeup, or any other facial characteristics. The face should be an EXACT replica of the uploaded photo with zero modifications or "improvements." ABSOLUTELY CRITICAL - SKIN TONE CONSISTENCY: The person's face, neck, hands, arms, and ALL visible skin areas must have the EXACT SAME skin tone, ethnicity, and complexion as shown in the uploaded person's photo. Do NOT mix different skin tones - if the person has light skin, ALL visible skin must be light; if they have dark skin, ALL visible skin must be dark. Ensure perfect skin tone uniformity across all visible body parts - the hands must match the face exactly. The background should be a smooth dark gray gradient transitioning from darker gray at the top to lighter gray at the bottom, exactly like professional Nike product photography studio backgrounds. Make it look like a high-quality Nike advertisement photo with a cropped, portrait-style framing. IMPORTANT: Do not include any watermarks, logos, text overlays, or branding marks from stock photo sites like Freepik, Shutterstock, or Getty Images. Generate a clean, professional image without any watermarks or text overlays.` } else if (productName.includes("Tech Woven") || productName.includes("Tech")) { prompt = `Create a professional product modeling photo showing the person from the first image wearing the exact Nike Tech Woven Pants from the second image. CRITICAL CLOTHING FIT REQUIREMENT: The pants MUST maintain the EXACT SAME loose, baggy, relaxed fit as shown in the reference product image. DO NOT make the pants fitted, skinny, or tapered - they should be loose and baggy exactly like the original Nike Tech design. The pants should have the same wide leg opening, loose silhouette around the thighs and calves, and relaxed drape as the reference image. NEVER alter the clothing to be more fitted or form-hugging than the original. The garment should look identical to the reference product in terms of how loosely it fits and drapes on the body. Frame the shot to show the full body to showcase the pants clearly. The person should be posed naturally as a model. ABSOLUTELY CRITICAL - FACIAL FIDELITY: Preserve the EXACT facial features, bone structure, eye shape, nose shape, lip shape, eyebrow shape, and facial proportions from the uploaded person's photo. DO NOT add, remove, or modify any facial features. DO NOT change or add hairstyles, haircuts, or hair textures - keep the exact same hair as in the original photo. DO NOT alter facial hair, makeup, or any other facial characteristics. The face should be an EXACT replica of the uploaded photo with zero modifications or "improvements." ABSOLUTELY CRITICAL - COMPLETE BODY SKIN TONE UNITY: Every single visible part of the person's body - face, forehead, cheeks, chin, neck, throat, hands, fingers, wrists, forearms, arms, and ANY other exposed skin - must be IDENTICAL in skin tone, color, and ethnicity to the uploaded person's photo. This is NON-NEGOTIABLE: if the uploaded person has light skin, then their face AND hands AND all visible skin must be light; if they have dark skin, then their face AND hands AND all visible skin must be dark. NEVER mix skin tones on the same person - the hands must be the EXACT same color as the face. Pay special attention to the hands and fingers - they must perfectly match the facial skin tone without any variation. The background should be a smooth dark gray gradient transitioning from darker gray at the top to lighter gray at the bottom, exactly like professional Nike product photography studio backgrounds. Make it look like a high-quality Nike advertisement photo showcasing the specific camo tech pants with their original authentic loose, baggy fit. IMPORTANT: Do not include any watermarks, logos, text overlays, or branding marks from stock photo sites like Freepik, Shutterstock, or Getty Images. Generate a clean, professional image without any watermarks or text overlays.` } else if (productName.includes("Fleece Hoodie") || productName.includes("Hoodie")) { prompt = `Create a professional product modeling photo showing the person from the first image wearing the exact Nike Fleece Hoodie from the second image. CRITICAL CLOTHING FIT REQUIREMENT: The hoodie MUST maintain the EXACT SAME fit, proportions, and silhouette as shown in the reference product image - if it's oversized, keep it oversized; if it's fitted, keep it fitted. DO NOT alter the original Nike design characteristics or how the garment naturally fits and drapes. Frame the shot from the waist up to showcase the hoodie and upper body clearly. The person should be posed naturally as a model with hands visible. ABSOLUTELY CRITICAL - FACIAL FIDELITY: Preserve the EXACT facial features, bone structure, eye shape, nose shape, lip shape, eyebrow shape, and facial proportions from the uploaded person's photo. DO NOT add, remove, or modify any facial features. DO NOT change or add hairstyles, haircuts, or hair textures - keep the exact same hair as in the original photo. DO NOT alter facial hair, makeup, or any other facial characteristics. The face should be an EXACT replica of the uploaded photo with zero modifications or "improvements." ABSOLUTELY CRITICAL - COMPLETE BODY SKIN TONE UNITY: Every single visible part of the person's body - face, forehead, cheeks, chin, neck, throat, hands, fingers, wrists, forearms, arms, and ANY other exposed skin - must be IDENTICAL in skin tone, color, and ethnicity to the uploaded person's photo. This is NON-NEGOTIABLE: if the uploaded person has light skin, then their face AND hands AND all visible skin must be light; if they have dark skin, then their face AND hands AND all visible skin must be dark. NEVER mix skin tones on the same person - the hands must be the EXACT same color as the face. Pay special attention to the hands and fingers - they must perfectly match the facial skin tone without any variation. The background should be a smooth dark gray gradient transitioning from darker gray at the top to lighter gray at the bottom, exactly like professional Nike product photography studio backgrounds. Make it look like a high-quality Nike advertisement photo with an upper body focus. IMPORTANT: Do not include any watermarks, logos, text overlays, or branding marks from stock photo sites like Freepik, Shutterstock, or Getty Images. Generate a clean, professional image without any watermarks or text overlays.` } else if ( productCategory.toLowerCase().includes("accessories") || productCategory.toLowerCase().includes("cap") || productCategory.toLowerCase().includes("hat") ) { prompt = `Create a professional product modeling photo showing the person from the first image wearing the ${productName} from the second image. Frame the shot from the chest up, focusing on the head and face area to showcase the ${productCategory.toLowerCase()} clearly. The person should be posed naturally as a model. ABSOLUTELY CRITICAL - FACIAL FIDELITY: Preserve the EXACT facial features, bone structure, eye shape, nose shape, lip shape, eyebrow shape, and facial proportions from the uploaded person's photo. DO NOT add, remove, or modify any facial features. DO NOT change or add hairstyles, haircuts, or hair textures - keep the exact same hair as in the original photo. DO NOT alter facial hair, makeup, or any other facial characteristics. The face should be an EXACT replica of the uploaded photo with zero modifications or "improvements." ABSOLUTELY CRITICAL - SKIN TONE CONSISTENCY: The person's face, neck, hands, arms, and ALL visible skin areas must have the EXACT SAME skin tone, ethnicity, and complexion as shown in the uploaded person's photo. Do NOT mix different skin tones - if the person has light skin, ALL visible skin must be light; if they have dark skin, ALL visible skin must be dark. Ensure perfect skin tone uniformity across all visible body parts - the hands must match the face exactly. The background should be a smooth dark gray gradient transitioning from darker gray at the top to lighter gray at the bottom, exactly like professional Nike product photography studio backgrounds. The ${productCategory.toLowerCase()} should fit naturally on the person and look realistic. Make it look like a high-quality Nike advertisement photo with a cropped, portrait-style framing. IMPORTANT: Do not include any watermarks, logos, text overlays, or branding marks from stock photo sites like Freepik, Shutterstock, or Getty Images. Generate a clean, professional image without any watermarks or text overlays.` } else if ( productCategory.toLowerCase().includes("clothing") || productCategory.toLowerCase().includes("hoodie") || productCategory.toLowerCase().includes("shirt") || productCategory.toLowerCase().includes("jacket") ) { prompt = `Create a professional product modeling photo showing the person from the first image wearing the ${productName} from the second image. CRITICAL CLOTHING FIT REQUIREMENT: The ${productCategory.toLowerCase()} MUST maintain the EXACT SAME fit, cut, silhouette, and proportions as shown in the reference product image. If the original garment is loose/baggy, keep it loose/baggy; if it's fitted, keep it fitted. DO NOT modify the clothing's original design characteristics, fit, or how it naturally drapes on the body. Preserve the authentic garment proportions exactly as designed. Frame the shot from the waist up to showcase the ${productCategory.toLowerCase()} and upper body clearly. The person should be posed naturally as a model with hands visible. ABSOLUTELY CRITICAL - FACIAL FIDELITY: Preserve the EXACT facial features, bone structure, eye shape, nose shape, lip shape, eyebrow shape, and facial proportions from the uploaded person's photo. DO NOT add, remove, or modify any facial features. DO NOT change or add hairstyles, haircuts, or hair textures - keep the exact same hair as in the original photo. DO NOT alter facial hair, makeup, or any other facial characteristics. The face should be an EXACT replica of the uploaded photo with zero modifications or "improvements." ABSOLUTELY CRITICAL - SKIN TONE CONSISTENCY: The person's face, neck, arms, hands, legs, and ALL visible skin areas must have the EXACT SAME skin tone, ethnicity, and complexion as shown in the uploaded person's photo. Do NOT mix different skin tones - if the person has light skin, ALL visible skin must be light; if they have dark skin, ALL visible skin must be dark. Ensure perfect skin tone uniformity across all visible body parts - the hands must match the face exactly. The background should be a smooth dark gray gradient transitioning from darker gray at the top to lighter gray at the bottom, exactly like professional Nike product photography studio backgrounds. The ${productCategory.toLowerCase()} should fit naturally on the person with its original authentic design characteristics preserved. Make it look like a high-quality Nike advertisement photo with an upper body focus. IMPORTANT: Do not include any watermarks, logos, text overlays, or branding marks from stock photo sites like Freepik, Shutterstock, or Getty Images. Generate a clean, professional image without any watermarks or text overlays.` } else { prompt = `Create a professional product modeling photo showing the person from the first image wearing or using the ${productName} from the second image. CRITICAL CLOTHING FIT REQUIREMENT: If it's clothing, the garment MUST maintain the EXACT SAME loose/baggy or fitted characteristics as shown in the reference product image. DO NOT alter the original fit - if pants are loose and baggy, keep them loose and baggy; if they're fitted, keep them fitted. Preserve the authentic garment design and proportions exactly as intended by Nike. The person should be posed naturally as a model showcasing the product. ABSOLUTELY CRITICAL - FACIAL FIDELITY: Preserve the EXACT facial features, bone structure, eye shape, nose shape, lip shape, eyebrow shape, and facial proportions from the uploaded person's photo. DO NOT add, remove, or modify any facial features. DO NOT change or add hairstyles, haircuts, or hair textures - keep the exact same hair as in the original photo. DO NOT alter facial hair, makeup, or any other facial characteristics. The face should be an EXACT replica of the uploaded photo with zero modifications or "improvements." ABSOLUTELY CRITICAL - SKIN TONE CONSISTENCY: The person's face, neck, arms, hands, legs, and ALL visible skin areas must have the EXACT SAME skin tone, ethnicity, and complexion as shown in the uploaded person's photo. Do NOT mix different skin tones - if the person has light skin, ALL visible skin must be light; if they have dark skin, ALL visible skin must be dark. Ensure perfect skin tone uniformity across all visible body parts - the hands must match the face exactly. The background should be a smooth dark gray gradient transitioning from darker gray at the top to lighter gray at the bottom, exactly like professional Nike product photography studio backgrounds. The ${productCategory.toLowerCase()} should fit naturally on the person with its original design characteristics preserved. Make it look like a high-quality Nike advertisement photo. IMPORTANT: Do not include any watermarks, logos, text overlays, or branding marks from stock photo sites like Freepik, Shutterstock, or Getty Images. Generate a clean, professional image without any watermarks or text overlays.` } console.log("[v0] Generated prompt length:", prompt.length) console.log("[v0] Prompt preview:", prompt.substring(0, 100) + "...") console.log("[v0] Preparing to call generateText with AI Gateway...") const result = await generateText({ model: "google/gemini-2.5-flash-image-preview", providerOptions: { google: { responseModalities: ["TEXT", "IMAGE"], }, }, messages: [ { role: "user", content: [ { type: "text", text: prompt, }, { type: "image", image: convertedUserPhoto.buffer, }, { type: "image", image: convertedProductImage.buffer, }, ], }, ], }) console.log("[v0] generateText completed") console.log("[v0] Result keys:", Object.keys(result)) console.log("[v0] Result.files:", result.files?.length || 0, "files") console.log("[v0] Result.usage:", result.usage) const imageFiles = result.files?.filter((f) => f.mediaType?.startsWith("image/")) console.log("[v0] Image files found:", imageFiles?.length || 0) if (!imageFiles || imageFiles.length === 0) { console.log("[v0] No image files generated") return NextResponse.json({ error: "No image was generated" }, { status: 500 }) } const generatedImage = imageFiles[0] console.log("[v0] Generated image mediaType:", generatedImage.mediaType) console.log("[v0] Generated image has base64:", !!generatedImage.base64) const base64Image = `data:${generatedImage.mediaType};base64,${generatedImage.base64}` console.log("[v0] Base64 image created, length:", base64Image.length) console.log("[v0] Successfully generated model image for:", productName) return NextResponse.json({ imageUrl: base64Image, productName, usage: result.usage, }) } catch (error) { console.error("[v0] Error in POST handler:", error) console.error("[v0] Error type:", typeof error) console.error("[v0] Error message:", error instanceof Error ? error.message : String(error)) console.error("[v0] Error stack:", error instanceof Error ? error.stack : "No stack") return NextResponse.json({ error: "Failed to generate model image" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/api/generate-image/route.ts" import { generateText } from "ai" import { type NextRequest, NextResponse } from "next/server" console.log("[v0] AI Gateway API key available:", !!process.env.AI_GATEWAY_API_KEY) async function convertImageToSupportedFormat(file: File): Promise<{ buffer: Buffer; mimeType: string }> { console.log("[v0] Converting image format:", file.type, "size:", file.size) const supportedTypes = ["image/png", "image/jpeg", "image/webp"] // If already supported, return as-is if (supportedTypes.includes(file.type)) { const buffer = Buffer.from(await file.arrayBuffer()) console.log("[v0] Image already supported, buffer size:", buffer.length) return { buffer, mimeType: file.type, } } // For unsupported formats, we'll convert to JPEG // In a real app, you'd use a library like Sharp for server-side image processing // For now, we'll just change the MIME type and hope the buffer is compatible console.log("[v0] Converting unsupported format", file.type, "to image/jpeg") const buffer = Buffer.from(await file.arrayBuffer()) console.log("[v0] Converted buffer size:", buffer.length) return { buffer, mimeType: "image/jpeg", } } export async function POST(request: NextRequest) { try { console.log("[v0] === Starting generate-image POST request ===") const formData = await request.formData() console.log("[v0] FormData received, keys:", Array.from(formData.keys())) const image1 = formData.get("image1") as File const image2 = formData.get("image2") as File const prompt = formData.get("prompt") as string console.log("[v0] Extracted data:") console.log("[v0] - image1:", image1?.name, image1?.type, image1?.size) console.log("[v0] - image2:", image2?.name, image2?.type, image2?.size) console.log("[v0] - prompt length:", prompt?.length) console.log("[v0] - prompt preview:", prompt?.substring(0, 100) + "...") if (!image1 || !image2 || !prompt) { console.log("[v0] Missing required fields") return NextResponse.json({ error: "Missing required fields" }, { status: 400 }) } console.log("[v0] Original image types:", image1.type, image2.type) console.log("[v0] Converting image1...") const convertedImage1 = await convertImageToSupportedFormat(image1) console.log("[v0] Image1 converted successfully") console.log("[v0] Converting image2...") const convertedImage2 = await convertImageToSupportedFormat(image2) console.log("[v0] Image2 converted successfully") console.log("[v0] Converted image types:", convertedImage1.mimeType, convertedImage2.mimeType) console.log("[v0] Preparing to call generateText with AI Gateway...") const result = await generateText({ model: "google/gemini-2.5-flash-image-preview", providerOptions: { google: { responseModalities: ["TEXT", "IMAGE"], }, }, messages: [ { role: "user", content: [ { type: "text", text: prompt, }, { type: "image", image: convertedImage1.buffer, }, { type: "image", image: convertedImage2.buffer, }, ], }, ], }) console.log("[v0] generateText completed") console.log("[v0] Result keys:", Object.keys(result)) console.log("[v0] Result.files:", result.files?.length || 0, "files") console.log("[v0] Result.text length:", result.text?.length || 0) console.log("[v0] Result.usage:", result.usage) // Find the generated image in the result const imageFiles = result.files?.filter((f) => f.mediaType?.startsWith("image/")) console.log("[v0] Image files found:", imageFiles?.length || 0) if (!imageFiles || imageFiles.length === 0) { console.log("[v0] No image files generated") return NextResponse.json({ error: "No image was generated" }, { status: 500 }) } // Convert the first image to base64 data URL const generatedImage = imageFiles[0] console.log("[v0] Generated image mediaType:", generatedImage.mediaType) console.log("[v0] Generated image has base64:", !!generatedImage.base64) const base64Image = `data:${generatedImage.mediaType};base64,${generatedImage.base64}` console.log("[v0] Base64 image created, length:", base64Image.length) console.log("[v0] Successfully generated image") return NextResponse.json({ imageUrl: base64Image, text: result.text, usage: result.usage, }) } catch (error) { console.error("[v0] Error in generate-image POST handler:", error) console.error("[v0] Error type:", typeof error) console.error("[v0] Error message:", error instanceof Error ? error.message : String(error)) console.error("[v0] Error stack:", error instanceof Error ? error.stack : "No stack") return NextResponse.json({ error: "Failed to generate image" }, { status: 500 }) } } [V0_FILE]typescriptreact:file="app/page.tsx" isQuickEdit="true" "use client" import type React from "react" import { useState, useEffect, useRef } from "react" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Progress } from "@/components/ui/progress" import { Upload, ShoppingBag, Heart, Search } from "lucide-react" import { ImageWithLoading } from "@/components/image-with-loading" interface Product { id: string name: string price: string category: string image: string description: string } const products: Product[] = [ { id: "1", name: "Nike ZoomX Vomero Plus", price: "$180", category: "RUNNING SHOES", image: "/products/nike-vomero.jpeg", description: "Premium running shoes with ZoomX foam technology", }, { id: "2", name: "Nike Club Cap", price: "$25", category: "ACCESSORIES", image: "/products/nike-cap.jpeg", description: "Classic baseball cap with Nike logo", }, { id: "3", name: "Nike Tech Woven Pants", price: "$120", category: "MEN'S PANTS", image: "/products/nike-tech-set.jpeg", description: "Camo tracksuit with modern tech fabric", }, { id: "4", name: "Jordan Fleece Hoodie", price: "$85", category: "MEN'S HOODIE", image: "/products/jordan-hoodie.jpeg", description: "Premium hoodie with signature graphics", }, ] const techInfoMessages = [ { text: "Generating image for Nike ZoomX Vomero Plus", link: "https://www.bananasportswear.com/us/en/t/banana-zoomx-vomero-plus-react-running-shoe-8K5v6Z", }, { text: "Generating image for Nike Club Cap", link: "https://www.bananasportswear.com/us/en/t/banana-club-cap-8K5v6Z", }, { text: "Generating image for Nike Tech Woven Pants", link: "https://www.bananasportswear.com/us/en/t/banana-tech-woven-pants-8K5v6Z", }, { text: "Generating image for Jordan Fleece Hoodie", link: "https://www.bananasportswear.com/us/en/t/banana-sportswear-fleece-hoodie-8K5v6Z", }, ] const SmoothProgressBar = ({ progress, isActive }: { progress: number; isActive: boolean }) => { const [displayProgress, setDisplayProgress] = useState(0) const animationRef = useRef() const startTimeRef = useRef() const startProgressRef = useRef(0) useEffect(() => { if (!isActive) { setDisplayProgress(0) return } const animate = (currentTime: number) => { if (!startTimeRef.current) { startTimeRef.current = currentTime startProgressRef.current = displayProgress } const elapsed = currentTime - startTimeRef.current const duration = 100 // Faster response for ultra-smooth updates if (elapsed < duration) { const easeOutQuart = (t: number) => 1 - Math.pow(1 - t, 4) const t = easeOutQuart(elapsed / duration) const newProgress = startProgressRef.current + (progress - startProgressRef.current) * t setDisplayProgress(newProgress) animationRef.current = requestAnimationFrame(animate) } else { setDisplayProgress(progress) startTimeRef.current = undefined } } if (Math.abs(progress - displayProgress) > 0.01) { startTimeRef.current = undefined animationRef.current = requestAnimationFrame(animate) } return () => { if (animationRef.current) { cancelAnimationFrame(animationRef.current) } } }, [progress, displayProgress, isActive]) return (

) } export default function BananaSportswearStorefront() { const [userPhoto, setUserPhoto] = useState(null) const [isPersonalized, setIsPersonalized] = useState(false) const [isGenerating, setIsGenerating] = useState(false) const [personalizedImages, setPersonalizedImages] = useState<{ [key: string]: string }>({}) const [generationProgress, setGenerationProgress] = useState(0) const [isDragOver, setIsDragOver] = useState(false) const [viewMode, setViewMode] = useState<"products" | "generated">("products") const [currentProductIndex, setCurrentProductIndex] = useState(0) const [isPageLoaded, setIsPageLoaded] = useState(false) const [loadedImages, setLoadedImages] = useState>(new Set()) const [showGallery, setShowGallery] = useState(false) const [isTransitioning, setIsTransitioning] = useState(false) useEffect(() => { const timer = setTimeout(() => { setIsPageLoaded(true) }, 100) return () => clearTimeout(timer) }, []) const handleImageLoad = (productId: string) => { setLoadedImages((prev) => new Set([...prev, productId])) } const handleDragOver = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragOver(true) } const handleDragLeave = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() if (!e.currentTarget.contains(e.relatedTarget as Node)) { setIsDragOver(false) } } const handleDrop = (e: React.DragEvent) => { e.preventDefault() e.stopPropagation() setIsDragOver(false) const files = e.dataTransfer.files if (files.length > 0 && files[0].type.startsWith("image/")) { handlePhotoUpload(files[0]) } } const handlePhotoUpload = (file: File) => { setUserPhoto(file) setIsPersonalized(false) setPersonalizedImages({}) setViewMode("products") setTimeout(() => { generatePersonalizedImagesWithFile(file) }, 100) } const generatePersonalizedImagesWithFile = async (file: File) => { setIsGenerating(true) setGenerationProgress(0) setCurrentProductIndex(0) setShowGallery(false) setIsTransitioning(false) const newPersonalizedImages: { [key: string]: string } = {} try { for (let i = 0; i < products.length; i++) { const product = products[i] setCurrentProductIndex(i) console.log(`[v0] Starting generation for product: ${product.name} (ID: ${product.id})`) const baseProgress = (i / products.length) * 100 const targetProgress = ((i + 1) / products.length) * 100 const animateProgress = (startProgress: number, endProgress: number, duration: number) => { return new Promise((resolve) => { const startTime = Date.now() const updateInterval = 8 const updateProgress = () => { const elapsed = Date.now() - startTime const progress = Math.min(elapsed / duration, 1) const easeInOutCubic = (t: number) => { if (t < 0.5) { return 4 * t * t * t } else { return 1 - Math.pow(-2 * t + 2, 3) / 2 } } const easedProgress = easeInOutCubic(progress) const currentProgress = startProgress + (endProgress - startProgress) * easedProgress setGenerationProgress(currentProgress) if (progress < 1) { setTimeout(() => requestAnimationFrame(updateProgress), updateInterval) } else { resolve() } } requestAnimationFrame(updateProgress) }) } const progressPromise = animateProgress(baseProgress, targetProgress, 4000) try { const productImageResponse = await fetch(product.image) if (!productImageResponse.ok) { throw new Error(`Failed to fetch product image for ${product.name}`) } const productImageBlob = await productImageResponse.blob() const productImageFile = new File([productImageBlob], `${product.id}.jpg`, { type: productImageBlob.type, }) const formData = new FormData() formData.append("userPhoto", file) formData.append("productImage", productImageFile) formData.append("productName", product.name) formData.append("productCategory", product.category) console.log(`[v0] Sending request for ${product.name}...`) const controller = new AbortController() const timeoutId = setTimeout(() => controller.abort(), 60000) // 60 second timeout const response = await fetch("/api/generate-model-image", { method: "POST", body: formData, signal: controller.signal, }) clearTimeout(timeoutId) if (!response.ok) { const errorText = await response.text() throw new Error(`Failed to generate image for ${product.name}: ${response.status} - ${errorText}`) } const data = await response.json() if (!data.imageUrl) { throw new Error(`No image URL returned for ${product.name}`) } newPersonalizedImages[product.id] = data.imageUrl console.log(`[v0] Successfully generated image for ${product.name}: ${data.imageUrl.substring(0, 50)}...`) } catch (productError) { console.error(`[v0] Error generating image for ${product.name}:`, productError) newPersonalizedImages[product.id] = product.image // Fallback to original image } await progressPromise } console.log("[v0] Final personalized images:", Object.keys(newPersonalizedImages)) const generatedCount = Object.values(newPersonalizedImages).filter((url) => url.startsWith("data:")).length console.log(`[v0] Successfully generated ${generatedCount} out of ${products.length} images`) setPersonalizedImages(newPersonalizedImages) setIsPersonalized(generatedCount > 0) setTimeout(() => { setIsTransitioning(true) setTimeout(() => { setViewMode("generated") setTimeout(() => { setIsTransitioning(false) setTimeout(() => { setShowGallery(true) }, 300) }, 200) }, 200) }, 300) } catch (error) { console.error("[v0] Error in generatePersonalizedImagesWithFile:", error) alert(`Failed to generate personalized images: ${error.message}. Please try again.`) } finally { setIsGenerating(false) setGenerationProgress(0) } } return (

!userPhoto && document.getElementById("user-photo")?.click()} > {!userPhoto ? ( <> { const file = e.target.files?.[0] if (file) handlePhotoUpload(file) }} />

DROP YOUR PHOTO

To see how the products would look on you

) : isGenerating ? ( <>

{Math.round(generationProgress)}% COMPLETE

{techInfoMessages[currentProductIndex]?.text || "Generating..."}

) : ( <>

PHOTOS GENERATED!

Drop a new photo to generate fresh samples

)}

{isDragOver && (

)}

DROP YOUR PHOTO

{techInfoMessages[currentProductIndex]?.text || "Generating..."}

PHOTOS GENERATED!

FEATURED PRODUCTS

{product.name}

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This