File size: 3,247 Bytes
a03b3ba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<script context="module" lang="ts">
	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 lang="ts">
	import { normalise_file, type FileData } from "@gradio/client";
	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";
	import type { LoadingStatus } from "@gradio/statustracker";
	import type { Gradio } from "@gradio/utils";

	export let elem_id = "";
	export let elem_classes: string[] = [];
	export let visible = true;
	export let value: null | FileData = null;
	export let root: string;
	export let proxy_url: null | string;
	export let clear_color: [number, number, number, number];
	export let loading_status: LoadingStatus;
	export let label: string;
	export let show_label: boolean;
	export let container = true;
	export let scale: number | null = null;
	export let min_width: number | undefined = undefined;
	export let gradio: Gradio;
	export let height: number | undefined = undefined;
	export let zoom_speed = 1;

	// alpha, beta, radius
	export let camera_position: [number | null, number | null, number | null] = [
		null,
		null,
		null
	];
	export let interactive: boolean;

	let _value: null | FileData;
	$: _value = normalise_file(value, root, proxy_url);

	let dragging = false;
</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}
		/>

		{#if value}
			<Model3D
				value={_value}
				i18n={gradio.i18n}
				{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}
		/>

		<Model3DUpload
			{label}
			{show_label}
			{root}
			{clear_color}
			value={_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");
			}}
			i18n={gradio.i18n}
		>
			<UploadText i18n={gradio.i18n} type="file" />
		</Model3DUpload>
	</Block>
{/if}