diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e6784bfe161..07796da6d2fc 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,7 +4,7 @@ No changes to highlight. ## New Features: -No changes to highlight. +- Add `show_download_button` param to allow the download button in static Image components to be hidden by [@hannahblair](https://github.com/hannahblair) in [PR 4959](https://github.com/gradio-app/gradio/pull/4959) ## Bug Fixes: diff --git a/gradio/components/image.py b/gradio/components/image.py index 8d2a65041648..8862ea3ee377 100644 --- a/gradio/components/image.py +++ b/gradio/components/image.py @@ -70,6 +70,7 @@ def __init__( label: str | None = None, every: float | None = None, show_label: bool | None = None, + show_download_button: bool = True, container: bool = True, scale: int | None = None, min_width: int = 160, @@ -97,6 +98,7 @@ def __init__( label: component name in interface. every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute. show_label: if True, will display label. + show_download_button: If True, will display button to download image. 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. @@ -133,6 +135,7 @@ def __init__( self.tool = tool self.invert_colors = invert_colors self.streaming = streaming + self.show_download_button = show_download_button if streaming and source != "webcam": raise ValueError("Image streaming only available if source is 'webcam'.") self.select: EventListenerMethod @@ -177,6 +180,7 @@ def get_config(self): "brush_radius": self.brush_radius, "selectable": self.selectable, "show_share_button": self.show_share_button, + "show_download_button": self.show_download_button, **IOComponent.get_config(self), } @@ -187,6 +191,7 @@ def update( width: int | None = None, label: str | None = None, show_label: bool | None = None, + show_download_button: bool | None = None, container: bool | None = None, scale: int | None = None, min_width: int | None = None, @@ -200,6 +205,7 @@ def update( "width": width, "label": label, "show_label": show_label, + "show_download_button": show_download_button, "container": container, "scale": scale, "min_width": min_width, diff --git a/gradio/test_data/blocks_configs.py b/gradio/test_data/blocks_configs.py index 7ef01500694b..a2796aaf918a 100644 --- a/gradio/test_data/blocks_configs.py +++ b/gradio/test_data/blocks_configs.py @@ -64,6 +64,7 @@ "min_width": 160, "name": "image", "show_share_button": False, + "show_download_button": True, "visible": True, }, "serializer": "ImgSerializable", @@ -136,6 +137,7 @@ "min_width": 160, "name": "image", "show_share_button": False, + "show_download_button": True, "visible": True, }, "serializer": "ImgSerializable", @@ -382,6 +384,7 @@ "min_width": 160, "name": "image", "show_share_button": False, + "show_download_button": True, "visible": True, }, "serializer": "ImgSerializable", @@ -454,6 +457,7 @@ "min_width": 160, "name": "image", "show_share_button": False, + "show_download_button": True, "visible": True, }, "serializer": "ImgSerializable", diff --git a/js/app/src/components/Image/Image.svelte b/js/app/src/components/Image/Image.svelte index 375c2141ce2a..47b1efe8b09b 100644 --- a/js/app/src/components/Image/Image.svelte +++ b/js/app/src/components/Image/Image.svelte @@ -9,14 +9,15 @@ import type { LoadingStatus } from "../StatusTracker/types"; import UploadText from "../UploadText.svelte"; - export let elem_id: string = ""; - export let elem_classes: Array = []; - export let visible: boolean = true; + export let elem_id = ""; + export let elem_classes: string[] = []; + export let visible = true; export let value: null | string = null; export let source: "canvas" | "webcam" | "upload" = "upload"; export let tool: "editor" | "select" | "sketch" | "color-sketch" = "editor"; export let label: string; export let show_label: boolean; + export let show_download_button: boolean; export let streaming: boolean; export let pending: boolean; export let height: number | undefined; @@ -24,13 +25,13 @@ export let mirror_webcam: boolean; export let shape: [number, number]; export let brush_radius: number; - export let selectable: boolean = false; - export let container: boolean = true; + export let selectable = false; + export let container = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let loading_status: LoadingStatus; export let mode: "static" | "dynamic"; - export let show_share_button: boolean = false; + export let show_share_button = false; const dispatch = createEventDispatcher<{ change: undefined; @@ -70,6 +71,7 @@ {value} {label} {show_label} + {show_download_button} {selectable} {show_share_button} /> diff --git a/js/image/src/Image.stories.svelte b/js/image/src/Image.stories.svelte new file mode 100644 index 000000000000..0e92a0a40e6f --- /dev/null +++ b/js/image/src/Image.stories.svelte @@ -0,0 +1,50 @@ + + + + + + + + + + + + diff --git a/js/image/src/StaticImage.svelte b/js/image/src/StaticImage.svelte index 0de46094e72b..18212bcb947c 100644 --- a/js/image/src/StaticImage.svelte +++ b/js/image/src/StaticImage.svelte @@ -3,7 +3,7 @@ import type { SelectData } from "@gradio/utils"; import { uploadToHuggingFace } from "@gradio/utils"; import { BlockLabel, Empty, IconButton, ShareButton } from "@gradio/atoms"; - import { Download, Community } from "@gradio/icons"; + import { Download } from "@gradio/icons"; import { get_coordinates_of_clicked_image } from "./utils"; import { Image } from "@gradio/icons"; @@ -11,8 +11,9 @@ export let value: null | string; export let label: string | undefined = undefined; export let show_label: boolean; - export let selectable: boolean = false; - export let show_share_button: boolean = false; + export let show_download_button = true; + export let selectable = false; + export let show_share_button = false; const dispatch = createEventDispatcher<{ change: string; @@ -21,7 +22,7 @@ $: value && dispatch("change", value); - const handle_click = (evt: MouseEvent) => { + const handle_click = (evt: MouseEvent): void => { let coordinates = get_coordinates_of_clicked_image(evt); if (coordinates) { dispatch("select", { index: coordinates, value: null }); @@ -34,6 +35,7 @@ {:else}
+ {#if show_download_button} + {/if} {#if show_share_button}