mirror of
https://github.com/gradio-app/gradio.git
synced 2025-03-31 12:20:26 +08:00
Allows setting a height to gr.File and improves the UI of the component (#5221)
* file * file downlaod * add changeset * added story * lint * fix test * add changeset * margin * fixes * lint * modify * lint * add changeset * revert * revert * add changeset * Delete Chatbot.stories.svelte * revert * revert * add changeset * redesign * lint * fixes --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
This commit is contained in:
Abubakar Abid
GitHub
parent
ddac7e4d0f
commit
f344592aeb
6
.changeset/lovely-bikes-thank.md
Normal file
6
.changeset/lovely-bikes-thank.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"@gradio/file": minor
|
||||
"gradio": minor
|
||||
---
|
||||
|
||||
feat:Allows setting a height to `gr.File` and improves the UI of the component
|
||||
@ -55,6 +55,7 @@ class File(
|
||||
container: bool = True,
|
||||
scale: int | None = None,
|
||||
min_width: int = 160,
|
||||
height: int | float | None = None,
|
||||
interactive: bool | None = None,
|
||||
visible: bool = True,
|
||||
elem_id: str | None = None,
|
||||
@ -73,6 +74,7 @@ class File(
|
||||
container: If True, will place the component in a container - providing some extra padding around the border.
|
||||
scale: relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.
|
||||
min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
|
||||
height: The maximum height of the file component, in pixels. If more files are uploaded than can fit in the height, a scrollbar will appear.
|
||||
interactive: if True, will allow users to upload a file; if False, can only be used to display files. If not provided, this is inferred based on whether the component is used as an input or output.
|
||||
visible: If False, component will be hidden.
|
||||
elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
|
||||
@ -102,6 +104,7 @@ class File(
|
||||
"The `file_types` parameter is ignored when `file_count` is 'directory'."
|
||||
)
|
||||
self.type = type
|
||||
self.height = height
|
||||
self.select: EventListenerMethod
|
||||
"""
|
||||
Event listener for when the user selects file from list.
|
||||
@ -130,6 +133,7 @@ class File(
|
||||
"file_types": self.file_types,
|
||||
"value": self.value,
|
||||
"selectable": self.selectable,
|
||||
"height": self.height,
|
||||
**IOComponent.get_config(self),
|
||||
}
|
||||
|
||||
@ -141,6 +145,7 @@ class File(
|
||||
container: bool | None = None,
|
||||
scale: int | None = None,
|
||||
min_width: int | None = None,
|
||||
height: int | float | None = None,
|
||||
interactive: bool | None = None,
|
||||
visible: bool | None = None,
|
||||
):
|
||||
@ -150,6 +155,7 @@ class File(
|
||||
"container": container,
|
||||
"scale": scale,
|
||||
"min_width": min_width,
|
||||
"height": height,
|
||||
"interactive": interactive,
|
||||
"visible": visible,
|
||||
"value": value,
|
||||
|
||||
@ -48,7 +48,7 @@ class Gallery(IOComponent, GallerySerializable, Selectable):
|
||||
elem_classes: list[str] | str | None = None,
|
||||
columns: int | tuple | None = 2,
|
||||
rows: int | tuple | None = None,
|
||||
height: str | None = None,
|
||||
height: int | float | None = None,
|
||||
preview: bool | None = None,
|
||||
object_fit: Literal["contain", "cover", "fill", "none", "scale-down"]
|
||||
| None = None,
|
||||
@ -71,7 +71,7 @@ class Gallery(IOComponent, GallerySerializable, Selectable):
|
||||
elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
|
||||
columns: Represents the number of images that should be shown in one row, for each of the six standard screen sizes (<576px, <768px, <992px, <1200px, <1400px, >1400px). if fewer that 6 are given then the last will be used for all subsequent breakpoints
|
||||
rows: Represents the number of rows in the image grid, for each of the six standard screen sizes (<576px, <768px, <992px, <1200px, <1400px, >1400px). if fewer that 6 are given then the last will be used for all subsequent breakpoints
|
||||
height: Height of the gallery.
|
||||
height: The height of the gallery component, in pixels. If more images are displayed than can fit in the height, a scrollbar will appear.
|
||||
preview: If True, will display the Gallery in preview mode, which shows all of the images as thumbnails and allows the user to click on them to view them in full size.
|
||||
object_fit: CSS object-fit property for the thumbnail images in the gallery. Can be "contain", "cover", "fill", "none", or "scale-down".
|
||||
allow_preview: If True, images in the gallery will be enlarged when they are clicked. Default is True.
|
||||
@ -127,7 +127,7 @@ class Gallery(IOComponent, GallerySerializable, Selectable):
|
||||
visible: bool | None = None,
|
||||
columns: int | tuple | None = None,
|
||||
rows: int | tuple | None = None,
|
||||
height: str | None = None,
|
||||
height: int | float | None = None,
|
||||
preview: bool | None = None,
|
||||
object_fit: Literal["contain", "cover", "fill", "none", "scale-down"]
|
||||
| None = None,
|
||||
|
||||
45
js/file/File.stories.svelte
Normal file
45
js/file/File.stories.svelte
Normal file
@ -0,0 +1,45 @@
|
||||
<script>
|
||||
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
|
||||
import FilePreview from "./shared/FilePreview.svelte";
|
||||
</script>
|
||||
|
||||
<Meta
|
||||
title="Components/File"
|
||||
component={FilePreview}
|
||||
argTypes={{
|
||||
value: {
|
||||
control: "text",
|
||||
description: "The URL or filepath (or list of URLs or filepaths)",
|
||||
name: "value",
|
||||
value: []
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
||||
<Template let:args>
|
||||
<FilePreview {...args} />
|
||||
</Template>
|
||||
|
||||
<Story
|
||||
name="Default"
|
||||
args={{
|
||||
value: [
|
||||
{
|
||||
name: "groot.jpg",
|
||||
data: "https://i.ibb.co/6BgKdSj/groot.jpg",
|
||||
size: 10000
|
||||
}
|
||||
]
|
||||
}}
|
||||
/>
|
||||
<Story
|
||||
name="With height set to 80px"
|
||||
args={{
|
||||
value: Array(10).fill({
|
||||
name: "groot.jpg",
|
||||
data: "https://i.ibb.co/6BgKdSj/groot.jpg",
|
||||
size: 10000
|
||||
}),
|
||||
height: 80
|
||||
}}
|
||||
/>
|
||||
@ -31,6 +31,7 @@
|
||||
export let container = true;
|
||||
export let scale: number | null = null;
|
||||
export let min_width: number | undefined = undefined;
|
||||
export let height: number | undefined = undefined;
|
||||
</script>
|
||||
|
||||
{#if mode === "static"}
|
||||
@ -49,6 +50,7 @@
|
||||
{container}
|
||||
{scale}
|
||||
{min_width}
|
||||
{height}
|
||||
on:clear
|
||||
on:select
|
||||
on:change
|
||||
@ -73,6 +75,7 @@
|
||||
{container}
|
||||
{scale}
|
||||
{min_width}
|
||||
{height}
|
||||
on:clear
|
||||
on:select
|
||||
on:change
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
export let file_count = "single";
|
||||
export let file_types: string[] | null = null;
|
||||
export let selectable = false;
|
||||
export let height: number | undefined = undefined;
|
||||
|
||||
async function handle_upload({
|
||||
detail
|
||||
@ -64,7 +65,7 @@
|
||||
|
||||
{#if value}
|
||||
<ModifyUpload on:clear={handle_clear} absolute />
|
||||
<FilePreview on:select {selectable} {value} />
|
||||
<FilePreview on:select {selectable} {value} {height} />
|
||||
{:else}
|
||||
<Upload
|
||||
on:load={handle_upload}
|
||||
|
||||
@ -33,6 +33,7 @@
|
||||
export let container = true;
|
||||
export let scale: number | null = null;
|
||||
export let min_width: number | undefined = undefined;
|
||||
export let height: number | undefined = undefined;
|
||||
|
||||
const upload_files =
|
||||
getContext<typeof default_upload_files>("upload_files") ??
|
||||
@ -113,6 +114,8 @@
|
||||
{container}
|
||||
{scale}
|
||||
{min_width}
|
||||
{height}
|
||||
allow_overflow={false}
|
||||
>
|
||||
<StatusTracker
|
||||
{...loading_status}
|
||||
@ -128,6 +131,7 @@
|
||||
{file_count}
|
||||
{file_types}
|
||||
{selectable}
|
||||
{height}
|
||||
on:change={({ detail }) => (value = detail)}
|
||||
on:drag={({ detail }) => (dragging = detail)}
|
||||
on:clear
|
||||
|
||||
@ -9,9 +9,13 @@
|
||||
}>();
|
||||
export let value: FileData | FileData[];
|
||||
export let selectable = false;
|
||||
export let height: number | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<div class="file-preview-holder">
|
||||
<div
|
||||
class="file-preview-holder"
|
||||
style="max-height: {typeof height === undefined ? 'auto' : height + 'px'};"
|
||||
>
|
||||
<table class="file-preview">
|
||||
<tbody>
|
||||
{#each Array.isArray(value) ? value : [value] as file, i}
|
||||
@ -28,10 +32,6 @@
|
||||
{display_file_name(file)}
|
||||
</td>
|
||||
|
||||
<td>
|
||||
{display_file_size(file)}
|
||||
</td>
|
||||
|
||||
<td class="download">
|
||||
{#if file.data}
|
||||
<a
|
||||
@ -41,7 +41,7 @@
|
||||
? null
|
||||
: file.orig_name || file.name}
|
||||
>
|
||||
Download
|
||||
{@html display_file_size(file)} ⇣
|
||||
</a>
|
||||
{:else}
|
||||
Uploading...
|
||||
@ -64,11 +64,13 @@
|
||||
}
|
||||
.file-preview-holder {
|
||||
overflow-x: auto;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
.file-preview {
|
||||
width: var(--size-full);
|
||||
max-height: var(--size-60);
|
||||
overflow-y: auto;
|
||||
margin-top: var(--size-1);
|
||||
color: var(--body-text-color);
|
||||
}
|
||||
.file {
|
||||
@ -98,4 +100,12 @@
|
||||
.selectable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
tbody > tr:nth-child(even) {
|
||||
background: var(--block-background-fill);
|
||||
}
|
||||
|
||||
tbody > tr:nth-child(odd) {
|
||||
background: var(--table-odd-background-fill);
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -8,14 +8,22 @@ export const prettyBytes = (bytes: number): string => {
|
||||
i++;
|
||||
}
|
||||
let unit = units[i];
|
||||
return bytes.toFixed(1) + " " + unit;
|
||||
return bytes.toFixed(1) + " " + unit;
|
||||
};
|
||||
|
||||
export const display_file_name = (value: FileData): string => {
|
||||
var str: string;
|
||||
str = value.orig_name || value.name;
|
||||
if (str.length > 30) {
|
||||
return `${str.substr(0, 30)}...`;
|
||||
const max_length = 30;
|
||||
|
||||
if (str.length > max_length) {
|
||||
const truncated_name = str.substring(0, max_length);
|
||||
const file_extension_index = str.lastIndexOf(".");
|
||||
if (file_extension_index !== -1) {
|
||||
const file_extension = str.slice(file_extension_index);
|
||||
return `${truncated_name}..${file_extension}`;
|
||||
}
|
||||
return truncated_name;
|
||||
}
|
||||
return str;
|
||||
};
|
||||
|
||||
@ -8,6 +8,7 @@
|
||||
export let label: string;
|
||||
export let show_label = true;
|
||||
export let selectable = false;
|
||||
export let height: number | undefined = undefined;
|
||||
</script>
|
||||
|
||||
<BlockLabel
|
||||
@ -18,7 +19,7 @@
|
||||
/>
|
||||
|
||||
{#if value}
|
||||
<FilePreview {selectable} on:select {value} />
|
||||
<FilePreview {selectable} on:select {value} {height} />
|
||||
{:else}
|
||||
<Empty unpadded_box={true} size="large"><File /></Empty>
|
||||
{/if}
|
||||
|
||||
@ -25,6 +25,7 @@
|
||||
export let root: string;
|
||||
export let label: string;
|
||||
export let show_label: boolean;
|
||||
export let height: number | undefined = undefined;
|
||||
|
||||
export let root_url: null | string;
|
||||
export let selectable = false;
|
||||
@ -120,5 +121,5 @@
|
||||
: loading_status?.status || "complete"}
|
||||
/>
|
||||
|
||||
<File on:select {selectable} value={_value} {label} {show_label} />
|
||||
<File on:select {selectable} value={_value} {label} {show_label} {height} />
|
||||
</Block>
|
||||
|
||||
@ -1014,6 +1014,7 @@ class TestFile:
|
||||
"interactive": None,
|
||||
"root_url": None,
|
||||
"selectable": False,
|
||||
"height": None,
|
||||
}
|
||||
assert file_input.preprocess(None) is None
|
||||
x_file["is_example"] = True
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user