fix: image result when model changed

fal-ai · Mar 5, 2024 · a7d7d2e · a7d7d2e
1 parent 48684ad
commit a7d7d2e
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 25 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -21,6 +21,7 @@ import { LoaderIcon } from "lucide-react";
 fal.config({ proxyUrl: "/api/proxy" });
 
 interface ModelResult {
+  model: string;
   image: string;
   inferenceTime: number;
 }
@@ -66,6 +67,7 @@ export default function UpscalerBattleground() {
 
     if (result) {
       setFirstModelOutput({
+        model: firstModel.model,
         image: result.image.url as string,
         inferenceTime,
       });
@@ -95,6 +97,7 @@ export default function UpscalerBattleground() {
 
     if (result) {
       setSecondModelOutput({
+        model: secondModel.model,
         image: result.image.url as string,
         inferenceTime,
       });

diff --git a/components/compare-image-label.tsx b/components/compare-image-label.tsx
@@ -3,32 +3,43 @@ import { LoaderIcon } from "lucide-react";
 
 interface CompareImageLabelProps {
   modelData: any;
+  modelOutput: any;
   name: string;
   loading: boolean;
   position?: "left" | "right";
 }
 
 const CompareImageLabel = ({
   modelData,
+  modelOutput,
   name,
   loading,
   position = "left",
-}: CompareImageLabelProps) => (
-  <div
-    className={cn(
-      "absolute flex items-center space-x-2 top-[50%] text-black dark:text-white bg-white/40 dark:bg-black/50 text-xs py-1 rounded-full px-2",
-      position === "right" ? "right-4" : "left-4"
-    )}
-  >
-    <span>{name}</span>
-    {loading ? (
-      <LoaderIcon className="animate-spin w-4 h-4 text-green-400" />
-    ) : (
-      <span className={!modelData ? "text-neutral-500" : "text-green-400"}>
-        {modelData ? formatTime(modelData.inferenceTime * 1000) : `n/a`}
-      </span>
-    )}
-  </div>
-);
+}: CompareImageLabelProps) => {
+  const hasInferenceTime =
+    modelOutput?.model === modelData?.model && !!modelOutput?.inferenceTime;
+
+  return (
+    <div
+      className={cn(
+        "absolute flex items-center space-x-2 top-[50%] text-black dark:text-white bg-white/40 dark:bg-black/50 text-xs py-1 rounded-full px-2",
+        position === "right" ? "right-4" : "left-4"
+      )}
+    >
+      <span>{name}</span>
+      {loading ? (
+        <LoaderIcon className="animate-spin w-4 h-4 text-green-400" />
+      ) : (
+        <span
+          className={!hasInferenceTime ? "text-neutral-500" : "text-green-400"}
+        >
+          {hasInferenceTime
+            ? formatTime(modelOutput.inferenceTime * 1000)
+            : `n/a`}
+        </span>
+      )}
+    </div>
+  );
+};
 
 export default CompareImageLabel;
diff --git a/components/model-compare.tsx b/components/model-compare.tsx
@@ -29,6 +29,11 @@ const ModelCompare = ({
   secondModelOutput,
   secondModelLoading,
 }: ModelCompareProps) => {
+  const hideFirstResult =
+    firstModelLoading || firstModelOutput?.model !== firstModel.model;
+  const hideSecondResult =
+    secondModelLoading || secondModelOutput?.model !== secondModel.model;
+
   return (
     <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-2 space-x-6">
       <div className="flex-1 flex-col flex w-full items-center justify-center">
@@ -41,24 +46,25 @@ const ModelCompare = ({
               itemOne={
                 <>
                   <ReactCompareSliderImage
-                    className={cn(!firstModelOutput && "blur-md")}
+                    className={cn(hideFirstResult && "blur-md")}
                     src={(firstModelOutput?.image || originalImage) as string}
                     srcSet={
                       (firstModelOutput?.image || originalImage) as string
                     }
                     alt="Image one"
                   />
                   <CompareImageLabel
+                    modelData={firstModel}
+                    modelOutput={firstModelOutput}
                     loading={firstModelLoading}
-                    modelData={firstModelOutput}
                     name={firstModel?.shortname}
                   />
                 </>
               }
               itemTwo={
                 <>
                   <ReactCompareSliderImage
-                    className={cn(!secondModelOutput && "blur-md")}
+                    className={cn(hideSecondResult && "blur-md")}
                     src={(secondModelOutput?.image || originalImage) as string}
                     srcSet={
                       (secondModelOutput?.image || originalImage) as string
@@ -67,7 +73,8 @@ const ModelCompare = ({
                   />
                   <CompareImageLabel
                     loading={secondModelLoading}
-                    modelData={secondModelOutput}
+                    modelData={secondModel}
+                    modelOutput={secondModelOutput}
                     name={secondModel?.shortname}
                     position="right"
                   />

diff --git a/components/original-compare.tsx b/components/original-compare.tsx
@@ -29,6 +29,11 @@ const OriginalCompare = ({
   secondModelOutput,
   secondModelLoading,
 }: OriginalCompareProps) => {
+  const hideFirstResult =
+    firstModelLoading || firstModelOutput?.model !== firstModel.model;
+  const hideSecondResult =
+    secondModelLoading || secondModelOutput?.model !== secondModel.model;
+
   return (
     <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-0 lg:space-x-6">
       <div className="flex-1">
@@ -53,7 +58,7 @@ const OriginalCompare = ({
               itemTwo={
                 <>
                   <ReactCompareSliderImage
-                    className={cn(!firstModelOutput && "blur-md")}
+                    className={cn(hideFirstResult && "blur-md")}
                     src={(firstModelOutput?.image || originalImage) as string}
                     srcSet={
                       (firstModelOutput?.image || originalImage) as string
@@ -62,7 +67,8 @@ const OriginalCompare = ({
                   />
                   <CompareImageLabel
                     loading={firstModelLoading}
-                    modelData={firstModelOutput}
+                    modelData={firstModel}
+                    modelOutput={firstModelOutput}
                     name={firstModel?.shortname}
                     position="right"
                   />
@@ -124,7 +130,7 @@ const OriginalCompare = ({
               itemTwo={
                 <>
                   <ReactCompareSliderImage
-                    className={cn(!secondModelOutput && "blur-md")}
+                    className={cn(hideSecondResult && "blur-md")}
                     src={(secondModelOutput?.image || originalImage) as string}
                     srcSet={
                       (secondModelOutput?.image || originalImage) as string
@@ -133,7 +139,8 @@ const OriginalCompare = ({
                   />
                   <CompareImageLabel
                     loading={secondModelLoading}
-                    modelData={secondModelOutput}
+                    modelData={secondModel}
+                    modelOutput={secondModelOutput}
                     name={secondModel?.shortname}
                     position="right"
                   />