feat: auto compare when image changed and update initial models (#7)

* feat: auto compare when image changed * feat: change initial upscale models
fal-ai · Mar 6, 2024 · 2647b7c · 2647b7c
1 parent 7c9e7a2
commit 2647b7c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 14 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -54,7 +54,7 @@ export default function UpscalerBattleground() {
 
     let inferenceTime;
 
-    const resizedImage = await resizeImage(file, 512);
+    const resizedImage = await resizeImage(file);
     const result: Record<string, any> = await fal.subscribe(firstModel.model, {
       input: {
         image_url: resizedImage,
@@ -85,7 +85,7 @@ export default function UpscalerBattleground() {
 
     let inferenceTime;
 
-    const resizedImage = await resizeImage(file, 512);
+    const resizedImage = await resizeImage(file);
     const result: Record<string, any> = await fal.subscribe(secondModel.model, {
       input: {
         image_url: resizedImage,
@@ -121,13 +121,15 @@ export default function UpscalerBattleground() {
     if (image) {
       const blobUrl = URL.createObjectURL(image);
       setOriginalImage(blobUrl);
+      handleCompare(image);
     }
   };
-  const handleCompare = async () => {
-    if (!imageFile) return;
 
-    upscaleWithFirstModel(imageFile);
-    upscaleWithSecondModel(imageFile);
+  const handleCompare = async (image) => {
+    if (!image) return;
+
+    upscaleWithFirstModel(image);
+    upscaleWithSecondModel(image);
   };
 
   useEffect(() => {
@@ -189,7 +191,7 @@ export default function UpscalerBattleground() {
               <Button
                 size="lg"
                 className="mx-auto md:mx-0"
-                onClick={handleCompare}
+                onClick={() => handleCompare(imageFile)}
                 disabled={!imageFile || firstModelLoading || secondModelLoading}
               >
                 Compare

diff --git a/components/model-compare.tsx b/components/model-compare.tsx
@@ -1,4 +1,4 @@
-import { cn, formatTime } from "@/lib/utils";
+import { cn } from "@/lib/utils";
 import Image from "next/image";
 import {
   ReactCompareSlider,

diff --git a/components/model-dropdown.tsx b/components/model-dropdown.tsx
@@ -25,6 +25,12 @@ export const UPSCALE_MODELS: Model[] = [
     model: "fal-ai/ccsr",
     link: "https://fal.ai/models/ccsr",
   },
+  {
+    shortname: "ESRGAN",
+    name: "ESRGAN Upscaler",
+    model: "fal-ai/esrgan",
+    link: "https://fal.run/fal-ai/esrgan",
+  },
   {
     shortname: "SUPIR",
     name: "SUPIR Upscaler",
@@ -37,12 +43,6 @@ export const UPSCALE_MODELS: Model[] = [
     model: "fal-ai/creative-upscaler",
     link: "https://fal.ai/models/creative-upscaler",
   },
-  {
-    shortname: "ESRGAN",
-    name: "ESRGAN Upscaler",
-    model: "fal-ai/esrgan",
-    link: "https://fal.run/fal-ai/esrgan",
-  },
 ];
 
 export function ModelDropdown({