Click to preview images in chatbot (#8377)

* 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]>
gradio-app · Jun 3, 2024 · 341844f · 341844f
1 parent 83bdf5c
commit 341844f
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 0 deletions.
diff --git a/.changeset/dirty-wings-double.md b/.changeset/dirty-wings-double.md
@@ -0,0 +1,7 @@
+---
+"@gradio/chatbot": patch
+"@gradio/multimodaltextbox": patch
+"gradio": patch
+---
+
+feat:Click to preview images in chatbot 
diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte
@@ -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";
@@ -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();
@@ -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;
+				}
+			});
+		});
 	});
 
 	$: {
@@ -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">
@@ -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>
diff --git a/js/multimodaltextbox/shared/MultimodalTextbox.svelte b/js/multimodaltextbox/shared/MultimodalTextbox.svelte
@@ -353,6 +353,7 @@
 		border-radius: 50%;
 		width: 30px;
 		height: 30px;
+		bottom: 15px;
 	}
 
 	.upload-button:hover,