@chai-ui/core 0.11.4 → 0.13.0

package/src/image-fit.ts

@@ -0,0 +1,61 @@
+/**
+ * Fitting a video's start image to the picked aspect ratio, so the ratio
+ * wins even on image-to-video models that take the image's own shape.
+ */
+import type { DroppedMedia } from "./types.js";
+
+/** How a start image meets the picked ratio: cropped around its center, or padded with black bars. */
+export type StartImageFit = "crop" | "pad";
+
+/**
+ * The image redrawn at `ratio` (e.g. "16:9"), as a JPEG data URL. Returns
+ * `src` unchanged when it already has that shape, the ratio isn't "w:h",
+ * or there's no canvas to draw on (a server, or a test DOM).
+ */
+export async function fitImageToRatio(src: string, ratio: string, fit: StartImageFit): Promise<string> {
+  const [w, h] = ratio.split(":").map(Number);
+  if (!w || !h || typeof document === "undefined") return src;
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return src;
+  const img = await loadImage(src).catch(() => null);
+  if (!img) return src;
+  const iw = img.naturalWidth;
+  const ih = img.naturalHeight;
+  const target = w / h;
+  if (!iw || !ih || Math.abs(iw / ih - target) < 0.01) return src;
+  // Crop keeps the image's short side and cuts the long one; pad keeps
+  // the whole image and grows the short side.
+  const wider = iw / ih > target;
+  const keepHeight = fit === "crop" ? wider : !wider;
+  canvas.width = keepHeight ? Math.round(ih * target) : iw;
+  canvas.height = keepHeight ? ih : Math.round(iw / target);
+  if (fit === "pad") {
+    ctx.fillStyle = "black";
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
+  ctx.drawImage(img, (canvas.width - iw) / 2, (canvas.height - ih) / 2);
+  try {
+    return canvas.toDataURL("image/jpeg", 0.92);
+  } catch {
+    // A cross-origin image without CORS can't be read back: send it as is.
+    return src;
+  }
+}
+
+/** The attachments with each image fitted to `ratio`; other media unchanged. */
+export function fitImagesToRatio(attachments: DroppedMedia[], ratio: string, fit: StartImageFit): Promise<DroppedMedia[]> {
+  return Promise.all(
+    attachments.map(async (a) => (a.kind === "image" ? { ...a, src: await fitImageToRatio(a.src, ratio, fit) } : a))
+  );
+}
+
+function loadImage(src: string): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = src;
+  });
+}

package/src/index.ts

@@ -18,3 +18,5 @@ export * from "./composer-view.js";
 export * from "./edit-card.js";
 export * from "./voice-input.js";
 export * from "./menu-placement.js";
+export * from "./image-fit.js";
+export * from "./evaluation-judge.js";

package/src/run.ts

@@ -112,6 +112,11 @@ export function resolveResult(
   }));
 }
 
+/** The result with `evaluations` added after any it already has (e.g. the judge's after the backend's). */
+export function addEvaluations(run: Run, resultId: string, evaluations: Evaluation[]): Run {
+  return updateResult(run, resultId, (r) => ({ ...r, evaluations: [...(r.evaluations ?? []), ...evaluations] }));
+}
+
 export function failResult(run: Run, resultId: string, error: Result["error"]): Run {
   return updateResult(run, resultId, (r) => ({
     ...r,

package/src/suggested-models.ts

@@ -19,31 +19,48 @@ import { DEFAULT_MAX_REGIONS } from "./region-edit.js";
 
 const NANO_BANANA_RATIOS = ["21:9", "16:9", "3:2", "4:3", "5:4", "1:1", "4:5", "3:4", "2:3", "9:16"];
 const FLUX_3_RATIOS = ["21:9", "2:1", "16:9", "3:2", "7:5", "4:3", "5:4", "1:1", "4:5", "3:4", "5:7", "2:3", "9:16", "1:2"];
-/** The ratios a named `image_size` covers (FLUX.1, GPT Image 2). */
+const NANO_BANANA_2_RATIOS = [...NANO_BANANA_RATIOS, "4:1", "1:4", "8:1", "1:8"];
+/** The ratios a named `image_size` covers (Flux 3 Klein, GPT Image 2). */
 const IMAGE_SIZE_RATIOS = ["1:1", "4:3", "16:9", "3:4", "9:16"];
 
-/** Create image, from a prompt. */
+/**
+ * Create image. Each model's `withImages` endpoint takes attached images
+ * (as references) and still the picked aspect ratio.
+ */
 export const SUGGESTED_IMAGE_MODELS: ModelOption[] = [
-  { id: "fal-ai/nano-banana-pro", label: "Nano Banana Pro", provider: "Google", speed: "standard", aspectRatios: NANO_BANANA_RATIOS, falInput: { aspectRatio: "aspect_ratio" } },
+  { id: "fal-ai/nano-banana-pro", label: "Nano Banana Pro", provider: "Google", speed: "standard", aspectRatios: NANO_BANANA_RATIOS, falInput: { aspectRatio: "aspect_ratio" }, withImages: "fal-ai/nano-banana-pro/edit" },
   {
     id: "fal-ai/nano-banana-2",
     label: "Nano Banana 2",
     provider: "Google",
     speed: "fast",
-    aspectRatios: [...NANO_BANANA_RATIOS, "4:1", "1:4", "8:1", "1:8"],
+    aspectRatios: NANO_BANANA_2_RATIOS,
     falInput: { aspectRatio: "aspect_ratio" },
+    withImages: "fal-ai/nano-banana-2/edit",
+  },
+  { id: "blackforestlabs/flux-3/text-to-image", label: "Flux 3 Image", provider: "Black Forest Labs", speed: "standard", aspectRatios: FLUX_3_RATIOS, falInput: { aspectRatio: "aspect_ratio" }, withImages: "blackforestlabs/flux-3/edit-image" },
+  { id: "openai/gpt-image-2", label: "GPT Image 2", provider: "OpenAI", speed: "slow", aspectRatios: IMAGE_SIZE_RATIOS, falInput: { aspectRatio: "image_size" }, withImages: "openai/gpt-image-2/edit" },
+  {
+    id: "blackforestlabs/flux-3/klein/text-to-image",
+    label: "Flux 3 Klein",
+    provider: "Black Forest Labs",
+    speed: "fast",
+    aspectRatios: IMAGE_SIZE_RATIOS,
+    falInput: { aspectRatio: "image_size" },
+    withImages: "blackforestlabs/flux-3/klein/edit-image",
   },
-  { id: "blackforestlabs/flux-3/text-to-image", label: "Flux 3 Image", provider: "Black Forest Labs", speed: "standard", aspectRatios: FLUX_3_RATIOS, falInput: { aspectRatio: "aspect_ratio" } },
-  { id: "openai/gpt-image-2", label: "GPT Image 2", provider: "OpenAI", speed: "slow", aspectRatios: IMAGE_SIZE_RATIOS, falInput: { aspectRatio: "image_size" } },
-  { id: "fal-ai/flux/schnell", label: "FLUX.1 schnell", provider: "Black Forest Labs", speed: "fast", aspectRatios: IMAGE_SIZE_RATIOS, falInput: { aspectRatio: "image_size" } },
 ];
 
-/** Create video, from a prompt alone. */
+/**
+ * Create video. With an image attached, each runs as its `withImages`
+ * image-to-video endpoint, the image as the first frame; the image is
+ * fitted to the picked ratio first (`startImageFit`).
+ */
 export const SUGGESTED_TEXT_TO_VIDEO_MODELS: ModelOption[] = [
-  { id: "minimax/h3-max/text-to-video", label: "MiniMax H3 Max", provider: "MiniMax", speed: "slow", aspectRatios: ["21:9", "16:9", "4:3", "1:1", "3:4", "9:16"], falInput: { aspectRatio: "aspect_ratio" } },
-  { id: "bytedance/seedance-2.5/text-to-video", label: "Seedance 2.5", provider: "ByteDance", speed: "slow", aspectRatios: ["21:9", "16:9", "4:3", "1:1", "3:4", "9:16"], falInput: { aspectRatio: "aspect_ratio" } },
-  { id: "fal-ai/kling-video/v3/pro/text-to-video", label: "Kling v3 Pro", provider: "Kling", speed: "slow", aspectRatios: ["16:9", "9:16", "1:1"], falInput: { aspectRatio: "aspect_ratio" } },
-  { id: "fal-ai/veo3.1/fast", label: "Veo 3.1 Fast", provider: "Google", speed: "standard", aspectRatios: ["16:9", "9:16"], falInput: { aspectRatio: "aspect_ratio" } },
+  { id: "minimax/h3-max/text-to-video", label: "MiniMax H3 Max", provider: "MiniMax", speed: "slow", aspectRatios: ["21:9", "16:9", "4:3", "1:1", "3:4", "9:16"], falInput: { aspectRatio: "aspect_ratio" }, withImages: "minimax/h3-max/image-to-video" },
+  { id: "bytedance/seedance-2.5/text-to-video", label: "Seedance 2.5", provider: "ByteDance", speed: "slow", aspectRatios: ["21:9", "16:9", "4:3", "1:1", "3:4", "9:16"], falInput: { aspectRatio: "aspect_ratio" }, withImages: "bytedance/seedance-2.5/image-to-video" },
+  { id: "fal-ai/kling-video/v3/pro/text-to-video", label: "Kling v3 Pro", provider: "Kling", speed: "slow", aspectRatios: ["16:9", "9:16", "1:1"], falInput: { aspectRatio: "aspect_ratio" }, withImages: "fal-ai/kling-video/v3/pro/image-to-video" },
+  { id: "fal-ai/veo3.1/fast", label: "Veo 3.1 Fast", provider: "Google", speed: "standard", aspectRatios: ["16:9", "9:16"], falInput: { aspectRatio: "aspect_ratio" }, withImages: "fal-ai/veo3.1/fast/image-to-video" },
 ];
 
 /**
@@ -122,7 +139,20 @@ export function suggestedModels(useCase: GenerationUseCase | undefined): ModelOp
   }
 }
 
+/** `withImages` endpoints in no menu of their own. */
+const IMAGE_INPUT_ONLY: ModelOption[] = [
+  { id: "fal-ai/nano-banana-2/edit", label: "Nano Banana 2", provider: "Google", speed: "fast", aspectRatios: NANO_BANANA_2_RATIOS, falInput: { aspectRatio: "aspect_ratio", image: "image_urls" } },
+  {
+    id: "blackforestlabs/flux-3/klein/edit-image",
+    label: "Flux 3 Klein",
+    provider: "Black Forest Labs",
+    speed: "fast",
+    aspectRatios: IMAGE_SIZE_RATIOS,
+    falInput: { aspectRatio: "image_size", image: "image_urls" },
+  },
+];
+
 /** Every suggested Fal model, by id: how the Fal engine knows each one's inputs. */
 export const SUGGESTED_FAL_MODELS: ReadonlyMap<string, ModelOption> = new Map(
-  [...SUGGESTED_IMAGE_MODELS, ...SUGGESTED_TEXT_TO_VIDEO_MODELS, ...SUGGESTED_IMAGE_TO_VIDEO_MODELS, ...SUGGESTED_EDIT_MODELS].map((m) => [m.id, m])
+  [...SUGGESTED_IMAGE_MODELS, ...SUGGESTED_TEXT_TO_VIDEO_MODELS, ...SUGGESTED_IMAGE_TO_VIDEO_MODELS, ...SUGGESTED_EDIT_MODELS, ...IMAGE_INPUT_ONLY].map((m) => [m.id, m])
 );

package/src/types.ts

@@ -112,6 +112,13 @@ export interface ModelOption {
    * without it the Fal engine guesses from the id.
    */
   falInput?: FalInputFormat;
+  /**
+   * The Fal model to call instead when images are attached, for a model
+   * whose own endpoint takes a prompt only: e.g. Nano Banana Pro's edit
+   * endpoint, or a video model's image-to-video one. The Fal engine reads
+   * that model's inputs from the suggested lists or `FalEngineOptions.models`.
+   */
+  withImages?: string;
   /**
    * The output aspect ratios the model takes, e.g. `["1:1", "16:9", "9:16"]`.
    * Composer's Aspect ratio menu offers only ratios the selected models