mishig HF staff commited on
Commit
847ea5c
1 Parent(s): 7c046a5

Upload img mobile btn

Browse files
Files changed (2) hide show
  1. src/routes/+page.svelte +32 -9
  2. tailwind.config.cjs +6 -1
src/routes/+page.svelte CHANGED
@@ -16,6 +16,7 @@
16
  let canvasSize = 400;
17
  let containerEl: HTMLDivElement;
18
  let canvasContainerEl: HTMLDivElement;
 
19
  let sketchEl: HTMLCanvasElement;
20
  let isShowSketch = false;
21
 
@@ -187,6 +188,14 @@
187
  context!.drawImage(canvas, 0, 0);
188
  }
189
 
 
 
 
 
 
 
 
 
190
  onMount(async () => {
191
  const { innerWidth: windowWidth } = window;
192
  canvasSize = Math.min(canvasSize, Math.floor(windowWidth * 0.75));
@@ -227,15 +236,29 @@
227
  />
228
  <div class="flex flex-col items-center {isLoading ? 'pointer-events-none' : ''}">
229
  <div id="board-container" bind:this={canvasContainerEl} />
230
- <div class="flex gap-x-2 mt-4 items-center justify-center {isLoading ? 'animate-pulse' : ''}">
231
- <input type="text" class="border-2 " placeholder="Add prompt" bind:value={txt} />
232
- <button
233
- on:click={submitRequest}
234
- class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4"
235
- >
236
- diffuse the f rest
237
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
238
  </div>
239
- <p class="mt-2 opacity-50">pro tip: upload img by dropping on the canvas</p>
240
  </div>
241
  </div>
 
16
  let canvasSize = 400;
17
  let containerEl: HTMLDivElement;
18
  let canvasContainerEl: HTMLDivElement;
19
+ let fileInput: HTMLInputElement;
20
  let sketchEl: HTMLCanvasElement;
21
  let isShowSketch = false;
22
 
 
188
  context!.drawImage(canvas, 0, 0);
189
  }
190
 
191
+ function onChange() {
192
+ const file = fileInput.files?.[0];
193
+ if (file) {
194
+ // todo: upload file
195
+ // onSelectFile(file);
196
+ }
197
+ }
198
+
199
  onMount(async () => {
200
  const { innerWidth: windowWidth } = window;
201
  canvasSize = Math.min(canvasSize, Math.floor(windowWidth * 0.75));
 
236
  />
237
  <div class="flex flex-col items-center {isLoading ? 'pointer-events-none' : ''}">
238
  <div id="board-container" bind:this={canvasContainerEl} />
239
+ <div>
240
+ <div class="flex gap-x-2 mt-4 items-center justify-center {isLoading ? 'animate-pulse' : ''}">
241
+ <input type="text" class="border-2 " placeholder="Add prompt" bind:value={txt} />
242
+ <button
243
+ on:click={submitRequest}
244
+ class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4"
245
+ >
246
+ diffuse the f rest
247
+ </button>
248
+ </div>
249
+ <p class="with-hover:hidden mt-2 opacity-50">pro tip: upload img by dropping on the canvas</p>
250
+ <div class="mt-1">
251
+ <label class="border py-1 px-1.5 bg-slate-200 cursor-pointer">
252
+ <input
253
+ accept="image/*"
254
+ bind:this={fileInput}
255
+ on:change={onChange}
256
+ style="display: none;"
257
+ type="file"
258
+ />
259
+ upload img
260
+ </label>
261
+ </div>
262
  </div>
 
263
  </div>
264
  </div>
tailwind.config.cjs CHANGED
@@ -5,7 +5,12 @@ module.exports = {
5
  screens: {
6
  desktop: '816px'
7
  },
8
- extend: {}
 
 
 
 
 
9
  },
10
  plugins: []
11
  };
 
5
  screens: {
6
  desktop: '816px'
7
  },
8
+ extend: {
9
+ screens: {
10
+ 'with-hover': { raw: '(hover: hover)' },
11
+ 'no-hover': { raw: '(hover: none)' }
12
+ }
13
+ }
14
  },
15
  plugins: []
16
  };