downgrade to gradio 4.27.0

README.md

@@ -4,7 +4,7 @@ emoji: 💬
 colorFrom: yellow
 colorTo: green
 sdk: gradio
-sdk_version: 5.6.0
+sdk_version: 4.27.0
 app_file: app.py
 pinned: false
 license: mit

sourceviewer/README.md

@@ -1,15 +1,10 @@
----
-tags: [gradio-custom-component, Audio]
-title: gradio_sourceviewer
-short_description: A gradio custom component
-colorFrom: blue
-colorTo: yellow
-sdk: gradio
-pinned: false
-app_file: space.py
----
 
 # gradio_sourceviewer
+A Custom Gradio component.
 
-You can auto-generate documentation for your custom component with the `gradio cc docs` command.
-You can also edit this file however you like.
+## Example usage
+
+```python
+import gradio as gr
+from gradio_sourceviewer import SourceViewer
+```

sourceviewer/backend/gradio_sourceviewer/sourceviewer.py

@@ -3,28 +3,21 @@
 from __future__ import annotations
 
 import dataclasses
-import io
-from collections.abc import Callable, Sequence
 from pathlib import Path
-from typing import TYPE_CHECKING, Any, Literal
+from typing import Any, Callable, Literal
 
-import anyio
 import httpx
 import numpy as np
-from gradio_client import handle_file
+from gradio_client import file
 from gradio_client import utils as client_utils
 from gradio_client.documentation import document
-from pydub import AudioSegment
 
-from gradio import processing_utils, utils, wasm_utils
+from gradio import processing_utils, utils
 from gradio.components.base import Component, StreamingInput, StreamingOutput
-from gradio.data_classes import FileData, FileDataDict, MediaStreamChunk
+from gradio.data_classes import FileData
 from gradio.events import Events
 from gradio.exceptions import Error
 
-if TYPE_CHECKING:
-    from gradio.components import Timer
-
 
 @dataclasses.dataclass
 class WaveformOptions:
@@ -72,7 +65,6 @@ class SourceViewer(
         Events.pause_recording,
         Events.stop_recording,
         Events.upload,
-        Events.input,
     ]
 
     data_model = FileData
@@ -81,13 +73,10 @@ class SourceViewer(
         self,
         value: str | Path | tuple[int, np.ndarray] | Callable | None = None,
         *,
-        sources: list[Literal["upload", "microphone"]]
-        | Literal["upload", "microphone"]
-        | None = None,
+        sources: list[Literal["upload", "microphone"]] | None = None,
         type: Literal["numpy", "filepath"] = "numpy",
         label: str | None = None,
-        every: Timer | float | None = None,
-        inputs: Component | Sequence[Component] | set[Component] | None = None,
+        every: float | None = None,
         show_label: bool | None = None,
         container: bool = True,
         scale: int | None = None,
@@ -98,8 +87,7 @@ class SourceViewer(
         elem_id: str | None = None,
         elem_classes: list[str] | str | None = None,
         render: bool = True,
-        key: int | str | None = None,
-        format: Literal["wav", "mp3"] | None = None,
+        format: Literal["wav", "mp3"] = "wav",
         autoplay: bool = False,
         show_download_button: bool | None = None,
         show_share_button: bool | None = None,
@@ -107,17 +95,14 @@ class SourceViewer(
         min_length: int | None = None,
         max_length: int | None = None,
         waveform_options: WaveformOptions | dict | None = None,
-        loop: bool = False,
-        recording: bool = False,
     ):
         """
         Parameters:
             value: A path, URL, or [sample_rate, numpy array] tuple (sample rate in Hz, audio data as a float or int numpy array) for the default value that SourceViewer component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
             sources: A list of sources permitted for audio. "upload" creates a box where user can drop an audio file, "microphone" creates a microphone input. The first element in the list will be used as the default source. If None, defaults to ["upload", "microphone"], or ["microphone"] if `streaming` is True.
             type: The format the audio file is converted to before being passed into the prediction function. "numpy" converts the audio to a tuple consisting of: (int sample rate, numpy.array for the data), "filepath" passes a str path to a temporary file containing the audio.
-            label: the label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
-            every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
-            inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
+            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
             show_label: if True, will display label.
             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.
@@ -127,18 +112,15 @@ class SourceViewer(
             streaming: If set to True when used in a `live` interface as an input, will automatically stream webcam feed. When used set as an output, takes audio chunks yield from the backend and combines them into one streaming audio output.
             elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
             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.
-            render: if False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
-            key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
-            format: the file extension with which 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. This parameter applies both when this component is used as an input (and `type` is "filepath") to determine which file format to convert user-provided audio to, and when this component is used as an output to determine the format of audio returned to the user. If None, no file format conversion is done and the audio is kept as is. In the case where output audio is returned from the prediction function as numpy array and no `format` is provided, it will be returned as a "wav" file.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            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. By default, it will be True for output components and False for input components.
             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.
             editable: If True, allows users to manipulate the audio file if the component is interactive. Defaults to True.
             min_length: The minimum length of audio (in seconds) that the user can pass into the prediction function. If None, there is no minimum length.
             max_length: The maximum length of audio (in seconds) that the user can pass into the prediction function. If None, there is no maximum length.
-            waveform_options: A dictionary of options for the waveform display. Options include: waveform_color (str), waveform_progress_color (str), show_controls (bool), skip_length (int), trim_region_color (str). Default is None, which uses the default values for these options. [See `gr.WaveformOptions` docs](#waveform-options).
-            loop: If True, the audio will loop when it reaches the end and continue playing from the beginning.
-            recording: If True, the audio component will be set to record audio from the microphone if the source is set to "microphone". Defaults to False.
+            waveform_options: A dictionary of options for the waveform display. Options include: waveform_color (str), waveform_progress_color (str), show_controls (bool), skip_length (int), trim_region_color (str). Default is None, which uses the default values for these options.
         """
         valid_sources: list[Literal["upload", "microphone"]] = ["upload", "microphone"]
         if sources is None:
@@ -159,7 +141,7 @@ class SourceViewer(
         valid_types = ["numpy", "filepath"]
         if type not in valid_types:
             raise ValueError(
-                f"Invalid value for parameter `type`: {type}. Please choose from one of: {' '.join(valid_types)}"
+                f"Invalid value for parameter `type`: {type}. Please choose from one of: {valid_types}"
             )
         self.type = type
         self.streaming = streaming
@@ -167,14 +149,8 @@ class SourceViewer(
             raise ValueError(
                 "SourceViewer streaming only available if sources includes 'microphone'."
             )
-        valid_formats = ["wav", "mp3"]
-        if format is not None and format.lower() not in valid_formats:
-            raise ValueError(
-                f"Invalid value for parameter `format`: {format}. Please choose from one of: {' '.join(valid_formats)}"
-            )
-        self.format = format and format.lower()
+        self.format = format
         self.autoplay = autoplay
-        self.loop = loop
         self.show_download_button = show_download_button
         self.show_share_button = (
             (utils.get_space() is not None)
@@ -190,11 +166,9 @@ class SourceViewer(
             self.waveform_options = waveform_options
         self.min_length = min_length
         self.max_length = max_length
-        self.recording = recording
         super().__init__(
             label=label,
             every=every,
-            inputs=inputs,
             show_label=show_label,
             container=container,
             scale=scale,
@@ -204,12 +178,11 @@ class SourceViewer(
             elem_id=elem_id,
             elem_classes=elem_classes,
             render=render,
-            key=key,
             value=value,
         )
 
     def example_payload(self) -> Any:
-        return handle_file(
+        return file(
             "https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav"
         )
 
@@ -231,31 +204,29 @@ class SourceViewer(
         if not payload.path:
             raise ValueError("payload path missing")
 
-        needs_conversion = False
-        original_suffix = Path(payload.path).suffix.lower()
-        if self.format is not None and original_suffix != f".{self.format}":
-            needs_conversion = True
+        # Need a unique name for the file to avoid re-using the same audio file if
+        # a user submits the same audio file twice
+        temp_file_path = Path(payload.path)
+        output_file_name = str(
+            temp_file_path.with_name(f"{temp_file_path.stem}{temp_file_path.suffix}")
+        )
 
-        if self.min_length is not None or self.max_length is not None:
-            sample_rate, data = processing_utils.audio_from_file(payload.path)
-            duration = len(data) / sample_rate
-            if self.min_length is not None and duration < self.min_length:
-                raise Error(
-                    f"SourceViewer is too short, and must be at least {self.min_length} seconds"
-                )
-            if self.max_length is not None and duration > self.max_length:
-                raise Error(
-                    f"SourceViewer is too long, and must be at most {self.max_length} seconds"
-                )
+        sample_rate, data = processing_utils.audio_from_file(temp_file_path)
+
+        duration = len(data) / sample_rate
+        if self.min_length is not None and duration < self.min_length:
+            raise Error(
+                f"SourceViewer is too short, and must be at least {self.min_length} seconds"
+            )
+        if self.max_length is not None and duration > self.max_length:
+            raise Error(
+                f"SourceViewer is too long, and must be at most {self.max_length} seconds"
+            )
 
         if self.type == "numpy":
-            return processing_utils.audio_from_file(payload.path)
+            return sample_rate, data
         elif self.type == "filepath":
-            if not needs_conversion:
-                return payload.path
-            sample_rate, data = processing_utils.audio_from_file(payload.path)
-            output_file = str(Path(payload.path).with_suffix(f".{self.format}"))
-            assert self.format is not None  # noqa: S101
+            output_file = str(Path(output_file_name).with_suffix(f".{self.format}"))
             processing_utils.audio_to_file(
                 sample_rate, data, output_file, format=self.format
             )
@@ -279,7 +250,6 @@ class SourceViewer(
         orig_name = None
         if value is None:
             return None
-
         if isinstance(value, bytes):
             if self.streaming:
                 return value
@@ -290,95 +260,48 @@ class SourceViewer(
         elif isinstance(value, tuple):
             sample_rate, data = value
             file_path = processing_utils.save_audio_to_cache(
-                data,
-                sample_rate,
-                format=self.format or "wav",
-                cache_dir=self.GRADIO_CACHE,
+                data, sample_rate, format=self.format, cache_dir=self.GRADIO_CACHE
             )
             orig_name = Path(file_path).name
-        elif isinstance(value, (str, Path)):
-            original_suffix = Path(value).suffix.lower()
-            if self.format is not None and original_suffix != f".{self.format}":
-                sample_rate, data = processing_utils.audio_from_file(str(value))
-                file_path = processing_utils.save_audio_to_cache(
-                    data, sample_rate, format=self.format, cache_dir=self.GRADIO_CACHE
-                )
-            else:
-                file_path = str(value)
-            orig_name = Path(file_path).name if Path(file_path).exists() else None
         else:
-            raise ValueError(f"Cannot process {value} as SourceViewer")
+            if not isinstance(value, (str, Path)):
+                raise ValueError(f"Cannot process {value} as SourceViewer")
+            file_path = str(value)
+            orig_name = Path(file_path).name if Path(file_path).exists() else None
         return FileData(path=file_path, orig_name=orig_name)
 
-    @staticmethod
-    def _convert_to_adts(data: bytes):
-        if wasm_utils.IS_WASM:
-            raise wasm_utils.WasmUnsupportedError(
-                "SourceViewer streaming is not supported in the Wasm mode."
-            )
-        segment = AudioSegment.from_file(io.BytesIO(data))
-
-        buffer = io.BytesIO()
-        segment.export(buffer, format="adts")  # ADTS is a container format for AAC
-        aac_data = buffer.getvalue()
-        return aac_data, len(segment) / 1000.0
-
-    @staticmethod
-    async def covert_to_adts(data: bytes) -> tuple[bytes, float]:
-        return await anyio.to_thread.run_sync(SourceViewer._convert_to_adts, data)
-
-    async def stream_output(
-        self,
-        value,
-        output_id: str,
-        first_chunk: bool,  # noqa: ARG002
-    ) -> tuple[MediaStreamChunk | None, FileDataDict]:
-        output_file: FileDataDict = {
+    def stream_output(
+        self, value, output_id: str, first_chunk: bool
+    ) -> tuple[bytes | None, Any]:
+        output_file = {
             "path": output_id,
             "is_stream": True,
-            "orig_name": "audio-stream.mp3",
-            "meta": {"_type": "gradio.FileData"},
         }
         if value is None:
             return None, output_file
         if isinstance(value, bytes):
-            value, duration = await self.covert_to_adts(value)
-            return {
-                "data": value,
-                "duration": duration,
-                "extension": ".aac",
-            }, output_file
+            return value, output_file
         if client_utils.is_http_url_like(value["path"]):
             response = httpx.get(value["path"])
             binary_data = response.content
         else:
             output_file["orig_name"] = value["orig_name"]
             file_path = value["path"]
+            is_wav = file_path.endswith(".wav")
             with open(file_path, "rb") as f:
                 binary_data = f.read()
-        value, duration = await self.covert_to_adts(binary_data)
-        return {"data": value, "duration": duration, "extension": ".aac"}, output_file
-
-    async def combine_stream(
-        self,
-        stream: list[bytes],
-        desired_output_format: str | None = None,
-        only_file=False,  # noqa: ARG002
-    ) -> FileData:
-        output_file = FileData(
-            path=processing_utils.save_bytes_to_cache(
-                b"".join(stream), "audio.mp3", cache_dir=self.GRADIO_CACHE
-            ),
-            is_stream=False,
-            orig_name="audio-stream.mp3",
-        )
-        if desired_output_format and desired_output_format != "mp3":
-            new_path = Path(output_file.path).with_suffix(f".{desired_output_format}")
-            AudioSegment.from_file(output_file.path).export(
-                new_path, format=desired_output_format
-            )
-            output_file.path = str(new_path)
-        return output_file
+            if is_wav:
+                # strip length information from first chunk header, remove headers entirely from subsequent chunks
+                if first_chunk:
+                    binary_data = (
+                        binary_data[:4] + b"\xFF\xFF\xFF\xFF" + binary_data[8:]
+                    )
+                    binary_data = (
+                        binary_data[:40] + b"\xFF\xFF\xFF\xFF" + binary_data[44:]
+                    )
+                else:
+                    binary_data = binary_data[44:]
+        return binary_data, output_file
 
     def process_example(
         self, value: tuple[int, np.ndarray] | str | Path | bytes | None

sourceviewer/demo/app.py

@@ -1,16 +1,22 @@
-
 import gradio as gr
 from gradio_sourceviewer import SourceViewer
+from pyannote.audio import Pipeline
+import os
+
+
+def apply_pipeline(audio: str) -> tuple:
+    pipeline = Pipeline.from_pretrained(
+        "pyannote/speech-separation-ami-1.0", use_auth_token=os.environ["HF_TOKEN"]
+    )
+    return pipeline(audio)
 
 
-example = SourceViewer().example_value()
+with gr.Blocks() as demo:
+    audio = gr.Audio(type="filepath")
+    btn = gr.Button("Apply separation pipeline")
+    source_viewer = SourceViewer()
 
-demo = gr.Interface(
-    lambda x:x,
-    SourceViewer(),  # interactive version of your component
-    SourceViewer(),  # static version of your component
-    # examples=[[example]],  # uncomment this line to view the "example version" of your component
-)
+    btn.click(fn=apply_pipeline, inputs=[audio], outputs=[source_viewer])
 
 
 if __name__ == "__main__":

sourceviewer/demo/requirements.txt

@@ -1 +0,0 @@
-gradio_sourceviewer

sourceviewer/frontend/Index.svelte

@@ -5,7 +5,6 @@
 
 	import type { FileData } from "@gradio/client";
 	import type { LoadingStatus } from "@gradio/statustracker";
-	import { afterUpdate, onMount } from "svelte";
 
 	import StaticAudio from "./static/StaticAudio.svelte";
 	import InteractiveAudio from "./interactive/InteractiveAudio.svelte";
@@ -13,7 +12,6 @@
 	import { Block, UploadText } from "@gradio/atoms";
 	import type { WaveformOptions } from "./shared/types";
 
-	export let value_is_output = false;
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
@@ -32,31 +30,13 @@
 	export let min_width: number | undefined = undefined;
 	export let loading_status: LoadingStatus;
 	export let autoplay = false;
-	export let loop = false;
 	export let show_download_button: boolean;
 	export let show_share_button = false;
 	export let editable = true;
 	export let waveform_options: WaveformOptions = {};
 	export let pending: boolean;
 	export let streaming: boolean;
-	export let stream_every: number;
-	export let input_ready: boolean;
-	export let recording = false;
-	let uploading = false;
-	$: input_ready = !uploading;
-
-	let stream_state = "closed";
-	let _modify_stream: (state: "open" | "closed" | "waiting") => void;
-	export function modify_stream_state(
-		state: "open" | "closed" | "waiting"
-	): void {
-		stream_state = state;
-		_modify_stream(state);
-	}
-	export const get_stream_state: () => void = () => stream_state;
-	export let set_time_limit: (time: number) => void;
 	export let gradio: Gradio<{
-		input: never;
 		change: typeof value;
 		stream: typeof value;
 		error: string;
@@ -72,8 +52,6 @@
 		upload: never;
 		clear: never;
 		share: ShareData;
-		clear_status: LoadingStatus;
-		close_stream: string;
 	}>;
 
 	let old_value: null | FileData = null;
@@ -98,9 +76,6 @@
 		if (JSON.stringify(value) !== JSON.stringify(old_value)) {
 			old_value = value;
 			gradio.dispatch("change");
-			if (!value_is_output) {
-				gradio.dispatch("input");
-			}
 		}
 	}
 
@@ -112,23 +87,14 @@
 
 	let waveform_settings: Record<string, any>;
 
-	let color_accent = "darkorange";
-
-	onMount(() => {
-		color_accent = getComputedStyle(document?.documentElement).getPropertyValue(
-			"--color-accent"
-		);
-		set_trim_region_colour();
-		waveform_settings.waveColor = waveform_options.waveform_color || "#9ca3af";
-		waveform_settings.progressColor =
-			waveform_options.waveform_progress_color || color_accent;
-		waveform_settings.mediaControls = waveform_options.show_controls;
-		waveform_settings.sampleRate = waveform_options.sample_rate || 44100;
-	});
+	let color_accent = getComputedStyle(
+		document.documentElement
+	).getPropertyValue("--color-accent");
 
 	$: waveform_settings = {
 		height: 50,
-
+		waveColor: waveform_options.waveform_color || "#9ca3af",
+		progressColor: waveform_options.waveform_progress_color || color_accent,
 		barWidth: 2,
 		barGap: 3,
 		cursorWidth: 2,
@@ -137,7 +103,9 @@
 		barRadius: 10,
 		dragToSeek: true,
 		normalize: true,
-		minPxPerSec: 20
+		minPxPerSec: 20,
+		mediaControls: waveform_options.show_controls,
+		sampleRate: waveform_options.sample_rate || 44100
 	};
 
 	const trim_region_settings = {
@@ -153,6 +121,8 @@
 		);
 	}
 
+	set_trim_region_colour();
+
 	function handle_error({ detail }: CustomEvent<string>): void {
 		const [level, status] = detail.includes("Invalid file type")
 			? ["warning", "complete"]
@@ -162,10 +132,6 @@
 		loading_status.message = detail;
 		gradio.dispatch(level as "error" | "warning", detail);
 	}
-
-	afterUpdate(() => {
-		value_is_output = false;
-	});
 </script>
 
 {#if !interactive}
@@ -185,7 +151,6 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
-			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
 		<StaticAudio
@@ -195,7 +160,6 @@
 			{show_share_button}
 			{value}
 			{label}
-			{loop}
 			{waveform_settings}
 			{waveform_options}
 			{editable}
@@ -223,7 +187,6 @@
 			autoscroll={gradio.autoscroll}
 			i18n={gradio.i18n}
 			{...loading_status}
-			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 		<InteractiveAudio
 			{label}
@@ -241,13 +204,9 @@
 			{active_source}
 			{pending}
 			{streaming}
-			bind:recording
-			{loop}
-			max_file_size={gradio.max_file_size}
 			{handle_reset_value}
 			{editable}
 			bind:dragging
-			bind:uploading
 			on:edit={() => gradio.dispatch("edit")}
 			on:play={() => gradio.dispatch("play")}
 			on:pause={() => gradio.dispatch("pause")}
@@ -258,16 +217,10 @@
 			on:upload={() => gradio.dispatch("upload")}
 			on:clear={() => gradio.dispatch("clear")}
 			on:error={handle_error}
-			on:close_stream={() => gradio.dispatch("close_stream", "stream")}
 			i18n={gradio.i18n}
 			{waveform_settings}
 			{waveform_options}
 			{trim_region_settings}
-			{stream_every}
-			bind:modify_stream={_modify_stream}
-			bind:set_time_limit
-			upload={(...args) => gradio.client.upload(...args)}
-			stream_handler={(...args) => gradio.client.stream(...args)}
 		>
 			<UploadText i18n={gradio.i18n} type="audio" />
 		</InteractiveAudio>

sourceviewer/frontend/gradio.config.js

@@ -1,9 +0,0 @@
-export default {
-  plugins: [],
-  svelte: {
-    preprocess: [],
-  },
-  build: {
-    target: "modules",
-  },
-};

sourceviewer/frontend/interactive/InteractiveAudio.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
-	import { onDestroy, createEventDispatcher, tick } from "svelte";
+	import { getContext, onDestroy, createEventDispatcher } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
-	import { prepare_files, type FileData, type Client } from "@gradio/client";
+	import {
+		upload,
+		prepare_files,
+		type FileData,
+		type upload_files
+	} from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
 	import { Music } from "@gradio/icons";
-	import { StreamingBar } from "@gradio/statustracker";
 	import AudioPlayer from "../player/AudioPlayer.svelte";
 
 	import type { IBlobEvent, IMediaRecorder } from "extendable-media-recorder";
-	import type { I18nFormatter } from "js/core/src/gradio_helper";
+	import type { I18nFormatter } from "js/app/src/gradio_helper";
 	import AudioRecorder from "../recorder/AudioRecorder.svelte";
 	import StreamAudio from "../streaming/StreamAudio.svelte";
 	import { SelectSource } from "@gradio/atoms";
@@ -17,7 +21,6 @@
 	export let value: null | FileData = null;
 	export let label: string;
 	export let root: string;
-	export let loop: boolean;
 	export let show_label = true;
 	export let show_download_button = false;
 	export let sources:
@@ -35,37 +38,15 @@
 	export let active_source: "microphone" | "upload";
 	export let handle_reset_value: () => void = () => {};
 	export let editable = true;
-	export let max_file_size: number | null = null;
-	export let upload: Client["upload"];
-	export let stream_handler: Client["stream"];
-	export let stream_every: number;
-	export let uploading = false;
-	export let recording = false;
 
-	let time_limit: number | null = null;
-	let stream_state: "open" | "waiting" | "closed" = "closed";
-
-	export const modify_stream: (state: "open" | "closed" | "waiting") => void = (
-		state: "open" | "closed" | "waiting"
-	) => {
-		if (state === "closed") {
-			time_limit = null;
-			stream_state = "closed";
-		} else if (state === "waiting") {
-			stream_state = "waiting";
-		} else {
-			stream_state = "open";
-		}
-	};
-
-	export const set_time_limit = (time: number): void => {
-		if (recording) time_limit = time;
-	};
+	// Needed for wasm support
+	const upload_fn = getContext<typeof upload_files>("upload_files");
 
 	$: dispatch("drag", dragging);
 
 	// TODO: make use of this
 	// export let type: "normal" | "numpy" = "normal";
+	let recording = false;
 	let recorder: IMediaRecorder;
 	let mode = "";
 	let header: Uint8Array | undefined = undefined;
@@ -73,6 +54,7 @@
 	let submit_pending_stream_on_pending_end = false;
 	let inited = false;
 
+	const STREAM_TIMESLICE = 500;
 	const NUM_HEADER_BYTES = 44;
 	let audio_chunks: Blob[] = [];
 	let module_promises: [
@@ -87,8 +69,7 @@
 		];
 	}
 
-	const is_browser = typeof window !== "undefined";
-	if (is_browser && streaming) {
+	if (streaming) {
 		get_modules();
 	}
 
@@ -107,7 +88,6 @@
 		start_recording: undefined;
 		pause_recording: undefined;
 		stop_recording: undefined;
-		close_stream: undefined;
 	}>();
 
 	const dispatch_blob = async (
@@ -117,10 +97,11 @@
 		let _audio_blob = new File(blobs, "audio.wav");
 		const val = await prepare_files([_audio_blob], event === "stream");
 		value = (
-			(await upload(val, root, undefined, max_file_size || undefined))?.filter(
+			(await upload(val, root, undefined, upload_fn))?.filter(
 				Boolean
 			) as FileData[]
 		)[0];
+
 		dispatch(event, value);
 	};
 
@@ -147,10 +128,10 @@
 			throw err;
 		}
 		if (stream == null) return;
-
 		if (streaming) {
-			const [{ MediaRecorder, register }, { connect }] =
-				await Promise.all(module_promises);
+			const [{ MediaRecorder, register }, { connect }] = await Promise.all(
+				module_promises
+			);
 			await register(await connect());
 			recorder = new MediaRecorder(stream, { mimeType: "audio/wav" });
 			recorder.addEventListener("dataavailable", handle_chunk);
@@ -159,14 +140,13 @@
 			recorder.addEventListener("dataavailable", (event) => {
 				audio_chunks.push(event.data);
 			});
+			recorder.addEventListener("stop", async () => {
+				recording = false;
+				await dispatch_blob(audio_chunks, "change");
+				await dispatch_blob(audio_chunks, "stop_recording");
+				audio_chunks = [];
+			});
 		}
-		recorder.addEventListener("stop", async () => {
-			recording = false;
-			// recorder.stop();
-			await dispatch_blob(audio_chunks, "change");
-			await dispatch_blob(audio_chunks, "stop_recording");
-			audio_chunks = [];
-		});
 		inited = true;
 	}
 
@@ -181,7 +161,6 @@
 			pending_stream.push(payload);
 		} else {
 			let blobParts = [header].concat(pending_stream, [payload]);
-			if (!recording || stream_state === "waiting") return;
 			dispatch_blob(blobParts, "stream");
 			pending_stream = [];
 		}
@@ -201,8 +180,8 @@
 		dispatch("start_recording");
 		if (!inited) await prepare_audio();
 		header = undefined;
-		if (streaming && recorder.state != "recording") {
-			recorder.start(stream_every * 1000);
+		if (streaming) {
+			recorder.start(STREAM_TIMESLICE);
 		}
 	}
 
@@ -219,14 +198,12 @@
 		dispatch("upload", detail);
 	}
 
-	async function stop(): Promise<void> {
+	function stop(): void {
 		recording = false;
 
 		if (streaming) {
-			dispatch("close_stream");
 			dispatch("stop_recording");
 			recorder.stop();
-
 			if (pending) {
 				submit_pending_stream_on_pending_end = true;
 			}
@@ -235,9 +212,6 @@
 			mode = "";
 		}
 	}
-
-	$: if (!recording && recorder) stop();
-	$: if (recording && recorder) record();
 </script>
 
 <BlockLabel
@@ -247,10 +221,9 @@
 	label={label || i18n("audio.audio")}
 />
 <div class="audio-container">
-	<StreamingBar {time_limit} />
 	{#if value === null || streaming}
 		{#if active_source === "microphone"}
-			<ModifyUpload {i18n} on:clear={clear} />
+			<ModifyUpload {i18n} on:clear={clear} absolute={true} />
 			{#if streaming}
 				<StreamAudio
 					{record}
@@ -259,14 +232,12 @@
 					{i18n}
 					{waveform_settings}
 					{waveform_options}
-					waiting={stream_state === "waiting"}
 				/>
 			{:else}
 				<AudioRecorder
 					bind:mode
 					{i18n}
 					{editable}
-					{recording}
 					{dispatch_blob}
 					{waveform_settings}
 					{waveform_options}
@@ -282,12 +253,8 @@
 				filetype="audio/aac,audio/midi,audio/mpeg,audio/ogg,audio/wav,audio/x-wav,audio/opus,audio/webm,audio/flac,audio/vnd.rn-realaudio,audio/x-ms-wma,audio/x-aiff,audio/amr,audio/*"
 				on:load={handle_load}
 				bind:dragging
-				bind:uploading
 				on:error={({ detail }) => dispatch("error", detail)}
 				{root}
-				{max_file_size}
-				{upload}
-				{stream_handler}
 			>
 				<slot />
 			</Upload>
@@ -298,6 +265,7 @@
 			on:clear={clear}
 			on:edit={() => (mode = "edit")}
 			download={show_download_button ? value.url : null}
+			absolute={true}
 		/>
 
 		<AudioPlayer
@@ -311,7 +279,6 @@
 			{trim_region_settings}
 			{handle_reset_value}
 			{editable}
-			{loop}
 			interactive
 			on:stop
 			on:play

sourceviewer/frontend/package.json

@@ -1,62 +1,33 @@
 {
   "name": "gradio_sourceviewer",
-  "version": "0.14.8",
+  "version": "0.9.12",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@gradio/atoms": "0.11.1",
-    "@gradio/button": "0.3.7",
-    "@gradio/client": "1.8.0",
-    "@gradio/icons": "0.8.1",
-    "@gradio/statustracker": "0.9.5",
-    "@gradio/upload": "0.14.1",
-    "@gradio/utils": "0.8.0",
-    "@gradio/wasm": "0.15.0",
-    "@types/wavesurfer.js": "^6.0.10",
+    "@gradio/atoms": "0.7.0",
+    "@gradio/button": "0.2.31",
+    "@gradio/client": "0.16.0",
+    "@gradio/icons": "0.4.0",
+    "@gradio/statustracker": "0.4.12",
+    "@gradio/upload": "0.8.5",
+    "@gradio/utils": "0.3.2",
+    "@gradio/wasm": "0.10.0",
     "extendable-media-recorder": "^9.0.0",
     "extendable-media-recorder-wav-encoder": "^7.0.76",
-    "hls.js": "^1.5.13",
     "resize-observer-polyfill": "^1.5.1",
     "svelte-range-slider-pips": "^2.0.1",
-    "wavesurfer.js": "^7.4.2"
-  },
-  "devDependencies": {
-    "@gradio/preview": "0.13.0"
+    "wavesurfer.js": "^7.4.2",
+    "@types/wavesurfer.js": "^6.0.10"
   },
   "main_changeset": true,
   "main": "index.ts",
   "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "gradio": "./index.ts",
-      "svelte": "./dist/index.js",
-      "types": "./dist/index.d.ts"
-    },
-    "./example": {
-      "gradio": "./Example.svelte",
-      "svelte": "./dist/Example.svelte",
-      "types": "./dist/Example.svelte.d.ts"
-    },
-    "./shared": {
-      "gradio": "./shared/index.ts",
-      "svelte": "./dist/shared/index.js",
-      "types": "./dist/shared/index.d.ts"
-    },
-    "./base": {
-      "gradio": "./static/StaticAudio.svelte",
-      "svelte": "./dist/static/StaticAudio.svelte",
-      "types": "./dist/static/StaticAudio.svelte.d.ts"
-    }
-  },
-  "peerDependencies": {
-    "svelte": "^4.0.0"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/gradio-app/gradio.git",
-    "directory": "js/audio"
+    ".": "./index.ts",
+    "./example": "./Example.svelte",
+    "./shared": "./shared/index.ts",
+    "./package.json": "./package.json"
   }
 }

sourceviewer/frontend/player/AudioPlayer.svelte

@@ -11,8 +11,6 @@
 	import type { WaveformOptions } from "../shared/types";
 	import { createEventDispatcher } from "svelte";
 
-	import Hls from "hls.js";
-
 	export let value: null | FileData = null;
 	$: url = value?.url;
 	export let label: string;
@@ -27,7 +25,6 @@
 	export let waveform_settings: Record<string, any>;
 	export let waveform_options: WaveformOptions;
 	export let mode = "";
-	export let loop: boolean;
 	export let handle_reset_value: () => void = () => {};
 
 	let container: HTMLDivElement;
@@ -41,9 +38,6 @@
 	let trimDuration = 0;
 
 	let show_volume_slider = false;
-	let audio_player: HTMLAudioElement;
-
-	let stream_active = false;
 
 	const dispatch = createEventDispatcher<{
 		stop: undefined;
@@ -51,7 +45,6 @@
 		pause: undefined;
 		edit: undefined;
 		end: undefined;
-		load: undefined;
 	}>();
 
 	const create_waveform = (): void => {
@@ -66,7 +59,7 @@
 		});
 	};
 
-	$: if (!value?.is_stream && container !== undefined && container !== null) {
+	$: if (container !== undefined) {
 		if (waveform !== undefined) waveform.destroy();
 		container.innerHTML = "";
 		create_waveform();
@@ -93,12 +86,8 @@
 	});
 
 	$: waveform?.on("finish", () => {
-		if (loop) {
-			waveform?.play();
-		} else {
-			playing = false;
-			dispatch("stop");
-		}
+		playing = false;
+		dispatch("stop");
 	});
 	$: waveform?.on("pause", () => {
 		playing = false;
@@ -109,10 +98,6 @@
 		dispatch("play");
 	});
 
-	$: waveform?.on("load", () => {
-		dispatch("load");
-	});
-
 	const handle_trim_audio = async (
 		start: number,
 		end: number
@@ -134,7 +119,6 @@
 	};
 
 	async function load_audio(data: string): Promise<void> {
-		stream_active = false;
 		await resolve_wasm_src(data).then((resolved_src) => {
 			if (!resolved_src || value?.is_stream) return;
 			return waveform?.load(resolved_src);
@@ -143,52 +127,6 @@
 
 	$: url && load_audio(url);
 
-	function load_stream(value: FileData | null): void {
-		if (!value || !value.is_stream || !value.url) return;
-		if (!audio_player) return;
-		if (Hls.isSupported() && !stream_active) {
-			// Set config to start playback after 1 second of data received
-			const hls = new Hls({
-				maxBufferLength: 1,
-				maxMaxBufferLength: 1,
-				lowLatencyMode: true
-			});
-			hls.loadSource(value.url);
-			hls.attachMedia(audio_player);
-			hls.on(Hls.Events.MANIFEST_PARSED, function () {
-				if (waveform_settings.autoplay) audio_player.play();
-			});
-			hls.on(Hls.Events.ERROR, function (event, data) {
-				console.error("HLS error:", event, data);
-				if (data.fatal) {
-					switch (data.type) {
-						case Hls.ErrorTypes.NETWORK_ERROR:
-							console.error(
-								"Fatal network error encountered, trying to recover"
-							);
-							hls.startLoad();
-							break;
-						case Hls.ErrorTypes.MEDIA_ERROR:
-							console.error("Fatal media error encountered, trying to recover");
-							hls.recoverMediaError();
-							break;
-						default:
-							console.error("Fatal error, cannot recover");
-							hls.destroy();
-							break;
-					}
-				}
-			});
-			stream_active = true;
-		} else if (!stream_active) {
-			audio_player.src = value.url;
-			if (waveform_settings.autoplay) audio_player.play();
-			stream_active = true;
-		}
-	}
-
-	$: load_stream(value);
-
 	onMount(() => {
 		window.addEventListener("keydown", (e) => {
 			if (!waveform || show_volume_slider) return;
@@ -201,31 +139,24 @@
 	});
 </script>
 
-<audio
-	class="standard-player"
-	class:hidden={!(value && value.is_stream)}
-	controls
-	autoplay={waveform_settings.autoplay}
-	on:load
-	bind:this={audio_player}
-	on:ended={() => dispatch("stop")}
-	on:play={() => dispatch("play")}
-/>
 {#if value === null}
 	<Empty size="small">
 		<Music />
 	</Empty>
-{:else if !value.is_stream}
+{:else if value.is_stream}
+	<audio
+		class="standard-player"
+		src={value.url}
+		controls
+		autoplay={waveform_settings.autoplay}
+	/>
+{:else}
 	<div
 		class="component-wrapper"
 		data-testid={label ? "waveform-" + label : "unlabelled-audio"}
 	>
 		<div class="waveform-container">
-			<div
-				id="waveform"
-				bind:this={container}
-				style:height={container ? null : "58px"}
-			/>
+			<div id="waveform" bind:this={container} />
 		</div>
 
 		<div class="timestamps">
@@ -238,25 +169,25 @@
 			</div>
 		</div>
 
-		<!-- {#if waveform} -->
-		<WaveformControls
-			{container}
-			{waveform}
-			{playing}
-			{audio_duration}
-			{i18n}
-			{interactive}
-			{handle_trim_audio}
-			bind:mode
-			bind:trimDuration
-			bind:show_volume_slider
-			show_redo={interactive}
-			{handle_reset_value}
-			{waveform_options}
-			{trim_region_settings}
-			{editable}
-		/>
-		<!-- {/if} -->
+		{#if waveform}
+			<WaveformControls
+				{container}
+				{waveform}
+				{playing}
+				{audio_duration}
+				{i18n}
+				{interactive}
+				{handle_trim_audio}
+				bind:mode
+				bind:trimDuration
+				bind:show_volume_slider
+				show_redo={interactive}
+				{handle_reset_value}
+				{waveform_options}
+				{trim_region_settings}
+				{editable}
+			/>
+		{/if}
 	</div>
 {/if}
 
@@ -307,8 +238,4 @@
 		width: 100%;
 		padding: var(--size-2);
 	}
-
-	.hidden {
-		display: none;
-	}
 </style>

sourceviewer/frontend/recorder/AudioRecorder.svelte

@@ -23,7 +23,6 @@
 	};
 	export let handle_reset_value: () => void;
 	export let editable = true;
-	export let recording = false;
 
 	let micWaveform: WaveSurfer;
 	let recordingWaveform: WaveSurfer;
@@ -63,7 +62,7 @@
 		edit: undefined;
 	}>();
 
-	function record_start_callback(): void {
+	$: record?.on("record-start", () => {
 		start_interval();
 		timing = true;
 		dispatch("start_recording");
@@ -71,9 +70,9 @@
 			let waveformCanvas = microphoneContainer;
 			if (waveformCanvas) waveformCanvas.style.display = "block";
 		}
-	}
+	});
 
-	async function record_end_callback(blob: Blob): Promise<void> {
+	$: record?.on("record-end", async (blob) => {
 		seconds = 0;
 		timing = false;
 		clearInterval(interval);
@@ -92,7 +91,12 @@
 		} catch (e) {
 			console.error(e);
 		}
-	}
+	});
+
+	$: record?.on("record-pause", () => {
+		dispatch("pause_recording");
+		clearInterval(interval);
+	});
 
 	$: record?.on("record-resume", () => {
 		start_interval();
@@ -136,25 +140,6 @@
 
 		record = micWaveform.registerPlugin(RecordPlugin.create());
 		record.startMic();
-		record?.on("record-end", record_end_callback);
-		record?.on("record-start", record_start_callback);
-		record?.on("record-pause", () => {
-			dispatch("pause_recording");
-			clearInterval(interval);
-		});
-
-		record?.on("record-end", (blob) => {
-			recordedAudio = URL.createObjectURL(blob);
-
-			const microphone = microphoneContainer;
-			const recording = recordingContainer;
-
-			if (microphone) microphone.style.display = "none";
-			if (recording && recordedAudio) {
-				recording.innerHTML = "";
-				create_recording_waveform();
-			}
-		});
 	};
 
 	const create_recording_waveform = (): void => {
@@ -167,6 +152,19 @@
 		});
 	};
 
+	$: record?.on("record-end", (blob) => {
+		recordedAudio = URL.createObjectURL(blob);
+
+		const microphone = microphoneContainer;
+		const recording = recordingContainer;
+
+		if (microphone) microphone.style.display = "none";
+		if (recording && recordedAudio) {
+			recording.innerHTML = "";
+			create_recording_waveform();
+		}
+	});
+
 	const handle_trim_audio = async (
 		start: number,
 		end: number
@@ -227,7 +225,6 @@
 			bind:record
 			{i18n}
 			{timing}
-			{recording}
 			show_recording_waveform={waveform_options.show_recording_waveform}
 			record_time={format_time(seconds)}
 		/>

sourceviewer/frontend/shared/DeviceSelect.svelte

@@ -10,26 +10,24 @@
 		error: string;
 	}>();
 
-	$: if (typeof window !== "undefined") {
-		try {
-			let tempDevices: MediaDeviceInfo[] = [];
-			RecordPlugin.getAvailableAudioDevices().then(
-				(devices: MediaDeviceInfo[]) => {
-					micDevices = devices;
-					devices.forEach((device) => {
-						if (device.deviceId) {
-							tempDevices.push(device);
-						}
-					});
-					micDevices = tempDevices;
-				}
-			);
-		} catch (err) {
-			if (err instanceof DOMException && err.name == "NotAllowedError") {
-				dispatch("error", i18n("audio.allow_recording_access"));
+	$: try {
+		let tempDevices: MediaDeviceInfo[] = [];
+		RecordPlugin.getAvailableAudioDevices().then(
+			(devices: MediaDeviceInfo[]) => {
+				micDevices = devices;
+				devices.forEach((device) => {
+					if (device.deviceId) {
+						tempDevices.push(device);
+					}
+				});
+				micDevices = tempDevices;
 			}
-			throw err;
+		);
+	} catch (err) {
+		if (err instanceof DOMException && err.name == "NotAllowedError") {
+			dispatch("error", i18n("audio.allow_recording_access"));
 		}
+		throw err;
 	}
 </script>
 
@@ -52,9 +50,9 @@
 		height: var(--size-8);
 		background: var(--block-background-fill);
 		padding: 0px var(--spacing-xxl);
-		border-radius: var(--button-large-radius);
+		border-radius: var(--radius-full);
 		font-size: var(--text-md);
-		border: 1px solid var(--block-border-color);
+		border: 1px solid var(--neutral-400);
 		gap: var(--size-1);
 	}
 

sourceviewer/frontend/shared/VolumeControl.svelte

@@ -4,7 +4,7 @@
 
 	export let currentVolume = 1;
 	export let show_volume_slider = false;
-	export let waveform: WaveSurfer | undefined;
+	export let waveform: WaveSurfer;
 
 	let volumeElement: HTMLInputElement;
 
@@ -37,7 +37,7 @@
 	on:input={(e) => {
 		if (e.target instanceof HTMLInputElement) {
 			currentVolume = parseFloat(e.target.value);
-			waveform?.setVolume(currentVolume);
+			waveform.setVolume(currentVolume);
 		}
 	}}
 />

sourceviewer/frontend/shared/WaveformControls.svelte

@@ -10,7 +10,7 @@
 	import VolumeLevels from "./VolumeLevels.svelte";
 	import VolumeControl from "./VolumeControl.svelte";
 
-	export let waveform: WaveSurfer | undefined;
+	export let waveform: WaveSurfer;
 	export let audio_duration: number;
 	export let i18n: I18nFormatter;
 	export let playing: boolean;
@@ -30,7 +30,7 @@
 	let playbackSpeeds = [0.5, 1, 1.5, 2];
 	let playbackSpeed = playbackSpeeds[1];
 
-	let trimRegion: RegionsPlugin | null = null;
+	let trimRegion: RegionsPlugin;
 	let activeRegion: Region | null = null;
 
 	let leftRegionHandle: HTMLDivElement | null;
@@ -39,10 +39,7 @@
 
 	let currentVolume = 1;
 
-	$: trimRegion =
-		container && waveform
-			? waveform.registerPlugin(RegionsPlugin.create())
-			: null;
+	$: trimRegion = waveform.registerPlugin(RegionsPlugin.create());
 
 	$: trimRegion?.on("region-out", (region) => {
 		region.play();
@@ -59,8 +56,7 @@
 	});
 
 	const addTrimRegion = (): void => {
-		if (!trimRegion) return;
-		activeRegion = trimRegion?.addRegion({
+		activeRegion = trimRegion.addRegion({
 			start: audio_duration / 4,
 			end: audio_duration / 2,
 			...trim_region_settings
@@ -194,7 +190,7 @@
 						(playbackSpeeds.indexOf(playbackSpeed) + 1) % playbackSpeeds.length
 					];
 
-				waveform?.setPlaybackRate(playbackSpeed);
+				waveform.setPlaybackRate(playbackSpeed);
 			}}
 		>
 			<span>{playbackSpeed}x</span>
@@ -209,7 +205,7 @@
 				waveform_options.skip_length
 			)} seconds`}
 			on:click={() =>
-				waveform?.skip(
+				waveform.skip(
 					get_skip_rewind_amount(audio_duration, waveform_options.skip_length) *
 						-1
 				)}
@@ -218,7 +214,7 @@
 		</button>
 		<button
 			class="play-pause-button icon"
-			on:click={() => waveform?.playPause()}
+			on:click={() => waveform.playPause()}
 			aria-label={playing ? i18n("audio.pause") : i18n("audio.play")}
 		>
 			{#if playing}
@@ -234,7 +230,7 @@
 				waveform_options.skip_length
 			)} seconds"
 			on:click={() =>
-				waveform?.skip(
+				waveform.skip(
 					get_skip_rewind_amount(audio_duration, waveform_options.skip_length)
 				)}
 		>
@@ -322,12 +318,7 @@
 			grid-template-areas:
 				"playback playback"
 				"controls editing";
-		}
-	}
-
-	@media (max-width: 319px) {
-		.controls {
-			overflow-x: scroll;
+			overflow: scroll;
 		}
 	}
 

sourceviewer/frontend/shared/WaveformRecordControls.svelte

@@ -6,7 +6,6 @@
 
 	export let record: RecordPlugin;
 	export let i18n: I18nFormatter;
-	export let recording = false;
 
 	let micDevices: MediaDeviceInfo[] = [];
 	let recordButton: HTMLButtonElement;
@@ -14,7 +13,6 @@
 	let resumeButton: HTMLButtonElement;
 	let stopButton: HTMLButtonElement;
 	let stopButtonPaused: HTMLButtonElement;
-	let recording_ongoing = false;
 
 	export let record_time: string;
 	export let show_recording_waveform: boolean | undefined;
@@ -55,14 +53,6 @@
 		stopButton.style.display = "flex";
 		stopButtonPaused.style.display = "none";
 	});
-
-	$: if (recording && !recording_ongoing) {
-		record.startRecording();
-		recording_ongoing = true;
-	} else {
-		record.stopRecording();
-		recording_ongoing = false;
-	}
 </script>
 
 <div class="controls">
@@ -141,9 +131,9 @@
 		height: var(--size-8);
 		width: var(--size-20);
 		background-color: var(--block-background-fill);
-		border-radius: var(--button-large-radius);
+		border-radius: var(--radius-3xl);
 		align-items: center;
-		border: 1px solid var(--block-border-color);
+		border: 1px solid var(--neutral-400);
 		margin: var(--size-1) var(--size-1) 0 0;
 	}
 
@@ -170,7 +160,7 @@
 		height: var(--size-8);
 		width: var(--size-20);
 		background-color: var(--block-background-fill);
-		border-radius: var(--button-large-radius);
+		border-radius: var(--radius-3xl);
 		align-items: center;
 		border: 1px solid var(--primary-600);
 		margin: var(--size-1) var(--size-1) 0 0;
@@ -189,10 +179,10 @@
 		height: var(--size-8);
 		width: var(--size-24);
 		background-color: var(--block-background-fill);
-		border-radius: var(--button-large-radius);
+		border-radius: var(--radius-3xl);
 		display: flex;
 		align-items: center;
-		border: 1px solid var(--block-border-color);
+		border: 1px solid var(--neutral-400);
 	}
 
 	.stop-button:disabled {
@@ -223,8 +213,8 @@
 		display: none;
 		height: var(--size-8);
 		width: var(--size-20);
-		border: 1px solid var(--block-border-color);
-		border-radius: var(--button-large-radius);
+		border: 1px solid var(--neutral-400);
+		border-radius: var(--radius-3xl);
 		padding: var(--spacing-md);
 		margin: var(--size-1) var(--size-1) 0 0;
 	}
@@ -233,8 +223,8 @@
 		display: none;
 		height: var(--size-8);
 		width: var(--size-20);
-		border: 1px solid var(--block-border-color);
-		border-radius: var(--button-large-radius);
+		border: 1px solid var(--neutral-400);
+		border-radius: var(--radius-3xl);
 		padding: var(--spacing-xl);
 		line-height: 1px;
 		font-size: var(--text-md);
@@ -245,7 +235,8 @@
 		display: flex;
 		height: var(--size-8);
 		width: var(--size-20);
-		border: 1px solid var(--block-border-color);
+		border: 1px solid var(--neutral-400);
+		border-radius: var(--radius-3xl);
 		padding: var(--spacing-md);
 		align-items: center;
 		justify-content: center;

sourceviewer/frontend/static/StaticAudio.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
 	import { uploadToHuggingFace } from "@gradio/utils";
 	import { Empty } from "@gradio/atoms";
-	import {
-		ShareButton,
-		IconButton,
-		BlockLabel,
-		IconButtonWrapper
-	} from "@gradio/atoms";
+	import { ShareButton, IconButton, BlockLabel } from "@gradio/atoms";
 	import { Download, Music } from "@gradio/icons";
 	import type { I18nFormatter } from "@gradio/utils";
 	import AudioPlayer from "../player/AudioPlayer.svelte";
@@ -24,7 +19,6 @@
 	export let waveform_settings: Record<string, any>;
 	export let waveform_options: WaveformOptions;
 	export let editable = true;
-	export let loop: boolean;
 
 	const dispatch = createEventDispatcher<{
 		change: FileData;
@@ -45,14 +39,9 @@
 />
 
 {#if value !== null}
-	<IconButtonWrapper>
+	<div class="icon-buttons">
 		{#if show_download_button}
-			<DownloadLink
-				href={value.is_stream
-					? value.url?.replace("playlist.m3u8", "playlist-file")
-					: value.url}
-				download={value.orig_name || value.path}
-			>
+			<DownloadLink href={value.url} download={value.orig_name || value.path}>
 				<IconButton Icon={Download} label={i18n("common.download")} />
 			</DownloadLink>
 		{/if}
@@ -69,7 +58,7 @@
 				{value}
 			/>
 		{/if}
-	</IconButtonWrapper>
+	</div>
 
 	<AudioPlayer
 		{value}
@@ -78,14 +67,22 @@
 		{waveform_settings}
 		{waveform_options}
 		{editable}
-		{loop}
 		on:pause
 		on:play
 		on:stop
-		on:load
 	/>
 {:else}
 	<Empty size="small">
 		<Music />
 	</Empty>
 {/if}
+
+<style>
+	.icon-buttons {
+		display: flex;
+		position: absolute;
+		top: 6px;
+		right: 6px;
+		gap: var(--size-1);
+	}
+</style>

sourceviewer/frontend/streaming/StreamAudio.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import type { I18nFormatter } from "@gradio/utils";
-	import { Spinner } from "@gradio/icons";
 	import WaveSurfer from "wavesurfer.js";
 	import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
 	import type { WaveformOptions } from "../shared/types";
@@ -16,7 +15,6 @@
 	export let waveform_options: WaveformOptions = {
 		show_recording_waveform: true
 	};
-	export let waiting = false;
 
 	let micWaveform: WaveSurfer;
 	let waveformRecord: RecordPlugin;
@@ -50,7 +48,7 @@
 		/>
 	{/if}
 	<div class="controls">
-		{#if recording && !waiting}
+		{#if recording}
 			<button
 				class={paused_recording ? "stop-button-paused" : "stop-button"}
 				on:click={() => {
@@ -64,18 +62,6 @@
 				</span>
 				{paused_recording ? i18n("audio.pause") : i18n("audio.stop")}
 			</button>
-		{:else if recording && waiting}
-			<button
-				class="spinner-button"
-				on:click={() => {
-					stop();
-				}}
-			>
-				<div class="icon">
-					<Spinner />
-				</div>
-				{i18n("audio.waiting")}
-			</button>
 		{:else}
 			<button
 				class="record-button"
@@ -109,21 +95,14 @@
 		margin: var(--spacing-xl);
 	}
 
-	.icon {
-		width: var(--size-4);
-		height: var(--size-4);
-		fill: var(--primary-600);
-		stroke: var(--primary-600);
-	}
-
 	.stop-button-paused {
 		display: none;
 		height: var(--size-8);
 		width: var(--size-20);
 		background-color: var(--block-background-fill);
-		border-radius: var(--button-large-radius);
+		border-radius: var(--radius-3xl);
 		align-items: center;
-		border: 1px solid var(--block-border-color);
+		border: 1px solid var(--neutral-400);
 		margin-right: 5px;
 	}
 
@@ -150,23 +129,11 @@
 		height: var(--size-8);
 		width: var(--size-20);
 		background-color: var(--block-background-fill);
-		border-radius: var(--button-large-radius);
-		align-items: center;
-		border: 1px solid var(--primary-600);
-		margin-right: 5px;
-		display: flex;
-	}
-
-	.spinner-button {
-		height: var(--size-8);
-		width: var(--size-24);
-		background-color: var(--block-background-fill);
 		border-radius: var(--radius-3xl);
 		align-items: center;
 		border: 1px solid var(--primary-600);
-		margin: 0 var(--spacing-xl);
+		margin-right: 5px;
 		display: flex;
-		justify-content: space-evenly;
 	}
 
 	.record-button::before {
@@ -182,10 +149,10 @@
 		height: var(--size-8);
 		width: var(--size-24);
 		background-color: var(--block-background-fill);
-		border-radius: var(--button-large-radius);
+		border-radius: var(--radius-3xl);
 		display: flex;
 		align-items: center;
-		border: 1px solid var(--block-border-color);
+		border: 1px solid var(--neutral-400);
 	}
 
 	@keyframes scaling {

sourceviewer/pyproject.toml

@@ -19,9 +19,10 @@ keywords = [
   "gradio-template-Audio"
 ]
 # Add dependencies here
-dependencies = ["gradio>=4.0,<6.0"]
+dependencies = ["gradio>=4.0,<5.0"]
 classifiers = [
   'Development Status :: 3 - Alpha',
+  'License :: OSI Approved :: Apache Software License',
   'Operating System :: OS Independent',
   'Programming Language :: Python :: 3',
   'Programming Language :: Python :: 3 :: Only',
@@ -34,16 +35,6 @@ classifiers = [
   'Topic :: Scientific/Engineering :: Visualization',
 ]
 
-# The repository and space URLs are optional, but recommended.
-# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
-# Adding a space URL will create a badge in the auto-generated README that links to the space.
-# This will make it easy for people to find your deployed demo or source code when they
-# encounter your project in the wild.
-
-# [project.urls]
-# repository = "your github repository"
-# space = "your space url"
-
 [project.optional-dependencies]
 dev = ["build", "twine"]