Special Branch For HF

.dockerignore

@@ -0,0 +1,56 @@
+# Dependencies
+node_modules
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Next.js
+.next/
+out/
+
+# Production
+build
+dist
+
+# Environment variables
+.env*
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
+
+# OS generated files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# IDE
+.vscode
+.idea
+*.swp
+*.swo
+
+# Logs
+logs
+*.log
+
+# Git
+.git
+.gitignore
+README.md
+
+# Docker
+Dockerfile
+.dockerignore

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"]

app/api/generate/route.ts

@@ -5,7 +5,7 @@ export const runtime = "nodejs"; // Ensure Node runtime for SDK
 
 export async function POST(req: NextRequest) {
   try {
-    const { prompt } = (await req.json()) as { prompt?: string };
+    const { prompt, apiToken } = (await req.json()) as { prompt?: string; apiToken?: string };
     if (!prompt || typeof prompt !== "string") {
       return NextResponse.json(
         { error: "Missing prompt" },
@@ -13,10 +13,11 @@ export async function POST(req: NextRequest) {
       );
     }
 
-    const apiKey = process.env.GOOGLE_API_KEY;
+    // 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 configured. Please add GOOGLE_API_KEY to .env.local file. Get your key from: https://aistudio.google.com/app/apikey" },
+        { 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 }
       );
     }

app/api/merge/route.ts

@@ -35,6 +35,7 @@ export async function POST(req: NextRequest) {
     const body = (await req.json()) as {
       images?: string[]; // data URLs
       prompt?: string;
+      apiToken?: string;
     };
 
     const imgs = body.images?.filter(Boolean) ?? [];
@@ -45,10 +46,11 @@ export async function POST(req: NextRequest) {
       );
     }
 
-    const apiKey = process.env.GOOGLE_API_KEY;
+    // 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 configured. Please add GOOGLE_API_KEY to .env.local file. Get your key from: https://aistudio.google.com/app/apikey" },
+        { 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 }
       );
     }

app/api/process/route.ts

@@ -26,6 +26,7 @@ export async function POST(req: NextRequest) {
         images?: string[];
         prompt?: string;
         params?: any;
+        apiToken?: string;
       };
     } catch (jsonError) {
       console.error('[API] Failed to parse JSON:', jsonError);
@@ -35,10 +36,11 @@ export async function POST(req: NextRequest) {
       );
     }
 
-    const apiKey = process.env.GOOGLE_API_KEY;
+    // 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 configured. Please add GOOGLE_API_KEY to .env.local file." },
+        { 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 }
       );
     }

app/editor/page.tsx

@@ -1,1762 +0,0 @@
-"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";
-
-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);
-
-  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
-        }),
-      });
-
-      // 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 
-      }),
-    });
-    
-    // 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 
-        }),
-      });
-      
-      // 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 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>
-      </header>
-
-      <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>
-  );
-}
-

app/{editor/nodes.tsx → nodes.tsx}

@@ -1,13 +1,13 @@
 "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";
+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) {

app/page.tsx

@@ -1,103 +1,1861 @@
-import Image from "next/image";
-
-export default function Home() {
-  return (
-    <div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
-      <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={180}
-          height={38}
-          priority
-        />
-        <ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
-          <li className="mb-2 tracking-[-.01em]">
-            Get started by editing{" "}
-            <code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
-              app/page.tsx
-            </code>
-            .
-          </li>
-          <li className="tracking-[-.01em]">
-            Save and see your changes instantly.
-          </li>
-        </ol>
-
-        <div className="flex gap-4 items-center flex-col sm:flex-row">
-          <a
-            className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={20}
-              height={20}
-            />
-            Deploy now
-          </a>
-          <a
-            className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Read our docs
-          </a>
-        </div>
-      </main>
-      <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/file.svg"
-            alt="File icon"
-            width={16}
-            height={16}
-          />
-          Learn
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/window.svg"
-            alt="Window icon"
-            width={16}
-            height={16}
-          />
-          Examples
-        </a>
-        <a
-          className="flex items-center gap-2 hover:underline hover:underline-offset-4"
-          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <Image
-            aria-hidden
-            src="/globe.svg"
-            alt="Globe icon"
-            width={16}
-            height={16}
-          />
-          Go to nextjs.org →
-        </a>
-      </footer>
-    </div>
-  );
-}
+"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>
+  );
+}
+

app/try-on/page.tsx

@@ -1,414 +0,0 @@
-"use client";
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-function readFilesAsDataUrls(files: FileList | File[]): Promise<string[]> {
-  const arr = Array.from(files as File[]);
-  return Promise.all(
-    arr.map(
-      (file) =>
-        new Promise<string>((resolve, reject) => {
-          const reader = new FileReader();
-          reader.onload = () => resolve(reader.result as string);
-          reader.onerror = (e) => reject(e);
-          reader.readAsDataURL(file);
-        })
-    )
-  );
-}
-
-type ZoneKind = "user" | "clothes";
-
-function UploadZone({
-  title,
-  description,
-  onDropData,
-  allowMultiple = false,
-}: {
-  title: string;
-  description: string;
-  onDropData: (dataUrls: string[]) => void;
-  allowMultiple?: boolean;
-}) {
-  const ref = useRef<HTMLDivElement>(null);
-  const handleFiles = useCallback(
-    async (files: FileList | File[]) => {
-      const urls = await readFilesAsDataUrls(files);
-      onDropData(urls);
-    },
-    [onDropData]
-  );
-
-  const onDrop = useCallback(
-    async (e: React.DragEvent<HTMLDivElement>) => {
-      e.preventDefault();
-      const files = e.dataTransfer.files;
-      if (files && files.length) {
-        await handleFiles(files);
-      }
-    },
-    [handleFiles]
-  );
-
-  const onPaste = useCallback(
-    async (e: React.ClipboardEvent<HTMLDivElement>) => {
-      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) {
-        await handleFiles(files);
-        return;
-      }
-
-      // Fallback: if user pasted a URL (e.g., copied image address)
-      const text = e.clipboardData.getData("text");
-      if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
-        onDropData([text]);
-      }
-    },
-    [handleFiles, onDropData]
-  );
-
-  return (
-    <div
-      ref={ref}
-      tabIndex={0}
-      onDrop={onDrop}
-      onDragOver={(e) => e.preventDefault()}
-      onPaste={onPaste}
-      className="rounded-2xl border border-white/10 bg-black/40 text-white p-6 sm:p-8 transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500/60"
-    >
-      <div className="flex items-center justify-between mb-4">
-        <h2 className="text-lg font-semibold tracking-wide">{title}</h2>
-        <span className="text-xs text-white/60">drop • click • paste</span>
-      </div>
-      <label className="block" aria-label={`${title} uploader`}>
-        <input
-          type="file"
-          accept="image/*"
-          multiple={allowMultiple}
-          className="hidden"
-          onChange={async (e) => {
-            if (e.currentTarget.files?.length) {
-              await handleFiles(e.currentTarget.files);
-              e.currentTarget.value = "";
-            }
-          }}
-        />
-        <div className="grid place-items-center rounded-xl border border-dashed border-white/20 hover:border-white/40 cursor-pointer px-6 py-12 sm:py-16 text-center select-none">
-          <p className="text-sm leading-6 text-white/80">
-            {description}
-          </p>
-          <p className="mt-3 text-xs text-white/50">
-            Upload or paste an image. Tip: click this box and press Ctrl/Cmd+V
-          </p>
-        </div>
-      </label>
-    </div>
-  );
-}
-
-export default function TryOnPage() {
-  const [userImage, setUserImage] = useState<string | null>(null);
-  const [clothingImages, setClothingImages] = useState<string[]>([]);
-  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
-
-  const selectedClothing = useMemo(
-    () => (selectedIndex != null ? clothingImages[selectedIndex] : null),
-    [selectedIndex, clothingImages]
-  );
-
-  // Overlay controls
-  const [scale, setScale] = useState(1);
-  const [offsetX, setOffsetX] = useState(0);
-  const [offsetY, setOffsetY] = useState(0);
-  const [rotation, setRotation] = useState(0);
-
-  const dragRef = useRef<HTMLImageElement>(null);
-  const dragging = useRef(false);
-  const start = useRef<{ x: number; y: number; ox: number; oy: number } | null>(
-    null
-  );
-
-  const onPointerDown = (e: React.PointerEvent) => {
-    if (!selectedClothing) return;
-    dragging.current = true;
-    start.current = {
-      x: e.clientX,
-      y: e.clientY,
-      ox: offsetX,
-      oy: offsetY,
-    };
-    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
-  };
-  const onPointerMove = (e: React.PointerEvent) => {
-    if (!dragging.current || !start.current) return;
-    const dx = e.clientX - start.current.x;
-    const dy = e.clientY - start.current.y;
-    setOffsetX(start.current.ox + dx);
-    setOffsetY(start.current.oy + dy);
-  };
-  const onPointerUp = (e: React.PointerEvent) => {
-    dragging.current = false;
-    start.current = null;
-    (e.currentTarget as HTMLElement).releasePointerCapture(e.pointerId);
-  };
-
-  const addUserImages = (urls: string[]) => {
-    setUserImage(urls[0] ?? null);
-  };
-  const addClothesImages = (urls: string[]) => {
-    setClothingImages((prev) => [...urls, ...prev]);
-    if (selectedIndex == null && urls.length) setSelectedIndex(0);
-  };
-
-  // Gemini generation
-  const [genPrompt, setGenPrompt] = useState(
-    "A front-facing fashion product (e.g., jacket, shirt, dress, sunglasses, or accessory) on a plain or transparent background, high quality, photo-realistic."
-  );
-  const [isGenerating, setIsGenerating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const generateWithGemini = async () => {
-    try {
-      setIsGenerating(true);
-      setError(null);
-      const res = await fetch("/api/generate", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ prompt: genPrompt }),
-      });
-      if (!res.ok) {
-        const js = await res.json().catch(() => ({}));
-        throw new Error(js.error || `Request failed (${res.status})`);
-      }
-      const data = (await res.json()) as { images?: string[]; text?: string };
-      const imgs = data.images ?? [];
-      if (!imgs.length) {
-        // Fallback: if model returned only text, just show an error message
-        throw new Error(
-          "Model returned no images. Try a different prompt, e.g., 'white t-shirt, product photo, front view'."
-        );
-      }
-      addClothesImages(imgs);
-    } catch (e: any) {
-      setError(e?.message || "Failed to generate image");
-    } finally {
-      setIsGenerating(false);
-    }
-  };
-
-  return (
-    <div className="min-h-[100svh] bg-background text-foreground">
-      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-10">
-        {/* Header */}
-        <div className="flex items-center justify-between mb-10">
-          <h1 className="text-xl sm:text-2xl font-semibold tracking-wide">
-            Virtual Try-On (simple overlay)
-          </h1>
-          <a
-            className="text-xs text-white/60 hover:text-white underline underline-offset-4"
-            href="/"
-          >
-            Home
-          </a>
-        </div>
-
-        {/* Two columns */}
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8">
-          <UploadZone
-            title="Your photo"
-            description="Drop, click to upload, or paste your portrait. Prefer front-facing photos for best results."
-            onDropData={addUserImages}
-          />
-          <UploadZone
-            title="Clothing / accessories"
-            description="Add product shots you want to try. You can upload multiple, paste, or use Gemini to generate some."
-            onDropData={addClothesImages}
-            allowMultiple
-          />
-        </div>
-
-        {/* Preview area */}
-        <div className="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-6 lg:gap-8">
-          <div className="rounded-2xl border border-white/10 bg-white/5 p-4 sm:p-6">
-            <h3 className="mb-3 text-sm font-medium text-white/80">Your photo</h3>
-            <div
-              className="relative aspect-[4/5] w-full overflow-hidden rounded-xl bg-black grid place-items-center"
-              onPointerDown={onPointerDown}
-              onPointerMove={onPointerMove}
-              onPointerUp={onPointerUp}
-            >
-              {userImage ? (
-                <img
-                  src={userImage}
-                  alt="User"
-                  className="absolute inset-0 h-full w-full object-contain"
-                />
-              ) : (
-                <p className="text-white/50 text-sm">No photo yet</p>
-              )}
-
-              {/* Overlay clothing */}
-              {userImage && selectedClothing && (
-                <img
-                  ref={dragRef}
-                  src={selectedClothing}
-                  alt="Clothing overlay"
-                  className="pointer-events-auto select-none"
-                  style={{
-                    position: "absolute",
-                    left: "50%",
-                    top: "50%",
-                    transform: `translate(calc(-50% + ${offsetX}px), calc(-50% + ${offsetY}px)) rotate(${rotation}deg) scale(${scale})`,
-                    transformOrigin: "center center",
-                    maxWidth: "70%",
-                  }}
-                />
-              )}
-            </div>
-
-            {/* Controls */}
-            <div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-4">
-              <div>
-                <label className="flex items-center justify-between text-xs text-white/70 mb-1">
-                  <span>Scale</span>
-                  <span>{scale.toFixed(2)}x</span>
-                </label>
-                <input
-                  type="range"
-                  min={0.3}
-                  max={3}
-                  step={0.01}
-                  value={scale}
-                  onChange={(e) => setScale(parseFloat(e.target.value))}
-                  className="w-full"
-                />
-              </div>
-              <div>
-                <label className="flex items-center justify-between text-xs text-white/70 mb-1">
-                  <span>Rotation</span>
-                  <span>{rotation.toFixed(0)}°</span>
-                </label>
-                <input
-                  type="range"
-                  min={-180}
-                  max={180}
-                  step={1}
-                  value={rotation}
-                  onChange={(e) => setRotation(parseFloat(e.target.value))}
-                  className="w-full"
-                />
-              </div>
-              <div>
-                <label className="flex items-center justify-between text-xs text-white/70 mb-1">
-                  <span>Offset X</span>
-                  <span>{offsetX.toFixed(0)}px</span>
-                </label>
-                <input
-                  type="range"
-                  min={-300}
-                  max={300}
-                  step={1}
-                  value={offsetX}
-                  onChange={(e) => setOffsetX(parseFloat(e.target.value))}
-                  className="w-full"
-                />
-              </div>
-              <div>
-                <label className="flex items-center justify-between text-xs text-white/70 mb-1">
-                  <span>Offset Y</span>
-                  <span>{offsetY.toFixed(0)}px</span>
-                </label>
-                <input
-                  type="range"
-                  min={-300}
-                  max={300}
-                  step={1}
-                  value={offsetY}
-                  onChange={(e) => setOffsetY(parseFloat(e.target.value))}
-                  className="w-full"
-                />
-              </div>
-            </div>
-          </div>
-
-          <div className="rounded-2xl border border-white/10 bg-white/5 p-4 sm:p-6">
-            <h3 className="mb-3 text-sm font-medium text-white/80">
-              Clothing library
-            </h3>
-            {clothingImages.length === 0 ? (
-              <p className="text-white/50 text-sm">No clothing images yet</p>
-            ) : (
-              <div className="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
-                {clothingImages.map((src, idx) => (
-                  <button
-                    key={idx}
-                    onClick={() => setSelectedIndex(idx)}
-                    className={`relative aspect-square overflow-hidden rounded-lg border ${
-                      selectedIndex === idx
-                        ? "border-indigo-400"
-                        : "border-white/10 hover:border-white/30"
-                    }`}
-                    title="Select for overlay"
-                  >
-                    <img
-                      src={src}
-                      alt={`Clothing ${idx + 1}`}
-                      className="h-full w-full object-cover"
-                    />
-                  </button>
-                ))}
-              </div>
-            )}
-
-            {/* Gemini generator */}
-            <div className="mt-6 rounded-xl bg-black/40 border border-white/10 p-4">
-              <p className="text-sm text-white/80 font-medium mb-2">
-                Generate with Gemini
-              </p>
-              <div className="flex flex-col gap-3">
-                <textarea
-                  value={genPrompt}
-                  onChange={(e) => setGenPrompt(e.target.value)}
-                  rows={3}
-                  className="w-full rounded-lg bg-black/60 border border-white/10 p-3 text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500/60"
-                />
-                <div className="flex items-center gap-3">
-                  <button
-                    onClick={generateWithGemini}
-                    disabled={isGenerating}
-                    className="inline-flex items-center justify-center rounded-md bg-indigo-500 hover:bg-indigo-400 disabled:opacity-60 text-white text-sm font-medium px-4 py-2"
-                  >
-                    {isGenerating ? "Generating…" : "Generate"}
-                  </button>
-                  {error && (
-                    <span className="text-xs text-red-400">{error}</span>
-                  )}
-                </div>
-                <p className="text-[11px] text-white/50">
-                  Tip: Ask for a single front-view item with plain background, e.g.
-                  "black leather jacket, product photo, front view".
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div className="mt-10 text-xs text-white/50">
-          Note: This demo performs a simple 2D overlay for exploration. True
-          virtual try-on (warping to body shape, segmentation) requires
-          specialized vision models not included here.
-        </div>
-      </div>
-    </div>
-  );
-}
-

next.config.ts

@@ -2,6 +2,8 @@ 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',