@gradio/model3d 0.12.1 → 0.12.2-beta.1

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @gradio/model3d
 
+## 0.12.2-beta.1
+
+### Features
+
+- [#9187](https://github.com/gradio-app/gradio/pull/9187) [`5bf00b7`](https://github.com/gradio-app/gradio/commit/5bf00b7524ebf399b48719120a49d15bb21bd65c) - make all component SSR compatible.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/atoms@0.8.1-beta.1
+- @gradio/icons@0.8.0-beta.1
+- @gradio/statustracker@0.8.0-beta.1
+- @gradio/utils@0.7.0-beta.1
+- @gradio/client@1.6.0-beta.1
+- @gradio/upload@0.12.4-beta.1
+- @gradio/wasm@0.13.1-beta.1
+
+## 0.12.2-beta.0
+
+### Fixes
+
+- [#9163](https://github.com/gradio-app/gradio/pull/9163) [`2b6cbf2`](https://github.com/gradio-app/gradio/commit/2b6cbf25908e42cf027324e54ef2cc0baad11a91) - fix exports and generate types.  Thanks @pngwn!
+
+### Dependency updates
+
+- @gradio/utils@0.7.0-beta.0
+- @gradio/statustracker@0.8.0-beta.0
+- @gradio/atoms@0.8.1-beta.0
+- @gradio/client@1.6.0-beta.0
+- @gradio/icons@0.8.0-beta.0
+- @gradio/upload@0.12.4-beta.0
+- @gradio/wasm@0.13.1-beta.0
+
 ## 0.12.1
 
 ### Features

package/Index.svelte

@@ -41,6 +41,7 @@
 	export let interactive: boolean;
 
 	let dragging = false;
+	const is_browser = typeof window !== "undefined";
 </script>
 
 {#if !interactive}
@@ -63,7 +64,7 @@
 			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
 		/>
 
-		{#if value}
+		{#if value && is_browser}
 			<Model3D
 				{value}
 				i18n={gradio.i18n}

package/dist/Example.svelte

@@ -0,0 +1,18 @@
+<script>export let value;
+export let type;
+export let selected = false;
+</script>
+
+<div
+	class:table={type === "table"}
+	class:gallery={type === "gallery"}
+	class:selected
+>
+	{value ? value : ""}
+</div>
+
+<style>
+	.gallery {
+		padding: var(--size-1) var(--size-2);
+	}
+</style>

package/dist/Example.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        value: string | null;
+        type: "gallery" | "table";
+        selected?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ExampleProps = typeof __propDef.props;
+export type ExampleEvents = typeof __propDef.events;
+export type ExampleSlots = typeof __propDef.slots;
+export default class Example extends SvelteComponent<ExampleProps, ExampleEvents, ExampleSlots> {
+}
+export {};

package/dist/Index.svelte

@@ -0,0 +1,130 @@
+<script context="module">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>import Model3D from "./shared/Model3D.svelte";
+import Model3DUpload from "./shared/Model3DUpload.svelte";
+import { BlockLabel, Block, Empty, UploadText } from "@gradio/atoms";
+import { File } from "@gradio/icons";
+import { StatusTracker } from "@gradio/statustracker";
+export let elem_id = "";
+export let elem_classes = [];
+export let visible = true;
+export let value = null;
+export let root;
+export let display_mode = "solid";
+export let clear_color;
+export let loading_status;
+export let label;
+export let show_label;
+export let container = true;
+export let scale = null;
+export let min_width = void 0;
+export let gradio;
+export let height = void 0;
+export let zoom_speed = 1;
+export let camera_position = [
+  null,
+  null,
+  null
+];
+export let interactive;
+let dragging = false;
+const is_browser = typeof window !== "undefined";
+</script>
+
+{#if !interactive}
+	<Block
+		{visible}
+		variant={value === null ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{container}
+		{scale}
+		{min_width}
+		{height}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+
+		{#if value && is_browser}
+			<Model3D
+				{value}
+				i18n={gradio.i18n}
+				{display_mode}
+				{clear_color}
+				{label}
+				{show_label}
+				{camera_position}
+				{zoom_speed}
+			/>
+		{:else}
+			<!-- Not ideal but some bugs to work out before we can 
+				 make this consistent with other components -->
+
+			<BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
+
+			<Empty unpadded_box={true} size="large"><File /></Empty>
+		{/if}
+	</Block>
+{:else}
+	<Block
+		{visible}
+		variant={value === null ? "dashed" : "solid"}
+		border_mode={dragging ? "focus" : "base"}
+		padding={false}
+		{elem_id}
+		{elem_classes}
+		{container}
+		{scale}
+		{min_width}
+		{height}
+	>
+		<StatusTracker
+			autoscroll={gradio.autoscroll}
+			i18n={gradio.i18n}
+			{...loading_status}
+			on:clear_status={() => gradio.dispatch("clear_status", loading_status)}
+		/>
+
+		<Model3DUpload
+			{label}
+			{show_label}
+			{root}
+			{display_mode}
+			{clear_color}
+			{value}
+			{camera_position}
+			{zoom_speed}
+			on:change={({ detail }) => (value = detail)}
+			on:drag={({ detail }) => (dragging = detail)}
+			on:change={({ detail }) => gradio.dispatch("change", detail)}
+			on:clear={() => {
+				value = null;
+				gradio.dispatch("clear");
+			}}
+			on:load={({ detail }) => {
+				value = detail;
+				gradio.dispatch("upload");
+			}}
+			on:error={({ detail }) => {
+				loading_status = loading_status || {};
+				loading_status.status = "error";
+				gradio.dispatch("error", detail);
+			}}
+			i18n={gradio.i18n}
+			max_file_size={gradio.max_file_size}
+			upload={gradio.client.upload}
+			stream_handler={gradio.client.stream}
+		>
+			<UploadText i18n={gradio.i18n} type="file" />
+		</Model3DUpload>
+	</Block>
+{/if}

package/dist/Index.svelte.d.ts

@@ -0,0 +1,38 @@
+import { SvelteComponent } from "svelte";
+export { default as BaseModel3D } from "./shared/Model3D.svelte";
+export { default as BaseModel3DUpload } from "./shared/Model3DUpload.svelte";
+export { default as BaseExample } from "./Example.svelte";
+import type { FileData } from "@gradio/client";
+import type { LoadingStatus } from "@gradio/statustracker";
+import type { Gradio } from "@gradio/utils";
+declare const __propDef: {
+    props: {
+        elem_id?: string | undefined;
+        elem_classes?: string[] | undefined;
+        visible?: boolean | undefined;
+        value?: (null | FileData) | undefined;
+        root: string;
+        display_mode?: ("solid" | "point_cloud" | "wireframe") | undefined;
+        clear_color: [number, number, number, number];
+        loading_status: LoadingStatus;
+        label: string;
+        show_label: boolean;
+        container?: boolean | undefined;
+        scale?: (number | null) | undefined;
+        min_width?: number | undefined;
+        gradio: Gradio;
+        height?: number | undefined;
+        zoom_speed?: number | undefined;
+        camera_position?: [number | null, number | null, number | null] | undefined;
+        interactive: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type IndexProps = typeof __propDef.props;
+export type IndexEvents = typeof __propDef.events;
+export type IndexSlots = typeof __propDef.slots;
+export default class Index extends SvelteComponent<IndexProps, IndexEvents, IndexSlots> {
+}

package/dist/shared/Canvas3D.svelte

@@ -0,0 +1,177 @@
+<script>import { onMount } from "svelte";
+import * as BABYLON from "babylonjs";
+import * as BABYLON_LOADERS from "babylonjs-loaders";
+import { resolve_wasm_src } from "@gradio/wasm/svelte";
+$: {
+  if (BABYLON_LOADERS.OBJFileLoader != void 0 && !BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS) {
+    BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS = true;
+  }
+}
+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;
+export let resolved_url = void 0;
+let latest_url;
+$: {
+  resolved_url = url;
+  if (url) {
+    latest_url = url;
+    const resolving_url = url;
+    resolve_wasm_src(url).then((resolved) => {
+      if (latest_url === resolving_url) {
+        resolved_url = resolved ?? void 0;
+      } else {
+        resolved && URL.revokeObjectURL(resolved);
+      }
+    });
+  }
+}
+let canvas;
+let scene;
+let engine;
+let point_cloud_system = null;
+let mounted = false;
+onMount(() => {
+  engine = new BABYLON.Engine(canvas, true);
+  scene = new BABYLON.Scene(engine);
+  scene.createDefaultCameraOrLight();
+  scene.useRightHandedSystem = true;
+  scene.clearColor = scene.clearColor = new BABYLON.Color4(...clear_color);
+  engine.runRenderLoop(() => {
+    scene.render();
+  });
+  function onWindowResize() {
+    engine.resize();
+  }
+  window.addEventListener("resize", onWindowResize);
+  mounted = true;
+  return () => {
+    scene.dispose();
+    engine.dispose();
+    window.removeEventListener("resize", onWindowResize);
+  };
+});
+$:
+  mounted && load_model(resolved_url);
+function load_model(url2) {
+  if (scene) {
+    scene.meshes.forEach((mesh) => {
+      mesh.dispose();
+    });
+    if (point_cloud_system) {
+      point_cloud_system.dispose();
+      point_cloud_system = null;
+    }
+    if (url2) {
+      BABYLON.SceneLoader.ShowLoadingScreen = false;
+      BABYLON.SceneLoader.Append(
+        url2,
+        "",
+        scene,
+        () => {
+          if (display_mode === "point_cloud") {
+            create_point_cloud(scene);
+          } else if (display_mode === "wireframe") {
+            create_wireframe(scene);
+          } else {
+            create_camera(scene, camera_position, zoom_speed, pan_speed);
+          }
+        },
+        void 0,
+        void 0,
+        "." + value.path.split(".").pop()
+      );
+    }
+  }
+}
+function create_camera(scene2, camera_position2, zoom_speed2, pan_speed2) {
+  scene2.createDefaultCamera(true, true, true);
+  var helperCamera = scene2.activeCamera;
+  if (camera_position2[0] !== null) {
+    helperCamera.alpha = BABYLON.Tools.ToRadians(camera_position2[0]);
+  }
+  if (camera_position2[1] !== null) {
+    helperCamera.beta = BABYLON.Tools.ToRadians(camera_position2[1]);
+  }
+  if (camera_position2[2] !== null) {
+    helperCamera.radius = camera_position2[2];
+  }
+  helperCamera.lowerRadiusLimit = 0.1;
+  const updateCameraSensibility = () => {
+    helperCamera.wheelPrecision = 250 / (helperCamera.radius * zoom_speed2);
+    helperCamera.panningSensibility = 1e4 * pan_speed2 / helperCamera.radius;
+  };
+  updateCameraSensibility();
+  helperCamera.attachControl(true);
+  helperCamera.onAfterCheckInputsObservable.add(updateCameraSensibility);
+}
+export function reset_camera_position(camera_position2, zoom_speed2, pan_speed2) {
+  if (scene) {
+    scene.removeCamera(scene.activeCamera);
+    create_camera(scene, camera_position2, zoom_speed2, pan_speed2);
+  }
+}
+function create_point_cloud(scene2) {
+  const meshes = scene2.meshes;
+  const pointPositions = [];
+  meshes.forEach((mesh) => {
+    if (mesh instanceof BABYLON.Mesh) {
+      const positions = mesh.getVerticesData(
+        BABYLON.VertexBuffer.PositionKind
+      );
+      if (positions) {
+        for (let i = 0; i < positions.length; i += 3) {
+          pointPositions.push(
+            new BABYLON.Vector3(
+              positions[i],
+              positions[i + 1],
+              positions[i + 2]
+            )
+          );
+        }
+      }
+      mesh.setEnabled(false);
+    }
+  });
+  point_cloud_system = new BABYLON.PointsCloudSystem(
+    "point_cloud_system",
+    1,
+    scene2
+  );
+  point_cloud_system.addPoints(
+    pointPositions.length,
+    (particle, i) => {
+      particle.position = pointPositions[i];
+      particle.color = new BABYLON.Color4(
+        Math.random(),
+        Math.random(),
+        Math.random(),
+        1
+      );
+    }
+  );
+  point_cloud_system.buildMeshAsync().then((mesh) => {
+    mesh.alwaysSelectAsActiveMesh = true;
+    create_camera(scene2, camera_position, zoom_speed, pan_speed);
+  });
+}
+function create_wireframe(scene2) {
+  scene2.meshes.forEach((mesh) => {
+    if (mesh instanceof BABYLON.Mesh) {
+      mesh.material = new BABYLON.StandardMaterial(
+        "wireframeMaterial",
+        scene2
+      );
+      mesh.material.wireframe = true;
+    }
+    create_camera(scene2, camera_position, zoom_speed, pan_speed);
+  });
+}
+</script>
+
+<canvas bind:this={canvas}></canvas>

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

@@ -0,0 +1,25 @@
+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;
+        resolved_url?: string | undefined;
+        reset_camera_position?: ((camera_position: [number | null, number | null, number | null], zoom_speed: number, pan_speed: number) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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 reset_camera_position(): (camera_position: [number | null, number | null, number | null], zoom_speed: number, pan_speed: number) => void;
+}
+export {};

package/dist/shared/Canvas3DGS.svelte

@@ -0,0 +1,103 @@
+<script>import { onMount } from "svelte";
+import * as SPLAT from "gsplat";
+import { resolve_wasm_src } from "@gradio/wasm/svelte";
+export let value;
+export let zoom_speed;
+export let pan_speed;
+$:
+  url = value.url;
+export let resolved_url = void 0;
+let latest_url;
+$: {
+  resolved_url = url;
+  if (url) {
+    latest_url = url;
+    const resolving_url = url;
+    resolve_wasm_src(url).then((resolved) => {
+      if (latest_url === resolving_url) {
+        resolved_url = resolved ?? void 0;
+      } else {
+        resolved && URL.revokeObjectURL(resolved);
+      }
+    });
+  }
+}
+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 (!resolved_url) {
+      throw new Error("No resolved URL");
+    }
+    loading = true;
+    if (resolved_url.endsWith(".ply")) {
+      await SPLAT.PLYLoader.LoadAsync(resolved_url, scene, void 0);
+    } else if (resolved_url.endsWith(".splat")) {
+      await SPLAT.Loader.LoadAsync(resolved_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>
+
+<canvas bind:this={canvas}></canvas>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { FileData } from "@gradio/client";
+declare const __propDef: {
+    props: {
+        value: FileData;
+        zoom_speed: number;
+        pan_speed: number;
+        resolved_url?: string | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/shared/Model3D.svelte

@@ -0,0 +1,124 @@
+<script>import { BlockLabel, IconButton } 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
+];
+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(camera_position, zoom_speed, pan_speed);
+}
+$: {
+  if (!dequal(current_settings.camera_position, camera_position) || current_settings.zoom_speed !== zoom_speed || current_settings.pan_speed !== pan_speed) {
+    canvas3d?.reset_camera_position(camera_position, zoom_speed, pan_speed);
+    current_settings = { camera_position, zoom_speed, pan_speed };
+  }
+}
+let resolved_url;
+</script>
+
+<BlockLabel
+	{show_label}
+	Icon={File}
+	label={label || i18n("3D_model.3d_model")}
+/>
+{#if value}
+	<div class="model3D">
+		<div class="buttons">
+			{#if !use_3dgs}
+				<!-- Canvas3DGS doesn't implement the undo method (reset_camera_position) -->
+				<IconButton Icon={Undo} label="Undo" on:click={() => handle_undo()} />
+			{/if}
+			<a
+				href={resolved_url}
+				target={window.__is_colab__ ? "_blank" : null}
+				download={window.__is_colab__ ? null : value.orig_name || value.path}
+			>
+				<IconButton Icon={Download} label={i18n("common.download")} />
+			</a>
+		</div>
+
+		{#if use_3dgs}
+			<svelte:component
+				this={Canvas3DGSComponent}
+				bind:resolved_url
+				{value}
+				{zoom_speed}
+				{pan_speed}
+			/>
+		{:else}
+			<svelte:component
+				this={Canvas3DComponent}
+				bind:this={canvas3d}
+				bind:resolved_url
+				{value}
+				{display_mode}
+				{clear_color}
+				{camera_position}
+				{zoom_speed}
+				{pan_speed}
+			/>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.model3D {
+		display: flex;
+		position: relative;
+		width: var(--size-full);
+		height: var(--size-full);
+		border-radius: var(--block-radius);
+		overflow: hidden;
+	}
+	.model3D :global(canvas) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+		overflow: hidden;
+	}
+	.buttons {
+		display: flex;
+		position: absolute;
+		top: var(--size-2);
+		right: var(--size-2);
+		justify-content: flex-end;
+		gap: var(--spacing-sm);
+		z-index: var(--layer-5);
+	}
+</style>

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

@@ -0,0 +1,26 @@
+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") | undefined;
+        clear_color?: [number, number, number, number] | undefined;
+        label?: string | undefined;
+        show_label: boolean;
+        i18n: I18nFormatter;
+        zoom_speed?: number | undefined;
+        pan_speed?: number | undefined;
+        camera_position?: [number | null, number | null, number | null] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+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> {
+}
+export {};

package/dist/shared/Model3DUpload.svelte

@@ -0,0 +1,135 @@
+<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 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(camera_position, zoom_speed, pan_speed);
+}
+const dispatch = createEventDispatcher();
+let dragging = false;
+$:
+  dispatch("drag", dragging);
+</script>
+
+<BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
+
+{#if value === null}
+	<Upload
+		{upload}
+		{stream_handler}
+		on:load={handle_upload}
+		{root}
+		{max_file_size}
+		filetype={[".stl", ".obj", ".gltf", ".glb", "model/obj", ".splat", ".ply"]}
+		bind:dragging
+		on:error
+	>
+		<slot />
+	</Upload>
+{:else}
+	<div class="input-model">
+		<ModifyUpload
+			undoable={!use_3dgs}
+			on:clear={handle_clear}
+			{i18n}
+			on:undo={handle_undo}
+			absolute
+		/>
+
+		{#if use_3dgs}
+			<svelte:component
+				this={Canvas3DGSComponent}
+				{value}
+				{zoom_speed}
+				{pan_speed}
+			/>
+		{:else}
+			<svelte:component
+				this={Canvas3DComponent}
+				bind:this={canvas3d}
+				{value}
+				{display_mode}
+				{clear_color}
+				{camera_position}
+				{zoom_speed}
+				{pan_speed}
+			/>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.input-model {
+		display: flex;
+		position: relative;
+		justify-content: center;
+		align-items: center;
+		width: var(--size-full);
+		height: var(--size-full);
+		border-radius: var(--block-radius);
+		overflow: hidden;
+	}
+
+	.input-model :global(canvas) {
+		width: var(--size-full);
+		height: var(--size-full);
+		object-fit: contain;
+		overflow: hidden;
+	}
+</style>

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

@@ -0,0 +1,38 @@
+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") | undefined;
+        clear_color?: [number, number, number, number] | undefined;
+        label?: string | undefined;
+        show_label: boolean;
+        root: string;
+        i18n: I18nFormatter;
+        zoom_speed?: number | undefined;
+        pan_speed?: number | undefined;
+        max_file_size?: (number | null) | undefined;
+        camera_position?: [number | null, number | null, number | null] | undefined;
+        upload: Client["upload"];
+        stream_handler: Client["stream"];
+    };
+    events: {
+        error: CustomEvent<any>;
+        change: CustomEvent<FileData | null>;
+        clear: CustomEvent<undefined>;
+        drag: CustomEvent<boolean>;
+        load: CustomEvent<FileData>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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> {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/model3d",
-  "version": "0.12.1",
+  "version": "0.12.2-beta.1",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -12,24 +12,35 @@
     "babylonjs-loaders": "^4.2.1",
     "dequal": "^2.0.2",
     "gsplat": "^1.0.5",
-    "@gradio/atoms": "^0.8.0",
-    "@gradio/client": "^1.5.1",
-    "@gradio/icons": "^0.7.1",
-    "@gradio/upload": "^0.12.3",
-    "@gradio/statustracker": "^0.7.5",
-    "@gradio/utils": "^0.6.0",
-    "@gradio/wasm": "^0.13.0"
+    "@gradio/atoms": "^0.8.1-beta.1",
+    "@gradio/icons": "^0.8.0-beta.1",
+    "@gradio/statustracker": "^0.8.0-beta.1",
+    "@gradio/upload": "^0.12.4-beta.1",
+    "@gradio/wasm": "^0.13.1-beta.1",
+    "@gradio/utils": "^0.7.0-beta.1",
+    "@gradio/client": "^1.6.0-beta.1"
   },
   "devDependencies": {
-    "@gradio/preview": "^0.11.0"
+    "@gradio/preview": "^0.11.1-beta.0"
   },
   "main_changeset": true,
   "main": "./Index.svelte",
   "exports": {
-    ".": "./Index.svelte",
-    "./example": "./Example.svelte",
+    ".": {
+      "gradio": "./Index.svelte",
+      "svelte": "./dist/Index.svelte",
+      "types": "./dist/Index.svelte.d.ts"
+    },
+    "./example": {
+      "gradio": "./Example.svelte",
+      "svelte": "./dist/Example.svelte",
+      "types": "./dist/Example.svelte.d.ts"
+    },
     "./package.json": "./package.json"
   },
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gradio-app/gradio.git",