From 144df459a3b7895e524defcfc4c03fbb8b083aca Mon Sep 17 00:00:00 2001 From: Hannah Date: Wed, 9 Aug 2023 22:38:07 +0200 Subject: [PATCH] Add `show_edit_button` param to `gr.Audio` (#5149) * add show_edit_button param * add changeset * formatting --------- Co-authored-by: gradio-pr-bot --- .changeset/true-dots-invent.md | 6 ++++++ gradio/components/audio.py | 6 ++++++ js/audio/index.svelte | 2 ++ js/audio/interactive/Audio.svelte | 13 +++++++------ js/audio/interactive/InteractiveAudio.svelte | 2 ++ js/audio/static/AudioPlayer.svelte | 2 +- test/test_components.py | 2 ++ 7 files changed, 26 insertions(+), 7 deletions(-) create mode 100644 .changeset/true-dots-invent.md diff --git a/.changeset/true-dots-invent.md b/.changeset/true-dots-invent.md new file mode 100644 index 000000000000..0af6d2bb04d2 --- /dev/null +++ b/.changeset/true-dots-invent.md @@ -0,0 +1,6 @@ +--- +"@gradio/audio": minor +"gradio": minor +--- + +feat:Add `show_edit_button` param to `gr.Audio` diff --git a/gradio/components/audio.py b/gradio/components/audio.py index 26d5dd9f8692..23085a1dfa72 100644 --- a/gradio/components/audio.py +++ b/gradio/components/audio.py @@ -72,6 +72,7 @@ def __init__( autoplay: bool = False, show_download_button=True, show_share_button: bool | None = None, + show_edit_button: bool | None = True, **kwargs, ): """ @@ -94,6 +95,7 @@ def __init__( 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. + show_edit_button: If True, will show an edit icon in the corner of the component that allows user to edit the audio. If False, icon does not appear. Default is True. """ valid_sources = ["upload", "microphone"] source = source if source else ("microphone" if streaming else "upload") @@ -121,6 +123,7 @@ def __init__( if show_share_button is None else show_share_button ) + self.show_edit_button = show_edit_button IOComponent.__init__( self, label=label, @@ -146,6 +149,7 @@ def get_config(self): "autoplay": self.autoplay, "show_download_button": self.show_download_button, "show_share_button": self.show_share_button, + "show_edit_button": self.show_edit_button, **IOComponent.get_config(self), } @@ -169,6 +173,7 @@ def update( autoplay: bool | None = None, show_download_button: bool | None = None, show_share_button: bool | None = None, + show_edit_button: bool | None = None, ): return { "source": source, @@ -183,6 +188,7 @@ def update( "autoplay": autoplay, "show_download_button": show_download_button, "show_share_button": show_share_button, + "show_edit_button": show_edit_button, "__type__": "update", } diff --git a/js/audio/index.svelte b/js/audio/index.svelte index 0fafb001d4e3..168cad62ad02 100644 --- a/js/audio/index.svelte +++ b/js/audio/index.svelte @@ -27,6 +27,7 @@ export let autoplay = false; export let show_download_button = true; export let show_share_button = false; + export let show_edit_button = true; {#if mode === "dynamic"} @@ -49,6 +50,7 @@ {min_width} {loading_status} {autoplay} + {show_edit_button} on:change on:stream on:drag diff --git a/js/audio/interactive/Audio.svelte b/js/audio/interactive/Audio.svelte index 7f4862393586..31bc97ef0e44 100644 --- a/js/audio/interactive/Audio.svelte +++ b/js/audio/interactive/Audio.svelte @@ -27,6 +27,7 @@ export let pending = false; export let streaming = false; export let autoplay = false; + export let show_edit_button = true; // TODO: make use of this // export let type: "normal" | "numpy" = "normal"; @@ -51,7 +52,7 @@ function get_modules(): void { module_promises = [ import("extendable-media-recorder"), - import("extendable-media-recorder-wav-encoder") + import("extendable-media-recorder-wav-encoder"), ]; } @@ -91,7 +92,7 @@ let _audio_blob = new Blob(blobs, { type: "audio/wav" }); value = { data: await blob_to_data_url(_audio_blob), - name: "audio.wav" + name: "audio.wav", }; dispatch(event, value); }; @@ -203,7 +204,7 @@ } function handle_change({ - detail: { values } + detail: { values }, }: { detail: { values: [number, number] }; }): void { @@ -213,14 +214,14 @@ data: value.data, name, crop_min: values[0], - crop_max: values[1] + crop_max: values[1], }); dispatch("edit"); } function handle_load({ - detail + detail, }: { detail: { data: string; @@ -283,7 +284,7 @@ (mode = "edit")} - editable + editable={show_edit_button} absolute={true} /> diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte index 6352a03eab4a..e1c44202e779 100644 --- a/js/audio/interactive/InteractiveAudio.svelte +++ b/js/audio/interactive/InteractiveAudio.svelte @@ -38,6 +38,7 @@ export let min_width: number | undefined = undefined; export let loading_status: LoadingStatus; export let autoplay = false; + export let show_edit_button = true; let old_value: null | FileData | string = null; @@ -83,6 +84,7 @@ {pending} {streaming} {autoplay} + {show_edit_button} on:edit on:play on:pause diff --git a/js/audio/static/AudioPlayer.svelte b/js/audio/static/AudioPlayer.svelte index 7c984654b30b..0dc885c765a4 100644 --- a/js/audio/static/AudioPlayer.svelte +++ b/js/audio/static/AudioPlayer.svelte @@ -34,7 +34,7 @@ $: value && dispatch("change", { name: name, - data: value?.data + data: value?.data, }); function handle_ended(): void { diff --git a/test/test_components.py b/test/test_components.py index dd2b0fbd4ffd..ca7d8c8e9dc0 100644 --- a/test/test_components.py +++ b/test/test_components.py @@ -844,6 +844,7 @@ def test_component_functions(self): "name": "audio", "show_download_button": True, "show_share_button": False, + "show_edit_button": True, "streaming": False, "show_label": True, "label": "Upload Your Audio", @@ -883,6 +884,7 @@ def test_component_functions(self): "name": "audio", "show_download_button": True, "show_share_button": False, + "show_edit_button": True, "streaming": False, "show_label": True, "label": None,