From 8f55295530d796ee07863cb9ff0d3d4aeba4b005 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aykut=20Karda=C5=9F?= <aykutkrds@gmail.com>
Date: Sun, 3 Mar 2024 23:34:33 +0300
Subject: [PATCH] feat: add blur effect when image processing

---
 app/page.tsx                    |  4 ----
 components/model-compare.tsx    | 17 +++++++++--------
 components/original-compare.tsx | 26 +++++++++++++-------------
 3 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 7440654..f864277 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -41,10 +41,6 @@ export default function Lightning() {
       },
       logs: true,
       onQueueUpdate: (update) => {
-        if (update.status === "IN_PROGRESS" && update.logs) {
-          // update.logs.map((log) => log.message).forEach(console.log);
-          console.log(update.logs.slice(-1)[0]?.message);
-        }
         if (update.status === "COMPLETED") {
           inferenceTime = update.metrics.inference_time as number;
         }
diff --git a/components/model-compare.tsx b/components/model-compare.tsx
index afe125c..9f93118 100644
--- a/components/model-compare.tsx
+++ b/components/model-compare.tsx
@@ -1,4 +1,4 @@
-import { formatTime } from "@/lib/utils";
+import { cn, formatTime } from "@/lib/utils";
 import Image from "next/image";
 import {
   ReactCompareSlider,
@@ -64,27 +64,28 @@ const ModelCompare = ({
               onPositionChange={(position) => setPosition(position)}
               itemOne={
                 <>
-                  <CompareImageLabel modelData={modelOne} name="CCSR" />
                   <ReactCompareSliderImage
+                    className={cn(!modelOne && "blur-md")}
                     src={(modelOne?.image || originalImage) as string}
                     srcSet={(modelOne?.image || originalImage) as string}
                     alt="Image one"
                   />
+                  <CompareImageLabel modelData={modelOne} name="CCSR" />
                 </>
               }
               itemTwo={
                 <>
-                  <CompareImageLabel
-                    modelData={modelTwo}
-                    name="SUPIR"
-                    position="right"
-                  />
-
                   <ReactCompareSliderImage
+                    className={cn(!modelTwo && "blur-md")}
                     src={(modelTwo?.image || originalImage) as string}
                     srcSet={(modelTwo?.image || originalImage) as string}
                     alt="Image one"
                   />
+                  <CompareImageLabel
+                    modelData={modelTwo}
+                    name="SUPIR"
+                    position="right"
+                  />
                 </>
               }
             />
diff --git a/components/original-compare.tsx b/components/original-compare.tsx
index c4d112a..eec9fce 100644
--- a/components/original-compare.tsx
+++ b/components/original-compare.tsx
@@ -4,6 +4,7 @@ import {
   ReactCompareSliderImage,
 } from "react-compare-slider";
 import CompareImageLabel from "./compare-image-label";
+import { cn } from "@/lib/utils";
 
 interface OriginalCompareProps {
   originalImage: string | null;
@@ -46,34 +47,32 @@ const OriginalCompare = ({
               onPositionChange={(position) => setPosition(position)}
               itemOne={
                 <>
-                  <div className="absolute top-[50%] left-4 text-black dark:text-white bg-white/40 dark: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"
                   />
+                  <div className="absolute top-[50%] left-4 text-black dark:text-white bg-white/40 dark:bg-black/50 text-xs py-1 rounded-full px-2">
+                    Original
+                  </div>
                 </>
               }
               itemTwo={
                 <>
+                  <ReactCompareSliderImage
+                    className={cn(!modelOne && "blur-md")}
+                    src={(modelOne?.image || originalImage) as string}
+                    srcSet={(modelOne?.image || originalImage) as string}
+                    alt="Image one"
+                  />
                   <CompareImageLabel
                     modelData={modelOne}
                     name="CCSR"
                     position="right"
                   />
-                  <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-200 dark:bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center">
@@ -126,8 +125,9 @@ const OriginalCompare = ({
               itemTwo={
                 <>
                   <ReactCompareSliderImage
-                    src={modelTwo?.image as string}
-                    srcSet={modelTwo?.image as string}
+                    className={cn(!modelTwo && "blur-md")}
+                    src={(modelTwo?.image || originalImage) as string}
+                    srcSet={(modelTwo?.image || originalImage) as string}
                     alt="Image one"
                   />
                   <CompareImageLabel