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 <[email protected]>
gradio-app · Jan 30, 2024 · 8dd6f4b · 8dd6f4b
1 parent e3217b4
commit 8dd6f4b
Show file tree

Hide file tree

Showing 25 changed files with 380 additions and 205 deletions.
diff --git a/.changeset/warm-jokes-fetch.md 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
@@ -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
@@ -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
@@ -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
@@ -1,13 +1,13 @@
 <script lang="ts">
-	export let value: string;
+	export let value: string | null;
 	export let type: "gallery" | "table";
 	export let selected = false;
 </script>
 
 <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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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