lmz radames commited on
Commit
6b37b03
1 Parent(s): 9769f61

minor UI change (#5)

Browse files

- minor UI change (05de9762401f33fcc51b1a9de65b8112b455cd19)


Co-authored-by: Radamés Ajna <radames@users.noreply.huggingface.co>

Files changed (1) hide show
  1. index.html +54 -24
index.html CHANGED
@@ -145,6 +145,10 @@
145
  }
146
  });
147
 
 
 
 
 
148
  function drawImageCanvas(imgURL) {
149
  const canvas = document.querySelector("#canvas");
150
  const canvasResult = document.querySelector("#canvas-result");
@@ -153,21 +157,28 @@
153
  .clearRect(0, 0, canvas.width, canvas.height);
154
  const ctx = canvas.getContext("2d");
155
  ctx.clearRect(0, 0, canvas.width, canvas.height);
156
- document.querySelector("#share-btn").hidden = true;
 
 
 
 
157
 
158
- const img = new Image();
159
- img.crossOrigin = "anonymous";
 
160
 
161
- img.onload = () => {
162
- canvas.width = img.width;
163
- canvas.height = img.height;
164
- ctx.drawImage(img, 0, 0);
165
 
166
- canvas.parentElement.style.height = canvas.offsetHeight + "px";
167
- hasImage = true;
168
- document.querySelector("#detect").disabled = false;
169
- };
170
- img.src = imgURL;
 
 
171
  }
172
 
173
  async function classifyImage(
@@ -310,7 +321,7 @@
310
  button.classList.add("bg-blue-950");
311
  button.classList.remove("bg-blue-700");
312
  button.textContent = "Predict";
313
- document.querySelector("#share-btn").hidden = false;
314
  }
315
  }
316
  document.querySelector("#share-btn").addEventListener("click", () => {
@@ -372,8 +383,37 @@
372
  <option value="yolov8x_pose">yolov8x_pose (139 MB)</option>
373
  </select>
374
  </div>
 
 
 
 
 
 
 
 
 
375
  <!-- drag and drop area -->
376
  <div class="relative">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
377
  <div
378
  id="drop-area"
379
  class="flex flex-col items-center justify-center border-2 border-gray-300 border-dashed rounded-xl relative aspect-video w-full overflow-hidden"
@@ -422,8 +462,7 @@
422
  <div class="text-right py-2">
423
  <button
424
  id="share-btn"
425
- hidden
426
- class="bg-white rounded-md hover:outline outline-orange-200 disabled:opacity-50"
427
  >
428
  <img
429
  src="https://huggingface.co/datasets/huggingface/badges/raw/main/share-to-community-sm.svg"
@@ -489,15 +528,6 @@
489
  >
490
  </div>
491
  </div>
492
- <div>
493
- <button
494
- id="detect"
495
- disabled
496
- class="bg-blue-950 hover:bg-blue-700 text-white font-normal py-2 px-4 rounded disabled:opacity-75 disabled:hover:bg-blue-950"
497
- >
498
- Predict
499
- </button>
500
- </div>
501
  </main>
502
  </body>
503
  </html>
 
145
  }
146
  });
147
 
148
+ document.querySelector("#clear-btn").addEventListener("click", () => {
149
+ drawImageCanvas();
150
+ });
151
+
152
  function drawImageCanvas(imgURL) {
153
  const canvas = document.querySelector("#canvas");
154
  const canvasResult = document.querySelector("#canvas-result");
 
157
  .clearRect(0, 0, canvas.width, canvas.height);
158
  const ctx = canvas.getContext("2d");
159
  ctx.clearRect(0, 0, canvas.width, canvas.height);
160
+ document.querySelector("#share-btn").classList.add("invisible");
161
+ document.querySelector("#clear-btn").classList.add("invisible");
162
+ document.querySelector("#detect").disabled = true;
163
+ hasImage = false;
164
+ canvas.parentElement.style.height = "auto";
165
 
166
+ if (imgURL && imgURL !== "") {
167
+ const img = new Image();
168
+ img.crossOrigin = "anonymous";
169
 
170
+ img.onload = () => {
171
+ canvas.width = img.width;
172
+ canvas.height = img.height;
173
+ ctx.drawImage(img, 0, 0);
174
 
175
+ canvas.parentElement.style.height = canvas.offsetHeight + "px";
176
+ hasImage = true;
177
+ document.querySelector("#detect").disabled = false;
178
+ document.querySelector("#clear-btn").classList.remove("invisible");
179
+ };
180
+ img.src = imgURL;
181
+ }
182
  }
183
 
184
  async function classifyImage(
 
321
  button.classList.add("bg-blue-950");
322
  button.classList.remove("bg-blue-700");
323
  button.textContent = "Predict";
324
+ document.querySelector("#share-btn").classList.remove("invisible");
325
  }
326
  }
327
  document.querySelector("#share-btn").addEventListener("click", () => {
 
383
  <option value="yolov8x_pose">yolov8x_pose (139 MB)</option>
384
  </select>
385
  </div>
386
+ <div>
387
+ <button
388
+ id="detect"
389
+ disabled
390
+ class="bg-gray-700 hover:bg-gray-800 text-white font-normal py-2 px-4 rounded disabled:bg-gray-300 disabled:cursor-not-allowed"
391
+ >
392
+ Predict
393
+ </button>
394
+ </div>
395
  <!-- drag and drop area -->
396
  <div class="relative">
397
+ <div class="py-1">
398
+ <button
399
+ id="clear-btn"
400
+ class="text-xs bg-white rounded-md disabled:opacity-50 flex gap-1 items-center ml-auto invisible"
401
+ >
402
+ <svg
403
+ class=""
404
+ xmlns="http://www.w3.org/2000/svg"
405
+ viewBox="0 0 13 12"
406
+ height="1em"
407
+ >
408
+ <path
409
+ d="M1.6.7 12 11.1M12 .7 1.6 11.1"
410
+ stroke="#2E3036"
411
+ stroke-width="2"
412
+ />
413
+ </svg>
414
+ Clear image
415
+ </button>
416
+ </div>
417
  <div
418
  id="drop-area"
419
  class="flex flex-col items-center justify-center border-2 border-gray-300 border-dashed rounded-xl relative aspect-video w-full overflow-hidden"
 
462
  <div class="text-right py-2">
463
  <button
464
  id="share-btn"
465
+ class="bg-white rounded-md hover:outline outline-orange-200 disabled:opacity-50 invisible"
 
466
  >
467
  <img
468
  src="https://huggingface.co/datasets/huggingface/badges/raw/main/share-to-community-sm.svg"
 
528
  >
529
  </div>
530
  </div>
 
 
 
 
 
 
 
 
 
531
  </main>
532
  </body>
533
  </html>