From b931817ceaddda48bb10932876a1cc4f847ff2fa Mon Sep 17 00:00:00 2001 From: Hannah Date: Tue, 3 Dec 2024 16:52:31 +0000 Subject: [PATCH 01/21] change example image limit to 4 --- js/chatbot/shared/ChatBot.svelte | 48 ++++++++++++++++++++++++++------ 1 file changed, 39 insertions(+), 9 deletions(-) diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte index d966283e9b569..fdb1bea56e052 100644 --- a/js/chatbot/shared/ChatBot.svelte +++ b/js/chatbot/shared/ChatBot.svelte @@ -405,9 +405,24 @@ {example.text} {/if} {#if example.files !== undefined && example.files.length > 1} - {example.files.length} Files +
+ {#each example.files.slice(0, 4) as file, i} + {#if file.mime_type?.includes("image")} +
+ example-image + {#if i === 3 && example.files.length > 4} +
+ +{example.files.length - 4} +
+ {/if} +
+ {/if} + {/each} +
{:else if example.files !== undefined && example.files[0] !== undefined && example.files[0].mime_type?.includes("image")}
Date: Tue, 3 Dec 2024 16:59:52 +0000 Subject: [PATCH 02/21] add changeset --- .changeset/legal-aliens-burn.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/legal-aliens-burn.md diff --git a/.changeset/legal-aliens-burn.md b/.changeset/legal-aliens-burn.md new file mode 100644 index 0000000000000..e2c391c730c8e --- /dev/null +++ b/.changeset/legal-aliens-burn.md @@ -0,0 +1,6 @@ +--- +"@gradio/chatbot": minor +"gradio": minor +--- + +feat:Allow Chatbot examples to show more than one image From 44bf05e80596932ba510faab156ffcb8cd433a06 Mon Sep 17 00:00:00 2001 From: Hannah Date: Wed, 4 Dec 2024 20:46:10 +0000 Subject: [PATCH 03/21] refactor examples --- js/chatbot/shared/ChatBot.svelte | 175 ++------------------- js/chatbot/shared/Examples.svelte | 246 ++++++++++++++++++++++++++++++ 2 files changed, 255 insertions(+), 166 deletions(-) create mode 100644 js/chatbot/shared/Examples.svelte diff --git a/js/chatbot/shared/ChatBot.svelte b/js/chatbot/shared/ChatBot.svelte index fdb1bea56e052..81b0af6888c43 100644 --- a/js/chatbot/shared/ChatBot.svelte +++ b/js/chatbot/shared/ChatBot.svelte @@ -41,6 +41,8 @@ import { ShareError } from "@gradio/utils"; import { Gradio } from "@gradio/utils"; + import Examples from "./Examples.svelte"; + export let value: NormalisedMessage[] | null = []; let old_value: NormalisedMessage[] | null = null; @@ -377,70 +379,13 @@ {/if}
{:else} -
- {#if placeholder !== null} -
- -
- {/if} - {#if examples !== null} -
- {#each examples as example, i} - - {/each} -
- {/if} -
+ dispatch("example_select", e.detail)} + /> {/if} @@ -456,108 +401,6 @@ {/if} From afbb7f298e7348ff0f586247a5660adb78f907ab Mon Sep 17 00:00:00 2001 From: Hannah Date: Thu, 5 Dec 2024 00:28:32 +0000 Subject: [PATCH 04/21] redesign examples --- js/chatbot/shared/Examples.svelte | 162 +++++++++++++++++++----------- 1 file changed, 104 insertions(+), 58 deletions(-) diff --git a/js/chatbot/shared/Examples.svelte b/js/chatbot/shared/Examples.svelte index 5a549503d5097..59620e54280ba 100644 --- a/js/chatbot/shared/Examples.svelte +++ b/js/chatbot/shared/Examples.svelte @@ -5,6 +5,7 @@ import type { ExampleMessage } from "../types"; import { createEventDispatcher } from "svelte"; import type { SelectData } from "@gradio/utils"; + import type { FileData } from "@gradio/client"; export let examples: ExampleMessage[] | null = null; export let placeholder: string | null = null; @@ -19,12 +20,22 @@ example_select: SelectData; }>(); - function handle_example_select(i: number, example: ExampleMessage): void { + function handle_example_select( + i: number, + example: ExampleMessage | string + ): void { + const example_obj = + typeof example === "string" ? { text: example } : example; dispatch("example_select", { index: i, - value: { text: example.text, files: example.files } + value: { text: example_obj.text, files: example_obj.files } }); } + + function get_file_icons(files: FileData[] | undefined): FileData[] { + if (!files) return []; + return files.slice(0, 5).filter((f) => !f.mime_type?.includes("image")); + }
@@ -38,60 +49,81 @@ {#each examples as example, i} @@ -141,6 +173,7 @@ width: 100%; gap: var(--spacing-sm); border: var(--block-border-width) solid var(--block-border-color); + transform: translateY(0px); } .example:hover { @@ -158,9 +191,27 @@ .example-text-content { margin-top: auto; - display: flex; - flex-direction: column; - gap: var(--spacing-sm); + text-align: left; + } + + .example-text { + font-size: var(--text-md); + text-align: left; + overflow: hidden; + text-overflow: ellipsis; + } + + .cascading-icons { + position: relative; + height: var(--size-8); + margin-bottom: var(--spacing-lg); + } + + .cascading-icons .example-icon { + position: absolute; + z-index: calc(3 - var(--i)); + border: 1px solid var(--border-color-primary); + transform: translateX(calc(var(--i) * 1.25rem)); } .example-icon { @@ -169,9 +220,10 @@ display: flex; align-items: center; justify-content: center; - background: var(--background-fill-primary); border-radius: var(--radius-lg); - margin-bottom: var(--spacing-lg); + margin-bottom: var(--spacing-xxl); + border: var(--block-border-width) solid var(--block-border-color); + background-color: var(--block-background-fill); } .example-icon :global(svg) { @@ -187,21 +239,6 @@ line-height: 1; } - .example-text, - .example-display-text, - .example-file { - font-size: var(--text-md); - width: 100%; - text-align: left; - overflow: hidden; - text-overflow: ellipsis; - } - - .example-file { - font-size: var(--text-sm); - color: var(--color-text-secondary); - } - .example-image-container { width: var(--size-8); height: var(--size-8); @@ -219,15 +256,11 @@ .example-images-grid { display: grid; - grid-template-columns: repeat(2, 1fr); + grid-template-columns: repeat(4, 1fr); gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); } - .example-images-grid .example-image-container { - margin-bottom: 0; - } - .image-overlay { position: absolute; top: 0; @@ -243,4 +276,17 @@ font-weight: var(--weight-semibold); border-radius: var(--radius-lg); } + + .file-overlay { + position: absolute; + inset: 0; + background: rgba(0, 0, 0, 0.6); + color: white; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--text-sm); + font-weight: var(--weight-semibold); + border-radius: var(--radius-lg); + } From 64140ec851ff503402c6938bd00f319a388daeec Mon Sep 17 00:00:00 2001 From: Hannah Date: Thu, 5 Dec 2024 00:47:24 +0000 Subject: [PATCH 05/21] aria improvements --- js/chatbot/shared/Examples.svelte | 39 ++++++++++++++++++++++--------- 1 file changed, 28 insertions(+), 11 deletions(-) diff --git a/js/chatbot/shared/Examples.svelte b/js/chatbot/shared/Examples.svelte index 59620e54280ba..0ff9933e96adb 100644 --- a/js/chatbot/shared/Examples.svelte +++ b/js/chatbot/shared/Examples.svelte @@ -38,14 +38,14 @@ } -
+