Spaces:
Running
Running
Show initial sketch side-by-side
Browse files- src/routes/+page.svelte +14 -10
src/routes/+page.svelte
CHANGED
@@ -13,8 +13,10 @@
|
|
13 |
|
14 |
const animImageDuration = 500 as const;
|
15 |
const animNoiseDuration = 3000 as const;
|
16 |
-
let canvasSize =
|
17 |
let containerEl: HTMLDivElement;
|
|
|
|
|
18 |
|
19 |
async function drawNoise() {
|
20 |
if (!ctx) {
|
@@ -59,14 +61,12 @@
|
|
59 |
|
60 |
async function getCanvasSnapshot(
|
61 |
canvas: HTMLCanvasElement
|
62 |
-
): Promise<{ imgFile: File;
|
63 |
-
const
|
64 |
-
const res = await fetch(
|
65 |
const blob = await res.blob();
|
66 |
const imgFile = new File([blob], 'canvas shot.png', { type: 'image/png' });
|
67 |
-
|
68 |
-
const imgBitmap = await createImageBitmap(imgData);
|
69 |
-
return { imgFile, imgBitmap };
|
70 |
}
|
71 |
|
72 |
async function submitRequest() {
|
@@ -79,12 +79,13 @@
|
|
79 |
}
|
80 |
|
81 |
isLoading = true;
|
|
|
82 |
|
83 |
// start noise animation
|
84 |
noiseTs = performance.now();
|
85 |
drawNoise();
|
86 |
|
87 |
-
const { imgFile,
|
88 |
const form = new FormData();
|
89 |
form.append('prompt', txt);
|
90 |
form.append('image', imgFile);
|
@@ -110,13 +111,15 @@
|
|
110 |
return imgEl;
|
111 |
})
|
112 |
)) as CanvasImageSource[];
|
113 |
-
imgEls.push(imgBitmap); // add the original sketch
|
114 |
|
115 |
isLoading = false;
|
116 |
|
117 |
if (interval) {
|
118 |
clearInterval(interval);
|
119 |
}
|
|
|
|
|
|
|
120 |
let i = 0;
|
121 |
imageTs = performance.now();
|
122 |
drawImage(imgEls[i % imgEls.length]);
|
@@ -196,7 +199,8 @@
|
|
196 |
src="https://cdnjs.cloudflare.com/ajax/libs/drawingboard.js/0.4.2/drawingboard.min.js"></script>
|
197 |
</svelte:head>
|
198 |
|
199 |
-
<div class="flex flex-wrap gap-x-
|
|
|
200 |
<div class="flex flex-col items-center {isLoading ? 'pointer-events-none' : ''}">
|
201 |
<div id="board-container" bind:this={containerEl}/>
|
202 |
<div class="flex gap-x-2 mt-4 items-center justify-center {isLoading ? 'animate-pulse' : ''}">
|
|
|
13 |
|
14 |
const animImageDuration = 500 as const;
|
15 |
const animNoiseDuration = 3000 as const;
|
16 |
+
let canvasSize = 400;
|
17 |
let containerEl: HTMLDivElement;
|
18 |
+
let sketchImgEl: HTMLImageElement;
|
19 |
+
let isShowSketch = false;
|
20 |
|
21 |
async function drawNoise() {
|
22 |
if (!ctx) {
|
|
|
61 |
|
62 |
async function getCanvasSnapshot(
|
63 |
canvas: HTMLCanvasElement
|
64 |
+
): Promise<{ imgFile: File; imgDataUrl: string }> {
|
65 |
+
const imgDataUrl = canvas.toDataURL('png');
|
66 |
+
const res = await fetch(imgDataUrl);
|
67 |
const blob = await res.blob();
|
68 |
const imgFile = new File([blob], 'canvas shot.png', { type: 'image/png' });
|
69 |
+
return { imgFile, imgDataUrl };
|
|
|
|
|
70 |
}
|
71 |
|
72 |
async function submitRequest() {
|
|
|
79 |
}
|
80 |
|
81 |
isLoading = true;
|
82 |
+
isShowSketch=false;
|
83 |
|
84 |
// start noise animation
|
85 |
noiseTs = performance.now();
|
86 |
drawNoise();
|
87 |
|
88 |
+
const { imgFile, imgDataUrl } = await getCanvasSnapshot(canvas);
|
89 |
const form = new FormData();
|
90 |
form.append('prompt', txt);
|
91 |
form.append('image', imgFile);
|
|
|
111 |
return imgEl;
|
112 |
})
|
113 |
)) as CanvasImageSource[];
|
|
|
114 |
|
115 |
isLoading = false;
|
116 |
|
117 |
if (interval) {
|
118 |
clearInterval(interval);
|
119 |
}
|
120 |
+
sketchImgEl.width=canvasSize;
|
121 |
+
sketchImgEl.src=imgDataUrl;
|
122 |
+
isShowSketch=true;
|
123 |
let i = 0;
|
124 |
imageTs = performance.now();
|
125 |
drawImage(imgEls[i % imgEls.length]);
|
|
|
199 |
src="https://cdnjs.cloudflare.com/ajax/libs/drawingboard.js/0.4.2/drawingboard.min.js"></script>
|
200 |
</svelte:head>
|
201 |
|
202 |
+
<div class="flex flex-wrap gap-x-4 gap-y-2 justify-center mt-8">
|
203 |
+
<img alt="Initial sketch" class="border-2 {!isShowSketch ? 'hidden' : ''}" bind:this={sketchImgEl}>
|
204 |
<div class="flex flex-col items-center {isLoading ? 'pointer-events-none' : ''}">
|
205 |
<div id="board-container" bind:this={containerEl}/>
|
206 |
<div class="flex gap-x-2 mt-4 items-center justify-center {isLoading ? 'animate-pulse' : ''}">
|