From 8dd6f4bc1901792f05cd59e86df7b1dbab692739 Mon Sep 17 00:00:00 2001
From: Abubakar Abid <abubakar@huggingface.co>
Date: Mon, 29 Jan 2024 16:51:22 -0800
Subject: [PATCH] Handle the case where examples is `null` for all components
 (#7192)

* handle null examples

* add changeset

* add changeset

* lint

* merge conflict

* fixes

* add changeset

* stories

* feedback

* examples

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
---
 .changeset/warm-jokes-fetch.md                |  23 ++
 js/audio/AudioExample.stories.svelte          |  24 ++
 js/audio/Example.svelte                       |   4 +-
 js/checkbox/Example.svelte                    |   4 +-
 js/code/Example.svelte                        |   4 +-
 .../ColorPickerExample.stories.svelte         |  24 ++
 js/colorpicker/Example.svelte                 |   4 +-
 js/dataset/Index.svelte                       |  46 +--
 js/dropdown/Example.svelte                    |   4 +-
 js/file/Example.svelte                        |   4 +-
 js/fileexplorer/Example.svelte                |  16 +-
 js/image/Example.svelte                       |   9 +-
 js/image/ImageExample.stories.svelte          |  29 ++
 js/image/shared/Image.svelte                  |   6 +
 js/markdown/Example.svelte                    |   4 +-
 js/model3D/Example.svelte                     |   4 +-
 js/number/Example.svelte                      |   4 +-
 js/radio/Example.svelte                       |  12 +-
 js/simpledropdown/Example.svelte              |   4 +-
 js/simpleimage/Example.svelte                 |  21 +-
 js/simpletextbox/Example.svelte               |   4 +-
 js/textbox/Example.svelte                     |   4 +-
 js/textbox/TextboxExample.stories.svelte      |  24 ++
 js/video/Example.svelte                       |  40 +--
 pnpm-lock.yaml                                | 263 ++++++++++--------
 25 files changed, 380 insertions(+), 205 deletions(-)
 create mode 100644 .changeset/warm-jokes-fetch.md
 create mode 100644 js/audio/AudioExample.stories.svelte
 create mode 100644 js/colorpicker/ColorPickerExample.stories.svelte
 create mode 100644 js/image/ImageExample.stories.svelte
 create mode 100644 js/textbox/TextboxExample.stories.svelte

diff --git a/.changeset/warm-jokes-fetch.md b/.changeset/warm-jokes-fetch.md
new file mode 100644
index 0000000000000..53577b67d97a3
--- /dev/null
+++ b/.changeset/warm-jokes-fetch.md
@@ -0,0 +1,23 @@
+---
+"@gradio/audio": patch
+"@gradio/checkbox": patch
+"@gradio/code": patch
+"@gradio/colorpicker": patch
+"@gradio/dataset": patch
+"@gradio/dropdown": patch
+"@gradio/file": patch
+"@gradio/fileexplorer": patch
+"@gradio/image": patch
+"@gradio/markdown": patch
+"@gradio/model3d": patch
+"@gradio/number": patch
+"@gradio/radio": patch
+"@gradio/simpledropdown": patch
+"@gradio/simpleimage": patch
+"@gradio/simpletextbox": patch
+"@gradio/textbox": patch
+"@gradio/video": patch
+"gradio": patch
+---
+
+fix:Handle the case where examples is `null` for all components
diff --git a/js/audio/AudioExample.stories.svelte b/js/audio/AudioExample.stories.svelte
new file mode 100644
index 0000000000000..03be9fab22bd8
--- /dev/null
+++ b/js/audio/AudioExample.stories.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Audio from "./Example.svelte";
+</script>
+
+<Meta title="Components/Audio/Example" component={Audio} />
+
+<Template let:args>
+	<Audio {...args} />
+</Template>
+
+<Story
+	name="Audio file"
+	args={{
+		value: "cantina.mp3"
+	}}
+/>
+
+<Story
+	name="Null"
+	args={{
+		value: null
+	}}
+/>
diff --git a/js/audio/Example.svelte b/js/audio/Example.svelte
index 6b6a4a08c938f..1ebb90d67dd34 100644
--- a/js/audio/Example.svelte
+++ b/js/audio/Example.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -9,7 +9,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{value}
+	{value ? value : ""}
 </div>
 
 <style>
diff --git a/js/checkbox/Example.svelte b/js/checkbox/Example.svelte
index cef823f7ad31a..14222b070814b 100644
--- a/js/checkbox/Example.svelte
+++ b/js/checkbox/Example.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: boolean;
+	export let value: boolean | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -9,7 +9,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{value.toLocaleString()}
+	{value !== null ? value.toLocaleString() : ""}
 </div>
 
 <style>
diff --git a/js/code/Example.svelte b/js/code/Example.svelte
index fce2c118e2a54..ac0747465b0b8 100644
--- a/js/code/Example.svelte
+++ b/js/code/Example.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -7,7 +7,7 @@
 <pre
 	class:table={type === "table"}
 	class:gallery={type === "gallery"}
-	class:selected>{value}</pre>
+	class:selected>{value ? value : ""}</pre>
 
 <style>
 	pre {
diff --git a/js/colorpicker/ColorPickerExample.stories.svelte b/js/colorpicker/ColorPickerExample.stories.svelte
new file mode 100644
index 0000000000000..46570b979a5fc
--- /dev/null
+++ b/js/colorpicker/ColorPickerExample.stories.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import ColorPicker from "./Example.svelte";
+</script>
+
+<Meta title="Components/Color Picker/Example" component={ColorPicker} />
+
+<Template let:args>
+	<ColorPicker {...args} />
+</Template>
+
+<Story
+	name="Color value"
+	args={{
+		value: "#ff0000"
+	}}
+/>
+
+<Story
+	name="Null"
+	args={{
+		value: null
+	}}
+/>
diff --git a/js/colorpicker/Example.svelte b/js/colorpicker/Example.svelte
index 4dbfe735b2f8a..24309851e8c85 100644
--- a/js/colorpicker/Example.svelte
+++ b/js/colorpicker/Example.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
 
 <div
-	style="background-color: {value}"
+	style="background-color: {value ? value : 'black'}"
 	class:table={type === "table"}
 	class:gallery={type === "gallery"}
 	class:selected
diff --git a/js/dataset/Index.svelte b/js/dataset/Index.svelte
index d3b2cb74484bd..f9aed558450ec 100644
--- a/js/dataset/Index.svelte
+++ b/js/dataset/Index.svelte
@@ -129,28 +129,30 @@
 	{#if gallery}
 		<div class="gallery">
 			{#each selected_samples as sample_row, i}
-				<button
-					class="gallery-item"
-					on:click={() => {
-						value = i + page * samples_per_page;
-						gradio.dispatch("click", value);
-						gradio.dispatch("select", { index: value, value: sample_row });
-					}}
-					on:mouseenter={() => handle_mouseenter(i)}
-					on:mouseleave={() => handle_mouseleave()}
-				>
-					{#if component_meta.length && component_map.get(components[0])}
-						<svelte:component
-							this={component_meta[0][0].component}
-							{...component_props[0]}
-							value={sample_row[0]}
-							{samples_dir}
-							type="gallery"
-							selected={current_hover === i}
-							index={i}
-						/>
-					{/if}
-				</button>
+				{#if sample_row[0]}
+					<button
+						class="gallery-item"
+						on:click={() => {
+							value = i + page * samples_per_page;
+							gradio.dispatch("click", value);
+							gradio.dispatch("select", { index: value, value: sample_row });
+						}}
+						on:mouseenter={() => handle_mouseenter(i)}
+						on:mouseleave={() => handle_mouseleave()}
+					>
+						{#if component_meta.length && component_map.get(components[0])}
+							<svelte:component
+								this={component_meta[0][0].component}
+								{...component_props[0]}
+								value={sample_row[0]}
+								{samples_dir}
+								type="gallery"
+								selected={current_hover === i}
+								index={i}
+							/>
+						{/if}
+					</button>
+				{/if}
 			{/each}
 		</div>
 	{:else}
diff --git a/js/dropdown/Example.svelte b/js/dropdown/Example.svelte
index d529fbf99d512..961878e7a4331 100644
--- a/js/dropdown/Example.svelte
+++ b/js/dropdown/Example.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
-	export let value: string | string[];
+	export let value: string | string[] | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 	export let choices: [string, string | number][];
 
-	let value_array = Array.isArray(value) ? value : [value];
+	let value_array = value ? (Array.isArray(value) ? value : [value]) : [];
 	let names = value_array
 		.map(
 			(val) =>
diff --git a/js/file/Example.svelte b/js/file/Example.svelte
index ce553e17acf1e..765da0da0832f 100644
--- a/js/file/Example.svelte
+++ b/js/file/Example.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { FileData } from "@gradio/client";
 
-	export let value: FileData;
+	export let value: FileData | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -11,7 +11,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{Array.isArray(value) ? value.join(", ") : value}
+	{value ? (Array.isArray(value) ? value.join(", ") : value) : ""}
 </div>
 
 <style>
diff --git a/js/fileexplorer/Example.svelte b/js/fileexplorer/Example.svelte
index d12d422d51de9..dcdc22ea5c50d 100644
--- a/js/fileexplorer/Example.svelte
+++ b/js/fileexplorer/Example.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
-	import type { FileData } from "@gradio/client";
-
-	export let value: string[] | string;
+	export let value: string[] | string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -11,11 +9,13 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{#each Array.isArray(value) ? value.slice(0, 3) : [value] as path}
-		<li><code>./{path}</code></li>
-	{/each}
-	{#if Array.isArray(value) && value.length > 3}
-		<li class="extra">...</li>
+	{#if value}
+		{#each Array.isArray(value) ? value.slice(0, 3) : [value] as path}
+			<li><code>./{path}</code></li>
+		{/each}
+		{#if Array.isArray(value) && value.length > 3}
+			<li class="extra">...</li>
+		{/if}
 	{/if}
 </ul>
 
diff --git a/js/image/Example.svelte b/js/image/Example.svelte
index c14401e316931..0344b63823420 100644
--- a/js/image/Example.svelte
+++ b/js/image/Example.svelte
@@ -13,8 +13,11 @@
 	class:table={type === "table"}
 	class:gallery={type === "gallery"}
 	class:selected
+	class:border={value}
 >
-	<Image src={samples_dir + value?.path} alt="" />
+	{#if value}
+		<Image src={samples_dir + value.path} alt="" />
+	{/if}
 </div>
 
 <style>
@@ -26,10 +29,12 @@
 	.container.selected {
 		border-color: var(--border-color-accent);
 	}
+	.border.table {
+		border: 2px solid var(--border-color-primary);
+	}
 
 	.container.table {
 		margin: 0 auto;
-		border: 2px solid var(--border-color-primary);
 		border-radius: var(--radius-lg);
 		overflow: hidden;
 		width: var(--size-20);
diff --git a/js/image/ImageExample.stories.svelte b/js/image/ImageExample.stories.svelte
new file mode 100644
index 0000000000000..03c48a125f635
--- /dev/null
+++ b/js/image/ImageExample.stories.svelte
@@ -0,0 +1,29 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Image from "./Example.svelte";
+</script>
+
+<Meta title="Components/Image/Example" component={Image} />
+
+<Template let:args>
+	<Image {...args} />
+</Template>
+
+<Story
+	name="Image file"
+	args={{
+		samples_dir: "",
+		value: {
+			path: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			url: "https://gradio-builds.s3.amazonaws.com/demo-files/ghepardo-primo-piano.jpg",
+			orig_name: "cheetah.jpg"
+		}
+	}}
+/>
+
+<Story
+	name="Null"
+	args={{
+		value: null
+	}}
+/>
diff --git a/js/image/shared/Image.svelte b/js/image/shared/Image.svelte
index 628dd141bf06a..6284cef568a74 100644
--- a/js/image/shared/Image.svelte
+++ b/js/image/shared/Image.svelte
@@ -35,3 +35,9 @@
 
 <!-- svelte-ignore a11y-missing-attribute -->
 <img src={resolved_src} {...$$restProps} />
+
+<style>
+	img {
+		object-fit: cover;
+	}
+</style>
diff --git a/js/markdown/Example.svelte b/js/markdown/Example.svelte
index fa8f1b800ea77..40f17abb052be 100644
--- a/js/markdown/Example.svelte
+++ b/js/markdown/Example.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import MarkdownCode from "./shared/MarkdownCode.svelte";
 
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 	export let sanitize_html: boolean;
@@ -20,7 +20,7 @@
 	class="prose"
 >
 	<MarkdownCode
-		message={value}
+		message={value ? value : ""}
 		{latex_delimiters}
 		{sanitize_html}
 		{line_breaks}
diff --git a/js/model3D/Example.svelte b/js/model3D/Example.svelte
index 6b6a4a08c938f..1ebb90d67dd34 100644
--- a/js/model3D/Example.svelte
+++ b/js/model3D/Example.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -9,7 +9,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{value}
+	{value ? value : ""}
 </div>
 
 <style>
diff --git a/js/number/Example.svelte b/js/number/Example.svelte
index 6b6a4a08c938f..1ebb90d67dd34 100644
--- a/js/number/Example.svelte
+++ b/js/number/Example.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -9,7 +9,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{value}
+	{value ? value : ""}
 </div>
 
 <style>
diff --git a/js/radio/Example.svelte b/js/radio/Example.svelte
index f5b1bcb74651d..9a1a056b213e0 100644
--- a/js/radio/Example.svelte
+++ b/js/radio/Example.svelte
@@ -1,11 +1,17 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 	export let choices: [string, string | number][];
 
-	let name = choices.find((pair) => pair[1] === value);
-	let name_string = name ? name[0] : "";
+	let name_string: string;
+
+	if (value === null) {
+		name_string = "";
+	} else {
+		let name = choices.find((pair) => pair[1] === value);
+		name_string = name ? name[0] : "";
+	}
 </script>
 
 <div
diff --git a/js/simpledropdown/Example.svelte b/js/simpledropdown/Example.svelte
index 6b6a4a08c938f..1ebb90d67dd34 100644
--- a/js/simpledropdown/Example.svelte
+++ b/js/simpledropdown/Example.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
@@ -9,7 +9,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{value}
+	{value ? value : ""}
 </div>
 
 <style>
diff --git a/js/simpleimage/Example.svelte b/js/simpleimage/Example.svelte
index b71093ae7923c..a8f7f0680eaa6 100644
--- a/js/simpleimage/Example.svelte
+++ b/js/simpleimage/Example.svelte
@@ -7,14 +7,16 @@
 	export let selected = false;
 </script>
 
-<div
-	class="container"
-	class:table={type === "table"}
-	class:gallery={type === "gallery"}
-	class:selected
->
-	<img src={samples_dir + value?.path} alt="" />
-</div>
+{#if value}
+	<div
+		class="container"
+		class:table={type === "table"}
+		class:gallery={type === "gallery"}
+		class:selected
+	>
+		<img src={samples_dir + value.path} alt="" />
+	</div>
+{/if}
 
 <style>
 	.container :global(img) {
@@ -41,4 +43,7 @@
 		max-height: var(--size-20);
 		object-fit: cover;
 	}
+	.container img {
+		object-fit: cover;
+	}
 </style>
diff --git a/js/simpletextbox/Example.svelte b/js/simpletextbox/Example.svelte
index 1fdf7500fa285..e8e8130c2987f 100644
--- a/js/simpletextbox/Example.svelte
+++ b/js/simpletextbox/Example.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 
@@ -29,7 +29,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{value}
+	{value ? value : ""}
 </div>
 
 <style>
diff --git a/js/textbox/Example.svelte b/js/textbox/Example.svelte
index 1fdf7500fa285..e8e8130c2987f 100644
--- a/js/textbox/Example.svelte
+++ b/js/textbox/Example.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 
@@ -29,7 +29,7 @@
 	class:gallery={type === "gallery"}
 	class:selected
 >
-	{value}
+	{value ? value : ""}
 </div>
 
 <style>
diff --git a/js/textbox/TextboxExample.stories.svelte b/js/textbox/TextboxExample.stories.svelte
new file mode 100644
index 0000000000000..90765b03a835a
--- /dev/null
+++ b/js/textbox/TextboxExample.stories.svelte
@@ -0,0 +1,24 @@
+<script>
+	import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
+	import Textbox from "./Example.svelte";
+</script>
+
+<Meta title="Components/Textbox/Example" component={Textbox} />
+
+<Template let:args>
+	<Textbox {...args} />
+</Template>
+
+<Story
+	name="Text value"
+	args={{
+		value: "the quick brown fox"
+	}}
+/>
+
+<Story
+	name="Null"
+	args={{
+		value: null
+	}}
+/>
diff --git a/js/video/Example.svelte b/js/video/Example.svelte
index 34ac786787c49..305f343988f6f 100644
--- a/js/video/Example.svelte
+++ b/js/video/Example.svelte
@@ -20,25 +20,27 @@
 	}
 </script>
 
-{#if playable()}
-	<div
-		class="container"
-		class:table={type === "table"}
-		class:gallery={type === "gallery"}
-		class:selected
-	>
-		<Video
-			muted
-			playsinline
-			bind:node={video}
-			on:loadeddata={init}
-			on:mouseover={video.play.bind(video)}
-			on:mouseout={video.pause.bind(video)}
-			src={samples_dir + value?.video.path}
-		/>
-	</div>
-{:else}
-	<div>{value}</div>
+{#if value}
+	{#if playable()}
+		<div
+			class="container"
+			class:table={type === "table"}
+			class:gallery={type === "gallery"}
+			class:selected
+		>
+			<Video
+				muted
+				playsinline
+				bind:node={video}
+				on:loadeddata={init}
+				on:mouseover={video.play.bind(video)}
+				on:mouseout={video.pause.bind(video)}
+				src={samples_dir + value?.video.path}
+			/>
+		</div>
+	{:else}
+		<div>{value}</div>
+	{/if}
 {/if}
 
 <style>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fe8c7f4c793f3..78b73ee3b512e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,4 +1,4 @@
-lockfileVersion: '6.0'
+lockfileVersion: '6.1'
 
 settings:
   autoInstallPeers: true
@@ -262,16 +262,16 @@ importers:
         version: 2.0.0(@sveltejs/kit@1.26.0)
       '@sveltejs/kit':
         specifier: ^1.5.0
-        version: 1.26.0(svelte@4.2.3)(vite@4.5.0)
+        version: 1.26.0(svelte@4.2.2)(vite@4.5.0)
       prettier:
         specifier: ^3.0.0
         version: 3.0.0
       prettier-plugin-svelte:
         specifier: ^3.0.0
-        version: 3.0.0(prettier@3.0.0)(svelte@4.2.3)
+        version: 3.0.0(prettier@3.0.0)(svelte@4.2.2)
       svelte-check:
         specifier: ^3.0.1
-        version: 3.4.4(@babel/core@7.23.3)(less@4.2.0)(postcss@8.4.27)(svelte@4.2.3)
+        version: 3.4.4(@babel/core@7.23.3)(less@4.2.0)(postcss@8.4.27)(svelte@4.2.2)
       typescript:
         specifier: ^5.0.0
         version: 5.0.2
@@ -292,7 +292,7 @@ importers:
         version: 3.0.0
       mdsvex:
         specifier: ^0.11.0
-        version: 0.11.0(svelte@4.2.3)
+        version: 0.11.0(svelte@4.2.2)
       postcss:
         specifier: '>=8.3.3 <9.0.0'
         version: 8.4.27
@@ -305,7 +305,7 @@ importers:
         version: 2.0.2(@sveltejs/kit@1.27.6)
       '@sveltejs/kit':
         specifier: ^1.27.6
-        version: 1.27.6(svelte@4.2.3)(vite@4.5.0)
+        version: 1.27.6(svelte@4.2.2)(vite@4.5.0)
       '@tailwindcss/forms':
         specifier: ^0.5.0
         version: 0.5.0(tailwindcss@3.1.6)
@@ -4163,7 +4163,7 @@ packages:
     resolution: {integrity: sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==}
     dependencies:
       '@formatjs/intl-localematcher': 0.2.25
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@formatjs/ecma402-abstract@1.17.3:
@@ -4176,7 +4176,7 @@ packages:
   /@formatjs/fast-memoize@1.2.1:
     resolution: {integrity: sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@formatjs/fast-memoize@2.2.0:
@@ -4190,7 +4190,7 @@ packages:
     dependencies:
       '@formatjs/ecma402-abstract': 1.11.4
       '@formatjs/icu-skeleton-parser': 1.3.6
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@formatjs/icu-messageformat-parser@2.7.1:
@@ -4205,7 +4205,7 @@ packages:
     resolution: {integrity: sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==}
     dependencies:
       '@formatjs/ecma402-abstract': 1.11.4
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@formatjs/icu-skeleton-parser@1.6.3:
@@ -4218,7 +4218,7 @@ packages:
   /@formatjs/intl-localematcher@0.2.25:
     resolution: {integrity: sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==}
     dependencies:
-      tslib: 2.4.1
+      tslib: 2.6.2
     dev: false
 
   /@formatjs/intl-localematcher@0.5.0:
@@ -4227,6 +4227,86 @@ packages:
       tslib: 2.6.2
     dev: false
 
+  /@gradio/atoms@0.4.1(svelte@3.59.2):
+    resolution: {integrity: sha512-NkA5JBwglft0HpE/kfq2KA8f/2LvMcQ9yMBgAZD4wbp7O3i3HJ2+Gw4umKvUGNt53berq8Q+qT2qnFxc3qAGUQ==}
+    dependencies:
+      '@gradio/icons': 0.3.2
+      '@gradio/utils': 0.2.1(svelte@3.59.2)
+    transitivePeerDependencies:
+      - svelte
+    dev: false
+
+  /@gradio/client@0.10.1:
+    resolution: {integrity: sha512-C3uWIWEqlpTuG3sfPw3K3+26Fkr+jXPL8U2lC1u7DlBm25rHdGMVX17o8ApW7XcFtznfaLceVtpnDPkDpQTJlw==}
+    engines: {node: '>=18.0.0'}
+    dependencies:
+      bufferutil: 4.0.7
+      semiver: 1.1.0
+      ws: 8.16.0(bufferutil@4.0.7)
+    transitivePeerDependencies:
+      - utf-8-validate
+    dev: false
+
+  /@gradio/column@0.1.0:
+    resolution: {integrity: sha512-P24nqqVnMXBaDA1f/zSN5HZRho4PxP8Dq+7VltPHlmxIEiZYik2AJ4J0LeuIha34FDO0guu/16evdrpvGIUAfw==}
+    dev: false
+
+  /@gradio/icons@0.3.2:
+    resolution: {integrity: sha512-l0jGfSRFiZ/doAXz6L+JEp6MN/a1BTZm88kqVoSnYrKSytP6bnBLRWeF4UvOi2T2fbVrNKenAEt/lwxJE5vK4w==}
+    dev: false
+
+  /@gradio/statustracker@0.4.3(svelte@3.59.2):
+    resolution: {integrity: sha512-q1B4+I/O9eKoCIWW42xK/yxBGRRQZFfV2dVWxBcEmlX6A0r5FfkFHvs569lfVxdKrJDNlmtI55Idm97meYPaeg==}
+    dependencies:
+      '@gradio/atoms': 0.4.1(svelte@3.59.2)
+      '@gradio/column': 0.1.0
+      '@gradio/icons': 0.3.2
+      '@gradio/utils': 0.2.1(svelte@3.59.2)
+    transitivePeerDependencies:
+      - svelte
+    dev: false
+
+  /@gradio/theme@0.2.0:
+    resolution: {integrity: sha512-33c68Nk7oRXLn08OxPfjcPm7S4tXGOUV1I1bVgzdM2YV5o1QBOS1GEnXPZPu/CEYPePLMB6bsDwffrLEyLGWVQ==}
+    dev: false
+
+  /@gradio/upload@0.6.1(svelte@3.59.2):
+    resolution: {integrity: sha512-YsoGNFOt3OpvdU75hOsQyzzStmc5RKGMQVk2E84oxAU1n2JNjRd6Fm4Ms1VM6lPrb6azRKM20q4Z5a5kV0o+sQ==}
+    dependencies:
+      '@gradio/atoms': 0.4.1(svelte@3.59.2)
+      '@gradio/client': 0.10.1
+      '@gradio/icons': 0.3.2
+      '@gradio/utils': 0.2.1(svelte@3.59.2)
+    transitivePeerDependencies:
+      - svelte
+      - utf-8-validate
+    dev: false
+
+  /@gradio/utils@0.2.0(svelte@3.59.2):
+    resolution: {integrity: sha512-YkwzXufi6IxQrlMW+1sFo8Yn6F9NLL69ZoBsbo7QEhms0v5L7pmOTw+dfd7M3dwbRP2lgjrb52i1kAIN3n6aqQ==}
+    dependencies:
+      '@gradio/theme': 0.2.0
+      svelte-i18n: 3.6.0(svelte@3.59.2)
+    transitivePeerDependencies:
+      - svelte
+    dev: false
+
+  /@gradio/utils@0.2.1(svelte@3.59.2):
+    resolution: {integrity: sha512-7XnnY9R/FiJ55M2Sw+gHjSvTql5VWG3j2sh+Wt1jLnSURQARoAqizgo2Sg1WZU0igXzrrc9WVZdGE45m5qCHeg==}
+    dependencies:
+      '@gradio/theme': 0.2.0
+      svelte-i18n: 3.6.0(svelte@3.59.2)
+    transitivePeerDependencies:
+      - svelte
+    dev: false
+
+  /@gradio/wasm@0.5.0:
+    resolution: {integrity: sha512-XjAMa/rWz6x6hd6PHeq7XVELQMLhTKZrFUOZcGysIVR/b8E5SKfk5VquPfhmOmdwjuXDe77tMO+NSRY6o3hysA==}
+    dependencies:
+      '@types/path-browserify': 1.0.0
+      path-browserify: 1.0.1
+    dev: false
+
   /@humanwhocodes/config-array@0.11.13:
     resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==}
     engines: {node: '>=10.10.0'}
@@ -6469,7 +6549,7 @@ packages:
       util: 0.12.5
       util-deprecate: 1.0.2
       watchpack: 2.4.0
-      ws: 8.14.2
+      ws: 8.16.0(bufferutil@4.0.7)
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -6818,7 +6898,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.26.0(svelte@4.2.3)(vite@4.5.0)
+      '@sveltejs/kit': 1.26.0(svelte@4.2.2)(vite@4.5.0)
       import-meta-resolve: 2.2.2
     dev: true
 
@@ -6827,7 +6907,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^1.0.0
     dependencies:
-      '@sveltejs/kit': 1.27.6(svelte@4.2.3)(vite@4.5.0)
+      '@sveltejs/kit': 1.27.6(svelte@4.2.2)(vite@4.5.0)
       import-meta-resolve: 2.2.2
     dev: true
 
@@ -6836,7 +6916,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^1.5.0
     dependencies:
-      '@sveltejs/kit': 1.27.6(svelte@4.2.3)(vite@4.5.0)
+      '@sveltejs/kit': 1.27.6(svelte@4.2.2)(vite@4.5.0)
     dev: true
 
   /@sveltejs/adapter-vercel@3.0.3(@sveltejs/kit@1.27.6):
@@ -6844,7 +6924,7 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^1.5.0
     dependencies:
-      '@sveltejs/kit': 1.27.6(svelte@4.2.3)(vite@4.5.0)
+      '@sveltejs/kit': 1.27.6(svelte@4.2.2)(vite@4.5.0)
       '@vercel/nft': 0.23.1
       esbuild: 0.18.20
     transitivePeerDependencies:
@@ -6852,7 +6932,7 @@ packages:
       - supports-color
     dev: false
 
-  /@sveltejs/kit@1.26.0(svelte@4.2.3)(vite@4.5.0):
+  /@sveltejs/kit@1.26.0(svelte@4.2.2)(vite@4.5.0):
     resolution: {integrity: sha512-CV/AlTziC05yrz7UjVqEd0pH6+2dnrbmcnHGr2d3jXtmOgzNnlDkXtX8g3BfJ6nntsPD+0jtS2PzhvRHblRz4A==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
@@ -6861,7 +6941,7 @@ packages:
       svelte: ^3.54.0 || ^4.0.0-next.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.3)(vite@4.5.0)
+      '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.2)(vite@4.5.0)
       '@types/cookie': 0.5.4
       cookie: 0.5.0
       devalue: 4.3.2
@@ -6872,7 +6952,7 @@ packages:
       sade: 1.8.1
       set-cookie-parser: 2.6.0
       sirv: 2.0.3
-      svelte: 4.2.3
+      svelte: 4.2.2
       tiny-glob: 0.2.9
       undici: 5.26.5
       vite: 4.5.0(@types/node@20.3.2)(less@4.2.0)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.62.0)(sugarss@4.0.1)
@@ -6880,7 +6960,7 @@ packages:
       - supports-color
     dev: true
 
-  /@sveltejs/kit@1.27.6(svelte@4.2.3)(vite@4.5.0):
+  /@sveltejs/kit@1.27.6(svelte@4.2.2)(vite@4.5.0):
     resolution: {integrity: sha512-GsjTkMbKzXdbeRg0tk8S7HNShQ4879ftRr0ZHaZfjbig1xQwG57Bvcm9U9/mpLJtCapLbLWUnygKrgcLISLC8A==}
     engines: {node: ^16.14 || >=18}
     hasBin: true
@@ -6889,7 +6969,7 @@ packages:
       svelte: ^3.54.0 || ^4.0.0-next.0 || ^5.0.0-next.0
       vite: ^4.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.3)(vite@4.5.0)
+      '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.2)(vite@4.5.0)
       '@types/cookie': 0.5.4
       cookie: 0.5.0
       devalue: 4.3.2
@@ -6900,7 +6980,7 @@ packages:
       sade: 1.8.1
       set-cookie-parser: 2.6.0
       sirv: 2.0.3
-      svelte: 4.2.3
+      svelte: 4.2.2
       tiny-glob: 0.2.9
       undici: 5.26.5
       vite: 4.5.0(@types/node@20.3.2)(less@4.2.0)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.62.0)(sugarss@4.0.1)
@@ -6922,6 +7002,21 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@4.2.2)(vite@4.5.0):
+    resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==}
+    engines: {node: ^14.18.0 || >= 16}
+    peerDependencies:
+      '@sveltejs/vite-plugin-svelte': ^2.2.0
+      svelte: ^3.54.0 || ^4.0.0
+      vite: ^4.0.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 2.5.2(svelte@4.2.2)(vite@4.5.0)
+      debug: 4.3.4
+      svelte: 4.2.2
+      vite: 4.5.0(@types/node@20.3.2)(less@4.2.0)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.62.0)(sugarss@4.0.1)
+    transitivePeerDependencies:
+      - supports-color
+
   /@sveltejs/vite-plugin-svelte-inspector@1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@4.2.3)(vite@4.5.0):
     resolution: {integrity: sha512-zjiuZ3yydBtwpF3bj0kQNV0YXe+iKE545QGZVTaylW3eAzFr+pJ/cwK8lZEaRp4JtaJXhD5DyWAV4AxLh6DgaQ==}
     engines: {node: ^14.18.0 || >= 16}
@@ -6936,6 +7031,7 @@ packages:
       vite: 4.5.0(@types/node@20.3.2)(less@4.2.0)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.62.0)(sugarss@4.0.1)
     transitivePeerDependencies:
       - supports-color
+    dev: false
 
   /@sveltejs/vite-plugin-svelte@2.5.2(svelte@4.2.2)(vite@4.3.9):
     resolution: {integrity: sha512-Dfy0Rbl+IctOVfJvWGxrX/3m6vxPLH8o0x+8FA5QEyMUQMo4kGOVIojjryU7YomBAexOTAuYf1RT7809yDziaA==}
@@ -6956,6 +7052,25 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
+  /@sveltejs/vite-plugin-svelte@2.5.2(svelte@4.2.2)(vite@4.5.0):
+    resolution: {integrity: sha512-Dfy0Rbl+IctOVfJvWGxrX/3m6vxPLH8o0x+8FA5QEyMUQMo4kGOVIojjryU7YomBAexOTAuYf1RT7809yDziaA==}
+    engines: {node: ^14.18.0 || >= 16}
+    peerDependencies:
+      svelte: ^3.54.0 || ^4.0.0 || ^5.0.0-next.0
+      vite: ^4.0.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte-inspector': 1.0.4(@sveltejs/vite-plugin-svelte@2.5.2)(svelte@4.2.2)(vite@4.5.0)
+      debug: 4.3.4
+      deepmerge: 4.3.1
+      kleur: 4.1.5
+      magic-string: 0.30.5
+      svelte: 4.2.2
+      svelte-hmr: 0.15.3(svelte@4.2.2)
+      vite: 4.5.0(@types/node@20.3.2)(less@4.2.0)(lightningcss@1.21.7)(sass@1.66.1)(stylus@0.62.0)(sugarss@4.0.1)
+      vitefu: 0.2.5(vite@4.5.0)
+    transitivePeerDependencies:
+      - supports-color
+
   /@sveltejs/vite-plugin-svelte@2.5.2(svelte@4.2.3)(vite@4.5.0):
     resolution: {integrity: sha512-Dfy0Rbl+IctOVfJvWGxrX/3m6vxPLH8o0x+8FA5QEyMUQMo4kGOVIojjryU7YomBAexOTAuYf1RT7809yDziaA==}
     engines: {node: ^14.18.0 || >= 16}
@@ -6974,6 +7089,7 @@ packages:
       vitefu: 0.2.5(vite@4.5.0)
     transitivePeerDependencies:
       - supports-color
+    dev: false
 
   /@tailwindcss/forms@0.5.0(tailwindcss@3.1.6):
     resolution: {integrity: sha512-KzWugryEBFkmoaYcBE18rs6gthWCFHHO7cAZm2/hv3hwD67AzwP7udSCa22E7R1+CEJL/FfhYsJWrc0b1aeSzw==}
@@ -8377,7 +8493,6 @@ packages:
     requiresBuild: true
     dependencies:
       node-gyp-build: 4.6.1
-    dev: false
 
   /builtin-modules@3.3.0:
     resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
@@ -11712,7 +11827,7 @@ packages:
       whatwg-encoding: 3.1.1
       whatwg-mimetype: 4.0.0
       whatwg-url: 14.0.0
-      ws: 8.16.0
+      ws: 8.16.0(bufferutil@4.0.7)
       xml-name-validator: 5.0.0
     transitivePeerDependencies:
       - bufferutil
@@ -12204,7 +12319,7 @@ packages:
   /mdn-data@2.0.30:
     resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==}
 
-  /mdsvex@0.11.0(svelte@4.2.3):
+  /mdsvex@0.11.0(svelte@4.2.2):
     resolution: {integrity: sha512-gJF1s0N2nCmdxcKn8HDn0LKrN8poStqAicp6bBcsKFd/zkUBGLP5e7vnxu+g0pjBbDFOscUyI1mtHz+YK2TCDw==}
     peerDependencies:
       svelte: '>=3 <5'
@@ -12212,7 +12327,7 @@ packages:
       '@types/unist': 2.0.10
       prism-svelte: 0.4.7
       prismjs: 1.29.0
-      svelte: 4.2.3
+      svelte: 4.2.2
       vfile-message: 2.0.4
     dev: false
 
@@ -12602,7 +12717,6 @@ packages:
   /node-gyp-build@4.6.1:
     resolution: {integrity: sha512-24vnklJmyRS8ViBNI8KbtK/r/DmXQMRiOMXTNz2nrTnAYUwjmEEbnnpB/+kt+yWRv73bPsSPRFddrcIbAxSiMQ==}
     hasBin: true
-    dev: false
 
   /node-html-parser@6.0.0:
     resolution: {integrity: sha512-o4vS5Jm7ZdV5WN4/jHmCEVJOpm4exLCeXOcZnNzXi0BGv0AS8FsGwyQ4k0Ujmui1NMQs6qsTy+amjjpr9rmz4Q==}
@@ -13343,17 +13457,6 @@ packages:
     dependencies:
       prettier: 3.0.0
       svelte: 4.2.2
-    dev: false
-
-  /prettier-plugin-svelte@3.0.0(prettier@3.0.0)(svelte@4.2.3):
-    resolution: {integrity: sha512-l3RQcPty2UBCoRh3yb9c5XCAmxkrc4BptAnbd5acO1gmSJtChOWkiEjnOvh7hvmtT4V80S8gXCOKAq8RNeIzSw==}
-    peerDependencies:
-      prettier: ^3.0.0
-      svelte: ^3.2.0 || ^4.0.0-next.0
-    dependencies:
-      prettier: 3.0.0
-      svelte: 4.2.3
-    dev: true
 
   /prettier@2.8.8:
     resolution: {integrity: sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==}
@@ -14707,34 +14810,6 @@ packages:
       - sass
       - stylus
       - sugarss
-    dev: false
-
-  /svelte-check@3.4.4(@babel/core@7.23.3)(less@4.2.0)(postcss@8.4.27)(svelte@4.2.3):
-    resolution: {integrity: sha512-Uys9+R65cj8TmP8f5UpS7B2xKpNLYNxEWJsA5ZoKcWq/uwvABFF7xS6iPQGLoa7hxz0DS6xU60YFpmq06E4JxA==}
-    hasBin: true
-    peerDependencies:
-      svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.20
-      chokidar: 3.5.3
-      fast-glob: 3.3.2
-      import-fresh: 3.3.0
-      picocolors: 1.0.0
-      sade: 1.8.1
-      svelte: 4.2.3
-      svelte-preprocess: 5.0.4(@babel/core@7.23.3)(less@4.2.0)(postcss@8.4.27)(svelte@4.2.3)(typescript@5.2.2)
-      typescript: 5.2.2
-    transitivePeerDependencies:
-      - '@babel/core'
-      - coffeescript
-      - less
-      - postcss
-      - postcss-load-config
-      - pug
-      - sass
-      - stylus
-      - sugarss
-    dev: true
 
   /svelte-eslint-parser@0.32.2(svelte@4.2.2):
     resolution: {integrity: sha512-Ok9D3A4b23iLQsONrjqtXtYDu5ZZ/826Blaw2LeFZVTg1pwofKDG4mz3/GYTax8fQ0plRGHI6j+d9VQYy5Lo/A==}
@@ -14899,57 +14974,6 @@ packages:
       strip-indent: 3.0.0
       svelte: 4.2.2
       typescript: 5.2.2
-    dev: false
-
-  /svelte-preprocess@5.0.4(@babel/core@7.23.3)(less@4.2.0)(postcss@8.4.27)(svelte@4.2.3)(typescript@5.2.2):
-    resolution: {integrity: sha512-ABia2QegosxOGsVlsSBJvoWeXy1wUKSfF7SWJdTjLAbx/Y3SrVevvvbFNQqrSJw89+lNSsM58SipmZJ5SRi5iw==}
-    engines: {node: '>= 14.10.0'}
-    requiresBuild: true
-    peerDependencies:
-      '@babel/core': ^7.10.2
-      coffeescript: ^2.5.1
-      less: ^3.11.3 || ^4.0.0
-      postcss: ^7 || ^8
-      postcss-load-config: ^2.1.0 || ^3.0.0 || ^4.0.0
-      pug: ^3.0.0
-      sass: ^1.26.8
-      stylus: ^0.55.0
-      sugarss: ^2.0.0 || ^3.0.0 || ^4.0.0
-      svelte: ^3.23.0 || ^4.0.0-next.0 || ^4.0.0
-      typescript: '>=3.9.5 || ^4.0.0 || ^5.0.0'
-    peerDependenciesMeta:
-      '@babel/core':
-        optional: true
-      coffeescript:
-        optional: true
-      less:
-        optional: true
-      postcss:
-        optional: true
-      postcss-load-config:
-        optional: true
-      pug:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      typescript:
-        optional: true
-    dependencies:
-      '@babel/core': 7.23.3
-      '@types/pug': 2.0.9
-      detect-indent: 6.1.0
-      less: 4.2.0
-      magic-string: 0.27.0
-      postcss: 8.4.27
-      sorcery: 0.11.0
-      strip-indent: 3.0.0
-      svelte: 4.2.3
-      typescript: 5.2.2
-    dev: true
 
   /svelte-range-slider-pips@2.0.1:
     resolution: {integrity: sha512-sCHvcTgi0ZYE4c/mwSsdALRsfuqEmpwTsSUdL+PUrumZ8u2gv1GKwZ3GohcAcTB6gfmqRBkyn6ujRXrOIga1gw==}
@@ -16681,7 +16705,7 @@ packages:
         optional: true
     dev: true
 
-  /ws@8.16.0:
+  /ws@8.16.0(bufferutil@4.0.7):
     resolution: {integrity: sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==}
     engines: {node: '>=10.0.0'}
     peerDependencies:
@@ -16692,7 +16716,8 @@ packages:
         optional: true
       utf-8-validate:
         optional: true
-    dev: false
+    dependencies:
+      bufferutil: 4.0.7
 
   /xml-name-validator@5.0.0:
     resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}