Skip to content

Commit

Permalink
feat: add compare-image-label component & fix light theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@aykutkardas
aykutkardas committed Mar 3, 2024
1 parent 1bad011 commit 0419c35
Show file tree
Hide file tree
Showing 4 changed files with 81 additions and 78 deletions.
16 changes: 7 additions & 9 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,10 +73,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;
}
Expand Down Expand Up @@ -118,7 +114,7 @@ export default function Lightning() {
<div className="container px-3 md:px-0 flex flex-col mt-10">
<div className="flex flex-row items-center justify-center space-x-3">
<div className="w-80 flex flex-col justify-center items-center space-y-2">
<label className="text-neutral-400 ml-4 uppercase text-xs">
<label className="text-neutral-500 dark:text-neutral-400 ml-4 uppercase text-xs">
Image
</label>
<Input
Expand All @@ -133,14 +129,15 @@ export default function Lightning() {
/>
</div>
<div className="flex flex-col space-y-2 text-sm items-center justify-center">
<label className="text-neutral-400 uppercase text-xs">
<label className="text-neutral-500 dark:text-neutral-400 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">
<div className="w-fit select-none text-neutral-600 dark:text-neutral-300 bg-neutral-200 dark:bg-neutral-900 p-1 rounded-full flex items-center justify-between space-x-2">
<span
onClick={() => setMode("original")}
className={cn(
mode === "original" && "bg-neutral-200 text-black",
mode === "original" &&
"bg-neutral-900 text-white dark:bg-neutral-200 dark:text-black",
"w-1/2 cursor-pointer text-sm rounded-full h-8 px-3 flex items-center"
)}
>
Expand All @@ -149,7 +146,8 @@ export default function Lightning() {
<span
onClick={() => setMode("model")}
className={cn(
mode === "model" && "bg-neutral-200 text-black",
mode === "model" &&
"bg-neutral-900 text-white dark:bg-neutral-200 dark:text-black",
"w-1/2 cursor-pointer text-sm rounded-full h-8 px-3 flex items-center"
)}
>
Expand Down
32 changes: 32 additions & 0 deletions components/compare-image-label.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import { cn, formatTime } from "@/lib/utils";
import { LoaderIcon } from "lucide-react";

interface CompareImageLabelProps {
modelData: any;
name: string;
position?: "left" | "right";
}

const CompareImageLabel = ({
modelData,
name,
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>
{modelData ? (
<span className={!modelData ? "text-neutral-500" : "text-green-400"}>
{modelData ? formatTime(modelData.inferenceTime * 1000) : `n/a`}
</span>
) : (
<LoaderIcon className="animate-spin w-4 h-4 text-green-400" />
)}
</div>
);

export default CompareImageLabel;
48 changes: 18 additions & 30 deletions components/model-compare.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,26 @@
import { cn, formatTime } from "@/lib/utils";
import { formatTime } from "@/lib/utils";
import Image from "next/image";
import {
ReactCompareSlider,
ReactCompareSliderImage,
} from "react-compare-slider";
import CompareImageLabel from "./compare-image-label";

interface ModelCompareProps {
originalImage: string;
position: number;
setPosition: (position: number) => void;
modelOne: any;
modelTwo: any;
}

const ModelCompare = ({
originalImage,
position,
setPosition,
modelOne,
modelTwo,
}) => {
}: ModelCompareProps) => {
return (
<div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-7 space-x-6">
<div className="flex-1 flex-col flex w-full items-center justify-center">
Expand Down Expand Up @@ -55,20 +64,7 @@ const ModelCompare = ({
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
? formatTime(modelOne.inferenceTime * 1000)
: `n/a`}
</span>
)}
</div>
<CompareImageLabel modelData={modelOne} name="CCSR" />
<ReactCompareSliderImage
src={(modelOne?.image || originalImage) as string}
srcSet={(modelOne?.image || originalImage) as string}
Expand All @@ -78,20 +74,12 @@ const ModelCompare = ({
}
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
? formatTime(modelTwo.inferenceTime * 1000)
: `n/a`}
</span>
)}
<span>SUPIR</span>
</div>
<CompareImageLabel
modelData={modelTwo}
name="SUPIR"
position="right"
/>

<ReactCompareSliderImage
src={(modelTwo?.image || originalImage) as string}
srcSet={(modelTwo?.image || originalImage) as string}
Expand Down
63 changes: 24 additions & 39 deletions components/original-compare.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,25 @@
import { formatTime } from "@/lib/utils";
import { LoaderIcon } from "lucide-react";
import Image from "next/image";
import {
ReactCompareSlider,
ReactCompareSliderImage,
} from "react-compare-slider";
import CompareImageLabel from "./compare-image-label";

interface OriginalCompareProps {
originalImage: string;
position: number;
setPosition: (position: number) => void;
modelOne: any;
modelTwo: any;
}

const OriginalCompare = ({
originalImage,
position,
setPosition,
modelOne,
modelTwo,
}) => {
}: OriginalCompareProps) => {
return (
<div className="container flex flex-col space-y-6 lg:flex-row lg:space-y-0 p-3 md:px-0 pt-7 lg:space-x-6">
<div className="flex-1">
Expand All @@ -25,7 +32,7 @@ const OriginalCompare = ({
/>
<a
href="https://fal.ai/models/ccsr"
className="text-indigo-400 font-medium text-sm"
className="text-indigo-500 dark:text-indigo-400 font-medium text-sm"
target="_blank"
>
fal-ai/ccsr
Expand All @@ -39,7 +46,7 @@ const OriginalCompare = ({
onPositionChange={(position) => setPosition(position)}
itemOne={
<>
<div className="absolute top-[50%] left-4 bg-black/50 text-xs py-1 rounded-full px-2">
<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
Expand All @@ -51,22 +58,11 @@ const OriginalCompare = ({
}
itemTwo={
<>
<div className="absolute flex items-center 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
? formatTime(modelOne.inferenceTime * 1000)
: `n/a`}
</span>
) : (
<LoaderIcon className="animate-spin w-4 h-4 text-green-400" />
)}
</div>
<CompareImageLabel
modelData={modelOne}
name="CCSR"
position="right"
/>
<ReactCompareSliderImage
src={modelOne?.image as string}
srcSet={modelOne?.image as string}
Expand Down Expand Up @@ -103,7 +99,7 @@ const OriginalCompare = ({
/>
<a
href="https://fal.ai/models/supir"
className="text-indigo-400 font-medium text-sm"
className="text-indigo-500 dark:text-indigo-400 font-medium text-sm"
target="_blank"
>
fal-ai/supir
Expand All @@ -117,7 +113,7 @@ const OriginalCompare = ({
onPositionChange={(position) => setPosition(position)}
itemOne={
<>
<div className="absolute top-[50%] left-4 bg-black/50 text-xs py-1 rounded-full px-2">
<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
Expand All @@ -134,22 +130,11 @@ const OriginalCompare = ({
srcSet={modelTwo?.image as string}
alt="Image one"
/>
<div className="absolute flex items-center space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
<span>SUPIR</span>
{modelTwo ? (
<span
className={
!modelTwo ? "text-neutral-500" : "text-green-400"
}
>
{modelTwo
? formatTime(modelTwo.inferenceTime * 1000)
: `n/a`}
</span>
) : (
<LoaderIcon className="animate-spin w-4 h-4 text-green-400" />
)}
</div>
<CompareImageLabel
position="right"
modelData={modelTwo}
name="SUPIR"
/>
</>
}
/>
Expand Down

0 comments on commit 0419c35

Please sign in to comment.