feat: add blur effect when image processing

fal-ai · Mar 3, 2024 · 8f55295 · 8f55295
1 parent c9a3242
commit 8f55295
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 25 deletions.
diff --git 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
@@ -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
@@ -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