mishig HF staff commited on
Commit
b71f89a
1 Parent(s): 07d1aa7

Add original image in slideshow

Browse files
Files changed (2) hide show
  1. README.md +1 -1
  2. src/routes/+page.svelte +10 -5
README.md CHANGED
@@ -15,4 +15,4 @@ To develop locally:
15
  ```
16
  npm ci
17
  NODE_ENV="development" npm run dev -- --open
18
- ```
 
15
  ```
16
  npm ci
17
  NODE_ENV="development" npm run dev -- --open
18
+ ```
src/routes/+page.svelte CHANGED
@@ -56,12 +56,16 @@
56
  }
57
  }
58
 
59
- async function getCanvasSnapshot(canvas: HTMLCanvasElement): Promise<File> {
 
 
60
  const canvasDataUrl = canvas.toDataURL('png');
61
  const res = await fetch(canvasDataUrl);
62
  const blob = await res.blob();
63
  const imgFile = new File([blob], 'canvas shot.png', { type: 'image/png' });
64
- return imgFile;
 
 
65
  }
66
 
67
  async function submitRequest() {
@@ -79,7 +83,7 @@
79
  noiseTs = performance.now();
80
  drawNoise();
81
 
82
- const imgFile = await getCanvasSnapshot(canvas);
83
  const form = new FormData();
84
  form.append('prompt', txt);
85
  form.append('image', imgFile);
@@ -94,7 +98,7 @@
94
 
95
  const { images: imagesBase64Strs }: { images: string[] } = json;
96
 
97
- const imgEls = await Promise.all(
98
  imagesBase64Strs.map(async (imgBase64Str) => {
99
  const imgEl = new Image();
100
  imgEl.src = `data:image/png;base64, ${imgBase64Str}`;
@@ -104,7 +108,8 @@
104
  });
105
  return imgEl;
106
  })
107
- );
 
108
 
109
  isLoading = false;
110
 
 
56
  }
57
  }
58
 
59
+ async function getCanvasSnapshot(
60
+ canvas: HTMLCanvasElement
61
+ ): Promise<{ imgFile: File; imgBitmap: ImageBitmap }> {
62
  const canvasDataUrl = canvas.toDataURL('png');
63
  const res = await fetch(canvasDataUrl);
64
  const blob = await res.blob();
65
  const imgFile = new File([blob], 'canvas shot.png', { type: 'image/png' });
66
+ const imgData = canvas.getContext('2d')!.getImageData(0, 0, canvasSize, canvasSize);
67
+ const imgBitmap = await createImageBitmap(imgData);
68
+ return { imgFile, imgBitmap };
69
  }
70
 
71
  async function submitRequest() {
 
83
  noiseTs = performance.now();
84
  drawNoise();
85
 
86
+ const { imgFile, imgBitmap } = await getCanvasSnapshot(canvas);
87
  const form = new FormData();
88
  form.append('prompt', txt);
89
  form.append('image', imgFile);
 
98
 
99
  const { images: imagesBase64Strs }: { images: string[] } = json;
100
 
101
+ const imgEls = (await Promise.all(
102
  imagesBase64Strs.map(async (imgBase64Str) => {
103
  const imgEl = new Image();
104
  imgEl.src = `data:image/png;base64, ${imgBase64Str}`;
 
108
  });
109
  return imgEl;
110
  })
111
+ )) as CanvasImageSource[];
112
+ imgEls.push(imgBitmap); // add the original sketch
113
 
114
  isLoading = false;
115