Refactor ClothesNode to use text prompts and add NodeTimer

app/api/hf-process/route.ts

@@ -264,6 +264,11 @@ export async function POST(req: NextRequest) {
                 prompts.push(params.editPrompt);
             }
 
+            // Clothing modifications
+            if (params.clothesPrompt) {
+                prompts.push(`Change clothing to: ${params.clothesPrompt}`);
+            }
+
             // Age transformation
             if (params.targetAge) {
                 prompts.push(`Transform the person to look ${params.targetAge} years old.`);

app/nodes.tsx

@@ -61,6 +61,39 @@ import { Textarea } from "../components/ui/textarea";   // Multi-line text input
 import { Slider } from "../components/ui/slider";       // Range slider input component
 import { ColorPicker } from "../components/ui/color-picker"; // Color selection component
 import { Checkbox } from "../components/ui/checkbox";   // Checkbox input component
+import { Loader2 } from "lucide-react";               // Loading spinner icon
+
+/**
+ * Timer component that shows execution time
+ * Uses a green checkmark when finished or a spinner when running
+ */
+function NodeTimer({ startTime, executionTime, isRunning }: { startTime?: number, executionTime?: number, isRunning?: boolean }) {
+  const [elapsed, setElapsed] = useState(0);
+
+  useEffect(() => {
+    if (!isRunning || !startTime) return;
+    const interval = setInterval(() => {
+      setElapsed(Date.now() - startTime);
+    }, 100);
+    return () => clearInterval(interval);
+  }, [isRunning, startTime]);
+
+  if (!startTime && !executionTime) return null;
+
+  const timeToShow = isRunning ? elapsed : (executionTime || 0);
+  const seconds = (timeToShow / 1000).toFixed(1);
+
+  return (
+    <div className="absolute top-2 right-2 flex items-center gap-1.5 bg-background/80 text-foreground text-[10px] px-2 py-1 rounded-md border shadow-sm z-50 backdrop-blur-sm">
+      {isRunning ? (
+        <Loader2 className="w-3 h-3 animate-spin text-banana-500" />
+      ) : (
+        <span className="text-green-500 font-bold">✓</span>
+      )}
+      <span className="font-mono">{seconds}s</span>
+    </div>
+  );
+}
 
 /**
  * Helper function to download processed images
@@ -496,6 +529,7 @@ export function BackgroundNodeView({
       onDragOver={(e) => e.preventDefault()}
       onPaste={handleImagePaste}
     >
+      <NodeTimer startTime={node.startTime} executionTime={node.executionTime} isRunning={node.isRunning} />
       <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
@@ -835,58 +869,12 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
   // Handle node dragging functionality
   const { localPos, onPointerDown, onPointerMove, onPointerUp } = useNodeDrag(node, onUpdatePosition);
 
-  /**
-   * Preset clothing options available for quick selection
-   * Each preset includes a display name and path to the reference image
-   */
-  const presetClothes = [
-    { name: "Sukajan", path: "/clothes/sukajan.png" },           // Japanese-style embroidered jacket
-    { name: "Blazer", path: "/clothes/blazzer.png" },            // Business blazer/jacket
-    { name: "Suit", path: "/clothes/suit.png" },                 // Formal business suit
-    { name: "Women's Outfit", path: "/clothes/womenoutfit.png" }, // Women's clothing ensemble
-  ];
-
-  const onDrop = async (e: React.DragEvent) => {
-    e.preventDefault();
-    const files = e.dataTransfer.files;
-    if (files && files.length) {
-      const reader = new FileReader();
-      reader.onload = () => onUpdate(node.id, { clothesImage: reader.result, selectedPreset: null });
-      reader.readAsDataURL(files[0]);
-    }
-  };
-
-  const onPaste = async (e: React.ClipboardEvent) => {
-    const items = e.clipboardData.items;
-    for (let i = 0; i < items.length; i++) {
-      if (items[i].type.startsWith("image/")) {
-        const file = items[i].getAsFile();
-        if (file) {
-          const reader = new FileReader();
-          reader.onload = () => onUpdate(node.id, { clothesImage: reader.result, selectedPreset: null });
-          reader.readAsDataURL(file);
-          return;
-        }
-      }
-    }
-    const text = e.clipboardData.getData("text");
-    if (text && (text.startsWith("http") || text.startsWith("data:image"))) {
-      onUpdate(node.id, { clothesImage: text, selectedPreset: null });
-    }
-  };
-
-  const selectPreset = (presetPath: string, presetName: string) => {
-    onUpdate(node.id, { clothesImage: presetPath, selectedPreset: presetName });
-  };
-
   return (
     <div
       className="nb-node absolute w-[320px]"
       style={{ left: localPos.x, top: localPos.y }}
-      onDrop={onDrop}
-      onDragOver={(e) => e.preventDefault()}
-      onPaste={onPaste}
     >
+      <NodeTimer startTime={node.startTime} executionTime={node.executionTime} isRunning={node.isRunning} />
       <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
@@ -930,67 +918,21 @@ export function ClothesNodeView({ node, onDelete, onUpdate, onStartConnection, o
             </Button>
           </div>
         )}
-        <div className="text-xs text-muted-foreground">Clothes Reference</div>
-
-        {/* Preset clothes options */}
-        <div className="flex gap-2">
-          {presetClothes.map((preset) => (
-            <button
-              key={preset.name}
-              className={`flex-1 p-2 rounded border ${node.selectedPreset === preset.name
-                ? "border-primary bg-primary/20"
-                : "border-border hover:border-primary/50"
-                }`}
-              onClick={() => selectPreset(preset.path, preset.name)}
-            >
-              <img src={preset.path} alt={preset.name} className="w-full h-28 object-contain rounded mb-1" />
-              <div className="text-xs">{preset.name}</div>
-            </button>
-          ))}
-        </div>
-
-        <div className="text-xs text-muted-foreground/50 text-center">— or —</div>
+        <div className="text-xs text-muted-foreground">Clothing Description</div>
 
-        {/* Custom image upload */}
-        {node.clothesImage && !node.selectedPreset ? (
-          <div className="relative">
-            <img src={node.clothesImage} className="w-full rounded" alt="Clothes" />
-            <Button
-              variant="destructive"
-              size="sm"
-              className="absolute top-2 right-2"
-              onClick={() => onUpdate(node.id, { clothesImage: null, selectedPreset: null })}
-            >
-              Remove
-            </Button>
-          </div>
-        ) : !node.selectedPreset ? (
-          <label className="block">
-            <input
-              type="file"
-              accept="image/*"
-              className="hidden"
-              onChange={(e) => {
-                if (e.target.files?.length) {
-                  const reader = new FileReader();
-                  reader.onload = () => onUpdate(node.id, { clothesImage: reader.result, selectedPreset: null });
-                  reader.readAsDataURL(e.target.files[0]);
-                }
-              }}
-            />
-            <div className="border-2 border-dashed border-border rounded-lg p-6 text-center cursor-pointer hover:border-primary/50 transition-colors">
-              <div className="text-muted-foreground/40 text-lg mb-2">📁</div>
-              <p className="text-sm text-muted-foreground font-medium">Drop, upload, or paste clothes image</p>
-              <p className="text-xs text-muted-foreground/50 mt-1">JPG, PNG, WebP supported</p>
-            </div>
-          </label>
-        ) : null}
+        <Textarea
+          className="w-full"
+          placeholder="Describe the clothing (e.g. 'black leather jacket', 'floral summer dress', 'navy blue business suit')"
+          value={node.clothesPrompt || ""}
+          onChange={(e) => onUpdate(node.id, { clothesPrompt: e.target.value })}
+          rows={3}
+        />
 
         <Button
           className="w-full"
           onClick={() => onProcess(node.id)}
-          disabled={node.isRunning || !node.clothesImage}
-          title={!node.input ? "Connect an input first" : "Process all unprocessed nodes in chain"}
+          disabled={node.isRunning || !node.clothesPrompt}
+          title={!node.input ? "Connect an input first" : !node.clothesPrompt ? "Enter a clothing description" : "Apply Clothing"}
         >
           {node.isRunning ? "Processing..." : "Apply Clothes"}
         </Button>
@@ -1043,6 +985,7 @@ export function AgeNodeView({ node, onDelete, onUpdate, onStartConnection, onEnd
 
   return (
     <div className="nb-node absolute w-[280px]" style={{ left: localPos.x, top: localPos.y }}>
+      <NodeTimer startTime={node.startTime} executionTime={node.executionTime} isRunning={node.isRunning} />
       <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
@@ -1188,6 +1131,7 @@ export function CameraNodeView({ node, onDelete, onUpdate, onStartConnection, on
 
   return (
     <div className="nb-node absolute w-[360px]" style={{ left: localPos.x, top: localPos.y }}>
+      <NodeTimer startTime={node.startTime} executionTime={node.executionTime} isRunning={node.isRunning} />
       <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
@@ -1428,6 +1372,7 @@ export function FaceNodeView({ node, onDelete, onUpdate, onStartConnection, onEn
 
   return (
     <div className="nb-node absolute w-[340px]" style={{ left: localPos.x, top: localPos.y }}>
+      <NodeTimer startTime={node.startTime} executionTime={node.executionTime} isRunning={node.isRunning} />
       <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
@@ -1694,6 +1639,7 @@ export function StyleNodeView({ node, onDelete, onUpdate, onStartConnection, onE
       className="nb-node absolute w-[320px]"
       style={{ left: localPos.x, top: localPos.y }}
     >
+      <NodeTimer startTime={node.startTime} executionTime={node.executionTime} isRunning={node.isRunning} />
       <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
@@ -1866,6 +1812,7 @@ export function LightningNodeView({ node, onDelete, onUpdate, onStartConnection,
 
   return (
     <div className="nb-node absolute text-white w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
+      <NodeTimer startTime={node.startTime} executionTime={node.executionTime} isRunning={node.isRunning} />
       <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
@@ -2034,6 +1981,7 @@ export function PosesNodeView({ node, onDelete, onUpdate, onStartConnection, onE
 
   return (
     <div className="nb-node absolute w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
+      <NodeTimer startTime={node.startTime} executionTime={node.executionTime} isRunning={node.isRunning} />
       <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"
         onPointerDown={onPointerDown}
@@ -2224,6 +2172,7 @@ export function EditNodeView({
 
   return (
     <div className="nb-node absolute w-[320px]" style={{ left: localPos.x, top: localPos.y }}>
+      <NodeTimer startTime={node.startTime} executionTime={node.executionTime} isRunning={node.isRunning} />
       {/* Node Header - Contains title, delete button, and connection ports */}
       <div
         className="nb-header px-3 py-2 flex items-center justify-between rounded-t-[14px] cursor-grab active:cursor-grabbing"

app/page.tsx

@@ -153,6 +153,14 @@ async function copyImageToClipboard(dataUrl: string) {
  */
 type NodeType = "CHARACTER" | "MERGE" | "BACKGROUND" | "CLOTHES" | "STYLE" | "EDIT" | "CAMERA" | "AGE" | "FACE" | "BLEND" | "LIGHTNING" | "POSES";
 
+/**
+ * Base properties that all nodes share
+ * Every node has an ID, type, and position in the editor world space
+ */
+import { Loader2, Clock } from "lucide-react";
+
+// ... existing imports ...
+
 /**
  * Base properties that all nodes share
  * Every node has an ID, type, and position in the editor world space
@@ -162,6 +170,8 @@ type NodeBase = {
   type: NodeType;      // What kind of operation this node performs
   x: number;           // X position in world coordinates (not screen pixels)
   y: number;           // Y position in world coordinates (not screen pixels)
+  startTime?: number;  // Timestamp when processing started
+  executionTime?: number; // Total processing time in milliseconds
 };
 
 /**
@@ -514,6 +524,38 @@ function Port({
   );
 }
 
+/**
+ * Timer component that shows execution time
+ * Uses a green checkmark when finished or a spinner when running
+ */
+export function NodeTimer({ startTime, executionTime, isRunning }: { startTime?: number, executionTime?: number, isRunning?: boolean }) {
+  const [elapsed, setElapsed] = React.useState(0);
+
+  React.useEffect(() => {
+    if (!isRunning || !startTime) return;
+    const interval = setInterval(() => {
+      setElapsed(Date.now() - startTime);
+    }, 100);
+    return () => clearInterval(interval);
+  }, [isRunning, startTime]);
+
+  if (!startTime && !executionTime) return null;
+
+  const timeToShow = isRunning ? elapsed : (executionTime || 0);
+  const seconds = (timeToShow / 1000).toFixed(1);
+
+  return (
+    <div className="absolute top-2 right-2 flex items-center gap-1.5 bg-background/80 text-foreground text-[10px] px-2 py-1 rounded-md border shadow-sm z-50 backdrop-blur-sm">
+      {isRunning ? (
+        <Loader2 className="w-3 h-3 animate-spin text-banana-500" />
+      ) : (
+        <span className="text-green-500 font-bold">✓</span>
+      )}
+      <span className="font-mono">{seconds}s</span>
+    </div>
+  );
+}
+
 function CharacterNodeView({
   node,
   scaleRef,
@@ -731,6 +773,7 @@ function MergeNodeView({
         onPointerMove={onPointerMove}
         onPointerUp={onPointerUp}
       >
+        <NodeTimer startTime={node.startTime} executionTime={node.executionTime} isRunning={node.isRunning} />
         <Port
           className="in"
           nodeId={node.id}
@@ -1070,15 +1113,9 @@ export default function EditorPage() {
       type: "image-to-image",
       description: "Powerful image editing and manipulation",
     },
-    "FLUX.1-dev": {
-      id: "black-forest-labs/FLUX.1-dev",
-      name: "FLUX.1 Dev",
-      type: "text-to-image",
-      description: "High-quality text-to-image generation",
-    },
   };
 
-  const [selectedHfModel, setSelectedHfModel] = useState<keyof typeof HF_MODELS>("FLUX.1-Kontext-dev");
+  const [selectedHfModel, setSelectedHfModel] = useState<keyof typeof HF_MODELS>("Qwen-Image-Edit");
 
 
   // HF PRO AUTHENTICATION
@@ -1259,9 +1296,8 @@ export default function EditorPage() {
         }
         break;
       case "CLOTHES":
-        if ((node as ClothesNode).clothesImage) {
-          config.clothesImage = (node as ClothesNode).clothesImage;
-          config.selectedPreset = (node as ClothesNode).selectedPreset;
+        if ((node as ClothesNode).clothesPrompt) {
+          config.clothesPrompt = (node as ClothesNode).clothesPrompt;
         }
         break;
       case "STYLE":
@@ -1511,9 +1547,10 @@ export default function EditorPage() {
     }
 
     // Set loading state for all nodes being processed
+    const startTime = Date.now();
     setNodes(prev => prev.map(n => {
       if (n.id === nodeId || processedNodes.includes(n.id)) {
-        return { ...n, isRunning: true, error: null };
+        return { ...n, isRunning: true, error: null, startTime, executionTime: undefined };
       }
       return n;
     }));
@@ -1525,12 +1562,9 @@ export default function EditorPage() {
       }
 
       // Check if params contains custom images and validate them
-      if (params.clothesImage) {
-        // 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.");
-        }
-      }
+
+      // Removed clothesImage validation as we now use text prompts
+
 
       if (params.customBackgroundImage) {
         // Validate it's a proper data URL
@@ -1617,14 +1651,17 @@ export default function EditorPage() {
 
       // Only update the current node with the output
       // Don't show output in intermediate nodes - they were just used for configuration
+      const endTime = Date.now();
+      const executionTime = endTime - startTime;
+
       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 };
+          return { ...n, output: data.image, isRunning: false, error: null, executionTime };
         } 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, isRunning: false, error: null, executionTime };
         }
         return n;
       }));