Add download tests for audio/video (#6419)

* Add download tests for audio/video

* add changeset

---------

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

.changeset/true-garlics-report.md

@@ -0,0 +1,6 @@
+---
+"@gradio/audio": patch
+"gradio": patch
+---
+
+feat:Add download tests for audio/video

demo/audio_component_events/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: audio_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            input_video = gr.Audio(label=\"Input Audio\", sources=[\"upload\", \"microphone\"])\n", "        with gr.Column():\n", "            output_video = gr.Audio(label=\"Output Audio\", sources=[\"upload\", \"microphone\"])\n", "        with gr.Column():\n", "            num_change = gr.Number(label=\"# Change Events\", value=0)\n", "            num_load = gr.Number(label=\"# Upload Events\", value=0)\n", "            num_play = gr.Number(label=\"# Play Events\", value=0)\n", "            num_pause = gr.Number(label=\"# Pause Events\", value=0)\n", "        input_video.upload(lambda s, n: (s, n + 1), [input_video, num_load], [output_video, num_load])\n", "        input_video.change(lambda n: n + 1, num_change, num_change)\n", "        input_video.play(lambda n: n + 1, num_play, num_play)\n", "        input_video.pause(lambda n: n + 1, num_pause, num_pause)\n", "        input_video.change(lambda n: n + 1, num_change, num_change)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: audio_component_events"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "with gr.Blocks() as demo:\n", "    with gr.Row():\n", "        with gr.Column():\n", "            input_video = gr.Audio(type=\"filepath\", label=\"Input Audio\", sources=[\"upload\", \"microphone\"])\n", "        with gr.Column():\n", "            output_video = gr.Audio(label=\"Output Audio\", sources=[\"upload\", \"microphone\"])\n", "        with gr.Column():\n", "            num_change = gr.Number(label=\"# Change Events\", value=0)\n", "            num_load = gr.Number(label=\"# Upload Events\", value=0)\n", "            num_play = gr.Number(label=\"# Play Events\", value=0)\n", "            num_pause = gr.Number(label=\"# Pause Events\", value=0)\n", "        input_video.upload(lambda s, n: (s, n + 1), [input_video, num_load], [output_video, num_load])\n", "        input_video.change(lambda n: n + 1, num_change, num_change)\n", "        input_video.play(lambda n: n + 1, num_play, num_play)\n", "        input_video.pause(lambda n: n + 1, num_pause, num_pause)\n", "        input_video.change(lambda n: n + 1, num_change, num_change)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/audio_component_events/run.py

@@ -3,7 +3,7 @@
 with gr.Blocks() as demo:
     with gr.Row():
         with gr.Column():
-            input_video = gr.Audio(label="Input Audio", sources=["upload", "microphone"])
+            input_video = gr.Audio(type="filepath", label="Input Audio", sources=["upload", "microphone"])
         with gr.Column():
             output_video = gr.Audio(label="Output Audio", sources=["upload", "microphone"])
         with gr.Column():

gradio/components/audio.py

@@ -213,6 +213,7 @@ def postprocess(
         Returns:
             base64 url data
         """
+        orig_name = None
         if value is None:
             return None
         if isinstance(value, bytes):
@@ -221,16 +222,19 @@ def postprocess(
             file_path = processing_utils.save_bytes_to_cache(
                 value, "audio", cache_dir=self.GRADIO_CACHE
             )
+            orig_name = Path(file_path).name
         elif isinstance(value, tuple):
             sample_rate, data = value
             file_path = processing_utils.save_audio_to_cache(
                 data, sample_rate, format=self.format, cache_dir=self.GRADIO_CACHE
             )
+            orig_name = Path(file_path).name
         else:
             if not isinstance(value, (str, Path)):
                 raise ValueError(f"Cannot process {value} as Audio")
             file_path = str(value)
-        return FileData(path=file_path)
+            orig_name = Path(file_path).name if Path(file_path).exists() else None
+        return FileData(path=file_path, orig_name=orig_name)
 
     def stream_output(
         self, value, output_id: str, first_chunk: bool

js/app/test/audio_component_events.spec.ts

@@ -1,6 +1,8 @@
 import { test, expect, drag_and_drop_file } from "@gradio/tootils";
 
-test("Audio click-to-upload uploads audio successfuly.", async ({ page }) => {
+test("Audio click-to-upload uploads audio successfuly. File downloading works and file has correct name.", async ({
+	page
+}) => {
 	await page
 		.getByRole("button", { name: "Drop Audio Here - or - Click to Upload" })
 		.click();
@@ -26,6 +28,11 @@ test("Audio click-to-upload uploads audio successfuly.", async ({ page }) => {
 
 	await expect(page.getByLabel("# Change Events")).toHaveValue("3");
 	await expect(page.getByLabel("# Upload Events")).toHaveValue("2");
+
+	const downloadPromise = page.waitForEvent("download");
+	await page.getByLabel("Download").click();
+	const download = await downloadPromise;
+	await expect(download.suggestedFilename()).toBe("audio_sample.wav");
 });
 
 test("Audio drag-and-drop uploads a file to the server correctly.", async ({

js/app/test/video_component_events.spec.ts

@@ -1,6 +1,6 @@
 import { test, expect, drag_and_drop_file } from "@gradio/tootils";
 
-test("Video click-to-upload uploads video successfuly. Clear, play, and pause buttons dispatch events correctly.", async ({
+test("Video click-to-upload uploads video successfuly. Clear, play, and pause buttons dispatch events correctly. Downloading the file works and has the correct name.", async ({
 	page
 }) => {
 	await page
@@ -38,6 +38,11 @@ test("Video click-to-upload uploads video successfuly. Clear, play, and pause bu
 	await page.getByLabel("play-pause-replay-button").first().click();
 	await expect(page.getByLabel("# Play Events")).toHaveValue("2");
 	await expect(page.getByLabel("# Pause Events")).toHaveValue("2");
+
+	const downloadPromise = page.waitForEvent("download");
+	await page.getByLabel("Download").click();
+	const download = await downloadPromise;
+	await expect(download.suggestedFilename()).toBe("file_test.ogg");
 });
 
 test("Video drag-and-drop uploads a file to the server correctly.", async ({

js/audio/static/StaticAudio.svelte

@@ -40,7 +40,7 @@
 			<a
 				href={value.url}
 				target={window.__is_colab__ ? "_blank" : null}
-				download={value.url}
+				download={value.orig_name || value.path}
 			>
 				<IconButton Icon={Download} label={i18n("common.download")} />
 			</a>