gradio

1
import "@gradio/theme/src/reset.css";
2
import "@gradio/theme/src/global.css";
3
import "@gradio/theme/src/pollen.css";
4
import "@gradio/theme/src/typography.css";
5
import { client, upload_files } from "@gradio/client";
6
import { mount_css } from "./css";
7
import type Index from "./Index.svelte";
8

9
import type { ThemeMode } from "./types";
10

11
//@ts-ignore
12
import * as svelte from "./svelte/svelte.js";
13

14
declare let BUILD_MODE: string;
15
declare let GRADIO_VERSION: string;
16

17
const ENTRY_CSS = "__ENTRY_CSS__";
18

19
let FONTS: string | [];
20

21
FONTS = "__FONTS_CSS__";
22

23
let IndexComponent: typeof Index;
24
let _res: (value?: unknown) => void;
25
let pending = new Promise((res) => {
26
	_res = res;
27
});
28
async function get_index(): Promise<void> {
29
	IndexComponent = (await import("./Index.svelte")).default;
30
	_res();
31
}
32

33
function create_custom_element(): void {
34
	const o = {
35
		SvelteComponent: svelte.SvelteComponent
36
	};
37
	for (const key in svelte) {
38
		if (key === "SvelteComponent") continue;
39
		if (key === "SvelteComponentDev") {
40
			//@ts-ignore
41
			o[key] = o["SvelteComponent"];
42
		} else {
43
			//@ts-ignore
44
			o[key] = svelte[key];
45
		}
46
	}
47
	//@ts-ignore
48
	window.__gradio__svelte__internal = o;
49
	class GradioApp extends HTMLElement {
50
		control_page_title: string | null;
51
		initial_height: string;
52
		is_embed: string;
53
		container: string;
54
		info: string | true;
55
		autoscroll: string | null;
56
		eager: string | null;
57
		theme_mode: ThemeMode | null;
58
		host: string | null;
59
		space: string | null;
60
		src: string | null;
61
		app?: Index;
62
		loading: boolean;
63
		updating: { name: string; value: string } | false;
64

65
		constructor() {
66
			super();
67
			this.host = this.getAttribute("host");
68
			this.space = this.getAttribute("space");
69
			this.src = this.getAttribute("src");
70

71
			this.control_page_title = this.getAttribute("control_page_title");
72
			this.initial_height = this.getAttribute("initial_height") ?? "300px"; // default: 300px
73
			this.is_embed = this.getAttribute("embed") ?? "true"; // default: true
74
			this.container = this.getAttribute("container") ?? "true"; // default: true
75
			this.info = this.getAttribute("info") ?? true; // default: true
76
			this.autoscroll = this.getAttribute("autoscroll");
77
			this.eager = this.getAttribute("eager");
78
			this.theme_mode = this.getAttribute("theme_mode") as ThemeMode | null;
79
			this.updating = false;
80
			this.loading = false;
81
		}
82

83
		async connectedCallback(): Promise<void> {
84
			await get_index();
85
			this.loading = true;
86

87
			if (this.app) {
88
				this.app.$destroy();
89
			}
90

91
			if (typeof FONTS !== "string") {
92
				FONTS.forEach((f) => mount_css(f, document.head));
93
			}
94

95
			await mount_css(ENTRY_CSS, document.head);
96

97
			const event = new CustomEvent("domchange", {
98
				bubbles: true,
99
				cancelable: false,
100
				composed: true
101
			});
102

103
			const observer = new MutationObserver((mutations) => {
104
				this.dispatchEvent(event);
105
			});
106

107
			observer.observe(this, { childList: true });
108

109
			this.app = new IndexComponent({
110
				target: this,
111
				props: {
112
					// embed source
113
					space: this.space ? this.space.trim() : this.space,
114
					src: this.src ? this.src.trim() : this.src,
115
					host: this.host ? this.host.trim() : this.host,
116
					// embed info
117
					info: this.info === "false" ? false : true,
118
					container: this.container === "false" ? false : true,
119
					is_embed: this.is_embed === "false" ? false : true,
120
					initial_height: this.initial_height,
121
					eager: this.eager === "true" ? true : false,
122
					// gradio meta info
123
					version: GRADIO_VERSION,
124
					theme_mode: this.theme_mode,
125
					// misc global behaviour
126
					autoscroll: this.autoscroll === "true" ? true : false,
127
					control_page_title: this.control_page_title === "true" ? true : false,
128
					// injectables
129
					client,
130
					upload_files,
131
					// for gradio docs
132
					// TODO: Remove -- i think this is just for autoscroll behavhiour, app vs embeds
133
					app_mode: window.__gradio_mode__ === "app"
134
				}
135
			});
136

137
			if (this.updating) {
138
				this.setAttribute(this.updating.name, this.updating.value);
139
			}
140

141
			this.loading = false;
142
		}
143

144
		static get observedAttributes(): ["src", "space", "host"] {
145
			return ["src", "space", "host"];
146
		}
147

148
		async attributeChangedCallback(
149
			name: string,
150
			old_val: string,
151
			new_val: string
152
		): Promise<void> {
153
			await pending;
154
			if (
155
				(name === "host" || name === "space" || name === "src") &&
156
				new_val !== old_val
157
			) {
158
				this.updating = { name, value: new_val };
159
				if (this.loading) return;
160

161
				if (this.app) {
162
					this.app.$destroy();
163
				}
164

165
				this.space = null;
166
				this.host = null;
167
				this.src = null;
168

169
				if (name === "host") {
170
					this.host = new_val;
171
				} else if (name === "space") {
172
					this.space = new_val;
173
				} else if (name === "src") {
174
					this.src = new_val;
175
				}
176

177
				this.app = new IndexComponent({
178
					target: this,
179
					props: {
180
						// embed source
181
						space: this.space ? this.space.trim() : this.space,
182
						src: this.src ? this.src.trim() : this.src,
183
						host: this.host ? this.host.trim() : this.host,
184
						// embed info
185
						info: this.info === "false" ? false : true,
186
						container: this.container === "false" ? false : true,
187
						is_embed: this.is_embed === "false" ? false : true,
188
						initial_height: this.initial_height,
189
						eager: this.eager === "true" ? true : false,
190
						// gradio meta info
191
						version: GRADIO_VERSION,
192
						theme_mode: this.theme_mode,
193
						// misc global behaviour
194
						autoscroll: this.autoscroll === "true" ? true : false,
195
						control_page_title:
196
							this.control_page_title === "true" ? true : false,
197
						// injectables
198
						client,
199
						upload_files,
200
						// for gradio docs
201
						// TODO: Remove -- i think this is just for autoscroll behavhiour, app vs embeds
202
						app_mode: window.__gradio_mode__ === "app"
203
					}
204
				});
205

206
				this.updating = false;
207
			}
208
		}
209
	}
210
	if (!customElements.get("gradio-app"))
211
		customElements.define("gradio-app", GradioApp);
212
}
213

214
create_custom_element();
215