Upload 38 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+public/sukajan.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env*
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
+
+.vercel

Dockerfile

@@ -0,0 +1,57 @@
+FROM node:18-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Set the correct permission for prerender cache
+RUN mkdir .next
+RUN chown nextjs:nodejs .next
+
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 7860
+
+ENV PORT 7860
+ENV HOSTNAME "0.0.0.0"
+
+# server.js is created by next build from the standalone output
+# https://nextjs.org/docs/pages/api-reference/next-config-js/output
+CMD ["node", "server.js"]

README.md

@@ -1,12 +1,43 @@
 ---
-title: Nano Banana Editor
-emoji: 📚
-colorFrom: purple
-colorTo: indigo
+title: Nano Banana Node Editor
+emoji: 🍌
+colorFrom: yellow
+colorTo: yellow
 sdk: docker
 pinned: false
-license: mit
-short_description: Play with Nano Banana using Nodes
+app_port: 3000
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Nano Banana Node Editor 🍌
+
+A powerful visual node editor for AI-powered image generation and manipulation. Create complex workflows by connecting nodes for image generation, merging, editing, and style transfers.
+
+## Features
+
+- 🎨 **Visual Node Editor**: Drag-and-drop interface for building image processing workflows
+- 🤖 **AI-Powered**: Uses Google's Gemini API for intelligent image generation and editing
+- 🖼️ **Multiple Node Types**: Character nodes, merge nodes, edit nodes, and style transfer nodes
+- 🔄 **Real-time Processing**: See results as you build your workflow
+- 🎯 **Intuitive Interface**: Right-click to add nodes, drag to connect them
+- 🔒 **Privacy-First**: Your API tokens are stored locally in your browser
+
+## Getting Started
+
+1. **Get Your API Key**: Visit [Google AI Studio](https://aistudio.google.com/app/apikey) to create your free Gemini API key
+2. **Add Your Token**: Paste your API key in the "API Token" field in the top navigation
+3. **Start Creating**: Right-click on the canvas to add nodes and start building your workflow
+
+## How to Use
+
+- **Adding Nodes**: Right-click on the editor canvas and choose the node type you want
+- **Character Nodes**: Upload or drag images to create character nodes
+- **Connecting Nodes**: Drag from output ports to input ports to create connections
+- **Processing**: Click the process button to run your workflow
+- **Downloading**: Right-click on result nodes to download generated images
+
+## Privacy & Security
+
+- Your API token is stored locally in your browser
+- Tokens are never sent to our servers
+- All processing happens through Google's official API
+- No data is stored on our servers

app/api/generate/route.ts

@@ -0,0 +1,53 @@
+import { NextRequest, NextResponse } from "next/server";
+import { GoogleGenAI } from "@google/genai";
+
+export const runtime = "nodejs"; // Ensure Node runtime for SDK
+
+export async function POST(req: NextRequest) {
+  try {
+    const { prompt, apiToken } = (await req.json()) as { prompt?: string; apiToken?: string };
+    if (!prompt || typeof prompt !== "string") {
+      return NextResponse.json(
+        { error: "Missing prompt" },
+        { status: 400 }
+      );
+    }
+
+    // Use user-provided API token or fall back to environment variable
+    const apiKey = apiToken || process.env.GOOGLE_API_KEY;
+    if (!apiKey || apiKey === 'your_api_key_here') {
+      return NextResponse.json(
+        { error: "API key not provided. Please enter your Hugging Face API token in the top right corner or add GOOGLE_API_KEY to .env.local file. Get your key from: https://aistudio.google.com/app/apikey" },
+        { status: 500 }
+      );
+    }
+
+    const ai = new GoogleGenAI({ apiKey });
+
+    const response = await ai.models.generateContent({
+      model: "gemini-2.5-flash-image-preview",
+      contents: prompt,
+    });
+
+    const parts = (response as any)?.candidates?.[0]?.content?.parts ?? [];
+    const images: string[] = [];
+    const texts: string[] = [];
+
+    for (const part of parts) {
+      if (part?.inlineData?.data) {
+        images.push(`data:image/png;base64,${part.inlineData.data}`);
+      } else if (part?.text) {
+        texts.push(part.text as string);
+      }
+    }
+
+    return NextResponse.json({ images, text: texts.join("\n") });
+  } catch (err) {
+    console.error("/api/generate error", err);
+    return NextResponse.json(
+      { error: "Failed to generate image" },
+      { status: 500 }
+    );
+  }
+}
+

app/api/merge/route.ts

@@ -0,0 +1,146 @@
+import { NextRequest, NextResponse } from "next/server";
+import { GoogleGenAI } from "@google/genai";
+
+export const runtime = "nodejs";
+
+function parseDataUrl(dataUrl: string): { mimeType: string; data: string } | null {
+  // data:[<mediatype>][;base64],<data>
+  const match = dataUrl.match(/^data:(.*?);base64,(.*)$/);
+  if (!match) return null;
+  return { mimeType: match[1] || "image/png", data: match[2] };
+}
+
+async function toInlineData(url: string): Promise<{ mimeType: string; data: string } | null> {
+  try {
+    if (url.startsWith('data:')) {
+      return parseDataUrl(url);
+    }
+    if (url.startsWith('http')) {
+      // Fetch HTTP URL and convert to base64
+      const res = await fetch(url);
+      const buf = await res.arrayBuffer();
+      const base64 = Buffer.from(buf).toString('base64');
+      const mimeType = res.headers.get('content-type') || 'image/jpeg';
+      return { mimeType, data: base64 };
+    }
+    return null;
+  } catch (e) {
+    console.error('Failed to process image URL:', url.substring(0, 100), e);
+    return null;
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const body = (await req.json()) as {
+      images?: string[]; // data URLs
+      prompt?: string;
+      apiToken?: string;
+    };
+
+    const imgs = body.images?.filter(Boolean) ?? [];
+    if (imgs.length < 2) {
+      return NextResponse.json(
+        { error: "MERGE requires at least two images" },
+        { status: 400 }
+      );
+    }
+
+    // Use user-provided API token or fall back to environment variable
+    const apiKey = body.apiToken || process.env.GOOGLE_API_KEY;
+    if (!apiKey || apiKey === 'your_api_key_here') {
+      return NextResponse.json(
+        { error: "API key not provided. Please enter your Hugging Face API token in the top right corner or add GOOGLE_API_KEY to .env.local file. Get your key from: https://aistudio.google.com/app/apikey" },
+        { status: 500 }
+      );
+    }
+
+    const ai = new GoogleGenAI({ apiKey });
+
+    // Build parts array: first the text prompt, then image inlineData parts
+    // If no custom prompt, use default extraction-focused prompt
+    let prompt = body.prompt;
+    
+    if (!prompt) {
+      prompt = `MERGE TASK: Create a natural, cohesive group photo combining ALL subjects from ${imgs.length} provided images.
+
+CRITICAL REQUIREMENTS:
+1. Extract ALL people/subjects from EACH image exactly as they appear
+2. Place them together in a SINGLE UNIFIED SCENE with:
+   - Consistent lighting direction and color temperature
+   - Matching shadows and ambient lighting  
+   - Proper scale relationships (realistic relative sizes)
+   - Natural spacing as if they were photographed together
+   - Shared environment/background that looks cohesive
+
+3. Composition guidelines:
+   - Arrange subjects at similar depth (not one far behind another)
+   - Use natural group photo positioning (slight overlap is ok)
+   - Ensure all faces are clearly visible
+   - Create visual balance in the composition
+   - Apply consistent color grading across all subjects
+
+4. Environmental unity:
+   - Use a single, coherent background for all subjects
+   - Match the perspective as if taken with one camera
+   - Ensure ground plane continuity (all standing on same level)
+   - Apply consistent atmospheric effects (if any)
+
+The result should look like all subjects were photographed together in the same place at the same time, NOT like separate images placed side by side.`;
+    } else {
+      // Even with custom prompt, append cohesion requirements
+      const enforcement = `\n\nIMPORTANT: Create a COHESIVE group photo where all subjects appear to be in the same scene with consistent lighting, scale, and environment. The result should look naturally photographed together, not composited.`;
+      prompt = `${prompt}${enforcement}`;
+    }
+
+    // Debug: Log what we're receiving
+    console.log(`[MERGE API] Received ${imgs.length} images to merge`);
+    console.log(`[MERGE API] Image types:`, imgs.map(img => {
+      if (img.startsWith('data:')) return 'data URL';
+      if (img.startsWith('http')) return 'HTTP URL';
+      return 'unknown';
+    }));
+    
+    const parts: any[] = [{ text: prompt }];
+    for (const url of imgs) {
+      const parsed = await toInlineData(url);
+      if (!parsed) {
+        console.error('[MERGE API] Failed to parse image:', url.substring(0, 100));
+        continue;
+      }
+      parts.push({ inlineData: { mimeType: parsed.mimeType, data: parsed.data } });
+    }
+    
+    console.log(`[MERGE API] Sending ${parts.length - 1} images to model (prompt + images)`);
+    console.log(`[MERGE API] Prompt preview:`, prompt.substring(0, 200));
+
+    const response = await ai.models.generateContent({
+      model: "gemini-2.5-flash-image-preview",
+      contents: parts,
+    });
+
+    const outParts = (response as any)?.candidates?.[0]?.content?.parts ?? [];
+    const images: string[] = [];
+    const texts: string[] = [];
+    for (const p of outParts) {
+      if (p?.inlineData?.data) {
+        images.push(`data:image/png;base64,${p.inlineData.data}`);
+      } else if (p?.text) {
+        texts.push(p.text);
+      }
+    }
+
+    if (!images.length) {
+      return NextResponse.json(
+        { error: "Model returned no image", text: texts.join("\n") },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({ images, text: texts.join("\n") });
+  } catch (err) {
+    console.error("/api/merge error", err);
+    return NextResponse.json({ error: "Failed to merge" }, { status: 500 });
+  }
+}
+

app/api/process/route.ts

@@ -0,0 +1,372 @@
+import { NextRequest, NextResponse } from "next/server";
+import { GoogleGenAI } from "@google/genai";
+
+export const runtime = "nodejs";
+
+// Increase the body size limit to 50MB for large images
+export const maxDuration = 60; // 60 seconds timeout
+
+function parseDataUrl(dataUrl: string): { mimeType: string; data: string } | null {
+  const match = dataUrl.match(/^data:(.*?);base64,(.*)$/);
+  if (!match) return null;
+  return { mimeType: match[1] || "image/png", data: match[2] };
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    // Log request size for debugging
+    const contentLength = req.headers.get('content-length');
+    console.log(`[API] Request size: ${contentLength} bytes`);
+    
+    let body: any;
+    try {
+      body = await req.json() as {
+        type: string;
+        image?: string;
+        images?: string[];
+        prompt?: string;
+        params?: any;
+        apiToken?: string;
+      };
+    } catch (jsonError) {
+      console.error('[API] Failed to parse JSON:', jsonError);
+      return NextResponse.json(
+        { error: "Invalid JSON in request body. This might be due to large image data or special characters." },
+        { status: 400 }
+      );
+    }
+
+    // Use user-provided API token or fall back to environment variable
+    const apiKey = body.apiToken || process.env.GOOGLE_API_KEY;
+    if (!apiKey || apiKey === 'your_actual_api_key_here') {
+      return NextResponse.json(
+        { error: "API key not provided. Please enter your Hugging Face API token in the top right corner or add GOOGLE_API_KEY to .env.local file." },
+        { status: 500 }
+      );
+    }
+
+    const ai = new GoogleGenAI({ apiKey });
+    
+    // Helpers
+    const toInlineDataFromAny = async (url: string): Promise<{ mimeType: string; data: string } | null> => {
+      if (!url) return null;
+      try {
+        if (url.startsWith('data:')) {
+          return parseDataUrl(url);
+        }
+        if (url.startsWith('http')) {
+          const res = await fetch(url);
+          const buf = await res.arrayBuffer();
+          const base64 = Buffer.from(buf).toString('base64');
+          const mimeType = res.headers.get('content-type') || 'image/jpeg';
+          return { mimeType, data: base64 };
+        }
+        if (url.startsWith('/')) {
+          const host = req.headers.get('host') ?? 'localhost:3000';
+          const proto = req.headers.get('x-forwarded-proto') ?? 'http';
+          const absolute = `${proto}://${host}${url}`;
+          const res = await fetch(absolute);
+          const buf = await res.arrayBuffer();
+          const base64 = Buffer.from(buf).toString('base64');
+          const mimeType = res.headers.get('content-type') || 'image/png';
+          return { mimeType, data: base64 };
+        }
+        return null;
+      } catch {
+        return null;
+      }
+    };
+
+    // Handle MERGE node type separately
+    if (body.type === "MERGE") {
+      const imgs = body.images?.filter(Boolean) ?? [];
+      if (imgs.length < 2) {
+        return NextResponse.json(
+          { error: "MERGE requires at least two images" },
+          { status: 400 }
+        );
+      }
+
+      // Build parts array for merge: first the text prompt, then image inlineData parts
+      let mergePrompt = body.prompt;
+      
+      if (!mergePrompt) {
+        mergePrompt = `MERGE TASK: Create a natural, cohesive group photo combining ALL subjects from ${imgs.length} provided images.
+
+CRITICAL REQUIREMENTS:
+1. Extract ALL people/subjects from EACH image exactly as they appear
+2. Place them together in a SINGLE UNIFIED SCENE with:
+   - Consistent lighting direction and color temperature
+   - Matching shadows and ambient lighting  
+   - Proper scale relationships (realistic relative sizes)
+   - Natural spacing as if they were photographed together
+   - Shared environment/background that looks cohesive
+
+3. Composition guidelines:
+   - Arrange subjects at similar depth (not one far behind another)
+   - Use natural group photo positioning (slight overlap is ok)
+   - Ensure all faces are clearly visible
+   - Create visual balance in the composition
+   - Apply consistent color grading across all subjects
+
+4. Environmental unity:
+   - Use a single, coherent background for all subjects
+   - Match the perspective as if taken with one camera
+   - Ensure ground plane continuity (all standing on same level)
+   - Apply consistent atmospheric effects (if any)
+
+The result should look like all subjects were photographed together in the same place at the same time, NOT like separate images placed side by side.`;
+      } else {
+        // Even with custom prompt, append cohesion requirements
+        const enforcement = `\n\nIMPORTANT: Create a COHESIVE group photo where all subjects appear to be in the same scene with consistent lighting, scale, and environment. The result should look naturally photographed together, not composited.`;
+        mergePrompt = `${mergePrompt}${enforcement}`;
+      }
+
+      const mergeParts: any[] = [{ text: mergePrompt }];
+      for (let i = 0; i < imgs.length; i++) {
+        const url = imgs[i];
+        console.log(`[MERGE] Processing image ${i + 1}/${imgs.length}, type: ${typeof url}, length: ${url?.length || 0}`);
+        
+        try {
+          const parsed = await toInlineDataFromAny(url);
+          if (!parsed) {
+            console.error(`[MERGE] Failed to parse image ${i + 1}:`, url.substring(0, 100));
+            continue;
+          }
+          mergeParts.push({ inlineData: { mimeType: parsed.mimeType, data: parsed.data } });
+          console.log(`[MERGE] Successfully processed image ${i + 1}`);
+        } catch (error) {
+          console.error(`[MERGE] Error processing image ${i + 1}:`, error);
+        }
+      }
+      
+      console.log(`[MERGE] Sending ${mergeParts.length - 1} images to model`);
+
+      const response = await ai.models.generateContent({
+        model: "gemini-2.5-flash-image-preview",
+        contents: mergeParts,
+      });
+
+      const outParts = (response as any)?.candidates?.[0]?.content?.parts ?? [];
+      const images: string[] = [];
+      const texts: string[] = [];
+      for (const p of outParts) {
+        if (p?.inlineData?.data) {
+          images.push(`data:image/png;base64,${p.inlineData.data}`);
+        } else if (p?.text) {
+          texts.push(p.text);
+        }
+      }
+
+      if (!images.length) {
+        return NextResponse.json(
+          { error: "Model returned no image", text: texts.join("\n") },
+          { status: 500 }
+        );
+      }
+
+      return NextResponse.json({ image: images[0], images, text: texts.join("\n") });
+    }
+
+    // Parse input image for non-merge nodes
+    let parsed = null as null | { mimeType: string; data: string };
+    if (body.image) {
+      parsed = await toInlineDataFromAny(body.image);
+    }
+    
+    if (!parsed) {
+      return NextResponse.json({ error: "Invalid or missing image data. Please ensure an input is connected." }, { status: 400 });
+    }
+
+    // Build combined prompt from all accumulated parameters
+    const prompts: string[] = [];
+    const params = body.params || {};
+
+    // We'll collect additional inline image parts (references)
+    const referenceParts: { inlineData: { mimeType: string; data: string } }[] = [];
+    
+    // Background modifications
+    if (params.backgroundType) {
+      const bgType = params.backgroundType;
+      if (bgType === "color") {
+        prompts.push(`Change the background to a solid ${params.backgroundColor || "white"} background.`);
+      } else if (bgType === "image") {
+        prompts.push(`Change the background to ${params.backgroundImage || "a beautiful beach scene"}.`);
+      } 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) {
+        prompts.push(params.customPrompt);
+      }
+    }
+    
+    // Clothes modifications
+    if (params.clothesImage) {
+      console.log(`[API] Processing clothes image, type: ${typeof params.clothesImage}, length: ${params.clothesImage?.length || 0}`);
+      
+      if (params.selectedPreset === "Sukajan") {
+        prompts.push("Replace the person's clothing with a Japanese sukajan jacket (embroidered designs). Use the clothes reference image if provided.");
+      } else if (params.selectedPreset === "Blazer") {
+        prompts.push("Replace the person's clothing with a professional blazer. Use the clothes reference image if provided.");
+      } else {
+        prompts.push(`Take the person shown in the first image and replace their entire outfit with the clothing items shown in the second reference image. The person's face, hair, body pose, and background should remain exactly the same. Only the clothing should change to match the reference clothing image. Ensure the new clothes fit naturally on the person's body with realistic proportions, proper fabric draping, and lighting that matches the original photo environment.`);
+      }
+      
+      try {
+        const clothesRef = await toInlineDataFromAny(params.clothesImage);
+        if (clothesRef) {
+          console.log(`[API] Successfully processed clothes image`);
+          referenceParts.push({ inlineData: clothesRef });
+        } else {
+          console.error('[API] Failed to process clothes image - toInlineDataFromAny returned null');
+        }
+      } catch (error) {
+        console.error('[API] Error processing clothes image:', error);
+      }
+    }
+    
+    // Style application
+    if (params.stylePreset) {
+      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: large expressive eyes, detailed hair, soft shading, nostalgic colors reminiscent of Studio Ghibli and classic anime productions",
+        "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",
+        "cyberpunk": "Transform into cyberpunk aesthetic with neon colors (cyan, magenta, yellow), dark backgrounds, futuristic elements, holographic effects, tech-noir atmosphere",
+        "steampunk": "Apply steampunk style with Victorian-era brass and copper tones, mechanical gears, steam effects, vintage industrial aesthetic, sepia undertones",
+        "cubism": "Render in Cubist art style with geometric fragmentation, multiple perspectives shown simultaneously, abstract angular forms, Picasso-inspired decomposition",
+        "van-gogh": "Apply Post-Impressionist Van Gogh style with thick swirling brushstrokes, vibrant yellows and blues, expressive texture, starry night-like patterns",
+        "simpsons": "Convert to The Simpsons cartoon style with yellow skin tones, simple rounded features, bulging eyes, overbite, Matt Groening's distinctive character design",
+        "family-guy": "Transform into Family Guy animation style with rounded character design, simplified features, Seth MacFarlane's distinctive art style, bold outlines",
+        "arcane": "Apply Arcane (League of Legends) style with painterly brush-stroke textures, neon rim lighting, hand-painted feel, stylized realism, vibrant color grading",
+        "wildwest": "Render in Wild West style with dusty desert tones, sunset orange lighting, vintage film grain, cowboy aesthetic, sepia and brown color palette",
+        "stranger-things": "Apply Stranger Things 80s aesthetic with Kodak film push-process look, neon magenta backlight, grainy vignette, retro sci-fi horror atmosphere",
+        "breaking-bad": "Transform with Breaking Bad cinematography style featuring dusty New Mexico orange and teal color grading, 35mm film grain, desert atmosphere, dramatic lighting"
+      };
+      
+      const styleDescription = styleMap[params.stylePreset];
+      if (styleDescription) {
+        prompts.push(`${styleDescription}. Apply this style transformation at ${strength}% intensity while preserving the core subject matter.`);
+      }
+    }
+    
+    // Edit prompt
+    if (params.editPrompt) {
+      prompts.push(params.editPrompt);
+    }
+    
+    // Camera settings
+    if (params.focalLength || params.aperture || params.shutterSpeed || params.whiteBalance || params.angle || 
+        params.iso || params.filmStyle || params.lighting || params.bokeh || params.composition) {
+      const cameraSettings: string[] = [];
+      if (params.focalLength) {
+        if (params.focalLength === "8mm fisheye") {
+          cameraSettings.push("Apply 8mm fisheye lens effect with 180-degree circular distortion");
+        } else {
+          cameraSettings.push(`Focal Length: ${params.focalLength}`);
+        }
+      }
+      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.filmStyle) cameraSettings.push(`Film style: ${params.filmStyle}`);
+      if (params.lighting) cameraSettings.push(`Lighting: ${params.lighting}`);
+      if (params.bokeh) cameraSettings.push(`Bokeh effect: ${params.bokeh}`);
+      if (params.composition) cameraSettings.push(`Composition: ${params.composition}`);
+      
+      if (cameraSettings.length > 0) {
+        prompts.push(`Apply professional photography settings: ${cameraSettings.join(", ")}`);
+      }
+    }
+    
+    // Age transformation
+    if (params.targetAge) {
+      prompts.push(`Transform the person to look exactly ${params.targetAge} years old with age-appropriate features.`);
+    }
+    
+    // Face modifications
+    if (params.faceOptions) {
+      const face = params.faceOptions;
+      const modifications: string[] = [];
+      if (face.removePimples) modifications.push("remove all pimples and blemishes");
+      if (face.addSunglasses) modifications.push("add stylish sunglasses");
+      if (face.addHat) modifications.push("add a fashionable hat");
+      if (face.changeHairstyle) modifications.push(`change hairstyle to ${face.changeHairstyle}`);
+      if (face.facialExpression) modifications.push(`change facial expression to ${face.facialExpression}`);
+      if (face.beardStyle) modifications.push(`add/change beard to ${face.beardStyle}`);
+      
+      if (modifications.length > 0) {
+        prompts.push(`Face modifications: ${modifications.join(", ")}`);
+      }
+    }
+    
+    // Combine all prompts
+    let prompt = prompts.length > 0 
+      ? prompts.join("\n\n") + "\n\nApply all these modifications while maintaining the person's identity and keeping unspecified aspects unchanged."
+      : "Process this image with high quality output.";
+
+    // Add the custom prompt if provided
+    if (body.prompt) {
+      prompt = body.prompt + "\n\n" + prompt;
+    }
+
+    // Generate with Gemini
+    const parts = [
+      { text: prompt },
+      // Primary subject image (input) - this is the person whose clothes will be changed
+      { inlineData: { mimeType: parsed.mimeType, data: parsed.data } },
+      // Additional reference images to guide modifications (e.g., clothes to copy)
+      ...referenceParts,
+    ];
+
+    const response = await ai.models.generateContent({
+      model: "gemini-2.5-flash-image-preview",
+      contents: parts,
+    });
+
+    const outParts = (response as any)?.candidates?.[0]?.content?.parts ?? [];
+    const images: string[] = [];
+    
+    for (const p of outParts) {
+      if (p?.inlineData?.data) {
+        images.push(`data:image/png;base64,${p.inlineData.data}`);
+      }
+    }
+
+    if (!images.length) {
+      return NextResponse.json(
+        { error: "No image generated. Try adjusting your parameters." },
+        { status: 500 }
+      );
+    }
+
+    return NextResponse.json({ image: images[0] });
+  } catch (err: any) {
+    console.error("/api/process error:", err);
+    console.error("Error stack:", err?.stack);
+    
+    // Provide more specific error messages
+    if (err?.message?.includes('payload size')) {
+      return NextResponse.json(
+        { error: "Image data too large. Please use smaller images or reduce image quality." },
+        { status: 413 }
+      );
+    }
+    
+    if (err?.message?.includes('JSON')) {
+      return NextResponse.json(
+        { error: "Invalid data format. Please ensure images are properly encoded." },
+        { status: 400 }
+      );
+    }
+    
+    return NextResponse.json(
+      { error: `Failed to process image: ${err?.message || 'Unknown error'}` },
+      { status: 500 }
+    );
+  }
+}

app/editor.css

@@ -0,0 +1,64 @@
+/* Node editor custom styles and animations */
+
+/* Animated connection lines */
+@keyframes flow {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: -20;
+  }
+}
+
+.connection-animated {
+  animation: flow 1s linear infinite;
+  stroke-dasharray: 5, 5;
+}
+
+/* Processing pulse effect */
+@keyframes processingPulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+
+.connection-processing {
+  animation: processingPulse 1.5s ease-in-out infinite;
+  stroke: #22c55e;
+  stroke-width: 3;
+  filter: drop-shadow(0 0 3px rgba(34, 197, 94, 0.5));
+}
+
+/* Flow particles effect */
+@keyframes flowParticle {
+  0% {
+    offset-distance: 0%;
+    opacity: 0;
+  }
+  10% {
+    opacity: 1;
+  }
+  90% {
+    opacity: 1;
+  }
+  100% {
+    offset-distance: 100%;
+    opacity: 0;
+  }
+}
+
+.flow-particle {
+  animation: flowParticle 2s linear infinite;
+}
+
+/* Node processing state */
+.nb-node.processing {
+  animation: processingPulse 1.5s ease-in-out infinite;
+}
+
+.nb-node.processing .nb-header {
+  background: linear-gradient(90deg, rgba(34, 197, 94, 0.2), rgba(34, 197, 94, 0.1));
+}

app/globals.css

@@ -0,0 +1,275 @@
+@import "tailwindcss";
+
+/* shadcn theme tokens */
+:root {
+  --background: 0 0% 100%;
+  --foreground: 222.2 84% 4.9%;
+
+  --card: 0 0% 100%;
+  --card-foreground: 222.2 84% 4.9%;
+
+  --popover: 0 0% 100%;
+  --popover-foreground: 222.2 84% 4.9%;
+
+  /* Brand: Orangish Red */
+  --primary: 14 90% 50%;
+  --primary-foreground: 0 0% 98%;
+
+  --secondary: 210 40% 96.1%;
+  --secondary-foreground: 222.2 47.4% 11.2%;
+
+  --muted: 210 40% 96.1%;
+  --muted-foreground: 215.4 16.3% 46.9%;
+
+  --accent: 14 95% 90%;
+  --accent-foreground: 14 90% 20%;
+
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 210 40% 98%;
+
+  --border: 214.3 31.8% 91.4%;
+  --input: 214.3 31.8% 91.4%;
+  --ring: 14 90% 45%;
+
+  --radius: 0.75rem;
+
+  --chart-1: 12 76% 61%;
+  --chart-2: 173 58% 39%;
+  --chart-3: 197 37% 24%;
+  --chart-4: 43 74% 66%;
+  --chart-5: 27 87% 67%;
+}
+
+.dark {
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+
+  --popover: 240 10% 3.9%;
+  --popover-foreground: 0 0% 98%;
+
+  /* Brand in dark mode */
+  --primary: 14 87% 60%;
+  --primary-foreground: 240 10% 3.9%;
+
+  --secondary: 240 3.7% 15.9%;
+  --secondary-foreground: 0 0% 98%;
+
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+
+  --accent: 14 40% 20%;
+  --accent-foreground: 0 0% 98%;
+
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 85.7% 97.3%;
+
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 14 87% 55%;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not(.light) {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+
+    /* Brand in dark mode */
+    --primary: 14 87% 60%;
+    --primary-foreground: 240 10% 3.9%;
+
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+
+    --accent: 14 40% 20%;
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 14 87% 55%;
+  }
+}
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --font-sans: var(--font-geist-sans);
+  --font-mono: var(--font-geist-mono);
+}
+
+body {
+  background: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-family: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
+}
+
+/* Custom scrollbar styling */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: hsl(var(--background) / 0.1);
+  border-radius: 3px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: hsl(var(--muted-foreground) / 0.3);
+  border-radius: 3px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* Firefox */
+.scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--muted-foreground) / 0.3) hsl(var(--background) / 0.1);
+}
+
+/* Nano Banana Editor - node visuals */
+.nb-node {
+  background: hsl(var(--card) / 0.9);
+  border: 1px solid hsl(var(--border) / 0.6);
+  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
+  border-radius: var(--radius);
+  backdrop-filter: blur(6px);
+  /* Prevent blurring on zoom */
+  image-rendering: -webkit-optimize-contrast;
+  image-rendering: crisp-edges;
+  transform: translateZ(0);
+  will-change: transform;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  backface-visibility: hidden;
+  perspective: 1000px;
+}
+
+/* Prevent text selection on node elements except inputs */
+.nb-node * {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.nb-node input,
+.nb-node textarea,
+.nb-node select {
+  user-select: text;
+  -webkit-user-select: text;
+}
+.nb-node .nb-header {
+  background: linear-gradient(to bottom, hsl(var(--muted) / 0.35), hsl(var(--muted) / 0.08));
+}
+.nb-port {
+  width: 20px;
+  height: 20px;
+  border-radius: 9999px;
+  border: 3px solid rgba(255,255,255,0.6);
+  background: hsl(var(--popover));
+  cursor: crosshair;
+  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
+  position: relative;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.nb-port:hover {
+  transform: scale(1.25);
+  background: hsl(var(--accent));
+  box-shadow: 0 0 12px hsl(var(--ring) / 0.4);
+}
+.nb-port.out { 
+  border-color: hsl(var(--primary)); 
+}
+.nb-port.out:hover { 
+  background: hsl(var(--primary));
+  box-shadow: 0 0 16px hsl(var(--primary) / 0.6);
+}
+.nb-port.in { 
+  border-color: #34d399; 
+}
+.nb-port.in:hover { 
+  background: #34d399;
+  box-shadow: 0 0 16px rgba(52,211,153,0.6);
+}
+
+.nb-line {
+  stroke: #7c7c7c;
+  stroke-width: 2.5;
+}
+.nb-line.active { stroke: #8b5cf6; }
+
+/* Canvas grid */
+.nb-canvas {
+  background-color: hsl(var(--background));
+  background-image:
+    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.18) 1px, transparent 0),
+    radial-gradient(circle at 1px 1px, hsl(var(--muted-foreground) / 0.09) 1px, transparent 0);
+  background-size: 20px 20px, 100px 100px;
+}
+
+/* Ensure crisp text and images at all zoom levels */
+.nb-node * {
+  text-rendering: optimizeLegibility;
+  shape-rendering: crispEdges;
+}
+
+.nb-node img {
+  image-rendering: auto; /* Keep images smooth */
+  image-rendering: -webkit-optimize-contrast;
+}
+
+.nb-node input,
+.nb-node select,
+.nb-node textarea,
+.nb-node button {
+  transform: translateZ(0);
+  -webkit-font-smoothing: subpixel-antialiased;
+  font-smoothing: subpixel-antialiased;
+}
+
+/* Force GPU acceleration for transforms */
+.nb-canvas > div {
+  transform-style: preserve-3d;
+  -webkit-transform-style: preserve-3d;
+}
+
+/* Prevent blur on scaled elements */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  .nb-node {
+    -webkit-backface-visibility: hidden;
+    -webkit-transform: translateZ(0) scale(1.0, 1.0);
+  }
+}

app/layout.tsx

@@ -0,0 +1,34 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Nano Banana Editor",
+  description: "Node-based photo editor for characters",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body
+        className={`${geistSans.variable} ${geistMono.variable} antialiased bg-background text-foreground font-sans`}
+      >
+        {children}
+      </body>
+    </html>
+  );
+}

app/nodes.tsx

@@ -0,0 +1,1109 @@
+"use client";
+
+import React, { useState, useRef, useEffect } from "react";
+import { Button } from "../components/ui/button";
+import { Select } from "../components/ui/select";
+import { Textarea } from "../components/ui/textarea";
+import { Label } from "../components/ui/label";
+import { Slider } from "../components/ui/slider";
+import { ColorPicker } from "../components/ui/color-picker";
+import { Checkbox } from "../components/ui/checkbox";
+
+// Helper function to download image
+function downloadImage(dataUrl: string, filename: string) {
+  const link = document.createElement('a');
+  link.href = dataUrl;
+  link.download = filename;
+  document.body.appendChild(link);
+  link.click();
+  document.body.removeChild(link);
+}
+
+// Import types (we'll need to export these from page.tsx)
+type BackgroundNode = any;
+type ClothesNode = any;
+type BlendNode = any;
+type EditNode = any;
+type CameraNode = any;
+type AgeNode = any;
+type FaceNode = any;
+
+function cx(...args: Array<string | false | null | undefined>) {
+  return args.filter(Boolean).join(" ");
+}
+
+// Reusable drag hook for all nodes
+function useNodeDrag(node: any, onUpdatePosition?: (id: string, x: number, y: number) => void) {
+  const [localPos, setLocalPos] = useState({ x: node.x, y: node.y });
+  const dragging = useRef(false);
+  const start = useRef<{ sx: number; sy: number; ox: number; oy: number } | null>(null);
+  
+  useEffect(() => {
+    setLocalPos({ x: node.x, y: node.y });
+  }, [node.x, node.y]);
+  
+  const onPointerDown = (e: React.PointerEvent) => {
+    e.stopPropagation();
+    dragging.current = true;
+    start.current = { sx: e.clientX, sy: e.clientY, ox: localPos.x, oy: localPos.y };
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  };
+  
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!dragging.current || !start.current) return;
+    const dx = e.clientX - start.current.sx;
+    const dy = e.clientY - start.current.sy;
+    const newX = start.current.ox + dx;
+    const newY = start.current.oy + dy;
+    setLocalPos({ x: newX, y: newY });
+    if (onUpdatePosition) onUpdatePosition(node.id, newX, newY);
+  };
+  
+  const onPointerUp = (e: React.PointerEvent) => {
+    dragging.current = false;
+    start.current = null;
+    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+  };
+  
+  return { localPos, onPointerDown, onPointerMove, onPointerUp };
+}
+
+function Port({ 
+  className, 
+  nodeId,
+  isOutput,
+  onStartConnection,
+  onEndConnection
+}: { 
+  className?: string;
+  nodeId?: string;
+  isOutput?: boolean;
+  onStartConnection?: (nodeId: string) => void;
+  onEndConnection?: (nodeId: string) => void;
+}) {
+  const handlePointerDown = (e: React.PointerEvent) => {
+    e.stopPropagation();
+    if (isOutput && nodeId && onStartConnection) {
+      onStartConnection(nodeId);
+    }
+  };
+  
+  const handlePointerUp = (e: React.PointerEvent) => {
+    e.stopPropagation();
+    if (!isOutput && nodeId && onEndConnection) {
+      onEndConnection(nodeId);
+    }
+  };
+
+  return (
+    <div 
+      className={cx("nb-port", className)} 
+      onPointerDown={handlePointerDown}
+      onPointerUp={handlePointerUp}
+      onPointerEnter={handlePointerUp}
+    />
+  );
+}
+
+export function BackgroundNodeView({
+  node,
+  onDelete,
+  onUpdate,
+  onStartConnection,
+  onEndConnection,
+  onProcess,
+  onUpdatePosition,
+}: any) {
+  const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
+  
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.files?.length) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        onUpdate(node.id, { customBackgroundImage: reader.result });
+      };
+      reader.readAsDataURL(e.target.files[0]);
+    }
+  };
+  
+  const handleImagePaste = (e: React.ClipboardEvent) => {
+    const items = e.clipboardData.items;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.startsWith("image/")) {
+        const file = items[i].getAsFile();
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = () => {
+            onUpdate(node.id, { customBackgroundImage: reader.result });
+          };
+          reader.readAsDataURL(file);
+          return;
+        }
+      }
+    }
+    const text = e.clipboardData.getData("text");
+    if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
+      onUpdate(node.id, { customBackgroundImage: text });
+    }
+  };
+  
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    const files = e.dataTransfer.files;
+    if (files && files.length) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        onUpdate(node.id, { customBackgroundImage: reader.result });
+      };
+      reader.readAsDataURL(files[0]);
+    }
+  };
+  
+  return (
+    <div 
+      className="nb-node absolute text-white w-[320px]" 
+      style={{ left: localPos.x, top: localPos.y }}
+      onDrop={handleDrop}
+      onDragOver={(e) => e.preventDefault()}
+      onPaste={handleImagePaste}
+    >
+      <div 
+        className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+      >
+        <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
+        <div className="font-semibold text-sm flex-1 text-center">BACKGROUND</div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive hover:bg-destructive/20 h-6 w-6"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
+          <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
+        </div>
+      </div>
+      <div className="p-3 space-y-3">
+        <Select 
+          className="w-full"
+          value={node.backgroundType || "color"}
+          onChange={(e) => onUpdate(node.id, { backgroundType: (e.target as HTMLSelectElement).value })}
+        >
+          <option value="color">Solid Color</option>
+          <option value="image">Preset Background</option>
+          <option value="upload">Upload Image</option>
+          <option value="custom">Custom Prompt</option>
+        </Select>
+        
+        {node.backgroundType === "color" && (
+          <ColorPicker
+            className="w-full"
+            value={node.backgroundColor || "#ffffff"}
+            onChange={(e) => onUpdate(node.id, { backgroundColor: (e.target as HTMLInputElement).value })}
+          />
+        )}
+        
+        {node.backgroundType === "image" && (
+          <Select 
+            className="w-full"
+            value={node.backgroundImage || ""}
+            onChange={(e) => onUpdate(node.id, { backgroundImage: (e.target as HTMLSelectElement).value })}
+          >
+            <option value="">Select Background</option>
+            <option value="beach">Beach</option>
+            <option value="office">Office</option>
+            <option value="studio">Studio</option>
+            <option value="nature">Nature</option>
+            <option value="city">City Skyline</option>
+          </Select>
+        )}
+        
+        {node.backgroundType === "upload" && (
+          <div className="space-y-2">
+            {node.customBackgroundImage ? (
+              <div className="relative">
+                <img src={node.customBackgroundImage} className="w-full rounded" alt="Custom Background" />
+                <Button 
+                  variant="destructive"
+                  size="sm"
+                  className="absolute top-2 right-2"
+                  onClick={() => onUpdate(node.id, { customBackgroundImage: null })}
+                >
+                  Remove
+                </Button>
+              </div>
+            ) : (
+              <label className="block">
+                <input
+                  type="file"
+                  accept="image/*"
+                  className="hidden"
+                  onChange={handleImageUpload}
+                />
+                <div className="border-2 border-dashed border-white/20 rounded-lg p-4 text-center cursor-pointer hover:border-white/40">
+                  <p className="text-xs text-white/60">Drop, upload, or paste background image</p>
+                  <p className="text-xs text-white/40 mt-1">JPG, PNG, WEBP</p>
+                </div>
+              </label>
+            )}
+          </div>
+        )}
+        
+        {node.backgroundType === "custom" && (
+          <Textarea
+            className="w-full"
+            placeholder="Describe the background..."
+            value={node.customPrompt || ""}
+            onChange={(e) => onUpdate(node.id, { customPrompt: (e.target as HTMLTextAreaElement).value })}
+            rows={2}
+          />
+        )}
+        
+        <Button 
+          className="w-full"
+          onClick={() => onProcess(node.id)}
+          disabled={node.isRunning}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
+        >
+          {node.isRunning ? "Processing..." : "Apply Background"}
+        </Button>
+        
+        {node.output && (
+          <div className="space-y-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <Button
+              className="w-full"
+              variant="secondary"
+              onClick={() => downloadImage(node.output, `background-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </Button>
+          </div>
+        )}
+        {node.error && (
+          <div className="text-xs text-red-400 mt-2">{node.error}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+  const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
+  
+  const presetClothes = [
+    { name: "Sukajan", path: "/sukajan.png" },
+    { name: "Blazer", path: "/blazzer.png" },
+  ];
+
+  const onDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    const files = e.dataTransfer.files;
+    if (files && files.length) {
+      const reader = new FileReader();
+      reader.onload = () => onUpdate(node.id, { clothesImage: reader.result, selectedPreset: null });
+      reader.readAsDataURL(files[0]);
+    }
+  };
+
+  const onPaste = async (e: React.ClipboardEvent) => {
+    const items = e.clipboardData.items;
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.startsWith("image/")) {
+        const file = items[i].getAsFile();
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = () => onUpdate(node.id, { clothesImage: reader.result, selectedPreset: null });
+          reader.readAsDataURL(file);
+          return;
+        }
+      }
+    }
+    const text = e.clipboardData.getData("text");
+    if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
+      onUpdate(node.id, { clothesImage: text, selectedPreset: null });
+    }
+  };
+
+  const selectPreset = (presetPath: string, presetName: string) => {
+    onUpdate(node.id, { clothesImage: presetPath, selectedPreset: presetName });
+  };
+  
+  return (
+    <div 
+      className="nb-node absolute text-white w-[320px]"
+      style={{ left: localPos.x, top: localPos.y }}
+      onDrop={onDrop}
+      onDragOver={(e) => e.preventDefault()}
+      onPaste={onPaste}
+    >
+      <div 
+        className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+      >
+        <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
+        <div className="font-semibold text-sm flex-1 text-center">CLOTHES</div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive hover:bg-destructive/20 h-6 w-6"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
+          <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
+        </div>
+      </div>
+      <div className="p-3 space-y-3">
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
+        <div className="text-xs text-white/70">Clothes Reference</div>
+        
+        {/* Preset clothes options */}
+        <div className="flex gap-2">
+          {presetClothes.map((preset) => (
+            <button
+              key={preset.name}
+              className={`flex-1 p-2 rounded border ${
+                node.selectedPreset === preset.name
+                  ? "border-indigo-400 bg-indigo-500/20"
+                  : "border-white/20 hover:border-white/40"
+              }`}
+              onClick={() => selectPreset(preset.path, preset.name)}
+            >
+              <img src={preset.path} alt={preset.name} className="w-full h-16 object-cover rounded mb-1" />
+              <div className="text-xs">{preset.name}</div>
+            </button>
+          ))}
+        </div>
+        
+        <div className="text-xs text-white/50 text-center">— or —</div>
+        
+        {/* Custom image upload */}
+        {node.clothesImage && !node.selectedPreset ? (
+          <div className="relative">
+            <img src={node.clothesImage} className="w-full rounded" alt="Clothes" />
+            <Button 
+              variant="destructive"
+              size="sm"
+              className="absolute top-2 right-2"
+              onClick={() => onUpdate(node.id, { clothesImage: null, selectedPreset: null })}
+            >
+              Remove
+            </Button>
+          </div>
+        ) : !node.selectedPreset ? (
+          <label className="block">
+            <input
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={(e) => {
+                if (e.target.files?.length) {
+                  const reader = new FileReader();
+                  reader.onload = () => onUpdate(node.id, { clothesImage: reader.result, selectedPreset: null });
+                  reader.readAsDataURL(e.target.files[0]);
+                }
+              }}
+            />
+            <div className="border-2 border-dashed border-white/20 rounded-lg p-4 text-center cursor-pointer hover:border-white/40">
+              <p className="text-xs text-white/60">Drop, upload, or paste clothes image</p>
+            </div>
+          </label>
+        ) : null}
+        
+        <Button 
+          className="w-full"
+          onClick={() => onProcess(node.id)}
+          disabled={node.isRunning || !node.clothesImage}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
+        >
+          {node.isRunning ? "Processing..." : "Apply Clothes"}
+        </Button>
+        {node.output && (
+          <div className="space-y-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <Button
+              className="w-full"
+              variant="secondary"
+              onClick={() => downloadImage(node.output, `clothes-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </Button>
+          </div>
+        )}
+        {node.error && (
+          <div className="text-xs text-red-400 mt-2">{node.error}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+  const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
+  
+  return (
+    <div className="nb-node absolute text-white w-[280px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div 
+        className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+      >
+        <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
+        <div className="font-semibold text-sm flex-1 text-center">AGE</div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive hover:bg-destructive/20 h-6 w-6"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
+          <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
+        </div>
+      </div>
+      <div className="p-3 space-y-3">
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
+        <div>
+          <Slider
+            label="Target Age"
+            valueLabel={`${node.targetAge || 30} years`}
+            min={18}
+            max={100}
+            value={node.targetAge || 30}
+            onChange={(e) => onUpdate(node.id, { targetAge: parseInt((e.target as HTMLInputElement).value) })}
+          />
+        </div>
+        <Button 
+          className="w-full"
+          onClick={() => onProcess(node.id)}
+          disabled={node.isRunning}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
+        >
+          {node.isRunning ? "Processing..." : "Apply Age"}
+        </Button>
+        {node.output && (
+          <div className="space-y-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <Button
+              className="w-full"
+              variant="secondary"
+              onClick={() => downloadImage(node.output, `age-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </Button>
+          </div>
+        )}
+        {node.error && (
+          <div className="text-xs text-red-400 mt-2">{node.error}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+  const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
+  const focalLengths = ["None", "8mm fisheye", "12mm", "24mm", "35mm", "50mm", "85mm", "135mm", "200mm", "300mm", "400mm"];
+  const apertures = ["None", "f/0.95", "f/1.2", "f/1.4", "f/1.8", "f/2", "f/2.8", "f/4", "f/5.6", "f/8", "f/11", "f/16", "f/22"];
+  const shutterSpeeds = ["None", "1/8000s", "1/4000s", "1/2000s", "1/1000s", "1/500s", "1/250s", "1/125s", "1/60s", "1/30s", "1/15s", "1/8s", "1/4s", "1/2s", "1s", "2s", "5s", "10s", "30s"];
+  const whiteBalances = ["None", "2800K candlelight", "3200K tungsten", "4000K fluorescent", "5600K daylight", "6500K cloudy", "7000K shade", "8000K blue sky"];
+  const angles = ["None", "eye level", "low angle", "high angle", "Dutch tilt", "bird's eye", "worm's eye", "over the shoulder", "POV"];
+  const isoValues = ["None", "ISO 50", "ISO 100", "ISO 200", "ISO 400", "ISO 800", "ISO 1600", "ISO 3200", "ISO 6400", "ISO 12800"];
+  const filmStyles = ["None", "Kodak Portra", "Fuji Velvia", "Ilford HP5", "Cinestill 800T", "Lomography", "Cross Process", "Black & White", "Sepia", "Vintage", "Film Noir"];
+  const lightingTypes = ["None", "Natural Light", "Golden Hour", "Blue Hour", "Studio Lighting", "Rembrandt", "Split Lighting", "Butterfly Lighting", "Loop Lighting", "Rim Lighting", "Silhouette", "High Key", "Low Key"];
+  const bokehStyles = ["None", "Smooth Bokeh", "Swirly Bokeh", "Hexagonal Bokeh", "Cat Eye Bokeh", "Bubble Bokeh", "Creamy Bokeh"];
+  const compositions = ["None", "Rule of Thirds", "Golden Ratio", "Symmetrical", "Leading Lines", "Frame in Frame", "Fill the Frame", "Negative Space", "Patterns", "Diagonal"];
+  const aspectRatios = ["None", "1:1 Square", "3:2 Standard", "4:3 Classic", "16:9 Widescreen", "21:9 Cinematic", "9:16 Portrait", "4:5 Instagram", "2:3 Portrait"];
+
+  return (
+    <div className="nb-node absolute text-white w-[360px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div 
+        className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+      >
+        <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
+        <div className="font-semibold text-sm flex-1 text-center">CAMERA</div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive hover:bg-destructive/20 h-6 w-6"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
+          <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
+        </div>
+      </div>
+      <div className="p-3 space-y-2 max-h-[500px] overflow-y-auto scrollbar-thin">
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
+        {/* Basic Camera Settings */}
+        <div className="text-xs text-white/50 font-semibold mb-1">Basic Settings</div>
+        <div className="grid grid-cols-2 gap-2">
+          <div>
+            <label className="text-xs text-white/70">Focal Length</label>
+            <Select 
+              className="w-full"
+              value={node.focalLength || "None"}
+              onChange={(e) => onUpdate(node.id, { focalLength: (e.target as HTMLSelectElement).value })}
+            >
+              {focalLengths.map(f => <option key={f} value={f}>{f}</option>)}
+            </Select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">Aperture</label>
+            <Select 
+              className="w-full"
+              value={node.aperture || "None"}
+              onChange={(e) => onUpdate(node.id, { aperture: (e.target as HTMLSelectElement).value })}
+            >
+              {apertures.map(a => <option key={a} value={a}>{a}</option>)}
+            </Select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">Shutter Speed</label>
+            <Select 
+              className="w-full"
+              value={node.shutterSpeed || "None"}
+              onChange={(e) => onUpdate(node.id, { shutterSpeed: (e.target as HTMLSelectElement).value })}
+            >
+              {shutterSpeeds.map(s => <option key={s} value={s}>{s}</option>)}
+            </Select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">ISO</label>
+            <Select 
+              className="w-full"
+              value={node.iso || "None"}
+              onChange={(e) => onUpdate(node.id, { iso: (e.target as HTMLSelectElement).value })}
+            >
+              {isoValues.map(i => <option key={i} value={i}>{i}</option>)}
+            </Select>
+          </div>
+        </div>
+        
+        {/* Creative Settings */}
+        <div className="text-xs text-white/50 font-semibold mb-1 mt-3">Creative Settings</div>
+        <div className="grid grid-cols-2 gap-2">
+          <div>
+            <label className="text-xs text-white/70">White Balance</label>
+            <Select 
+              className="w-full"
+              value={node.whiteBalance || "None"}
+              onChange={(e) => onUpdate(node.id, { whiteBalance: (e.target as HTMLSelectElement).value })}
+            >
+              {whiteBalances.map(w => <option key={w} value={w}>{w}</option>)}
+            </Select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">Film Style</label>
+            <Select 
+              className="w-full"
+              value={node.filmStyle || "None"}
+              onChange={(e) => onUpdate(node.id, { filmStyle: (e.target as HTMLSelectElement).value })}
+            >
+              {filmStyles.map(f => <option key={f} value={f}>{f}</option>)}
+            </Select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">Lighting</label>
+            <Select 
+              className="w-full"
+              value={node.lighting || "None"}
+              onChange={(e) => onUpdate(node.id, { lighting: (e.target as HTMLSelectElement).value })}
+            >
+              {lightingTypes.map(l => <option key={l} value={l}>{l}</option>)}
+            </Select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">Bokeh Style</label>
+            <Select 
+              className="w-full"
+              value={node.bokeh || "None"}
+              onChange={(e) => onUpdate(node.id, { bokeh: (e.target as HTMLSelectElement).value })}
+            >
+              {bokehStyles.map(b => <option key={b} value={b}>{b}</option>)}
+            </Select>
+          </div>
+        </div>
+        
+        {/* Composition Settings */}
+        <div className="text-xs text-white/50 font-semibold mb-1 mt-3">Composition</div>
+        <div className="grid grid-cols-2 gap-2">
+          <div>
+            <label className="text-xs text-white/70">Camera Angle</label>
+            <Select 
+              className="w-full"
+              value={node.angle || "None"}
+              onChange={(e) => onUpdate(node.id, { angle: (e.target as HTMLSelectElement).value })}
+            >
+              {angles.map(a => <option key={a} value={a}>{a}</option>)}
+            </Select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">Composition</label>
+            <Select 
+              className="w-full"
+              value={node.composition || "None"}
+              onChange={(e) => onUpdate(node.id, { composition: (e.target as HTMLSelectElement).value })}
+            >
+              {compositions.map(c => <option key={c} value={c}>{c}</option>)}
+            </Select>
+          </div>
+          <div>
+            <label className="text-xs text-white/70">Aspect Ratio</label>
+            <Select 
+              className="w-full"
+              value={node.aspectRatio || "None"}
+              onChange={(e) => onUpdate(node.id, { aspectRatio: (e.target as HTMLSelectElement).value })}
+            >
+              {aspectRatios.map(a => <option key={a} value={a}>{a}</option>)}
+            </Select>
+          </div>
+        </div>
+        <Button 
+          className="w-full"
+          onClick={() => onProcess(node.id)}
+          disabled={node.isRunning}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
+        >
+          {node.isRunning ? "Processing..." : "Apply Camera Settings"}
+        </Button>
+        {node.output && (
+          <div className="space-y-2 mt-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <Button
+              className="w-full"
+              variant="secondary"
+              onClick={() => downloadImage(node.output, `camera-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </Button>
+          </div>
+        )}
+        {node.error && (
+          <div className="text-xs text-red-400 mt-2">{node.error}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+  const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
+  const hairstyles = ["None", "short", "long", "curly", "straight", "bald", "mohawk", "ponytail"];
+  const expressions = ["None", "happy", "serious", "smiling", "laughing", "sad", "surprised", "angry"];
+  const beardStyles = ["None", "stubble", "goatee", "full beard", "mustache", "clean shaven"];
+
+  return (
+    <div className="nb-node absolute text-white w-[340px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div 
+        className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+      >
+        <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
+        <div className="font-semibold text-sm flex-1 text-center">FACE</div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive hover:bg-destructive/20 h-6 w-6"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
+          <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
+        </div>
+      </div>
+      <div className="p-3 space-y-2">
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
+        <div className="space-y-2">
+          <label className="flex items-center gap-2 text-xs">
+            <Checkbox 
+              checked={node.faceOptions?.removePimples || false}
+              onChange={(e) => onUpdate(node.id, { 
+                faceOptions: { ...node.faceOptions, removePimples: (e.target as HTMLInputElement).checked }
+              })}
+            />
+            Remove pimples
+          </label>
+          <label className="flex items-center gap-2 text-xs">
+            <Checkbox 
+              checked={node.faceOptions?.addSunglasses || false}
+              onChange={(e) => onUpdate(node.id, { 
+                faceOptions: { ...node.faceOptions, addSunglasses: (e.target as HTMLInputElement).checked }
+              })}
+            />
+            Add sunglasses
+          </label>
+          <label className="flex items-center gap-2 text-xs">
+            <Checkbox 
+              checked={node.faceOptions?.addHat || false}
+              onChange={(e) => onUpdate(node.id, { 
+                faceOptions: { ...node.faceOptions, addHat: (e.target as HTMLInputElement).checked }
+              })}
+            />
+            Add hat
+          </label>
+        </div>
+        
+        <div>
+          <label className="text-xs text-white/70">Hairstyle</label>
+          <Select 
+            className="w-full"
+            value={node.faceOptions?.changeHairstyle || "None"}
+            onChange={(e) => onUpdate(node.id, { 
+              faceOptions: { ...node.faceOptions, changeHairstyle: (e.target as HTMLSelectElement).value }
+            })}
+          >
+            {hairstyles.map(h => <option key={h} value={h}>{h}</option>)}
+          </Select>
+        </div>
+        
+        <div>
+          <label className="text-xs text-white/70">Expression</label>
+          <Select 
+            className="w-full"
+            value={node.faceOptions?.facialExpression || "None"}
+            onChange={(e) => onUpdate(node.id, { 
+              faceOptions: { ...node.faceOptions, facialExpression: (e.target as HTMLSelectElement).value }
+            })}
+          >
+            {expressions.map(e => <option key={e} value={e}>{e}</option>)}
+          </Select>
+        </div>
+        
+        <div>
+          <label className="text-xs text-white/70">Beard</label>
+          <Select 
+            className="w-full"
+            value={node.faceOptions?.beardStyle || "None"}
+            onChange={(e) => onUpdate(node.id, { 
+              faceOptions: { ...node.faceOptions, beardStyle: (e.target as HTMLSelectElement).value }
+            })}
+          >
+            {beardStyles.map(b => <option key={b} value={b}>{b}</option>)}
+          </Select>
+        </div>
+        
+        <Button 
+          className="w-full"
+          onClick={() => onProcess(node.id)}
+          disabled={node.isRunning}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
+        >
+          {node.isRunning ? "Processing..." : "Apply Face Changes"}
+        </Button>
+        {node.output && (
+          <div className="space-y-2 mt-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <Button
+              className="w-full"
+              variant="secondary"
+              onClick={() => downloadImage(node.output, `face-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </Button>
+          </div>
+        )}
+        {node.error && (
+          <div className="text-xs text-red-400 mt-2">{node.error}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+  const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
+  
+  const styleOptions = [
+    { value: "90s-anime", label: "90's Anime Style" },
+    { value: "mha", label: "My Hero Academia Style" },
+    { value: "dbz", label: "Dragon Ball Z Style" },
+    { value: "ukiyo-e", label: "Ukiyo-e Style" },
+    { value: "cyberpunk", label: "Cyberpunk Style" },
+    { value: "steampunk", label: "Steampunk Style" },
+    { value: "cubism", label: "Cubism Style" },
+    { value: "van-gogh", label: "Post-Impressionist (Van Gogh) Style" },
+    { value: "simpsons", label: "Simpsons Style" },
+    { value: "family-guy", label: "Family Guy Style" },
+    { value: "arcane", label: "Arcane – Painterly + Neon Rim Light" },
+    { value: "wildwest", label: "Wild West Style" },
+    { value: "stranger-things", label: "Stranger Things – 80s Kodak Style" },
+    { value: "breaking-bad", label: "Breaking Bad – Dusty Orange & Teal" },
+  ];
+  
+  return (
+    <div 
+      className="nb-node absolute text-white w-[320px]" 
+      style={{ left: localPos.x, top: localPos.y }}
+    >
+      <div 
+        className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+      >
+        <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
+        <div className="font-semibold text-sm flex-1 text-center">STYLE</div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive hover:bg-destructive/20 h-6 w-6"
+            onClick={(e) => {
+              e.stopPropagation();
+              e.preventDefault();
+              if (confirm('Delete this node?')) {
+                onDelete(node.id);
+              }
+            }}
+            onPointerDown={(e) => e.stopPropagation()}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
+          <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
+        </div>
+      </div>
+      <div className="p-3 space-y-3">
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
+        <div className="text-xs text-white/70">Art Style</div>
+        <div className="text-xs text-white/50 mb-2">Select an artistic style to apply to your image</div>
+        <Select
+          className="w-full bg-black border-white/20 text-white focus:border-white/40 [&>option]:bg-black [&>option]:text-white"
+          value={node.stylePreset || ""}
+          onChange={(e) => onUpdate(node.id, { stylePreset: (e.target as HTMLSelectElement).value })}
+        >
+          <option value="" className="bg-black">Select a style...</option>
+          {styleOptions.map(opt => (
+            <option key={opt.value} value={opt.value} className="bg-black">
+              {opt.label}
+            </option>
+          ))}
+        </Select>
+        <div>
+          <Slider
+            label="Style Strength"
+            valueLabel={`${node.styleStrength || 50}%`}
+            min={0}
+            max={100}
+            value={node.styleStrength || 50}
+            onChange={(e) => onUpdate(node.id, { styleStrength: parseInt((e.target as HTMLInputElement).value) })}
+          />
+        </div>
+        <Button 
+          className="w-full"
+          onClick={() => onProcess(node.id)}
+          disabled={node.isRunning || !node.stylePreset}
+          title={!node.input ? "Connect an input first" : !node.stylePreset ? "Select a style first" : "Apply the style to your input image"}
+        >
+          {node.isRunning ? "Applying Style..." : "Apply Style Transfer"}
+        </Button>
+        {node.output && (
+          <div className="space-y-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <Button
+              className="w-full"
+              variant="secondary"
+              onClick={() => downloadImage(node.output, `style-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </Button>
+          </div>
+        )}
+        {node.error && (
+          <div className="text-xs text-red-400 mt-2">{node.error}</div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function EditNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+  const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
+  
+  return (
+    <div className="nb-node absolute text-white w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
+      <div 
+        className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+      >
+        <Port className="in" nodeId={node.id} isOutput={false} onEndConnection={onEndConnection} />
+        <div className="font-semibold text-sm flex-1 text-center">EDIT</div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="text-destructive hover:bg-destructive/20 h-6 w-6"
+            onClick={() => onDelete(node.id)}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
+          <Port className="out" nodeId={node.id} isOutput={true} onStartConnection={onStartConnection} />
+        </div>
+      </div>
+      <div className="p-3 space-y-3">
+        {node.input && (
+          <div className="flex justify-end mb-2">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => onUpdate(node.id, { input: undefined })}
+              className="text-xs"
+            >
+              Clear Connection
+            </Button>
+          </div>
+        )}
+        <Textarea
+          className="w-full"
+          placeholder="Describe what to edit (e.g., 'make it brighter', 'add more contrast', 'make it look vintage')"
+          value={node.editPrompt || ""}
+          onChange={(e) => onUpdate(node.id, { editPrompt: (e.target as HTMLTextAreaElement).value })}
+          rows={3}
+        />
+        <Button 
+          className="w-full"
+          onClick={() => onProcess(node.id)}
+          disabled={node.isRunning}
+          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
+        >
+          {node.isRunning ? "Processing..." : "Apply Edit"}
+        </Button>
+        {node.output && (
+          <div className="space-y-2">
+            <img src={node.output} className="w-full rounded" alt="Output" />
+            <Button
+              className="w-full"
+              variant="secondary"
+              onClick={() => downloadImage(node.output, `edit-${Date.now()}.png`)}
+            >
+              📥 Download Output
+            </Button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

app/page.tsx

@@ -0,0 +1,1861 @@
+"use client";
+
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import "./editor.css";
+import {
+  BackgroundNodeView,
+  ClothesNodeView,
+  StyleNodeView,
+  EditNodeView,
+  CameraNodeView,
+  AgeNodeView,
+  FaceNodeView
+} from "./nodes";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+
+function cx(...args: Array<string | false | null | undefined>) {
+  return args.filter(Boolean).join(" ");
+}
+
+// Simple ID helper
+const uid = () => Math.random().toString(36).slice(2, 9);
+
+// Generate merge prompt based on number of inputs
+function generateMergePrompt(characterData: { image: string; label: string }[]): string {
+  const count = characterData.length;
+  
+  const labels = characterData.map((d, i) => `Image ${i + 1} (${d.label})`).join(", ");
+  
+  return `MERGE TASK: Create a natural, cohesive group photo combining ALL subjects from ${count} provided images.
+
+Images provided:
+${characterData.map((d, i) => `- Image ${i + 1}: ${d.label}`).join("\n")}
+
+CRITICAL REQUIREMENTS:
+1. Extract ALL people/subjects from EACH image exactly as they appear
+2. Place them together in a SINGLE UNIFIED SCENE with:
+   - Consistent lighting direction and color temperature
+   - Matching shadows and ambient lighting
+   - Proper scale relationships (realistic relative sizes)
+   - Natural spacing as if they were photographed together
+   - Shared environment/background that looks cohesive
+
+3. Composition guidelines:
+   - Arrange subjects at similar depth (not one far behind another)
+   - Use natural group photo positioning (slight overlap is ok)
+   - Ensure all faces are clearly visible
+   - Create visual balance in the composition
+   - Apply consistent color grading across all subjects
+
+4. Environmental unity:
+   - Use a single, coherent background for all subjects
+   - Match the perspective as if taken with one camera
+   - Ensure ground plane continuity (all standing on same level)
+   - Apply consistent atmospheric effects (if any)
+
+The result should look like all subjects were photographed together in the same place at the same time, NOT like separate images placed side by side.`;
+}
+
+// Types
+type NodeType = "CHARACTER" | "MERGE" | "BACKGROUND" | "CLOTHES" | "STYLE" | "EDIT" | "CAMERA" | "AGE" | "FACE" | "BLEND";
+
+type NodeBase = {
+  id: string;
+  type: NodeType;
+  x: number; // world coords
+  y: number; // world coords
+};
+
+type CharacterNode = NodeBase & {
+  type: "CHARACTER";
+  image: string; // data URL or http URL
+  label?: string;
+};
+
+type MergeNode = NodeBase & {
+  type: "MERGE";
+  inputs: string[]; // node ids
+  output?: string | null; // data URL from merge
+  isRunning?: boolean;
+  error?: string | null;
+};
+
+type BackgroundNode = NodeBase & {
+  type: "BACKGROUND";
+  input?: string; // node id
+  output?: string;
+  backgroundType: "color" | "image" | "upload" | "custom";
+  backgroundColor?: string;
+  backgroundImage?: string;
+  customBackgroundImage?: string;
+  customPrompt?: string;
+  isRunning?: boolean;
+  error?: string | null;
+};
+
+type ClothesNode = NodeBase & {
+  type: "CLOTHES";
+  input?: string;
+  output?: string;
+  clothesImage?: string;
+  selectedPreset?: string;
+  clothesPrompt?: string;
+  isRunning?: boolean;
+  error?: string | null;
+};
+
+type StyleNode = NodeBase & {
+  type: "STYLE";
+  input?: string;
+  output?: string;
+  stylePreset?: string;
+  styleStrength?: number;
+  isRunning?: boolean;
+  error?: string | null;
+};
+
+type EditNode = NodeBase & {
+  type: "EDIT";
+  input?: string;
+  output?: string;
+  editPrompt?: string;
+  isRunning?: boolean;
+  error?: string | null;
+};
+
+type CameraNode = NodeBase & {
+  type: "CAMERA";
+  input?: string;
+  output?: string;
+  focalLength?: string;
+  aperture?: string;
+  shutterSpeed?: string;
+  whiteBalance?: string;
+  angle?: string;
+  iso?: string;
+  filmStyle?: string;
+  lighting?: string;
+  bokeh?: string;
+  composition?: string;
+  aspectRatio?: string;
+  isRunning?: boolean;
+  error?: string | null;
+};
+
+type AgeNode = NodeBase & {
+  type: "AGE";
+  input?: string;
+  output?: string;
+  targetAge?: number;
+  isRunning?: boolean;
+  error?: string | null;
+};
+
+type FaceNode = NodeBase & {
+  type: "FACE";
+  input?: string;
+  output?: string;
+  faceOptions?: {
+    removePimples?: boolean;
+    addSunglasses?: boolean;
+    addHat?: boolean;
+    changeHairstyle?: string;
+    facialExpression?: string;
+    beardStyle?: string;
+  };
+  isRunning?: boolean;
+  error?: string | null;
+};
+
+type BlendNode = NodeBase & {
+  type: "BLEND";
+  input?: string;
+  output?: string;
+  blendStrength?: number;
+  isRunning?: boolean;
+  error?: string | null;
+};
+
+type AnyNode = CharacterNode | MergeNode | BackgroundNode | ClothesNode | StyleNode | EditNode | CameraNode | AgeNode | FaceNode | BlendNode;
+
+// Default placeholder portrait
+const DEFAULT_PERSON =
+  "https://images.unsplash.com/photo-1527980965255-d3b416303d12?q=80&w=640&auto=format&fit=crop";
+
+function toDataUrls(files: FileList | File[]): Promise<string[]> {
+  const arr = Array.from(files as File[]);
+  return Promise.all(
+    arr.map(
+      (file) =>
+        new Promise<string>((resolve, reject) => {
+          const r = new FileReader();
+          r.onload = () => resolve(r.result as string);
+          r.onerror = reject;
+          r.readAsDataURL(file);
+        })
+    )
+  );
+}
+
+// Viewport helpers
+function screenToWorld(
+  clientX: number,
+  clientY: number,
+  container: DOMRect,
+  tx: number,
+  ty: number,
+  scale: number
+) {
+  const x = (clientX - container.left - tx) / scale;
+  const y = (clientY - container.top - ty) / scale;
+  return { x, y };
+}
+
+function useNodeDrag(
+  nodeId: string,
+  scaleRef: React.MutableRefObject<number>, 
+  initial: { x: number; y: number },
+  onUpdatePosition: (id: string, x: number, y: number) => void
+) {
+  const [localPos, setLocalPos] = useState(initial);
+  const dragging = useRef(false);
+  const start = useRef<{ sx: number; sy: number; ox: number; oy: number } | null>(
+    null
+  );
+  
+  useEffect(() => {
+    setLocalPos(initial);
+  }, [initial.x, initial.y]);
+  
+  const onPointerDown = (e: React.PointerEvent) => {
+    e.stopPropagation();
+    dragging.current = true;
+    start.current = { sx: e.clientX, sy: e.clientY, ox: localPos.x, oy: localPos.y };
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  };
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!dragging.current || !start.current) return;
+    const dx = (e.clientX - start.current.sx) / scaleRef.current;
+    const dy = (e.clientY - start.current.sy) / scaleRef.current;
+    const newX = start.current.ox + dx;
+    const newY = start.current.oy + dy;
+    setLocalPos({ x: newX, y: newY });
+    onUpdatePosition(nodeId, newX, newY);
+  };
+  const onPointerUp = (e: React.PointerEvent) => {
+    dragging.current = false;
+    start.current = null;
+    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+  };
+  return { pos: localPos, onPointerDown, onPointerMove, onPointerUp };
+}
+
+function Port({ 
+  className, 
+  nodeId,
+  isOutput,
+  onStartConnection,
+  onEndConnection
+}: { 
+  className?: string;
+  nodeId?: string;
+  isOutput?: boolean;
+  onStartConnection?: (nodeId: string) => void;
+  onEndConnection?: (nodeId: string) => void;
+}) {
+  const handlePointerDown = (e: React.PointerEvent) => {
+    e.stopPropagation();
+    if (isOutput && nodeId && onStartConnection) {
+      onStartConnection(nodeId);
+    }
+  };
+  
+  const handlePointerUp = (e: React.PointerEvent) => {
+    e.stopPropagation();
+    if (!isOutput && nodeId && onEndConnection) {
+      onEndConnection(nodeId);
+    }
+  };
+
+  return (
+    <div 
+      className={cx("nb-port", className)} 
+      onPointerDown={handlePointerDown}
+      onPointerUp={handlePointerUp}
+      onPointerEnter={handlePointerUp}
+    />
+  );
+}
+
+function CharacterNodeView({
+  node,
+  scaleRef,
+  onChangeImage,
+  onChangeLabel,
+  onStartConnection,
+  onUpdatePosition,
+  onDelete,
+}: {
+  node: CharacterNode;
+  scaleRef: React.MutableRefObject<number>;
+  onChangeImage: (id: string, url: string) => void;
+  onChangeLabel: (id: string, label: string) => void;
+  onStartConnection: (nodeId: string) => void;
+  onUpdatePosition: (id: string, x: number, y: number) => void;
+  onDelete: (id: string) => void;
+}) {
+  const { pos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(
+    node.id,
+    scaleRef, 
+    { x: node.x, y: node.y },
+    onUpdatePosition
+  );
+
+  const onDrop = async (e: React.DragEvent) => {
+    e.preventDefault();
+    const f = e.dataTransfer.files;
+    if (f && f.length) {
+      const [first] = await toDataUrls(f);
+      if (first) onChangeImage(node.id, first);
+    }
+  };
+
+  const onPaste = async (e: React.ClipboardEvent) => {
+    const items = e.clipboardData.items;
+    const files: File[] = [];
+    for (let i = 0; i < items.length; i++) {
+      const it = items[i];
+      if (it.type.startsWith("image/")) {
+        const f = it.getAsFile();
+        if (f) files.push(f);
+      }
+    }
+    if (files.length) {
+      const [first] = await toDataUrls(files);
+      if (first) onChangeImage(node.id, first);
+      return;
+    }
+    const text = e.clipboardData.getData("text");
+    if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
+      onChangeImage(node.id, text);
+    }
+  };
+
+  return (
+    <div
+      className="nb-node absolute text-white w-[340px] select-none"
+      style={{ left: pos.x, top: pos.y }}
+      onDrop={onDrop}
+      onDragOver={(e) => e.preventDefault()}
+      onPaste={onPaste}
+    >
+      <div
+        className="nb-header cursor-grab active:cursor-grabbing rounded-t-[14px] px-3 py-2 flex items-center justify-between"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+      >
+        <input
+          className="bg-transparent outline-none text-sm font-semibold tracking-wide flex-1"
+          value={node.label || "CHARACTER"}
+          onChange={(e) => onChangeLabel(node.id, e.target.value)}
+        />
+        <div className="flex items-center gap-2">
+          <Button 
+            variant="ghost" size="icon" className="text-destructive"
+            onClick={(e) => {
+              e.stopPropagation();
+              if (confirm('Delete MERGE node?')) {
+                onDelete(node.id);
+              }
+            }}
+            title="Delete node"
+            aria-label="Delete node"
+          >
+            ×
+          </Button>
+          <Port 
+            className="out" 
+            nodeId={node.id}
+            isOutput={true}
+            onStartConnection={onStartConnection}
+          />
+        </div>
+      </div>
+      <div className="p-3 space-y-3">
+        <div className="aspect-[4/5] w-full rounded-xl bg-black/40 grid place-items-center overflow-hidden">
+          <img
+            src={node.image}
+            alt="character"
+            className="h-full w-full object-contain"
+            draggable={false}
+          />
+        </div>
+        <div className="flex gap-2">
+          <label className="text-xs bg-white/10 hover:bg-white/20 rounded px-3 py-1 cursor-pointer">
+            Upload
+            <input
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={async (e) => {
+                const files = e.currentTarget.files;
+                if (files && files.length > 0) {
+                  const [first] = await toDataUrls(files);
+                  if (first) onChangeImage(node.id, first);
+                  // Reset input safely
+                  try {
+                    e.currentTarget.value = "";
+                  } catch {}
+                }
+              }}
+            />
+          </label>
+          <button
+            className="text-xs bg-white/10 hover:bg-white/20 rounded px-3 py-1"
+            onClick={async () => {
+              try {
+                const text = await navigator.clipboard.readText();
+                if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
+                  onChangeImage(node.id, text);
+                }
+              } catch {}
+            }}
+          >
+            Paste URL
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function MergeNodeView({
+  node,
+  scaleRef,
+  allNodes,
+  onDisconnect,
+  onRun,
+  onEndConnection,
+  onStartConnection,
+  onUpdatePosition,
+  onDelete,
+  onClearConnections,
+}: {
+  node: MergeNode;
+  scaleRef: React.MutableRefObject<number>;
+  allNodes: AnyNode[];
+  onDisconnect: (mergeId: string, nodeId: string) => void;
+  onRun: (mergeId: string) => void;
+  onEndConnection: (mergeId: string) => void;
+  onStartConnection: (nodeId: string) => void;
+  onUpdatePosition: (id: string, x: number, y: number) => void;
+  onDelete: (id: string) => void;
+  onClearConnections: (mergeId: string) => void;
+}) {
+  const { pos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(
+    node.id,
+    scaleRef,
+    { x: node.x, y: node.y },
+    onUpdatePosition
+  );
+
+
+  return (
+    <div className="nb-node absolute text-white w-[420px]" style={{ left: pos.x, top: pos.y }}>
+      <div
+        className="nb-header cursor-grab active:cursor-grabbing rounded-t-[14px] px-3 py-2 flex items-center justify-between"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={onPointerUp}
+      >
+        <Port 
+          className="in" 
+          nodeId={node.id}
+          isOutput={false}
+          onEndConnection={onEndConnection}
+        />
+        <div className="font-semibold tracking-wide text-sm flex-1 text-center">MERGE</div>
+        <div className="flex items-center gap-2">
+          <button
+            className="text-2xl leading-none font-bold text-red-400 hover:text-red-300 opacity-50 hover:opacity-100 transition-all hover:scale-110 px-1"
+            onClick={(e) => {
+              e.stopPropagation();
+              if (confirm('Delete MERGE node?')) {
+                onDelete(node.id);
+              }
+            }}
+            title="Delete node"
+          >
+            ×
+          </button>
+          <Port 
+            className="out" 
+            nodeId={node.id}
+            isOutput={true}
+            onStartConnection={onStartConnection}
+          />
+        </div>
+      </div>
+      <div className="p-3 space-y-3">
+        <div className="text-xs text-white/70">Inputs</div>
+        <div className="flex flex-wrap gap-2">
+          {node.inputs.map((id) => {
+            const inputNode = allNodes.find((n) => n.id === id);
+            if (!inputNode) return null;
+            
+            // Get image and label based on node type
+            let image: string | null = null;
+            let label = "";
+            
+            if (inputNode.type === "CHARACTER") {
+              image = (inputNode as CharacterNode).image;
+              label = (inputNode as CharacterNode).label || "Character";
+            } else if ((inputNode as any).output) {
+              image = (inputNode as any).output;
+              label = `${inputNode.type}`;
+            } else if (inputNode.type === "MERGE" && (inputNode as MergeNode).output) {
+              const mergeOutput = (inputNode as MergeNode).output;
+              image = mergeOutput !== undefined ? mergeOutput : null;
+              label = "Merged";
+            } else {
+              // Node without output yet
+              label = `${inputNode.type} (pending)`;
+            }
+            
+            return (
+              <div key={id} className="flex items-center gap-2 bg-white/10 rounded px-2 py-1">
+                {image && (
+                  <div className="w-6 h-6 rounded overflow-hidden bg-black/20">
+                    <img src={image} className="w-full h-full object-contain" alt="inp" />
+                  </div>
+                )}
+                <span className="text-xs">{label}</span>
+                <button
+                  className="text-[10px] text-red-300 hover:text-red-200"
+                  onClick={() => onDisconnect(node.id, id)}
+                >
+                  remove
+                </button>
+              </div>
+            );
+          })}
+        </div>
+        {node.inputs.length === 0 && (
+          <p className="text-xs text-white/40">Drag from any node's output port to connect</p>
+        )}
+        <div className="flex items-center gap-2">
+          {node.inputs.length > 0 && (
+            <Button
+              variant="destructive"
+              size="sm"
+              onClick={() => onClearConnections(node.id)}
+              title="Clear all connections"
+            >
+              Clear
+            </Button>
+          )}
+          <Button
+            size="sm"
+            onClick={() => onRun(node.id)}
+            disabled={node.isRunning || node.inputs.length < 2}
+          >
+            {node.isRunning ? "Merging…" : "Merge"}
+          </Button>
+        </div>
+
+        <div className="mt-2">
+          <div className="text-xs text-white/70 mb-1">Output</div>
+          <div className="w-full min-h-[200px] max-h-[400px] rounded-xl bg-black/40 grid place-items-center">
+            {node.output ? (
+              <img src={node.output} className="w-full h-auto max-h-[400px] object-contain rounded-xl" alt="output" />
+            ) : (
+              <span className="text-white/40 text-xs py-16">Run merge to see result</span>
+            )}
+          </div>
+          {node.output && (
+            <Button
+              className="w-full mt-2"
+              variant="secondary"
+              onClick={() => {
+                const link = document.createElement('a');
+                link.href = node.output as string;
+                link.download = `merge-${Date.now()}.png`;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+              }}
+            >
+              📥 Download Merged Image
+            </Button>
+          )}
+          {node.error && (
+            <div className="mt-2">
+              <div className="text-xs text-red-400">{node.error}</div>
+              {node.error.includes("API key") && (
+                <div className="text-xs text-white/50 mt-2 space-y-1">
+                  <p>To fix this:</p>
+                  <ol className="list-decimal list-inside space-y-1">
+                    <li>Get key from: <a href="https://aistudio.google.com/app/apikey" target="_blank" className="text-blue-400 hover:underline">Google AI Studio</a></li>
+                    <li>Edit .env.local file in project root</li>
+                    <li>Replace placeholder with your key</li>
+                    <li>Restart server (Ctrl+C, npm run dev)</li>
+                  </ol>
+                </div>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function EditorPage() {
+  const [nodes, setNodes] = useState<AnyNode[]>(() => [
+    {
+      id: uid(),
+      type: "CHARACTER",
+      x: 80,
+      y: 120,
+      image: DEFAULT_PERSON,
+      label: "CHARACTER 1",
+    } as CharacterNode,
+  ]);
+
+
+  // Viewport state
+  const [scale, setScale] = useState(1);
+  const [tx, setTx] = useState(0);
+  const [ty, setTy] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const scaleRef = useRef(scale);
+  useEffect(() => {
+    scaleRef.current = scale;
+  }, [scale]);
+
+  // Connection dragging state
+  const [draggingFrom, setDraggingFrom] = useState<string | null>(null);
+  const [dragPos, setDragPos] = useState<{x: number, y: number} | null>(null);
+  
+  // API Token state
+  const [apiToken, setApiToken] = useState<string>("");
+  const [showHelpSidebar, setShowHelpSidebar] = useState(false);
+
+  const characters = nodes.filter((n) => n.type === "CHARACTER") as CharacterNode[];
+  const merges = nodes.filter((n) => n.type === "MERGE") as MergeNode[];
+
+  // Editor actions
+  const addCharacter = (at?: { x: number; y: number }) => {
+    setNodes((prev) => [
+      ...prev,
+      {
+        id: uid(),
+        type: "CHARACTER",
+        x: at ? at.x : 80 + Math.random() * 60,
+        y: at ? at.y : 120 + Math.random() * 60,
+        image: DEFAULT_PERSON,
+        label: `CHARACTER ${prev.filter((n) => n.type === "CHARACTER").length + 1}`,
+      } as CharacterNode,
+    ]);
+  };
+  const addMerge = (at?: { x: number; y: number }) => {
+    setNodes((prev) => [
+      ...prev,
+      {
+        id: uid(),
+        type: "MERGE",
+        x: at ? at.x : 520,
+        y: at ? at.y : 160,
+        inputs: [],
+      } as MergeNode,
+    ]);
+  };
+
+  const setCharacterImage = (id: string, url: string) => {
+    setNodes((prev) =>
+      prev.map((n) => (n.id === id && n.type === "CHARACTER" ? { ...n, image: url } : n))
+    );
+  };
+  const setCharacterLabel = (id: string, label: string) => {
+    setNodes((prev) => prev.map((n) => (n.id === id && n.type === "CHARACTER" ? { ...n, label } : n)));
+  };
+
+  const updateNodePosition = (id: string, x: number, y: number) => {
+    setNodes((prev) => prev.map((n) => (n.id === id ? { ...n, x, y } : n)));
+  };
+
+  const deleteNode = (id: string) => {
+    setNodes((prev) => {
+      // If it's a MERGE node, just remove it
+      // If it's a CHARACTER node, also remove it from all MERGE inputs
+      return prev
+        .filter((n) => n.id !== id)
+        .map((n) => {
+          if (n.type === "MERGE") {
+            const merge = n as MergeNode;
+            return {
+              ...merge,
+              inputs: merge.inputs.filter((inputId) => inputId !== id),
+            };
+          }
+          return n;
+        });
+    });
+  };
+
+  const clearMergeConnections = (mergeId: string) => {
+    setNodes((prev) =>
+      prev.map((n) =>
+        n.id === mergeId && n.type === "MERGE"
+          ? { ...n, inputs: [] }
+          : n
+      )
+    );
+  };
+
+  // Update any node's properties
+  const updateNode = (id: string, updates: any) => {
+    setNodes((prev) => prev.map((n) => (n.id === id ? { ...n, ...updates } : n)));
+  };
+
+  // Handle single input connections for new nodes
+  const handleEndSingleConnection = (nodeId: string) => {
+    if (draggingFrom) {
+      // Find the source node
+      const sourceNode = nodes.find(n => n.id === draggingFrom);
+      if (sourceNode) {
+        // Allow connections from ANY node that has an output port
+        // This includes:
+        // - CHARACTER nodes (always have an image)
+        // - MERGE nodes (can have output after merging)
+        // - Any processing node (BACKGROUND, CLOTHES, BLEND, etc.)
+        // - Even unprocessed nodes (for configuration chaining)
+        
+        // All nodes can be connected for chaining
+        setNodes(prev => prev.map(n => 
+          n.id === nodeId ? { ...n, input: draggingFrom } : n
+        ));
+      }
+      setDraggingFrom(null);
+      setDragPos(null);
+      // Re-enable text selection
+      document.body.style.userSelect = '';
+      document.body.style.webkitUserSelect = '';
+    }
+  };
+
+  // Helper to count pending configurations in chain
+  const countPendingConfigurations = (startNodeId: string): number => {
+    let count = 0;
+    const visited = new Set<string>();
+    
+    const traverse = (nodeId: string) => {
+      if (visited.has(nodeId)) return;
+      visited.add(nodeId);
+      
+      const node = nodes.find(n => n.id === nodeId);
+      if (!node) return;
+      
+      // Check if this node has configuration but no output
+      if (!(node as any).output && node.type !== "CHARACTER" && node.type !== "MERGE") {
+        const config = getNodeConfiguration(node);
+        if (Object.keys(config).length > 0) {
+          count++;
+        }
+      }
+      
+      // Check upstream
+      const upstreamId = (node as any).input;
+      if (upstreamId) {
+        traverse(upstreamId);
+      }
+    };
+    
+    traverse(startNodeId);
+    return count;
+  };
+  
+  // Helper to extract configuration from a node
+  const getNodeConfiguration = (node: AnyNode): any => {
+    const config: any = {};
+    
+    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;
+        }
+        break;
+      case "CLOTHES":
+        if ((node as ClothesNode).clothesImage) {
+          config.clothesImage = (node as ClothesNode).clothesImage;
+          config.selectedPreset = (node as ClothesNode).selectedPreset;
+        }
+        break;
+      case "STYLE":
+        if ((node as StyleNode).stylePreset) {
+          config.stylePreset = (node as StyleNode).stylePreset;
+          config.styleStrength = (node as StyleNode).styleStrength;
+        }
+        break;
+      case "EDIT":
+        if ((node as EditNode).editPrompt) {
+          config.editPrompt = (node as EditNode).editPrompt;
+        }
+        break;
+      case "CAMERA":
+        const cam = node as CameraNode;
+        if (cam.focalLength && cam.focalLength !== "None") config.focalLength = cam.focalLength;
+        if (cam.aperture && cam.aperture !== "None") config.aperture = cam.aperture;
+        if (cam.shutterSpeed && cam.shutterSpeed !== "None") config.shutterSpeed = cam.shutterSpeed;
+        if (cam.whiteBalance && cam.whiteBalance !== "None") config.whiteBalance = cam.whiteBalance;
+        if (cam.angle && cam.angle !== "None") config.angle = cam.angle;
+        if (cam.iso && cam.iso !== "None") config.iso = cam.iso;
+        if (cam.filmStyle && cam.filmStyle !== "None") config.filmStyle = cam.filmStyle;
+        if (cam.lighting && cam.lighting !== "None") config.lighting = cam.lighting;
+        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;
+        break;
+      case "AGE":
+        if ((node as AgeNode).targetAge) {
+          config.targetAge = (node as AgeNode).targetAge;
+        }
+        break;
+      case "FACE":
+        const face = node as FaceNode;
+        if (face.faceOptions) {
+          const opts: any = {};
+          if (face.faceOptions.removePimples) opts.removePimples = true;
+          if (face.faceOptions.addSunglasses) opts.addSunglasses = true;
+          if (face.faceOptions.addHat) opts.addHat = true;
+          if (face.faceOptions.changeHairstyle && face.faceOptions.changeHairstyle !== "None") {
+            opts.changeHairstyle = face.faceOptions.changeHairstyle;
+          }
+          if (face.faceOptions.facialExpression && face.faceOptions.facialExpression !== "None") {
+            opts.facialExpression = face.faceOptions.facialExpression;
+          }
+          if (face.faceOptions.beardStyle && face.faceOptions.beardStyle !== "None") {
+            opts.beardStyle = face.faceOptions.beardStyle;
+          }
+          if (Object.keys(opts).length > 0) {
+            config.faceOptions = opts;
+          }
+        }
+        break;
+    }
+    
+    return config;
+  };
+
+  // Process node with API
+  const processNode = async (nodeId: string) => {
+    const node = nodes.find(n => n.id === nodeId);
+    if (!node) {
+      console.error("Node not found:", nodeId);
+      return;
+    }
+
+    // Get input image and collect all configurations from chain
+    let inputImage: string | null = null;
+    let accumulatedParams: any = {};
+    const processedNodes: string[] = []; // Track which nodes' configs we're applying
+    const inputId = (node as any).input;
+    
+    if (inputId) {
+      // Track unprocessed MERGE nodes that need to be executed
+      const unprocessedMerges: MergeNode[] = [];
+      
+      // Find the source image by traversing the chain backwards
+      const findSourceImage = (currentNodeId: string, visited: Set<string> = new Set()): string | null => {
+        if (visited.has(currentNodeId)) return null;
+        visited.add(currentNodeId);
+        
+        const currentNode = nodes.find(n => n.id === currentNodeId);
+        if (!currentNode) return null;
+        
+        // If this is a CHARACTER node, return its image
+        if (currentNode.type === "CHARACTER") {
+          return (currentNode as CharacterNode).image;
+        }
+        
+        // If this is a MERGE node with output, return its output
+        if (currentNode.type === "MERGE" && (currentNode as MergeNode).output) {
+          return (currentNode as MergeNode).output || null;
+        }
+        
+        // If any node has been processed, return its output
+        if ((currentNode as any).output) {
+          return (currentNode as any).output;
+        }
+        
+        // For MERGE nodes without output, we need to process them first
+        if (currentNode.type === "MERGE") {
+          const merge = currentNode as MergeNode;
+          if (!merge.output && merge.inputs.length >= 2) {
+            // Mark this merge for processing
+            unprocessedMerges.push(merge);
+            // For now, return null - we'll process the merge first
+            return null;
+          } else if (merge.inputs.length > 0) {
+            // Try to get image from first input if merge can't be executed
+            const firstInput = merge.inputs[0];
+            const inputImage = findSourceImage(firstInput, visited);
+            if (inputImage) return inputImage;
+          }
+        }
+        
+        // Otherwise, check upstream
+        const upstreamId = (currentNode as any).input;
+        if (upstreamId) {
+          return findSourceImage(upstreamId, visited);
+        }
+        
+        return null;
+      };
+      
+      // Collect all configurations from unprocessed nodes in the chain
+      const collectConfigurations = (currentNodeId: string, visited: Set<string> = new Set()): any => {
+        if (visited.has(currentNodeId)) return {};
+        visited.add(currentNodeId);
+        
+        const currentNode = nodes.find(n => n.id === currentNodeId);
+        if (!currentNode) return {};
+        
+        let configs: any = {};
+        
+        // First, collect from upstream nodes
+        const upstreamId = (currentNode as any).input;
+        if (upstreamId) {
+          configs = collectConfigurations(upstreamId, visited);
+        }
+        
+        // Add this node's configuration only if:
+        // 1. It's the current node being processed, OR
+        // 2. It hasn't been processed yet (no output) AND it's not the current node
+        const shouldIncludeConfig = 
+          currentNodeId === nodeId || // Always include current node's config
+          (!(currentNode as any).output && currentNodeId !== nodeId); // Include unprocessed intermediate nodes
+        
+        if (shouldIncludeConfig) {
+          const nodeConfig = getNodeConfiguration(currentNode);
+          if (Object.keys(nodeConfig).length > 0) {
+            configs = { ...configs, ...nodeConfig };
+            // Track unprocessed intermediate nodes
+            if (currentNodeId !== nodeId && !(currentNode as any).output) {
+              processedNodes.push(currentNodeId);
+            }
+          }
+        }
+        
+        return configs;
+      };
+      
+      // Find the source image
+      inputImage = findSourceImage(inputId);
+      
+      // If we found unprocessed merges, we need to execute them first
+      if (unprocessedMerges.length > 0 && !inputImage) {
+        console.log(`Found ${unprocessedMerges.length} unprocessed MERGE nodes in chain. Processing them first...`);
+        
+        // Process each merge node
+        for (const merge of unprocessedMerges) {
+          // Set loading state for the merge
+          setNodes(prev => prev.map(n => 
+            n.id === merge.id ? { ...n, isRunning: true, error: null } : n
+          ));
+          
+          try {
+            const mergeOutput = await executeMerge(merge);
+            
+            // Update the merge node with output
+            setNodes(prev => prev.map(n => 
+              n.id === merge.id ? { ...n, output: mergeOutput || undefined, isRunning: false, error: null } : n
+            ));
+            
+            // Track that we processed this merge as part of the chain
+            processedNodes.push(merge.id);
+            
+            // Now use this as our input image if it's the direct input
+            if (inputId === merge.id) {
+              inputImage = mergeOutput;
+            }
+          } catch (e: any) {
+            console.error("Auto-merge error:", e);
+            setNodes(prev => prev.map(n => 
+              n.id === merge.id ? { ...n, isRunning: false, error: e?.message || "Merge failed" } : n
+            ));
+            // Abort the main processing if merge failed
+            setNodes(prev => prev.map(n => 
+              n.id === nodeId ? { ...n, error: "Failed to process upstream MERGE node", isRunning: false } : n
+            ));
+            return;
+          }
+        }
+        
+        // After processing merges, try to find the source image again
+        if (!inputImage) {
+          inputImage = findSourceImage(inputId);
+        }
+      }
+      
+      // Collect configurations from the chain
+      accumulatedParams = collectConfigurations(inputId, new Set());
+    }
+
+    if (!inputImage) {
+      const errorMsg = inputId 
+        ? "No source image found in the chain. Connect to a CHARACTER node or processed node."
+        : "No input connected. Connect an image source to this node.";
+      setNodes(prev => prev.map(n => 
+        n.id === nodeId ? { ...n, error: errorMsg, isRunning: false } : n
+      ));
+      return;
+    }
+
+    // Add current node's configuration
+    const currentNodeConfig = getNodeConfiguration(node);
+    const params = { ...accumulatedParams, ...currentNodeConfig };
+    
+    // Count how many unprocessed nodes we're combining
+    const unprocessedNodeCount = Object.keys(params).length > 0 ? 
+      (processedNodes.length + 1) : 1;
+    
+    // Show info about batch processing
+    if (unprocessedNodeCount > 1) {
+      console.log(`🚀 Combining ${unprocessedNodeCount} node transformations into ONE API call`);
+      console.log("Combined parameters:", params);
+    } else {
+      console.log("Processing single node:", node.type);
+    }
+
+    // Set loading state for all nodes being processed
+    setNodes(prev => prev.map(n => {
+      if (n.id === nodeId || processedNodes.includes(n.id)) {
+        return { ...n, isRunning: true, error: null };
+      }
+      return n;
+    }));
+
+    try {
+      // Validate image data before sending
+      if (inputImage && inputImage.length > 10 * 1024 * 1024) { // 10MB limit warning
+        console.warn("Large input image detected, size:", (inputImage.length / (1024 * 1024)).toFixed(2) + "MB");
+      }
+      
+      // Check if params contains custom images and validate them
+      if (params.clothesImage) {
+        console.log("[Process] Clothes image size:", (params.clothesImage.length / 1024).toFixed(2) + "KB");
+        // Validate it's a proper data URL
+        if (!params.clothesImage.startsWith('data:') && !params.clothesImage.startsWith('http') && !params.clothesImage.startsWith('/')) {
+          throw new Error("Invalid clothes image format. Please upload a valid image.");
+        }
+      }
+      
+      if (params.customBackgroundImage) {
+        console.log("[Process] Custom background size:", (params.customBackgroundImage.length / 1024).toFixed(2) + "KB");
+        // Validate it's a proper data URL
+        if (!params.customBackgroundImage.startsWith('data:') && !params.customBackgroundImage.startsWith('http') && !params.customBackgroundImage.startsWith('/')) {
+          throw new Error("Invalid background image format. Please upload a valid image.");
+        }
+      }
+      
+      // Log request details for debugging
+      console.log("[Process] Sending request with:", {
+        hasImage: !!inputImage,
+        imageSize: inputImage ? (inputImage.length / 1024).toFixed(2) + "KB" : 0,
+        paramsKeys: Object.keys(params),
+        nodeType: node.type
+      });
+      
+      // Make a SINGLE API call with all accumulated parameters
+      const res = await fetch("/api/process", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          type: "COMBINED", // Indicate this is a combined processing
+          image: inputImage,
+          params,
+          apiToken: apiToken || undefined
+        }),
+      });
+
+      // Check if response is actually JSON before parsing
+      const contentType = res.headers.get("content-type");
+      if (!contentType || !contentType.includes("application/json")) {
+        const textResponse = await res.text();
+        console.error("Non-JSON response received:", textResponse);
+        throw new Error("Server returned an error page instead of JSON. Check your API key configuration.");
+      }
+
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Processing failed");
+
+      // Only update the current node with the output
+      // Don't show output in intermediate nodes - they were just used for configuration
+      setNodes(prev => prev.map(n => {
+        if (n.id === nodeId) {
+          // Only the current node gets the final output displayed
+          return { ...n, output: data.image, isRunning: false, error: null };
+        } else if (processedNodes.includes(n.id)) {
+          // Mark intermediate nodes as no longer running but don't give them output
+          // This way they remain unprocessed visually but their configs were used
+          return { ...n, isRunning: false, error: null };
+        }
+        return n;
+      }));
+      
+      if (unprocessedNodeCount > 1) {
+        console.log(`✅ Successfully applied ${unprocessedNodeCount} transformations in ONE API call!`);
+        console.log(`Saved ${unprocessedNodeCount - 1} API calls by combining transformations`);
+      }
+    } catch (e: any) {
+      console.error("Process error:", e);
+      // Clear loading state for all nodes
+      setNodes(prev => prev.map(n => {
+        if (n.id === nodeId || processedNodes.includes(n.id)) {
+          return { ...n, isRunning: false, error: e?.message || "Error" };
+        }
+        return n;
+      }));
+    }
+  };
+
+  const connectToMerge = (mergeId: string, nodeId: string) => {
+    setNodes((prev) =>
+      prev.map((n) =>
+        n.id === mergeId && n.type === "MERGE"
+          ? { ...n, inputs: Array.from(new Set([...(n as MergeNode).inputs, nodeId])) }
+          : n
+      )
+    );
+  };
+
+  // Connection drag handlers
+  const handleStartConnection = (nodeId: string) => {
+    setDraggingFrom(nodeId);
+    // Prevent text selection during dragging
+    document.body.style.userSelect = 'none';
+    document.body.style.webkitUserSelect = 'none';
+  };
+
+  const handleEndConnection = (mergeId: string) => {
+    if (draggingFrom) {
+      // Allow connections from any node type that could have an output
+      const sourceNode = nodes.find(n => n.id === draggingFrom);
+      if (sourceNode) {
+        // Allow connections from:
+        // - CHARACTER nodes (always have an image)
+        // - Any node with an output (processed nodes)
+        // - Any processing node (for future processing)
+        connectToMerge(mergeId, draggingFrom);
+      }
+      setDraggingFrom(null);
+      setDragPos(null);
+      // Re-enable text selection
+      document.body.style.userSelect = '';
+      document.body.style.webkitUserSelect = '';
+    }
+  };
+
+  const handlePointerMove = (e: React.PointerEvent) => {
+    if (draggingFrom) {
+      const rect = containerRef.current!.getBoundingClientRect();
+      const world = screenToWorld(e.clientX, e.clientY, rect, tx, ty, scale);
+      setDragPos(world);
+    }
+  };
+
+  const handlePointerUp = () => {
+    if (draggingFrom) {
+      setDraggingFrom(null);
+      setDragPos(null);
+      // Re-enable text selection
+      document.body.style.userSelect = '';
+      document.body.style.webkitUserSelect = '';
+    }
+  };
+  const disconnectFromMerge = (mergeId: string, nodeId: string) => {
+    setNodes((prev) =>
+      prev.map((n) =>
+        n.id === mergeId && n.type === "MERGE"
+          ? { ...n, inputs: (n as MergeNode).inputs.filter((i) => i !== nodeId) }
+          : n
+      )
+    );
+  };
+
+  const executeMerge = async (merge: MergeNode): Promise<string | null> => {
+    // Get images from merge inputs - now accepts any node type
+    const mergeImages: string[] = [];
+    const inputData: { image: string; label: string }[] = [];
+    
+    for (const inputId of merge.inputs) {
+      const inputNode = nodes.find(n => n.id === inputId);
+      if (inputNode) {
+        let image: string | null = null;
+        let label = "";
+        
+        if (inputNode.type === "CHARACTER") {
+          image = (inputNode as CharacterNode).image;
+          label = (inputNode as CharacterNode).label || "";
+        } else if ((inputNode as any).output) {
+          // Any processed node with output
+          image = (inputNode as any).output;
+          label = `${inputNode.type} Output`;
+        } else if (inputNode.type === "MERGE" && (inputNode as MergeNode).output) {
+          // Another merge node's output
+          const mergeOutput = (inputNode as MergeNode).output;
+          image = mergeOutput !== undefined ? mergeOutput : null;
+          label = "Merged Image";
+        }
+        
+        if (image) {
+          // Validate image format
+          if (!image.startsWith('data:') && !image.startsWith('http') && !image.startsWith('/')) {
+            console.error(`Invalid image format for ${label}:`, image.substring(0, 100));
+            continue; // Skip invalid images
+          }
+          mergeImages.push(image);
+          inputData.push({ image, label: label || `Input ${mergeImages.length}` });
+        }
+      }
+    }
+    
+    if (mergeImages.length < 2) {
+      throw new Error("Not enough valid inputs for merge. Need at least 2 images.");
+    }
+    
+    // Log merge details for debugging
+    console.log("[Merge] Processing merge with:", {
+      imageCount: mergeImages.length,
+      imageSizes: mergeImages.map(img => (img.length / 1024).toFixed(2) + "KB"),
+      labels: inputData.map(d => d.label)
+    });
+    
+    const prompt = generateMergePrompt(inputData);
+    
+    // Use the process route instead of merge route
+    const res = await fetch("/api/process", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ 
+        type: "MERGE",
+        images: mergeImages, 
+        prompt,
+        apiToken: apiToken || undefined
+      }),
+    });
+    
+    // Check if response is actually JSON before parsing
+    const contentType = res.headers.get("content-type");
+    if (!contentType || !contentType.includes("application/json")) {
+      const textResponse = await res.text();
+      console.error("Non-JSON response received:", textResponse);
+      throw new Error("Server returned an error page instead of JSON. Check your API key configuration.");
+    }
+    
+    const data = await res.json();
+    if (!res.ok) {
+      throw new Error(data.error || "Merge failed");
+    }
+    
+    return data.image || (data.images?.[0] as string) || null;
+  };
+  
+  const runMerge = async (mergeId: string) => {
+    setNodes((prev) => prev.map((n) => (n.id === mergeId && n.type === "MERGE" ? { ...n, isRunning: true, error: null } : n)));
+    try {
+      const merge = (nodes.find((n) => n.id === mergeId) as MergeNode) || null;
+      if (!merge) return;
+      
+      // Get input nodes with their labels - now accepts any node type
+      const inputData = merge.inputs
+        .map((id, index) => {
+          const inputNode = nodes.find((n) => n.id === id);
+          if (!inputNode) return null;
+          
+          // Support CHARACTER nodes, processed nodes, and MERGE outputs
+          let image: string | null = null;
+          let label = "";
+          
+          if (inputNode.type === "CHARACTER") {
+            image = (inputNode as CharacterNode).image;
+            label = (inputNode as CharacterNode).label || `CHARACTER ${index + 1}`;
+          } else if ((inputNode as any).output) {
+            // Any processed node with output
+            image = (inputNode as any).output;
+            label = `${inputNode.type} Output ${index + 1}`;
+          } else if (inputNode.type === "MERGE" && (inputNode as MergeNode).output) {
+            // Another merge node's output
+            const mergeOutput = (inputNode as MergeNode).output;
+            image = mergeOutput !== undefined ? mergeOutput : null;
+            label = `Merged Image ${index + 1}`;
+          }
+          
+          if (!image) return null;
+          
+          return { image, label };
+        })
+        .filter(Boolean) as { image: string; label: string }[];
+      
+      if (inputData.length < 2) throw new Error("Connect at least two nodes with images (CHARACTER nodes or processed nodes).");
+      
+      // Debug: Log what we're sending
+      console.log("🔄 Merging nodes:", inputData.map(d => d.label).join(", "));
+      console.log("📷 Image URLs being sent:", inputData.map(d => d.image.substring(0, 100) + "..."));
+      
+      // Generate dynamic prompt based on number of inputs
+      const prompt = generateMergePrompt(inputData);
+      const imgs = inputData.map(d => d.image);
+
+      // Use the process route with MERGE type
+      const res = await fetch("/api/process", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ 
+          type: "MERGE",
+          images: imgs, 
+          prompt,
+          apiToken: apiToken || undefined
+        }),
+      });
+      
+      // Check if response is actually JSON before parsing
+      const contentType = res.headers.get("content-type");
+      if (!contentType || !contentType.includes("application/json")) {
+        const textResponse = await res.text();
+        console.error("Non-JSON response received:", textResponse);
+        throw new Error("Server returned an error page instead of JSON. Check your API key configuration.");
+      }
+      
+      const js = await res.json();
+      if (!res.ok) {
+        // Show more helpful error messages
+        const errorMsg = js.error || "Merge failed";
+        if (errorMsg.includes("API key")) {
+          throw new Error("API key not configured. Add GOOGLE_API_KEY to .env.local");
+        }
+        throw new Error(errorMsg);
+      }
+      const out = js.image || (js.images?.[0] as string) || null;
+      setNodes((prev) => prev.map((n) => (n.id === mergeId && n.type === "MERGE" ? { ...n, output: out, isRunning: false } : n)));
+    } catch (e: any) {
+      console.error("Merge error:", e);
+      setNodes((prev) => prev.map((n) => (n.id === mergeId && n.type === "MERGE" ? { ...n, isRunning: false, error: e?.message || "Error" } : n)));
+    }
+  };
+
+  // Calculate SVG bounds for connection lines
+  const svgBounds = useMemo(() => {
+    let minX = 0, minY = 0, maxX = 1000, maxY = 1000;
+    nodes.forEach(node => {
+      minX = Math.min(minX, node.x - 100);
+      minY = Math.min(minY, node.y - 100);
+      maxX = Math.max(maxX, node.x + 500);
+      maxY = Math.max(maxY, node.y + 500);
+    });
+    return { 
+      x: minX, 
+      y: minY, 
+      width: maxX - minX, 
+      height: maxY - minY 
+    };
+  }, [nodes]);
+
+  // Connection paths with bezier curves
+  const connectionPaths = useMemo(() => {
+    const getNodeOutputPort = (n: AnyNode) => {
+      // Different nodes have different widths
+      const widths: Record<string, number> = {
+        CHARACTER: 340,
+        MERGE: 420,
+        BACKGROUND: 320,
+        CLOTHES: 320,
+        BLEND: 320,
+        EDIT: 320,
+        CAMERA: 360,
+        AGE: 280,
+        FACE: 340,
+      };
+      const width = widths[n.type] || 320;
+      return { x: n.x + width - 10, y: n.y + 25 };
+    };
+    
+    const getNodeInputPort = (n: AnyNode) => ({ x: n.x + 10, y: n.y + 25 });
+    
+    const createPath = (x1: number, y1: number, x2: number, y2: number) => {
+      const dx = x2 - x1;
+      const dy = y2 - y1;
+      const distance = Math.sqrt(dx * dx + dy * dy);
+      const controlOffset = Math.min(200, Math.max(50, distance * 0.3));
+      return `M ${x1} ${y1} C ${x1 + controlOffset} ${y1}, ${x2 - controlOffset} ${y2}, ${x2} ${y2}`;
+    };
+    
+    const paths: { path: string; active?: boolean; processing?: boolean }[] = [];
+    
+    // Handle all connections
+    for (const node of nodes) {
+      if (node.type === "MERGE") {
+        // MERGE node with multiple inputs
+        const merge = node as MergeNode;
+        for (const inputId of merge.inputs) {
+          const inputNode = nodes.find(n => n.id === inputId);
+          if (inputNode) {
+            const start = getNodeOutputPort(inputNode);
+            const end = getNodeInputPort(node);
+            const isProcessing = merge.isRunning || (inputNode as any).isRunning;
+            paths.push({ 
+              path: createPath(start.x, start.y, end.x, end.y),
+              processing: isProcessing
+            });
+          }
+        }
+      } else if ((node as any).input) {
+        // Single input nodes
+        const inputId = (node as any).input;
+        const inputNode = nodes.find(n => n.id === inputId);
+        if (inputNode) {
+          const start = getNodeOutputPort(inputNode);
+          const end = getNodeInputPort(node);
+          const isProcessing = (node as any).isRunning || (inputNode as any).isRunning;
+          paths.push({ 
+            path: createPath(start.x, start.y, end.x, end.y),
+            processing: isProcessing
+          });
+        }
+      }
+    }
+    
+    // Dragging path
+    if (draggingFrom && dragPos) {
+      const sourceNode = nodes.find(n => n.id === draggingFrom);
+      if (sourceNode) {
+        const start = getNodeOutputPort(sourceNode);
+        paths.push({ 
+          path: createPath(start.x, start.y, dragPos.x, dragPos.y), 
+          active: true 
+        });
+      }
+    }
+    
+    return paths;
+  }, [nodes, draggingFrom, dragPos]);
+
+  // Panning & zooming
+  const isPanning = useRef(false);
+  const panStart = useRef<{ sx: number; sy: number; ox: number; oy: number } | null>(null);
+
+  const onBackgroundPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+    // Only pan if clicking directly on the background
+    if (e.target !== e.currentTarget && !((e.target as HTMLElement).tagName === "svg" || (e.target as HTMLElement).tagName === "line")) return;
+    isPanning.current = true;
+    panStart.current = { sx: e.clientX, sy: e.clientY, ox: tx, oy: ty };
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+  };
+  const onBackgroundPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
+    if (!isPanning.current || !panStart.current) return;
+    const dx = e.clientX - panStart.current.sx;
+    const dy = e.clientY - panStart.current.sy;
+    setTx(panStart.current.ox + dx);
+    setTy(panStart.current.oy + dy);
+  };
+  const onBackgroundPointerUp = (e: React.PointerEvent<HTMLDivElement>) => {
+    isPanning.current = false;
+    panStart.current = null;
+    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
+  };
+
+  const onWheel = (e: React.WheelEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const rect = containerRef.current!.getBoundingClientRect();
+    const oldScale = scaleRef.current;
+    const factor = Math.exp(-e.deltaY * 0.0015);
+    const newScale = Math.min(2.5, Math.max(0.25, oldScale * factor));
+    const { x: wx, y: wy } = screenToWorld(e.clientX, e.clientY, rect, tx, ty, oldScale);
+    // keep cursor anchored while zooming
+    const ntx = e.clientX - rect.left - wx * newScale;
+    const nty = e.clientY - rect.top - wy * newScale;
+    setTx(ntx);
+    setTy(nty);
+    setScale(newScale);
+  };
+
+  // Context menu for adding nodes
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [menuPos, setMenuPos] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+  const [menuWorld, setMenuWorld] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+
+  const onContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    const rect = containerRef.current!.getBoundingClientRect();
+    const world = screenToWorld(e.clientX, e.clientY, rect, tx, ty, scale);
+    setMenuWorld(world);
+    setMenuPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+    setMenuOpen(true);
+  };
+
+  const addFromMenu = (kind: NodeType) => {
+    const commonProps = {
+      id: uid(),
+      x: menuWorld.x,
+      y: menuWorld.y,
+    };
+    
+    switch(kind) {
+      case "CHARACTER":
+        addCharacter(menuWorld);
+        break;
+      case "MERGE":
+        addMerge(menuWorld);
+        break;
+      case "BACKGROUND":
+        setNodes(prev => [...prev, { ...commonProps, type: "BACKGROUND", backgroundType: "color" } as BackgroundNode]);
+        break;
+      case "CLOTHES":
+        setNodes(prev => [...prev, { ...commonProps, type: "CLOTHES" } as ClothesNode]);
+        break;
+      case "BLEND":
+        setNodes(prev => [...prev, { ...commonProps, type: "BLEND", blendStrength: 50 } as BlendNode]);
+        break;
+      case "STYLE":
+        setNodes(prev => [...prev, { ...commonProps, type: "STYLE", styleStrength: 50 } as StyleNode]);
+        break;
+      case "CAMERA":
+        setNodes(prev => [...prev, { ...commonProps, type: "CAMERA" } as CameraNode]);
+        break;
+      case "AGE":
+        setNodes(prev => [...prev, { ...commonProps, type: "AGE", targetAge: 30 } as AgeNode]);
+        break;
+      case "FACE":
+        setNodes(prev => [...prev, { ...commonProps, type: "FACE", faceOptions: {} } as FaceNode]);
+        break;
+    }
+    setMenuOpen(false);
+  };
+
+  return (
+    <div className="min-h-[100svh] bg-background text-foreground">
+      <header className="flex items-center justify-between px-6 py-4 border-b border-border/60 bg-card/70 backdrop-blur">
+        <h1 className="text-lg font-semibold tracking-wide">
+          <span className="mr-2" aria-hidden>🍌</span>Nano Banana Editor
+        </h1>
+        <div className="flex items-center gap-2">
+          <label htmlFor="api-token" className="text-sm font-medium text-muted-foreground">
+            API Token:
+          </label>
+          <Input
+            id="api-token"
+            type="password"
+            placeholder="Enter your Google Gemini API token"
+            value={apiToken}
+            onChange={(e) => setApiToken(e.target.value)}
+            className="w-64"
+          />
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8 w-8 p-0 rounded-full hover:bg-red-50 dark:hover:bg-red-900/20"
+            type="button"
+            onClick={() => setShowHelpSidebar(true)}
+          >
+            <span className="text-sm font-medium text-red-500 hover:text-red-600">?</span>
+          </Button>
+        </div>
+      </header>
+
+      {/* Help Sidebar */}
+      {showHelpSidebar && (
+        <>
+          {/* Backdrop */}
+          <div 
+            className="fixed inset-0 bg-black/50 z-[9998]"
+            onClick={() => setShowHelpSidebar(false)}
+          />
+          {/* Sidebar */}
+          <div className="fixed right-0 top-0 h-full w-96 bg-card/95 backdrop-blur border-l border-border/60 shadow-xl z-[9999] overflow-y-auto">
+            <div className="p-6">
+              <div className="flex items-center justify-between mb-6">
+                <h2 className="text-xl font-semibold text-foreground">Help & Guide</h2>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="h-8 w-8 p-0"
+                  onClick={() => setShowHelpSidebar(false)}
+                >
+                  <span className="text-lg">×</span>
+                </Button>
+              </div>
+              
+              <div className="space-y-6">
+                <div>
+                  <h3 className="font-semibold mb-3 text-foreground">🔑 API Token Setup</h3>
+                  <div className="text-sm text-muted-foreground space-y-3">
+                    <div className="p-3 bg-primary/10 border border-primary/20 rounded-lg">
+                      <p className="font-medium text-primary mb-2">Step 1: Get Your API Key</p>
+                      <p>Visit <a href="https://aistudio.google.com/app/apikey" target="_blank" rel="noopener noreferrer" className="text-primary hover:underline font-medium">Google AI Studio</a> to create your free Gemini API key.</p>
+                    </div>
+                    <div className="p-3 bg-secondary border border-border rounded-lg">
+                      <p className="font-medium text-secondary-foreground mb-2">Step 2: Add Your Token</p>
+                      <p>Paste your API key in the "API Token" field in the top navigation bar.</p>
+                    </div>
+                    <div className="p-3 bg-accent border border-border rounded-lg">
+                      <p className="font-medium text-accent-foreground mb-2">Step 3: Start Creating</p>
+                      <p>Your token enables all AI features: image generation, merging, editing, and style transfers.</p>
+                    </div>
+                  </div>
+                </div>
+                
+                <div>
+                   <h3 className="font-semibold mb-3 text-foreground">🎨 How to Use the Editor</h3>
+                   <div className="text-sm text-muted-foreground space-y-2">
+                     <p>• <strong>Adding Nodes:</strong> Right-click on the editor canvas and choose the node type you want, then drag and drop to position it</p>
+                     <p>• <strong>Character Nodes:</strong> Upload or drag images to create character nodes</p>
+                     <p>• <strong>Merge Nodes:</strong> Connect multiple characters to create group photos</p>
+                     <p>• <strong>Style Nodes:</strong> Apply artistic styles and filters</p>
+                     <p>• <strong>Background Nodes:</strong> Change or generate new backgrounds</p>
+                     <p>• <strong>Edit Nodes:</strong> Make specific modifications with text prompts</p>
+                   </div>
+                 </div>
+                
+                <div className="p-4 bg-muted border border-border rounded-lg">
+                  <h4 className="font-semibold text-foreground mb-2">🔒 Privacy & Security</h4>
+                  <div className="text-sm text-muted-foreground space-y-1">
+                    <p>• Your API token is stored locally in your browser</p>
+                    <p>• Tokens are never sent to our servers</p>
+                    <p>• Keep your API key secure and don't share it</p>
+                    <p>• You can revoke keys anytime in Google AI Studio</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </>
+      )}
+
+      <div
+        ref={containerRef}
+        className="relative w-full h-[calc(100svh-56px)] overflow-hidden nb-canvas"
+        style={{
+          imageRendering: "auto",
+          transform: "translateZ(0)",
+          willChange: "contents"
+        }}
+        onContextMenu={onContextMenu}
+        onPointerDown={onBackgroundPointerDown}
+        onPointerMove={(e) => {
+          onBackgroundPointerMove(e);
+          handlePointerMove(e);
+        }}
+        onPointerUp={(e) => {
+          onBackgroundPointerUp(e);
+          handlePointerUp();
+        }}
+        onPointerLeave={(e) => {
+          onBackgroundPointerUp(e);
+          handlePointerUp();
+        }}
+        onWheel={onWheel}
+      >
+        <div
+          className="absolute left-0 top-0 will-change-transform"
+          style={{ 
+            transform: `translate3d(${tx}px, ${ty}px, 0) scale(${scale})`, 
+            transformOrigin: "0 0",
+            transformStyle: "preserve-3d",
+            backfaceVisibility: "hidden"
+          }}
+        >
+          <svg 
+            className="absolute pointer-events-none z-0" 
+            style={{ 
+              left: `${svgBounds.x}px`, 
+              top: `${svgBounds.y}px`,
+              width: `${svgBounds.width}px`,
+              height: `${svgBounds.height}px`
+            }}
+            viewBox={`${svgBounds.x} ${svgBounds.y} ${svgBounds.width} ${svgBounds.height}`}
+          >
+            <defs>
+              <filter id="glow">
+                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+                <feMerge>
+                  <feMergeNode in="coloredBlur"/>
+                  <feMergeNode in="SourceGraphic"/>
+                </feMerge>
+              </filter>
+            </defs>
+            {connectionPaths.map((p, idx) => (
+              <path
+                key={idx}
+                className={p.processing ? "connection-processing connection-animated" : ""}
+                d={p.path}
+                fill="none"
+                stroke={p.processing ? undefined : (p.active ? "hsl(var(--primary))" : "hsl(var(--muted-foreground))")}
+                strokeWidth={p.processing ? undefined : "2.5"}
+                strokeDasharray={p.active && !p.processing ? "5,5" : undefined}
+                style={p.active && !p.processing ? undefined : (!p.processing ? { opacity: 0.9 } : {})}
+              />
+            ))}
+          </svg>
+
+          <div className="relative z-10">
+            {nodes.map((node) => {
+              switch (node.type) {
+                case "CHARACTER":
+                  return (
+                    <CharacterNodeView
+                      key={node.id}
+                      node={node as CharacterNode}
+                      scaleRef={scaleRef}
+                      onChangeImage={setCharacterImage}
+                      onChangeLabel={setCharacterLabel}
+                      onStartConnection={handleStartConnection}
+                      onUpdatePosition={updateNodePosition}
+                      onDelete={deleteNode}
+                    />
+                  );
+                case "MERGE":
+                  return (
+                    <MergeNodeView
+                      key={node.id}
+                      node={node as MergeNode}
+                      scaleRef={scaleRef}
+                      allNodes={nodes}
+                      onDisconnect={disconnectFromMerge}
+                      onRun={runMerge}
+                      onEndConnection={handleEndConnection}
+                      onStartConnection={handleStartConnection}
+                      onUpdatePosition={updateNodePosition}
+                      onDelete={deleteNode}
+                      onClearConnections={clearMergeConnections}
+                    />
+                  );
+                case "BACKGROUND":
+                  return (
+                    <BackgroundNodeView
+                      key={node.id}
+                      node={node as BackgroundNode}
+                      onDelete={deleteNode}
+                      onUpdate={updateNode}
+                      onStartConnection={handleStartConnection}
+                      onEndConnection={handleEndSingleConnection}
+                      onProcess={processNode}
+                      onUpdatePosition={updateNodePosition}
+                    />
+                  );
+                case "CLOTHES":
+                  return (
+                    <ClothesNodeView
+                      key={node.id}
+                      node={node as ClothesNode}
+                      onDelete={deleteNode}
+                      onUpdate={updateNode}
+                      onStartConnection={handleStartConnection}
+                      onEndConnection={handleEndSingleConnection}
+                      onProcess={processNode}
+                      onUpdatePosition={updateNodePosition}
+                    />
+                  );
+                case "STYLE":
+                  return (
+                    <StyleNodeView
+                      key={node.id}
+                      node={node as StyleNode}
+                      onDelete={deleteNode}
+                      onUpdate={updateNode}
+                      onStartConnection={handleStartConnection}
+                      onEndConnection={handleEndSingleConnection}
+                      onProcess={processNode}
+                      onUpdatePosition={updateNodePosition}
+                    />
+                  );
+                case "EDIT":
+                  return (
+                    <EditNodeView
+                      key={node.id}
+                      node={node as EditNode}
+                      onDelete={deleteNode}
+                      onUpdate={updateNode}
+                      onStartConnection={handleStartConnection}
+                      onEndConnection={handleEndSingleConnection}
+                      onProcess={processNode}
+                      onUpdatePosition={updateNodePosition}
+                    />
+                  );
+                case "CAMERA":
+                  return (
+                    <CameraNodeView
+                      key={node.id}
+                      node={node as CameraNode}
+                      onDelete={deleteNode}
+                      onUpdate={updateNode}
+                      onStartConnection={handleStartConnection}
+                      onEndConnection={handleEndSingleConnection}
+                      onProcess={processNode}
+                      onUpdatePosition={updateNodePosition}
+                    />
+                  );
+                case "AGE":
+                  return (
+                    <AgeNodeView
+                      key={node.id}
+                      node={node as AgeNode}
+                      onDelete={deleteNode}
+                      onUpdate={updateNode}
+                      onStartConnection={handleStartConnection}
+                      onEndConnection={handleEndSingleConnection}
+                      onProcess={processNode}
+                      onUpdatePosition={updateNodePosition}
+                    />
+                  );
+                case "FACE":
+                  return (
+                    <FaceNodeView
+                      key={node.id}
+                      node={node as FaceNode}
+                      onDelete={deleteNode}
+                      onUpdate={updateNode}
+                      onStartConnection={handleStartConnection}
+                      onEndConnection={handleEndSingleConnection}
+                      onProcess={processNode}
+                      onUpdatePosition={updateNodePosition}
+                    />
+                  );
+                default:
+                  return null;
+              }
+            })}
+          </div>
+        </div>
+
+        {menuOpen && (
+          <div
+            className="absolute z-50 rounded-xl border border-white/10 bg-[#111]/95 backdrop-blur p-1 w-56 shadow-2xl"
+            style={{ left: menuPos.x, top: menuPos.y }}
+            onMouseLeave={() => setMenuOpen(false)}
+          >
+            <div className="px-3 py-2 text-xs text-white/60">Add node</div>
+            <div className="max-h-[400px] overflow-y-auto">
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("CHARACTER")}>CHARACTER</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("MERGE")}>MERGE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("BACKGROUND")}>BACKGROUND</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("CLOTHES")}>CLOTHES</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("STYLE")}>STYLE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("EDIT")}>EDIT</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("CAMERA")}>CAMERA</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("AGE")}>AGE</button>
+              <button className="w-full text-left px-3 py-2 text-sm hover:bg-white/10 rounded-lg" onClick={() => addFromMenu("FACE")}>FACE</button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+

components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

components/magicui/interactive-hover-button.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { ArrowRight } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface InteractiveHoverButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+export const InteractiveHoverButton = React.forwardRef<
+  HTMLButtonElement,
+  InteractiveHoverButtonProps
+>(({ children, className, ...props }, ref) => {
+  return (
+    <button
+      ref={ref}
+      className={cn(
+        "group relative w-auto cursor-pointer overflow-hidden rounded-full border bg-background p-2 px-6 text-center font-semibold",
+        className,
+      )}
+      {...props}
+    >
+      <div className="flex items-center gap-2">
+        <div className="h-2 w-2 rounded-full bg-primary transition-all duration-300 group-hover:scale-[100.8]"></div>
+        <span className="inline-block transition-all duration-300 group-hover:translate-x-12 group-hover:opacity-0">
+          {children}
+        </span>
+      </div>
+      <div className="absolute top-0 z-10 flex h-full w-full translate-x-12 items-center justify-center gap-2 text-primary-foreground opacity-0 transition-all duration-300 group-hover:-translate-x-5 group-hover:opacity-100">
+        <span>{children}</span>
+        <ArrowRight />
+      </div>
+    </button>
+  );
+});
+
+InteractiveHoverButton.displayName = "InteractiveHoverButton";

components/ui/button.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 px-3",
+        lg: "h-10 px-6",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    return (
+      <button
+        className={cn(buttonVariants({ variant, size }), className)}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

components/ui/checkbox.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        type="checkbox"
+        className={cn(
+          "h-4 w-4 rounded border border-input bg-background cursor-pointer align-middle",
+          className
+        )}
+        style={{ accentColor: "hsl(var(--primary))" }}
+        {...props}
+      />
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+

components/ui/color-picker.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface ColorPickerProps extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+export const ColorPicker = React.forwardRef<HTMLInputElement, ColorPickerProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <input
+        ref={ref}
+        type="color"
+        className={cn(
+          "h-9 w-full rounded-md border border-input bg-background p-1 shadow-sm cursor-pointer",
+          className
+        )}
+        {...props}
+      />
+    );
+  }
+);
+ColorPicker.displayName = "ColorPicker";
+

components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = "Input";
+
+export { Input };

components/ui/label.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {}
+
+const Label = React.forwardRef<HTMLLabelElement, LabelProps>(
+  ({ className, ...props }, ref) => (
+    <label
+      ref={ref}
+      className={cn(
+        "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+Label.displayName = "Label";
+
+export { Label };

components/ui/select.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface SelectProps
+  extends React.SelectHTMLAttributes<HTMLSelectElement> {}
+
+const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <select
+        ref={ref}
+        className={cn(
+          "h-9 w-full rounded-md border border-input bg-background px-2 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </select>
+    );
+  }
+);
+Select.displayName = "Select";
+
+export { Select };

components/ui/slider.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface SliderProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  valueLabel?: string;
+}
+
+export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
+  ({ className, label, valueLabel, min = 0, max = 100, step = 1, ...props }, ref) => {
+    return (
+      <div className={cn("w-full", className)}>
+        {(label || valueLabel) && (
+          <div className="flex items-center justify-between text-xs text-muted-foreground mb-1">
+            <span>{label}</span>
+            <span>{valueLabel}</span>
+          </div>
+        )}
+        <input
+          ref={ref}
+          type="range"
+          min={min as number}
+          max={max as number}
+          step={step as number}
+          className={cn(
+            "w-full appearance-none h-2 rounded-lg bg-muted outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full",
+            "[&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:cursor-pointer",
+            "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary"
+          )}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+Slider.displayName = "Slider";
+

components/ui/textarea.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { cn } from "../../lib/utils";
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+
+export { Textarea };

eslint.config.mjs

@@ -0,0 +1,36 @@
+import { dirname } from "path";
+import { fileURLToPath } from "url";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+});
+
+const eslintConfig = [
+  ...compat.extends("next/core-web-vitals", "next/typescript"),
+  {
+    ignores: [
+      "node_modules/**",
+      ".next/**",
+      "out/**",
+      "build/**",
+      "next-env.d.ts",
+    ],
+  },
+  {
+    rules: {
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-unused-vars": "warn",
+      "@typescript-eslint/no-empty-object-type": "warn",
+      "@next/next/no-img-element": "warn",
+      "@next/next/no-html-link-for-pages": "warn",
+      "react/no-unescaped-entities": "warn",
+      "react-hooks/exhaustive-deps": "warn",
+    },
+  },
+];
+
+export default eslintConfig;

lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

next-env.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+/// <reference path="./.next/types/routes.d.ts" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -0,0 +1,18 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  /* config options here */
+  // Enable standalone output for Docker deployment
+  output: 'standalone',
+  // Increase body size limit for API routes to handle large images
+  serverRuntimeConfig: {
+    bodySizeLimit: '50mb',
+  },
+  api: {
+    bodyParser: {
+      sizeLimit: '50mb',
+    },
+  },
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,32 @@
+{
+  "name": "banana",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev --turbopack",
+    "build": "next build --turbopack",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@google/genai": "^1.17.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.542.0",
+    "next": "15.5.2",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "tailwind-merge": "^2.5.3"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3",
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "15.5.2",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,5 @@
+const config = {
+  plugins: ["@tailwindcss/postcss"],
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}