Skip to content

Commit

Permalink
feat: add model links & update styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@aykutkardas
aykutkardas committed Mar 3, 2024
1 parent b018749 commit 26e9062
Show file tree
Hide file tree
Showing 4 changed files with 110 additions and 19 deletions.
10 changes: 5 additions & 5 deletions app/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,9 +115,9 @@ 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 mt-10">
<div className="flex flex-row items-center justify-center">
<div className="w-80">
<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">
Image
</label>
Expand All @@ -128,15 +128,15 @@ export default function Lightning() {
handleOnChange(e.target?.files?.[0]);
}
}}
className="font-light mx-auto rounded-l-full h-10 pr-10 truncate"
className="font-light mx-auto rounded-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">
<div className="w-fit bg-neutral-900 p-1 rounded-full flex items-center justify-between space-x-2">
<span
onClick={() => setMode("original")}
className={cn(
Expand Down
46 changes: 44 additions & 2 deletions components/model-compare.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { cn } from "@/lib/utils";
import Image from "next/image";
import {
ReactCompareSlider,
ReactCompareSliderImage,
Expand All @@ -12,8 +13,40 @@ const ModelCompare = ({
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="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">
<div className="flex items-center justify-between w-full md:w-1/2">
<div className="flex items-center justify-end space-x-2 mb-1">
<Image
alt=""
src="https://fal.ai/fal-icon.svg"
width={16}
height={16}
/>
<a
href="https://fal.ai/models/ccsr"
className="text-indigo-400 font-medium text-sm"
target="_blank"
>
fal-ai/ccsr
</a>
</div>
<div className="flex items-center justify-end space-x-2 mb-1">
<Image
alt=""
src="https://fal.ai/fal-icon.svg"
width={16}
height={16}
/>
<a
href="https://fal.ai/models/supir"
className="text-indigo-400 font-medium text-sm"
target="_blank"
>
fal-ai/supir
</a>
</div>
</div>
{originalImage ? (
<div className="md:min-h-[512px] w-full md:w-1/2 bg-neutral-900 flex">
<ReactCompareSlider
Expand Down Expand Up @@ -69,7 +102,16 @@ const ModelCompare = ({
/>
</div>
) : (
<div className="w-full md:w-1/2 bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center" />
<div className="w-full md:w-1/2 bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center">
<Image
width={150}
height={150}
src="https://fal.ai/fal-icon.svg"
className="transition-all object-cover mb-6 data-[loading=true]:animate-pulse data-[loading=false]:grayscale data-[loading=false]:opacity-30"
alt="fal.ai icon used as image placeholder and loading indicator"
data-loading="false"
/>
</div>
)}
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions components/nav.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,9 @@ export function Nav() {
<div className="flex flex-1 items-center">
<Link href="/">
<h1 className={cn("font-light text-xl", spaceMono.className)}>
<span className="text-pink-700">sdxl</span>
<span>⚡️</span>
<span>lightning</span>
<span className="text-pink-700">upscaler</span>
<span>⚖️</span>
<span>comparator</span>
</h1>
</Link>
</div>
Expand Down
67 changes: 58 additions & 9 deletions components/original-compare.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import Image from "next/image";
import {
ReactCompareSlider,
ReactCompareSliderImage,
Expand All @@ -11,8 +12,23 @@ const OriginalCompare = ({
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="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">
<div className="flex items-center space-x-2 mb-1">
<Image
alt=""
src="https://fal.ai/fal-icon.svg"
width={16}
height={16}
/>
<a
href="https://fal.ai/models/ccsr"
className="text-indigo-400 font-medium text-sm"
target="_blank"
>
fal-ai/ccsr
</a>
</div>
{originalImage ? (
<div className="md:min-h-[512px] w-full flex items-center just">
<ReactCompareSlider
Expand Down Expand Up @@ -60,11 +76,35 @@ const OriginalCompare = ({
)} */}
</div>
) : (
<div className="w-full bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center" />
<div className="w-full bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center">
<Image
width={150}
height={150}
src="https://fal.ai/fal-icon.svg"
className="transition-all object-cover mb-6 data-[loading=true]:animate-pulse data-[loading=false]:grayscale data-[loading=false]:opacity-30"
alt="fal.ai icon used as image placeholder and loading indicator"
data-loading="false"
/>
</div>
)}
</div>

<div className="flex-1">
<div className="flex items-center justify-end space-x-2 mb-1">
<Image
alt=""
src="https://fal.ai/fal-icon.svg"
width={16}
height={16}
/>
<a
href="https://fal.ai/models/supir"
className="text-indigo-400 font-medium text-sm"
target="_blank"
>
fal-ai/supir
</a>
</div>
{originalImage ? (
<div className="md:min-h-[512px] w-full flex items-center justify-center">
<ReactCompareSlider
Expand All @@ -85,7 +125,13 @@ const OriginalCompare = ({
}
itemTwo={
<>
<ReactCompareSliderImage
src={modelTwo?.image as string}
srcSet={modelTwo?.image as string}
alt="Image one"
/>
<div className="absolute space-x-2 top-[50%] right-4 bg-black/50 text-xs py-1 rounded-full px-2">
<span>SUPIR</span>
{modelTwo && (
<span
className={
Expand All @@ -97,19 +143,22 @@ const OriginalCompare = ({
: `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 className="w-full bg-neutral-900 h-96 md:h-[512px] flex items-center justify-center">
<Image
width={150}
height={150}
src="https://fal.ai/fal-icon.svg"
className="transition-all object-cover mb-6 data-[loading=true]:animate-pulse data-[loading=false]:grayscale data-[loading=false]:opacity-30"
alt="fal.ai icon used as image placeholder and loading indicator"
data-loading="false"
/>
</div>
)}
</div>
</div>
Expand Down

0 comments on commit 26e9062

Please sign in to comment.