From 03838573c9716ff9eec3fee1ba1cc0fc69849f4b Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Thu, 7 Apr 2022 18:18:41 +0100
Subject: [PATCH] allow audio components to take a string value (#930)

* allow audio components to take a string value

* normalise audio + video input data types

* tweaks
---
 .../app/src/components/Audio/Audio.svelte     | 22 ++++++++++------
 .../src/components/Checkbox/Checkbox.svelte   |  2 +-
 .../app/src/components/Column/Column.svelte   |  3 ++-
 .../src/components/Dropdown/Dropdown.svelte   |  5 ++--
 .../app/src/components/File/File.svelte       | 18 ++++++++++---
 .../app/src/components/HTML/HTML.svelte       |  5 ++--
 .../HighlightedText/HighlightedText.svelte    |  5 ++--
 .../app/src/components/Image/Image.svelte     |  7 +++--
 ui/packages/app/src/components/Row/Row.svelte |  3 ++-
 .../app/src/components/Slider/Slider.svelte   |  5 ++--
 .../app/src/components/Video/Video.svelte     | 26 ++++++++++++-------
 ui/packages/audio/src/Audio.svelte            |  5 ++--
 ui/packages/chatbot/src/ChatBot.svelte        |  3 +++
 ui/packages/file/src/FileUpload.svelte        |  3 ++-
 ui/packages/form/src/Checkbox.svelte          |  1 +
 ui/packages/form/src/CheckboxGroup.svelte     |  1 +
 ui/packages/form/src/Dropdown.svelte          |  1 +
 ui/packages/form/src/Number.svelte            |  1 +
 ui/packages/form/src/Radio.svelte             |  1 +
 ui/packages/form/src/Textbox.svelte           |  5 +---
 .../src/HighlightedText.svelte                |  1 +
 ui/packages/html/src/HTML.svelte              |  4 +--
 ui/packages/image/src/Image.svelte            |  1 +
 ui/packages/upload/src/index.ts               |  1 +
 ui/packages/upload/src/utils.ts               | 13 ++++++++++
 ui/packages/video/src/Video.svelte            |  1 +
 ui/pnpm-lock.yaml                             | 16 +++++++++++-
 27 files changed, 108 insertions(+), 51 deletions(-)
 create mode 100644 ui/packages/upload/src/utils.ts

diff --git a/ui/packages/app/src/components/Audio/Audio.svelte b/ui/packages/app/src/components/Audio/Audio.svelte
index c4224528e5..b2b4b7c91b 100644
--- a/ui/packages/app/src/components/Audio/Audio.svelte
+++ b/ui/packages/app/src/components/Audio/Audio.svelte
@@ -1,33 +1,39 @@
 <script lang="ts">
 	import { Audio } from "@gradio/audio";
 	import type { FileData } from "@gradio/upload";
+	import { normalise_file } from "@gradio/upload";
 
 	export let mode: "static" | "dynamic";
-	export let value: null | FileData = null;
-	export let theme: string;
+	export let value: null | FileData | string = null;
+	export let default_value: null | FileData | string = null;
 	export let style: string | null;
 	export let name: string;
 	export let source: "microphone" | "upload";
 	export let type: "normal" | "numpy" = "normal";
 	export let label: string;
+
+	if (default_value) value = default_value;
+
+	let _value: null | FileData;
+	$: _value = normalise_file(value);
 </script>
 
 {#if mode === "dynamic"}
 	<Audio
-		{value}
-		{theme}
+		{label}
+		value={_value}
+		on:change={({ detail }) => (value = detail)}
 		{style}
 		{name}
 		{source}
 		{type}
-		on:change={({ detail }) => (value = detail)}
 		on:edit
 		on:play
 		on:pause
 		on:ended
 	/>
-{:else if value}
-	<audio {theme} {style} controls>
-		<source src={value.data} />
+{:else if _value}
+	<audio {style} controls>
+		<source src={_value.data} />
 	</audio>
 {/if}
diff --git a/ui/packages/app/src/components/Checkbox/Checkbox.svelte b/ui/packages/app/src/components/Checkbox/Checkbox.svelte
index 83d078118f..43723d7dbe 100644
--- a/ui/packages/app/src/components/Checkbox/Checkbox.svelte
+++ b/ui/packages/app/src/components/Checkbox/Checkbox.svelte
@@ -3,7 +3,7 @@
 
 	export let value: boolean = false;
 	export let default_value: boolean = false;
-	export let style: string | null;
+	export let style: string = "";
 	export let label: string;
 	export let mode: "static" | "dynamic";
 
diff --git a/ui/packages/app/src/components/Column/Column.svelte b/ui/packages/app/src/components/Column/Column.svelte
index 9cadeedbf1..5a74d3ff80 100644
--- a/ui/packages/app/src/components/Column/Column.svelte
+++ b/ui/packages/app/src/components/Column/Column.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	export let value: boolean = true;
+	export let default_value: boolean;
 	export let style: string = "";
 
-	if ($$props.default) value = $$props.default;
+	if (default_value) value = default_value;
 </script>
 
 <div {style} class:hidden={!value} class="flex flex-1 flex-col gap-4">
diff --git a/ui/packages/app/src/components/Dropdown/Dropdown.svelte b/ui/packages/app/src/components/Dropdown/Dropdown.svelte
index 2ea960bdd2..4683f50197 100644
--- a/ui/packages/app/src/components/Dropdown/Dropdown.svelte
+++ b/ui/packages/app/src/components/Dropdown/Dropdown.svelte
@@ -3,11 +3,10 @@
 	export let label: string = "";
 	export let value: string = "";
 	export let default_value: string = "";
-	export let theme: string;
-	export let style: string | null;
+	export let style: string = "";
 	export let choices: Array<string>;
 
 	if (default_value) value = default_value;
 </script>
 
-<Dropdown bind:value {theme} {style} {choices} {label} on:change />
+<Dropdown bind:value {style} {choices} {label} on:change />
diff --git a/ui/packages/app/src/components/File/File.svelte b/ui/packages/app/src/components/File/File.svelte
index c52f35b3e5..70c23cc1c6 100644
--- a/ui/packages/app/src/components/File/File.svelte
+++ b/ui/packages/app/src/components/File/File.svelte
@@ -1,18 +1,28 @@
 <script lang="ts">
 	import { File, FileUpload } from "@gradio/file";
 	import type { FileData } from "@gradio/upload";
+	import { normalise_file } from "@gradio/upload";
 
 	export let value: null | FileData = null;
 	export let default_value: null | FileData = null;
 	export let theme: string;
-	export let style: string | null;
+	export let style: string = "";
 	export let mode: "static" | "dynamic";
 
 	if (default_value) value = default_value;
+
+	let _value: null | FileData;
+	$: _value = normalise_file(value);
 </script>
 
 {#if mode === "dynamic"}
-	<FileUpload bind:value {theme} {style} on:change on:clear />
-{:else if value}
-	<File {value} {theme} {style} />
+	<FileUpload
+		value={_value}
+		on:change={({ detail }) => (value = detail)}
+		{style}
+		on:change
+		on:clear
+	/>
+{:else if _value}
+	<File value={_value} {theme} {style} />
 {/if}
diff --git a/ui/packages/app/src/components/HTML/HTML.svelte b/ui/packages/app/src/components/HTML/HTML.svelte
index 0704f0de7e..07c0417f5f 100644
--- a/ui/packages/app/src/components/HTML/HTML.svelte
+++ b/ui/packages/app/src/components/HTML/HTML.svelte
@@ -5,8 +5,7 @@
 	export let label: string;
 	export let value: string;
 	export let default_value: string;
-	export let theme: string;
-	export let style: string | null;
+	export let style: string = "";
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
@@ -15,4 +14,4 @@
 	if (default_value) value = default_value;
 </script>
 
-<HTML {value} {theme} {style} on:change />
+<HTML {value} {style} on:change />
diff --git a/ui/packages/app/src/components/HighlightedText/HighlightedText.svelte b/ui/packages/app/src/components/HighlightedText/HighlightedText.svelte
index 3ab028d614..96814af519 100644
--- a/ui/packages/app/src/components/HighlightedText/HighlightedText.svelte
+++ b/ui/packages/app/src/components/HighlightedText/HighlightedText.svelte
@@ -4,8 +4,7 @@
 
 	export let value: Array<[string, string | number]>;
 	export let default_value: Array<[string, string | number]>;
-	export let theme: string;
-	export let style: string | null;
+	export let style: string = "";
 	export let show_legend: boolean;
 	export let color_map: Record<string, string> = {};
 
@@ -16,4 +15,4 @@
 	$: value, dispatch("change");
 </script>
 
-<HighlightedText {value} {theme} {style} {show_legend} {color_map} />
+<HighlightedText {value} {style} {show_legend} {color_map} />
diff --git a/ui/packages/app/src/components/Image/Image.svelte b/ui/packages/app/src/components/Image/Image.svelte
index 7729aa45c4..1a9434a066 100644
--- a/ui/packages/app/src/components/Image/Image.svelte
+++ b/ui/packages/app/src/components/Image/Image.svelte
@@ -4,10 +4,10 @@
 
 	export let value: null | string = null;
 	export let default_value: null | string = null;
-	export let theme: string;
-	export let style: string | null;
+	export let style: string = "";
 	export let source: "canvas" | "webcam" | "upload" = "upload";
 	export let tool: "editor" | "select" = "editor";
+	export let label: string;
 
 	export let mode: "static" | "dynamic";
 
@@ -21,7 +21,6 @@
 {#if mode === "static"}
 	<div
 		class="output-image w-full h-60 flex justify-center items-center bg-gray-200 dark:bg-gray-600 relative"
-		{theme}
 		{style}
 	>
 		<!-- svelte-ignore a11y-missing-attribute -->
@@ -30,12 +29,12 @@
 {:else}
 	<Image
 		bind:value
-		{theme}
 		{style}
 		{source}
 		{tool}
 		on:edit
 		on:clear
 		on:change
+		{label}
 	/>
 {/if}
diff --git a/ui/packages/app/src/components/Row/Row.svelte b/ui/packages/app/src/components/Row/Row.svelte
index f5ea07d5b7..3e80ee4ec8 100644
--- a/ui/packages/app/src/components/Row/Row.svelte
+++ b/ui/packages/app/src/components/Row/Row.svelte
@@ -1,8 +1,9 @@
 <script lang="ts">
 	export let value: boolean;
+	export let default_value: boolean;
 	export let style: string = "";
 
-	if ($$props.default_value) value = $$props.default_value;
+	if (default_value) value = default_value;
 </script>
 
 <div {style} class:hidden={!value} class="flex flex-row gap-4">
diff --git a/ui/packages/app/src/components/Slider/Slider.svelte b/ui/packages/app/src/components/Slider/Slider.svelte
index 536df1c2d0..2647f8846f 100644
--- a/ui/packages/app/src/components/Slider/Slider.svelte
+++ b/ui/packages/app/src/components/Slider/Slider.svelte
@@ -5,8 +5,8 @@
 
 	export let label: string;
 	export let default_value: number;
-	export let theme: string;
-	export let style: string | null;
+
+	export let style: string = "";
 	export let minimum: number;
 	export let maximum: number;
 	export let step: number;
@@ -18,7 +18,6 @@
 <Range
 	bind:value
 	{label}
-	{theme}
 	{style}
 	{minimum}
 	{maximum}
diff --git a/ui/packages/app/src/components/Video/Video.svelte b/ui/packages/app/src/components/Video/Video.svelte
index 1e30794c87..de470fe22e 100644
--- a/ui/packages/app/src/components/Video/Video.svelte
+++ b/ui/packages/app/src/components/Video/Video.svelte
@@ -1,48 +1,54 @@
 <script lang="ts">
 	import type { FileData } from "@gradio/upload";
+	import { normalise_file } from "@gradio/upload";
 	import { playable } from "../utils/helpers";
 
 	import { Video } from "@gradio/video";
 	import { _ } from "svelte-i18n";
 
-	export let value: FileData | null = null;
+	export let value: FileData | null | string = null;
+	export let label: string;
 	export let default_value: FileData | null;
 	export let theme: string;
-	export let style: string | null;
+	export let style: string = "";
 	export let source: string;
 
 	export let mode: "static" | "dynamic";
 
 	if (default_value) value = default_value;
+
+	let _value: null | FileData;
+	$: _value = normalise_file(value);
 </script>
 
-{#if mode === "static" && value}
+{#if mode === "static" && _value}
 	<div
 		class="output-video w-full h-60 flex justify-center items-center bg-gray-200 dark:bg-gray-600 relative"
 	>
-		{#if playable(value.name)}
+		{#if playable(_value.data)}
 			<!-- svelte-ignore a11y-media-has-caption -->
 			<video
 				class="video_preview w-full h-full object-contain"
 				controls
 				playsInline
 				preload="auto"
-				src={value.data}
+				src={_value.data}
 			/>
 		{:else}
 			<a
-				href={value.data}
-				download={value.name}
+				href={_value.data}
+				download={_value.name}
 				class="file-preview h-60 w-full flex flex-col justify-center items-center relative"
 			>
-				<div class="file-name text-4xl p-6 break-all">{value.name}</div>
+				<div class="file-name text-4xl p-6 break-all">{_value.name}</div>
 			</a>
 		{/if}
 	</div>
 {:else}
 	<Video
-		bind:value
-		{theme}
+		value={_value}
+		on:change={({ detail }) => (value = detail)}
+		{label}
 		{style}
 		{source}
 		drop_text={$_("interface.drop_video")}
diff --git a/ui/packages/audio/src/Audio.svelte b/ui/packages/audio/src/Audio.svelte
index 021fbaf737..67cc99f56d 100644
--- a/ui/packages/audio/src/Audio.svelte
+++ b/ui/packages/audio/src/Audio.svelte
@@ -16,6 +16,7 @@
 	import audio_icon from "./music.svg";
 
 	export let value: null | { name: string; data: string } = null;
+	export let label: string;
 	export let style: string | null;
 	export let name: string;
 	export let source: "microphone" | "upload" | "none";
@@ -125,7 +126,7 @@
 	}: {
 		detail: { values: [number, number] };
 	}) {
-		if (!value?.data) return;
+		if (!value) return;
 
 		dispatch("change", {
 			data: value.data,
@@ -154,7 +155,7 @@
 	color={dragging ? "green" : "grey"}
 	padding={false}
 >
-	<BlockLabel image={audio_icon} label={"Audio"} />
+	<BlockLabel image={audio_icon} label={label || "Audio"} />
 	{#if value === null}
 		{#if source === "microphone"}
 			{#if recording}
diff --git a/ui/packages/chatbot/src/ChatBot.svelte b/ui/packages/chatbot/src/ChatBot.svelte
index 704a481322..2cf9d2ba5f 100644
--- a/ui/packages/chatbot/src/ChatBot.svelte
+++ b/ui/packages/chatbot/src/ChatBot.svelte
@@ -1,6 +1,9 @@
 <script lang="ts">
 	import { beforeUpdate, afterUpdate, createEventDispatcher } from "svelte";
+
 	export let value: Array<[string, string]>;
+	export let style: string = "";
+
 	let div: HTMLDivElement;
 	let autoscroll: Boolean;
 
diff --git a/ui/packages/file/src/FileUpload.svelte b/ui/packages/file/src/FileUpload.svelte
index ec4ff2b41f..bbb9b29236 100644
--- a/ui/packages/file/src/FileUpload.svelte
+++ b/ui/packages/file/src/FileUpload.svelte
@@ -8,11 +8,12 @@
 	import file_icon from "./file.svg";
 
 	export let value: null | FileData;
-
 	export let drop_text: string = "Drop a file file";
 	export let or_text: string = "or";
 	export let upload_text: string = "click to upload";
 	export let label: string = "";
+	export let style: string;
+
 	let file_count: string;
 
 	function handle_upload({ detail }: CustomEvent<FileData>) {
diff --git a/ui/packages/form/src/Checkbox.svelte b/ui/packages/form/src/Checkbox.svelte
index c225508a78..0cd379c00d 100644
--- a/ui/packages/form/src/Checkbox.svelte
+++ b/ui/packages/form/src/Checkbox.svelte
@@ -6,6 +6,7 @@
 	export let value: boolean;
 	export let disabled: boolean = false;
 	export let label: string;
+	export let style: string;
 
 	const dispatch = createEventDispatcher<{ change: boolean }>();
 
diff --git a/ui/packages/form/src/CheckboxGroup.svelte b/ui/packages/form/src/CheckboxGroup.svelte
index 9cbb1f1890..1f9e09568f 100644
--- a/ui/packages/form/src/CheckboxGroup.svelte
+++ b/ui/packages/form/src/CheckboxGroup.svelte
@@ -6,6 +6,7 @@
 	export let choices: Array<string>;
 	export let disabled: boolean = false;
 	export let label: string;
+	export let style: string;
 
 	const dispatch = createEventDispatcher<{ change: Array<string> }>();
 
diff --git a/ui/packages/form/src/Dropdown.svelte b/ui/packages/form/src/Dropdown.svelte
index 5eb13decf0..9e676b47c8 100644
--- a/ui/packages/form/src/Dropdown.svelte
+++ b/ui/packages/form/src/Dropdown.svelte
@@ -5,6 +5,7 @@
 	export let label: string;
 	export let value: string | undefined = undefined;
 	export let choices: Array<string>;
+	export let style: string;
 
 	const dispatch = createEventDispatcher<{ change: string }>();
 
diff --git a/ui/packages/form/src/Number.svelte b/ui/packages/form/src/Number.svelte
index 3904875e0b..a4a15262c7 100644
--- a/ui/packages/form/src/Number.svelte
+++ b/ui/packages/form/src/Number.svelte
@@ -5,6 +5,7 @@
 	export let value: number = 0;
 	export let disabled: boolean = false;
 	export let label: string;
+	export let style: string;
 
 	const dispatch =
 		createEventDispatcher<{ change: number; submit: undefined }>();
diff --git a/ui/packages/form/src/Radio.svelte b/ui/packages/form/src/Radio.svelte
index 26bcfafc79..99944a719f 100644
--- a/ui/packages/form/src/Radio.svelte
+++ b/ui/packages/form/src/Radio.svelte
@@ -6,6 +6,7 @@
 	export let choices: Array<string>;
 	export let disabled: boolean = false;
 	export let label: string;
+	export let style: string;
 
 	const dispatch = createEventDispatcher();
 
diff --git a/ui/packages/form/src/Textbox.svelte b/ui/packages/form/src/Textbox.svelte
index c47f67e799..02e5ac4d89 100644
--- a/ui/packages/form/src/Textbox.svelte
+++ b/ui/packages/form/src/Textbox.svelte
@@ -3,11 +3,10 @@
 	import { BlockTitle, Block } from "@gradio/atoms";
 
 	export let value: string = "";
-	export let theme: string = "default";
 	export let lines: number = 1;
 	export let placeholder: string = "";
-	export let style = "";
 	export let label: string;
+	export let style: string;
 
 	const dispatch =
 		createEventDispatcher<{ change: string; submit: undefined }>();
@@ -38,7 +37,6 @@
 				class="block gr-box gr-input w-full gr-text-input"
 				bind:value
 				{placeholder}
-				{theme}
 				{style}
 				rows={lines}
 			/>
@@ -48,7 +46,6 @@
 				class="gr-box gr-input w-full gr-text-input"
 				{placeholder}
 				bind:value
-				{theme}
 				on:keypress={handle_keypress}
 				{style}
 			/>
diff --git a/ui/packages/highlighted-text/src/HighlightedText.svelte b/ui/packages/highlighted-text/src/HighlightedText.svelte
index ee2b346663..241d06d213 100644
--- a/ui/packages/highlighted-text/src/HighlightedText.svelte
+++ b/ui/packages/highlighted-text/src/HighlightedText.svelte
@@ -5,6 +5,7 @@
 	export let theme: string = "default";
 	export let show_legend: boolean = false;
 	export let color_map: Record<string, string> = {};
+	export let style: string;
 
 	let ctx: CanvasRenderingContext2D;
 
diff --git a/ui/packages/html/src/HTML.svelte b/ui/packages/html/src/HTML.svelte
index 7d4bba1056..86e68b8877 100644
--- a/ui/packages/html/src/HTML.svelte
+++ b/ui/packages/html/src/HTML.svelte
@@ -2,13 +2,13 @@
 	import { createEventDispatcher } from "svelte";
 
 	export let value: string;
-	export let theme: string = "default";
+	export let style: string;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
 	$: value, dispatch("change");
 </script>
 
-<div class="output-html" {theme}>
+<div class="output-html">
 	{@html value}
 </div>
diff --git a/ui/packages/image/src/Image.svelte b/ui/packages/image/src/Image.svelte
index 8bad5d4039..496a044159 100644
--- a/ui/packages/image/src/Image.svelte
+++ b/ui/packages/image/src/Image.svelte
@@ -14,6 +14,7 @@
 
 	export let value: null | string;
 	export let label: string;
+	export let style: string;
 
 	export let source: "canvas" | "webcam" | "upload" = "upload";
 	export let tool: "editor" | "select" = "editor";
diff --git a/ui/packages/upload/src/index.ts b/ui/packages/upload/src/index.ts
index b72d92096c..d4d33a387a 100644
--- a/ui/packages/upload/src/index.ts
+++ b/ui/packages/upload/src/index.ts
@@ -1,3 +1,4 @@
 export { default as Upload } from "./Upload.svelte";
 export { default as ModifyUpload } from "./ModifyUpload.svelte";
 export type { FileData } from "./types";
+export * from "./utils";
diff --git a/ui/packages/upload/src/utils.ts b/ui/packages/upload/src/utils.ts
new file mode 100644
index 0000000000..43fa57cc29
--- /dev/null
+++ b/ui/packages/upload/src/utils.ts
@@ -0,0 +1,13 @@
+import type { FileData } from "./types";
+
+export function normalise_file(
+	file: string | FileData | null
+): FileData | null {
+	if (file == null) return null;
+	if (typeof file === "string") {
+		return {
+			name: "file_data",
+			data: file
+		};
+	} else return file;
+}
diff --git a/ui/packages/video/src/Video.svelte b/ui/packages/video/src/Video.svelte
index 7370286643..a52ddd409b 100644
--- a/ui/packages/video/src/Video.svelte
+++ b/ui/packages/video/src/Video.svelte
@@ -12,6 +12,7 @@
 	export let theme: string = "default";
 	export let source: string;
 	export let label: string;
+	export let style: string;
 
 	export let drop_text: string = "Drop a video file";
 	export let or_text: string = "or";
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index e168ee130f..c46377d238 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -98,7 +98,7 @@ importers:
       '@gradio/upload': link:../upload
       '@gradio/video': link:../video
       mime-types: 2.1.34
-      svelte-i18n: 3.3.13_svelte@3.46.3
+      svelte-i18n: 3.3.13
 
   packages/audio:
     specifiers:
@@ -4340,6 +4340,20 @@ packages:
     dependencies:
       svelte: 3.46.3
 
+  /svelte-i18n/3.3.13:
+    resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
+    engines: {node: '>= 11.15.0'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.25.1
+    dependencies:
+      deepmerge: 4.2.2
+      estree-walker: 2.0.2
+      intl-messageformat: 9.11.4
+      sade: 1.8.1
+      tiny-glob: 0.2.9
+    dev: false
+
   /svelte-i18n/3.3.13_svelte@3.46.3:
     resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
     engines: {node: '>= 11.15.0'}