Refactor normalise_file and annotatedimage/Index.svelte

.changeset/green-animals-chew.md

@@ -0,0 +1,7 @@
+---
+"@gradio/annotatedimage": minor
+"@gradio/client": minor
+"gradio": minor
+---
+
+feat:Refactor `normalise_file` and `annotatedimage/Index.svelte`

client/js/src/upload.ts

@@ -1,44 +1,21 @@
 import { upload_files } from "./client";
 
-export function normalise_file(
-	file: FileData | null,
+export function normalise_file<T extends FileData[] | FileData | null>(
+	file: T,
 	server_url: string,
 	proxy_url: string | null
-): FileData | null;
-
-export function normalise_file(
-	file: FileData[] | null,
-	server_url: string,
-	proxy_url: string | null
-): FileData[] | null;
-
+): T;
 export function normalise_file(
 	file: FileData[] | FileData | null,
-	server_url: string, // root: string,
-	proxy_url: string | null // root_url: string | null
-): FileData[] | FileData | null;
-
-export function normalise_file(
-	file: FileData[] | FileData | null,
-	server_url: string, // root: string,
-	proxy_url: string | null // root_url: string | null
+	server_url: string, // Config.root: string,
+	proxy_url: string | null // Config.root_url: string?
 ): FileData[] | FileData | null {
 	if (file == null) {
 		return null;
 	}
 
 	if (Array.isArray(file)) {
-		const normalized_file: (FileData | null)[] = [];
-
-		for (const x of file) {
-			if (x == null) {
-				normalized_file.push(null);
-			} else {
-				normalized_file.push(normalise_file(x, server_url, proxy_url));
-			}
-		}
-
-		return normalized_file as FileData[];
+		return file.map((x) => normalise_file(x, server_url, proxy_url));
 	}
 
 	if (file.is_stream) {

js/annotatedimage/Index.svelte

@@ -8,21 +8,21 @@
 	import { type FileData, normalise_file } from "@gradio/client";
 	import { resolve_wasm_src } from "@gradio/wasm/svelte";
 
+	type Annotation = {
+		image: FileData;
+		label: string;
+	};
+	type AnnotatedImage = {
+		image: FileData;
+		annotations: Annotation[];
+	};
+
 	export let elem_id = "";
 	export let elem_classes: string[] = [];
 	export let visible = true;
-	export let value: {
-		image: FileData;
-		annotations: { image: FileData; label: string }[] | [];
-	} | null = null;
-	let old_value: {
-		image: FileData;
-		annotations: { image: FileData; label: string }[] | [];
-	} | null = null;
-	let _value: {
-		image: FileData;
-		annotations: { image: FileData; label: string }[];
-	} | null = null;
+	export let value: AnnotatedImage | null = null;
+	let old_value: typeof value = null;
+	let normalized_value: typeof value = null;
 	export let gradio: Gradio<{
 		change: undefined;
 		select: SelectData;
@@ -51,10 +51,10 @@
 			gradio.dispatch("change");
 		}
 		if (value) {
-			const normalized_value = {
-				image: normalise_file(value.image, root, proxy_url) as FileData,
+			normalized_value = {
+				image: normalise_file(value.image, root, proxy_url),
 				annotations: value.annotations.map((ann) => ({
-					image: normalise_file(ann.image, root, proxy_url) as FileData,
+					image: normalise_file(ann.image, root, proxy_url),
 					label: ann.label
 				}))
 			};
@@ -96,7 +96,7 @@
 				_value = async_resolved_value;
 			});
 		} else {
-			_value = null;
+			normalized_value = null;
 		}
 	}
 	function handle_mouseover(_label: string): void {
@@ -138,17 +138,17 @@
 	/>
 
 	<div class="container">
-		{#if _value == null}
+		{#if normalized_value == null}
 			<Empty size="large" unpadded_box={true}><Image /></Empty>
 		{:else}
 			<div class="image-container">
 				<img
 					class="base-image"
 					class:fit-height={height}
-					src={_value ? _value.image.url : null}
+					src={normalized_value ? normalized_value.image.url : null}
 					alt="the base file that is annotated"
 				/>
-				{#each _value ? _value?.annotations : [] as ann, i}
+				{#each normalized_value ? normalized_value?.annotations : [] as ann, i}
 					<img
 						alt="segmentation mask identifying {label} within the uploaded file"
 						class="mask fit-height"
@@ -158,20 +158,20 @@
 						style={color_map && ann.label in color_map
 							? null
 							: `filter: hue-rotate(${Math.round(
-									(i * 360) / _value?.annotations.length
+									(i * 360) / normalized_value?.annotations.length
 							  )}deg);`}
 					/>
 				{/each}
 			</div>
-			{#if show_legend && _value}
+			{#if show_legend && normalized_value}
 				<div class="legend">
-					{#each _value.annotations as ann, i}
+					{#each normalized_value.annotations as ann, i}
 						<button
 							class="legend-item"
 							style="background-color: {color_map && ann.label in color_map
 								? color_map[ann.label] + '88'
 								: `hsla(${Math.round(
-										(i * 360) / _value.annotations.length
+										(i * 360) / normalized_value.annotations.length
 								  )}, 100%, 50%, 0.3)`}"
 							on:mouseover={() => handle_mouseover(ann.label)}
 							on:focus={() => handle_mouseover(ann.label)}