https://smallaicreator-gigity.hf.space/assets/Settings-mCeMXYIy.js

1import { a as set_attribute, q as store_get, $ as $format, m as setup_stores, p as prop, j as get, D as $locale, i as if_block, I as language_choices, J as changeLocale, b as set_class } from './i18n-CGlVUOvE.js';
2import { M as push, N as first_child, Q as child, S as sibling, T as reset, t as template_effect, X as set_text, U as event, a as append, O as pop, R as from_html, a8 as onMount, $ as set, ab as state, ac as proxy, Z as get$1, a5 as next } from './index-Bq2njFOY.js';
3import { s as settings_logo } from './Blocks-ll2rAV7I.js';
4import { C as Clear } from './clear-CdJs0OXO.js';
5import './ScrollFade.svelte_svelte_type_style_lang-D0JPkGar.js';
6import './MarkdownCode.svelte_svelte_type_style_lang-B29zDiob.js';
7import { b as Dropdown } from './Dropdown-BhOh_Yz2.js';
8import './StreamingBar.svelte_svelte_type_style_lang-DWGn5tT_.js';
9/* empty css                                               */
10import { C as Checkbox } from './Checkbox-dsIC6373.js';
11import './html-Bwif0JPw.js';
12import './size-CWi277d_.js';
13import './state.svelte-eX_HNnCz.js';
14import './index-1GCmrSlD.js';
15import './Clear-C8Tfa7QP.js';
16import './utils.svelte-Bi9ASwv9.js';
17import './index-CjLnGHRW.js';
18import './index-DnoGeqVF.js';
19import './snippet-BG7qkY_1.js';
20import './prism-python-NrKIQnfs.js';
21import './input-CXpCw23l.js';
22import './window-BVsmErEt.js';
23import './BlockTitle-Bcj082QO.js';
24import './Info-CfqzbVCN.js';
25import './MarkdownCode-BYKuypS7.js';
26import './DropdownArrow-3lFHYtTD.js';
27import './IconButtonWrapper-DAsvkfJg.js';
28
29var root_1$1 = from_html(`<h2 class="svelte-xaoy31"><img alt="" class="svelte-xaoy31"/> <div class="title svelte-xaoy31"> <div class="url svelte-xaoy31"> </div></div></h2> <button class="svelte-xaoy31"><!></button>`, 1);
30
31function SettingsBanner($$anchor, $$props) {
32	push($$props, true);
33
34	const $_ = () => store_get($format, '$_', $$stores);
35	const [$$stores, $$cleanup] = setup_stores();
36	var fragment = root_1$1();
37	var h2 = first_child(fragment);
38	var img = child(h2);
39	var div = sibling(img, 2);
40	var text = child(div);
41	var div_1 = sibling(text);
42	var text_1 = child(div_1, true);
43
44	reset(div_1);
45	reset(div);
46	reset(h2);
47
48	var button = sibling(h2, 2);
49	var node = child(button);
50
51	Clear(node);
52	reset(button);
53
54	template_effect(
55		($0) => {
56			set_attribute(img, 'src', settings_logo);
57			set_text(text, `${$0 ?? ''} `);
58			set_text(text_1, $$props.root);
59		},
60		[() => $_()("common.settings")]
61	);
62
63	event('click', button, () => $$props.onclose?.());
64	append($$anchor, fragment);
65	pop();
66	$$cleanup();
67}
68
69const record = "data:image/svg+xml,%3csvg%20viewBox='0%200%2020%2020'%20version='1.1'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20fill='%23000000'%3e%3cg%20id='SVGRepo_bgCarrier'%20stroke-width='0'%3e%3c/g%3e%3cg%20id='SVGRepo_tracerCarrier'%20stroke-linecap='round'%20stroke-linejoin='round'%3e%3c/g%3e%3cg%20id='SVGRepo_iconCarrier'%3e%3ctitle%3erecord%20[%23982]%3c/title%3e%3cdesc%3eCreated%20with%20Sketch.%3c/desc%3e%3cdefs%3e%3c/defs%3e%3cg%20id='Page-1'%20stroke='none'%20stroke-width='1'%20fill='none'%20fill-rule='evenodd'%3e%3cg%20id='Dribbble-Light-Preview'%20transform='translate(-380.000000,%20-3839.000000)'%20fill='%23808080'%3e%3cg%20id='icons'%20transform='translate(56.000000,%20160.000000)'%3e%3cpath%20d='M338,3689%20C338,3691.209%20336.209,3693%20334,3693%20C331.791,3693%20330,3691.209%20330,3689%20C330,3686.791%20331.791,3685%20334,3685%20C336.209,3685%20338,3686.791%20338,3689%20M334,3697%20C329.589,3697%20326,3693.411%20326,3689%20C326,3684.589%20329.589,3681%20334,3681%20C338.411,3681%20342,3684.589%20342,3689%20C342,3693.411%20338.411,3697%20334,3697%20M334,3679%20C328.477,3679%20324,3683.477%20324,3689%20C324,3694.523%20328.477,3699%20334,3699%20C339.523,3699%20344,3694.523%20344,3689%20C344,3683.477%20339.523,3679%20334,3679'%20id='record-[%23982]'%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
70
71var root_2 = from_html(`<div class="banner-wrap svelte-1t60wb3"><h2 class="svelte-1t60wb3"> </h2> <ul class="padded theme-buttons svelte-1t60wb3"><li><button class="svelte-1t60wb3">☀︎ &nbsp;Light</button></li> <li><button class="svelte-1t60wb3">⏾ &nbsp; Dark</button></li> <li><button class="svelte-1t60wb3">

71🖥︎ &nbsp;System</button></li></ul></div>`);
72var root_3 = from_html(`You can install this app as a Progressive Web App on your device. Visit <a target="_blank" class="svelte-1t60wb3"> </a> and click the install button in the URL address bar of your browser.`, 1);
73
74var root_4 = from_html(
75	`Progressive Web App is not enabled for this app. To enable it, start your
76			Gradio app with <code>launch(pwa=True)</code>.`,
77	1
78);
79
80var root_1 = from_html(
81	`<div class="banner-wrap svelte-1t60wb3"><!></div> <!> <div class="banner-wrap svelte-1t60wb3"><h2 class="svelte-1t60wb3"> </h2> <p class="padded svelte-1t60wb3"><!></p></div> <div class="banner-wrap svelte-1t60wb3"><h2 class="svelte-1t60wb3"> </h2> <p class="padded svelte-1t60wb3"><!></p></div> <div class="banner-wrap svelte-1t60wb3"><h2 class="svelte-1t60wb3"> <span class="beta-tag svelte-1t60wb3">beta</span></h2> <p class="padded svelte-1t60wb3">Screen Studio allows you to record your screen and generates a video of your
82		app with automatically adding zoom in and zoom out effects as well as
83		trimming the video to remove the prediction time. <br/><br/> Start recording by clicking the <i>Start Recording</i> button below and then
84		sharing the current browser tab of your Gradio demo. Use your app as you
85		would normally to generate a prediction. <br/> Stop recording by clicking the <i>Stop Recording</i> button in the footer of
86		the demo. <br/><br/> <!> <!></p> <button class="record-button svelte-1t60wb3"><img alt="Start Recording" class="svelte-1t60wb3"/> Start Recording</button></div>`,
87	1
88);
89
90function Settings($$anchor, $$props) {
91	push($$props, true);
92
93	/* eslint-disable */
94	let root = prop($$props, 'root', 7),
95		allow_zoom = prop($$props, 'allow_zoom', 15),
96		allow_video_trim = prop($$props, 'allow_video_trim', 15);
97
98	if (root() === "") {
99		root(location.protocol + "//" + location.host + location.pathname);
100	}
101
102	if (!root().endsWith("/")) {
103		root(root() + "/");
104	}
105
106	function setTheme(theme) {
107		const url = new URL(window.location.href);
108
109		if (theme === "system") {
110			url.searchParams.delete("__theme");
111			set(current_theme, "system");
112		} else {
113			url.searchParams.set("__theme", theme);
114			set(current_theme, theme, true);
115		}
116
117		url.searchParams.delete("view");
118		window.location.href = url.toString();
119	}
120
121	onMount(() => {
122		// document.body.style.overflow = "hidden";
123		if ("parentIFrame" in window) {
124			window.parentIFrame?.scrollTo(0, 0);
125		}
126
127		const url = new URL(window.location.href);
128		const theme = url.searchParams.get("__theme");
129
130		set(current_theme, theme || "system", true);
131
132		return () => {
133			document.body.style.overflow = "auto";
134		};
135	});
136
137	let current_locale = state(proxy(get($locale) ?? "en"));
138	let current_theme = state("system");
139
140	function handleLanguageChange(value) {
141		const new_locale = value;
142
143		changeLocale(new_locale);
144	}
145
146	function handleZoomChange(e) {
147		allow_zoom(e.detail);
148	}
149
150	function handleVideoTrimChange(e) {
151		allow_video_trim(e.detail);
152	}
153
154	var fragment = root_1();
155	var div = first_child(fragment);
156	var node = child(div);
157
158	SettingsBanner(node, {
159		onclose: () => $$props.onclose(),
160		get root() {
161			return root();
162		}
163	});
164
165	reset(div);
166
167	var node_1 = sibling(div, 2);
168
169	{
170		var consequent = ($$anchor) => {
171			var div_1 = root_2();
172			var h2 = child(div_1);
173			var text = child(h2, true);
174
175			reset(h2);
176
177			var ul = sibling(h2, 2);
178			var li = child(ul);
179			var button = child(li);
180
181			reset(li);
182
183			var li_1 = sibling(li, 2);
184			var button_1 = child(li_1);
185
186			reset(li_1);
187
188			var li_2 = sibling(li_1, 2);
189			var button_2 = child(li_2);
190
191			reset(li_2);
192			reset(ul);
193			reset(div_1);
194
195			template_effect(
196				($0) => {
197					set_text(text, $0);
198					set_class(li, 1, `theme-button ${get$1(current_theme) === 'light' ? 'current-theme' : 'inactive-theme'}`, 'svelte-1t60wb3');
199					set_class(li_1, 1, `theme-button ${get$1(current_theme) === 'dark' ? 'current-theme' : 'inactive-theme'}`, 'svelte-1t60wb3');
200					set_class(li_2, 1, `theme-button ${get$1(current_theme) === 'system' ? 'current-theme' : 'inactive-theme'}`, 'svelte-1t60wb3');
201				},
202				[() => $$props.i18n("common.display_theme")]
203			);
204
205			event('click', button, () => setTheme("light"));
206			event('click', button_1, () => setTheme("dark"));
207			event('click', button_2, () => setTheme("system"));
208			append($$anchor, div_1);
209		};
210
211		if_block(node_1, ($$render) => {
212			if ($$props.space_id === null) $$render(consequent);
213		});
214	}
215
216	var div_2 = sibling(node_1, 2);
217	var h2_1 = child(div_2);
218	var text_1 = child(h2_1, true);
219
220	reset(h2_1);
221

222	var p = sibling(h2_1, 2);
223	var node_2 = child(p);
224
225	Dropdown(node_2, {
226		label: 'Language',
227		get choices() {
228			return language_choices;
229		},
230		show_label: false,
231		on_change: () => handleLanguageChange(get$1(current_locale)),
232		get value() {
233			return get$1(current_locale);
234		},
235
236		set value($$value) {
237			set(current_locale, $$value, true);
238		}
239	});
240
241	reset(p);
242	reset(div_2);
243
244	var div_3 = sibling(div_2, 2);
245	var h2_2 = child(div_3);
246	var text_2 = child(h2_2, true);
247
248	reset(h2_2);
249
250	var p_1 = sibling(h2_2, 2);
251	var node_3 = child(p_1);
252
253	{
254		var consequent_1 = ($$anchor) => {
255			var fragment_1 = root_3();
256			var a = sibling(first_child(fragment_1));
257			var text_3 = child(a, true);
258
259			reset(a);
260			next();
261
262			template_effect(() => {
263				set_attribute(a, 'href', root());
264				set_text(text_3, root());
265			});
266
267			append($$anchor, fragment_1);
268		};
269
270		var alternate = ($$anchor) => {
271			var fragment_2 = root_4();
272
273			next(2);
274			append($$anchor, fragment_2);
275		};
276
277		if_block(node_3, ($$render) => {
278			if ($$props.pwa_enabled) $$render(consequent_1); else $$render(alternate, false);
279		});
280	}
281
282	reset(p_1);
283	reset(div_3);
284
285	var div_4 = sibling(div_3, 2);
286	var h2_3 = child(div_4);
287	var text_4 = child(h2_3);
288
289	next();
290	reset(h2_3);
291
292	var p_2 = sibling(h2_3, 2);
293	var node_4 = sibling(child(p_2), 13);
294
295	Checkbox(node_4, {
296		label: 'Include automatic zoom in/out',
297		interactive: true,
298		get value() {
299			return allow_zoom();
300		},
301		$$events: { change: handleZoomChange }
302	});
303
304	var node_5 = sibling(node_4, 2);
305
306	Checkbox(node_5, {
307		label: 'Include automatic video trimming',
308		interactive: true,
309		get value() {
310			return allow_video_trim();
311		},
312		$$events: { change: handleVideoTrimChange }
313	});
314
315	reset(p_2);
316
317	var button_3 = sibling(p_2, 2);
318	var img = child(button_3);
319
320	next();
321	reset(button_3);
322	reset(div_4);
323
324	template_effect(
325		($0, $1, $2) => {
326			set_text(text_1, $0);
327			set_text(text_2, $1);
328			set_text(text_4, `${$2 ?? ''} `);
329			set_attribute(img, 'src', record);
330		},
331		[
332			() => $$props.i18n("common.language"),
333			() => $$props.i18n("common.pwa"),
334			() => $$props.i18n("common.screen_studio")
335		]
336	);
337
338	event('click', button_3, () => {
339		$$props.onclose?.();
340		$$props.start_recording?.();
341	});
342
343	append($$anchor, fragment);
344	pop();
345}
346
347export { Settings as default };
348//# sourceMappingURL=Settings-mCeMXYIy.js.map