Model3D Examples fixes (gradio-app#1035)

* fix examples

* fixes

* fix moddl3d examples

* format fixes

* fixed tests

* fix tests

* fix clearColor null

Co-authored-by: Dawood Khan <dawoodkhan@DawoodsWorkMBP.localdomain>
Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

demo/model3D/run.py

@@ -1,7 +1,6 @@
 import time
 import gradio as gr
 
-
 def load_mesh(mesh_file_name):
     time.sleep(2)
     return mesh_file_name
@@ -13,8 +12,8 @@ def load_mesh(mesh_file_name):
     fn=load_mesh, 
     inputs=inputs, 
     outputs=outputs,
-    examples=[["files/Bunny.obj"], ["files/Duck.glb"]]
+    examples=[["files/Bunny.obj"], ["files/Duck.glb"], ["files/Fox.gltf"]], cache_examples=True
 )
 
 if __name__ == "__main__":
-    iface.launch(cache_examples=True)
+    iface.launch()

gradio.egg-info/PKG-INFO

@@ -1,14 +1,11 @@
-Metadata-Version: 2.1
+Metadata-Version: 1.0
 Name: gradio
 Version: 2.9.0b2
 Summary: Python library for easily interacting with trained machine learning models
 Home-page: https://github.com/gradio-app/gradio-UI
 Author: Abubakar Abid, Ali Abid, Ali Abdalla, Dawood Khan, Ahsen Khaliq, Pete Allen, Ömer Faruk Özdemir
 Author-email: team@gradio.app
 License: Apache License 2.0
+Description: UNKNOWN
 Keywords: machine learning,visualization,reproducibility
 Platform: UNKNOWN
-License-File: LICENSE
-
-UNKNOWN
-

gradio/components.py

@@ -2935,7 +2935,7 @@ def save_flagged(self, dir, label, data, encryption_key):
         Returns: (str) path to 3D image model file
         """
         return self.save_flagged_file(
-            dir, label, None if data is None else data["data"], encryption_key
+            dir, label, data["data"], encryption_key, data["name"]
         )
 
     def generate_sample(self):

gradio/templates/frontend/index.html

@@ -55,7 +55,7 @@
 		</script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
 		<title>Gradio</title>
-		<script type="module" crossorigin src="./assets/index.65fb5956.js"></script>
+		<script type="module" crossorigin src="./assets/index.49d6d26d.js"></script>
 		<link rel="stylesheet" href="./assets/index.39bf42f9.css">
 	</head>
 

test/test_inputs.py

@@ -750,13 +750,13 @@ def test_as_component(self):
             to_save = Image3D_input.save_flagged(
                 tmpdirname, "Image3D_input", Image3D, None
             )
-            self.assertEqual("Image3D_input/0", to_save)
+            self.assertEqual("Image3D_input/0.gltf", to_save)
             to_save = Image3D_input.save_flagged(
                 tmpdirname, "Image3D_input", Image3D, None
             )
-            self.assertEqual("Image3D_input/1", to_save)
+            self.assertEqual("Image3D_input/1.gltf", to_save)
             restored = Image3D_input.restore_flagged(tmpdirname, to_save, None)
-            self.assertEqual(restored["name"], "Image3D_input/1")
+            self.assertEqual(restored["name"], "Image3D_input/1.gltf")
 
         self.assertIsInstance(Image3D_input.generate_sample(), dict)
         Image3D_input = gr.inputs.Image3D(label="Upload Your 3D Image Model")

test/test_outputs.py

@@ -558,11 +558,11 @@ def test_as_component(self):
             to_save = Image3D_output.save_flagged(
                 tmpdirname, "Image3D_output", media_data.BASE64_MODEL3D, 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", media_data.BASE64_MODEL3D, None
             )
-            self.assertEqual("Image3D_output/1", to_save)
+            self.assertEqual("Image3D_output/1.gltf", to_save)
 
 
 if __name__ == "__main__":

ui/packages/app/src/components/Dataset/ExampleComponents/Model3D.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import type { Value } from "../../Model3D/types";
+	export let value: Value;
+</script>
+
+<div class="input-model3D-example">{value}</div>

ui/packages/app/src/components/Dataset/directory.ts

@@ -10,6 +10,7 @@ import ExampleAudio from "./ExampleComponents/Audio.svelte";
 import ExampleVideo from "./ExampleComponents/Video.svelte";
 import ExampleFile from "./ExampleComponents/File.svelte";
 import ExampleDataframe from "./ExampleComponents/Dataframe.svelte";
+import ExampleModel3D from "./ExampleComponents/Model3D.svelte";
 
 export const component_map = {
 	dropdown: ExampleDropdown,
@@ -23,5 +24,6 @@ export const component_map = {
 	audio: ExampleAudio,
 	video: ExampleVideo,
 	file: ExampleFile,
-	dataframe: ExampleDataframe
+	dataframe: ExampleDataframe,
+	model3d: ExampleModel3D
 };

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

@@ -5,7 +5,7 @@
 	import { _ } from "svelte-i18n";
 
 	export let value: null | FileData = null;
-	export let default_value: null | string = null;
+	export let default_value: null | FileData = null;
 	export let style: string = "";
 	export let mode: "static" | "dynamic";
 	export let root: string;

ui/packages/app/src/components/Model3D/index.ts

@@ -1,2 +1,3 @@
 export { default as Component } from "./Model3D.svelte";
+export { default as ExampleComponent } from "../Dataset/ExampleComponents/Model3D.svelte";
 export const modes = ["static", "dynamic"];

ui/packages/app/src/components/Model3D/types.ts

@@ -0,0 +1,6 @@
+export interface Value {
+	data: string;
+	is_example: boolean;
+	name: string;
+	size?: number;
+}

ui/packages/model3D/src/Model3D.svelte

@@ -8,6 +8,7 @@
 	import { onMount, afterUpdate } from "svelte";
 	import * as BABYLON from "babylonjs";
 	import "babylonjs-loaders";
+	import { clear } from "@testing-library/user-event/dist/clear";
 
 	let canvas: HTMLCanvasElement;
 	let scene: BABYLON.Scene;
@@ -16,12 +17,15 @@
 		const engine = new BABYLON.Engine(canvas, true);
 		scene = new BABYLON.Scene(engine);
 		scene.createDefaultCameraOrLight();
-		scene.clearColor = new BABYLON.Color4(
-			clearColor[0],
-			clearColor[1],
-			clearColor[2],
-			clearColor[3]
-		);
+		scene.clearColor = clearColor
+			? (scene.clearColor = new BABYLON.Color4(
+					clearColor[0],
+					clearColor[1],
+					clearColor[2],
+					clearColor[3]
+			  ))
+			: new BABYLON.Color4(0.2, 0.2, 0.2, 1);
+
 		engine.runRenderLoop(() => {
 			scene.render();
 		});

ui/packages/model3D/src/Model3DUpload.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, tick } from "svelte";
+	import { createEventDispatcher, tick, afterUpdate } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import type { FileData } from "@gradio/upload";
 	import { Block, BlockLabel } from "@gradio/atoms";
@@ -14,7 +14,11 @@
 	export let label: string = "";
 	export let style: string;
 
-	let file_count: string;
+	afterUpdate(() => {
+		if (value != null && value.is_example) {
+			addNewModel();
+		}
+	});
 
 	async function handle_upload({ detail }: CustomEvent<FileData>) {
 		value = detail;
@@ -34,7 +38,6 @@
 
 	let dragging = false;
 
-	import { afterUpdate } from "svelte";
 	import * as BABYLON from "babylonjs";
 	import "babylonjs-loaders";
 
@@ -54,10 +57,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,