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

package/dist/shared/Canvas3D.svelte

@@ -1,89 +1,110 @@
-<script>import { onMount } from "svelte";
-let BABYLON_VIEWER;
-export let value;
-export let display_mode;
-export let clear_color;
-export let camera_position;
-export let zoom_speed;
-export let pan_speed;
-$: url = value.url;
-let canvas;
-let viewer;
-let viewerDetails;
-let mounted = false;
-onMount(() => {
-  const initViewer = async () => {
-    BABYLON_VIEWER = await import("@babylonjs/viewer");
-    BABYLON_VIEWER.createViewerForCanvas(canvas, {
-      clearColor: clear_color,
-      useRightHandedSystem: true,
-      animationAutoPlay: true,
-      cameraAutoOrbit: { enabled: false },
-      onInitialized: (details) => {
-        viewerDetails = details;
-      }
-    }).then((promiseViewer) => {
-      viewer = promiseViewer;
-      mounted = true;
-    });
-  };
-  initViewer();
-  return () => {
-    viewer?.dispose();
-  };
-});
-$: mounted && load_model(url);
-function setRenderingMode(pointsCloud, wireframe) {
-  viewerDetails.scene.forcePointsCloud = pointsCloud;
-  viewerDetails.scene.forceWireframe = wireframe;
-}
-function load_model(url2) {
-  if (viewer) {
-    if (url2) {
-      viewer.loadModel(url2, {
-        pluginOptions: {
-          obj: {
-            importVertexColors: true
-          }
-        }
-      }).then(() => {
-        if (display_mode === "point_cloud") {
-          setRenderingMode(true, false);
-        } else if (display_mode === "wireframe") {
-          setRenderingMode(false, true);
-        } else {
-          update_camera(camera_position, zoom_speed, pan_speed);
-        }
-      });
-    } else {
-      viewer.resetModel();
-    }
-  }
-}
-export function update_camera(camera_position2, zoom_speed2, pan_speed2) {
-  const camera = viewerDetails.camera;
-  if (camera_position2[0] !== null) {
-    camera.alpha = camera_position2[0] * Math.PI / 180;
-  }
-  if (camera_position2[1] !== null) {
-    camera.beta = camera_position2[1] * Math.PI / 180;
-  }
-  if (camera_position2[2] !== null) {
-    camera.radius = camera_position2[2];
-  }
-  camera.lowerRadiusLimit = 0.1;
-  const updateCameraSensibility = () => {
-    camera.wheelPrecision = 250 / (camera.radius * zoom_speed2);
-    camera.panningSensibility = 1e4 * pan_speed2 / camera.radius;
-  };
-  updateCameraSensibility();
-  camera.onAfterCheckInputsObservable.add(updateCameraSensibility);
-}
-export function reset_camera_position() {
-  if (viewerDetails) {
-    viewer.resetCamera();
-  }
-}
+<script lang="ts">
+	import { onMount } from "svelte";
+	import type { FileData } from "@gradio/client";
+	import type { Viewer, ViewerDetails } from "@babylonjs/viewer";
+
+	let BABYLON_VIEWER: typeof import("@babylonjs/viewer");
+
+	export let value: FileData;
+	export let display_mode: "solid" | "point_cloud" | "wireframe";
+	export let clear_color: [number, number, number, number];
+	export let camera_position: [number | null, number | null, number | null];
+	export let zoom_speed: number;
+	export let pan_speed: number;
+
+	$: url = value.url;
+
+	let canvas: HTMLCanvasElement;
+	let viewer: Viewer;
+	let viewerDetails: Readonly<ViewerDetails>;
+	let mounted = false;
+
+	onMount(() => {
+		const initViewer = async (): Promise<void> => {
+			BABYLON_VIEWER = await import("@babylonjs/viewer");
+			BABYLON_VIEWER.CreateViewerForCanvas(canvas, {
+				clearColor: clear_color,
+				useRightHandedSystem: true,
+				animationAutoPlay: true,
+				cameraAutoOrbit: { enabled: false },
+				onInitialized: (details: any) => {
+					viewerDetails = details;
+				}
+			}).then((promiseViewer: any) => {
+				viewer = promiseViewer;
+				mounted = true;
+			});
+		};
+
+		initViewer();
+
+		return () => {
+			viewer?.dispose();
+		};
+	});
+
+	$: mounted && load_model(url);
+
+	function setRenderingMode(pointsCloud: boolean, wireframe: boolean): void {
+		viewerDetails.scene.forcePointsCloud = pointsCloud;
+		viewerDetails.scene.forceWireframe = wireframe;
+	}
+
+	function load_model(url: string | undefined): void {
+		if (viewer) {
+			if (url) {
+				viewer
+					.loadModel(url, {
+						pluginOptions: {
+							obj: {
+								importVertexColors: true
+							}
+						}
+					})
+					.then(() => {
+						if (display_mode === "point_cloud") {
+							setRenderingMode(true, false);
+						} else if (display_mode === "wireframe") {
+							setRenderingMode(false, true);
+						} else {
+							update_camera(camera_position, zoom_speed, pan_speed);
+						}
+					});
+			} else {
+				viewer.resetModel();
+			}
+		}
+	}
+
+	export function update_camera(
+		camera_position: [number | null, number | null, number | null],
+		zoom_speed: number,
+		pan_speed: number
+	): void {
+		const camera = viewerDetails.camera;
+		if (camera_position[0] !== null) {
+			camera.alpha = (camera_position[0] * Math.PI) / 180;
+		}
+		if (camera_position[1] !== null) {
+			camera.beta = (camera_position[1] * Math.PI) / 180;
+		}
+		if (camera_position[2] !== null) {
+			camera.radius = camera_position[2];
+		}
+		camera.lowerRadiusLimit = 0.1;
+		const updateCameraSensibility = (): void => {
+			camera.wheelPrecision = 250 / (camera.radius * zoom_speed);
+			camera.panningSensibility = (10000 * pan_speed) / camera.radius;
+		};
+		updateCameraSensibility();
+		camera.onAfterCheckInputsObservable.add(updateCameraSensibility);
+	}
+
+	export function reset_camera_position(): void {
+		if (viewerDetails) {
+			viewer.resetCamera();
+		}
+	}
 </script>
 
 <canvas bind:this={canvas}></canvas>

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

@@ -1,28 +1,31 @@
-import { SvelteComponent } from "svelte";
 import type { FileData } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        value: FileData;
-        display_mode: "solid" | "point_cloud" | "wireframe";
-        clear_color: [number, number, number, number];
-        camera_position: [number | null, number | null, number | null];
-        zoom_speed: number;
-        pan_speed: number;
-        update_camera?: (camera_position: [number | null, number | null, number | null], zoom_speed: number, pan_speed: number) => void;
-        reset_camera_position?: () => void;
+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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type Canvas3DProps = typeof __propDef.props;
-export type Canvas3DEvents = typeof __propDef.events;
-export type Canvas3DSlots = typeof __propDef.slots;
-export default class Canvas3D extends SvelteComponent<Canvas3DProps, Canvas3DEvents, Canvas3DSlots> {
-    get update_camera(): (camera_position: [number | null, number | null, number | null], zoom_speed: number, pan_speed: number) => void;
-    get reset_camera_position(): () => void;
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Canvas3D: $$__sveltets_2_IsomorphicComponent<{
+    value: FileData;
+    display_mode: "solid" | "point_cloud" | "wireframe";
+    clear_color: [number, number, number, number];
+    camera_position: [number | null, number | null, number | null];
+    zoom_speed: number;
+    pan_speed: number;
+    update_camera?: (camera_position: [number | null, number | null, number | null], zoom_speed: number, pan_speed: number) => void;
+    reset_camera_position?: () => void;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {
+    update_camera: (camera_position: [number | null, number | null, number | null], zoom_speed: number, pan_speed: number) => void;
+    reset_camera_position: () => void;
+}, string>;
+type Canvas3D = InstanceType<typeof Canvas3D>;
+export default Canvas3D;

package/dist/shared/Canvas3DGS.svelte

@@ -1,83 +1,102 @@
-<script>import { onMount } from "svelte";
-import * as SPLAT from "gsplat";
-export let value;
-export let zoom_speed;
-export let pan_speed;
-$: url = value.url;
-let canvas;
-let scene;
-let camera;
-let renderer = null;
-let controls;
-let mounted = false;
-let frameId = null;
-function reset_scene() {
-  if (frameId !== null) {
-    cancelAnimationFrame(frameId);
-    frameId = null;
-  }
-  if (renderer !== null) {
-    renderer.dispose();
-    renderer = null;
-  }
-  scene = new SPLAT.Scene();
-  camera = new SPLAT.Camera();
-  renderer = new SPLAT.WebGLRenderer(canvas);
-  controls = new SPLAT.OrbitControls(camera, canvas);
-  controls.zoomSpeed = zoom_speed;
-  controls.panSpeed = pan_speed;
-  if (!value) {
-    return;
-  }
-  let loading = false;
-  const load = async () => {
-    if (loading) {
-      console.error("Already loading");
-      return;
-    }
-    if (!url) {
-      throw new Error("No resolved URL");
-    }
-    loading = true;
-    if (url.endsWith(".ply")) {
-      await SPLAT.PLYLoader.LoadAsync(url, scene, void 0);
-    } else if (url.endsWith(".splat")) {
-      await SPLAT.Loader.LoadAsync(url, scene, void 0);
-    } else {
-      throw new Error("Unsupported file type");
-    }
-    loading = false;
-  };
-  const frame = () => {
-    if (!renderer) {
-      return;
-    }
-    if (loading) {
-      frameId = requestAnimationFrame(frame);
-      return;
-    }
-    controls.update();
-    renderer.render(scene, camera);
-    frameId = requestAnimationFrame(frame);
-  };
-  load();
-  frameId = requestAnimationFrame(frame);
-}
-onMount(() => {
-  if (value != null) {
-    reset_scene();
-  }
-  mounted = true;
-  return () => {
-    if (renderer) {
-      renderer.dispose();
-    }
-  };
-});
-$: ({ path } = value || {
-  path: void 0
-});
-$: canvas && mounted && path && reset_scene();
+<script lang="ts">
+	import { onMount } from "svelte";
+	import * as SPLAT from "gsplat";
+	import type { FileData } from "@gradio/client";
+
+	export let value: FileData;
+	export let zoom_speed: number;
+	export let pan_speed: number;
+
+	$: url = value.url;
+
+	let canvas: HTMLCanvasElement;
+	let scene: SPLAT.Scene;
+	let camera: SPLAT.Camera;
+	let renderer: SPLAT.WebGLRenderer | null = null;
+	let controls: SPLAT.OrbitControls;
+	let mounted = false;
+	let frameId: number | null = null;
+
+	function reset_scene(): void {
+		if (frameId !== null) {
+			cancelAnimationFrame(frameId);
+			frameId = null;
+		}
+
+		if (renderer !== null) {
+			renderer.dispose();
+			renderer = null;
+		}
+
+		scene = new SPLAT.Scene();
+		camera = new SPLAT.Camera();
+		renderer = new SPLAT.WebGLRenderer(canvas);
+		controls = new SPLAT.OrbitControls(camera, canvas);
+		controls.zoomSpeed = zoom_speed;
+		controls.panSpeed = pan_speed;
+
+		if (!value) {
+			return;
+		}
+
+		let loading = false;
+		const load = async (): Promise<void> => {
+			if (loading) {
+				console.error("Already loading");
+				return;
+			}
+			if (!url) {
+				throw new Error("No resolved URL");
+			}
+			loading = true;
+			if (url.endsWith(".ply")) {
+				await SPLAT.PLYLoader.LoadAsync(url, scene, undefined);
+			} else if (url.endsWith(".splat")) {
+				await SPLAT.Loader.LoadAsync(url, scene, undefined);
+			} else {
+				throw new Error("Unsupported file type");
+			}
+			loading = false;
+		};
+
+		const frame = (): void => {
+			if (!renderer) {
+				return;
+			}
+
+			if (loading) {
+				frameId = requestAnimationFrame(frame);
+				return;
+			}
+
+			controls.update();
+			renderer.render(scene, camera);
+
+			frameId = requestAnimationFrame(frame);
+		};
+
+		load();
+		frameId = requestAnimationFrame(frame);
+	}
+
+	onMount(() => {
+		if (value != null) {
+			reset_scene();
+		}
+		mounted = true;
+
+		return () => {
+			if (renderer) {
+				renderer.dispose();
+			}
+		};
+	});
+
+	$: ({ path } = value || {
+		path: undefined
+	});
+
+	$: canvas && mounted && path && reset_scene();
 </script>
 
 <canvas bind:this={canvas}></canvas>

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

@@ -1,21 +1,23 @@
-import { SvelteComponent } from "svelte";
 import type { FileData } from "@gradio/client";
-declare const __propDef: {
-    props: {
-        value: FileData;
-        zoom_speed: number;
-        pan_speed: number;
+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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type Canvas3DgsProps = typeof __propDef.props;
-export type Canvas3DgsEvents = typeof __propDef.events;
-export type Canvas3DgsSlots = typeof __propDef.slots;
-export default class Canvas3Dgs extends SvelteComponent<Canvas3DgsProps, Canvas3DgsEvents, Canvas3DgsSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Canvas3DGS: $$__sveltets_2_IsomorphicComponent<{
+    value: FileData;
+    zoom_speed: number;
+    pan_speed: number;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Canvas3DGS = InstanceType<typeof Canvas3DGS>;
+export default Canvas3DGS;

package/dist/shared/Model3D.svelte

@@ -1,54 +1,69 @@
-<script>import { BlockLabel, IconButton, IconButtonWrapper } from "@gradio/atoms";
-import { File, Download, Undo } from "@gradio/icons";
-import { dequal } from "dequal";
-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 i18n;
-export let zoom_speed = 1;
-export let pan_speed = 1;
-export let camera_position = [
-  null,
-  null,
-  null
-];
-export let has_change_history = false;
-let current_settings = { camera_position, zoom_speed, pan_speed };
-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;
-function handle_undo() {
-  canvas3d?.reset_camera_position();
-}
-$: {
-  if (!dequal(current_settings.camera_position, camera_position) || current_settings.zoom_speed !== zoom_speed || current_settings.pan_speed !== pan_speed) {
-    canvas3d?.update_camera(camera_position, zoom_speed, pan_speed);
-    current_settings = { camera_position, zoom_speed, pan_speed };
-  }
-}
+<script lang="ts">
+	import type { FileData } from "@gradio/client";
+	import { BlockLabel, IconButton, IconButtonWrapper } from "@gradio/atoms";
+	import { File, Download, Undo } from "@gradio/icons";
+	import type { I18nFormatter } from "@gradio/utils";
+	import { dequal } from "dequal";
+	import type Canvas3DGS from "./Canvas3DGS.svelte";
+	import type Canvas3D from "./Canvas3D.svelte";
+
+	export let value: FileData | null;
+	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 i18n: I18nFormatter;
+	export let zoom_speed = 1;
+	export let pan_speed = 1;
+	// alpha, beta, radius
+	export let camera_position: [number | null, number | null, number | null] = [
+		null,
+		null,
+		null
+	];
+	export let has_change_history = false;
+
+	let current_settings = { camera_position, zoom_speed, pan_speed };
+
+	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;
+	function handle_undo(): void {
+		canvas3d?.reset_camera_position();
+	}
+
+	$: {
+		if (
+			!dequal(current_settings.camera_position, camera_position) ||
+			current_settings.zoom_speed !== zoom_speed ||
+			current_settings.pan_speed !== pan_speed
+		) {
+			canvas3d?.update_camera(camera_position, zoom_speed, pan_speed);
+			current_settings = { camera_position, zoom_speed, pan_speed };
+		}
+	}
 </script>
 
 <BlockLabel

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

@@ -1,29 +1,31 @@
-import { SvelteComponent } from "svelte";
 import type { FileData } from "@gradio/client";
 import type { I18nFormatter } from "@gradio/utils";
-declare const __propDef: {
-    props: {
-        value: FileData | null;
-        display_mode?: "solid" | "point_cloud" | "wireframe";
-        clear_color?: [number, number, number, number];
-        label?: string;
-        show_label: boolean;
-        i18n: I18nFormatter;
-        zoom_speed?: number;
-        pan_speed?: number;
-        camera_position?: [number | null, number | null, number | null];
-        has_change_history?: boolean;
+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: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-    exports?: {} | undefined;
-    bindings?: string | undefined;
-};
-export type Model3DProps = typeof __propDef.props;
-export type Model3DEvents = typeof __propDef.events;
-export type Model3DSlots = typeof __propDef.slots;
-export default class Model3D extends SvelteComponent<Model3DProps, Model3DEvents, Model3DSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Model3D: $$__sveltets_2_IsomorphicComponent<{
+    value: FileData | null;
+    display_mode?: "solid" | "point_cloud" | "wireframe";
+    clear_color?: [number, number, number, number];
+    label?: string;
+    show_label: boolean;
+    i18n: I18nFormatter;
+    zoom_speed?: number;
+    pan_speed?: number;
+    camera_position?: [number | null, number | null, number | null];
+    has_change_history?: boolean;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Model3D = InstanceType<typeof Model3D>;
+export default Model3D;