mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-01-24 10:54:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Change upload icon for MultimodalTextbox (#8236)

Browse Source 
* icon

* add changeset

* add changeset

* test fix

* format

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Dawood Khan 2024-05-09 23:32:28 -04:00 committed by GitHub
parent 0a6f0a7e02
commit bf909bd145
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 42 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.changeset/smooth-emus-cover.md Normal file
View File

@ -0,0 +1,7 @@
---
"@gradio/icons": patch
"@gradio/multimodaltextbox": patch
"gradio": patch
---
feat:Change upload icon for MultimodalTextbox

6
js/app/test/chatbot_multimodal.spec.ts
View File

@ -24,7 +24,7 @@ test("images uploaded by a user should be shown in the chat", async ({
page
}) => {
const fileChooserPromise = page.waitForEvent("filechooser");
await page.getByRole("button", { name: "+", exact: true }).click();
await page.getByTestId("upload-button").click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles("./test/files/cheetah1.jpg");
await page.getByTestId("textbox").click();
@ -46,7 +46,7 @@ test("audio uploaded by a user should be shown in the chatbot", async ({
page
}) => {
const fileChooserPromise = page.waitForEvent("filechooser");
await page.getByRole("button", { name: "+" }).click();
await page.getByTestId("upload-button").click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles("../../test/test_files/audio_sample.wav");
await page.getByTestId("textbox").click();
@ -67,7 +67,7 @@ test("videos uploaded by a user should be shown in the chatbot", async ({
page
}) => {
const fileChooserPromise = page.waitForEvent("filechooser");
await page.getByRole("button", { name: "+" }).click();
await page.getByTestId("upload-button").click();
const fileChooser = await fileChooserPromise;
await fileChooser.setFiles("../../test/test_files/video_sample.mp4");
await page.getByTestId("textbox").click();

2
js/app/test/upload_file_limit_test.spec.ts
View File

@ -79,7 +79,7 @@ test("gr.Model3D() triggers the gr.Error modal when an uploaded file exceeds max
test("gr.MultimodalTextBox() triggers the gr.Error modal when an uploaded file exceeds max_file_size ", async ({
page
}) => {
const locator = page.getByRole("button", { name: "+" });
const locator = page.getByTestId("upload-button").first();
const file_chooser = await get_file_selector(page, locator);
await file_chooser.setFiles(["./test/files/face.obj"]);
await error_modal_showed(page);

15
js/icons/src/Paperclip.svelte Normal file
View File

@ -0,0 +1,15 @@
<svg
fill="currentColor"
viewBox="0 0 1920 1920"
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="M1752.768 221.109C1532.646.986 1174.283.986 954.161 221.109l-838.588 838.588c-154.052 154.165-154.052 404.894 0 558.946 149.534 149.421 409.976 149.308 559.059 0l758.738-758.626c87.982-88.094 87.982-231.417 0-319.51-88.32-88.208-231.642-87.982-319.51 0l-638.796 638.908 79.85 79.849 638.795-638.908c43.934-43.821 115.539-43.934 159.812 0 43.934 44.047 43.934 115.877 0 159.812l-758.739 758.625c-110.23 110.118-289.355 110.005-399.36 0-110.118-110.117-110.005-289.242 0-399.247l838.588-838.588c175.963-175.962 462.382-176.188 638.909 0 176.075 176.188 176.075 462.833 0 638.908l-798.607 798.72 79.849 79.85 798.607-798.72c220.01-220.123 220.01-578.485 0-798.607"
fill-rule="evenodd"
></path>
</g></svg
>
Side by Side

After

Width:  |  Height:  |  Size: 977 B

1
js/icons/src/index.ts
View File

@ -32,6 +32,7 @@ export { default as Maximise } from "./Maximise.svelte";
export { default as Microphone } from "./Microphone.svelte";
export { default as Music } from "./Music.svelte";
export { default as Palette } from "./Palette.svelte";
export { default as Paperclip } from "./Paperclip.svelte";
export { default as Pause } from "./Pause.svelte";
export { default as Play } from "./Play.svelte";
export { default as Plot } from "./Plot.svelte";

22
js/multimodaltextbox/shared/MultimodalTextbox.svelte
View File

@ -10,7 +10,7 @@
import { Upload } from "@gradio/upload";
import { Image } from "@gradio/image/shared";
import type { FileData, Client } from "@gradio/client";
import { Clear, File, Music, Video, Send } from "@gradio/icons";
import { Clear, File, Music, Paperclip, Video, Send } from "@gradio/icons";
import type { SelectData } from "@gradio/utils";
export let value: { text: string; files: FileData[] } = {
@ -229,8 +229,10 @@
><Send /></button
>
{/if}
<button class:disabled class="plus-button" on:click={handle_upload_click}
>+</button
<button
data-testid="upload-button"
class="upload-button"
on:click={handle_upload_click}><Paperclip /></button
>
{#if value.files.length > 0 || uploading}
<div
@ -337,7 +339,7 @@
color: var(--input-placeholder-color);
}
.plus-button,
.upload-button,
.submit-button {
position: absolute;
background: var(--button-secondary-background-fill);
@ -353,12 +355,12 @@
bottom: 15px;
}
.plus-button:hover,
.upload-button:hover,
.submit-button:hover {
background: var(--button-secondary-background-fill-hover);
}
.plus-button:active,
.upload-button:active,
.submit-button:active {
box-shadow: var(--button-shadow-active);
}
@ -377,11 +379,17 @@
padding-top: 2px;
}
.plus-button {
.upload-button {
left: 10px;
margin-right: 5px;
}
.upload-button :global(svg) {
height: 23px;
width: 23px;
padding-left: 7px;
}
.loader {
display: flex;
justify-content: center;