Thomas G. Lopes commited on
Commit
ed9a36b
·
1 Parent(s): dab40ed

fix img pos

Browse files
src/lib/components/inference-playground/message.svelte CHANGED
@@ -393,41 +393,40 @@
393
  </div>
394
  </div>
395
  </div>
396
- </div>
397
-
398
- <div class="mt-2">
399
- <div class="flex items-center gap-2">
400
- {#each message.images ?? [] as imgKey (imgKey)}
401
- {#await images.get(imgKey)}
402
- <!-- nothing -->
403
- {:then imgSrc}
404
- <div class="group/img relative">
405
- <button
406
- aria-label="expand"
407
- class="absolute inset-0 z-10 grid place-items-center bg-gray-800/70 opacity-0 group-hover/img:opacity-100"
408
- onclick={() => previewImage(imgSrc)}
409
- >
410
- <IconMaximize />
411
- </button>
412
- <img src={imgSrc} alt="uploaded" class="size-12 rounded-md object-cover" />
413
- <button
414
- aria-label="remove"
415
- type="button"
416
- onclick={async e => {
417
- e.stopPropagation();
418
- await conversation.updateMessage({
419
- index,
420
- message: { images: message.images?.filter(i => i !== imgKey) },
421
- });
422
- images.delete(imgKey);
423
- }}
424
- class="invisible absolute -top-1 -right-1 z-20 grid size-5 place-items-center rounded-full bg-gray-800 text-xs text-white group-hover/img:visible hover:bg-gray-700"
425
- >
426
-
427
- </button>
428
- </div>
429
- {/await}
430
- {/each}
431
  </div>
432
  </div>
433
 
 
393
  </div>
394
  </div>
395
  </div>
396
+ <div class="mt-2">
397
+ <div class="flex items-center gap-2">
398
+ {#each message.images ?? [] as imgKey (imgKey)}
399
+ {#await images.get(imgKey)}
400
+ <!-- nothing -->
401
+ {:then imgSrc}
402
+ <div class="group/img relative">
403
+ <button
404
+ aria-label="expand"
405
+ class="absolute inset-0 z-10 grid place-items-center bg-gray-800/70 opacity-0 group-hover/img:opacity-100"
406
+ onclick={() => previewImage(imgSrc)}
407
+ >
408
+ <IconMaximize />
409
+ </button>
410
+ <img src={imgSrc} alt="uploaded" class="size-12 rounded-md object-cover" />
411
+ <button
412
+ aria-label="remove"
413
+ type="button"
414
+ onclick={async e => {
415
+ e.stopPropagation();
416
+ await conversation.updateMessage({
417
+ index,
418
+ message: { images: message.images?.filter(i => i !== imgKey) },
419
+ });
420
+ images.delete(imgKey);
421
+ }}
422
+ class="invisible absolute -top-1 -right-1 z-20 grid size-5 place-items-center rounded-full bg-gray-800 text-xs text-white group-hover/img:visible hover:bg-gray-700"
423
+ >
424
+
425
+ </button>
426
+ </div>
427
+ {/await}
428
+ {/each}
429
+ </div>
 
430
  </div>
431
  </div>
432