File size: 2,230 Bytes
89682f8 |
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 |
import useSWR from "swr";
const dimension = 512;
function blobToBase64(blob: Blob): Promise<string> {
return new Promise((resolve, _) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result as string);
reader.readAsDataURL(blob);
});
}
function convertEmojiToDataToDataURL(emoji: string): string {
const element = document.createElement("canvas");
const ctx = element.getContext("2d")!;
element.height = dimension;
element.width = dimension;
ctx.fillStyle = "rgb(24 24 27)";
ctx.fillRect(0, 0, element.width, element.height);
ctx.textAlign = `center`;
ctx.font = `${dimension - 32}px serf`;
const textMetrics = ctx.measureText(emoji);
const textHeight =
textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent;
const y =
dimension / 2 + (textMetrics.actualBoundingBoxAscent - textHeight / 2);
ctx.fillText(emoji, dimension / 2, y);
return element.toDataURL("image/jpeg", 0.5);
}
export const useResponse = (
revalidateOnMount: boolean,
emoji: string,
name: string,
style: string,
strength: number,
seed: number,
) => {
const { data, isLoading } = useSWR(
[emoji, name, style, strength, seed],
async ([base64, name, style, strength, seed]) => {
const response = await fetch("/api/run", {
headers: {
accept: "image/jpeg",
"content-type": "application/json",
},
body: JSON.stringify({
input_image: convertEmojiToDataToDataURL(emoji).replace(
/^data:image\/(png|jpeg);base64,/,
"",
),
prompt: `${name}, emoji ${emoji}, ${style}`,
guidance_scale: 8,
lcm_steps: 50,
seed,
steps: 4,
strength,
width: dimension,
height: dimension,
}),
method: "POST",
});
if (response.status !== 200) return "";
const blob = await response.blob();
return await blobToBase64(blob);
},
{
revalidateOnFocus: false,
revalidateOnReconnect: false,
revalidateOnMount,
refreshWhenOffline: false,
refreshInterval: 0,
},
);
return { image: data as string, loading: isLoading };
};
|