Skip to content

Commit

Permalink
Click to preview images in chatbot (#8377)
Browse files Browse the repository at this point in the history
* click to preview image

* add changeset

* color of svg

* notebook

* fix

* fix

* fix preview bug

* thumbnail spacing

* add changeset

* add changeset

---------

Co-authored-by: gradio-pr-bot <[email protected]>
  • Loading branch information
dawoodkhan82 and gradio-pr-bot authored Jun 3, 2024
1 parent 83bdf5c commit 341844f
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 0 deletions.
7 changes: 7 additions & 0 deletions .changeset/dirty-wings-double.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@gradio/chatbot": patch
"@gradio/multimodaltextbox": patch
"gradio": patch
---

feat:Click to preview images in chatbot
73 changes: 73 additions & 0 deletions js/chatbot/shared/ChatBot.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
import { Audio } from "@gradio/audio/shared";
import { Image } from "@gradio/image/shared";
import { Video } from "@gradio/video/shared";
import { Clear } from "@gradio/icons";
import type { SelectData, LikeData } from "@gradio/utils";
import { MarkdownCode as Markdown } from "@gradio/markdown";
import { type FileData } from "@gradio/client";
Expand Down Expand Up @@ -95,6 +96,12 @@
div.scrollTo(0, div.scrollHeight);
}
};
let image_preview_source: string;
let image_preview_source_alt: string;
let is_image_preview_open = false;
let image_preview_close_button: HTMLButtonElement;
afterUpdate(() => {
if (autoscroll) {
scroll();
Expand All @@ -104,6 +111,16 @@
});
});
}
div.querySelectorAll("img").forEach((n) => {
n.addEventListener("click", (e) => {
const target = e.target as HTMLImageElement;
if (target) {
image_preview_source = target.src;
image_preview_source_alt = target.alt;
is_image_preview_open = true;
}
});
});
});
$: {
Expand Down Expand Up @@ -163,6 +180,21 @@
{#each value as message_pair, i}
{#each message_pair as message, j}
{#if message !== null}
{#if is_image_preview_open}
<div class="image-preview">
<img
src={image_preview_source}
alt={image_preview_source_alt}
/>
<button
bind:this={image_preview_close_button}
class="image-preview-close-button"
on:click={() => {
is_image_preview_open = false;
}}><Clear /></button
>
</div>
{/if}
<div class="message-row {layout} {j == 0 ? 'user-row' : 'bot-row'}">
{#if avatar_images[j] !== null}
<div class="avatar-container">
Expand Down Expand Up @@ -554,4 +586,45 @@
height: 100%;
color: var(--body-text-color);
}
/* Image preview */
.message :global(.preview) {
object-fit: contain;
width: 95%;
max-height: 93%;
}
.image-preview {
position: absolute;
z-index: 999;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.9);
}
.image-preview :global(img) {
width: 100%;
height: 100%;
object-fit: contain;
}
.image-preview :global(svg) {
stroke: white;
}
.image-preview-close-button {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 1.5em;
cursor: pointer;
height: 30px;
width: 30px;
padding: 3px;
background: var(--bg-color);
box-shadow: var(--shadow-drop);
border: 1px solid var(--button-secondary-border-color);
border-radius: var(--radius-lg);
}
</style>
1 change: 1 addition & 0 deletions js/multimodaltextbox/shared/MultimodalTextbox.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -353,6 +353,7 @@
border-radius: 50%;
width: 30px;
height: 30px;
bottom: 15px;
}
.upload-button:hover,
Expand Down

0 comments on commit 341844f

Please sign in to comment.