@gradio/model3d 0.15.1-dev.0 → 0.15.1-dev.2

package/dist/shared/Model3DUpload.svelte

@@ -1,75 +1,97 @@
-<script>import { createEventDispatcher, tick } from "svelte";
-import { Upload, ModifyUpload } from "@gradio/upload";
-import { BlockLabel } from "@gradio/atoms";
-import { File } from "@gradio/icons";
-export let value;
-export let display_mode = "solid";
-export let clear_color = [0, 0, 0, 0];
-export let label = "";
-export let show_label;
-export let root;
-export let i18n;
-export let zoom_speed = 1;
-export let pan_speed = 1;
-export let max_file_size = null;
-export let uploading = false;
-export let camera_position = [
-  null,
-  null,
-  null
-];
-export let upload;
-export let stream_handler;
-async function handle_upload({
-  detail
-}) {
-  value = detail;
-  await tick();
-  dispatch("change", value);
-  dispatch("load", value);
-}
-async function handle_clear() {
-  value = null;
-  await tick();
-  dispatch("clear");
-  dispatch("change");
-}
-let use_3dgs = false;
-let Canvas3DGSComponent;
-let Canvas3DComponent;
-async function loadCanvas3D() {
-  const module = await import("./Canvas3D.svelte");
-  return module.default;
-}
-async function loadCanvas3DGS() {
-  const module = await import("./Canvas3DGS.svelte");
-  return module.default;
-}
-$: if (value) {
-  use_3dgs = value.path.endsWith(".splat") || value.path.endsWith(".ply");
-  if (use_3dgs) {
-    loadCanvas3DGS().then((component) => {
-      Canvas3DGSComponent = component;
-    });
-  } else {
-    loadCanvas3D().then((component) => {
-      Canvas3DComponent = component;
-    });
-  }
-}
-let canvas3d;
-async function handle_undo() {
-  canvas3d?.reset_camera_position();
-}
-const dispatch = createEventDispatcher();
-let dragging = false;
-$: dispatch("drag", dragging);
+<script lang="ts">
+	import { createEventDispatcher, tick } from "svelte";
+	import { Upload, ModifyUpload } from "@gradio/upload";
+	import type { FileData, Client } from "@gradio/client";
+	import { BlockLabel } from "@gradio/atoms";
+	import { File } from "@gradio/icons";
+	import type { I18nFormatter } from "@gradio/utils";
+	import type Canvas3DGS from "./Canvas3DGS.svelte";
+	import type Canvas3D from "./Canvas3D.svelte";
+
+	export let value: null | FileData;
+	export let display_mode: "solid" | "point_cloud" | "wireframe" = "solid";
+	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;
+	export let pan_speed = 1;
+	export let max_file_size: number | null = null;
+	export let uploading = false;
+	export let upload_promise: Promise<(FileData | null)[]> | null = null;
+
+	// alpha, beta, radius
+	export let camera_position: [number | null, number | null, number | null] = [
+		null,
+		null,
+		null
+	];
+	export let upload: Client["upload"];
+	export let stream_handler: Client["stream"];
+
+	async function handle_upload({
+		detail
+	}: CustomEvent<FileData>): Promise<void> {
+		value = detail;
+		await tick();
+		dispatch("change", value);
+		dispatch("load", value);
+	}
+
+	async function handle_clear(): Promise<void> {
+		value = null;
+		await tick();
+		dispatch("clear");
+		dispatch("change");
+	}
+
+	let use_3dgs = false;
+	let Canvas3DGSComponent: typeof Canvas3DGS;
+	let Canvas3DComponent: typeof Canvas3D;
+	async function loadCanvas3D(): Promise<typeof Canvas3D> {
+		const module = await import("./Canvas3D.svelte");
+		return module.default;
+	}
+	async function loadCanvas3DGS(): Promise<typeof Canvas3DGS> {
+		const module = await import("./Canvas3DGS.svelte");
+		return module.default;
+	}
+	$: if (value) {
+		use_3dgs = value.path.endsWith(".splat") || value.path.endsWith(".ply");
+		if (use_3dgs) {
+			loadCanvas3DGS().then((component) => {
+				Canvas3DGSComponent = component;
+			});
+		} else {
+			loadCanvas3D().then((component) => {
+				Canvas3DComponent = component;
+			});
+		}
+	}
+
+	let canvas3d: Canvas3D | undefined;
+	async function handle_undo(): Promise<void> {
+		canvas3d?.reset_camera_position();
+	}
+
+	const dispatch = createEventDispatcher<{
+		change: FileData | null;
+		clear: undefined;
+		drag: boolean;
+		load: FileData;
+	}>();
+
+	let dragging = false;
+
+	$: dispatch("drag", dragging);
 </script>
 
 <BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
 
-{#if value === null}
+{#if value == null}
 	<Upload
+		bind:upload_promise
 		{upload}
 		{stream_handler}
 		on:load={handle_upload}

package/dist/shared/Model3DUpload.svelte.d.ts

@@ -1,41 +1,51 @@
-import { SvelteComponent } from "svelte";
 import type { FileData, Client } from "@gradio/client";
 import type { I18nFormatter } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        value: null | FileData;
-        display_mode?: "solid" | "point_cloud" | "wireframe";
-        clear_color?: [number, number, number, number];
-        label?: string;
-        show_label: boolean;
-        root: string;
-        i18n: I18nFormatter;
-        zoom_speed?: number;
-        pan_speed?: number;
-        max_file_size?: number | null;
-        uploading?: boolean;
-        camera_position?: [number | null, number | null, number | null];
-        upload: Client["upload"];
-        stream_handler: Client["stream"];
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        error: CustomEvent<any>;
-        change: CustomEvent<any>;
-        clear: CustomEvent<undefined>;
-        drag: CustomEvent<boolean>;
-        load: CustomEvent<FileData>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type Model3DUploadProps = typeof __propDef.props;
-export type Model3DUploadEvents = typeof __propDef.events;
-export type Model3DUploadSlots = typeof __propDef.slots;
-export default class Model3DUpload extends SvelteComponent<Model3DUploadProps, Model3DUploadEvents, Model3DUploadSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+declare const Model3DUpload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
+    value: null | FileData;
+    display_mode?: "solid" | "point_cloud" | "wireframe";
+    clear_color?: [number, number, number, number];
+    label?: string;
+    show_label: boolean;
+    root: string;
+    i18n: I18nFormatter;
+    zoom_speed?: number;
+    pan_speed?: number;
+    max_file_size?: number | null;
+    uploading?: boolean;
+    upload_promise?: Promise<(FileData | null)[]> | null;
+    camera_position?: [number | null, number | null, number | null];
+    upload: Client["upload"];
+    stream_handler: Client["stream"];
+}, {
+    default: {};
+}>, {
+    error: CustomEvent<any>;
+    change: CustomEvent<FileData | null>;
+    clear: CustomEvent<undefined>;
+    drag: CustomEvent<boolean>;
+    load: CustomEvent<FileData>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Model3DUpload = InstanceType<typeof Model3DUpload>;
+export default Model3DUpload;

package/dist/types.d.ts

@@ -0,0 +1,19 @@
+import type { FileData } from "@gradio/client";
+import type { LoadingStatus } from "js/statustracker";
+export interface Model3DProps {
+    value: null | FileData;
+    display_mode: "solid" | "point_cloud" | "wireframe";
+    clear_color: [number, number, number, number];
+    height: number | undefined;
+    zoom_speed: number;
+    has_change_history: boolean;
+    camera_position: [number | null, number | null, number | null];
+}
+export interface Model3DEvents {
+    change: FileData | null;
+    upload: FileData;
+    edit: never;
+    clear: never;
+    clear_status: LoadingStatus;
+    error: string;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,27 +1,27 @@
 {
   "name": "@gradio/model3d",
-  "version": "0.15.1-dev.0",
+  "version": "0.15.1-dev.2",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
   "license": "ISC",
   "private": false,
   "dependencies": {
-    "@types/babylon": "^6.16.6",
-    "@babylonjs/viewer": "^8.2.0",
-    "@babylonjs/core": "^8.2.0",
-    "@babylonjs/loaders": "^8.2.0",
-    "dequal": "^2.0.2",
+    "@babylonjs/core": "^8.30.5",
+    "@babylonjs/loaders": "^8.30.5",
+    "@babylonjs/viewer": "^8.30.5",
+    "@types/babylon": "^6.16.9",
+    "dequal": "^2.0.3",
     "gsplat": "^1.2.9",
-    "@gradio/atoms": "^0.18.1",
-    "@gradio/client": "^2.0.0-dev.0",
-    "@gradio/icons": "^0.14.0",
-    "@gradio/statustracker": "^0.11.1",
-    "@gradio/utils": "^0.10.2",
-    "@gradio/upload": "^0.17.2-dev.0"
+    "@gradio/atoms": "^0.19.0-dev.1",
+    "@gradio/statustracker": "^0.12.0-dev.1",
+    "@gradio/client": "^2.0.0-dev.2",
+    "@gradio/icons": "^0.15.0-dev.0",
+    "@gradio/upload": "^0.17.2-dev.2",
+    "@gradio/utils": "^0.10.3-dev.0"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.14.0"
+    "@gradio/preview": "^0.15.0-dev.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
@@ -36,10 +36,15 @@
       "svelte": "./dist/Example.svelte",
       "types": "./dist/Example.svelte.d.ts"
     },
+    "./base": {
+      "gradio": "./shared/Model3D.svelte",
+      "svelte": "./dist/shared/Model3D.svelte",
+      "types": "./dist/shared/Model3D.svelte.d.ts"
+    },
     "./package.json": "./package.json"
   },
   "peerDependencies": {
-    "svelte": "^4.0.0"
+    "svelte": "^5.43.4"
   },
   "repository": {
     "type": "git",

package/shared/Canvas3D.svelte

@@ -22,7 +22,7 @@
 	onMount(() => {
 		const initViewer = async (): Promise<void> => {
 			BABYLON_VIEWER = await import("@babylonjs/viewer");
-			BABYLON_VIEWER.createViewerForCanvas(canvas, {
+			BABYLON_VIEWER.CreateViewerForCanvas(canvas, {
 				clearColor: clear_color,
 				useRightHandedSystem: true,
 				animationAutoPlay: true,

package/shared/Model3DUpload.svelte

@@ -19,6 +19,7 @@
 	export let pan_speed = 1;
 	export let max_file_size: number | null = null;
 	export let uploading = false;
+	export let upload_promise: Promise<(FileData | null)[]> | null = null;
 
 	// alpha, beta, radius
 	export let camera_position: [number | null, number | null, number | null] = [
@@ -88,8 +89,9 @@
 
 <BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
 
-{#if value === null}
+{#if value == null}
 	<Upload
+		bind:upload_promise
 		{upload}
 		{stream_handler}
 		on:load={handle_upload}

package/types.ts

@@ -0,0 +1,21 @@
+import type { FileData } from "@gradio/client";
+import type { LoadingStatus } from "js/statustracker";
+
+export interface Model3DProps {
+	value: null | FileData;
+	display_mode: "solid" | "point_cloud" | "wireframe";
+	clear_color: [number, number, number, number];
+	height: number | undefined;
+	zoom_speed: number;
+	has_change_history: boolean;
+	camera_position: [number | null, number | null, number | null];
+}
+
+export interface Model3DEvents {
+	change: FileData | null;
+	upload: FileData;
+	edit: never;
+	clear: never;
+	clear_status: LoadingStatus;
+	error: string;
+}