beggining free trials

.gitignore

@@ -36,8 +36,11 @@ yarn-error.log*
 # vercel
 .vercel
 
+# Usage tracking data
+.usage-data.json
+
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-.vercel
+
+.vercel

app/api/process/route.ts

@@ -22,6 +22,7 @@
 import { NextRequest, NextResponse } from "next/server";
 import { GoogleGenAI } from "@google/genai";
 import { cookies } from "next/headers";
+import { getUsage, canMakeRequest, recordRequest } from "@/lib/usage-store";
 
 // Configure Next.js runtime for Node.js (required for Google AI SDK)
 export const runtime = "nodejs";
@@ -90,6 +91,7 @@ export async function POST(req: NextRequest) {
     }
 
     // Validate and retrieve Google API key from user input or environment
+    const userProvidedKey = !!body.apiToken; // Track if user provided their own key
     const apiKey = body.apiToken || process.env.GOOGLE_API_KEY;
     if (!apiKey || apiKey === 'your_actual_api_key_here') {
       return NextResponse.json(
@@ -98,6 +100,40 @@ export async function POST(req: NextRequest) {
       );
     }
 
+    // Get client IP for usage tracking
+    const getClientIP = (req: NextRequest): string => {
+      const forwardedFor = req.headers.get('x-forwarded-for');
+      if (forwardedFor) return forwardedFor.split(',')[0].trim();
+      const realIP = req.headers.get('x-real-ip');
+      if (realIP) return realIP;
+      const vercelForwardedFor = req.headers.get('x-vercel-forwarded-for');
+      if (vercelForwardedFor) return vercelForwardedFor.split(',')[0].trim();
+      const cfConnectingIP = req.headers.get('cf-connecting-ip');
+      if (cfConnectingIP) return cfConnectingIP;
+      return 'unknown';
+    };
+
+    const clientIP = getClientIP(req);
+
+    // If using default API key, check usage limits
+    if (!userProvidedKey) {
+      const usage = await getUsage(clientIP);
+
+      if (!(await canMakeRequest(clientIP))) {
+        return NextResponse.json(
+          {
+            error: `Daily limit reached (${usage.limit} requests/day). Please add your own Gemini API key to continue, or wait until tomorrow.`,
+            usage: {
+              used: usage.used,
+              remaining: 0,
+              limit: usage.limit
+            }
+          },
+          { status: 429 }
+        );
+      }
+    }
+
     // Initialize Google AI client with the validated API key
     const ai = new GoogleGenAI({ apiKey });
 
@@ -244,8 +280,22 @@ The result should look like all subjects were photographed together in the same
           { status: 500 }
         );
       }
+      // Record usage if using default API key (only on success)
+      let mergeUsageInfo = null;
+      if (!userProvidedKey) {
+        mergeUsageInfo = await recordRequest(clientIP);
+      }
 
-      return NextResponse.json({ image: images[0], images, text: texts.join("\n") });
+      return NextResponse.json({
+        image: images[0],
+        images,
+        text: texts.join("\n"),
+        usage: mergeUsageInfo ? {
+          used: mergeUsageInfo.used,
+          remaining: mergeUsageInfo.remaining,
+          limit: mergeUsageInfo.limit
+        } : null
+      });
     }
 
     // Parse input image for non-merge nodes
@@ -776,8 +826,20 @@ The result should look like all subjects were photographed together in the same
         { status: 500 }
       );
     }
+    // Record usage if using default API key (only on success)
+    let usageInfo = null;
+    if (!userProvidedKey) {
+      usageInfo = await recordRequest(clientIP);
+    }
 
-    return NextResponse.json({ image: images[0] });
+    return NextResponse.json({
+      image: images[0],
+      usage: usageInfo ? {
+        used: usageInfo.used,
+        remaining: usageInfo.remaining,
+        limit: usageInfo.limit
+      } : null
+    });
   } catch (err: any) {
     console.error("/api/process error:", err);
     console.error("Error stack:", err?.stack);

app/api/usage/route.ts

@@ -0,0 +1,72 @@
+/**
+ * API ROUTE: /api/usage
+ * 
+ * Endpoints for checking and managing API usage quotas.
+ * 
+ * GET: Returns current usage for the requesting IP
+ * POST: Records a request (internal use by process route)
+ */
+
+import { NextRequest, NextResponse } from "next/server";
+import { getUsage, canMakeRequest, getDailyLimit } from "@/lib/usage-store";
+
+export const runtime = "nodejs";
+
+/**
+ * Get client IP from request headers
+ * Handles various proxy scenarios (Vercel, Cloudflare, etc.)
+ */
+function getClientIP(req: NextRequest): string {
+    // Try various headers that might contain the real IP
+    const forwardedFor = req.headers.get('x-forwarded-for');
+    if (forwardedFor) {
+        // x-forwarded-for can contain multiple IPs, the first one is the client
+        return forwardedFor.split(',')[0].trim();
+    }
+
+    const realIP = req.headers.get('x-real-ip');
+    if (realIP) {
+        return realIP;
+    }
+
+    // Vercel-specific header
+    const vercelForwardedFor = req.headers.get('x-vercel-forwarded-for');
+    if (vercelForwardedFor) {
+        return vercelForwardedFor.split(',')[0].trim();
+    }
+
+    // Cloudflare header
+    const cfConnectingIP = req.headers.get('cf-connecting-ip');
+    if (cfConnectingIP) {
+        return cfConnectingIP;
+    }
+
+    // Fallback - this might not be accurate behind proxies
+    return 'unknown';
+}
+
+/**
+ * GET /api/usage
+ * 
+ * Returns the current usage statistics for the requesting IP
+ */
+export async function GET(req: NextRequest) {
+    const ip = getClientIP(req);
+    const usage = await getUsage(ip);
+
+    return NextResponse.json({
+        ip: ip.substring(0, 8) + '***', // Partial IP for privacy
+        used: usage.used,
+        remaining: usage.remaining,
+        limit: usage.limit,
+        resetDate: usage.resetDate,
+        message: usage.remaining > 0
+            ? `You have ${usage.remaining} free requests remaining today.`
+            : `Daily limit reached. Add your own API key to continue or wait until tomorrow.`
+    });
+}
+
+/**
+ * Utility function to export for use in other routes
+ */
+export { getClientIP };

app/page.tsx

@@ -1066,9 +1066,12 @@ export default function EditorPage() {
   const [apiToken, setApiToken] = useState("");
   const [showHelpSidebar, setShowHelpSidebar] = useState(false);
 
+  // Usage tracking state
+  const [usage, setUsage] = useState<{ used: number; remaining: number; limit: number } | null>(null);
+
   // Processing Mode: 'nanobananapro' uses Gemini API, 'huggingface' uses HF models
   type ProcessingMode = 'nanobananapro' | 'huggingface';
-  const [processingMode, setProcessingMode] = useState<ProcessingMode>('huggingface');
+  const [processingMode, setProcessingMode] = useState<ProcessingMode>('nanobananapro');
 
   // Available HF models
   const HF_MODELS = {
@@ -1094,6 +1097,28 @@ export default function EditorPage() {
   const [isCheckingAuth, setIsCheckingAuth] = useState(true);
   const [hfUser, setHfUser] = useState<{ name?: string; username?: string; avatarUrl?: string } | null>(null);
 
+  // Fetch usage on mount and when apiToken changes
+  useEffect(() => {
+    const fetchUsage = async () => {
+      try {
+        const res = await fetch('/api/usage');
+        if (res.ok) {
+          const data = await res.json();
+          setUsage({ used: data.used, remaining: data.remaining, limit: data.limit });
+        }
+      } catch (error) {
+        console.error('Failed to fetch usage:', error);
+      }
+    };
+
+    // Only fetch if not using own API key
+    if (!apiToken) {
+      fetchUsage();
+    } else {
+      setUsage(null); // Clear usage when using own key
+    }
+  }, [apiToken]);
+
 
   const characters = nodes.filter((n) => n.type === "CHARACTER") as CharacterNode[];
   const merges = nodes.filter((n) => n.type === "MERGE") as MergeNode[];
@@ -1640,6 +1665,11 @@ export default function EditorPage() {
         return n;
       }));
 
+      // Update usage from API response
+      if (data.usage) {
+        setUsage(data.usage);
+      }
+
       // Add to node's history
       const description = unprocessedNodeCount > 1
         ? `Combined ${unprocessedNodeCount} transformations`
@@ -1912,6 +1942,11 @@ 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)));
 
+      // Update usage from API response
+      if (js.usage) {
+        setUsage(js.usage);
+      }
+
       // Add merge result to node's history
       if (out) {
         const inputLabels = merge.inputs.map((id, index) => {
@@ -2184,16 +2219,32 @@ export default function EditorPage() {
           {processingMode === 'nanobananapro' ? (
             <>
               <div className="h-6 w-px bg-border" />
+              {/* Usage info when not using own API key */}
+              {!apiToken && usage && (
+                <div className={`text-xs px-2 py-1 rounded-md ${usage.remaining > 5
+                  ? 'bg-green-500/20 text-green-400'
+                  : usage.remaining > 0
+                    ? 'bg-yellow-500/20 text-yellow-400'
+                    : 'bg-red-500/20 text-red-400'
+                  }`}>
+                  {usage.remaining}/{usage.limit} free requests
+                </div>
+              )}
+              {apiToken && (
+                <div className="text-xs px-2 py-1 rounded-md bg-blue-500/20 text-blue-400">
+                  Using your API key ✓
+                </div>
+              )}
               <label htmlFor="api-token" className="text-sm font-medium text-muted-foreground">
-                Gemini API Key:
+                API Key:
               </label>
               <Input
                 id="api-token"
                 type="password"
-                placeholder="Enter your Google Gemini API key"
+                placeholder={apiToken ? "Your key is set" : "Optional - using free tier"}
                 value={apiToken}
                 onChange={(e) => setApiToken(e.target.value)}
-                className="w-56"
+                className="w-48"
               />
             </>
           ) : (

lib/usage-store.ts

@@ -0,0 +1,173 @@
+/**
+ * USAGE STORE - IP-Based Rate Limiting with Supabase
+ * 
+ * Tracks API usage per IP address with a daily limit using Supabase.
+ * This prevents abuse by storing data in a persistent database.
+ * 
+ * Default limit: 10 requests per day per IP when using the default API key.
+ * Users with their own API key bypass this limit.
+ */
+
+import { createClient } from '@supabase/supabase-js';
+
+// Configuration
+const DAILY_LIMIT = 10;
+
+// Initialize Supabase client
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_DEFAULT_KEY;
+
+// Create Supabase client (only if credentials are available)
+const supabase = supabaseUrl && supabaseKey
+    ? createClient(supabaseUrl, supabaseKey)
+    : null;
+
+// Get today's date in YYYY-MM-DD format
+function getToday(): string {
+    return new Date().toISOString().split('T')[0];
+}
+
+/**
+ * Get usage info for an IP address
+ */
+export async function getUsage(ip: string): Promise<{ used: number; remaining: number; limit: number; resetDate: string }> {
+    const today = getToday();
+
+    if (!supabase) {
+        console.warn('[Usage Store] Supabase not configured, allowing unlimited access');
+        return { used: 0, remaining: DAILY_LIMIT, limit: DAILY_LIMIT, resetDate: today };
+    }
+
+    try {
+        const { data, error } = await supabase
+            .from('usage_tracking')
+            .select('request_count')
+            .eq('ip_address', ip)
+            .eq('date', today)
+            .single();
+
+        if (error && error.code !== 'PGRST116') { // PGRST116 = no rows found
+            console.error('[Usage Store] Error fetching usage:', error);
+            // On error, allow access but log it
+            return { used: 0, remaining: DAILY_LIMIT, limit: DAILY_LIMIT, resetDate: today };
+        }
+
+        const used = data?.request_count || 0;
+        console.log(`[Usage Store] IP ${ip.substring(0, 8)}*** has used ${used}/${DAILY_LIMIT} requests today`);
+        return {
+            used,
+            remaining: Math.max(0, DAILY_LIMIT - used),
+            limit: DAILY_LIMIT,
+            resetDate: today
+        };
+    } catch (error) {
+        console.error('[Usage Store] Exception fetching usage:', error);
+        return { used: 0, remaining: DAILY_LIMIT, limit: DAILY_LIMIT, resetDate: today };
+    }
+}
+
+/**
+ * Check if an IP can make a request (has remaining quota)
+ */
+export async function canMakeRequest(ip: string): Promise<boolean> {
+    const usage = await getUsage(ip);
+    return usage.remaining > 0;
+}
+
+/**
+ * Record a request for an IP address
+ * Returns the updated usage info
+ */
+export async function recordRequest(ip: string): Promise<{ used: number; remaining: number; limit: number }> {
+    const today = getToday();
+
+    if (!supabase) {
+        console.warn('[Usage Store] Supabase not configured, skipping usage recording');
+        return { used: 1, remaining: DAILY_LIMIT - 1, limit: DAILY_LIMIT };
+    }
+
+    try {
+        // First, try to call the increment_usage RPC function
+        const { data: rpcData, error: rpcError } = await supabase
+            .rpc('increment_usage', { p_ip: ip, p_date: today });
+
+        if (!rpcError && rpcData !== null) {
+            const used = rpcData as number;
+            console.log(`[Usage Store] Recorded request for IP ${ip.substring(0, 8)}***: ${used}/${DAILY_LIMIT}`);
+            return {
+                used,
+                remaining: Math.max(0, DAILY_LIMIT - used),
+                limit: DAILY_LIMIT
+            };
+        }
+
+        // If RPC failed, fall back to manual upsert
+        console.log('[Usage Store] RPC failed, trying manual approach:', rpcError);
+
+        // Check if record exists
+        const { data: existingData } = await supabase
+            .from('usage_tracking')
+            .select('request_count')
+            .eq('ip_address', ip)
+            .eq('date', today)
+            .single();
+
+        if (existingData) {
+            // Update existing record
+            const newCount = existingData.request_count + 1;
+            const { error: updateError } = await supabase
+                .from('usage_tracking')
+                .update({
+                    request_count: newCount,
+                    last_request_at: new Date().toISOString(),
+                    updated_at: new Date().toISOString()
+                })
+                .eq('ip_address', ip)
+                .eq('date', today);
+
+            if (updateError) {
+                console.error('[Usage Store] Error updating usage:', updateError);
+            }
+
+            console.log(`[Usage Store] Updated request count for IP ${ip.substring(0, 8)}***: ${newCount}/${DAILY_LIMIT}`);
+            return {
+                used: newCount,
+                remaining: Math.max(0, DAILY_LIMIT - newCount),
+                limit: DAILY_LIMIT
+            };
+        } else {
+            // Insert new record
+            const { error: insertError } = await supabase
+                .from('usage_tracking')
+                .insert({
+                    ip_address: ip,
+                    date: today,
+                    request_count: 1,
+                    last_request_at: new Date().toISOString(),
+                    created_at: new Date().toISOString(),
+                    updated_at: new Date().toISOString()
+                });
+
+            if (insertError) {
+                console.error('[Usage Store] Error inserting usage:', insertError);
+            }
+
+            console.log(`[Usage Store] Created new usage record for IP ${ip.substring(0, 8)}***: 1/${DAILY_LIMIT}`);
+            return {
+                used: 1,
+                remaining: DAILY_LIMIT - 1,
+                limit: DAILY_LIMIT
+            };
+        }
+    } catch (error) {
+        console.error('[Usage Store] Exception recording usage:', error);
+        return { used: 1, remaining: DAILY_LIMIT - 1, limit: DAILY_LIMIT };
+    }
+}
+
+/**
+ * Get the daily limit constant
+ */
+export function getDailyLimit(): number {
+    return DAILY_LIMIT;
+}

package-lock.json

@@ -12,6 +12,7 @@
         "@google/genai": "^1.17.0",
         "@huggingface/hub": "^2.6.3",
         "@huggingface/inference": "^4.8.0",
+        "@supabase/supabase-js": "^2.91.0",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "lucide-react": "^0.542.0",
@@ -1062,6 +1063,86 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.91.0",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.91.0.tgz",
+      "integrity": "sha512-9ywvsKLsxTwv7fvN5fXzP3UfRreqrX2waylTBDu0lkmeHXa8WtSQS9e0WV9FBduiazYqQbgfBQXBNPRPsRgWOQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.91.0",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.91.0.tgz",
+      "integrity": "sha512-WaakXOqLK1mLtBNFXp5o5T+LlI6KZuADSeXz+9ofPRG5OpVSvW148LVJB1DRZ16Phck1a0YqIUswOUgxCz6vMw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.91.0",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.91.0.tgz",
+      "integrity": "sha512-5S41zv2euNpGucvtM4Wy+xOmLznqt/XO+Lh823LOFEQ00ov7QJfvqb6VzIxufvzhooZpmGR0BxvMcJtWxCIFdQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.91.0",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.91.0.tgz",
+      "integrity": "sha512-u2YuJFG35umw8DO9beC27L/jYXm3KhF+73WQwbynMpV0tXsFIA0DOGRM0NgRyy03hJIdO6mxTTwe8efW3yx3Tg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "tslib": "2.8.1",
+        "ws": "^8.18.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.91.0",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.91.0.tgz",
+      "integrity": "sha512-CI7fsVIBQHfNObqU9kmyQ1GWr+Ug44y4rSpvxT4LdQB9tlhg1NTBov6z7Dlmt8d6lGi/8a9lf/epCDxyWI792g==",
+      "license": "MIT",
+      "dependencies": {
+        "iceberg-js": "^0.8.1",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.91.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.91.0.tgz",
+      "integrity": "sha512-Rjb0QqkKrmXMVwUOdEqysPBZ0ZDZakeptTkUa6k2d8r3strBdbWVDqjOdkCjAmvvZMtXecBeyTyMEXD1Zzjfvg==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.91.0",
+        "@supabase/functions-js": "2.91.0",
+        "@supabase/postgrest-js": "2.91.0",
+        "@supabase/realtime-js": "2.91.0",
+        "@supabase/storage-js": "2.91.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -1383,12 +1464,17 @@
       "version": "20.19.13",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.19.13.tgz",
       "integrity": "sha512-yCAeZl7a0DxgNVteXFHt9+uyFbqXGy/ShC4BlcHkoE0AfGXYv/BUiplV72DjMYXHDBXFjhvr6DD1NiRVfB4j8g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.7",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.7.tgz",
+      "integrity": "sha512-oN9ive//QSBkf19rfDv45M7eZPi0eEXylht2OLEXicu5b4KoQ1OzXIw+xDSGWxSxe1JmepRR/ZH283vsu518/Q==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.1.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
@@ -1409,6 +1495,15 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.42.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.42.0.tgz",
@@ -3876,6 +3971,15 @@
         "node": ">= 14"
       }
     },
+    "node_modules/iceberg-js": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
+      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -6408,7 +6512,6 @@
       "version": "6.21.0",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-6.21.0.tgz",
       "integrity": "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/unrs-resolver": {

package.json

@@ -13,6 +13,7 @@
     "@google/genai": "^1.17.0",
     "@huggingface/hub": "^2.6.3",
     "@huggingface/inference": "^4.8.0",
+    "@supabase/supabase-js": "^2.91.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "lucide-react": "^0.542.0",
@@ -33,4 +34,4 @@
     "tailwindcss": "^4",
     "typescript": "^5"
   }
-}
+}