Merge pull request #64 from fal-ai/feat/add-comfy-server-examples
feat: add comfy server examples
This commit is contained in:
Vedat Baday
GitHub
commit
9f4f70517f
203
apps/demo-nextjs-app-router/app/comfy/image_to_image/page.tsx
Normal file
203
apps/demo-nextjs-app-router/app/comfy/image_to_image/page.tsx
Normal file
@ -0,0 +1,203 @@
|
||||
'use client';
|
||||
|
||||
import * as fal from '@fal-ai/serverless-client';
|
||||
import { useMemo, useState } from 'react';
|
||||
import getWorkflow from './workflow';
|
||||
|
||||
// @snippet:start(client.config)
|
||||
fal.config({
|
||||
proxyUrl: '/api/fal/proxy', // the built-int nextjs proxy
|
||||
// proxyUrl: 'http://localhost:3333/api/fal/proxy', // or your own external proxy
|
||||
});
|
||||
// @snippet:end
|
||||
|
||||
// @snippet:start(client.result.type)
|
||||
type Image = {
|
||||
filename: string;
|
||||
subfolder: string;
|
||||
type: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
type Result = {
|
||||
url: string;
|
||||
outputs: Record<string, any>[];
|
||||
images: Image[];
|
||||
};
|
||||
// @snippet:end
|
||||
|
||||
type ErrorProps = {
|
||||
error: any;
|
||||
};
|
||||
|
||||
function Error(props: ErrorProps) {
|
||||
if (!props.error) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="p-4 mb-4 text-sm text-red-800 rounded bg-red-50 dark:bg-gray-800 dark:text-red-400"
|
||||
role="alert"
|
||||
>
|
||||
<span className="font-medium">Error</span> {props.error.message}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DEFAULT_PROMPT =
|
||||
'photograph of victorian woman with wings, sky clouds, meadow grass';
|
||||
|
||||
export default function ComfyImageToImagePage() {
|
||||
// @snippet:start("client.ui.state")
|
||||
// Input state
|
||||
const [prompt, setPrompt] = useState<string>(DEFAULT_PROMPT);
|
||||
const [imageFile, setImageFile] = useState<File | null>(null);
|
||||
// Result state
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
const [result, setResult] = useState<Result | null>(null);
|
||||
const [logs, setLogs] = useState<string[]>([]);
|
||||
const [elapsedTime, setElapsedTime] = useState<number>(0);
|
||||
// @snippet:end
|
||||
const video = useMemo(() => {
|
||||
if (!result) {
|
||||
return null;
|
||||
}
|
||||
return result;
|
||||
}, [result]);
|
||||
|
||||
const reset = () => {
|
||||
setLoading(false);
|
||||
setError(null);
|
||||
setResult(null);
|
||||
setLogs([]);
|
||||
setElapsedTime(0);
|
||||
};
|
||||
|
||||
const getImageURL = (result: Result) => {
|
||||
return result.outputs[9].images[0];
|
||||
};
|
||||
|
||||
const generateVideo = async () => {
|
||||
reset();
|
||||
// @snippet:start("client.queue.subscribe")
|
||||
setLoading(true);
|
||||
const start = Date.now();
|
||||
try {
|
||||
const result: Result = await fal.subscribe('fal-ai/comfy-server', {
|
||||
input: getWorkflow({
|
||||
prompt: prompt,
|
||||
loadimage_1: imageFile,
|
||||
}),
|
||||
pollInterval: 3000, // Default is 1000 (every 1s)
|
||||
logs: true,
|
||||
onQueueUpdate(update) {
|
||||
setElapsedTime(Date.now() - start);
|
||||
if (
|
||||
update.status === 'IN_PROGRESS' ||
|
||||
update.status === 'COMPLETED'
|
||||
) {
|
||||
setLogs((update.logs || []).map((log) => log.message));
|
||||
}
|
||||
},
|
||||
});
|
||||
setResult(getImageURL(result));
|
||||
} catch (error: any) {
|
||||
setError(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setElapsedTime(Date.now() - start);
|
||||
}
|
||||
// @snippet:end
|
||||
};
|
||||
return (
|
||||
<div className="min-h-screen dark:bg-gray-900 bg-gray-100">
|
||||
<main className="container dark:text-gray-50 text-gray-900 flex flex-col items-center justify-center w-full flex-1 py-10 space-y-8">
|
||||
<h1 className="text-4xl font-bold mb-8">
|
||||
Comfy SD1.5 - Image to Image
|
||||
</h1>
|
||||
<div className="text-lg w-full">
|
||||
<label htmlFor="image" className="block mb-2 text-current">
|
||||
Image
|
||||
</label>
|
||||
<div className="w-full flex flex-col space-y-4">
|
||||
<div className="mx-auto flex">
|
||||
{imageFile && (
|
||||
<img
|
||||
src={URL.createObjectURL(imageFile)}
|
||||
alt=""
|
||||
className="mx-auto w-1/2"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
className="w-full text-sm p-2 rounded bg-black/10 dark:bg-white/5 border border-black/20 dark:border-white/10"
|
||||
id="image_url"
|
||||
name="image_url"
|
||||
type="file"
|
||||
placeholder="Choose a file"
|
||||
accept="image/*"
|
||||
onChange={(e) => setImageFile(e.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-lg w-full">
|
||||
<label htmlFor="prompt" className="block mb-2 text-current">
|
||||
Prompt
|
||||
</label>
|
||||
<input
|
||||
className="w-full text-lg p-2 rounded bg-black/10 dark:bg-white/5 border border-black/20 dark:border-white/10"
|
||||
id="prompt"
|
||||
name="prompt"
|
||||
placeholder="Imagine..."
|
||||
value={prompt}
|
||||
autoComplete="off"
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
onBlur={(e) => setPrompt(e.target.value.trim())}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
generateVideo();
|
||||
}}
|
||||
className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-lg py-3 px-6 mx-auto rounded focus:outline-none focus:shadow-outline"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Generating...' : 'Generate Image'}
|
||||
</button>
|
||||
|
||||
<Error error={error} />
|
||||
|
||||
<div className="w-full flex flex-col space-y-4">
|
||||
<div className="mx-auto">
|
||||
{video && (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={video.url} alt="" />
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-light">JSON Result</h3>
|
||||
<p className="text-sm text-current/80">
|
||||
{`Elapsed Time (seconds): ${(elapsedTime / 1000).toFixed(2)}`}
|
||||
</p>
|
||||
<pre className="text-sm bg-black/70 text-white/80 font-mono h-60 rounded whitespace-pre overflow-auto w-full">
|
||||
{result
|
||||
? JSON.stringify(result, null, 2)
|
||||
: '// result pending...'}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-light">Logs</h3>
|
||||
<pre className="text-sm bg-black/70 text-white/80 font-mono h-60 rounded whitespace-pre overflow-auto w-full">
|
||||
{logs.filter(Boolean).join('\n')}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,102 @@
|
||||
// This workflow is generated with ComfyUI-fal
|
||||
const WORKFLOW = {
|
||||
prompt: {
|
||||
'3': {
|
||||
inputs: {
|
||||
seed: 280823642470253,
|
||||
steps: 20,
|
||||
cfg: 8,
|
||||
sampler_name: 'dpmpp_2m',
|
||||
scheduler: 'normal',
|
||||
denoise: 0.8700000000000001,
|
||||
model: ['14', 0],
|
||||
positive: ['6', 0],
|
||||
negative: ['7', 0],
|
||||
latent_image: ['12', 0],
|
||||
},
|
||||
class_type: 'KSampler',
|
||||
},
|
||||
'6': {
|
||||
inputs: {
|
||||
text: ['15', 0],
|
||||
clip: ['14', 1],
|
||||
},
|
||||
class_type: 'CLIPTextEncode',
|
||||
},
|
||||
'7': {
|
||||
inputs: {
|
||||
text: 'watermark, text\n',
|
||||
clip: ['14', 1],
|
||||
},
|
||||
class_type: 'CLIPTextEncode',
|
||||
},
|
||||
'8': {
|
||||
inputs: {
|
||||
samples: ['3', 0],
|
||||
vae: ['14', 2],
|
||||
},
|
||||
class_type: 'VAEDecode',
|
||||
},
|
||||
'9': {
|
||||
inputs: {
|
||||
filename_prefix: 'ComfyUI',
|
||||
images: ['8', 0],
|
||||
},
|
||||
class_type: 'SaveImage',
|
||||
},
|
||||
'10': {
|
||||
inputs: {
|
||||
image: 'example.png',
|
||||
upload: 'image',
|
||||
},
|
||||
class_type: 'LoadImage',
|
||||
},
|
||||
'12': {
|
||||
inputs: {
|
||||
pixels: ['10', 0],
|
||||
vae: ['14', 2],
|
||||
},
|
||||
class_type: 'VAEEncode',
|
||||
},
|
||||
'14': {
|
||||
inputs: {
|
||||
ckpt_name: 'v1-5-pruned-emaonly.ckpt',
|
||||
},
|
||||
class_type: 'CheckpointLoaderSimple',
|
||||
},
|
||||
'15': {
|
||||
inputs: {
|
||||
name: 'prompt',
|
||||
value:
|
||||
'photograph of victorian woman with wings, sky clouds, meadow grass\n',
|
||||
},
|
||||
class_type: 'StringInput_fal',
|
||||
},
|
||||
},
|
||||
extra_data: {},
|
||||
fal_inputs_dev_info: {
|
||||
loadimage_1: {
|
||||
key: ['10', 'inputs', 'image'],
|
||||
class_type: 'LoadImage',
|
||||
},
|
||||
prompt: {
|
||||
key: ['15', 'inputs', 'value'],
|
||||
class_type: 'StringInput_fal',
|
||||
},
|
||||
},
|
||||
fal_inputs: {
|
||||
loadimage_1: 'example_url',
|
||||
prompt:
|
||||
'photograph of victorian woman with wings, sky clouds, meadow grass\n',
|
||||
},
|
||||
};
|
||||
|
||||
export default function getWorkflow(object: any) {
|
||||
const newWorkflow = JSON.parse(JSON.stringify(WORKFLOW));
|
||||
newWorkflow.fal_inputs = {
|
||||
...newWorkflow.fal_inputs,
|
||||
...object,
|
||||
};
|
||||
|
||||
return newWorkflow;
|
||||
}
|
||||
181
apps/demo-nextjs-app-router/app/comfy/image_to_video/page.tsx
Normal file
181
apps/demo-nextjs-app-router/app/comfy/image_to_video/page.tsx
Normal file
@ -0,0 +1,181 @@
|
||||
'use client';
|
||||
|
||||
import * as fal from '@fal-ai/serverless-client';
|
||||
import { useMemo, useState } from 'react';
|
||||
import getWorkflow from './workflow';
|
||||
|
||||
// @snippet:start(client.config)
|
||||
fal.config({
|
||||
proxyUrl: '/api/fal/proxy', // the built-int nextjs proxy
|
||||
// proxyUrl: 'http://localhost:3333/api/fal/proxy', // or your own external proxy
|
||||
});
|
||||
// @snippet:end
|
||||
|
||||
// @snippet:start(client.result.type)
|
||||
type Image = {
|
||||
filename: string;
|
||||
subfolder: string;
|
||||
type: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
type Result = {
|
||||
url: string;
|
||||
outputs: Record<string, any>[];
|
||||
images: Image[];
|
||||
};
|
||||
// @snippet:end
|
||||
|
||||
type ErrorProps = {
|
||||
error: any;
|
||||
};
|
||||
|
||||
function Error(props: ErrorProps) {
|
||||
if (!props.error) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="p-4 mb-4 text-sm text-red-800 rounded bg-red-50 dark:bg-gray-800 dark:text-red-400"
|
||||
role="alert"
|
||||
>
|
||||
<span className="font-medium">Error</span> {props.error.message}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function ComfyImageToVideoPage() {
|
||||
// @snippet:start("client.ui.state")
|
||||
// Input state
|
||||
const [imageFile, setImageFile] = useState<File | null>(null);
|
||||
// Result state
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
const [result, setResult] = useState<Result | null>(null);
|
||||
const [logs, setLogs] = useState<string[]>([]);
|
||||
const [elapsedTime, setElapsedTime] = useState<number>(0);
|
||||
// @snippet:end
|
||||
const video = useMemo(() => {
|
||||
if (!result) {
|
||||
return null;
|
||||
}
|
||||
return result;
|
||||
}, [result]);
|
||||
|
||||
const reset = () => {
|
||||
setLoading(false);
|
||||
setError(null);
|
||||
setResult(null);
|
||||
setLogs([]);
|
||||
setElapsedTime(0);
|
||||
};
|
||||
|
||||
const getImageURL = (result: Result) => {
|
||||
return result.outputs[10].images[0];
|
||||
};
|
||||
|
||||
const generateVideo = async () => {
|
||||
reset();
|
||||
// @snippet:start("client.queue.subscribe")
|
||||
setLoading(true);
|
||||
const start = Date.now();
|
||||
try {
|
||||
const result: Result = await fal.subscribe('fal-ai/comfy-server', {
|
||||
input: getWorkflow({
|
||||
loadimage_1: imageFile,
|
||||
}),
|
||||
pollInterval: 3000, // Default is 1000 (every 1s)
|
||||
logs: true,
|
||||
onQueueUpdate(update) {
|
||||
setElapsedTime(Date.now() - start);
|
||||
if (
|
||||
update.status === 'IN_PROGRESS' ||
|
||||
update.status === 'COMPLETED'
|
||||
) {
|
||||
setLogs((update.logs || []).map((log) => log.message));
|
||||
}
|
||||
},
|
||||
});
|
||||
setResult(getImageURL(result));
|
||||
} catch (error: any) {
|
||||
setError(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setElapsedTime(Date.now() - start);
|
||||
}
|
||||
// @snippet:end
|
||||
};
|
||||
return (
|
||||
<div className="min-h-screen dark:bg-gray-900 bg-gray-100">
|
||||
<main className="container dark:text-gray-50 text-gray-900 flex flex-col items-center justify-center w-full flex-1 py-10 space-y-8">
|
||||
<h1 className="text-4xl font-bold mb-8">Comfy SVD - Image to Video</h1>
|
||||
<div className="text-lg w-full">
|
||||
<label htmlFor="image" className="block mb-2 text-current">
|
||||
Image
|
||||
</label>
|
||||
<div className="w-full flex flex-col space-y-4">
|
||||
<div className="mx-auto flex">
|
||||
{imageFile && (
|
||||
<img
|
||||
src={URL.createObjectURL(imageFile)}
|
||||
alt=""
|
||||
className="mx-auto w-1/2"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<input
|
||||
className="w-full text-sm p-2 rounded bg-black/10 dark:bg-white/5 border border-black/20 dark:border-white/10"
|
||||
id="image_url"
|
||||
name="image_url"
|
||||
type="file"
|
||||
placeholder="Choose a file"
|
||||
accept="image/*"
|
||||
onChange={(e) => setImageFile(e.target.files?.[0] ?? null)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
generateVideo();
|
||||
}}
|
||||
className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-lg py-3 px-6 mx-auto rounded focus:outline-none focus:shadow-outline"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Generating...' : 'Generate Video'}
|
||||
</button>
|
||||
|
||||
<Error error={error} />
|
||||
|
||||
<div className="w-full flex flex-col space-y-4">
|
||||
<div className="mx-auto">
|
||||
{video && (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={video.url} alt="" />
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-light">JSON Result</h3>
|
||||
<p className="text-sm text-current/80">
|
||||
{`Elapsed Time (seconds): ${(elapsedTime / 1000).toFixed(2)}`}
|
||||
</p>
|
||||
<pre className="text-sm bg-black/70 text-white/80 font-mono h-60 rounded whitespace-pre overflow-auto w-full">
|
||||
{result
|
||||
? JSON.stringify(result, null, 2)
|
||||
: '// result pending...'}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-light">Logs</h3>
|
||||
<pre className="text-sm bg-black/70 text-white/80 font-mono h-60 rounded whitespace-pre overflow-auto w-full">
|
||||
{logs.filter(Boolean).join('\n')}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,91 @@
|
||||
const WORKFLOW = {
|
||||
prompt: {
|
||||
'3': {
|
||||
inputs: {
|
||||
seed: 351912937281939,
|
||||
steps: 20,
|
||||
cfg: 2.5,
|
||||
sampler_name: 'euler',
|
||||
scheduler: 'karras',
|
||||
denoise: 1,
|
||||
model: ['14', 0],
|
||||
positive: ['12', 0],
|
||||
negative: ['12', 1],
|
||||
latent_image: ['12', 2],
|
||||
},
|
||||
class_type: 'KSampler',
|
||||
},
|
||||
'8': {
|
||||
inputs: {
|
||||
samples: ['3', 0],
|
||||
vae: ['15', 2],
|
||||
},
|
||||
class_type: 'VAEDecode',
|
||||
},
|
||||
'10': {
|
||||
inputs: {
|
||||
filename_prefix: 'ComfyUI',
|
||||
fps: 10,
|
||||
lossless: false,
|
||||
quality: 85,
|
||||
method: 'default',
|
||||
images: ['8', 0],
|
||||
},
|
||||
class_type: 'SaveAnimatedWEBP',
|
||||
},
|
||||
'12': {
|
||||
inputs: {
|
||||
width: 1024,
|
||||
height: 576,
|
||||
video_frames: 14,
|
||||
motion_bucket_id: 127,
|
||||
fps: 6,
|
||||
augmentation_level: 0,
|
||||
clip_vision: ['15', 1],
|
||||
init_image: ['23', 0],
|
||||
vae: ['15', 2],
|
||||
},
|
||||
class_type: 'SVD_img2vid_Conditioning',
|
||||
},
|
||||
'14': {
|
||||
inputs: {
|
||||
min_cfg: 1,
|
||||
model: ['15', 0],
|
||||
},
|
||||
class_type: 'VideoLinearCFGGuidance',
|
||||
},
|
||||
'15': {
|
||||
inputs: {
|
||||
ckpt_name: 'svd.safetensors',
|
||||
},
|
||||
class_type: 'ImageOnlyCheckpointLoader',
|
||||
},
|
||||
'23': {
|
||||
inputs: {
|
||||
image: '18.png',
|
||||
upload: 'image',
|
||||
},
|
||||
class_type: 'LoadImage',
|
||||
},
|
||||
},
|
||||
extra_data: {},
|
||||
fal_inputs_dev_info: {
|
||||
loadimage_1: {
|
||||
key: ['23', 'inputs', 'image'],
|
||||
class_type: 'LoadImage',
|
||||
},
|
||||
},
|
||||
fal_inputs: {
|
||||
loadimage_1: 'example_url',
|
||||
},
|
||||
};
|
||||
|
||||
export default function getWorkflow(object: any) {
|
||||
const newWorkflow = JSON.parse(JSON.stringify(WORKFLOW));
|
||||
newWorkflow.fal_inputs = {
|
||||
...newWorkflow.fal_inputs,
|
||||
...object,
|
||||
};
|
||||
|
||||
return newWorkflow;
|
||||
}
|
||||
40
apps/demo-nextjs-app-router/app/comfy/page.tsx
Normal file
40
apps/demo-nextjs-app-router/app/comfy/page.tsx
Normal file
@ -0,0 +1,40 @@
|
||||
'use client';
|
||||
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export default function Index() {
|
||||
const router = useRouter(); // Use correct router
|
||||
return (
|
||||
<div className="min-h-screen dark:bg-gray-900 bg-gray-100">
|
||||
<main className="container mx-auto flex flex-col items-center justify-center w-full flex-1 py-12 px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 className="text-4xl font-bold mb-8">
|
||||
Serverless Comfy Workflow Examples powered by{' '}
|
||||
<code className="font-light text-pink-600">fal</code>
|
||||
</h1>
|
||||
<p className="mt-2 text-lg text-gray-400 max-w-2xl">
|
||||
Learn how to use our fal-js to execute Comfy workflows.
|
||||
</p>
|
||||
<div className="mt-12 grid grid-cols-1 gap-3 md:grid-cols-3 lg:grid-cols-3">
|
||||
<button
|
||||
onClick={() => router.push('/comfy/text_to_image')}
|
||||
className="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg shadow-md transition-transform transform hover:-translate-y-1"
|
||||
>
|
||||
Text to Image
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push('/comfy/image_to_image')}
|
||||
className="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg shadow-md transition-transform transform hover:-translate-y-1"
|
||||
>
|
||||
Image to Image
|
||||
</button>
|
||||
<button
|
||||
onClick={() => router.push('/comfy/image_to_video')}
|
||||
className="px-6 py-3 bg-blue-600 hover:bg-blue-500 text-white rounded-lg shadow-md transition-transform transform hover:-translate-y-1"
|
||||
>
|
||||
Image to Video
|
||||
</button>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
173
apps/demo-nextjs-app-router/app/comfy/text_to_image/page.tsx
Normal file
173
apps/demo-nextjs-app-router/app/comfy/text_to_image/page.tsx
Normal file
@ -0,0 +1,173 @@
|
||||
'use client';
|
||||
|
||||
import * as fal from '@fal-ai/serverless-client';
|
||||
import { useMemo, useState } from 'react';
|
||||
import getWorkflow from './workflow';
|
||||
|
||||
// @snippet:start(client.config)
|
||||
fal.config({
|
||||
proxyUrl: '/api/fal/proxy', // the built-int nextjs proxy
|
||||
// proxyUrl: 'http://localhost:3333/api/fal/proxy', // or your own external proxy
|
||||
});
|
||||
// @snippet:end
|
||||
|
||||
// @snippet:start(client.result.type)
|
||||
type Image = {
|
||||
filename: string;
|
||||
subfolder: string;
|
||||
type: string;
|
||||
url: string;
|
||||
};
|
||||
|
||||
type Result = {
|
||||
url: string;
|
||||
outputs: Record<string, any>[];
|
||||
images: Image[];
|
||||
};
|
||||
// @snippet:end
|
||||
|
||||
type ErrorProps = {
|
||||
error: any;
|
||||
};
|
||||
|
||||
function Error(props: ErrorProps) {
|
||||
if (!props.error) {
|
||||
return null;
|
||||
}
|
||||
return (
|
||||
<div
|
||||
className="p-4 mb-4 text-sm text-red-800 rounded bg-red-50 dark:bg-gray-800 dark:text-red-400"
|
||||
role="alert"
|
||||
>
|
||||
<span className="font-medium">Error</span> {props.error.message}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const DEFAULT_PROMPT =
|
||||
'a city landscape of a cyberpunk metropolis, raining, purple, pink and teal neon lights, highly detailed, uhd';
|
||||
|
||||
export default function ComfyTextToImagePage() {
|
||||
// @snippet:start("client.ui.state")
|
||||
// Input state
|
||||
const [prompt, setPrompt] = useState<string>(DEFAULT_PROMPT);
|
||||
// Result state
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState<Error | null>(null);
|
||||
const [result, setResult] = useState<Result | null>(null);
|
||||
const [logs, setLogs] = useState<string[]>([]);
|
||||
const [elapsedTime, setElapsedTime] = useState<number>(0);
|
||||
// @snippet:end
|
||||
const image = useMemo(() => {
|
||||
if (!result) {
|
||||
return null;
|
||||
}
|
||||
return result;
|
||||
}, [result]);
|
||||
|
||||
const reset = () => {
|
||||
setLoading(false);
|
||||
setError(null);
|
||||
setResult(null);
|
||||
setLogs([]);
|
||||
setElapsedTime(0);
|
||||
};
|
||||
|
||||
const getImageURL = (result: Result) => {
|
||||
return result.outputs[9].images[0];
|
||||
};
|
||||
|
||||
const generateImage = async () => {
|
||||
reset();
|
||||
// @snippet:start("client.queue.subscribe")
|
||||
setLoading(true);
|
||||
const start = Date.now();
|
||||
try {
|
||||
const result: Result = await fal.subscribe('fal-ai/comfy-server', {
|
||||
input: getWorkflow({
|
||||
prompt: prompt,
|
||||
}),
|
||||
pollInterval: 3000, // Default is 1000 (every 1s)
|
||||
logs: true,
|
||||
onQueueUpdate(update) {
|
||||
setElapsedTime(Date.now() - start);
|
||||
if (
|
||||
update.status === 'IN_PROGRESS' ||
|
||||
update.status === 'COMPLETED'
|
||||
) {
|
||||
setLogs((update.logs || []).map((log) => log.message));
|
||||
}
|
||||
},
|
||||
});
|
||||
setResult(getImageURL(result));
|
||||
} catch (error: any) {
|
||||
setError(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setElapsedTime(Date.now() - start);
|
||||
}
|
||||
// @snippet:end
|
||||
};
|
||||
return (
|
||||
<div className="min-h-screen dark:bg-gray-900 bg-gray-100">
|
||||
<main className="container dark:text-gray-50 text-gray-900 flex flex-col items-center justify-center w-full flex-1 py-10 space-y-8">
|
||||
<h1 className="text-4xl font-bold mb-8">Comfy SDXL - Text to Image</h1>
|
||||
<div className="text-lg w-full">
|
||||
<label htmlFor="prompt" className="block mb-2 text-current">
|
||||
Prompt
|
||||
</label>
|
||||
<input
|
||||
className="w-full text-lg p-2 rounded bg-black/10 dark:bg-white/5 border border-black/20 dark:border-white/10"
|
||||
id="prompt"
|
||||
name="prompt"
|
||||
placeholder="Imagine..."
|
||||
value={prompt}
|
||||
autoComplete="off"
|
||||
onChange={(e) => setPrompt(e.target.value)}
|
||||
onBlur={(e) => setPrompt(e.target.value.trim())}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
generateImage();
|
||||
}}
|
||||
className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold text-lg py-3 px-6 mx-auto rounded focus:outline-none focus:shadow-outline"
|
||||
disabled={loading}
|
||||
>
|
||||
{loading ? 'Generating...' : 'Generate Image'}
|
||||
</button>
|
||||
|
||||
<Error error={error} />
|
||||
|
||||
<div className="w-full flex flex-col space-y-4">
|
||||
<div className="mx-auto">
|
||||
{image && (
|
||||
// eslint-disable-next-line @next/next/no-img-element
|
||||
<img src={image.url} alt="" />
|
||||
)}
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-light">JSON Result</h3>
|
||||
<p className="text-sm text-current/80">
|
||||
{`Elapsed Time (seconds): ${(elapsedTime / 1000).toFixed(2)}`}
|
||||
</p>
|
||||
<pre className="text-sm bg-black/70 text-white/80 font-mono h-60 rounded whitespace-pre overflow-auto w-full">
|
||||
{result
|
||||
? JSON.stringify(result, null, 2)
|
||||
: '// result pending...'}
|
||||
</pre>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-xl font-light">Logs</h3>
|
||||
<pre className="text-sm bg-black/70 text-white/80 font-mono h-60 rounded whitespace-pre overflow-auto w-full">
|
||||
{logs.filter(Boolean).join('\n')}
|
||||
</pre>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
103
apps/demo-nextjs-app-router/app/comfy/text_to_image/workflow.tsx
Normal file
103
apps/demo-nextjs-app-router/app/comfy/text_to_image/workflow.tsx
Normal file
@ -0,0 +1,103 @@
|
||||
// This workflow is generated with ComfyUI-fal
|
||||
const WORKFLOW = {
|
||||
prompt: {
|
||||
'3': {
|
||||
inputs: {
|
||||
seed: 704126934460886,
|
||||
steps: 20,
|
||||
cfg: 8,
|
||||
sampler_name: 'euler',
|
||||
scheduler: 'normal',
|
||||
denoise: 1,
|
||||
model: ['4', 0],
|
||||
positive: ['6', 0],
|
||||
negative: ['7', 0],
|
||||
latent_image: ['5', 0],
|
||||
},
|
||||
class_type: 'KSampler',
|
||||
},
|
||||
'4': {
|
||||
inputs: {
|
||||
ckpt_name: 'sd_xl_1.0.safetensors',
|
||||
},
|
||||
class_type: 'CheckpointLoaderSimple',
|
||||
},
|
||||
'5': {
|
||||
inputs: {
|
||||
width: 1024,
|
||||
height: 1024,
|
||||
batch_size: 1,
|
||||
},
|
||||
class_type: 'EmptyLatentImage',
|
||||
},
|
||||
'6': {
|
||||
inputs: {
|
||||
text: ['10', 0],
|
||||
clip: ['4', 1],
|
||||
},
|
||||
class_type: 'CLIPTextEncode',
|
||||
},
|
||||
'7': {
|
||||
inputs: {
|
||||
text: ['11', 0],
|
||||
clip: ['4', 1],
|
||||
},
|
||||
class_type: 'CLIPTextEncode',
|
||||
},
|
||||
'8': {
|
||||
inputs: {
|
||||
samples: ['3', 0],
|
||||
vae: ['4', 2],
|
||||
},
|
||||
class_type: 'VAEDecode',
|
||||
},
|
||||
'9': {
|
||||
inputs: {
|
||||
filename_prefix: 'ComfyUI',
|
||||
images: ['8', 0],
|
||||
},
|
||||
class_type: 'SaveImage',
|
||||
},
|
||||
'10': {
|
||||
inputs: {
|
||||
name: 'prompt',
|
||||
value:
|
||||
'beautiful scenery nature glass bottle landscape, , purple galaxy bottle,',
|
||||
},
|
||||
class_type: 'StringInput_fal',
|
||||
},
|
||||
'11': {
|
||||
inputs: {
|
||||
name: 'negative_prompt',
|
||||
value: 'text, watermark',
|
||||
},
|
||||
class_type: 'StringInput_fal',
|
||||
},
|
||||
},
|
||||
extra_data: {},
|
||||
fal_inputs_dev_info: {
|
||||
prompt: {
|
||||
key: ['10', 'inputs', 'value'],
|
||||
class_type: 'StringInput_fal',
|
||||
},
|
||||
negative_prompt: {
|
||||
key: ['11', 'inputs', 'value'],
|
||||
class_type: 'StringInput_fal',
|
||||
},
|
||||
},
|
||||
fal_inputs: {
|
||||
prompt:
|
||||
'beautiful scenery nature glass bottle landscape, , purple galaxy bottle,',
|
||||
negative_prompt: 'text, watermark',
|
||||
},
|
||||
};
|
||||
|
||||
export default function getWorkflow(object: any) {
|
||||
const newWorkflow = JSON.parse(JSON.stringify(WORKFLOW));
|
||||
newWorkflow.fal_inputs = {
|
||||
...newWorkflow.fal_inputs,
|
||||
...object,
|
||||
};
|
||||
|
||||
return newWorkflow;
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user