Revert "Revert "Add download button for audio"" (#4993)

* Revert "Revert "Add download button for audio (#4977)" (#4992)"

This reverts commit ad99df4.

* removed changelog updates

* add changeset

* credit leuryr

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.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).

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",
         }

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 @@
 		<StaticAudio
 			{autoplay}
 			{show_label}
+			{show_download_button}
 			{show_share_button}
 			value={_value}
 			name={_value?.name || "audio_file"}

js/audio/src/StaticAudio.svelte

@@ -10,8 +10,8 @@
 <script lang="ts">
 	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 @@
 </script>
 
 <BlockLabel {show_label} Icon={Music} float={false} label={label || "Audio"} />
-{#if show_share_button && value !== null}
-	<div class="icon-button">
-		<ShareButton
-			on:error
-			on:share
-			formatter={async (value) => {
-				if (!value) return "";
-				let url = await uploadToHuggingFace(value.data, "url");
-				return `<audio controls src="${url}"></audio>`;
-			}}
-			{value}
-		/>
+{#if value !== null}
+	<div class="icon-buttons">
+		{#if show_download_button}
+			<a
+				href={value.data}
+				target={window.__is_colab__ ? "_blank" : null}
+				download={value.name}
+			>
+				<IconButton Icon={Download} label="Download" />
+			</a>
+		{/if}
+		{#if show_share_button}
+			<ShareButton
+				on:error
+				on:share
+				formatter={async (value) => {
+					if (!value) return "";
+					let url = await uploadToHuggingFace(value.data, "url");
+					return `<audio controls src="${url}"></audio>`;
+				}}
+				{value}
+			/>
+		{/if}
 	</div>
 {/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);
 	}
 </style>

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,