From dc07a9f947de44b419d8384987a02dcf94977851 Mon Sep 17 00:00:00 2001 From: Abubakar Abid Date: Sat, 22 Jul 2023 03:20:29 +0300 Subject: [PATCH] Revert "Revert "Add download button for audio"" (#4993) * Revert "Revert "Add download button for audio (#4977)" (#4992)" This reverts commit ad99df4fdd571918e089ecac07056ee48557f020. * removed changelog updates * add changeset * credit leuryr --------- Co-authored-by: gradio-pr-bot --- .changeset/ready-wombats-occur.md | 7 ++++ gradio/components/audio.py | 6 ++++ js/app/src/components/Audio/Audio.svelte | 6 ++-- js/audio/src/StaticAudio.svelte | 46 +++++++++++++++--------- test/test_components.py | 2 ++ 5 files changed, 49 insertions(+), 18 deletions(-) create mode 100644 .changeset/ready-wombats-occur.md diff --git a/.changeset/ready-wombats-occur.md b/.changeset/ready-wombats-occur.md new file mode 100644 index 000000000000..a0d07a331ea2 --- /dev/null +++ b/.changeset/ready-wombats-occur.md @@ -0,0 +1,7 @@ +--- +"@gradio/app": minor +"@gradio/audio": minor +"gradio": minor +--- + +feat: Bringing back the "Add download button for audio" PR by [@leuryr](https://github.com/leuryr). diff --git a/gradio/components/audio.py b/gradio/components/audio.py index a8e2a74ee557..868a4837b355 100644 --- a/gradio/components/audio.py +++ b/gradio/components/audio.py @@ -67,6 +67,7 @@ def __init__( elem_classes: list[str] | str | None = None, format: Literal["wav", "mp3"] = "wav", autoplay: bool = False, + show_download_button=True, show_share_button: bool | None = None, **kwargs, ): @@ -88,6 +89,7 @@ def __init__( 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. format: The file format to save audio files. Either 'wav' or 'mp3'. wav files are lossless but will tend to be larger files. mp3 files tend to be smaller. Default is wav. Applies both when this component is used as an input (when `type` is "format") and when this component is used as an output. autoplay: Whether to automatically play the audio when the component is used as an output. Note: browsers will not autoplay audio files if the user has not interacted with the page yet. + show_download_button: If True, will show a download button in the corner of the component for saving audio. If False, icon does not appear. show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise. """ valid_sources = ["upload", "microphone"] @@ -109,6 +111,7 @@ def __init__( ) self.format = format self.autoplay = autoplay + self.show_download_button = show_download_button self.show_share_button = ( (utils.get_space() is not None) if show_share_button is None @@ -137,6 +140,7 @@ def get_config(self): "value": self.value, "streaming": self.streaming, "autoplay": self.autoplay, + "show_download_button": self.show_download_button, "show_share_button": self.show_share_button, **IOComponent.get_config(self), } @@ -159,6 +163,7 @@ def update( interactive: bool | None = None, visible: bool | None = None, autoplay: bool | None = None, + show_download_button: bool | None = None, show_share_button: bool | None = None, ): return { @@ -172,6 +177,7 @@ def update( "visible": visible, "value": value, "autoplay": autoplay, + "show_download_button": show_download_button, "show_share_button": show_share_button, "__type__": "update", } diff --git a/js/app/src/components/Audio/Audio.svelte b/js/app/src/components/Audio/Audio.svelte index 84ca71267312..54e85cd462da 100644 --- a/js/app/src/components/Audio/Audio.svelte +++ b/js/app/src/components/Audio/Audio.svelte @@ -34,12 +34,13 @@ export let pending: boolean; export let streaming: boolean; export let root_url: null | string; - export let container: boolean = true; + export let container = true; export let scale: number | null = null; export let min_width: number | undefined = undefined; export let loading_status: LoadingStatus; export let autoplay = false; - export let show_share_button: boolean = false; + export let show_download_button = true; + export let show_share_button = false; let _value: null | FileData; $: _value = normalise_file(value, root, root_url); @@ -105,6 +106,7 @@ import { createEventDispatcher, tick } from "svelte"; import { uploadToHuggingFace } from "@gradio/utils"; - import { BlockLabel, ShareButton } from "@gradio/atoms"; - import { Music } from "@gradio/icons"; + import { BlockLabel, ShareButton, IconButton } from "@gradio/atoms"; + import { Music, Download } from "@gradio/icons"; import { loaded } from "./utils"; @@ -20,7 +20,8 @@ export let name: string; export let show_label = true; export let autoplay: boolean; - export let show_share_button: boolean = false; + export let show_download_button = true; + export let show_share_button = false; const dispatch = createEventDispatcher<{ change: AudioData; @@ -43,18 +44,29 @@ -{#if show_share_button && value !== null} -
- { - if (!value) return ""; - let url = await uploadToHuggingFace(value.data, "url"); - return ``; - }} - {value} - /> +{#if value !== null} +
+ {#if show_download_button} + + + + {/if} + {#if show_share_button} + { + if (!value) return ""; + let url = await uploadToHuggingFace(value.data, "url"); + return ``; + }} + {value} + /> + {/if}
{/if} @@ -81,9 +93,11 @@ width: var(--size-full); height: var(--size-14); } - .icon-button { + .icon-buttons { + display: flex; position: absolute; top: 6px; right: 6px; + gap: var(--size-1); } diff --git a/test/test_components.py b/test/test_components.py index 5f62c5f5d2b5..b78a3ac36fc0 100644 --- a/test/test_components.py +++ b/test/test_components.py @@ -838,6 +838,7 @@ def test_component_functions(self): "autoplay": False, "source": "upload", "name": "audio", + "show_download_button": True, "show_share_button": False, "streaming": False, "show_label": True, @@ -876,6 +877,7 @@ def test_component_functions(self): assert audio_output.get_config() == { "autoplay": False, "name": "audio", + "show_download_button": True, "show_share_button": False, "streaming": False, "show_label": True,