Image3D Examples Fix (#1001)

* fix 3d model examples

* format fix

* cache_examples in image demo

* fix cached examples

* fixed cached example bug

* fixed formatting

* fixed tests

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

demo/Image3D/run.py

@@ -1,15 +1,16 @@
-import os.path
 import gradio as gr
-
+import time
 
 def load_mesh(mesh_file_name):
+    time.sleep(2)
     return mesh_file_name
 
 iface = gr.Interface(
-    load_mesh,
-    gr.inputs.Image3D(),
-    gr.outputs.Image3D(clear_color=[0.8, 0.2, 0.2, 1.0])
+    fn=load_mesh,
+    inputs=gr.inputs.Image3D(),
+    outputs=gr.outputs.Image3D(clear_color=[0.8, 0.2, 0.2, 1.0]),
+    examples=[["files/Bunny.obj"], ["files/Duck.glb"]]
 )
 
 if __name__ == "__main__":
-    iface.launch()
+    iface.launch(cache_examples=True)

gradio/component.py

@@ -50,14 +50,19 @@ def restore_flagged(self, dir, data, encryption_key):
         return data
 
     def save_flagged_file(
-        self, dir: str, label: str, data: Any, encryption_key: bool
+        self,
+        dir: str,
+        label: str,
+        data: Any,
+        encryption_key: bool,
+        file_path: Optional[str] = None,
     ) -> Optional[str]:
         """
         Saved flagged data (e.g. image or audio) as a file and returns filepath
         """
         if data is None:
             return None
-        file = processing_utils.decode_base64_to_file(data, encryption_key)
+        file = processing_utils.decode_base64_to_file(data, encryption_key, file_path)
         label = "".join([char for char in label if char.isalnum() or char in "._- "])
         old_file_name = file.name
         output_dir = os.path.join(dir, label)

gradio/outputs.py

@@ -935,7 +935,10 @@ def __init__(self, clear_color=None, label=None):
         self.clear_color = clear_color
 
     def get_template_context(self):
-        return {**super().get_template_context()}
+        return {
+            "clearColor": self.clear_color,
+            **super().get_template_context(),
+        }
 
     @classmethod
     def get_shortcut_implementations(cls):
@@ -958,8 +961,6 @@ def postprocess(self, y):
 
         return {
             "name": os.path.basename(y),
-            "extension": os.path.splitext(y)[1],
-            "clearColor": self.clear_color,
             "data": processing_utils.encode_file_to_base64(y),
         }
 
@@ -970,7 +971,12 @@ def save_flagged(self, dir, label, data, encryption_key):
         """
         Returns: (str) path to model file
         """
-        return self.save_flagged_file(dir, label, data["data"], encryption_key)
+        return self.save_flagged_file(
+            dir, label, data["data"], encryption_key, data["name"]
+        )
+
+    def restore_flagged(self, dir, data, encryption_key):
+        return self.restore_flagged_file(dir, data, encryption_key)
 
 
 def get_output_instance(iface: Interface):

test/test_outputs.py

@@ -552,11 +552,11 @@ def test_as_component(self):
             to_save = Image3D_output.save_flagged(
                 tmpdirname, "Image3D_output", gr.test_data.BASE64_IMAGE3D, None
             )
-            self.assertEqual("Image3D_output/0", to_save)
+            self.assertEqual("Image3D_output/0.gltf", to_save)
             to_save = Image3D_output.save_flagged(
                 tmpdirname, "Image3D_output", gr.test_data.BASE64_IMAGE3D, None
             )
-            self.assertEqual("Image3D_output/1", to_save)
+            self.assertEqual("Image3D_output/1.gltf", to_save)
 
 
 class TestNames(unittest.TestCase):

ui/packages/app/src/components/input/Image3D/Example.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	export let value: string;
-	export let examples_dir: string;
+	import type { FileData } from "./types";
+	export let value: FileData;
 </script>
 
-<!-- svelte-ignore a11y-missing-attribute -->
-<img class="input-Image3D-example h-24 max-w-none" src={examples_dir + value} />
+<div class="input-image3D-example">{value}</div>

ui/packages/app/src/components/input/Image3D/Image3D.svelte

@@ -1,30 +1,13 @@
 <script lang="ts">
+	import type { FileData } from "./types";
 	import Upload from "../../utils/Upload.svelte";
 	import { _ } from "svelte-i18n";
 
-	interface Data {
-		data: string;
-		name: string;
-		size: number;
-	}
-
-	interface FileData {
-		name: string;
-		size: number;
-		data: string;
-		is_example: false;
-	}
-
-	export let value: Data;
-	export let setValue: (val: null | Data) => null | Data;
+	export let value: FileData;
+	export let setValue: (val: null | FileData) => null | FileData;
 	export let theme: string;
 
-	function handle_load(v: string | FileData | (string | FileData)[] | null) {
-		setValue(v as Data);
-		return v;
-	}
-
-	import { onMount, afterUpdate } from "svelte";
+	import { afterUpdate } from "svelte";
 	import * as BABYLON from "babylonjs";
 	import "babylonjs-loaders";
 
@@ -50,10 +33,16 @@
 			engine.resize();
 		});
 
-		let base64_model_content = value["data"];
-		let raw_content = BABYLON.Tools.DecodeBase64(base64_model_content);
-		let blob = new Blob([raw_content]);
-		let url = URL.createObjectURL(blob);
+		let url: string;
+		if (value["is_example"]) {
+			url = value["data"];
+		} else {
+			let base64_model_content = value["data"];
+			let raw_content = BABYLON.Tools.DecodeBase64(base64_model_content);
+			let blob = new Blob([raw_content]);
+			url = URL.createObjectURL(blob);
+		}
+
 		BABYLON.SceneLoader.Append(
 			"",
 			url,
@@ -69,7 +58,7 @@
 </script>
 
 {#if value === null}
-	<Upload load={handle_load} {theme} filetype=".obj, .gltf, .glb">
+	<Upload load={setValue} {theme} filetype=".obj, .gltf, .glb">
 		{$_("interface.drop_file")}
 		<br />- {$_("interface.or")} -<br />
 		{$_("interface.click_to_upload")}

ui/packages/app/src/components/input/Image3D/config.ts

@@ -1,9 +1,9 @@
 import Component from "./Image3D.svelte";
 import ExampleComponent from "./Example.svelte";
-import { loadAsData } from "../../utils/example_processors";
+import { loadAsFile } from "../../utils/example_processors";
 
 export default {
 	component: Component,
 	example: ExampleComponent,
-	process_example: loadAsData
+	process_example: loadAsFile
 };

ui/packages/app/src/components/input/Image3D/types.ts

@@ -0,0 +1,6 @@
+export interface FileData {
+	name: string;
+	size: number;
+	data: string;
+	is_example: false;
+}

ui/packages/app/src/components/output/Image3D/Image3D.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	export let value: string;
 	export let theme: string;
+	export let clearColor: Array;
 
 	import { onMount, afterUpdate } from "svelte";
 	import * as BABYLON from "babylonjs";
@@ -13,7 +14,6 @@
 		const engine = new BABYLON.Engine(canvas, true);
 		scene = new BABYLON.Scene(engine);
 		scene.createDefaultCameraOrLight();
-		const clearColor = value["clearColor"];
 		scene.clearColor = new BABYLON.Color4(
 			clearColor[0],
 			clearColor[1],
@@ -51,7 +51,7 @@
 			},
 			undefined,
 			undefined,
-			value["extension"]
+			"." + value["name"].split(".")[1]
 		);
 	}
 </script>