normalise audio + video input data types

gradio-app · Apr 7, 2022 · 2f0b98b · 2f0b98b
1 parent 0e0274b
commit 2f0b98b
Show file tree

Hide file tree

Showing 27 changed files with 109 additions and 52 deletions.
diff --git 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 | string = null;
-	export let theme: string;
+	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={typeof value === "string" ? value : 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -15,7 +15,8 @@
 
 	import audio_icon from "./music.svg";
 
-	export let value: null | { name: string; data: string } | string = null;
+	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 (typeof value === "string" || !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}
@@ -193,7 +194,7 @@
 			controls
 			bind:this={player}
 			preload="metadata"
-			src={typeof value === "string" ? value : value.data}
+			src={value.data}
 			on:play
 			on:pause
 			on:ended

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -6,6 +6,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
@@ -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();