made changes to the code

.claude/settings.local.json

@@ -15,7 +15,8 @@
       "Read(//Users/reubenfernandes/Desktop/**)",
       "mcp__puppeteer__puppeteer_click",
       "mcp__browser-tools__getConsoleErrors",
-      "mcp__sequential-thinking__sequentialthinking"
+      "mcp__sequential-thinking__sequentialthinking",
+      "WebFetch(domain:developers.googleblog.com)"
     ],
     "deny": [],
     "ask": []

app/api/process/route.ts

@@ -267,21 +267,169 @@ The result should look like all subjects were photographed together in the same
     const prompts: string[] = [];
     const params = body.params || {};
 
+    // Debug: Log all received parameters
+    console.log(`[API] All received parameters:`, JSON.stringify(params, null, 2));
+
     // We'll collect additional inline image parts (references)
     const referenceParts: { inlineData: { mimeType: string; data: string } }[] = [];
+    let imageCounter = 2; // Start at 2 since image 1 is the primary input
     
     // Background modifications
     if (params.backgroundType) {
       const bgType = params.backgroundType;
+      console.log(`[API] Processing background: type=${bgType}`);
+      
       if (bgType === "color") {
-        prompts.push(`Change the background to a solid ${params.backgroundColor || "white"} background.`);
+        prompts.push(`Change the background to a solid ${params.backgroundColor || "white"} background with smooth, even color coverage.`);
+        
+      } else if (bgType === "gradient") {
+        const direction = params.gradientDirection || "to right";
+        const startColor = params.gradientStartColor || "#ff6b6b";
+        const endColor = params.gradientEndColor || "#4ecdc4";
+        
+        if (direction === "radial") {
+          prompts.push(`Replace the background with a radial gradient that starts with ${startColor} in the center and transitions smoothly to ${endColor} at the edges, creating a circular gradient effect.`);
+        } else {
+          prompts.push(`Replace the background with a linear gradient flowing ${direction}, starting with ${startColor} and smoothly transitioning to ${endColor}.`);
+        }
+        
       } else if (bgType === "image") {
         prompts.push(`Change the background to ${params.backgroundImage || "a beautiful beach scene"}.`);
+        
+      } else if (bgType === "city") {
+        const sceneType = params.citySceneType || "busy_street";
+        const timeOfDay = params.cityTimeOfDay || "daytime";
+        
+        let cityDescription = "";
+        
+        switch (sceneType) {
+          case "busy_street":
+            cityDescription = "a realistic busy city street with people walking at various distances around the main character. Include pedestrians in business attire, casual clothing, carrying bags and phones - some walking close by (appearing similar size to main character), others further in the background (appearing smaller due to distance). Show urban storefronts, traffic lights, street signs, and parked cars with authentic city atmosphere and proper depth perception";
+            break;
+          case "tokyo_shibuya":
+            cityDescription = "the iconic Tokyo Shibuya Crossing with people walking at various distances around the main character. Include people close by (similar scale to main character) and others further away (smaller due to distance), Japanese signage, neon advertisements, the famous scramble crossing zebra stripes, people in typical Tokyo fashion, some wearing masks, carrying colorful umbrellas. Show the massive LED screens, buildings towering above, and create proper depth with people at different distances creating natural perspective";
+            break;
+          case "tokyo_subway":
+            cityDescription = "a realistic Tokyo subway environment with commuters at various distances from the main character. Include people nearby (similar scale) and others further down corridors (smaller due to perspective), authentic Japanese subway tile walls, directional signage in Japanese, the distinctive Tokyo Metro design aesthetic, and proper depth showing the underground transit system's scale and architecture";
+            break;
+          case "times_square":
+            cityDescription = "Times Square NYC with bright LED billboards, street performers, tourists, and New Yorkers walking closely around the main character. Include authentic yellow taxi cabs, hot dog vendors, people taking selfies, Broadway theater marquees, the famous red steps, TKTS booth, and the overwhelming sensory experience of NYC's most famous intersection";
+            break;
+          case "downtown_skyline":
+            cityDescription = "a downtown city skyline with tall buildings, glass towers, and urban architecture in the background while people in business attire walk nearby on the sidewalk";
+            break;
+          case "urban_crosswalk":
+            cityDescription = "an urban crosswalk intersection with pedestrians of diverse backgrounds crossing around the main character, traffic lights, crosswalk signals, city buses, and the natural flow of city foot traffic";
+            break;
+          case "shopping_district":
+            cityDescription = "a bustling shopping district with people carrying shopping bags walking near the main character, storefront window displays, outdoor cafes, street vendors, and the lively atmosphere of commercial city life";
+            break;
+          case "city_park":
+            cityDescription = "a city park with people jogging, walking dogs, and families enjoying activities around the main character, with urban skyscrapers visible in the background through the trees";
+            break;
+          case "rooftop_view":
+            cityDescription = "a rooftop terrace with people socializing around the main character, overlooking a sprawling city skyline with twinkling lights and urban architecture stretching to the horizon";
+            break;
+          case "blade_runner_street":
+            cityDescription = "a cinematic Blade Runner-inspired street scene with neon-soaked alleyways, people in futuristic clothing walking through steam and rain around the main character. Include holographic advertisements, flying vehicles in the distance, Asian-influenced signage, dark atmospheric lighting with cyan and magenta neon reflections on wet pavement, and the dystopian cyberpunk aesthetic of the iconic film";
+            break;
+          case "matrix_alley":
+            cityDescription = "a Matrix-inspired urban alley with people in dark clothing and sunglasses walking purposefully around the main character. Include the distinctive green-tinted lighting, concrete brutalist architecture, fire escapes, urban decay, shadowy doorways, and the cold, digital atmosphere of the Matrix films with realistic but slightly stylized cinematography";
+            break;
+          default:
+            cityDescription = "a dynamic city environment with people walking naturally around the main character in an authentic urban setting";
+        }
+        
+        let timeDescription = "";
+        switch (timeOfDay) {
+          case "golden_hour":
+            timeDescription = " during golden hour with warm, glowing sunlight";
+            break;
+          case "daytime":
+            timeDescription = " during bright daytime with clear lighting";
+            break;
+          case "blue_hour":
+            timeDescription = " during blue hour with twilight atmosphere";
+            break;
+          case "night":
+            timeDescription = " at night with city lights, illuminated windows, and neon glow";
+            break;
+          case "dawn":
+            timeDescription = " at dawn with soft morning light";
+            break;
+          case "overcast":
+            timeDescription = " on an overcast day with diffused lighting";
+            break;
+          default:
+            timeDescription = "";
+        }
+        
+        prompts.push(`Replace the background with ${cityDescription}${timeDescription}. CRITICAL SCALE REQUIREMENTS: Keep the main character at their EXACT original size and position - do NOT make them smaller or change their scale. The background people should be appropriately sized relative to their distance from the camera, with people closer to the camera appearing larger and people further away appearing smaller, but the main character must maintain their original proportions. Ensure the main character appears naturally integrated into the scene with proper lighting, shadows, and perspective that matches the environment.`);
+        
+      } else if (bgType === "photostudio") {
+        const setup = params.studioSetup || "white_seamless";
+        const lighting = params.studioLighting || "key_fill";
+        const faceCamera = params.faceCamera || false;
+        
+        let setupDescription = "";
+        switch (setup) {
+          case "white_seamless":
+            setupDescription = "a professional white seamless paper backdrop";
+            break;
+          case "black_seamless":
+            setupDescription = "a professional black seamless paper backdrop";
+            break;
+          case "grey_seamless":
+            setupDescription = "a professional grey seamless paper backdrop";
+            break;
+          case "colored_seamless":
+            const bgColor = params.studioBackgroundColor || "#ffffff";
+            setupDescription = `a professional seamless paper backdrop in ${bgColor}`;
+            break;
+          case "textured_backdrop":
+            setupDescription = "a professional textured photography backdrop";
+            break;
+          case "infinity_cove":
+            setupDescription = "a professional infinity cove studio setup with curved backdrop";
+            break;
+          default:
+            setupDescription = "a professional studio backdrop";
+        }
+        
+        let lightingDescription = "";
+        switch (lighting) {
+          case "key_fill":
+            lightingDescription = "key and fill lighting for balanced illumination";
+            break;
+          case "three_point":
+            lightingDescription = "three-point lighting with key, fill, and rim lights";
+            break;
+          case "beauty_lighting":
+            lightingDescription = "beauty lighting setup with soft, flattering illumination";
+            break;
+          case "dramatic_lighting":
+            lightingDescription = "dramatic single-light setup with strong shadows";
+            break;
+          case "soft_lighting":
+            lightingDescription = "soft, diffused lighting for gentle illumination";
+            break;
+          case "hard_lighting":
+            lightingDescription = "hard, directional lighting for sharp shadows and contrast";
+            break;
+          default:
+            lightingDescription = "professional studio lighting";
+        }
+        
+        let positioningInstruction = faceCamera ? " Position the person to face directly toward the camera with confident posture." : "";
+        
+        prompts.push(`Place the person in a professional photo studio with ${setupDescription} and ${lightingDescription}. Create a clean, professional portrait setup with proper studio atmosphere.${positioningInstruction}`);
+        
       } else if (bgType === "upload" && params.customBackgroundImage) {
         prompts.push(`Replace the background using the provided custom background reference image (attached below). Ensure perspective and lighting match.`);
         const bgRef = await toInlineDataFromAny(params.customBackgroundImage);
         if (bgRef) referenceParts.push({ inlineData: bgRef });
-      } else if (params.customPrompt) {
+        
+      } else if (bgType === "custom" && params.customPrompt) {
         prompts.push(params.customPrompt);
       }
     }
@@ -313,10 +461,11 @@ The result should look like all subjects were photographed together in the same
     
     // Style application
     if (params.stylePreset) {
+      console.log(`[API] Processing style node: stylePreset=${params.stylePreset}, styleStrength=${params.styleStrength}`);
       const strength = params.styleStrength || 50;
       const styleMap: { [key: string]: string } = {
         "90s-anime": "Convert the image to 90's anime art style with classic anime features",
-        "Gibhli": "Apply Studio Ghibli style with vibrant colors, detailed character design, and fantasy elements typical of Studio Ghibli movies",
+        "Ghibli": "Apply Studio Ghibli style with vibrant colors, detailed character design, and fantasy elements typical of Studio Ghibli movies",
         "mha": "Transform the image into My Hero Academia anime style with modern crisp lines, vibrant colors, dynamic character design, and heroic aesthetics typical of the series",
         "dbz": "Apply Dragon Ball Z anime style with sharp angular features, spiky hair, intense expressions, bold outlines, high contrast shading, and dramatic action-oriented aesthetics",
         "ukiyo-e": "Render in traditional Japanese Ukiyo-e woodblock print style with flat colors, bold outlines, stylized waves and clouds, traditional Japanese artistic elements",
@@ -333,7 +482,11 @@ The result should look like all subjects were photographed together in the same
       
       const styleDescription = styleMap[params.stylePreset];
       if (styleDescription) {
+        console.log(`[API] Style found: ${params.stylePreset} -> ${styleDescription}`);
         prompts.push(`${styleDescription}. Apply this style transformation at ${strength}% intensity while preserving the core subject matter.`);
+      } else {
+        console.error(`[API] Style not found in styleMap: ${params.stylePreset}`);
+        console.log(`[API] Available styles:`, Object.keys(styleMap));
       }
     }
     
@@ -342,28 +495,135 @@ The result should look like all subjects were photographed together in the same
       prompts.push(params.editPrompt);
     }
     
-    // Camera settings
+    // Camera settings - Enhanced for Gemini 2.5 Flash Image
     if (params.focalLength || params.aperture || params.shutterSpeed || params.whiteBalance || params.angle || 
-        params.iso || params.filmStyle || params.lighting || params.bokeh || params.composition) {
+        params.iso || params.filmStyle || params.lighting || params.bokeh || params.composition || params.motionBlur) {
       const cameraSettings: string[] = [];
+      
+      // Build cinematic camera prompt for professional, movie-like results
+      let cameraPrompt = "CINEMATIC CAMERA TRANSFORMATION: Transform this image into a professional, cinematic photograph with movie-quality production values";
+      
       if (params.focalLength) {
         if (params.focalLength === "8mm") {
-          cameraSettings.push("Apply 8mm fisheye lens effect with 180-degree circular distortion");
+          cameraPrompt += " shot with an ultra-wide 8mm fisheye lens creating dramatic barrel distortion, immersive perspective, and cinematic edge curvature typical of action sequences";
+        } else if (params.focalLength === "14mm") {
+          cameraPrompt += " captured with a 14mm ultra-wide angle lens for sweeping cinematic vistas and dramatic environmental context";
+        } else if (params.focalLength === "24mm") {
+          cameraPrompt += " shot with a 24mm wide-angle cinema lens for establishing shots with expansive field of view and slight perspective enhancement";
+        } else if (params.focalLength === "35mm") {
+          cameraPrompt += " filmed with a 35mm lens providing natural cinematic perspective, the gold standard for narrative storytelling";
+        } else if (params.focalLength === "50mm") {
+          cameraPrompt += " captured with a 50mm cinema lens for authentic human vision perspective and natural depth rendering";
+        } else if (params.focalLength === "85mm") {
+          cameraPrompt += " shot with an 85mm portrait cinema lens for intimate character close-ups with beautiful subject isolation and compressed backgrounds";
+        } else if (params.focalLength === "100mm") {
+          cameraPrompt += " filmed with a 100mm telephoto lens for dramatic compression and cinematic subject isolation";
+        } else if (params.focalLength === "135mm") {
+          cameraPrompt += " captured with a 135mm telephoto cinema lens for extreme compression and dreamlike background separation";
+        } else {
+          cameraPrompt += ` shot with professional ${params.focalLength} cinema glass`;
+        }
+      }
+      
+      if (params.aperture) {
+        if (params.aperture === "f/1.2") {
+          cameraPrompt += `, shot wide open at f/1.2 for extreme shallow depth of field, ethereal bokeh, and cinematic subject isolation with dreamy background blur`;
+        } else if (params.aperture === "f/1.4") {
+          cameraPrompt += `, captured at f/1.4 for beautiful shallow depth of field, creating that signature cinematic look with smooth background separation`;
+        } else if (params.aperture === "f/2.8") {
+          cameraPrompt += `, shot at f/2.8 for controlled depth of field, maintaining subject sharpness while creating pleasing background blur`;
+        } else if (params.aperture === "f/4") {
+          cameraPrompt += `, filmed at f/4 for balanced depth of field, keeping key subjects sharp while maintaining some background separation`;
+        } else if (params.aperture === "f/5.6") {
+          cameraPrompt += `, captured at f/5.6 for extended depth of field while maintaining cinematic quality and professional sharpness`;
+        } else if (params.aperture === "f/8" || params.aperture === "f/11") {
+          cameraPrompt += `, shot at ${params.aperture} for deep focus cinematography with tack-sharp details throughout the entire frame`;
+        } else {
+          cameraPrompt += `, professionally exposed at ${params.aperture}`;
+        }
+      }
+      
+      if (params.iso) {
+        if (params.iso === "ISO 100") {
+          cameraPrompt += ", shot at ISO 100 for pristine image quality, zero noise, and maximum dynamic range typical of high-end cinema cameras";
+        } else if (params.iso === "ISO 200") {
+          cameraPrompt += ", captured at ISO 200 for clean shadows and optimal color reproduction with professional cinema camera characteristics";
+        } else if (params.iso === "ISO 400") {
+          cameraPrompt += ", filmed at ISO 400 for balanced exposure with minimal noise, the sweet spot for most cinematic scenarios";
+        } else if (params.iso === "ISO 800") {
+          cameraPrompt += ", shot at ISO 800 creating subtle film grain texture that adds cinematic character and organic feel";
+        } else if (params.iso === "ISO 1600") {
+          cameraPrompt += ", captured at ISO 1600 with controlled grain for dramatic low-light cinematography and moody atmosphere";
+        } else if (params.iso === "ISO 3200") {
+          cameraPrompt += ", filmed at ISO 3200 with artistic grain structure for gritty, realistic cinema aesthetics";
+        } else {
+          cameraPrompt += `, shot at ${params.iso} with appropriate noise characteristics`;
+        }
+      }
+      
+      if (params.lighting) {
+        if (params.lighting === "Golden Hour") {
+          cameraPrompt += ", cinematically lit during golden hour with warm, directional sunlight creating magical rim lighting, long shadows, and that coveted cinematic glow";
+        } else if (params.lighting === "Blue Hour") {
+          cameraPrompt += ", captured during blue hour with soft, even twilight illumination and cool color temperature for moody cinematic atmosphere";
+        } else if (params.lighting === "Studio") {
+          cameraPrompt += ", professionally lit with multi-point studio lighting setup featuring key light, fill light, and rim light for commercial cinema quality";
+        } else if (params.lighting === "Natural") {
+          cameraPrompt += ", naturally lit with soft, diffused daylight providing even illumination and organic shadow patterns";
+        } else if (params.lighting === "Dramatic") {
+          cameraPrompt += ", dramatically lit with high-contrast lighting creating strong shadows and highlights for cinematic tension";
+        } else {
+          cameraPrompt += `, professionally lit with ${params.lighting} lighting setup`;
+        }
+      }
+      
+      if (params.bokeh) {
+        if (params.bokeh === "Smooth Bokeh") {
+          cameraPrompt += ", featuring silky smooth bokeh with perfectly circular out-of-focus highlights and creamy background transitions";
+        } else if (params.bokeh === "Swirly Bokeh") {
+          cameraPrompt += ", featuring artistic swirly bokeh with spiral-like background blur patterns for unique visual character";
+        } else if (params.bokeh === "Hexagonal Bokeh") {
+          cameraPrompt += ", featuring hexagonal bokeh with geometric six-sided highlight shapes typical of cinema lenses";
+        } else {
+          cameraPrompt += `, featuring ${params.bokeh} quality bokeh rendering in out-of-focus areas`;
+        }
+      }
+      
+      if (params.motionBlur) {
+        if (params.motionBlur === "Light Motion Blur") {
+          cameraPrompt += ", with subtle motion blur suggesting gentle movement and adding cinematic flow to the image";
+        } else if (params.motionBlur === "Medium Motion Blur") {
+          cameraPrompt += ", with moderate motion blur creating dynamic energy and sense of movement typical of action cinematography";
+        } else if (params.motionBlur === "Heavy Motion Blur") {
+          cameraPrompt += ", with pronounced motion blur creating dramatic movement streaks and high-energy cinematic action";
+        } else if (params.motionBlur === "Radial Blur") {
+          cameraPrompt += ", with radial motion blur emanating from the center, creating explosive zoom-like movement and dramatic focus pull";
+        } else if (params.motionBlur === "Zoom Blur") {
+          cameraPrompt += ", with zoom blur effect creating dramatic speed lines and kinetic energy radiating outward from the subject";
+        } else {
+          cameraPrompt += `, with ${params.motionBlur} motion effect`;
+        }
+      }
+      
+      if (params.angle) {
+        if (params.angle === "Low Angle") {
+          cameraPrompt += ", shot from a low-angle perspective looking upward for dramatic impact";
+        } else if (params.angle === "Bird's Eye") {
+          cameraPrompt += ", captured from a bird's eye view directly overhead";
         } else {
-          cameraSettings.push(`Focal Length: ${params.focalLength}`);
+          cameraPrompt += `, ${params.angle} camera angle`;
         }
       }
-      if (params.aperture) cameraSettings.push(`Aperture: ${params.aperture}`);
-      if (params.shutterSpeed) cameraSettings.push(`Shutter Speed: ${params.shutterSpeed}`);
-      if (params.whiteBalance) cameraSettings.push(`White Balance: ${params.whiteBalance}`);
-      if (params.angle) cameraSettings.push(`Camera Angle: ${params.angle}`);
-      if (params.iso) cameraSettings.push(`${params.iso}`);
-      if (params.lighting) cameraSettings.push(`Lighting: ${params.lighting}`);
-      if (params.bokeh) cameraSettings.push(`Bokeh effect: ${params.bokeh}`);
-      if (params.filmStyle == "RAW") cameraSettings.push(`Convert the image to RAW image`); else cameraSettings.push(`Film Style: ${params.filmStyle}`);     
-    if (cameraSettings.length > 0) {
-        prompts.push(`Apply professional photography settings: ${cameraSettings.join(", ")}`);
+      
+      if (params.filmStyle && params.filmStyle !== "RAW") {
+        cameraPrompt += `, processed with ${params.filmStyle} film aesthetic and color grading`;
+      } else if (params.filmStyle === "RAW") {
+        cameraPrompt += ", with natural RAW processing maintaining realistic colors and contrast";
       }
+      
+      cameraPrompt += ". Maintain photorealistic quality with authentic camera characteristics, natural lighting, and professional composition.";
+      
+      prompts.push(cameraPrompt);
     }
     
     // Age transformation
@@ -371,32 +631,16 @@ The result should look like all subjects were photographed together in the same
       prompts.push(`Transform the person to look exactly ${params.targetAge} years old with age-appropriate features.`);
     }
     
-    // Lightning effects
-    if (params.lightingImage && params.selectedLighting) {
-      prompts.push(`Apply ${params.selectedLighting} lighting effect to the person in the image. Adjust the lighting, shadows, and highlights to match the reference lighting style shown in the second image. Maintain the person's appearance, pose, and background`);
-      
-      try {
-        const lightingRef = await toInlineDataFromAny(params.lightingImage);
-        if (lightingRef) {
-          referenceParts.push({ inlineData: lightingRef });
-        }
-      } catch (error) {
-        console.error('[API] Error processing lighting image:', error);
-      }
+    // Lighting effects
+    if (params.lightingPrompt && params.selectedLighting) {
+      console.log(`[API] Processing lighting node: selectedLighting=${params.selectedLighting}, lightingPrompt exists=${!!params.lightingPrompt}`);
+      prompts.push(`IMPORTANT: Completely transform the lighting on this person to match this exact description: ${params.lightingPrompt}. The lighting change should be dramatic and clearly visible. Keep their face, clothes, pose, and background exactly the same, but make the lighting transformation very obvious.`);
     }
     
     // Pose modifications
-    if (params.poseImage && params.selectedPose) {
-      prompts.push(`Change the pose of the person in the first image to match the pose shown in the reference image. Keep the person's facial features, clothing, and overall appearance the same, only modify their body position and pose to match the reference`);
-      
-      try {
-        const poseRef = await toInlineDataFromAny(params.poseImage);
-        if (poseRef) {
-          referenceParts.push({ inlineData: poseRef });
-        }
-      } catch (error) {
-        console.error('[API] Error processing pose image:', error);
-      }
+    if (params.posePrompt && params.selectedPose) {
+      console.log(`[API] Processing pose node: selectedPose=${params.selectedPose}, posePrompt exists=${!!params.posePrompt}`);
+      prompts.push(`IMPORTANT: Completely change the person's body pose to match this exact description: ${params.posePrompt}. The pose change should be dramatic and clearly visible. Keep their face, clothes, and background exactly the same, but make the pose transformation very obvious.`);
     }
     
     // Face modifications
@@ -426,6 +670,13 @@ The result should look like all subjects were photographed together in the same
       prompt = body.prompt + "\n\n" + prompt;
     }
 
+    // Debug: Log the final combined prompt and parts structure
+    console.log(`[API] Final combined prompt: ${prompt}`);
+    console.log(`[API] Total prompts collected: ${prompts.length}`);
+    console.log(`[API] Individual prompts:`, prompts);
+    console.log(`[API] Reference images count: ${referenceParts.length}`);
+    console.log(`[API] Total parts being sent to AI: ${1 + 1 + referenceParts.length} (prompt + input image + ${referenceParts.length} reference images)`);
+
     // Generate with Gemini
     const parts = [
       { text: prompt },
@@ -435,23 +686,83 @@ The result should look like all subjects were photographed together in the same
       ...referenceParts,
     ];
 
-    const response = await ai.models.generateContent({
-      model: "gemini-2.5-flash-image-preview",
-      contents: parts,
-    });
+    console.log(`[API] Sending request to Gemini with ${parts.length} parts (prompt + ${referenceParts.length + 1} images)`);
+    
+    let response;
+    try {
+      response = await ai.models.generateContent({
+        model: "gemini-2.5-flash-image-preview",
+        contents: parts,
+      });
+      console.log('[API] Gemini response received successfully');
+    } catch (geminiError: any) {
+      console.error('[API] Gemini API error:', geminiError);
+      console.error('[API] Gemini error details:', {
+        message: geminiError.message,
+        status: geminiError.status,
+        code: geminiError.code
+      });
+      
+      if (geminiError.message?.includes('safety')) {
+        return NextResponse.json(
+          { error: "Content was blocked by safety filters. Try using different images or prompts." },
+          { status: 400 }
+        );
+      }
+      
+      if (geminiError.message?.includes('quota') || geminiError.message?.includes('limit')) {
+        return NextResponse.json(
+          { error: "API quota exceeded. Please check your Gemini API usage limits." },
+          { status: 429 }
+        );
+      }
+      
+      return NextResponse.json(
+        { error: `Gemini API error: ${geminiError.message || 'Unknown error'}` },
+        { status: 500 }
+      );
+    }
 
+    console.log('[API] Raw Gemini response structure:', JSON.stringify(response, null, 2));
+    
     const outParts = (response as any)?.candidates?.[0]?.content?.parts ?? [];
     const images: string[] = [];
+    const texts: string[] = [];
     
-    for (const p of outParts) {
+    console.log(`[API] Response parts found: ${outParts.length}`);
+    
+    for (let i = 0; i < outParts.length; i++) {
+      const p = outParts[i];
+      console.log(`[API] Part ${i}:`, {
+        hasInlineData: !!p?.inlineData,
+        hasText: !!p?.text,
+        inlineDataType: p?.inlineData?.mimeType,
+        textLength: p?.text?.length
+      });
+      
       if (p?.inlineData?.data) {
         images.push(`data:image/png;base64,${p.inlineData.data}`);
+        console.log(`[API] Found image data, length: ${p.inlineData.data.length}`);
+      }
+      
+      if (p?.text) {
+        texts.push(p.text);
+        console.log(`[API] Found text response: ${p.text.substring(0, 200)}...`);
       }
     }
 
     if (!images.length) {
+      console.error('[API] No images generated by Gemini. Text responses:', texts);
       return NextResponse.json(
-        { error: "No image generated. Try adjusting your parameters." },
+        { 
+          error: "No image generated. Try adjusting your parameters.", 
+          textResponse: texts.join('\n'),
+          debugInfo: {
+            partsCount: outParts.length,
+            candidatesCount: (response as any)?.candidates?.length || 0,
+            hasResponse: !!response
+          }
+        },
         { status: 500 }
       );
     }
@@ -460,15 +771,36 @@ The result should look like all subjects were photographed together in the same
   } catch (err: any) {
     console.error("/api/process error:", err);
     console.error("Error stack:", err?.stack);
+    console.error("Error details:", {
+      name: err?.name,
+      message: err?.message,
+      code: err?.code,
+      status: err?.status,
+      details: err?.details
+    });
     
     // Provide more specific error messages
-    if (err?.message?.includes('payload size')) {
+    if (err?.message?.includes('payload size') || err?.code === 413) {
       return NextResponse.json(
         { error: "Image data too large. Please use smaller images or reduce image quality." },
         { status: 413 }
       );
     }
     
+    if (err?.message?.includes('API key') || err?.message?.includes('authentication')) {
+      return NextResponse.json(
+        { error: "Invalid API key. Please check your Google Gemini API token." },
+        { status: 401 }
+      );
+    }
+    
+    if (err?.message?.includes('quota') || err?.message?.includes('limit')) {
+      return NextResponse.json(
+        { error: "API quota exceeded. Please check your Google Gemini API usage limits." },
+        { status: 429 }
+      );
+    }
+    
     if (err?.message?.includes('JSON')) {
       return NextResponse.json(
         { error: "Invalid data format. Please ensure images are properly encoded." },

app/nodes.tsx

@@ -545,7 +545,10 @@ export function BackgroundNodeView({
           onChange={(e) => onUpdate(node.id, { backgroundType: (e.target as HTMLSelectElement).value })}
         >
           <option value="color">Solid Color</option>
+          <option value="gradient">Gradient Color</option>
           <option value="image">Preset Background</option>
+          <option value="city">City Scene</option>
+          <option value="photostudio">Photo Studio</option>
           <option value="upload">Upload Image</option>
           <option value="custom">Custom Prompt</option>
         </Select>
@@ -558,6 +561,48 @@ export function BackgroundNodeView({
           />
         )}
         
+        {node.backgroundType === "gradient" && (
+          <div className="space-y-3">
+            <label className="text-xs text-white/70">Gradient Direction</label>
+            <Select 
+              className="w-full"
+              value={node.gradientDirection || "to right"}
+              onChange={(e) => onUpdate(node.id, { gradientDirection: (e.target as HTMLSelectElement).value })}
+            >
+              <option value="to right">Left to Right</option>
+              <option value="to left">Right to Left</option>
+              <option value="to bottom">Top to Bottom</option>
+              <option value="to top">Bottom to Top</option>
+              <option value="to bottom right">Diagonal Top-Left to Bottom-Right</option>
+              <option value="to bottom left">Diagonal Top-Right to Bottom-Left</option>
+              <option value="to top right">Diagonal Bottom-Left to Top-Right</option>
+              <option value="to top left">Diagonal Bottom-Right to Top-Left</option>
+              <option value="radial">Radial (Center to Edge)</option>
+            </Select>
+            <label className="text-xs text-white/70">Start Color</label>
+            <ColorPicker
+              className="w-full"
+              value={node.gradientStartColor || "#ff6b6b"}
+              onChange={(e) => onUpdate(node.id, { gradientStartColor: (e.target as HTMLInputElement).value })}
+            />
+            <label className="text-xs text-white/70">End Color</label>
+            <ColorPicker
+              className="w-full"
+              value={node.gradientEndColor || "#4ecdc4"}
+              onChange={(e) => onUpdate(node.id, { gradientEndColor: (e.target as HTMLInputElement).value })}
+            />
+            <div 
+              className="w-full h-8 rounded-md border border-white/20"
+              style={{
+                background: node.gradientDirection === "radial" 
+                  ? `radial-gradient(circle, ${node.gradientStartColor || "#ff6b6b"} 0%, ${node.gradientEndColor || "#4ecdc4"} 100%)`
+                  : `linear-gradient(${node.gradientDirection || "to right"}, ${node.gradientStartColor || "#ff6b6b"} 0%, ${node.gradientEndColor || "#4ecdc4"} 100%)`
+              }}
+              title="Gradient Preview"
+            />
+          </div>
+        )}
+        
         {node.backgroundType === "image" && (
           <Select 
             className="w-full"
@@ -573,6 +618,92 @@ export function BackgroundNodeView({
           </Select>
         )}
         
+        {node.backgroundType === "city" && (
+          <div className="space-y-3">
+            <label className="text-xs text-white/70">City Scene Type</label>
+            <Select 
+              className="w-full"
+              value={node.citySceneType || "busy_street"}
+              onChange={(e) => onUpdate(node.id, { citySceneType: (e.target as HTMLSelectElement).value })}
+            >
+              <option value="busy_street">Busy Street with Close Pedestrians</option>
+              <option value="tokyo_shibuya">Tokyo Shibuya Crossing</option>
+              <option value="tokyo_subway">Tokyo Subway</option>
+              <option value="times_square">Times Square NYC</option>
+              <option value="downtown_skyline">Downtown Skyline</option>
+              <option value="urban_crosswalk">Urban Crosswalk Scene</option>
+              <option value="shopping_district">Shopping District</option>
+              <option value="city_park">City Park</option>
+              <option value="rooftop_view">Rooftop City View</option>
+              <option value="blade_runner_street">Blade Runner Style Street</option>
+              <option value="matrix_alley">Matrix Style Urban Alley</option>
+            </Select>
+            <label className="text-xs text-white/70">Time of Day</label>
+            <Select 
+              className="w-full"
+              value={node.cityTimeOfDay || "daytime"}
+              onChange={(e) => onUpdate(node.id, { cityTimeOfDay: (e.target as HTMLSelectElement).value })}
+            >
+              <option value="golden_hour">Golden Hour</option>
+              <option value="daytime">Daytime</option>
+              <option value="blue_hour">Blue Hour</option>
+              <option value="night">Night with City Lights</option>
+              <option value="dawn">Dawn</option>
+              <option value="overcast">Overcast Day</option>
+            </Select>
+          </div>
+        )}
+        
+        {node.backgroundType === "photostudio" && (
+          <div className="space-y-3">
+            <label className="text-xs text-white/70">Studio Setup</label>
+            <Select 
+              className="w-full"
+              value={node.studioSetup || "white_seamless"}
+              onChange={(e) => onUpdate(node.id, { studioSetup: (e.target as HTMLSelectElement).value })}
+            >
+              <option value="white_seamless">White Seamless Background</option>
+              <option value="black_seamless">Black Seamless Background</option>
+              <option value="grey_seamless">Grey Seamless Background</option>
+              <option value="colored_seamless">Colored Seamless Background</option>
+              <option value="textured_backdrop">Textured Backdrop</option>
+              <option value="infinity_cove">Infinity Cove</option>
+            </Select>
+            {node.studioSetup === "colored_seamless" && (
+              <>
+                <label className="text-xs text-white/70">Background Color</label>
+                <ColorPicker
+                  className="w-full"
+                  value={node.studioBackgroundColor || "#ffffff"}
+                  onChange={(e) => onUpdate(node.id, { studioBackgroundColor: (e.target as HTMLInputElement).value })}
+                />
+              </>
+            )}
+            <label className="text-xs text-white/70">Lighting Setup</label>
+            <Select 
+              className="w-full"
+              value={node.studioLighting || "key_fill"}
+              onChange={(e) => onUpdate(node.id, { studioLighting: (e.target as HTMLSelectElement).value })}
+            >
+              <option value="key_fill">Key + Fill Light</option>
+              <option value="three_point">Three-Point Lighting</option>
+              <option value="beauty_lighting">Beauty Lighting</option>
+              <option value="dramatic_lighting">Dramatic Single Light</option>
+              <option value="soft_lighting">Soft Diffused Lighting</option>
+              <option value="hard_lighting">Hard Directional Lighting</option>
+            </Select>
+            <div className="flex items-center gap-2">
+              <input
+                type="checkbox"
+                checked={node.faceCamera || false}
+                onChange={(e) => onUpdate(node.id, { faceCamera: (e.target as HTMLInputElement).checked })}
+                className="w-4 h-4"
+              />
+              <label className="text-xs text-white/70">Position character to face camera</label>
+            </div>
+          </div>
+        )}
+        
         {node.backgroundType === "upload" && (
           <div className="space-y-2">
             {node.customBackgroundImage ? (
@@ -1053,8 +1184,8 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
   // Bokeh (background blur) styles for different lens characteristics
   const bokehStyles = ["None", "Smooth Bokeh", "Swirly Bokeh", "Hexagonal Bokeh", "Cat Eye Bokeh", "Bubble Bokeh"];
 
-  // Manual or automatic
-  const manualOrAutomatic = ["None", "AF-S", "AF-C", "AF-A"];
+  // Motion blur options
+  const motionBlurOptions = ["None", "Light Motion Blur", "Medium Motion Blur", "Heavy Motion Blur", "Radial Blur", "Zoom Blur"];
 
   return (
     <div className="nb-node absolute text-white w-[360px]" style={{ left: localPos.x, top: localPos.y }}>
@@ -1103,16 +1234,16 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
         {/* Basic Camera Settings Section */}
         <div className="text-xs text-white/50 font-semibold mb-1">Basic Settings</div>
         <div className="grid grid-cols-2 gap-2">                     {/* 2-column grid for compact layout */}
-          {/* Automaticormanual Control - affects field of view and perspective */}
+          {/* Motion Blur Control - adds movement effects */}
           <div>
-            <label className="text-xs text-white/70">Manual or Automatic</label>
+            <label className="text-xs text-white/70">Motion Blur</label>
             <Select 
               className="w-full"
-              value={node.manualOrAutomatic || "None"}                   // Default to "None" if not set
-              onChange={(e) => onUpdate(node.id, { manualOrAutomatic: (e.target as HTMLSelectElement).value })}
-              title="Select Focus Modes"
+              value={node.motionBlur || "None"}                   // Default to "None" if not set
+              onChange={(e) => onUpdate(node.id, { motionBlur: (e.target as HTMLSelectElement).value })}
+              title="Select Motion Blur Effect"
             >
-              {manualOrAutomatic.map(f => <option key={f} value={f}>{f}</option>)}
+              {motionBlurOptions.map(f => <option key={f} value={f}>{f}</option>)}
             </Select>
           </div>
           {/* Focal Length Control - affects field of view and perspective */}
@@ -1707,22 +1838,34 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
   
   /**
-   * Available lighting preset options with reference images
-   * Each preset demonstrates a different lighting setup and mood
+   * Available lighting preset options with text descriptions
+   * Each preset uses detailed lighting prompts instead of reference images
    */
   const presetLightings = [
-    { name: "Studio Light", path: "/lighting/light1.png" },        // Professional studio lighting
-    { name: "Natural Light", path: "/lighting/light2.png" },       // Soft natural daylight
-    { name: "Dramatic Light", path: "/lighting/light3.png" },      // High-contrast dramatic lighting
+    { 
+      name: "Moody Cinematic", 
+      path: "/lighting/light1.png",
+      prompt: "Moody cinematic portrait lighting with a sharp vertical beam of warm orange-red light cutting across the face and neck, contrasted with cool teal ambient fill on the surrounding areas. Strong chiaroscuro effect, deep shadows, high contrast between warm and cool tones, dramatic spotlight strip"
+    },
+    { 
+      name: "Dual-Tone Neon", 
+      path: "/lighting/light2.png",
+      prompt: "Cinematic portrait lighting with strong dual-tone rim lights: deep blue light illuminating the front-left side of the face, intense red light as a rim light from the back-right, dark black background, high contrast, minimal fill light, dramatic neon glow"
+    },
+    { 
+      name: "Natural Shadow Play", 
+      path: "/lighting/light3.png",
+      prompt: "DRAMATIC natural shadow play with hard directional sunlight filtering through foliage, creating bold contrasting patterns of light and shadow across the subject. Strong chiaroscuro effect with deep blacks and bright highlights, dappled leaf shadows dancing across face and body, creating an artistic interplay of illumination and darkness. Emphasize the sculptural quality of light carving through shadow, with sharp shadow edges and brilliant sun-kissed highlights for maximum visual impact"
+    },
   ];
 
   /**
    * Handle selection of a lighting preset
-   * Updates both the lighting image path and the selected preset name
+   * Updates with the text prompt instead of reference image
    */
-  const selectLighting = (lightingPath: string, lightingName: string) => {
+  const selectLighting = (lightingPath: string, lightingName: string, lightingPrompt: string) => {
     onUpdate(node.id, { 
-      lightingImage: lightingPath,                                 // Path to lighting reference image
+      lightingPrompt: lightingPrompt,                              // Text prompt for lighting effect
       selectedLighting: lightingName                               // Name of selected lighting preset
     });
   };
@@ -1783,7 +1926,7 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
                   ? "border-indigo-400 bg-indigo-500/20"
                   : "border-white/20 hover:border-white/40"
               }`}
-              onClick={() => selectLighting(preset.path, preset.name)}
+              onClick={() => selectLighting(preset.path, preset.name, preset.prompt)}
             >
               <img 
                 src={preset.path} 
@@ -1859,23 +2002,39 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
   
   /**
-   * Available pose preset options with reference images
-   * Each preset shows a different body position or posture
+   * Available pose preset options with text descriptions
+   * Each preset uses detailed pose prompts instead of reference images
    */
   const presetPoses = [
-    { name: "Standing Pose 1", path: "/poses/stand1.png" },        // First standing position variant
-    { name: "Standing Pose 2", path: "/poses/stand2.png" },        // Second standing position variant
-    { name: "Sitting Pose 1", path: "/poses/sit1.png" },           // First sitting position variant
-    { name: "Sitting Pose 2", path: "/poses/sit2.png" },           // Second sitting position variant
+    { 
+      name: "Dynamic Standing", 
+      path: "/poses/stand1.png",
+      prompt: "A dynamic standing pose with the figure's weight shifted to one side. The right arm extends forward in a pointing gesture while the left arm hangs naturally. The figure has a slight hip tilt and appears to be in mid-movement, creating an energetic, directional composition."
+    },
+    { 
+      name: "Arms Crossed", 
+      path: "/poses/stand2.png",
+      prompt: "A relaxed standing pose with arms crossed over the torso. The weight is distributed fairly evenly, with one leg slightly forward. The figure's posture suggests a casual, confident stance with the head tilted slightly downward in a contemplative manner."
+    },
+    { 
+      name: "Seated Composed", 
+      path: "/poses/sit1.png",
+      prompt: "A seated pose on what appears to be a stool or high chair. The figure sits with legs crossed at the knee, creating an asymmetrical but balanced composition. The hands rest on the lap, and the overall posture is upright and composed."
+    },
+    { 
+      name: "Relaxed Lean", 
+      path: "/poses/sit2.png",
+      prompt: "A more relaxed seated pose with the figure leaning to one side. One leg is bent and raised while the other extends downward. The figure appears to be resting or in casual repose, with arms supporting the body and creating a diagonal flow through the composition."
+    },
   ];
 
   /**
    * Handle selection of a pose preset
-   * Updates both the pose reference image and the selected pose name
+   * Updates with the text prompt instead of reference image
    */
-  const selectPose = (posePath: string, poseName: string) => {
+  const selectPose = (posePath: string, poseName: string, posePrompt: string) => {
     onUpdate(node.id, { 
-      poseImage: posePath,                                         // Path to pose reference image
+      posePrompt: posePrompt,                                      // Text prompt for pose effect
       selectedPose: poseName                                       // Name of selected pose preset
     });
   };
@@ -1936,7 +2095,7 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
                   ? "border-indigo-400 bg-indigo-500/20"
                   : "border-white/20 hover:border-white/40"
               }`}
-              onClick={() => selectPose(preset.path, preset.name)}
+              onClick={() => selectPose(preset.path, preset.name, preset.prompt)}
             >
               <img 
                 src={preset.path} 

app/page.tsx

@@ -196,9 +196,26 @@ type BackgroundNode = NodeBase & {
   type: "BACKGROUND";
   input?: string;                    // ID of the source node (usually CHARACTER)
   output?: string;                   // Processed image with new background
-  backgroundType: "color" | "image" | "upload" | "custom";  // Type of background to apply
+  backgroundType: "color" | "gradient" | "image" | "city" | "photostudio" | "upload" | "custom";  // Type of background to apply
   backgroundColor?: string;          // Hex color code for solid color backgrounds
+  
+  // Gradient background properties
+  gradientDirection?: string;        // Direction of gradient (to right, to bottom, radial, etc.)
+  gradientStartColor?: string;       // Starting color of gradient
+  gradientEndColor?: string;         // Ending color of gradient
+  
   backgroundImage?: string;          // URL/path for preset background images
+  
+  // City scene properties
+  citySceneType?: string;           // Type of city scene (busy_street, times_square, etc.)
+  cityTimeOfDay?: string;           // Time of day for city scene
+  
+  // Photo studio properties
+  studioSetup?: string;             // Studio background setup type
+  studioBackgroundColor?: string;   // Color for colored seamless background
+  studioLighting?: string;          // Studio lighting setup
+  faceCamera?: boolean;             // Whether to position character facing camera
+  
   customBackgroundImage?: string;    // User-uploaded background image data
   customPrompt?: string;            // AI prompt for generating custom backgrounds
   isRunning?: boolean;              // Processing state indicator
@@ -266,6 +283,7 @@ type CameraNode = NodeBase & {
   bokeh?: string;              // Background blur style
   composition?: string;        // Composition technique
   aspectRatio?: string;        // Image aspect ratio
+  motionBlur?: string;         // Motion blur effect
   isRunning?: boolean;         // Processing status
   error?: string | null;       // Error message
 };
@@ -327,7 +345,7 @@ type LightningNode = NodeBase & {
   input?: string;              // Source node ID
   output?: string;             // Image with lighting applied
   selectedLighting?: string;   // Selected lighting preset name
-  lightingImage?: string;      // Path to lighting image
+  lightingPrompt?: string;     // Text prompt for lighting effect
   lightingStrength?: number;   // Intensity of lighting effect (0-100)
   isRunning?: boolean;         // Processing state
   error?: string | null;       // Error message
@@ -343,7 +361,7 @@ type PosesNode = NodeBase & {
   input?: string;              // Source node ID
   output?: string;             // Image with pose applied
   selectedPose?: string;       // Selected pose preset name
-  poseImage?: string;          // Path to pose reference image
+  posePrompt?: string;         // Text prompt for pose effect
   poseStrength?: number;       // How strongly to apply the pose (0-100)
   isRunning?: boolean;         // Processing state
   error?: string | null;       // Error message
@@ -1177,11 +1195,33 @@ export default function EditorPage() {
     switch (node.type) {
       case "BACKGROUND":
         if ((node as BackgroundNode).backgroundType) {
-          config.backgroundType = (node as BackgroundNode).backgroundType;
-          config.backgroundColor = (node as BackgroundNode).backgroundColor;
-          config.backgroundImage = (node as BackgroundNode).backgroundImage;
-          config.customBackgroundImage = (node as BackgroundNode).customBackgroundImage;
-          config.customPrompt = (node as BackgroundNode).customPrompt;
+          const bgNode = node as BackgroundNode;
+          config.backgroundType = bgNode.backgroundType;
+          config.backgroundColor = bgNode.backgroundColor;
+          config.backgroundImage = bgNode.backgroundImage;
+          config.customBackgroundImage = bgNode.customBackgroundImage;
+          config.customPrompt = bgNode.customPrompt;
+          
+          // Gradient properties
+          if (bgNode.backgroundType === "gradient") {
+            config.gradientDirection = bgNode.gradientDirection;
+            config.gradientStartColor = bgNode.gradientStartColor;
+            config.gradientEndColor = bgNode.gradientEndColor;
+          }
+          
+          // City scene properties
+          if (bgNode.backgroundType === "city") {
+            config.citySceneType = bgNode.citySceneType;
+            config.cityTimeOfDay = bgNode.cityTimeOfDay;
+          }
+          
+          // Photo studio properties
+          if (bgNode.backgroundType === "photostudio") {
+            config.studioSetup = bgNode.studioSetup;
+            config.studioBackgroundColor = bgNode.studioBackgroundColor;
+            config.studioLighting = bgNode.studioLighting;
+            config.faceCamera = bgNode.faceCamera;
+          }
         }
         break;
       case "CLOTHES":
@@ -1214,6 +1254,7 @@ export default function EditorPage() {
         if (cam.bokeh && cam.bokeh !== "None") config.bokeh = cam.bokeh;
         if (cam.composition && cam.composition !== "None") config.composition = cam.composition;
         if (cam.aspectRatio && cam.aspectRatio !== "None") config.aspectRatio = cam.aspectRatio;
+        if (cam.motionBlur && cam.motionBlur !== "None") config.motionBlur = cam.motionBlur;
         break;
       case "AGE":
         if ((node as AgeNode).targetAge) {
@@ -1241,6 +1282,18 @@ export default function EditorPage() {
           }
         }
         break;
+      case "LIGHTNING":
+        if ((node as LightningNode).lightingPrompt && (node as LightningNode).selectedLighting) {
+          config.lightingPrompt = (node as LightningNode).lightingPrompt;
+          config.selectedLighting = (node as LightningNode).selectedLighting;
+        }
+        break;
+      case "POSES":
+        if ((node as PosesNode).posePrompt && (node as PosesNode).selectedPose) {
+          config.posePrompt = (node as PosesNode).posePrompt;
+          config.selectedPose = (node as PosesNode).selectedPose;
+        }
+        break;
     }
     
     return config;
@@ -1509,7 +1562,13 @@ export default function EditorPage() {
       }
 
       const data = await res.json();
-      if (!res.ok) throw new Error(data.error || "Processing failed");
+      if (!res.ok) {
+        // Handle both string and object error formats
+        const errorMessage = typeof data.error === 'string' 
+          ? data.error 
+          : data.error?.message || JSON.stringify(data.error) || "Processing failed";
+        throw new Error(errorMessage);
+      }
 
       // Only update the current node with the output
       // Don't show output in intermediate nodes - they were just used for configuration