-
Notifications
You must be signed in to change notification settings - Fork 12
/
page.tsx
104 lines (94 loc) · 3.11 KB
/
page.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
'use client';
/* eslint-disable @next/next/no-img-element */
import * as fal from '@fal-ai/serverless-client';
import { ChangeEvent, useRef, useState } from 'react';
import { DrawingCanvas } from '../../components/drawing';
fal.config({
proxyUrl: '/api/fal/proxy',
});
const PROMPT_EXPANDED =
', beautiful, colorful, highly detailed, best quality, uhd';
const PROMPT = 'a moon in the night sky';
const defaults = {
model_name: 'runwayml/stable-diffusion-v1-5',
image_size: 'square',
num_inference_steps: 4,
seed: 6252023,
};
export default function RealtimePage() {
const [prompt, setPrompt] = useState(PROMPT);
const currentDrawing = useRef<Uint8Array | null>(null);
const outputCanvasRef = useRef<HTMLCanvasElement | null>(null);
const { send } = fal.realtime.connect(
'fal-ai/fast-lcm-diffusion/image-to-image',
{
connectionKey: 'realtime-demo',
throttleInterval: 128,
onResult(result) {
if (result.images && result.images[0] && result.images[0].content) {
const canvas = outputCanvasRef.current;
const context = canvas?.getContext('2d');
if (canvas && context) {
const imageBytes: Uint8Array = result.images[0].content;
const blob = new Blob([imageBytes], { type: 'image/png' });
createImageBitmap(blob)
.then((bitmap) => {
context.drawImage(bitmap, 0, 0);
})
.catch(console.error);
}
}
},
}
);
const handlePromptChange = (e: ChangeEvent<HTMLInputElement>) => {
setPrompt(e.target.value);
if (currentDrawing.current) {
send({
prompt: e.target.value.trim() + PROMPT_EXPANDED,
image_bytes: currentDrawing.current,
...defaults,
});
}
};
return (
<div className="min-h-screen bg-neutral-900 text-neutral-50">
<main className="container flex flex-col items-center justify-center w-full flex-1 py-10 space-y-8">
<h1 className="text-4xl font-mono mb-8 text-neutral-50">
fal<code className="font-light text-pink-600">realtime</code>
</h1>
<div className="w-full max-w-full text-neutral-400">
<input
className="italic text-xl px-3 py-2 border border-white/10 rounded-md bg-white/5 w-full"
value={prompt}
onChange={handlePromptChange}
/>
</div>
<div className="flex flex-col md:flex-row space-x-4">
<div className="flex-1">
<DrawingCanvas
onCanvasChange={({ imageData }) => {
currentDrawing.current = imageData;
send({
prompt: prompt + PROMPT_EXPANDED,
image_bytes: imageData,
...defaults,
});
}}
/>
</div>
<div className="flex-1">
<div>
<canvas
className="w-[512px] h-[512px]"
width="512"
height="512"
ref={outputCanvasRef}
/>
</div>
</div>
</div>
</main>
</div>
);
}