Multimodal Textbox Loading + other fixes (#7848)

* submit button icon * loader * add changeset * pr fix --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Mar 27, 2024 · 8d7b3ca · 8d7b3ca
1 parent e3b1236
commit 8d7b3ca
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 9 deletions.
diff --git a/.changeset/sixty-paths-push.md b/.changeset/sixty-paths-push.md
@@ -0,0 +1,8 @@
+---
+"@gradio/icons": patch
+"@gradio/multimodaltextbox": patch
+"@gradio/upload": patch
+"gradio": patch
+---
+
+fix:Multimodal Textbox Loading + other fixes
diff --git a/gradio/components/multimodal_textbox.py b/gradio/components/multimodal_textbox.py
@@ -74,7 +74,7 @@ def __init__(
         render: bool = True,
         text_align: Literal["left", "right"] | None = None,
         rtl: bool = False,
-        submit_btn: str | Literal[False] = "⌲",
+        submit_btn: str | Literal[False] | None = None,
     ):
         """
         Parameters:

diff --git a/js/icons/src/Send.svelte b/js/icons/src/Send.svelte
@@ -0,0 +1,17 @@
+<svg
+	viewBox="0 -2 24 24"
+	width="100%"
+	height="100%"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg"
+	><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g
+		id="SVGRepo_tracerCarrier"
+		stroke-linecap="round"
+		stroke-linejoin="round"
+	></g><g id="SVGRepo_iconCarrier">
+		<path
+			d="M19.1168 12.1484C19.474 12.3581 19.9336 12.2384 20.1432 11.8811C20.3528 11.5238 20.2331 11.0643 19.8758 10.8547L19.1168 12.1484ZM6.94331 4.13656L6.55624 4.77902L6.56378 4.78344L6.94331 4.13656ZM5.92408 4.1598L5.50816 3.5357L5.50816 3.5357L5.92408 4.1598ZM5.51031 5.09156L4.76841 5.20151C4.77575 5.25101 4.78802 5.29965 4.80505 5.34671L5.51031 5.09156ZM7.12405 11.7567C7.26496 12.1462 7.69495 12.3477 8.08446 12.2068C8.47397 12.0659 8.67549 11.6359 8.53458 11.2464L7.12405 11.7567ZM19.8758 12.1484C20.2331 11.9388 20.3528 11.4793 20.1432 11.122C19.9336 10.7648 19.474 10.6451 19.1168 10.8547L19.8758 12.1484ZM6.94331 18.8666L6.56375 18.2196L6.55627 18.2241L6.94331 18.8666ZM5.92408 18.8433L5.50815 19.4674H5.50815L5.92408 18.8433ZM5.51031 17.9116L4.80505 17.6564C4.78802 17.7035 4.77575 17.7521 4.76841 17.8016L5.51031 17.9116ZM8.53458 11.7567C8.67549 11.3672 8.47397 10.9372 8.08446 10.7963C7.69495 10.6554 7.26496 10.8569 7.12405 11.2464L8.53458 11.7567ZM19.4963 12.2516C19.9105 12.2516 20.2463 11.9158 20.2463 11.5016C20.2463 11.0873 19.9105 10.7516 19.4963 10.7516V12.2516ZM7.82931 10.7516C7.4151 10.7516 7.07931 11.0873 7.07931 11.5016C7.07931 11.9158 7.4151 12.2516 7.82931 12.2516V10.7516ZM19.8758 10.8547L7.32284 3.48968L6.56378 4.78344L19.1168 12.1484L19.8758 10.8547ZM7.33035 3.49414C6.76609 3.15419 6.05633 3.17038 5.50816 3.5357L6.34 4.78391C6.40506 4.74055 6.4893 4.73863 6.55627 4.77898L7.33035 3.49414ZM5.50816 3.5357C4.95998 3.90102 4.67184 4.54987 4.76841 5.20151L6.25221 4.98161C6.24075 4.90427 6.27494 4.82727 6.34 4.78391L5.50816 3.5357ZM4.80505 5.34671L7.12405 11.7567L8.53458 11.2464L6.21558 4.83641L4.80505 5.34671ZM19.1168 10.8547L6.56378 18.2197L7.32284 19.5134L19.8758 12.1484L19.1168 10.8547ZM6.55627 18.2241C6.4893 18.2645 6.40506 18.2626 6.34 18.2192L5.50815 19.4674C6.05633 19.8327 6.76609 19.8489 7.33035 19.509L6.55627 18.2241ZM6.34 18.2192C6.27494 18.1759 6.24075 18.0988 6.25221 18.0215L4.76841 17.8016C4.67184 18.4532 4.95998 19.1021 5.50815 19.4674L6.34 18.2192ZM6.21558 18.1667L8.53458 11.7567L7.12405 11.2464L4.80505 17.6564L6.21558 18.1667ZM19.4963 10.7516H7.82931V12.2516H19.4963V10.7516Z"
+			fill="currentColor"
+		></path>
+	</g></svg
+>
diff --git a/js/icons/src/index.ts b/js/icons/src/index.ts
@@ -37,6 +37,7 @@ export { default as Plot } from "./Plot.svelte";
 export { default as Redo } from "./Redo.svelte";
 export { default as Remove } from "./Remove.svelte";
 export { default as Rotate } from "./Rotate.svelte";
+export { default as Send } from "./Send.svelte";
 export { default as Settings } from "./Settings.svelte";
 export { default as Sketch } from "./Sketch.svelte";
 export { default as Square } from "./Square.svelte";

diff --git a/js/multimodaltextbox/Index.svelte b/js/multimodaltextbox/Index.svelte
@@ -38,7 +38,7 @@
 	export let container = true;
 	export let scale: number | null = null;
 	export let min_width: number | undefined = undefined;
-	export let submit_btn = "⌲";
+	export let submit_btn: string | null = null;
 	export let loading_status: LoadingStatus | undefined = undefined;
 	export let value_is_output = false;
 	export let rtl = false;

diff --git a/js/multimodaltextbox/shared/MultimodalTextbox.svelte b/js/multimodaltextbox/shared/MultimodalTextbox.svelte
@@ -9,8 +9,8 @@
 	import { BlockTitle } from "@gradio/atoms";
 	import { Upload } from "@gradio/upload";
 	import { Image } from "@gradio/image/shared";
-	import type { FileData } from "@gradio/client";
-	import { Clear, File, Music, Video } from "@gradio/icons";
+	import type { FileData, upload } from "@gradio/client";
+	import { Clear, File, Music, Video, Send } from "@gradio/icons";
 	import type { SelectData } from "@gradio/utils";
 
 	export let value: { text: string; files: FileData[] } = {
@@ -27,7 +27,7 @@
 	export let show_label = true;
 	export let container = true;
 	export let max_lines: number;
-	export let submit_btn = "⌲";
+	export let submit_btn: string | null = null;
 	export let rtl = false;
 	export let autofocus = false;
 	export let text_align: "left" | "right" | undefined = undefined;
@@ -40,6 +40,7 @@
 	let previous_scroll_top = 0;
 	let user_has_scrolled_up = false;
 	let dragging = false;
+	let uploading = false;
 	let oldValue = value.text;
 	$: dispatch("drag", dragging);
 
@@ -193,22 +194,29 @@
 			filetype={accept_file_types}
 			{root}
 			bind:dragging
+			bind:uploading
 			disable_click={true}
 			bind:hidden_upload
 		>
-			{#if submit_btn}
+			{#if submit_btn !== null}
 				<button class:disabled class="submit-button" on:click={handle_submit}
 					>{submit_btn}</button
 				>
+			{:else}
+				<button class:disabled class="submit-button" on:click={handle_submit}
+					><Send /></button
+				>
 			{/if}
 			<button class:disabled class="plus-button" on:click={handle_upload_click}
 				>+</button
 			>
-			{#if value.files.length > 0}
+			{#if value.files.length > 0 || uploading}
 				<div
 					class="thumbnails scroll-hide"
 					data-testid="container_el"
-					style="display: {value.files.length > 0 ? 'flex' : 'none'};"
+					style="display: {value.files.length > 0 || uploading
+						? 'flex'
+						: 'none'};"
 				>
 					{#each value.files as file, index}
 						<button class="thumbnail-item thumbnail-small">
@@ -235,6 +243,9 @@
 							{/if}
 						</button>
 					{/each}
+					{#if uploading}
+						<div class="loader"></div>
+					{/if}
 				</div>
 			{/if}
 			<textarea
@@ -288,6 +299,7 @@
 		margin-bottom: 0px;
 		margin-left: 30px;
 		padding-top: 12px;
+		resize: none;
 	}
 
 	textarea:disabled {
@@ -335,11 +347,41 @@
 		padding-left: 2px;
 	}
 
+	.submit-button :global(svg) {
+		height: 23px;
+		width: 23px;
+		padding-left: 4px;
+		padding-top: 2px;
+	}
+
 	.plus-button {
 		left: 10px;
 		margin-right: 5px;
 	}
 
+	.loader {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		--ring-color: transparent;
+		position: relative;
+		border: 5px solid #f3f3f3;
+		border-top: 5px solid var(--color-accent);
+		border-radius: 50%;
+		width: 25px;
+		height: 25px;
+		animation: spin 2s linear infinite;
+	}
+
+	@keyframes spin {
+		0% {
+			transform: rotate(0deg);
+		}
+		100% {
+			transform: rotate(360deg);
+		}
+	}
+
 	.thumbnails :global(img) {
 		width: var(--size-full);
 		height: var(--size-full);

diff --git a/js/upload/src/Upload.svelte b/js/upload/src/Upload.svelte
@@ -185,7 +185,7 @@
 	>
 		<slot />
 	</button>
-{:else if uploading}
+{:else if uploading && !hidden_upload}
 	{#if !hidden}
 		<UploadProgress {root} {upload_id} files={file_data} />
 	{/if}