@gradio/model3d 0.16.0 → 0.16.1

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @gradio/model3d
 
+## 0.16.1
+
+### Fixes
+
+- [#12688](https://github.com/gradio-app/gradio/pull/12688) [`5206d47`](https://github.com/gradio-app/gradio/commit/5206d47b7730e6ffc8efd90d8157dd5388c18dc5) - Migrate Model3D to Svelte 5.  Thanks @dawoodkhan82!
+
+### Dependency updates
+
+- @gradio/utils@0.11.1
+- @gradio/client@2.0.2
+
 ## 0.16.0
 
 ### Features

package/Index.svelte

@@ -157,15 +157,15 @@
 			root={gradio.shared.root}
 			display_mode={gradio.props.display_mode}
 			clear_color={gradio.props.clear_color}
-			value={gradio.props.value}
+			bind:value={gradio.props.value}
 			camera_position={gradio.props.camera_position}
 			zoom_speed={gradio.props.zoom_speed}
 			bind:uploading
-			on:change={({ detail }) => handle_change(detail)}
-			on:drag={({ detail }) => handle_drag(detail)}
-			on:clear={handle_clear}
-			on:load={({ detail }) => handle_load(detail)}
-			on:error={({ detail }) => handle_error(detail)}
+			onchange={handle_change}
+			ondrag={handle_drag}
+			onclear={handle_clear}
+			onload={handle_load}
+			onerror={handle_error}
 			i18n={gradio.i18n}
 			max_file_size={gradio.shared.max_file_size}
 			upload={(...args) => gradio.shared.client.upload(...args)}

package/dist/Index.svelte

@@ -157,15 +157,15 @@
 			root={gradio.shared.root}
 			display_mode={gradio.props.display_mode}
 			clear_color={gradio.props.clear_color}
-			value={gradio.props.value}
+			bind:value={gradio.props.value}
 			camera_position={gradio.props.camera_position}
 			zoom_speed={gradio.props.zoom_speed}
 			bind:uploading
-			on:change={({ detail }) => handle_change(detail)}
-			on:drag={({ detail }) => handle_drag(detail)}
-			on:clear={handle_clear}
-			on:load={({ detail }) => handle_load(detail)}
-			on:error={({ detail }) => handle_error(detail)}
+			onchange={handle_change}
+			ondrag={handle_drag}
+			onclear={handle_clear}
+			onload={handle_load}
+			onerror={handle_error}
 			i18n={gradio.i18n}
 			max_file_size={gradio.shared.max_file_size}
 			upload={(...args) => gradio.shared.client.upload(...args)}

package/dist/shared/Canvas3D.svelte

@@ -5,19 +5,28 @@
 
 	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;
+	let {
+		value,
+		display_mode,
+		clear_color,
+		camera_position,
+		zoom_speed,
+		pan_speed
+	}: {
+		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;
+	} = $props();
 
-	$: url = value.url;
+	let url = $derived(value.url);
 
 	let canvas: HTMLCanvasElement;
-	let viewer: Viewer;
-	let viewerDetails: Readonly<ViewerDetails>;
-	let mounted = false;
+	let viewer = $state<Viewer>();
+	let viewerDetails = $state<Readonly<ViewerDetails>>();
+	let mounted = $state(false);
 
 	onMount(() => {
 		const initViewer = async (): Promise<void> => {
@@ -43,9 +52,14 @@
 		};
 	});
 
-	$: mounted && load_model(url);
+	$effect(() => {
+		if (mounted) {
+			load_model(url);
+		}
+	});
 
 	function setRenderingMode(pointsCloud: boolean, wireframe: boolean): void {
+		if (!viewerDetails) return;
 		viewerDetails.scene.forcePointsCloud = pointsCloud;
 		viewerDetails.scene.forceWireframe = wireframe;
 	}
@@ -81,6 +95,7 @@
 		zoom_speed: number,
 		pan_speed: number
 	): void {
+		if (!viewerDetails) return;
 		const camera = viewerDetails.camera;
 		if (camera_position[0] !== null) {
 			camera.alpha = (camera_position[0] * Math.PI) / 180;
@@ -101,7 +116,7 @@
 	}
 
 	export function reset_camera_position(): void {
-		if (viewerDetails) {
+		if (viewerDetails && viewer) {
 			viewer.resetCamera();
 		}
 	}

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

@@ -1,31 +1,15 @@
 import type { FileData } from "@gradio/client";
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Canvas3D: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     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>;
-}, {}, {
+};
+declare const Canvas3D: import("svelte").Component<$$ComponentProps, {
     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>;
+}, "">;
+type Canvas3D = ReturnType<typeof Canvas3D>;
 export default Canvas3D;

package/dist/shared/Canvas3DGS.svelte

@@ -3,19 +3,25 @@
 	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 {
+		value,
+		zoom_speed,
+		pan_speed
+	}: {
+		value: FileData;
+		zoom_speed: number;
+		pan_speed: number;
+	} = $props();
+
+	let url = $derived(value.url);
 
 	let canvas: HTMLCanvasElement;
 	let scene: SPLAT.Scene;
 	let camera: SPLAT.Camera;
-	let renderer: SPLAT.WebGLRenderer | null = null;
+	let renderer = $state<SPLAT.WebGLRenderer | null>(null);
 	let controls: SPLAT.OrbitControls;
-	let mounted = false;
-	let frameId: number | null = null;
+	let mounted = $state(false);
+	let frameId = $state<number | null>(null);
 
 	function reset_scene(): void {
 		if (frameId !== null) {
@@ -92,11 +98,13 @@
 		};
 	});
 
-	$: ({ path } = value || {
-		path: undefined
-	});
+	let path = $derived(value?.path);
 
-	$: canvas && mounted && path && reset_scene();
+	$effect(() => {
+		if (canvas && mounted && path) {
+			reset_scene();
+		}
+	});
 </script>
 
 <canvas bind:this={canvas}></canvas>

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

@@ -1,23 +1,9 @@
 import type { FileData } from "@gradio/client";
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Canvas3DGS: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value: FileData;
     zoom_speed: number;
     pan_speed: number;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Canvas3DGS = InstanceType<typeof Canvas3DGS>;
+};
+declare const Canvas3DGS: import("svelte").Component<$$ComponentProps, {}, "">;
+type Canvas3DGS = ReturnType<typeof Canvas3DGS>;
 export default Canvas3DGS;

package/dist/shared/Model3D.svelte

@@ -7,27 +7,36 @@
 	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 {
+		value,
+		display_mode = "solid",
+		clear_color = [0, 0, 0, 0],
+		label = "",
+		show_label,
+		i18n,
+		zoom_speed = 1,
+		pan_speed = 1,
+		camera_position = [null, null, null],
+		has_change_history = false
+	}: {
+		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;
+	} = $props();
 
-	let current_settings = { camera_position, zoom_speed, pan_speed };
+	let current_settings = $state({ camera_position, zoom_speed, pan_speed });
+	let use_3dgs = $state(false);
+	let Canvas3DGSComponent = $state<typeof Canvas3DGS>();
+	let Canvas3DComponent = $state<typeof Canvas3D>();
+	let canvas3d = $state<Canvas3D | undefined>();
 
-	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;
@@ -36,25 +45,27 @@
 		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;
-			});
+
+	$effect(() => {
+		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();
 	}
 
-	$: {
+	$effect(() => {
 		if (
 			!dequal(current_settings.camera_position, camera_position) ||
 			current_settings.zoom_speed !== zoom_speed ||
@@ -63,7 +74,7 @@
 			canvas3d?.update_camera(camera_position, zoom_speed, pan_speed);
 			current_settings = { camera_position, zoom_speed, pan_speed };
 		}
-	}
+	});
 </script>
 
 <BlockLabel
@@ -79,7 +90,7 @@
 				<IconButton
 					Icon={Undo}
 					label="Undo"
-					on:click={() => handle_undo()}
+					onclick={() => handle_undo()}
 					disabled={!has_change_history}
 				/>
 			{/if}

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

@@ -1,19 +1,6 @@
 import type { FileData } from "@gradio/client";
 import type { I18nFormatter } from "@gradio/utils";
-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;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Model3D: $$__sveltets_2_IsomorphicComponent<{
+type $$ComponentProps = {
     value: FileData | null;
     display_mode?: "solid" | "point_cloud" | "wireframe";
     clear_color?: [number, number, number, number];
@@ -24,8 +11,7 @@ declare const Model3D: $$__sveltets_2_IsomorphicComponent<{
     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>;
+};
+declare const Model3D: import("svelte").Component<$$ComponentProps, {}, "">;
+type Model3D = ReturnType<typeof Model3D>;
 export default Model3D;

package/dist/shared/Model3DUpload.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, tick } from "svelte";
+	import { tick } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import type { FileData, Client } from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
@@ -8,83 +8,107 @@
 	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;
+	let {
+		value = $bindable(),
+		display_mode = "solid",
+		clear_color = [0, 0, 0, 0],
+		label = "",
+		show_label,
+		root,
+		i18n,
+		zoom_speed = 1,
+		pan_speed = 1,
+		max_file_size = null,
+		uploading = $bindable(),
+		upload_promise = $bindable(),
+		camera_position = [null, null, null],
+		upload,
+		stream_handler,
+		onchange,
+		onclear,
+		ondrag,
+		onload,
+		onerror
+	}: {
+		value?: FileData | null;
+		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"];
+		onchange?: (value: FileData | null) => void;
+		onclear?: () => void;
+		ondrag?: (dragging: boolean) => void;
+		onload?: (value: FileData) => void;
+		onerror?: (error: string) => void;
+	} = $props();
 
-	// 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"];
+	let use_3dgs = $state(false);
+	let Canvas3DGSComponent = $state<typeof Canvas3DGS>();
+	let Canvas3DComponent = $state<typeof Canvas3D>();
+	let canvas3d = $state<Canvas3D | undefined>();
+	let dragging = $state(false);
+
+	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;
+	}
+
+	$effect(() => {
+		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;
+				});
+			}
+		}
+	});
+
+	$effect(() => {
+		ondrag?.(dragging);
+	});
 
 	async function handle_upload({
 		detail
 	}: CustomEvent<FileData>): Promise<void> {
 		value = detail;
 		await tick();
-		dispatch("change", value);
-		dispatch("load", value);
+		onchange?.(value);
+		onload?.(value as FileData);
 	}
 
 	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;
-			});
-		}
+		onclear?.();
+		onchange?.(null);
 	}
 
-	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);
+	function handle_error({ detail }: CustomEvent<string>): void {
+		onerror?.(detail);
+	}
 </script>
 
 <BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
@@ -100,7 +124,7 @@
 		filetype={[".stl", ".obj", ".gltf", ".glb", "model/obj", ".splat", ".ply"]}
 		bind:dragging
 		bind:uploading
-		on:error
+		on:error={handle_error}
 		aria_label={i18n("model3d.drop_to_upload")}
 	>
 		<slot />

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

@@ -1,5 +1,27 @@
 import type { FileData, Client } from "@gradio/client";
 import type { I18nFormatter } from "@gradio/utils";
+type $$ComponentProps = {
+    value?: FileData | null;
+    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"];
+    onchange?: (value: FileData | null) => void;
+    onclear?: () => void;
+    ondrag?: (dragging: boolean) => void;
+    onload?: (value: FileData) => void;
+    onerror?: (error: string) => 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;
@@ -18,34 +40,12 @@ type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
 } ? 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"];
-}, {
+declare const Model3DUpload: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<$$ComponentProps, {
     default: {};
 }>, {
-    error: CustomEvent<any>;
-    change: CustomEvent<FileData | null>;
-    clear: CustomEvent<undefined>;
-    drag: CustomEvent<boolean>;
-    load: CustomEvent<FileData>;
-} & {
     [evt: string]: CustomEvent<any>;
 }, {
     default: {};
-}, {}, string>;
+}, {}, "value" | "uploading" | "upload_promise">;
 type Model3DUpload = InstanceType<typeof Model3DUpload>;
 export default Model3DUpload;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/model3d",
-  "version": "0.16.0",
+  "version": "0.16.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -14,11 +14,11 @@
     "dequal": "^2.0.3",
     "gsplat": "^1.2.9",
     "@gradio/atoms": "^0.20.0",
-    "@gradio/icons": "^0.15.0",
+    "@gradio/client": "^2.0.2",
     "@gradio/statustracker": "^0.12.1",
+    "@gradio/icons": "^0.15.0",
     "@gradio/upload": "^0.17.3",
-    "@gradio/client": "^2.0.1",
-    "@gradio/utils": "^0.11.0"
+    "@gradio/utils": "^0.11.1"
   },
   "devDependencies": {
     "@gradio/preview": "^0.15.1"

package/shared/Canvas3D.svelte

@@ -5,19 +5,28 @@
 
 	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;
+	let {
+		value,
+		display_mode,
+		clear_color,
+		camera_position,
+		zoom_speed,
+		pan_speed
+	}: {
+		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;
+	} = $props();
 
-	$: url = value.url;
+	let url = $derived(value.url);
 
 	let canvas: HTMLCanvasElement;
-	let viewer: Viewer;
-	let viewerDetails: Readonly<ViewerDetails>;
-	let mounted = false;
+	let viewer = $state<Viewer>();
+	let viewerDetails = $state<Readonly<ViewerDetails>>();
+	let mounted = $state(false);
 
 	onMount(() => {
 		const initViewer = async (): Promise<void> => {
@@ -43,9 +52,14 @@
 		};
 	});
 
-	$: mounted && load_model(url);
+	$effect(() => {
+		if (mounted) {
+			load_model(url);
+		}
+	});
 
 	function setRenderingMode(pointsCloud: boolean, wireframe: boolean): void {
+		if (!viewerDetails) return;
 		viewerDetails.scene.forcePointsCloud = pointsCloud;
 		viewerDetails.scene.forceWireframe = wireframe;
 	}
@@ -81,6 +95,7 @@
 		zoom_speed: number,
 		pan_speed: number
 	): void {
+		if (!viewerDetails) return;
 		const camera = viewerDetails.camera;
 		if (camera_position[0] !== null) {
 			camera.alpha = (camera_position[0] * Math.PI) / 180;
@@ -101,7 +116,7 @@
 	}
 
 	export function reset_camera_position(): void {
-		if (viewerDetails) {
+		if (viewerDetails && viewer) {
 			viewer.resetCamera();
 		}
 	}

package/shared/Canvas3DGS.svelte

@@ -3,19 +3,25 @@
 	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 {
+		value,
+		zoom_speed,
+		pan_speed
+	}: {
+		value: FileData;
+		zoom_speed: number;
+		pan_speed: number;
+	} = $props();
+
+	let url = $derived(value.url);
 
 	let canvas: HTMLCanvasElement;
 	let scene: SPLAT.Scene;
 	let camera: SPLAT.Camera;
-	let renderer: SPLAT.WebGLRenderer | null = null;
+	let renderer = $state<SPLAT.WebGLRenderer | null>(null);
 	let controls: SPLAT.OrbitControls;
-	let mounted = false;
-	let frameId: number | null = null;
+	let mounted = $state(false);
+	let frameId = $state<number | null>(null);
 
 	function reset_scene(): void {
 		if (frameId !== null) {
@@ -92,11 +98,13 @@
 		};
 	});
 
-	$: ({ path } = value || {
-		path: undefined
-	});
+	let path = $derived(value?.path);
 
-	$: canvas && mounted && path && reset_scene();
+	$effect(() => {
+		if (canvas && mounted && path) {
+			reset_scene();
+		}
+	});
 </script>
 
 <canvas bind:this={canvas}></canvas>

package/shared/Model3D.svelte

@@ -7,27 +7,36 @@
 	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 {
+		value,
+		display_mode = "solid",
+		clear_color = [0, 0, 0, 0],
+		label = "",
+		show_label,
+		i18n,
+		zoom_speed = 1,
+		pan_speed = 1,
+		camera_position = [null, null, null],
+		has_change_history = false
+	}: {
+		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;
+	} = $props();
 
-	let current_settings = { camera_position, zoom_speed, pan_speed };
+	let current_settings = $state({ camera_position, zoom_speed, pan_speed });
+	let use_3dgs = $state(false);
+	let Canvas3DGSComponent = $state<typeof Canvas3DGS>();
+	let Canvas3DComponent = $state<typeof Canvas3D>();
+	let canvas3d = $state<Canvas3D | undefined>();
 
-	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;
@@ -36,25 +45,27 @@
 		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;
-			});
+
+	$effect(() => {
+		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();
 	}
 
-	$: {
+	$effect(() => {
 		if (
 			!dequal(current_settings.camera_position, camera_position) ||
 			current_settings.zoom_speed !== zoom_speed ||
@@ -63,7 +74,7 @@
 			canvas3d?.update_camera(camera_position, zoom_speed, pan_speed);
 			current_settings = { camera_position, zoom_speed, pan_speed };
 		}
-	}
+	});
 </script>
 
 <BlockLabel
@@ -79,7 +90,7 @@
 				<IconButton
 					Icon={Undo}
 					label="Undo"
-					on:click={() => handle_undo()}
+					onclick={() => handle_undo()}
 					disabled={!has_change_history}
 				/>
 			{/if}

package/shared/Model3DUpload.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { createEventDispatcher, tick } from "svelte";
+	import { tick } from "svelte";
 	import { Upload, ModifyUpload } from "@gradio/upload";
 	import type { FileData, Client } from "@gradio/client";
 	import { BlockLabel } from "@gradio/atoms";
@@ -8,83 +8,107 @@
 	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;
+	let {
+		value = $bindable(),
+		display_mode = "solid",
+		clear_color = [0, 0, 0, 0],
+		label = "",
+		show_label,
+		root,
+		i18n,
+		zoom_speed = 1,
+		pan_speed = 1,
+		max_file_size = null,
+		uploading = $bindable(),
+		upload_promise = $bindable(),
+		camera_position = [null, null, null],
+		upload,
+		stream_handler,
+		onchange,
+		onclear,
+		ondrag,
+		onload,
+		onerror
+	}: {
+		value?: FileData | null;
+		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"];
+		onchange?: (value: FileData | null) => void;
+		onclear?: () => void;
+		ondrag?: (dragging: boolean) => void;
+		onload?: (value: FileData) => void;
+		onerror?: (error: string) => void;
+	} = $props();
 
-	// 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"];
+	let use_3dgs = $state(false);
+	let Canvas3DGSComponent = $state<typeof Canvas3DGS>();
+	let Canvas3DComponent = $state<typeof Canvas3D>();
+	let canvas3d = $state<Canvas3D | undefined>();
+	let dragging = $state(false);
+
+	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;
+	}
+
+	$effect(() => {
+		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;
+				});
+			}
+		}
+	});
+
+	$effect(() => {
+		ondrag?.(dragging);
+	});
 
 	async function handle_upload({
 		detail
 	}: CustomEvent<FileData>): Promise<void> {
 		value = detail;
 		await tick();
-		dispatch("change", value);
-		dispatch("load", value);
+		onchange?.(value);
+		onload?.(value as FileData);
 	}
 
 	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;
-			});
-		}
+		onclear?.();
+		onchange?.(null);
 	}
 
-	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);
+	function handle_error({ detail }: CustomEvent<string>): void {
+		onerror?.(detail);
+	}
 </script>
 
 <BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
@@ -100,7 +124,7 @@
 		filetype={[".stl", ".obj", ".gltf", ".glb", "model/obj", ".splat", ".ply"]}
 		bind:dragging
 		bind:uploading
-		on:error
+		on:error={handle_error}
 		aria_label={i18n("model3d.drop_to_upload")}
 	>
 		<slot />