@gradio/model3d 0.3.0-beta.6 → 0.3.0-beta.8

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @gradio/model3d
 
+## 0.3.0-beta.8
+
+### Features
+
+- [#6143](https://github.com/gradio-app/gradio/pull/6143) [`e4f7b4b40`](https://github.com/gradio-app/gradio/commit/e4f7b4b409323b01aa01b39e15ce6139e29aa073) - fix circular dependency with client + upload.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#6136](https://github.com/gradio-app/gradio/pull/6136) [`667802a6c`](https://github.com/gradio-app/gradio/commit/667802a6cdbfb2ce454a3be5a78e0990b194548a) - JS Component Documentation.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#6094](https://github.com/gradio-app/gradio/pull/6094) [`c476bd5a5`](https://github.com/gradio-app/gradio/commit/c476bd5a5b70836163b9c69bf4bfe068b17fbe13) - Image v4.  Thanks [@pngwn](https://github.com/pngwn)!
+- [#6149](https://github.com/gradio-app/gradio/pull/6149) [`90318b1dd`](https://github.com/gradio-app/gradio/commit/90318b1dd118ae08a695a50e7c556226234ab6dc) - swap `mode` on the frontned to `interactive` to match the backend.  Thanks [@pngwn](https://github.com/pngwn)!
+
+## 0.3.0-beta.7
+
+### Features
+
+- [#6016](https://github.com/gradio-app/gradio/pull/6016) [`83e947676`](https://github.com/gradio-app/gradio/commit/83e947676d327ca2ab6ae2a2d710c78961c771a0) - Format js in v4 branch.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+- [#5955](https://github.com/gradio-app/gradio/pull/5955) [`825c9cddc`](https://github.com/gradio-app/gradio/commit/825c9cddc83a09457d8c85ebeecb4bc705572d82) - Fix dev mode model3D.  Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
 ## 0.3.0-beta.6
 
 ### Features

package/Index.svelte

@@ -1,6 +1,11 @@
+<script context="module" lang="ts">
+	export { default as BaseModel3D } from "./shared/Model3D.svelte";
+	export { default as BaseModel3DUpload } from "./shared/Model3DUpload.svelte";
+	export { default as BaseExample } from "./Example.svelte";
+</script>
+
 <script lang="ts">
-	import type { FileData } from "@gradio/upload";
-	import { normalise_file } from "@gradio/upload";
+	import { normalise_file, type FileData } from "@gradio/client";
 	import Model3D from "./shared/Model3D.svelte";
 	import Model3DUpload from "./shared/Model3DUpload.svelte";
 	import { BlockLabel, Block, Empty, UploadText } from "@gradio/atoms";
@@ -33,7 +38,7 @@
 		null,
 		null
 	];
-	export let mode: "static" | "interactive";
+	export let interactive: boolean;
 
 	let _value: null | FileData;
 	$: _value = normalise_file(value, root, root_url);
@@ -41,7 +46,7 @@
 	let dragging = false;
 </script>
 
-{#if mode === "static"}
+{#if !interactive}
 	<Block
 		{visible}
 		variant={value === null ? "dashed" : "solid"}

package/README.md

@@ -0,0 +1,49 @@
+# `gradio/model3d`
+
+```html
+<script>
+    import {BaseModel3D, BaseModel3DUpload, BaseExample } from `@gradio/model3d`;
+</script>
+```
+
+BaseModel3D
+```javascript
+	export let value: FileData | null;
+	export let clear_color: [number, number, number, number] = [0, 0, 0, 0];
+	export let label = "";
+	export let show_label: boolean;
+	export let i18n: I18nFormatter;
+	export let zoom_speed = 1;
+
+	// alpha, beta, radius
+	export let camera_position: [number | null, number | null, number | null] = [
+		null,
+		null,
+		null
+	];
+```
+
+BaseModel3DUpload
+```javascript
+	export let value: null | FileData;
+	export let clear_color: [number, number, number, number] = [0, 0, 0, 0];
+	export let label = "";
+	export let show_label: boolean;
+	export let root: string;
+	export let i18n: I18nFormatter;
+	export let zoom_speed = 1;
+
+	// alpha, beta, radius
+	export let camera_position: [number | null, number | null, number | null] = [
+		null,
+		null,
+		null
+	];
+```
+
+BaseExample
+```javascript
+	export let value: string;
+	export let type: "gallery" | "table";
+	export let selected = false;
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/model3d",
-  "version": "0.3.0-beta.6",
+  "version": "0.3.0-beta.8",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -10,13 +10,15 @@
     "@types/babylon": "^6.16.6",
     "babylonjs": "^4.2.1",
     "babylonjs-loaders": "^4.2.1",
-    "@gradio/atoms": "^0.2.0-beta.4",
-    "@gradio/icons": "^0.2.0-beta.1",
-    "@gradio/statustracker": "^0.3.0-beta.6",
-    "@gradio/upload": "^0.3.0-beta.4",
-    "@gradio/utils": "^0.2.0-beta.4"
+    "@gradio/atoms": "^0.2.0-beta.6",
+    "@gradio/client": "^0.7.0-beta.1",
+    "@gradio/icons": "^0.2.0-beta.3",
+    "@gradio/statustracker": "^0.3.0-beta.8",
+    "@gradio/upload": "^0.3.0-beta.6",
+    "@gradio/utils": "^0.2.0-beta.6"
   },
   "main_changeset": true,
+  "main": "./Index.svelte",
   "exports": {
     ".": "./Index.svelte",
     "./example": "./Example.svelte",

package/shared/Model3D.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { FileData } from "@gradio/upload";
+	import type { FileData } from "@gradio/client";
 	import { BlockLabel, IconButton } from "@gradio/atoms";
 	import { File, Download, Undo } from "@gradio/icons";
 	import { add_new_model, reset_camera_position } from "./utils";
@@ -22,7 +22,14 @@
 		null
 	];
 
-	BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS = true;
+	$: {
+		if (
+			BABYLON_LOADERS.OBJFileLoader != undefined &&
+			!BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS
+		) {
+			BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS = true;
+		}
+	}
 
 	let canvas: HTMLCanvasElement;
 	let scene: BABYLON.Scene;
@@ -37,12 +44,11 @@
 		mounted = true;
 	});
 
-	$: ({ data, name } = value || {
-		data: undefined,
-		name: undefined
+	$: ({ path } = value || {
+		path: undefined
 	});
 
-	$: canvas && mounted && data != null && name && dispose();
+	$: canvas && mounted && path && dispose();
 
 	function dispose(): void {
 		if (scene && !scene.isDisposed) {
@@ -83,9 +89,9 @@
 		<div class="buttons">
 			<IconButton Icon={Undo} label="Undo" on:click={() => handle_undo()} />
 			<a
-				href={value.data}
+				href={value.path}
 				target={window.__is_colab__ ? "_blank" : null}
-				download={window.__is_colab__ ? null : value.orig_name || value.name}
+				download={window.__is_colab__ ? null : value.orig_name || value.path}
 			>
 				<IconButton Icon={Download} label={i18n("common.download")} />
 			</a>

package/shared/Model3DUpload.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher, tick, onMount } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
-	import type { FileData } from "@gradio/upload";
+	import type { FileData } from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
 	import { File } from "@gradio/icons";
 	import { add_new_model, reset_camera_position } from "./utils";
@@ -45,13 +45,11 @@
 		mounted = true;
 	});
 
-	$: ({ data, is_file, name } = value || {
-		data: undefined,
-		is_file: undefined,
-		name: undefined
+	$: ({ path } = value || {
+		path: undefined
 	});
 
-	$: canvas && mounted && data != null && is_file && reset_scene();
+	$: canvas && mounted && path != null && reset_scene();
 
 	async function handle_upload({
 		detail
@@ -88,7 +86,14 @@
 	import * as BABYLON_LOADERS from "babylonjs-loaders";
 	import type { I18nFormatter } from "js/utils/src";
 
-	BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS = true;
+	$: {
+		if (
+			BABYLON_LOADERS.OBJFileLoader != undefined &&
+			!BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS
+		) {
+			BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS = true;
+		}
+	}
 
 	$: dispatch("drag", dragging);
 </script>

package/shared/utils.ts

@@ -1,4 +1,4 @@
-import type { FileData } from "@gradio/upload";
+import type { FileData } from "@gradio/client";
 import * as BABYLON from "babylonjs";
 
 const create_camera = (
@@ -53,14 +53,9 @@ export const add_new_model = (
 
 	if (!value) return scene;
 	let url: string;
-	if (value.is_file) {
-		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);
-	}
+
+	url = value.url!;
+
 	BABYLON.SceneLoader.ShowLoadingScreen = false;
 	BABYLON.SceneLoader.Append(
 		url,
@@ -69,7 +64,7 @@ export const add_new_model = (
 		() => create_camera(scene, camera_position, zoom_speed),
 		undefined,
 		undefined,
-		"." + value.name.split(".")[1]
+		"." + value.path.split(".")[1]
 	);
 	return scene;
 };