feat: add every esrgan models (#8)

* feat: add every esrgan models * feat: update model shortnames * feat: update disabled model list
fal-ai · Mar 7, 2024 · 2eef279 · 2eef279
1 parent ecc7503
commit 2eef279
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 5 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -58,6 +58,7 @@ export default function UpscalerBattleground() {
     const result: Record<string, any> = await fal.subscribe(firstModel.model, {
       input: {
         image_url: resizedImage,
+        ...(firstModel.meta || {}),
       },
       logs: true,
       onQueueUpdate: (update) => {
@@ -89,6 +90,7 @@ export default function UpscalerBattleground() {
     const result: Record<string, any> = await fal.subscribe(secondModel.model, {
       input: {
         image_url: resizedImage,
+        ...(secondModel.meta || {}),
       },
       logs: true,
       onQueueUpdate: (update) => {
@@ -204,15 +206,15 @@ export default function UpscalerBattleground() {
           <div className="flex w-full items-end justify-between border-y py-2 mb-3">
             <div className="w-1/2 flex justify-start">
               <ModelDropdown
-                disableList={[secondModel?.model]}
+                disableList={[firstModel?.name, secondModel?.name]}
                 onSelect={(model) => setFirstModel(model)}
                 value={firstModel}
               />
             </div>
 
             <div className="w-1/2 flex justify-end">
               <ModelDropdown
-                disableList={[firstModel?.model]}
+                disableList={[firstModel?.name, secondModel?.name]}
                 onSelect={(model) => setSecondModel(model)}
                 value={secondModel}
               />

diff --git a/components/model-dropdown.tsx b/components/model-dropdown.tsx
@@ -16,6 +16,7 @@ export interface Model {
   name: string;
   model: string;
   link: string;
+  meta?: Record<string, any>;
 }
 
 export const UPSCALE_MODELS: Model[] = [
@@ -27,9 +28,57 @@ export const UPSCALE_MODELS: Model[] = [
   },
   {
     shortname: "ESRGAN",
-    name: "ESRGAN Upscaler",
+    name: "ESRGAN x4 Plus",
     model: "fal-ai/esrgan",
     link: "https://fal.ai/models/esrgan",
+    meta: {
+      model: "RealESRGAN_x4plus",
+    },
+  },
+  {
+    shortname: "ESRGAN",
+    name: "ESRGAN x2 Plus",
+    model: "fal-ai/esrgan",
+    link: "https://fal.ai/models/esrgan",
+    meta: {
+      model: "RealESRGAN_x2plus",
+    },
+  },
+  {
+    shortname: "ESRGAN",
+    name: "ESRGAN x4 Plus Anime 6B",
+    model: "fal-ai/esrgan",
+    link: "https://fal.ai/models/esrgan",
+    meta: {
+      model: "RealESRGAN_x4plus_anime_6B",
+    },
+  },
+  {
+    shortname: "ESRGAN",
+    name: "ESRGAN x4 v3",
+    model: "fal-ai/esrgan",
+    link: "https://fal.ai/models/esrgan",
+    meta: {
+      model: "RealESRGAN_x4_v3",
+    },
+  },
+  {
+    shortname: "ESRGAN",
+    name: "ESRGAN x4 Wdn v3",
+    model: "fal-ai/esrgan",
+    link: "https://fal.ai/models/esrgan",
+    meta: {
+      model: "RealESRGAN_x4_wdn_v3",
+    },
+  },
+  {
+    shortname: "ESRGAN",
+    name: "ESRGAN x4 Anime v3",
+    model: "fal-ai/esrgan",
+    link: "https://fal.ai/models/esrgan",
+    meta: {
+      model: "RealESRGAN_x4_anime_v3",
+    },
   },
   {
     shortname: "SUPIR",
@@ -66,7 +115,7 @@ export function ModelDropdown({
         {UPSCALE_MODELS.map((model) => (
           <DropdownMenuItem
             key={model.name}
-            disabled={disableList.includes(model.model)}
+            disabled={disableList.includes(model.name)}
             onClick={() => onSelect(model)}
           >
             {model.name}

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -6,6 +6,6 @@ export function cn(...inputs: ClassValue[]) {
 }
 
 export function formatTime(ms: number) {
-  if (ms < 1000) return `${ms}ms`;
+  if (ms < 1000) return `${Math.floor(ms)}ms`;
   return `${(ms / 1000).toFixed(1)}s`;
 }