feat: resize image before submit

app/layout.tsx

@@ -8,8 +8,8 @@ import { Analytics } from "@vercel/analytics/react";
 const inter = Inter({ subsets: ["latin"] });
 
 export const metadata: Metadata = {
-  title: "Upscaler Comparator - by fal.ai",
-  description: "Comparator for Upscalers",
+  title: "Upscaler Battleground - by fal.ai",
+  description: "A demo comparing different upscalers served by fal.ai",
   authors: [{ name: "fal.ai", url: "https://fal.ai" }],
   // [TODO]: Update this to the correct URL
   metadataBase: new URL("https://fastsdxl.ai"),

app/page.tsx

@@ -17,6 +17,7 @@ import {
 } from "@/components/model-dropdown";
 import { Button } from "@/components/ui/button";
 import { LoaderIcon } from "lucide-react";
+import { resizeImage } from "@/lib/image";
 
 fal.config({ proxyUrl: "/api/proxy" });
 
@@ -53,9 +54,10 @@ export default function UpscalerBattleground() {
 
     let inferenceTime;
 
+    const resizedImage = await resizeImage(file, 1024);
     const result: Record<string, any> = await fal.subscribe(firstModel.model, {
       input: {
-        image_url: file,
+        image_url: resizedImage,
       },
       logs: true,
       onQueueUpdate: (update) => {
@@ -83,9 +85,10 @@ export default function UpscalerBattleground() {
 
     let inferenceTime;
 
+    const resizedImage = await resizeImage(file, 1024);
     const result: Record<string, any> = await fal.subscribe(secondModel.model, {
       input: {
-        image_url: file,
+        image_url: resizedImage,
       },
       logs: true,
       onQueueUpdate: (update) => {
@@ -176,9 +179,10 @@ export default function UpscalerBattleground() {
                     onChange={handleImageSelect}
                     className={cn(
                       "font-light mx-auto rounded-full h-10 pr-10 truncate",
-                      !imageFile && "border-orange-400/40"
+                      !imageFile && "border-indigo-700/70"
                     )}
-                    placeholder="Type something..."
+                    accept="image/*"
+                    placeholder="Choose file..."
                   />
                 </div>
               </div>

lib/image.ts

@@ -0,0 +1,54 @@
+export async function resizeImage(
+  file: File,
+  max: number = 1024,
+): Promise<Blob> {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
+
+  if (!ctx) {
+    throw new Error("Failed to get 2d context");
+  }
+
+  const image = await loadImage(file);
+
+  const targetSize = Math.min(max, Math.max(image.width, image.height));
+  console.log("targetSize", targetSize);
+  const targetWidth =
+    image.width > image.height
+      ? targetSize
+      : Math.round((image.width / image.height) * targetSize);
+  const targetHeight =
+    image.height > image.width
+      ? targetSize
+      : Math.round((image.height / image.width) * targetSize);
+
+  ctx.drawImage(image, 0, 0, targetWidth, targetHeight);
+
+  return new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (blob) => {
+        if (!blob) {
+          reject(new Error("Failed to convert canvas to blob"));
+          return;
+        }
+        resolve(blob);
+      },
+      "image/jpeg",
+      0.7,
+    );
+  });
+}
+
+async function loadImage(file: File): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const image = new Image();
+      image.onload = () => resolve(image);
+      image.onerror = reject;
+      image.src = reader.result as string;
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(file);
+  });
+}