Adding More features

.claude/settings.local.json

@@ -10,7 +10,8 @@
       "Bash(npm run build:*)",
       "Bash(git add:*)",
       "Bash(git commit:*)",
-      "Bash(git push:*)"
+      "Bash(git push:*)",
+      "WebSearch"
     ],
     "deny": [],
     "ask": []

app/api/hf-process/route.ts

@@ -1,178 +0,0 @@
-/**
- * API ROUTE: /api/hf-process
- * 
- * Hugging Face Inference API integration with fal.ai Gemini 2.5 Flash Image.
- * Uses HF Inference API to access fal.ai's Gemini 2.5 Flash Image models.
- */
-
-import { NextRequest, NextResponse } from "next/server";
-import { HfInference } from "@huggingface/inference";
-import { cookies } from "next/headers";
-
-export const runtime = "nodejs";
-export const maxDuration = 60;
-
-export async function POST(req: NextRequest) {
-  try {
-    // Check if user is authenticated with HF Pro
-    const cookieStore = await cookies();
-    const hfToken = cookieStore.get('hf_token');
-    
-    if (!hfToken?.value) {
-      return NextResponse.json(
-        { error: "Please login with HF Pro to use fal.ai Gemini 2.5 Flash Image." },
-        { status: 401 }
-      );
-    }
-
-    // Initialize HF Inference client
-    const hf = new HfInference(hfToken.value);
-    
-    const body = await req.json() as {
-      type: string;
-      image?: string;
-      images?: string[];
-      prompt?: string;
-      params?: any;
-    };
-
-    // Convert data URL to blob for HF API
-    const dataUrlToBlob = (dataUrl: string): Blob => {
-      const arr = dataUrl.split(',');
-      const mime = arr[0].match(/:(.*?);/)?.[1] || 'image/png';
-      const bstr = atob(arr[1]);
-      let n = bstr.length;
-      const u8arr = new Uint8Array(n);
-      while (n--) {
-        u8arr[n] = bstr.charCodeAt(n);
-      }
-      return new Blob([u8arr], { type: mime });
-    };
-
-    // Handle MERGE operation using Stable Diffusion
-    if (body.type === "MERGE") {
-      if (!body.images || body.images.length < 2) {
-        return NextResponse.json(
-          { error: "MERGE requires at least two images" },
-          { status: 400 }
-        );
-      }
-
-      const prompt = body.prompt || `Create a cohesive group photo combining all subjects from the provided images. Ensure consistent lighting, natural positioning, and unified background.`;
-
-      try {
-        // Use fal.ai's Gemini 2.5 Flash Image through HF
-        const result = await hf.textToImage({
-          model: "fal-ai/gemini-25-flash-image/edit",
-          inputs: prompt,
-          parameters: {
-            width: 1024,
-            height: 1024,
-            num_inference_steps: 20,
-          }
-        });
-
-        // HF returns a Blob, convert to base64
-        const arrayBuffer = await (result as unknown as Blob).arrayBuffer();
-        const base64 = Buffer.from(arrayBuffer).toString('base64');
-        
-        return NextResponse.json({ 
-          image: `data:image/png;base64,${base64}`,
-          model: "fal-ai/gemini-25-flash-image/edit"
-        });
-      } catch (error: unknown) {
-        console.error('HF Merge error:', error);
-        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-        return NextResponse.json(
-          { error: `HF processing failed: ${errorMessage}` },
-          { status: 500 }
-        );
-      }
-    }
-
-    // Handle COMBINED and single image processing
-    if (body.type === "COMBINED" || !body.image) {
-      if (!body.image) {
-        return NextResponse.json(
-          { error: "No image provided" },
-          { status: 400 }
-        );
-      }
-    }
-
-    const inputBlob = dataUrlToBlob(body.image);
-    
-    // Build prompt from parameters
-    const prompts: string[] = [];
-    const params = body.params || {};
-
-    // Background changes
-    if (params.backgroundType) {
-      if (params.backgroundType === "color") {
-        prompts.push(`Change background to ${params.backgroundColor || "white"}`);
-      } else if (params.backgroundType === "image") {
-        prompts.push(`Change background to ${params.backgroundImage || "beautiful landscape"}`);
-      } else if (params.customPrompt) {
-        prompts.push(params.customPrompt);
-      }
-    }
-
-    // Style applications
-    if (params.stylePreset) {
-      const styleMap: { [key: string]: string } = {
-        "90s-anime": "90s anime style, classic animation",
-        "cyberpunk": "cyberpunk aesthetic, neon lights, futuristic",
-        "van-gogh": "Van Gogh painting style, impressionist",
-        "simpsons": "The Simpsons cartoon style",
-        "arcane": "Arcane League of Legends art style"
-      };
-      const styleDesc = styleMap[params.stylePreset] || params.stylePreset;
-      prompts.push(`Apply ${styleDesc} art style`);
-    }
-
-    // Other modifications
-    if (params.editPrompt) {
-      prompts.push(params.editPrompt);
-    }
-
-    const prompt = prompts.length > 0 
-      ? prompts.join(", ") 
-      : "High quality image processing";
-
-    try {
-      // Use fal.ai's Gemini 2.5 Flash Image for image editing
-      const result = await hf.imageToImage({
-        model: "fal-ai/gemini-25-flash-image/edit",
-        inputs: inputBlob,
-        parameters: {
-          prompt: prompt,
-          strength: 0.8,
-          num_inference_steps: 25,
-        }
-      });
-
-      const arrayBuffer = await (result as unknown as Blob).arrayBuffer();
-      const base64 = Buffer.from(arrayBuffer).toString('base64');
-      
-      return NextResponse.json({ 
-        image: `data:image/png;base64,${base64}`,
-        model: "fal-ai/gemini-25-flash-image/edit"
-      });
-    } catch (error: unknown) {
-      console.error('HF processing error:', error);
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-      return NextResponse.json(
-        { error: `HF processing failed: ${errorMessage}` },
-        { status: 500 }
-      );
-    }
-
-  } catch (error: unknown) {
-    console.error('HF API error:', error);
-    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
-    return NextResponse.json(
-      { error: `API error: ${errorMessage}` },
-      { status: 500 }
-    );
-  }
-}

app/api/process/route.ts

@@ -358,7 +358,7 @@ The result should look like all subjects were photographed together in the same
       if (params.whiteBalance) cameraSettings.push(`White Balance: ${params.whiteBalance}`);
       if (params.angle) cameraSettings.push(`Camera Angle: ${params.angle}`);
       if (params.iso) cameraSettings.push(`${params.iso}`);
-      if (params.filmStyle) cameraSettings.push(`Film style: ${params.filmStyle}`);
+      if (params.filmStyle) cameraSettings.push(`${params.filmStyle}`);
       if (params.lighting) cameraSettings.push(`Lighting: ${params.lighting}`);
       if (params.bokeh) cameraSettings.push(`Bokeh effect: ${params.bokeh}`);
       if (params.composition) cameraSettings.push(`Composition: ${params.composition}`);

app/nodes.tsx

@@ -47,6 +47,75 @@ function downloadImage(dataUrl: string, filename: string) {
   document.body.removeChild(link);          // Clean up temporary link
 }
 
+/**
+ * Reusable output section with history navigation for node components
+ */
+function NodeOutputSection({
+  nodeId,
+  output,
+  downloadFileName,
+  getNodeHistoryInfo,
+  navigateNodeHistory,
+  getCurrentNodeImage,
+}: {
+  nodeId: string;
+  output?: string;
+  downloadFileName: string;
+  getNodeHistoryInfo?: (id: string) => any;
+  navigateNodeHistory?: (id: string, direction: 'prev' | 'next') => void;
+  getCurrentNodeImage?: (id: string, fallback?: string) => string;
+}) {
+  const currentImage = getCurrentNodeImage ? getCurrentNodeImage(nodeId, output) : output;
+  
+  if (!currentImage) return null;
+  
+  const historyInfo = getNodeHistoryInfo ? getNodeHistoryInfo(nodeId) : { hasHistory: false, currentDescription: '' };
+  
+  return (
+    <div className="space-y-2">
+      <div className="space-y-1">
+        <div className="flex items-center justify-between">
+          <div className="text-xs text-white/70">Output</div>
+          {historyInfo.hasHistory ? (
+            <div className="flex items-center gap-1">
+              <button
+                className="p-1 text-xs bg-white/10 hover:bg-white/20 rounded disabled:opacity-40"
+                onClick={() => navigateNodeHistory && navigateNodeHistory(nodeId, 'prev')}
+                disabled={!historyInfo.canGoBack}
+              >
+                ←
+              </button>
+              <span className="text-xs text-white/60 px-1">
+                {historyInfo.current}/{historyInfo.total}
+              </span>
+              <button
+                className="p-1 text-xs bg-white/10 hover:bg-white/20 rounded disabled:opacity-40"
+                onClick={() => navigateNodeHistory && navigateNodeHistory(nodeId, 'next')}
+                disabled={!historyInfo.canGoForward}
+              >
+                →
+              </button>
+            </div>
+          ) : null}
+        </div>
+        <img src={currentImage} className="w-full rounded" alt="Output" />
+        {historyInfo.currentDescription ? (
+          <div className="text-xs text-white/60 bg-black/20 rounded px-2 py-1">
+            {historyInfo.currentDescription}
+          </div>
+        ) : null}
+      </div>
+      <Button
+        className="w-full"
+        variant="secondary"
+        onClick={() => downloadImage(currentImage, downloadFileName)}
+      >
+        📥 Download Output
+      </Button>
+    </div>
+  );
+}
+
 /* ========================================
    TYPE DEFINITIONS (TEMPORARY)
    ======================================== */
@@ -204,6 +273,9 @@ export function BackgroundNodeView({
   onEndConnection,
   onProcess,
   onUpdatePosition,
+  getNodeHistoryInfo,
+  navigateNodeHistory,
+  getCurrentNodeImage,
 }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
   
@@ -372,18 +444,14 @@ export function BackgroundNodeView({
           {node.isRunning ? "Processing..." : "Apply Background"}
         </Button>
         
-        {node.output && (
-          <div className="space-y-2">
-            <img src={node.output} className="w-full rounded" alt="Output" />
-            <Button
-              className="w-full"
-              variant="secondary"
-              onClick={() => downloadImage(node.output, `background-${Date.now()}.png`)}
-            >
-              📥 Download Output
-            </Button>
-          </div>
-        )}
+        <NodeOutputSection
+          nodeId={node.id}
+          output={node.output}
+          downloadFileName={`background-${Date.now()}.png`}
+          getNodeHistoryInfo={getNodeHistoryInfo}
+          navigateNodeHistory={navigateNodeHistory}
+          getCurrentNodeImage={getCurrentNodeImage}
+        />
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
         )}
@@ -392,7 +460,7 @@ export function BackgroundNodeView({
   );
 }
 
-export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
   
   const presetClothes = [
@@ -546,18 +614,14 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
         >
           {node.isRunning ? "Processing..." : "Apply Clothes"}
         </Button>
-        {node.output && (
-          <div className="space-y-2">
-            <img src={node.output} className="w-full rounded" alt="Output" />
-            <Button
-              className="w-full"
-              variant="secondary"
-              onClick={() => downloadImage(node.output, `clothes-${Date.now()}.png`)}
-            >
-              📥 Download Output
-            </Button>
-          </div>
-        )}
+        <NodeOutputSection
+          nodeId={node.id}
+          output={node.output}
+          downloadFileName={`clothes-${Date.now()}.png`}
+          getNodeHistoryInfo={getNodeHistoryInfo}
+          navigateNodeHistory={navigateNodeHistory}
+          getCurrentNodeImage={getCurrentNodeImage}
+        />
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
         )}
@@ -566,7 +630,7 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
   );
 }
 
-export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
   
   return (
@@ -631,18 +695,14 @@ export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEnd
         >
           {node.isRunning ? "Processing..." : "Apply Age"}
         </Button>
-        {node.output && (
-          <div className="space-y-2">
-            <img src={node.output} className="w-full rounded" alt="Output" />
-            <Button
-              className="w-full"
-              variant="secondary"
-              onClick={() => downloadImage(node.output, `age-${Date.now()}.png`)}
-            >
-              📥 Download Output
-            </Button>
-          </div>
-        )}
+        <NodeOutputSection
+          nodeId={node.id}
+          output={node.output}
+          downloadFileName={`age-${Date.now()}.png`}
+          getNodeHistoryInfo={getNodeHistoryInfo}
+          navigateNodeHistory={navigateNodeHistory}
+          getCurrentNodeImage={getCurrentNodeImage}
+        />
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
         )}
@@ -651,7 +711,7 @@ export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEnd
   );
 }
 
-export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
   const focalLengths = ["None", "8mm fisheye", "12mm", "24mm", "35mm", "50mm", "85mm", "135mm", "200mm", "300mm", "400mm"];
   const apertures = ["None", "f/0.95", "f/1.2", "f/1.4", "f/1.8", "f/2", "f/2.8", "f/4", "f/5.6", "f/8", "f/11", "f/16", "f/22"];
@@ -841,18 +901,16 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
         >
           {node.isRunning ? "Processing..." : "Apply Camera Settings"}
         </Button>
-        {node.output && (
-          <div className="space-y-2 mt-2">
-            <img src={node.output} className="w-full rounded" alt="Output" />
-            <Button
-              className="w-full"
-              variant="secondary"
-              onClick={() => downloadImage(node.output, `camera-${Date.now()}.png`)}
-            >
-              📥 Download Output
-            </Button>
-          </div>
-        )}
+        <div className="mt-2">
+          <NodeOutputSection
+            nodeId={node.id}
+            output={node.output}
+            downloadFileName={`camera-${Date.now()}.png`}
+            getNodeHistoryInfo={getNodeHistoryInfo}
+            navigateNodeHistory={navigateNodeHistory}
+            getCurrentNodeImage={getCurrentNodeImage}
+          />
+        </div>
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
         )}
@@ -861,7 +919,7 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
   );
 }
 
-export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
   const hairstyles = ["None", "short", "long", "curly", "straight", "bald", "mohawk", "ponytail"];
   const expressions = ["None", "happy", "serious", "smiling", "laughing", "sad", "surprised", "angry"];
@@ -988,18 +1046,16 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
         >
           {node.isRunning ? "Processing..." : "Apply Face Changes"}
         </Button>
-        {node.output && (
-          <div className="space-y-2 mt-2">
-            <img src={node.output} className="w-full rounded" alt="Output" />
-            <Button
-              className="w-full"
-              variant="secondary"
-              onClick={() => downloadImage(node.output, `face-${Date.now()}.png`)}
-            >
-              📥 Download Output
-            </Button>
-          </div>
-        )}
+        <div className="mt-2">
+          <NodeOutputSection
+            nodeId={node.id}
+            output={node.output}
+            downloadFileName={`face-${Date.now()}.png`}
+            getNodeHistoryInfo={getNodeHistoryInfo}
+            navigateNodeHistory={navigateNodeHistory}
+            getCurrentNodeImage={getCurrentNodeImage}
+          />
+        </div>
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
         )}
@@ -1008,7 +1064,7 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
   );
 }
 
-export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
   
   const styleOptions = [
@@ -1107,18 +1163,14 @@ export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onE
         >
           {node.isRunning ? "Applying Style..." : "Apply Style Transfer"}
         </Button>
-        {node.output && (
-          <div className="space-y-2">
-            <img src={node.output} className="w-full rounded" alt="Output" />
-            <Button
-              className="w-full"
-              variant="secondary"
-              onClick={() => downloadImage(node.output, `style-${Date.now()}.png`)}
-            >
-              📥 Download Output
-            </Button>
-          </div>
-        )}
+        <NodeOutputSection
+          nodeId={node.id}
+          output={node.output}
+          downloadFileName={`style-${Date.now()}.png`}
+          getNodeHistoryInfo={getNodeHistoryInfo}
+          navigateNodeHistory={navigateNodeHistory}
+          getCurrentNodeImage={getCurrentNodeImage}
+        />
         {node.error && (
           <div className="text-xs text-red-400 mt-2">{node.error}</div>
         )}
@@ -1127,7 +1179,7 @@ export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onE
   );
 }
 
-export function EditNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition }: any) {
+export function EditNodeView({ node, onDelete, onUpdate, onStartConnection, onEndConnection, onProcess, onUpdatePosition, getNodeHistoryInfo, navigateNodeHistory, getCurrentNodeImage }: any) {
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
   
   return (
@@ -1182,18 +1234,14 @@ export function EditNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
         >
           {node.isRunning ? "Processing..." : "Apply Edit"}
         </Button>
-        {node.output && (
-          <div className="space-y-2">
-            <img src={node.output} className="w-full rounded" alt="Output" />
-            <Button
-              className="w-full"
-              variant="secondary"
-              onClick={() => downloadImage(node.output, `edit-${Date.now()}.png`)}
-            >
-              📥 Download Output
-            </Button>
-          </div>
-        )}
+        <NodeOutputSection
+          nodeId={node.id}
+          output={node.output}
+          downloadFileName={`edit-${Date.now()}.png`}
+          getNodeHistoryInfo={getNodeHistoryInfo}
+          navigateNodeHistory={navigateNodeHistory}
+          getCurrentNodeImage={getCurrentNodeImage}
+        />
       </div>
     </div>
   );

app/page.tsx

@@ -31,8 +31,8 @@ import {
 // UI components from shadcn/ui library
 import { Button } from "../components/ui/button";
 import { Input } from "../components/ui/input";
-// Hugging Face OAuth functionality - COMMENTED OUT FOR MANUAL REVIEW
-// import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
+// Hugging Face OAuth functionality
+import { oauthLoginUrl, oauthHandleRedirectIfPresent } from '@huggingface/hub';
 
 /**
  * Utility function to combine CSS class names conditionally
@@ -698,29 +698,66 @@ function MergeNodeView({
         </div>
 
         <div className="mt-2">
-          <div className="text-xs text-white/70 mb-1">Output</div>
+          <div className="flex items-center justify-between mb-1">
+            <div className="text-xs text-white/70">Output</div>
+            {(() => {
+              const historyInfo = getNodeHistoryInfo(node.id);
+              return historyInfo.hasHistory ? (
+                <div className="flex items-center gap-1">
+                  <button
+                    className="p-1 text-xs bg-white/10 hover:bg-white/20 rounded disabled:opacity-40"
+                    onClick={() => navigateNodeHistory(node.id, 'prev')}
+                    disabled={!historyInfo.canGoBack}
+                  >
+                    ←
+                  </button>
+                  <span className="text-xs text-white/60 px-1">
+                    {historyInfo.current}/{historyInfo.total}
+                  </span>
+                  <button
+                    className="p-1 text-xs bg-white/10 hover:bg-white/20 rounded disabled:opacity-40"
+                    onClick={() => navigateNodeHistory(node.id, 'next')}
+                    disabled={!historyInfo.canGoForward}
+                  >
+                    →
+                  </button>
+                </div>
+              ) : null;
+            })()}
+          </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" />
+            {getCurrentNodeImage(node.id, node.output) ? (
+              <img src={getCurrentNodeImage(node.id, 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>
+          {getCurrentNodeImage(node.id, node.output) && (
+            <div className="mt-2 space-y-2">
+              {(() => {
+                const historyInfo = getNodeHistoryInfo(node.id);
+                return historyInfo.currentDescription ? (
+                  <div className="text-xs text-white/60 bg-black/20 rounded px-2 py-1">
+                    {historyInfo.currentDescription}
+                  </div>
+                ) : null;
+              })()}
+              <Button
+                className="w-full"
+                variant="secondary"
+                onClick={() => {
+                  const link = document.createElement('a');
+                  const currentImage = getCurrentNodeImage(node.id, node.output);
+                  link.href = currentImage as string;
+                  link.download = `merge-${Date.now()}.png`;
+                  document.body.appendChild(link);
+                  link.click();
+                  document.body.removeChild(link);
+                }}
+              >
+                📥 Download Merged Image
+              </Button>
+            </div>
           )}
           {node.error && (
             <div className="mt-2">
@@ -767,10 +804,10 @@ export default function EditorPage() {
     scaleRef.current = scale;
   }, [scale]);
 
-  // HF OAUTH CHECK - COMMENTED OUT FOR MANUAL REVIEW
-  /*
+  // HF OAUTH CHECK
   useEffect(() => {
     (async () => {
+      setIsCheckingAuth(true);
       try {
         // Handle OAuth redirect if present
         const oauth = await oauthHandleRedirectIfPresent();
@@ -797,10 +834,8 @@ export default function EditorPage() {
       }
     })();
   }, []);
-  */
 
-  // HF PRO LOGIN HANDLER - COMMENTED OUT FOR MANUAL REVIEW  
-  /*
+  // HF PRO LOGIN HANDLER
   const handleHfProLogin = async () => {
     if (isHfProLoggedIn) {
       // Logout: clear the token
@@ -825,12 +860,6 @@ export default function EditorPage() {
       });
     }
   };
-  */
-  
-  // Placeholder function for manual review
-  const handleHfProLogin = () => {
-    console.log('HF Pro login disabled - see HF_INTEGRATION_CHANGES.md for details');
-  };
 
   // Connection dragging state
   const [draggingFrom, setDraggingFrom] = useState<string | null>(null);
@@ -840,11 +869,52 @@ export default function EditorPage() {
   const [apiToken, setApiToken] = useState("");
   const [showHelpSidebar, setShowHelpSidebar] = useState(false);
   
-  // HF PRO AUTHENTICATION - COMMENTED OUT FOR MANUAL REVIEW
-  // const [isHfProLoggedIn, setIsHfProLoggedIn] = useState(false);
-  // const [isCheckingAuth, setIsCheckingAuth] = useState(true);
-  const [isHfProLoggedIn] = useState(false); // Disabled for manual review
-  const [isCheckingAuth] = useState(false); // Disabled for manual review
+  // HF PRO AUTHENTICATION
+  const [isHfProLoggedIn, setIsHfProLoggedIn] = useState(false);
+  const [isCheckingAuth, setIsCheckingAuth] = useState(true);
+
+  // NODE HISTORY (per-node image history)
+  const [nodeHistories, setNodeHistories] = useState<Record<string, Array<{
+    id: string;
+    image: string;
+    timestamp: number;
+    description: string;
+  }>>>({});
+  
+  const [nodeHistoryIndex, setNodeHistoryIndex] = useState<Record<string, number>>({});
+
+  // Load node histories from localStorage on startup
+  useEffect(() => {
+    try {
+      const savedHistories = localStorage.getItem('nano-banana-node-histories');
+      const savedIndices = localStorage.getItem('nano-banana-node-history-indices');
+      if (savedHistories) {
+        setNodeHistories(JSON.parse(savedHistories));
+      }
+      if (savedIndices) {
+        setNodeHistoryIndex(JSON.parse(savedIndices));
+      }
+    } catch (error) {
+      console.error('Failed to load node histories from localStorage:', error);
+    }
+  }, []);
+
+  // Save node histories to localStorage whenever they change
+  useEffect(() => {
+    try {
+      localStorage.setItem('nano-banana-node-histories', JSON.stringify(nodeHistories));
+    } catch (error) {
+      console.error('Failed to save node histories to localStorage:', error);
+    }
+  }, [nodeHistories]);
+
+  useEffect(() => {
+    try {
+      localStorage.setItem('nano-banana-node-history-indices', JSON.stringify(nodeHistoryIndex));
+    } catch (error) {
+      console.error('Failed to save node history indices to localStorage:', error);
+    }
+  }, [nodeHistoryIndex]);
 
   const characters = nodes.filter((n) => n.type === "CHARACTER") as CharacterNode[];
   const merges = nodes.filter((n) => n.type === "MERGE") as MergeNode[];
@@ -923,6 +993,84 @@ export default function EditorPage() {
     setNodes((prev) => prev.map((n) => (n.id === id ? { ...n, ...updates } : n)));
   };
 
+  // Add image to node's history
+  const addToNodeHistory = (nodeId: string, image: string, description: string) => {
+    const historyEntry = {
+      id: uid(),
+      image,
+      timestamp: Date.now(),
+      description
+    };
+    
+    setNodeHistories(prev => {
+      const nodeHistory = prev[nodeId] || [];
+      const newHistory = [historyEntry, ...nodeHistory].slice(0, 10); // Keep last 10 per node
+      return {
+        ...prev,
+        [nodeId]: newHistory
+      };
+    });
+    
+    // Set this as the current (latest) image for the node
+    setNodeHistoryIndex(prev => ({
+      ...prev,
+      [nodeId]: 0
+    }));
+  };
+
+  // Navigate node history
+  const navigateNodeHistory = (nodeId: string, direction: 'prev' | 'next') => {
+    const history = nodeHistories[nodeId];
+    if (!history || history.length <= 1) return;
+    
+    const currentIndex = nodeHistoryIndex[nodeId] || 0;
+    let newIndex = currentIndex;
+    
+    if (direction === 'prev' && currentIndex < history.length - 1) {
+      newIndex = currentIndex + 1;
+    } else if (direction === 'next' && currentIndex > 0) {
+      newIndex = currentIndex - 1;
+    }
+    
+    if (newIndex !== currentIndex) {
+      setNodeHistoryIndex(prev => ({
+        ...prev,
+        [nodeId]: newIndex
+      }));
+      
+      // Update the node's output to show the historical image
+      const historicalImage = history[newIndex].image;
+      updateNode(nodeId, { output: historicalImage });
+    }
+  };
+
+  // Get current image for a node (either latest or from history navigation)
+  const getCurrentNodeImage = (nodeId: string, defaultOutput?: string) => {
+    const history = nodeHistories[nodeId];
+    const index = nodeHistoryIndex[nodeId] || 0;
+    
+    if (history && history[index]) {
+      return history[index].image;
+    }
+    
+    return defaultOutput;
+  };
+
+  // Get history info for a node
+  const getNodeHistoryInfo = (nodeId: string) => {
+    const history = nodeHistories[nodeId] || [];
+    const index = nodeHistoryIndex[nodeId] || 0;
+    
+    return {
+      hasHistory: history.length > 1,
+      current: index + 1,
+      total: history.length,
+      canGoBack: index < history.length - 1,
+      canGoForward: index > 0,
+      currentDescription: history[index]?.description || ''
+    };
+  };
+
   // Handle single input connections for new nodes
   const handleEndSingleConnection = (nodeId: string) => {
     if (draggingFrom) {
@@ -1334,6 +1482,13 @@ export default function EditorPage() {
         }
         return n;
       }));
+
+      // Add to node's history
+      const description = unprocessedNodeCount > 1 
+        ? `Combined ${unprocessedNodeCount} transformations`
+        : `${node.type} transformation`;
+      
+      addToNodeHistory(nodeId, data.image, description);
       
       if (unprocessedNodeCount > 1) {
         console.log(`✅ Successfully applied ${unprocessedNodeCount} transformations in ONE API call!`);
@@ -1600,6 +1755,19 @@ export default function EditorPage() {
       }
       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)));
+      
+      // Add merge result to node's history
+      if (out) {
+        const inputLabels = merge.inputs.map((id, index) => {
+          const inputNode = nodes.find(n => n.id === id);
+          if (inputNode?.type === "CHARACTER") {
+            return (inputNode as CharacterNode).label || `Character ${index + 1}`;
+          }
+          return `${inputNode?.type || 'Node'} ${index + 1}`;
+        });
+        
+        addToNodeHistory(mergeId, out, `Merged: ${inputLabels.join(" + ")}`);
+      }
     } 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)));
@@ -1824,25 +1992,7 @@ export default function EditorPage() {
             Help
           </Button>
           
-          {/* HF PRO BUTTON - COMMENTED OUT FOR MANUAL REVIEW */}
-          {/*
-          <Button
-            variant={isHfProLoggedIn ? "default" : "secondary"}
-            size="sm"
-            className="h-8 px-3"
-            type="button"
-            onClick={handleHfProLogin}
-            disabled={isCheckingAuth}
-            title={isHfProLoggedIn ? "Using fal.ai Gemini 2.5 Flash Image via HF" : "Click to login and use fal.ai Gemini 2.5 Flash"}
-          >
-            {isCheckingAuth ? "Checking..." : (isHfProLoggedIn ? "🤗 HF PRO ✓" : "Login HF PRO")}
-          </Button>
-          {isHfProLoggedIn && (
-            <div className="text-xs text-muted-foreground">
-              Using fal.ai Gemini 2.5 Flash
-            </div>
-          )}
-          */}
+
         </div>
       </header>
 
@@ -2052,6 +2202,9 @@ export default function EditorPage() {
                       onEndConnection={handleEndSingleConnection}
                       onProcess={processNode}
                       onUpdatePosition={updateNodePosition}
+                      getNodeHistoryInfo={getNodeHistoryInfo}
+                      navigateNodeHistory={navigateNodeHistory}
+                      getCurrentNodeImage={getCurrentNodeImage}
                     />
                   );
                 case "CLOTHES":
@@ -2065,6 +2218,9 @@ export default function EditorPage() {
                       onEndConnection={handleEndSingleConnection}
                       onProcess={processNode}
                       onUpdatePosition={updateNodePosition}
+                      getNodeHistoryInfo={getNodeHistoryInfo}
+                      navigateNodeHistory={navigateNodeHistory}
+                      getCurrentNodeImage={getCurrentNodeImage}
                     />
                   );
                 case "STYLE":
@@ -2078,6 +2234,9 @@ export default function EditorPage() {
                       onEndConnection={handleEndSingleConnection}
                       onProcess={processNode}
                       onUpdatePosition={updateNodePosition}
+                      getNodeHistoryInfo={getNodeHistoryInfo}
+                      navigateNodeHistory={navigateNodeHistory}
+                      getCurrentNodeImage={getCurrentNodeImage}
                     />
                   );
                 case "EDIT":
@@ -2091,6 +2250,9 @@ export default function EditorPage() {
                       onEndConnection={handleEndSingleConnection}
                       onProcess={processNode}
                       onUpdatePosition={updateNodePosition}
+                      getNodeHistoryInfo={getNodeHistoryInfo}
+                      navigateNodeHistory={navigateNodeHistory}
+                      getCurrentNodeImage={getCurrentNodeImage}
                     />
                   );
                 case "CAMERA":
@@ -2104,6 +2266,9 @@ export default function EditorPage() {
                       onEndConnection={handleEndSingleConnection}
                       onProcess={processNode}
                       onUpdatePosition={updateNodePosition}
+                      getNodeHistoryInfo={getNodeHistoryInfo}
+                      navigateNodeHistory={navigateNodeHistory}
+                      getCurrentNodeImage={getCurrentNodeImage}
                     />
                   );
                 case "AGE":
@@ -2117,6 +2282,9 @@ export default function EditorPage() {
                       onEndConnection={handleEndSingleConnection}
                       onProcess={processNode}
                       onUpdatePosition={updateNodePosition}
+                      getNodeHistoryInfo={getNodeHistoryInfo}
+                      navigateNodeHistory={navigateNodeHistory}
+                      getCurrentNodeImage={getCurrentNodeImage}
                     />
                   );
                 case "FACE":
@@ -2130,6 +2298,9 @@ export default function EditorPage() {
                       onEndConnection={handleEndSingleConnection}
                       onProcess={processNode}
                       onUpdatePosition={updateNodePosition}
+                      getNodeHistoryInfo={getNodeHistoryInfo}
+                      navigateNodeHistory={navigateNodeHistory}
+                      getCurrentNodeImage={getCurrentNodeImage}
                     />
                   );
                 default:

next.config.ts

@@ -8,11 +8,6 @@ const nextConfig: NextConfig = {
   serverRuntimeConfig: {
     bodySizeLimit: '50mb',
   },
-  api: {
-    bodyParser: {
-      sizeLimit: '50mb',
-    },
-  },
 };
 
 export default nextConfig;

package-lock.json

@@ -11,7 +11,7 @@
         "@fal-ai/serverless-client": "^0.15.0",
         "@google/genai": "^1.17.0",
         "@huggingface/hub": "^2.6.3",
-        "@huggingface/inference": "^4.7.1",
+        "@huggingface/inference": "^4.8.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "lucide-react": "^0.542.0",
@@ -273,13 +273,13 @@
       }
     },
     "node_modules/@huggingface/inference": {
-      "version": "4.7.1",
-      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.7.1.tgz",
-      "integrity": "sha512-gXrMocGDsE6kUZPEj82c3O+/OKnIfbHvg9rYjGA6svbWrYVmHCIAdCrrgCwNl2v5GELfPJrrfIv0bvzCTfa64A==",
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/@huggingface/inference/-/inference-4.8.0.tgz",
+      "integrity": "sha512-Eq98EAXqYn4rKMfrbEXuhc3IjKfaeIO6eXNOZk9xk6v5akrIWRtd6d1h0fjAWyX4zRbdUpXRh6MvsqXnzGvXCA==",
       "license": "MIT",
       "dependencies": {
         "@huggingface/jinja": "^0.5.1",
-        "@huggingface/tasks": "^0.19.35"
+        "@huggingface/tasks": "^0.19.45"
       },
       "engines": {
         "node": ">=18"

package.json

@@ -12,7 +12,7 @@
     "@fal-ai/serverless-client": "^0.15.0",
     "@google/genai": "^1.17.0",
     "@huggingface/hub": "^2.6.3",
-    "@huggingface/inference": "^4.7.1",
+    "@huggingface/inference": "^4.8.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.542.0",