From b01874986fee671807f4f7a7ab2996b34c0f1eb9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aykut=20Karda=C5=9F?= <aykutkrds@gmail.com>
Date: Sun, 3 Mar 2024 13:53:53 +0300
Subject: [PATCH] refactor: split code and improve style

---
 app/page.tsx                    | 311 +++++++-------------------------
 components/model-compare.tsx    |  79 ++++++++
 components/original-compare.tsx | 119 ++++++++++++
 3 files changed, 261 insertions(+), 248 deletions(-)
 create mode 100644 components/model-compare.tsx
 create mode 100644 components/original-compare.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 151cd62..c0fbe34 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,32 +3,15 @@
 /* eslint-disable @next/next/no-img-element */
 /* eslint-disable @next/next/no-html-link-for-pages */
 import * as fal from "@fal-ai/serverless-client";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
+import Link from "next/link";
 import { Input } from "@/components/ui/input";
 import { ModelIcon } from "@/components/icons/model-icon";
-import Link from "next/link";
-import {
-  ReactCompareSlider,
-  ReactCompareSliderImage,
-} from "react-compare-slider";
-import { cx } from "class-variance-authority";
-
-function randomSeed() {
-  return Math.floor(Math.random() * 10000000).toFixed(0);
-}
-
-fal.config({
-  proxyUrl: "/api/proxy",
-});
+import { cn } from "@/lib/utils";
+import ModelCompare from "@/components/model-compare";
+import OriginalCompare from "@/components/original-compare";
 
-const INPUT_DEFAULTS = {
-  _force_msgpack: new Uint8Array([]),
-  enable_safety_checker: true,
-  image_size: "square_hd",
-  sync_mode: true,
-  num_images: 1,
-  num_inference_steps: "2",
-};
+fal.config({ proxyUrl: "/api/proxy" });
 
 interface ModelResult {
   name: string;
@@ -39,17 +22,18 @@ interface ModelResult {
 type CompareMode = "original" | "model";
 
 export default function Lightning() {
-  const [image, setImage] = useState<null | string>(null);
   const [mode, setMode] = useState<CompareMode>("original");
-  const [inferenceTime, setInferenceTime] = useState<number>(NaN);
   const [position, setPosition] = useState<number>(50);
   const [originalImage, setOriginalImage] = useState<string | null>(null);
 
   const [modelOne, setModelOne] = useState<ModelResult | null>(null);
+  const [modelOneLoading, setModelOneLoading] = useState<boolean>(false);
   const [modelTwo, setModelTwo] = useState<ModelResult | null>(null);
+  const [modelTwoLoading, setModelTwoLoading] = useState<boolean>(false);
 
   const upscaleWithModelOne = async (file: File) => {
     let inferenceTime;
+    setModelOneLoading(true);
 
     const result: Record<string, any> = await fal.subscribe("fal-ai/ccsr", {
       input: {
@@ -73,15 +57,16 @@ export default function Lightning() {
         image: result.image.url as string,
         inferenceTime,
       });
-      setImage(result.image.url as string);
     }
 
-    console.log(result);
+    setModelOneLoading(false);
   };
 
   const upscaleWithModelTwo = async (file: File) => {
     let inferenceTime;
 
+    setModelTwoLoading(true);
+
     const result: Record<string, any> = await fal.subscribe("fal-ai/supir", {
       input: {
         image_url: file,
@@ -104,14 +89,18 @@ export default function Lightning() {
         image: result.image.url as string,
         inferenceTime,
       });
-      setImage(result.image.url as string);
     }
+
+    setModelTwoLoading(false);
   };
 
   const handleOnChange = async (file: File) => {
     const blobUrl = URL.createObjectURL(file);
     setOriginalImage(blobUrl);
 
+    setModelOne(null);
+    setModelTwo(null);
+
     upscaleWithModelOne(file);
     upscaleWithModelTwo(file);
   };
@@ -126,10 +115,12 @@ export default function Lightning() {
     <main>
       <div className="flex flex-col justify-between h-[calc(100vh-56px)]">
         <div className="py-4 md:py-10 px-0 space-y-4 lg:space-y-8 mx-auto w-full max-w-5xl">
-          <div className="container px-3 md:px-0 flex flex-col space-y-2">
-            <div className="flex flex-col max-md:space-y-4 md:flex-row md:space-x-4 max-w-full">
-              <div className="flex-1 space-y-1">
-                <label>Prompt</label>
+          <div className="container px-3 md:px-0 flex flex-col space-y-2 mt-10">
+            <div className="flex flex-row items-center justify-center">
+              <div className="w-80">
+                <label className="text-neutral-400 ml-4 uppercase text-xs">
+                  Image
+                </label>
                 <Input
                   type="file"
                   onChange={(e) => {
@@ -137,231 +128,55 @@ export default function Lightning() {
                       handleOnChange(e.target?.files?.[0]);
                     }
                   }}
-                  className="font-light w-full mx-auto"
+                  className="font-light mx-auto rounded-l-full h-10 pr-10 truncate"
                   placeholder="Type something..."
                 />
               </div>
+              <div className="flex flex-col space-y-2 text-sm items-center justify-center">
+                <label className="text-neutral-400 uppercase text-xs">
+                  Compare Mode
+                </label>
+                <div className="w-fit bg-neutral-900 p-1 rounded-full -ml-10 flex items-center justify-between space-x-2">
+                  <span
+                    onClick={() => setMode("original")}
+                    className={cn(
+                      mode === "original" && "bg-neutral-200 text-black",
+                      "w-1/2 cursor-pointer text-sm  rounded-full h-8 px-3 flex items-center"
+                    )}
+                  >
+                    Original
+                  </span>
+                  <span
+                    onClick={() => setMode("model")}
+                    className={cn(
+                      mode === "model" && "bg-neutral-200 text-black",
+                      "w-1/2 cursor-pointer text-sm  rounded-full h-8 px-3 flex items-center"
+                    )}
+                  >
+                    Model
+                  </span>
+                </div>
+              </div>
             </div>
           </div>
           {mode === "model" && (
-            <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-10 space-x-6">
-              <div className="flex-1 flex-col flex items-center justify-center">
-                {image && (
-                  <div className="md:min-h-[512px] w-1/2 flex">
-                    <ReactCompareSlider
-                      position={position}
-                      onPositionChange={(position) => setPosition(position)}
-                      itemOne={
-                        <>
-                          <div className="absolute space-x-2 top-[50%] left-4 z-50 bg-white/10 text-xs py-1 rounded-full px-2">
-                            <span>CCSR</span>
-                            {modelOne && (
-                              <span
-                                className={
-                                  !modelOne
-                                    ? "text-neutral-500"
-                                    : "text-green-400"
-                                }
-                              >
-                                {modelOne
-                                  ? `${(modelOne.inferenceTime * 1000).toFixed(
-                                      0
-                                    )}ms`
-                                  : `n/a`}
-                              </span>
-                            )}
-                          </div>
-                          <ReactCompareSliderImage
-                            src={modelOne?.image as string}
-                            srcSet={modelOne?.image as string}
-                            alt="Image one"
-                          />
-                        </>
-                      }
-                      itemTwo={
-                        <>
-                          <div className="absolute space-x-2 top-[50%] right-4 z-50 bg-white/10 text-xs py-1 rounded-full px-2">
-                            {modelTwo && (
-                              <span
-                                className={
-                                  !modelTwo
-                                    ? "text-neutral-500"
-                                    : "text-green-400"
-                                }
-                              >
-                                {modelTwo
-                                  ? `${(modelTwo.inferenceTime * 1000).toFixed(
-                                      0
-                                    )}ms`
-                                  : `n/a`}
-                              </span>
-                            )}
-                            <span>SUPIR</span>
-                          </div>
-                          <ReactCompareSliderImage
-                            src={modelTwo?.image as string}
-                            srcSet={modelTwo?.image as string}
-                            alt="Image one"
-                          />
-                        </>
-                      }
-                    />
-                  </div>
-                )}
-              </div>
-            </div>
+            <ModelCompare
+              originalImage={originalImage}
+              position={position}
+              setPosition={setPosition}
+              modelOne={modelOne}
+              modelTwo={modelTwo}
+            />
           )}
           {mode === "original" && (
-            <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-10 space-x-6">
-              <div className="flex-1 flex-col flex items-center justify-center">
-                {image && modelOne && (
-                  <div className="flex space-x-3 w-full">
-                    <div className="flex flex-row space-x-1 text-sm mb-2">
-                      <span className="text-neutral-500">Modal:</span>
-                      <span className={"text-purple-400 whitespace-nowrap"}>
-                        CCSR Upscaler
-                      </span>
-                    </div>
-                    <div className="flex flex-row space-x-1 text-sm mb-2">
-                      <span className="text-neutral-500">Inference time:</span>
-                      <span
-                        className={
-                          !modelOne ? "text-neutral-500" : "text-green-400"
-                        }
-                      >
-                        {modelOne
-                          ? `${(modelOne.inferenceTime * 1000).toFixed(0)}ms`
-                          : `n/a`}
-                      </span>
-                    </div>
-                  </div>
-                )}
-                {image && (
-                  <div className="md:min-h-[512px] w-full flex">
-                    <ReactCompareSlider
-                      position={position}
-                      onPositionChange={(position) => setPosition(position)}
-                      itemOne={
-                        <>
-                          <div className="absolute top-[50%] left-4 z-50 bg-white/10 text-xs py-1 rounded-full px-2">
-                            Original
-                          </div>
-                          <ReactCompareSliderImage
-                            src={originalImage as string}
-                            srcSet={originalImage as string}
-                            alt="Image one"
-                          />
-                        </>
-                      }
-                      itemTwo={
-                        <>
-                          <div className="absolute top-[50%] right-4 z-50 bg-white/10 text-xs py-1 rounded-full px-2">
-                            CCSR
-                          </div>
-                          <ReactCompareSliderImage
-                            src={modelTwo?.image as string}
-                            srcSet={modelTwo?.image as string}
-                            alt="Image one"
-                          />
-                        </>
-                      }
-                    />
-                    {/* {image && (
-                    <img id="imageDisplay" src={image} alt="Dynamic Image" />
-                  )} */}
-                  </div>
-                )}
-              </div>
-
-              <div className="flex-1 flex-col flex items-center justify-center">
-                {image && modelTwo && (
-                  <div className="flex space-x-3 w-full">
-                    <div className="flex flex-row space-x-1 text-sm mb-2">
-                      <span className="w-1/2 text-neutral-500">Modal:</span>
-                      <span className={"text-purple-400 whitespace-nowrap"}>
-                        SUPIR Upscaler
-                      </span>
-                    </div>
-                    <div className="flex flex-row space-x-1 text-sm mb-2">
-                      <span className="text-neutral-500">Inference time:</span>
-                      <span
-                        className={
-                          !modelTwo ? "text-neutral-500" : "text-green-400"
-                        }
-                      >
-                        {modelTwo
-                          ? `${(modelTwo.inferenceTime * 1000).toFixed(0)}ms`
-                          : `n/a`}
-                      </span>
-                    </div>
-                  </div>
-                )}
-                {image && (
-                  <div className="md:min-h-[512px] w-full flex">
-                    <ReactCompareSlider
-                      className="relative"
-                      position={position}
-                      onPositionChange={(position) => setPosition(position)}
-                      itemOne={
-                        <>
-                          <div className="absolute top-[50%] left-4 z-50 bg-white/10 text-xs py-1 rounded-full px-2">
-                            Original
-                          </div>
-                          <ReactCompareSliderImage
-                            src={originalImage as string}
-                            srcSet={originalImage as string}
-                            alt="Image one"
-                          />
-                        </>
-                      }
-                      itemTwo={
-                        <>
-                          <div className="absolute top-[50%] right-4 z-50 bg-white/10 text-xs py-1 rounded-full px-2">
-                            SUPIR
-                          </div>
-                          <ReactCompareSliderImage
-                            src={image as string}
-                            srcSet={image as string}
-                            alt="Image one"
-                          />
-                        </>
-                      }
-                    />
-                    {/* {image && (
-                    <img id="imageDisplay" src={image} alt="Dynamic Image" />
-                  )} */}
-                  </div>
-                )}
-              </div>
-            </div>
+            <OriginalCompare
+              originalImage={originalImage}
+              position={position}
+              setPosition={setPosition}
+              modelOne={modelOne}
+              modelTwo={modelTwo}
+            />
           )}
-          <div className="w-full flex items-center justify-between">
-            <div className="flex flex-col space-y-2 text-sm items-center justify-center mx-auto">
-              <label className="text-neutral-300 uppercase text-xs">
-                Compare Mode
-              </label>
-              <div className="w-fit bg-neutral-900 p-1 rounded-full flex items-center justify-between space-x-2">
-                <span
-                  onClick={() => setMode("original")}
-                  className={cx(
-                    mode === "original" && "bg-neutral-800",
-                    "w-1/2 cursor-pointer text-neutral-400 text-sm  rounded-full h-8 px-3 flex items-center"
-                  )}
-                >
-                  Original
-                </span>
-                <span
-                  onClick={() => setMode("model")}
-                  className={cx(
-                    mode === "model" && "bg-neutral-800",
-                    "w-1/2 cursor-pointer text-neutral-400 text-sm  rounded-full h-8 px-3 flex items-center"
-                  )}
-                >
-                  Model
-                </span>
-              </div>
-            </div>
-          </div>
         </div>
         <div className="container flex flex-col items-center justify-center my-4">
           <p className="text-sm text-base-content/70 py-4 text-center text-neutral-400">
diff --git a/components/model-compare.tsx b/components/model-compare.tsx
new file mode 100644
index 0000000..94aec0e
--- /dev/null
+++ b/components/model-compare.tsx
@@ -0,0 +1,79 @@
+import { cn } from "@/lib/utils";
+import {
+  ReactCompareSlider,
+  ReactCompareSliderImage,
+} from "react-compare-slider";
+
+const ModelCompare = ({
+  originalImage,
+  position,
+  setPosition,
+  modelOne,
+  modelTwo,
+}) => {
+  return (
+    <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-10 space-x-6">
+      <div className="flex-1 flex-col flex w-full items-center justify-center">
+        {originalImage ? (
+          <div className="md:min-h-[512px] w-full md:w-1/2 bg-neutral-900 flex">
+            <ReactCompareSlider
+              className="w-full"
+              position={position}
+              onPositionChange={(position) => setPosition(position)}
+              itemOne={
+                <>
+                  <div className="absolute space-x-2 top-[50%] left-4 bg-black/50 text-xs py-1 rounded-full px-2">
+                    <span>CCSR</span>
+                    {modelOne && (
+                      <span
+                        className={
+                          !modelOne ? "text-neutral-500" : "text-green-400"
+                        }
+                      >
+                        {modelOne
+                          ? `${(modelOne.inferenceTime * 1000).toFixed(0)}ms`
+                          : `n/a`}
+                      </span>
+                    )}
+                  </div>
+                  <ReactCompareSliderImage
+                    src={(modelOne?.image || originalImage) as string}
+                    srcSet={(modelOne?.image || originalImage) as string}
+                    alt="Image one"
+                  />
+                </>
+              }
+              itemTwo={
+                <>
+                  <div className="absolute space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
+                    {modelTwo && (
+                      <span
+                        className={
+                          !modelTwo ? "text-neutral-500" : "text-green-400"
+                        }
+                      >
+                        {modelTwo
+                          ? `${(modelTwo.inferenceTime * 1000).toFixed(0)}ms`
+                          : `n/a`}
+                      </span>
+                    )}
+                    <span>SUPIR</span>
+                  </div>
+                  <ReactCompareSliderImage
+                    src={(modelTwo?.image || originalImage) as string}
+                    srcSet={(modelTwo?.image || originalImage) as string}
+                    alt="Image one"
+                  />
+                </>
+              }
+            />
+          </div>
+        ) : (
+          <div className="w-full md:w-1/2 bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center" />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default ModelCompare;
diff --git a/components/original-compare.tsx b/components/original-compare.tsx
new file mode 100644
index 0000000..3562226
--- /dev/null
+++ b/components/original-compare.tsx
@@ -0,0 +1,119 @@
+import {
+  ReactCompareSlider,
+  ReactCompareSliderImage,
+} from "react-compare-slider";
+
+const OriginalCompare = ({
+  originalImage,
+  position,
+  setPosition,
+  modelOne,
+  modelTwo,
+}) => {
+  return (
+    <div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-10 lg:space-x-6">
+      <div className="flex-1">
+        {originalImage ? (
+          <div className="md:min-h-[512px] w-full flex items-center just">
+            <ReactCompareSlider
+              className="relative w-full"
+              position={position}
+              onPositionChange={(position) => setPosition(position)}
+              itemOne={
+                <>
+                  <div className="absolute top-[50%] left-4 bg-black/50 text-xs py-1 rounded-full px-2">
+                    Original
+                  </div>
+                  <ReactCompareSliderImage
+                    src={originalImage as string}
+                    srcSet={originalImage as string}
+                    alt="Image one"
+                  />
+                </>
+              }
+              itemTwo={
+                <>
+                  <div className="absolute space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
+                    <span>CCSR</span>
+                    {modelOne && (
+                      <span
+                        className={
+                          !modelOne ? "text-neutral-500" : "text-green-400"
+                        }
+                      >
+                        {modelOne
+                          ? `${(modelOne.inferenceTime * 1000).toFixed(0)}ms`
+                          : `n/a`}
+                      </span>
+                    )}
+                  </div>
+                  <ReactCompareSliderImage
+                    src={modelOne?.image as string}
+                    srcSet={modelOne?.image as string}
+                    alt="Image one"
+                  />
+                </>
+              }
+            />
+            {/* {image && (
+              <img id="imageDisplay" src={image} alt="Dynamic Image" />
+            )} */}
+          </div>
+        ) : (
+          <div className="w-full bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center" />
+        )}
+      </div>
+
+      <div className="flex-1">
+        {originalImage ? (
+          <div className="md:min-h-[512px] w-full flex items-center justify-center">
+            <ReactCompareSlider
+              className="relative w-full"
+              position={position}
+              onPositionChange={(position) => setPosition(position)}
+              itemOne={
+                <>
+                  <div className="absolute top-[50%] left-4 bg-black/50 text-xs py-1 rounded-full px-2">
+                    Original
+                  </div>
+                  <ReactCompareSliderImage
+                    src={originalImage as string}
+                    srcSet={originalImage as string}
+                    alt="Image one"
+                  />
+                </>
+              }
+              itemTwo={
+                <>
+                  <div className="absolute space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
+                    {modelTwo && (
+                      <span
+                        className={
+                          !modelTwo ? "text-neutral-500" : "text-green-400"
+                        }
+                      >
+                        {modelTwo
+                          ? `${(modelTwo.inferenceTime * 1000).toFixed(0)}ms`
+                          : `n/a`}
+                      </span>
+                    )}
+                    <span>SUPIR</span>
+                  </div>
+                  <ReactCompareSliderImage
+                    src={modelTwo?.image as string}
+                    srcSet={modelTwo?.image as string}
+                    alt="Image one"
+                  />
+                </>
+              }
+            />
+          </div>
+        ) : (
+          <div className="w-full bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center" />
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default OriginalCompare;