File Cached Examples Fix (#1334)

* fix file cache examples issue

* format

* fix for tests

* format fix

* fix multiple files input

* format

* format

* fix preprocess example

* fix multiple file output

* remove single_file const

* fix tests + format

* renamed demo

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

demo/model3D/run.py

@@ -5,16 +5,17 @@ import os
 
 def load_mesh(mesh_file_name):
     time.sleep(2)
-    return mesh_file_name
+    return mesh_file_name, mesh_file_name
 
 
-inputs = gr.Model3D()
-outputs = gr.Model3D(clear_color=[0.8, 0.2, 0.2, 1.0])
-
 demo = gr.Interface(
     fn=load_mesh,
-    inputs=inputs,
-    outputs=outputs,
+    inputs=gr.Model3D(),
+    outputs=[
+        gr.Model3D(
+            clear_color=[0.0, 0.0, 0.0, 0.0],  label="3D Model"),
+        gr.File(label="Download 3D Model")
+    ],
     examples=[
         [os.path.join(os.path.dirname(__file__), "files/Bunny.obj")],
         [os.path.join(os.path.dirname(__file__), "files/Duck.glb")],

gradio/components.py

@@ -2149,7 +2149,23 @@ class File(Changeable, Clearable, IOComponent):
         }
 
     def preprocess_example(self, x):
-        return {"name": x, "data": None, "is_example": True}
+        if isinstance(x, list):
+            return [
+                {
+                    "name": file,
+                    "data": None,
+                    "size": os.path.getsize(file),
+                    "is_example": True,
+                }
+                for file in x
+            ]
+        else:
+            return {
+                "name": x,
+                "data": None,
+                "size": os.path.getsize(x),
+                "is_example": True,
+            }
 
     def preprocess(self, x: List[Dict[str, str]] | None):
         """
@@ -2198,9 +2214,14 @@ class File(Changeable, Clearable, IOComponent):
         """
         Returns: (str) path to file
         """
-        return self.save_flagged_file(
-            dir, label, None if data is None else data[0]["data"], encryption_key
-        )
+        if isinstance(data, list):
+            return self.save_flagged_file(
+                dir, label, None if data is None else data[0]["data"], encryption_key
+            )
+        else:
+            return self.save_flagged_file(
+                dir, label, data["data"], encryption_key, data["name"]
+            )
 
     def generate_sample(self):
         return deepcopy(media_data.BASE64_FILE)
@@ -2216,11 +2237,27 @@ class File(Changeable, Clearable, IOComponent):
         """
         if y is None:
             return None
-        return {
-            "name": os.path.basename(y),
-            "size": os.path.getsize(y),
-            "data": processing_utils.encode_file_to_base64(y),
-        }
+        if isinstance(y, list):
+            return [
+                {
+                    "name": os.path.basename(file),
+                    "size": os.path.getsize(file),
+                    "data": processing_utils.encode_file_to_base64(file),
+                }
+                for file in y
+            ]
+        else:
+            return {
+                "name": os.path.basename(y),
+                "size": os.path.getsize(y),
+                "data": processing_utils.encode_file_to_base64(y),
+            }
+
+    def deserialize(self, x):
+        return processing_utils.decode_base64_to_file(x).name
+
+    def restore_flagged(self, dir, data, encryption_key):
+        return self.restore_flagged_file(dir, data, encryption_key)
 
 
 class Dataframe(Changeable, IOComponent):

test/test_components.py

@@ -922,7 +922,7 @@ class TestFile(unittest.TestCase):
             to_save = file_input.save_flagged(tmpdirname, "file_input", [x_file], None)
             self.assertEqual("file_input/1", to_save)
             restored = file_input.restore_flagged(tmpdirname, to_save, None)
-            self.assertEqual(restored, "file_input/1")
+            self.assertEqual(restored["name"], "file_input/1")
 
         self.assertIsInstance(file_input.generate_sample(), dict)
         file_input = gr.File(label="Upload Your File")

ui/packages/app/src/components/File/File.svelte

@@ -15,6 +15,7 @@
 	export let root: string;
 	export let label: string;
 	export let show_label: boolean;
+	export let file_count: string;
 
 	export let loading_status: LoadingStatus;
 
@@ -38,6 +39,7 @@
 			{label}
 			{show_label}
 			value={_value}
+			{file_count}
 			on:change={({ detail }) => (value = detail)}
 			on:drag={({ detail }) => (dragging = detail)}
 			on:change

ui/packages/file/src/File.svelte

@@ -1,7 +1,11 @@
 <script lang="ts">
 	import type { FileData } from "@gradio/upload";
 	import { BlockLabel } from "@gradio/atoms";
-	import { prettyBytes } from "./utils";
+	import {
+		display_file_name,
+		download_files,
+		display_file_size
+	} from "./utils";
 	import { File } from "@gradio/icons";
 
 	export let value: FileData | null;
@@ -14,8 +18,8 @@
 {#if value}
 	<a
 		class="output-file w-full h-full flex flex-row flex-wrap justify-center items-center relative dark:text-slate-200"
-		href={value.data}
-		download={value.name}
+		href={download_files(value)}
+		download={display_file_name(value)}
 	>
 		<svg
 			xmlns="http://www.w3.org/2000/svg"
@@ -31,9 +35,11 @@
 				d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
 			/>
 		</svg>
-		<div class="file-name w-3/5 text-4xl p-6 break-all">{value.name}</div>
+		<div class="file-name w-3/5 text-4xl p-6 break-all">
+			{display_file_name(value)}
+		</div>
 		<div class="text-2xl p-2">
-			{isNaN(value.size || NaN) ? "" : prettyBytes(value.size || 0)}
+			{display_file_size(value)}
 		</div>
 	</a>
 {:else}

ui/packages/file/src/FileUpload.svelte

@@ -5,9 +5,13 @@
 	import { BlockLabel } from "@gradio/atoms";
 	import { File } from "@gradio/icons";
 
-	import { prettyBytes } from "./utils";
+	import {
+		display_file_name,
+		download_files,
+		display_file_size
+	} from "./utils";
 
-	export let value: null | FileData;
+	export let value: null | FileData | Array;
 
 	export let drop_text: string = "Drop a file";
 	export let or_text: string = "or";
@@ -15,6 +19,7 @@
 	export let label: string = "";
 	export let style: string;
 	export let show_label: boolean;
+	export let file_count: string;
 
 	async function handle_upload({ detail }: CustomEvent<FileData>) {
 		value = detail;
@@ -34,39 +39,38 @@
 		drag: boolean;
 	}>();
 
-	function truncate(str: string): string {
-		if (str.length > 30) {
-			return `${str.substr(0, 30)}...`;
-		} else return str;
-	}
-
 	let dragging = false;
 	$: dispatch("drag", dragging);
 </script>
 
 <BlockLabel {show_label} Icon={File} label={label || "File"} />
 
-{#if value === null}
+{#if value === null && file_count === "single"}
 	<Upload on:load={handle_upload} filetype="file" bind:dragging>
 		{drop_text}
 		<br />- {or_text} -<br />
 		{upload_text}
 	</Upload>
+{:else if value === null}
+	<Upload on:load={handle_upload} filetype="file" {file_count} bind:dragging>
+		{drop_text}
+		<br />- {or_text} -<br />
+		{upload_text}
+	</Upload>
 {:else}
 	<div
 		class="file-preview w-full flex flex-row justify-between overflow-y-auto mt-7 dark:text-slate-200"
 	>
 		<ModifyUpload on:clear={handle_clear} absolute />
-
 		<div class="file-name p-2">
-			{truncate(value.name)}
+			{display_file_name(value)}
 		</div>
 		<div class="file-size  p-2">
-			{prettyBytes(value.size || 0)}
+			{display_file_size(value)}
 		</div>
 		<div class="file-size p-2 hover:underline">
 			<a
-				href={value.data}
+				href={download_files(value)}
 				download
 				class="text-indigo-600 hover:underline dark:text-indigo-300">Download</a
 			>

ui/packages/file/src/utils.ts

@@ -1,3 +1,5 @@
+import type { FileData } from "@gradio/upload";
+
 export const prettyBytes = (bytes: number): string => {
 	let units = ["B", "KB", "MB", "GB", "PB"];
 	let i = 0;
@@ -8,3 +10,39 @@ export const prettyBytes = (bytes: number): string => {
 	let unit = units[i];
 	return bytes.toFixed(1) + " " + unit;
 };
+
+export const display_file_name = (
+	value: FileData | Array<FileData>
+): string => {
+	var str: string;
+	if (Array.isArray(value)) {
+		if (value.length > 1) {
+			return value.length + " files";
+		} else {
+			str = value[0].name;
+		}
+	} else {
+		str = value.name;
+	}
+	if (str.length > 30) {
+		return `${str.substr(0, 30)}...`;
+	} else return str;
+};
+
+export const download_files = (value: FileData | Array<FileData>): string => {
+	return Array.isArray(value) ? value[0].data : value.data;
+};
+
+export const display_file_size = (
+	value: FileData | Array<FileData>
+): string => {
+	var total_size = 0;
+	if (Array.isArray(value)) {
+		for (var file of value) {
+			total_size += file.size;
+		}
+	} else {
+		total_size = value.size;
+	}
+	return prettyBytes(total_size || 0);
+};

ui/packages/upload/src/Upload.svelte

@@ -4,16 +4,15 @@
 
 	export let filetype: string | undefined = undefined;
 	export let theme: string = "default";
-	export let single_file: boolean = true;
 	export let include_file_metadata = true;
 	export let dragging = false;
 	export let boundedheight: boolean = true;
 	export let click: boolean = true;
 	export let center: boolean = true;
 	export let flex: boolean = true;
+	export let file_count: string;
 
 	let hidden_upload: HTMLInputElement;
-	let file_count: "multiple" | "directory" | "single";
 
 	const dispatch = createEventDispatcher();
 
@@ -47,7 +46,7 @@
 					  }
 					: (this.result as string);
 				if (all_file_data.length === files.length) {
-					dispatch("load", single_file ? all_file_data[0] : all_file_data);
+					dispatch("load", all_file_data);
 				}
 			};
 		});