Skip to content

Commit

Permalink
Implement left and right click in Gallery component and show implic…
Browse files Browse the repository at this point in the history 
…it images in `Gallery` grid (#4995)

* tweak responsive behaviour in gallery

* test

* add function to move left + right on click

* add changeset

* fix ts error

* Delete soft-eyes-repeat.md

* add changeset

* add gallery story

* change y overflow to scroll

---------

Co-authored-by: pngwn <hello@pngwn.io>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
  • Loading branch information
@hannahblair @pngwn
@github-actions @gradio-pr-bot
4 people committed Jul 25, 2023
1 parent 41c8307 commit 3f8c210
Show file tree
Hide file tree
Showing 4 changed files with 80 additions and 101 deletions.
7 changes: 7 additions & 0 deletions .changeset/curly-crabs-sniff.md
View file
@@ -0,0 +1,7 @@
---
"@gradio/app": minor
"@gradio/gallery": minor
"gradio": minor
---

feat:Implement left and right click in `Gallery` component and show implicit images in `Gallery` grid
66 changes: 42 additions & 24 deletions js/app/src/components/Gallery/Gallery.stories.svelte
View file
Expand Up @@ -11,74 +11,74 @@
control: "text",
description: "The gallery label",
name: "label",
value: "Gradio Button"
value: "Gradio Button",
},
show_label: {
options: [true, false],
description: "Whether to show the label",
control: { type: "boolean" },
defaultValue: true
defaultValue: true,
},
grid_cols: {
options: [1, 2, 3, 4],
description: "The number of colums to show in grid",
control: { type: "select" },
defaultValue: 2
defaultValue: 2,
},
grid_rows: {
options: [1, 2, 3, 4],
description: "The number of rows to show in grid",
control: { type: "select" },
defaultValue: 2
defaultValue: 2,
},
height: {
options: ["auto", 500, 600],
description: "The height of the grid",
control: { type: "select" },
defaultValue: "auto"
defaultValue: "auto",
},
preview: {
options: [true, false],
description: "Whether to start the gallery in preview mode",
control: { type: "boolean" },
defaultValue: true
defaultValue: true,
},
allow_preview: {
options: [true, false],
description: "Whether to allow a preview mode in the gallery",
control: { type: "boolean" },
defaultValue: true
defaultValue: true,
},
object_fit: {
options: ["contain", "cover", "fill", "none", "scale-down"],
description: "How to display each indivial image in the grid",
control: { type: "select" },
defaultValue: "contain"
defaultValue: "contain",
},
show_share_button: {
options: [true, false],
description: "Whether to show the share button in the gallery",
control: { type: "boolean" },
defaultValue: false
}
defaultValue: false,
},
}}
/>

<Template let:args>
<Gallery
{...args}
value={[
[
"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah_running.avif",
"A fast cheetah"
"A fast cheetah",
],
"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah3.webp",
"https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
"https://gradio-builds.s3.amazonaws.com/demo-files/main-qimg-0bbf31c18a22178cb7a8dd53640a3d05-lq.jpeg",
"https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg"
"https://gradio-builds.s3.amazonaws.com/demo-files/TheCheethcat.jpg",
]}
{...args}
/>
</Template>

Expand All @@ -96,85 +96,103 @@
label: "My Cheetah Gallery",
show_label: true,
grid_rows: 3,
grid_cols: 3
grid_cols: 3,
}}
/>
<Story
name="Gallery with grid_cols=4"
args={{
label: "My Cheetah Gallery",
show_label: true,
grid_cols: 4
grid_cols: 4,
}}
/>
<Story
name="Gallery with height=600"
args={{
label: "My Cheetah Gallery",
height: 600
height: 600,
}}
/>
<Story
name="Gallery with allow_preview=false"
args={{
label: "My Cheetah Gallery",
show_label: true,
allow_preview: false
allow_preview: false,
}}
/>
<Story
name="Gallery with preview"
args={{
label: "My Cheetah Gallery",
show_label: true,
preview: true
preview: true,
}}
/>
<Story
name="Gallery with object_fit=scale-down"
args={{
label: "My Cheetah Gallery",
show_label: true,
object_fit: "scale-down"
object_fit: "scale-down",
}}
/>
<Story
name="Gallery with object_fit=contain"
args={{
label: "My Cheetah Gallery",
show_label: true,
object_fit: "contain"
object_fit: "contain",
}}
/>
<Story
name="Gallery with object_fit=cover"
args={{
label: "My Cheetah Gallery",
show_label: true,
object_fit: "cover"
object_fit: "cover",
}}
/>
<Story
name="Gallery with object_fit=none"
args={{
label: "My Cheetah Gallery",
show_label: true,
object_fit: "none"
object_fit: "none",
}}
/>
<Story
name="Gallery with object_fit=fill"
args={{
label: "My Cheetah Gallery",
show_label: true,
object_fit: "fill"
object_fit: "fill",
}}
/>
<Story
name="Gallery with share button"
args={{
label: "My Cheetah Gallery",
show_label: true,
show_share_button: true
show_share_button: true,
}}
/>

<Story
name="Gallery with overflow of images"
args={{
label: "My Cheetah Gallery",
show_label: true,
grid_rows: 2,
grid_cols: 2,
height: 400,
value: [
"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-003.jpg",
"https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
"https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
"https://gradio-builds.s3.amazonaws.com/demo-files/cheetah-002.jpg",
],
}}
/>
16 changes: 8 additions & 8 deletions js/app/src/components/Gallery/Gallery.svelte
View file
Expand Up @@ -10,22 +10,22 @@
export let label: string;
export let root: string;
export let root_url: null | string;
export let elem_id: string = "";
export let elem_classes: Array<string> = [];
export let visible: boolean = true;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: (FileData | string | [FileData | string, string])[] | null =
null;
export let container: boolean = true;
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let grid_cols: number | Array<number> | undefined = [2];
export let grid_rows: number | Array<number> | undefined = undefined;
export let grid_cols: number | number[] | undefined = [2];
export let grid_rows: number | number[] | undefined = undefined;
export let height: number | "auto" = "auto";
export let preview: boolean;
export let allow_preview: boolean = true;
export let allow_preview = true;
export let object_fit: "contain" | "cover" | "fill" | "none" | "scale-down" =
"cover";
export let show_share_button: boolean = false;
export let show_share_button = false;
</script>

<Block
Expand Down

1 comment on commit 3f8c210

@vercel
Copy link

@vercel vercel bot commented on 3f8c210 Jul 25, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

gradio – ./

gradio-two.vercel.app
gradio-git-main-hugging-face.vercel.app
gradio-hugging-face.vercel.app
gradio.app
www.gradio.app

Please sign in to comment.