feat: enhance canvas functionality with new node types and improved data handling

- Added support for a new "compare" node type to facilitate side-by-side image comparisons.
- Updated AI image and prompt nodes to include aspect ratio handling for better image generation.
- Enhanced canvas toolbar to include export functionality for canvas data.
- Improved data resolution for compare nodes by resolving incoming edges and updating node data accordingly.
- Refactored frame node to support dynamic resizing and exporting capabilities.
- Introduced debounced saving for prompt node to optimize performance during user input.

convex/_generated/api.d.ts

@@ -13,6 +13,7 @@ import type * as auth from "../auth.js";
 import type * as canvases from "../canvases.js";
 import type * as credits from "../credits.js";
 import type * as edges from "../edges.js";
+import type * as export_ from "../export.js";
 import type * as helpers from "../helpers.js";
 import type * as http from "../http.js";
 import type * as nodes from "../nodes.js";
@@ -31,6 +32,7 @@ declare const fullApi: ApiFromModules<{
   canvases: typeof canvases;
   credits: typeof credits;
   edges: typeof edges;
+  export: typeof export_;
   helpers: typeof helpers;
   http: typeof http;
   nodes: typeof nodes;

convex/ai.ts

@@ -14,6 +14,7 @@ export const generateImage = action({
     prompt: v.string(),
     referenceStorageId: v.optional(v.id("_storage")),
     model: v.optional(v.string()),
+    aspectRatio: v.optional(v.string()),
   },
   handler: async (ctx, args) => {
     const apiKey = process.env.OPENROUTER_API_KEY;
@@ -55,6 +56,7 @@ export const generateImage = action({
         prompt: args.prompt,
         referenceImageUrl,
         model: modelId,
+        aspectRatio: args.aspectRatio,
       });
 
       const binaryString = atob(result.imageBase64);
@@ -71,6 +73,10 @@ export const generateImage = action({
       const prev = (existing.data ?? {}) as Record<string, unknown>;
       const creditCost = modelConfig.estimatedCostPerImage;
 
+      const aspectRatio =
+        args.aspectRatio?.trim() ||
+        (typeof prev.aspectRatio === "string" ? prev.aspectRatio : undefined);
+
       await ctx.runMutation(api.nodes.updateData, {
         nodeId: args.nodeId,
         data: {
@@ -81,6 +87,7 @@ export const generateImage = action({
           modelTier: modelConfig.tier,
           generatedAt: Date.now(),
           creditCost,
+          ...(aspectRatio ? { aspectRatio } : {}),
         },
       });
 

convex/export.ts

@@ -0,0 +1,114 @@
+"use node";
+
+// convex/export.ts
+//
+// Server-side frame export via jimp (pure JS, no native binaries).
+// Loads all image nodes within a frame, composites them onto a canvas,
+// stores the result in Convex Storage, and returns a short-lived download URL.
+//
+// Install: pnpm add jimp
+
+import { v } from "convex/values";
+import { action } from "./_generated/server";
+import { api } from "./_generated/api";
+import type { Id } from "./_generated/dataModel";
+import { Jimp } from "jimp";
+
+export const exportFrame = action({
+  args: {
+    frameNodeId: v.id("nodes"),
+  },
+  handler: async (ctx, args) => {
+    const identity = await ctx.auth.getUserIdentity();
+    if (!identity) throw new Error("Not authenticated");
+
+    // ── 1. Load the frame node ─────────────────────────────────────────────
+    const frame = await ctx.runQuery(api.nodes.get, { nodeId: args.frameNodeId });
+    if (!frame) throw new Error("Frame node not found");
+    if (frame.type !== "frame") throw new Error("Node is not a frame");
+
+    const frameData = frame.data as {
+      label?: string;
+      width?: number;
+      height?: number;
+    };
+
+    const exportWidth = frameData.width ?? frame.width ?? 1920;
+    const exportHeight = frameData.height ?? frame.height ?? 1080;
+    const frameX = frame.positionX;
+    const frameY = frame.positionY;
+
+    // ── 2. Load all nodes in this canvas ───────────────────────────────────
+    const allNodes = await ctx.runQuery(api.nodes.list, {
+      canvasId: frame.canvasId,
+    });
+
+    // Find image/ai-image nodes visually within the frame
+    const imageNodes = allNodes.filter((node) => {
+      if (node.type !== "image" && node.type !== "ai-image") return false;
+      const data = node.data as { storageId?: string };
+      if (!data.storageId) return false;
+
+      const nodeRight = node.positionX + node.width;
+      const nodeBottom = node.positionY + node.height;
+      const frameRight = frameX + exportWidth;
+      const frameBottom = frameY + exportHeight;
+
+      return (
+        node.positionX < frameRight &&
+        nodeRight > frameX &&
+        node.positionY < frameBottom &&
+        nodeBottom > frameY
+      );
+    });
+
+    if (imageNodes.length === 0) {
+      throw new Error("No images found within this frame");
+    }
+
+    // ── 3. Create base canvas ──────────────────────────────────────────────
+    const base = new Jimp({
+      width: exportWidth,
+      height: exportHeight,
+      color: 0xffffffff, // white background
+    });
+
+    // ── 4. Fetch, resize and composite each image ──────────────────────────
+    for (const node of imageNodes) {
+      const data = node.data as { storageId: string };
+      const url = await ctx.storage.getUrl(data.storageId as Id<"_storage">);
+      if (!url) continue;
+
+      const response = await fetch(url);
+      if (!response.ok) continue;
+
+      const arrayBuffer = await response.arrayBuffer();
+      const buffer = Buffer.from(arrayBuffer);
+
+      const relX = Math.max(0, Math.round(node.positionX - frameX));
+      const relY = Math.max(0, Math.round(node.positionY - frameY));
+      const nodeW = Math.round(node.width);
+      const nodeH = Math.round(node.height);
+
+      const img = await Jimp.fromBuffer(buffer);
+      img.resize({ w: nodeW, h: nodeH });
+      base.composite(img, relX, relY);
+    }
+
+    // ── 5. Encode to PNG buffer ────────────────────────────────────────────
+    const outputBuffer = await base.getBuffer("image/png");
+
+    // ── 6. Store in Convex Storage ─────────────────────────────────────────
+    const blob = new Blob([new Uint8Array(outputBuffer)], { type: "image/png" });
+    const storageId = await ctx.storage.store(blob);
+
+    const downloadUrl = await ctx.storage.getUrl(storageId);
+    if (!downloadUrl) throw new Error("Failed to generate download URL");
+
+    return {
+      url: downloadUrl,
+      storageId,
+      filename: `${frameData.label ?? "frame"}-export.png`,
+    };
+  },
+});

convex/nodes.ts

@@ -88,7 +88,20 @@ export const get = query({
       return null;
     }
 
-    return node;
+    const data = node.data as Record<string, unknown> | undefined;
+    if (!data?.storageId) {
+      return node;
+    }
+
+    const url = await ctx.storage.getUrl(data.storageId as Id<"_storage">);
+
+    return {
+      ...node,
+      data: {
+        ...data,
+        url: url ?? undefined,
+      },
+    };
   },
 });
 

convex/openrouter.ts

@@ -24,6 +24,8 @@ export interface GenerateImageParams {
   prompt: string;
   referenceImageUrl?: string; // optional image-to-image input
   model?: string;
+  /** OpenRouter image_config.aspect_ratio e.g. "16:9", "1:1" */
+  aspectRatio?: string;
 }
 
 export interface OpenRouterImageResponse {
@@ -59,7 +61,7 @@ export async function generateImageViaOpenRouter(
     text: params.prompt,
   });
 
-  const body = {
+  const body: Record<string, unknown> = {
     model: modelId,
     modalities: ["image", "text"],
     messages: [
@@ -70,6 +72,12 @@ export async function generateImageViaOpenRouter(
     ],
   };
 
+  if (params.aspectRatio?.trim()) {
+    body.image_config = {
+      aspect_ratio: params.aspectRatio.trim(),
+    };
+  }
+
   const response = await fetch(`${OPENROUTER_BASE_URL}/chat/completions`, {
     method: "POST",
     headers: {