118 lines
4.0 KiB
TypeScript
118 lines
4.0 KiB
TypeScript
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export default function Page() {
|
|
return <Examples />;
|
|
}
|
|
|
|
|
|
type exampleWorkflow = {
|
|
title: string;
|
|
description: string;
|
|
previewURL: string;
|
|
image: {
|
|
src: string,
|
|
alt: string,
|
|
};
|
|
};
|
|
|
|
const exampleWorkflows: exampleWorkflow[] = [
|
|
{
|
|
title: "Txt2Img SDXL",
|
|
description: "The basic workflow, type a prompt and generate images based on that.",
|
|
previewURL: 'https://www.comfydeploy.com/share/comfy-deploy-example-txt2img-sdxl',
|
|
image: {
|
|
src: '/example-workflows/txt2img.webp',
|
|
alt: 'IPAdapter workflow',
|
|
}
|
|
},
|
|
{
|
|
title: "Txt2Img LCM SDXL",
|
|
description: "Images in a couple of seconds, increase the speed of each generation using LCM Lora.",
|
|
previewURL: 'https://www.comfydeploy.com/share/comfy-deploy-example-lcm-sdxl',
|
|
image: {
|
|
src: '/example-workflows/txt2img-lcm.webp',
|
|
alt: 'txt2img LCM SDXL',
|
|
}
|
|
},
|
|
{
|
|
title: "IPAdapter SDXL",
|
|
description: "Load images and use them as reference for new generations.",
|
|
previewURL: 'https://www.comfydeploy.com/share/comfy-deploy-example-ip-adapter-sdxl',
|
|
image: {
|
|
src: '/example-workflows/ipadapter.webp',
|
|
alt: 'IPAdapter workflow',
|
|
}
|
|
},
|
|
{
|
|
title: "Upscale and Add Detail SDXL",
|
|
description: "Upscale and Add Details to your creations.",
|
|
previewURL: 'https://www.comfydeploy.com/share/comfy-deploy-example-upscale-and-add-detail-sdxl',
|
|
image: {
|
|
src: '/example-workflows/upscale.webp',
|
|
alt: 'Upscale and Add Detail SDXL',
|
|
}
|
|
},
|
|
{
|
|
title: "Txt2Img SDXL Turbo",
|
|
description: "Try SDXL turbo and generate images since 1 step in seconds.",
|
|
previewURL: 'https://www.comfydeploy.com/share/comfy-deploy-example-txt2img-sdxl-turbo',
|
|
image: {
|
|
src: '/example-workflows/txt2img-sdxl-turbo.webp',
|
|
alt: 'Txt2Img SDXL Turbo',
|
|
}
|
|
},
|
|
{
|
|
title: "Img2Img SDXL Controlnet",
|
|
description: "This workflow uses canny. Generate lines of you original image and create variations.",
|
|
previewURL: 'https://www.comfydeploy.com/share/comfy-deploy-example-img2-img-sdxl-controlnet',
|
|
image: {
|
|
src: '/example-workflows/txt2img-controlnet.webp',
|
|
alt: 'Img2Img SDXL Controlnet',
|
|
}
|
|
},
|
|
{
|
|
title: "Automatic Inpainting (SEG)",
|
|
description: "Type what do you want to select and change that area with your prompt.",
|
|
previewURL: 'https://www.comfydeploy.com/share/comfy-deploy-example-automatic-inpainting-clip-seg',
|
|
image: {
|
|
src: '/example-workflows/automatic-inpainting-seg.webp',
|
|
alt: 'Img2Img SDXL Controlnet',
|
|
}
|
|
}
|
|
];
|
|
|
|
|
|
async function Examples() {
|
|
return (
|
|
<div className="w-full py-4">
|
|
<section className="mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20">
|
|
<h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-center">
|
|
Check out some examples
|
|
</h1>
|
|
<p className="max-w-[560px] text-center text-lg text-muted-foreground">Text to Image, Image to Image, IPAdapter, and more. Here are some examples that you can use to deploy your workflow.</p>
|
|
</section>
|
|
<section className="flex justify-center flex-wrap gap-5">
|
|
{exampleWorkflows.map(workflow => {
|
|
return <Card className="w-[350px]">
|
|
<CardHeader>
|
|
<CardTitle>{workflow.title}</CardTitle>
|
|
<CardDescription>{workflow.description}</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Image src={workflow.image.src} alt={workflow.image.alt} width={350} height={230} />
|
|
</CardContent>
|
|
<CardFooter className="flex justify-end gap-2">
|
|
<Button asChild>
|
|
<Link href={workflow.previewURL}>View Workflow</Link>
|
|
</Button>
|
|
</CardFooter>
|
|
</Card>;
|
|
})}
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|