@gradio/model3d 0.8.1 → 0.8.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -1
- package/package.json +3 -3
- package/shared/Model3D.svelte +29 -26
- package/shared/Model3DUpload.svelte +29 -25
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
1
|
# @gradio/model3d
|
|
2
2
|
|
|
3
|
+
## 0.8.2
|
|
4
|
+
|
|
5
|
+
### Fixes
|
|
6
|
+
|
|
7
|
+
- [#7511](https://github.com/gradio-app/gradio/pull/7511) [`33f68cb`](https://github.com/gradio-app/gradio/commit/33f68cb6c22897f7996b6c84b0e528c47fae00b5) - Fix Canvas3D/Canvas3DGS async imports. Thanks [@whitphx](https://github.com/whitphx)!
|
|
8
|
+
|
|
3
9
|
## 0.8.1
|
|
4
10
|
|
|
5
11
|
### Patch Changes
|
|
@@ -307,4 +313,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
|
|
|
307
313
|
|
|
308
314
|
- Updated dependencies []:
|
|
309
315
|
- @gradio/atoms@0.0.2
|
|
310
|
-
- @gradio/upload@0.0.2
|
|
316
|
+
- @gradio/upload@0.0.2
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gradio/model3d",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.2",
|
|
4
4
|
"description": "Gradio UI packages",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"author": "",
|
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
"gsplat": "^1.0.5",
|
|
15
15
|
"@gradio/atoms": "^0.5.3",
|
|
16
16
|
"@gradio/client": "^0.12.1",
|
|
17
|
+
"@gradio/upload": "^0.7.4",
|
|
17
18
|
"@gradio/icons": "^0.3.3",
|
|
18
|
-
"@gradio/statustracker": "^0.4.7",
|
|
19
19
|
"@gradio/utils": "^0.3.0",
|
|
20
20
|
"@gradio/wasm": "^0.6.0",
|
|
21
|
-
"@gradio/
|
|
21
|
+
"@gradio/statustracker": "^0.4.8"
|
|
22
22
|
},
|
|
23
23
|
"main_changeset": true,
|
|
24
24
|
"main": "./Index.svelte",
|
package/shared/Model3D.svelte
CHANGED
|
@@ -4,6 +4,8 @@
|
|
|
4
4
|
import { File, Download, Undo } from "@gradio/icons";
|
|
5
5
|
import type { I18nFormatter } from "@gradio/utils";
|
|
6
6
|
import { dequal } from "dequal";
|
|
7
|
+
import type Canvas3DGS from "./Canvas3DGS.svelte";
|
|
8
|
+
import type Canvas3D from "./Canvas3D.svelte";
|
|
7
9
|
|
|
8
10
|
export let value: FileData | null;
|
|
9
11
|
export let clear_color: [number, number, number, number] = [0, 0, 0, 0];
|
|
@@ -21,23 +23,33 @@
|
|
|
21
23
|
|
|
22
24
|
let current_settings = { camera_position, zoom_speed, pan_speed };
|
|
23
25
|
|
|
24
|
-
let canvas3dgs: any;
|
|
25
|
-
let canvas3d: any;
|
|
26
26
|
let use_3dgs = false;
|
|
27
|
-
let
|
|
28
|
-
|
|
29
|
-
async function loadCanvas3D(): Promise<
|
|
27
|
+
let Canvas3DGSComponent: typeof Canvas3DGS;
|
|
28
|
+
let Canvas3DComponent: typeof Canvas3D;
|
|
29
|
+
async function loadCanvas3D(): Promise<typeof Canvas3D> {
|
|
30
30
|
const module = await import("./Canvas3D.svelte");
|
|
31
31
|
return module.default;
|
|
32
32
|
}
|
|
33
|
-
|
|
34
|
-
async function loadCanvas3DGS(): Promise<any> {
|
|
33
|
+
async function loadCanvas3DGS(): Promise<typeof Canvas3DGS> {
|
|
35
34
|
const module = await import("./Canvas3DGS.svelte");
|
|
36
35
|
return module.default;
|
|
37
36
|
}
|
|
37
|
+
$: if (value) {
|
|
38
|
+
use_3dgs = value.path.endsWith(".splat") || value.path.endsWith(".ply");
|
|
39
|
+
if (use_3dgs) {
|
|
40
|
+
loadCanvas3DGS().then((component) => {
|
|
41
|
+
Canvas3DGSComponent = component;
|
|
42
|
+
});
|
|
43
|
+
} else {
|
|
44
|
+
loadCanvas3D().then((component) => {
|
|
45
|
+
Canvas3DComponent = component;
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
}
|
|
38
49
|
|
|
50
|
+
let canvas3d: Canvas3D | undefined;
|
|
39
51
|
function handle_undo(): void {
|
|
40
|
-
canvas3d
|
|
52
|
+
canvas3d?.reset_camera_position(camera_position, zoom_speed, pan_speed);
|
|
41
53
|
}
|
|
42
54
|
|
|
43
55
|
$: {
|
|
@@ -46,25 +58,12 @@
|
|
|
46
58
|
current_settings.zoom_speed !== zoom_speed ||
|
|
47
59
|
current_settings.pan_speed !== pan_speed
|
|
48
60
|
) {
|
|
49
|
-
canvas3d
|
|
61
|
+
canvas3d?.reset_camera_position(camera_position, zoom_speed, pan_speed);
|
|
50
62
|
current_settings = { camera_position, zoom_speed, pan_speed };
|
|
51
63
|
}
|
|
52
64
|
}
|
|
53
65
|
|
|
54
|
-
|
|
55
|
-
if (value) {
|
|
56
|
-
use_3dgs = value?.path.endsWith(".splat") || value?.path.endsWith(".ply");
|
|
57
|
-
if (use_3dgs) {
|
|
58
|
-
loadCanvas3DGS().then((module) => {
|
|
59
|
-
canvas3dgs = module;
|
|
60
|
-
});
|
|
61
|
-
} else {
|
|
62
|
-
loadCanvas3D().then((module) => {
|
|
63
|
-
canvas3d = module;
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
}
|
|
66
|
+
let resolved_url: string | undefined;
|
|
68
67
|
</script>
|
|
69
68
|
|
|
70
69
|
<BlockLabel
|
|
@@ -75,7 +74,10 @@
|
|
|
75
74
|
{#if value}
|
|
76
75
|
<div class="model3D">
|
|
77
76
|
<div class="buttons">
|
|
78
|
-
|
|
77
|
+
{#if !use_3dgs}
|
|
78
|
+
<!-- Canvas3DGS doesn't implement the undo method (reset_camera_position) -->
|
|
79
|
+
<IconButton Icon={Undo} label="Undo" on:click={() => handle_undo()} />
|
|
80
|
+
{/if}
|
|
79
81
|
<a
|
|
80
82
|
href={resolved_url}
|
|
81
83
|
target={window.__is_colab__ ? "_blank" : null}
|
|
@@ -87,7 +89,7 @@
|
|
|
87
89
|
|
|
88
90
|
{#if use_3dgs}
|
|
89
91
|
<svelte:component
|
|
90
|
-
this={
|
|
92
|
+
this={Canvas3DGSComponent}
|
|
91
93
|
bind:resolved_url
|
|
92
94
|
{value}
|
|
93
95
|
{zoom_speed}
|
|
@@ -95,7 +97,8 @@
|
|
|
95
97
|
/>
|
|
96
98
|
{:else}
|
|
97
99
|
<svelte:component
|
|
98
|
-
this={
|
|
100
|
+
this={Canvas3DComponent}
|
|
101
|
+
bind:this={canvas3d}
|
|
99
102
|
bind:resolved_url
|
|
100
103
|
{value}
|
|
101
104
|
{clear_color}
|
|
@@ -5,6 +5,8 @@
|
|
|
5
5
|
import { BlockLabel } from "@gradio/atoms";
|
|
6
6
|
import { File } from "@gradio/icons";
|
|
7
7
|
import type { I18nFormatter } from "@gradio/utils";
|
|
8
|
+
import type Canvas3DGS from "./Canvas3DGS.svelte";
|
|
9
|
+
import type Canvas3D from "./Canvas3D.svelte";
|
|
8
10
|
|
|
9
11
|
export let value: null | FileData;
|
|
10
12
|
export let clear_color: [number, number, number, number] = [0, 0, 0, 0];
|
|
@@ -38,22 +40,33 @@
|
|
|
38
40
|
dispatch("change");
|
|
39
41
|
}
|
|
40
42
|
|
|
41
|
-
let canvas3d: any;
|
|
42
|
-
let canvas3dgs: any;
|
|
43
43
|
let use_3dgs = false;
|
|
44
|
-
|
|
45
|
-
|
|
44
|
+
let Canvas3DGSComponent: typeof Canvas3DGS;
|
|
45
|
+
let Canvas3DComponent: typeof Canvas3D;
|
|
46
|
+
async function loadCanvas3D(): Promise<typeof Canvas3D> {
|
|
46
47
|
const module = await import("./Canvas3D.svelte");
|
|
47
48
|
return module.default;
|
|
48
49
|
}
|
|
49
|
-
|
|
50
|
-
async function loadCanvas3DGS(): Promise<any> {
|
|
50
|
+
async function loadCanvas3DGS(): Promise<typeof Canvas3DGS> {
|
|
51
51
|
const module = await import("./Canvas3DGS.svelte");
|
|
52
52
|
return module.default;
|
|
53
53
|
}
|
|
54
|
+
$: if (value) {
|
|
55
|
+
use_3dgs = value.path.endsWith(".splat") || value.path.endsWith(".ply");
|
|
56
|
+
if (use_3dgs) {
|
|
57
|
+
loadCanvas3DGS().then((component) => {
|
|
58
|
+
Canvas3DGSComponent = component;
|
|
59
|
+
});
|
|
60
|
+
} else {
|
|
61
|
+
loadCanvas3D().then((component) => {
|
|
62
|
+
Canvas3DComponent = component;
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
}
|
|
54
66
|
|
|
67
|
+
let canvas3d: Canvas3D | undefined;
|
|
55
68
|
async function handle_undo(): Promise<void> {
|
|
56
|
-
canvas3d
|
|
69
|
+
canvas3d?.reset_camera_position(camera_position, zoom_speed, pan_speed);
|
|
57
70
|
}
|
|
58
71
|
|
|
59
72
|
const dispatch = createEventDispatcher<{
|
|
@@ -66,21 +79,6 @@
|
|
|
66
79
|
let dragging = false;
|
|
67
80
|
|
|
68
81
|
$: dispatch("drag", dragging);
|
|
69
|
-
|
|
70
|
-
$: {
|
|
71
|
-
if (value) {
|
|
72
|
-
use_3dgs = value?.path.endsWith(".splat") || value?.path.endsWith(".ply");
|
|
73
|
-
if (use_3dgs) {
|
|
74
|
-
loadCanvas3DGS().then((module) => {
|
|
75
|
-
canvas3dgs = module;
|
|
76
|
-
});
|
|
77
|
-
} else {
|
|
78
|
-
loadCanvas3D().then((module) => {
|
|
79
|
-
canvas3d = module;
|
|
80
|
-
});
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
82
|
</script>
|
|
85
83
|
|
|
86
84
|
<BlockLabel {show_label} Icon={File} label={label || "3D Model"} />
|
|
@@ -97,7 +95,7 @@
|
|
|
97
95
|
{:else}
|
|
98
96
|
<div class="input-model">
|
|
99
97
|
<ModifyUpload
|
|
100
|
-
undoable
|
|
98
|
+
undoable={!use_3dgs}
|
|
101
99
|
on:clear={handle_clear}
|
|
102
100
|
{i18n}
|
|
103
101
|
on:undo={handle_undo}
|
|
@@ -105,10 +103,16 @@
|
|
|
105
103
|
/>
|
|
106
104
|
|
|
107
105
|
{#if use_3dgs}
|
|
108
|
-
<svelte:component
|
|
106
|
+
<svelte:component
|
|
107
|
+
this={Canvas3DGSComponent}
|
|
108
|
+
{value}
|
|
109
|
+
{zoom_speed}
|
|
110
|
+
{pan_speed}
|
|
111
|
+
/>
|
|
109
112
|
{:else}
|
|
110
113
|
<svelte:component
|
|
111
|
-
this={
|
|
114
|
+
this={Canvas3DComponent}
|
|
115
|
+
bind:this={canvas3d}
|
|
112
116
|
{value}
|
|
113
117
|
{clear_color}
|
|
114
118
|
{camera_position}
|