distribute gradio as a web component (#1444)

* distribute gradio as a web component * fix layout + loader + dark mode in embedded wc * fix lockfile issue * formatting * prevent loader conflicts * fix formatting
2025-01-18 10:44:33 +08:00 · 2022-06-07 19:11:44 +01:00 · 2022-06-07 19:11:44 +01:00 · cc6aeb6d72
commit cc6aeb6d72
parent 6dfb00b06e
19 changed files with 793 additions and 210 deletions
--- a/demo/blocks_joined/run.py
+++ b/demo/blocks_joined/run.py
@ -6,7 +6,7 @@ cheetah = os.path.join(os.path.dirname(__file__), "files/cheetah1.jpg")


 def img(text):
-    sleep(1)
+    sleep(3)
    return [
        cheetah,
        cheetah,
--- a/ui/package.json
+++ b/ui/package.json
@ -8,7 +8,10 @@
 		"build": "pnpm build:local --filter @gradio/app --emptyOutDir",
 		"build:cdn": "pnpm build:cdn --filter @gradio/app --emptyOutDir",
 		"build:website": "pnpm build:website --filter @gradio/app --emptyOutDir",
-		"preview": "sirv ../gradio/templates/frontend --single --port=3000 --quiet",
+		"build:cdn-local": "TEST_CDN=TRUE pnpm build:cdn",
+		"preview:cdn-server": "sirv ../gradio/templates/cdn --single --port=4321 --cors",
+		"preview:cdn-app": "pnpm dev --filter @gradio/cdn-test",
+		"preview:cdn-local": "run-p preview:cdn-server preview:cdn-app",
 		"format:check": "prettier --check --plugin-search-dir=. .",
 		"format:write": "prettier --write --plugin-search-dir=. .",
 		"ts:check": "svelte-check --tsconfig tsconfig.json",
--- a/ui/packages/_cdn-test/favicon.svg
+++ b/ui/packages/_cdn-test/favicon.svg
@ -0,0 +1,15 @@
+<svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
+<path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+<stop stop-color="#41D1FF"/>
+<stop offset="1" stop-color="#BD34FE"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFEA83"/>
+<stop offset="0.0833333" stop-color="#FFDD35"/>
+<stop offset="1" stop-color="#FFA800"/>
+</linearGradient>
+</defs>
+</svg>
--- a/ui/packages/_cdn-test/index.html
+++ b/ui/packages/_cdn-test/index.html
@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<style>
+			html {
+				font-family: Source Sans Pro;
+				background: #111;
+				color: #eee;
+			}
+
+			p {
+				font-size: 18px;
+			}
+		</style>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="favicon.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<script type="module" src="http://localhost:4321/gradio.js"></script>
+
+		<title>Vite App</title>
+	</head>
+	<body>
+		<gradio-app space="nateraw/animegan-v2-for-videos"></gradio-app>
+		<gradio-app space="gradio/Echocardiogram-Segmentation"></gradio-app>
+	</body>
+</html>
--- a/ui/packages/_cdn-test/main.js
+++ b/ui/packages/_cdn-test/main.js
@ -0,0 +1,6 @@
+import "./style.css";
+
+document.querySelector("#app").innerHTML = `
+  <h1>Hello Vite!</h1>
+  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
+`;
--- a/ui/packages/_cdn-test/package.json
+++ b/ui/packages/_cdn-test/package.json
@ -0,0 +1,13 @@
+{
+	"name": "@gradio/cdn-test",
+	"private": true,
+	"version": "0.0.0",
+	"scripts": {
+		"dev": "vite --port 3001",
+		"build": "vite build",
+		"preview": "vite preview  --port 3001"
+	},
+	"devDependencies": {
+		"vite": "^2.9.9"
+	}
+}
--- a/ui/packages/_cdn-test/style.css
+++ b/ui/packages/_cdn-test/style.css
@ -0,0 +1,8 @@
+#app {
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-align: center;
+	color: #2c3e50;
+	margin-top: 60px;
+}
--- a/ui/packages/app/build_plugins.ts
+++ b/ui/packages/app/build_plugins.ts
@ -1,8 +1,8 @@
 import type { Plugin } from "vite";
-import { parse } from "node-html-parser";
+import { parse, HTMLElement } from "node-html-parser";

-import path from "path";
-import fs from "fs";
+import { join } from "path";
+import { writeFileSync } from "fs";

 export function inject_ejs(): Plugin {
 	return {
@ -47,8 +47,8 @@ export function patch_dynamic_import({
 							chunk.code.replace(import_re, `import_fix($1, ${import_meta})`);

 						if (!config.dir) break;
-						const output_location = path.join(config.dir, chunk.fileName);
-						fs.writeFileSync(output_location, chunk.code);
+						const output_location = join(config.dir, chunk.fileName);
+						writeFileSync(output_location, chunk.code);
 					}
 				}
 			}
@ -81,27 +81,15 @@ export function generate_cdn_entry({
 				Array.from(tree.querySelectorAll("script[type=module]")).find((node) =>
 					node.attributes.src?.startsWith(cdn_url)
 				)?.attributes.src || "";
-			const styles =
-				Array.from(tree.querySelectorAll("link[rel=stylesheet]")).find((node) =>
-					node.attributes.href?.startsWith(cdn_url)
-				)?.attributes.href || "";

-			const output_location = path.join(config.dir, "gradio.js");
+			const output_location = join(config.dir, "gradio.js");

-			fs.writeFileSync(output_location, make_entry(script, styles));
+			writeFileSync(output_location, make_entry(script));
 		}
 	};
 }

-function make_entry(script: string, style: string) {
-	const make_style = `
-function make_style(href) {
-    const link = document.createElement('link');
-    link.rel = 'stylesheet';
-    link.href = href;
-    document.head.appendChild(link);
-}`;
-
+function make_entry(script: string) {
 	const make_script = `
 function make_script(src) {
    const script = document.createElement('script');
@ -112,9 +100,91 @@ function make_script(src) {
 }`;

 	return `
-${make_style}
 ${make_script}
 make_script("${script}");
-make_style("${style}");
 `;
 }
+
+export function handle_ce_css(): Plugin {
+	return {
+		enforce: "post",
+		name: "custome-element-css",
+		transform(code, id) {
+			if (id === "vite/preload-helper") {
+				return {
+					code: code.replace(
+						"document.head.appendChild(link);",
+						"window.scoped_css_attach(link)"
+					)
+				};
+			}
+		},
+
+		writeBundle(config, bundle) {
+			let file_to_insert = {
+				filename: "",
+				source: ""
+			};
+
+			if (
+				!config.dir ||
+				!bundle["index.html"] ||
+				bundle["index.html"].type !== "asset"
+			)
+				return;
+
+			for (const key in bundle) {
+				const chunk = bundle[key];
+				if (chunk.type === "chunk") {
+					const _chunk = chunk;
+
+					const found = _chunk.code?.indexOf("ENTRY_CSS");
+
+					if (found > -1)
+						file_to_insert = {
+							filename: join(config.dir, key),
+							source: _chunk.code
+						};
+				}
+			}
+
+			const tree = parse(bundle["index.html"].source as string);
+
+			const { style, fonts } = Array.from(
+				tree.querySelectorAll("link[rel=stylesheet]")
+			).reduce(
+				(acc, next) => {
+					if (/.*\/index(.*?)\.css/.test(next.attributes.href)) {
+						return { ...acc, style: next };
+					} else {
+						return { ...acc, fonts: [...acc.fonts, next.attributes.href] };
+					}
+				},
+				{ fonts: [], style: undefined } as {
+					fonts: string[];
+					style: HTMLElement | undefined;
+				}
+			);
+
+			const transformed_html =
+				(bundle["index.html"].source as string).substring(0, style!.range[0]) +
+				(bundle["index.html"].source as string).substring(
+					style!.range[1],
+					bundle["index.html"].source.length
+				);
+			const html_location = join(config.dir, "index.html");
+
+			writeFileSync(
+				file_to_insert.filename,
+				file_to_insert.source
+					.replace("__ENTRY_CSS__", style!.attributes.href)
+					.replace(
+						'"__FONTS_CSS__"',
+						`[${fonts.map((f) => `"${f}"`).join(",")}]`
+					)
+			);
+
+			writeFileSync(html_location, transformed_html);
+		}
+	};
+}
--- a/ui/packages/app/index.html
+++ b/ui/packages/app/index.html
@ -1,15 +1,5 @@
 <!DOCTYPE html>
-<html
-	lang="en"
-	style="
-		margin: 0;
-		padding: 0;
-		display: flex;
-		flex-direction: column;
-		flex-grow: 1;
-		height: 100%;
-	"
->
+<html lang="en" style="margin: 0; padding: 0">
 	<head>
 		<meta charset="utf-8" />
 		<meta
@ -64,18 +54,12 @@
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
 	</head>

-	<body
-		style="
-			margin: 0;
-			padding: 0;
-			display: flex;
-			flex-direction: column;
-			flex-grow: 1;
-		"
-	>
-		<div
-			id="root"
-			style="display: flex; flex-direction: column; flex-grow: 1"
-		></div>
+	<body style="width: 100%; margin: 0; padding: 0">
+		<gradio-app
+			><div
+				id="root"
+				style="display: flex; flex-direction: column; flex-grow: 1"
+			></div
+		></gradio-app>
 	</body>
 </html>
--- a/ui/packages/app/package.json
+++ b/ui/packages/app/package.json
@ -4,9 +4,9 @@
 	"private": true,
 	"scripts": {
 		"dev": "vite",
-		"build:cdn": "vite build --mode production:cdn",
-		"build:website": "vite build --mode production:website",
-		"build:local": "vite build --mode production:local",
+		"build:cdn": "vite build --mode production:cdn --emptyOutDir",
+		"build:website": "vite build --mode production:website --emptyOutDir",
+		"build:local": "vite build --mode production:local --emptyOutDir",
 		"preview": "vite preview",
 		"test:browser": "pnpx playwright test test/ --config=../../playwright.config.js",
 		"test:browser:debug": "pnpx playwright test test/ --debug --config=../../playwright.config.js"
--- a/ui/packages/app/src/Blocks.svelte
+++ b/ui/packages/app/src/Blocks.svelte
@ -10,6 +10,7 @@
 	import Render from "./Render.svelte";
 	import ApiDocs from "./ApiDocs.svelte";
 	import { tick } from "svelte";
+	import logo from "./images/logo.svg";
 	setupi18n();

 	interface Component {
@ -55,12 +56,13 @@
 	export let layout: LayoutNode;
 	export let dependencies: Array<Dependency>;
 	export let theme: string;
-	export let style: string | null;
+
 	export let enable_queue: boolean;
-	export let static_src: string;
 	export let title: string = "Gradio";
 	export let analytics_enabled: boolean = false;
 	export let target: HTMLElement;
+	export let css: string;
+	export let id: number = 0;

 	let rootNode: Component = { id: layout.id, type: "column", props: {} };
 	components.push(rootNode);
@ -165,14 +167,15 @@
 				ready = true;

 				await tick();
+
 				if (window.__gradio_mode__ == "app") {
-					window.__gradio_loader__.$set({ status: "complete" });
+					window.__gradio_loader__[id].$set({ status: "complete" });
 				}
 			})
 			.catch((e) => {
 				console.error(e);
 				if (window.__gradio_mode__ == "app") {
-					window.__gradio_loader__.$set({ status: "error" });
+					window.__gradio_loader__[id].$set({ status: "error" });
 				}
 			});
 	});
@ -336,8 +339,6 @@
 		}
 	}

-	let mode = "";
-
 	function handle_darkmode() {
 		let url = new URL(window.location.toString());

@ -347,13 +348,13 @@

 		if (color_mode !== null) {
 			if (color_mode === "dark") {
-				mode = "dark";
+				target.classList.add("dark");
 			} else if (color_mode === "system") {
 				use_system_theme();
 			}
 			// light is default, so we don't need to do anything else
 		} else if (url.searchParams.get("__dark-theme") === "true") {
-			mode = "dark";
+			target.classList.add("dark");
 		} else {
 			use_system_theme();
 		}
@ -369,15 +370,13 @@
 			const is_dark =
 				window?.matchMedia?.("(prefers-color-scheme: dark)").matches ?? null;

-			mode = is_dark ? "dark" : "";
+			if (is_dark) target.classList.add("dark");
 		}
 	}

-	onMount(() => {
-		if (window.__gradio_mode__ !== "website") {
-			handle_darkmode();
-		}
-	});
+	if (window.__gradio_mode__ !== "website") {
+		handle_darkmode();
+	}
 </script>

 <svelte:head>
@ -389,7 +388,8 @@
 			src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
 	{/if}
 </svelte:head>
-<div class="w-full h-full min-h-screen {mode} flex flex-col">
+
+<div class="w-full h-full min-h-screen flex flex-col">
 	<div
 		class="mx-auto container px-4 py-6 dark:bg-gray-950"
 		class:flex-grow={(window.__gradio_mode__ = "app")}
@ -434,7 +434,7 @@
 			{$_("interface.built_with_Gradio")}
 			<img
 				class="h-[22px] ml-0.5 inline-block pb-0.5 filter grayscale opacity-50 group-hover:grayscale-0 group-hover:opacity-100 transition"
-				src="{static_src}/static/img/logo.svg"
+				src={logo}
 				alt="logo"
 			/>
 		</a>
--- a/ui/packages/app/src/components/StatusTracker/StatusTracker.svelte
+++ b/ui/packages/app/src/components/StatusTracker/StatusTracker.svelte
@ -110,17 +110,14 @@
 </script>

 <div
-	class=" absolute inset-0  z-10 flex flex-col justify-center items-center bg-white dark:bg-gray-800 pointer-events-none transition-opacity"
+	class="wrap"
 	class:opacity-0={!status || status === "complete"}
 	class:z-50={cover_all}
 	bind:this={el}
 >
 	{#if status === "pending"}
-		<div
-			class="absolute inset-0  origin-left bg-slate-100 dark:bg-gray-700 top-0 left-0 z-10 opacity-80"
-			style:transform="scaleX({progress || 0})"
-		/>
-		<div class="absolute top-0 right-0 py-1 px-2 font-mono z-20 text-xs">
+		<div class="progress-bar" style:transform="scaleX({progress || 0})" />
+		<div class="meta-text">
 			{#if queue_position !== null && queue_position > 0}
 				queue: {queue_position}/{initial_queue_pos} |
 			{:else if queue_position === 0}
@ -135,14 +132,37 @@
 		<Loader />

 		{#if !timer}
-			<p class="-translate-y-16">Loading...</p>
+			<p class="timer">Loading...</p>
 		{/if}
 	{:else if status === "error"}
-		<span class="text-red-400 font-mono font-semibold text-lg">ERROR</span>
+		<span class="error">ERROR</span>
 	{/if}
 </div>

 <style lang="postcss">
+	.wrap {
+		@apply absolute inset-0  z-10 flex flex-col justify-center items-center bg-white dark:bg-gray-800 pointer-events-none transition-opacity max-h-screen;
+	}
+
+	:global(.dark) .wrap {
+		@apply bg-gray-800;
+	}
+
+	.progress-bar {
+		@apply absolute inset-0  origin-left bg-slate-100 dark:bg-gray-700 top-0 left-0 z-10 opacity-80;
+	}
+
+	.meta-text {
+		@apply absolute top-0 right-0 py-1 px-2 font-mono z-20 text-xs;
+	}
+
+	.timer {
+		@apply -translate-y-16;
+	}
+
+	.error {
+		@apply text-red-400 font-mono font-semibold text-lg;
+	}
 	@keyframes blink {
 		0% {
 			opacity: 100%;
--- a/ui/packages/app/src/images/logo.svg
+++ b/ui/packages/app/src/images/logo.svg
@ -0,0 +1,119 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="26.399866mm"
+   height="26.001007mm"
+   viewBox="0 0 26.399867 26.001007"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   sodipodi:docname="logo.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="mm"
+     showgrid="false"
+     inkscape:zoom="2.7313686"
+     inkscape:cx="-5.8578692"
+     inkscape:cy="65.534912"
+     inkscape:window-width="1248"
+     inkscape:window-height="770"
+     inkscape:window-x="-6"
+     inkscape:window-y="-6"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs2" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-113.51105,-128.48206)">
+    <path
+       style="fill:#000000;stroke-width:1.02388"
+       id="path21"
+       d="" />
+    <path
+       style="fill:#000000;stroke-width:0.271737"
+       id="path3317"
+       d="" />
+    <g
+       id="g880"
+       transform="matrix(0.56975915,0,0,0.56975915,63.360109,62.438369)">
+      <rect
+         style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
+         id="rect5331-6-3-1-7"
+         width="20.721741"
+         height="5.805635"
+         x="-147.61293"
+         y="69.866898"
+         transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
+      <rect
+         style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
+         id="rect5331-6-3-1"
+         width="20.721741"
+         height="5.805635"
+         x="-147.61293"
+         y="59.790516"
+         transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
+      <rect
+         style="fill:#eba059;fill-opacity:1;stroke-width:0.0942989"
+         id="rect5331-6-4"
+         width="20.79833"
+         height="5.8430037"
+         x="126.81767"
+         y="201.76166"
+         transform="matrix(0.87677457,-0.48090161,0,1,0,0)" />
+      <rect
+         style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
+         id="rect5331-6-3-1-3"
+         width="20.799767"
+         height="5.8430223"
+         x="-126.81503"
+         y="79.79348"
+         transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
+      <rect
+         style="fill:#eba059;fill-opacity:1;stroke-width:0.0944389"
+         id="rect5331-6-3"
+         width="20.859709"
+         height="5.8430514"
+         x="105.92157"
+         y="181.56015"
+         transform="matrix(0.87755288,-0.47947986,0,1,0,0)" />
+      <rect
+         style="fill:#eba059;fill-opacity:1;stroke-width:0.0942989"
+         id="rect5331-6-4-9"
+         width="20.79833"
+         height="5.8430037"
+         x="126.81767"
+         y="211.83795"
+         transform="matrix(0.87677457,-0.48090161,0,1,0,0)" />
+      <rect
+         style="fill:#f1bc8a;fill-opacity:1;stroke-width:0.0943025"
+         id="rect5331-6-3-1-3-1"
+         width="20.799767"
+         height="5.8430223"
+         x="-126.81503"
+         y="89.869843"
+         transform="matrix(-0.87679283,-0.48086831,0,1,0,0)" />
+      <rect
+         style="fill:#eba059;fill-opacity:1;stroke-width:0.0944389"
+         id="rect5331-6-3-2"
+         width="20.859709"
+         height="5.8430514"
+         x="105.92157"
+         y="191.63644"
+         transform="matrix(0.87755288,-0.47947986,0,1,0,0)" />
+    </g>
+  </g>
+</svg>
--- a/ui/packages/app/src/main.ts
+++ b/ui/packages/app/src/main.ts
@ -5,17 +5,27 @@ import { fn } from "./api";

 import * as t from "@gradio/theme";

+let id = -1;
+window.__gradio_loader__ = [];
+
 interface CustomWindow extends Window {
 	__gradio_mode__: "app" | "website";
 	launchGradio: Function;
 	launchGradioFromSpaces: Function;
 	gradio_config: Config;
+	scoped_css_attach: (link: HTMLLinkElement) => void;
+	__gradio_loader__: Array<{
+		$set: (args: any) => any;
+	}>;
 }

 declare let window: CustomWindow;
 declare let BACKEND_URL: string;
 declare let BUILD_MODE: string;

+const ENTRY_CSS = "__ENTRY_CSS__";
+const FONTS = "__FONTS_CSS__";
+
 interface Component {
 	name: string;
 	[key: string]: unknown;
@ -46,7 +56,6 @@ interface Config {
 	show_input: boolean;
 	show_output: boolean;
 	simpler_description: string;
-	static_src: string;
 	theme: string;
 	thumbnail: null | string;
 	title: string;
@ -58,88 +67,174 @@ interface Config {
 }

 let app_id: string | null = null;
-let reload_check = (root: string) => {
-	fetch(root + "app_id")
-		.then((response) => response.text())
-		.then((response) => {
-			if (app_id === null) {
-				app_id = response;
-			} else if (app_id != response) {
-				location.reload();
-			}
-		})
-		.finally(() => {
-			setTimeout(() => reload_check(root), 250);
-		});
-};

-window.launchGradio = (config: Config, element_query: string) => {
-	let target: HTMLElement = document.querySelector(element_query)!;
+async function reload_check(root: string) {
+	const result = await (await fetch(root + "app_id")).text();

-	if (!target) {
-		throw new Error(
-			"The target element could not be found. Please ensure that element exists."
-		);
+	if (app_id === null) {
+		app_id = result;
+	} else if (app_id != result) {
+		location.reload();
 	}
-	target.classList.add("gradio-container");

-	if (config.root === undefined) {
-		config.root = BACKEND_URL;
-	}
-	if (window.__gradio_mode__ === "app") {
-		config.static_src = ".";
-	} else if (window.__gradio_mode__ === "website") {
-		config.static_src = "";
-	} else {
-		config.static_src = "https://gradio.s3-us-west-2.amazonaws.com/PIP_VERSION";
-	}
-	if (config.dev_mode) {
-		reload_check(config.root);
-	}
-	if (config.css) {
-		let style = document.createElement("style");
-		style.innerHTML = config.css;
-		document.head.appendChild(style);
-	}
-	if (config.detail === "Not authenticated" || config.auth_required) {
-		new Login({
-			target: target,
-			props: config
-		});
-		window.__gradio_loader__.$set({ status: "complete" });
-	} else {
-		let session_hash = Math.random().toString(36).substring(2);
-		config.fn = fn.bind(null, session_hash, config.root + "api/");
+	setTimeout(() => reload_check(root), 250);
+}

-		new Blocks({
-			target: target,
-			props: { ...config, target }
-		});
-	}
-};
+async function get_space_config(space_id: string): Promise<Config> {
+	const space_url = `https://hf.space/embed/${space_id}/+/`;
+	let config = await (await fetch(space_url + "config")).json();
+	config.root = space_url;
+	config.space = space_id;

-window.launchGradioFromSpaces = async (space: string, target: string) => {
-	const space_url = `https://hf.space/embed/${space}/+/`;
-	let config = await fetch(space_url + "config");
-	let _config: Config = await config.json();
-	_config.root = space_url;
-	_config.space = space;
-	window.launchGradio(_config, target);
-};
+	return config;
+}

-async function get_config() {
+async function get_config(space_id: string | null) {
 	if (BUILD_MODE === "dev" || location.origin === "http://localhost:3000") {
 		let config = await fetch(BACKEND_URL + "config");
-		config = await config.json();
+		const result = await config.json();
+		return result;
+	} else if (space_id) {
+		const config = await get_space_config(space_id);
 		return config;
 	} else {
 		return window.gradio_config;
 	}
 }

-if (window.__gradio_mode__ == "app") {
-	window.__gradio_loader__ = new Loader({
-		target: document.querySelector("#root")!,
+function mount_css(
+	url: string,
+	target: ShadowRoot | HTMLElement,
+	css_string?: string
+): Promise<void> {
+	if (css_string) {
+		let style = document.createElement("style");
+		style.innerHTML = css_string;
+		target.appendChild(style);
+	}
+	if (BUILD_MODE === "dev") Promise.resolve();
+
+	const link = document.createElement("link");
+	link.rel = "stylesheet";
+	link.href = url;
+	// @ts-ignore
+	target.appendChild(link);
+
+	return new Promise((res, rej) => {
+		link.addEventListener("load", () => res());
+		link.addEventListener("error", () =>
+			rej(new Error(`Unable to preload CSS for ${url}`))
+		);
+	});
+}
+
+async function handle_config(
+	target: HTMLElement | ShadowRoot,
+	space_id: string | null
+) {
+	let [config] = await Promise.all([
+		get_config(space_id),
+		mount_css(ENTRY_CSS, target)
+	]);
+
+	if (config.dev_mode) {
+		reload_check(config.root);
+	}
+
+	if (config.root === undefined) {
+		config.root = BACKEND_URL;
+	}
+
+	config.target = target;
+
+	return config;
+}
+
+function mount_app(
+	config: Config,
+	target: HTMLElement | ShadowRoot | false,
+	wrapper: HTMLDivElement,
+	id: number
+) {
+	if (config.detail === "Not authenticated" || config.auth_required) {
+		const app = new Login({
+			target: wrapper,
+			//@ts-ignore
+			props: { ...config, id }
+		});
+	} else {
+		let session_hash = Math.random().toString(36).substring(2);
+		config.fn = fn.bind(null, session_hash, config.root + "api/");
+
+		const app = new Blocks({
+			target: wrapper,
+			//@ts-ignore
+			props: { ...config, target: wrapper, id }
+		});
+	}
+
+	if (target) {
+		target.append(wrapper);
+	}
+}
+
+function create_custom_element() {
+	//@ts-ignore
+	FONTS.map((f) => mount_css(f, document.head));
+
+	class GradioApp extends HTMLElement {
+		root: ShadowRoot;
+		wrapper: HTMLDivElement;
+		_id: number;
+
+		constructor() {
+			super();
+
+			this._id = ++id;
+
+			this.root = this.attachShadow({ mode: "open" });
+
+			window.scoped_css_attach = (link) => {
+				this.root.append(link);
+			};
+
+			this.wrapper = document.createElement("div");
+			this.wrapper.classList.add("gradio-container");
+
+			this.wrapper.style.position = "relative";
+			this.wrapper.style.width = "100%";
+			this.wrapper.style.minHeight = "100vh";
+
+			window.__gradio_loader__[this._id] = new Loader({
+				target: this.wrapper,
+				props: {
+					status: "pending",
+					timer: false,
+					queue_position: null,
+					cover_all: true
+				}
+			});
+
+			this.root.append(this.wrapper);
+		}
+
+		async connectedCallback() {
+			const space = this.getAttribute("space");
+
+			const config = await handle_config(this.root, space);
+			mount_app(config, this.root, this.wrapper, this._id);
+		}
+	}
+
+	customElements.define("gradio-app", GradioApp);
+}
+
+async function unscoped_mount() {
+	const target = document.querySelector("#root")! as HTMLDivElement;
+	target.classList.add("gradio-container");
+
+	window.__gradio_loader__[0] = new Loader({
+		target: target,
 		props: {
 			status: "pending",
 			timer: false,
@ -148,12 +243,13 @@ if (window.__gradio_mode__ == "app") {
 		}
 	});

-	get_config()
-		.then((config) => {
-			window.launchGradio(config, "#root");
-		})
-		.catch((e) => {
-			console.error(e);
-			window.__gradio_loader__.$set({ status: "error" });
-		});
+	const config = await handle_config(target, null);
+
+	mount_app(config, false, target, 0);
+}
+
+if (BUILD_MODE === "dev") {
+	unscoped_mount();
+} else {
+	create_custom_element();
 }
--- a/ui/packages/app/tailwind.config.js
+++ b/ui/packages/app/tailwind.config.js
@ -166,6 +166,5 @@ module.exports = {
 		"2xl:grid-cols-10",
 		"2xl:grid-cols-11",
 		"2xl:grid-cols-12"
-	],
-	important: ".gradio-container"
+	]
 };
--- a/ui/packages/app/vite.config.js
+++ b/ui/packages/app/vite.config.js
@ -5,21 +5,23 @@ import sveltePreprocess from "svelte-preprocess";
 import {
 	inject_ejs,
 	patch_dynamic_import,
-	generate_cdn_entry
+	generate_cdn_entry,
+	handle_ce_css
 } from "./build_plugins";

 // this is dupe config, gonna try fix this
 import tailwind from "tailwindcss";
 import nested from "tailwindcss/nesting/index.js";

-const GRADIO_VERSION = process.env.GRADIO_VERSION || "";
+const GRADIO_VERSION = process.env.GRADIO_VERSION || "asd_stub_asd";
+const TEST_CDN = !!process.env.TEST_CDN;
+const CDN = TEST_CDN
+	? "http://localhost:4321/"
+	: `https://gradio.s3-us-west-2.amazonaws.com/${GRADIO_VERSION}/`;

 //@ts-ignore
 export default defineConfig(({ mode }) => {
-	const CDN_URL =
-		mode === "production:cdn"
-			? `https://gradio.s3-us-west-2.amazonaws.com/${GRADIO_VERSION}/`
-			: "/";
+	const CDN_URL = mode === "production:cdn" ? CDN : "/";
 	const production =
 		mode === "production:cdn" ||
 		mode === "production:local" ||
@ -31,7 +33,7 @@ export default defineConfig(({ mode }) => {

 		build: {
 			target: "esnext",
-			minify: production,
+			minify: false,
 			outDir: `../../../gradio/templates/${is_cdn ? "cdn" : "frontend"}`
 		},
 		define: {
@ -53,7 +55,7 @@ export default defineConfig(({ mode }) => {
 				compilerOptions: {
 					dev: !production
 				},
-				hot: !process.env.VITEST,
+				hot: !process.env.VITEST && !production,
 				preprocess: sveltePreprocess({
 					postcss: { plugins: [tailwind, nested] }
 				})
@ -64,7 +66,8 @@ export default defineConfig(({ mode }) => {
 				gradio_version: GRADIO_VERSION,
 				cdn_url: CDN_URL
 			}),
-			generate_cdn_entry({ enable: is_cdn, cdn_url: CDN_URL })
+			generate_cdn_entry({ enable: is_cdn, cdn_url: CDN_URL }),
+			handle_ce_css()
 		],
 		test: {
 			environment: "happy-dom",
--- a/ui/packages/theme/src/global.css
+++ b/ui/packages/theme/src/global.css
@ -6,39 +6,39 @@
 	.bg-gray-950 {
 		background-color: #0b0f19;
 	}
-	.gradio-container .dark:bg-gray-950 {
+	.dark:bg-gray-950 {
 	}

-	.gradio-container .dark {
+	.dark {
 		@apply text-gray-300 bg-gray-950;
 	}
-	.gradio-container .dark .text-gray-500,
-	.gradio-container .dark .text-gray-600 {
+	.dark .text-gray-500,
+	.dark .text-gray-600 {
 		@apply text-gray-300;
 	}

-	.gradio-container .dark .text-gray-700,
-	.gradio-container .dark .text-gray-800,
-	.gradio-container .dark .text-gray-900 {
+	.dark .text-gray-700,
+	.dark .text-gray-800,
+	.dark .text-gray-900 {
 		@apply text-gray-200;
 	}

-	.gradio-container .dark .border,
-	.gradio-container .dark .border-gray-100,
-	.gradio-container .dark .border-gray-200,
-	.gradio-container .dark .border-gray-300 {
+	.dark .border,
+	.dark .border-gray-100,
+	.dark .border-gray-200,
+	.dark .border-gray-300 {
 		@apply border-gray-700;
 	}

-	.gradio-container .dark .bg-white {
+	.dark .bg-white {
 		@apply bg-gray-950;
 	}

-	.gradio-container .dark .bg-gray-50 {
+	.dark .bg-gray-50 {
 		@apply bg-gray-900;
 	}

-	.gradio-container .dark .bg-gray-200 {
+	.dark .bg-gray-200 {
 		@apply bg-gray-800;
 	}

@ -91,6 +91,17 @@
 	}
 }

+.gradio-container {
+	line-height: 1.5; /* 1 */
+	-webkit-text-size-adjust: 100%; /* 2 */
+	-moz-tab-size: 4; /* 3 */
+	tab-size: 4; /* 3 */
+	font-family: Source Sans Pro, ui-sans-serif, system-ui, -apple-system,
+		BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
+		sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+		"Noto Color Emoji"; /* 4 */
+}
+
 .cropper-container {
 	direction: ltr;
 	font-size: 0;
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@ -67,6 +67,12 @@ importers:
    devDependencies:
      '@types/three': 0.138.0

+  packages/_cdn-test:
+    specifiers:
+      vite: ^2.9.9
+    devDependencies:
+      vite: 2.9.9
+
  packages/app:
    specifiers:
      '@gradio/atoms': workspace:^0.0.1
@ -371,7 +377,7 @@ importers:
      '@gradio/upload': link:../upload
      '@gradio/video': link:../video
    devDependencies:
-      '@sveltejs/adapter-auto': 1.0.0-next.48
+      '@sveltejs/adapter-auto': 1.0.0-next.50
      '@sveltejs/kit': 1.0.0-next.318_svelte@3.47.0
      autoprefixer: 10.4.2_postcss@8.4.6
      postcss: 8.4.6
@ -1068,38 +1074,38 @@ packages:
      estree-walker: 2.0.2
      picomatch: 2.3.1

-  /@sveltejs/adapter-auto/1.0.0-next.48:
-    resolution: {integrity: sha512-DZsMi31t5AsKYafmRGcgKcuGZRz4EN4sQ0UacPN85K3+9Xh7WadfHwWMfFFLIvCUMLE3jqZw+RErnZxUDZ1EGA==}
+  /@sveltejs/adapter-auto/1.0.0-next.50:
+    resolution: {integrity: sha512-5OkBxw+0Wmq7+Cr0DcOEOTHyOm4VmiWTUsKwMrSc47zcjbXB8n4UvEC0XUtJ5ZSBJRZz7hmVubqH1zm1SANtdw==}
    dependencies:
-      '@sveltejs/adapter-cloudflare': 1.0.0-next.21
-      '@sveltejs/adapter-netlify': 1.0.0-next.62
-      '@sveltejs/adapter-vercel': 1.0.0-next.56
+      '@sveltejs/adapter-cloudflare': 1.0.0-next.23
+      '@sveltejs/adapter-netlify': 1.0.0-next.64
+      '@sveltejs/adapter-vercel': 1.0.0-next.58
    transitivePeerDependencies:
      - encoding
      - supports-color
    dev: true

-  /@sveltejs/adapter-cloudflare/1.0.0-next.21:
-    resolution: {integrity: sha512-bPD62sGuCfo20jCz01ihd5ArxyiCu7iogQrQQK+higbz6OR1q34VnXCuNg/vHuDp+6kegLvRTRD0Qe22WVOZbw==}
+  /@sveltejs/adapter-cloudflare/1.0.0-next.23:
+    resolution: {integrity: sha512-WaDE25Ib3Q9kM1BBxvGxr57vfExg0Q1Wu2H3dSFV4Apw18UHKS89P/U6wd4u4zAzAw+Mcm8gduX/rRs5z0YMwA==}
    dependencies:
-      esbuild: 0.14.31
+      esbuild: 0.14.42
      worktop: 0.8.0-next.14
    dev: true

-  /@sveltejs/adapter-netlify/1.0.0-next.62:
-    resolution: {integrity: sha512-oX5Q0I57eI2bvd5FYtRFArevcY90Aza0OywtmuO/USoE4f+Z96idktaKOdyMhjlIQkc2GTablJSA88UIycwwMA==}
+  /@sveltejs/adapter-netlify/1.0.0-next.64:
+    resolution: {integrity: sha512-n2oBAIdv1s4magogcCYbequDmPgOKviNfy40JJ5ZavansboYeaygFri9HcOwcHqrTOmEo3ZDIBoc1UTpbmzMYg==}
    dependencies:
      '@iarna/toml': 2.2.5
-      esbuild: 0.14.31
+      esbuild: 0.14.42
      set-cookie-parser: 2.4.8
      tiny-glob: 0.2.9
    dev: true

-  /@sveltejs/adapter-vercel/1.0.0-next.56:
-    resolution: {integrity: sha512-DZj4wLwMb3xIzxue5oGrtr86xrBq/SwK28NuA7Txblg2wSRE9hhrTUQ0ERlP6V/qdXZ9ZE58Rq8L8/6Vt7tqPA==}
+  /@sveltejs/adapter-vercel/1.0.0-next.58:
+    resolution: {integrity: sha512-Gw76HhwHh2sWP2RN8jwm4jMmO5rnvvWsPsnAhFRCYlIs6gwKf/mNE/CfTQ1nkqKEm15YEYHjKXRVRjI8BniwxA==}
    dependencies:
      '@vercel/nft': 0.19.1
-      esbuild: 0.14.31
+      esbuild: 0.14.42
    transitivePeerDependencies:
      - encoding
      - supports-color
@ -1751,7 +1757,7 @@ packages:
    dev: false

  /console-control-strings/1.1.0:
-    resolution: {integrity: sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=}
+    resolution: {integrity: sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==}
    dev: true

  /convert-source-map/1.8.0:
@ -1954,7 +1960,7 @@ packages:
    dev: false

  /delegates/1.0.0:
-    resolution: {integrity: sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=}
+    resolution: {integrity: sha512-bd2L678uiWATM6m5Z1VzNCErI3jiGzt6HGY8OVICs40JQq/HALfbyNJmp0UDakEY4pMMaN0Ly5om/B1VI/+xfQ==}
    dev: true

  /dequal/2.0.2:
@ -1967,7 +1973,7 @@ packages:
    engines: {node: '>=8'}

  /detect-libc/1.0.3:
-    resolution: {integrity: sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=}
+    resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==}
    engines: {node: '>=0.10'}
    hasBin: true
    dev: true
@ -2101,6 +2107,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-android-64/0.14.42:
+    resolution: {integrity: sha512-P4Y36VUtRhK/zivqGVMqhptSrFILAGlYp0Z8r9UQqHJ3iWztRCNWnlBzD9HRx0DbueXikzOiwyOri+ojAFfW6A==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-android-arm64/0.14.31:
    resolution: {integrity: sha512-0rkH/35s7ZVcsw6nS0IAkR0dekSbjZGWdlOAf3jV0lGoPqqw0x6/TmaV9w7DQgUERTH1ApmPlpAMU4kVkCq9Jg==}
    engines: {node: '>=12'}
@ -2109,6 +2124,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-android-arm64/0.14.42:
+    resolution: {integrity: sha512-0cOqCubq+RWScPqvtQdjXG3Czb3AWI2CaKw3HeXry2eoA2rrPr85HF7IpdU26UWdBXgPYtlTN1LUiuXbboROhg==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-darwin-64/0.14.31:
    resolution: {integrity: sha512-kP6xPZHxtJa36Hb0jC05L3VzQSZBW2f3bpnQS20czXTRGEmM2GDiYpGdI5g2QYaw6vC4PYXjnigq8usd9g9jnQ==}
    engines: {node: '>=12'}
@ -2117,6 +2141,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-darwin-64/0.14.42:
+    resolution: {integrity: sha512-ipiBdCA3ZjYgRfRLdQwP82rTiv/YVMtW36hTvAN5ZKAIfxBOyPXY7Cejp3bMXWgzKD8B6O+zoMzh01GZsCuEIA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-darwin-arm64/0.14.31:
    resolution: {integrity: sha512-1ZMog4hkNsdBGtDDtsftUqX6S9N52gEx4vX5aVehsSptgoBFIar1XrPiBTQty7YNH+bJasTpSVaZQgElCVvPKQ==}
    engines: {node: '>=12'}
@ -2125,6 +2158,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-darwin-arm64/0.14.42:
+    resolution: {integrity: sha512-bU2tHRqTPOaoH/4m0zYHbFWpiYDmaA0gt90/3BMEFaM0PqVK/a6MA2V/ypV5PO0v8QxN6gH5hBPY4YJ2lopXgA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-freebsd-64/0.14.31:
    resolution: {integrity: sha512-Zo0BYj7QpVFWoUpkv6Ng0RO2eJ4zk/WDaHMO88+jr5HuYmxsOre0imgwaZVPquTuJnCvL1G48BFucJ3tFflSeQ==}
    engines: {node: '>=12'}
@ -2133,6 +2175,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-freebsd-64/0.14.42:
+    resolution: {integrity: sha512-75h1+22Ivy07+QvxHyhVqOdekupiTZVLN1PMwCDonAqyXd8TVNJfIRFrdL8QmSJrOJJ5h8H1I9ETyl2L8LQDaw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-freebsd-arm64/0.14.31:
    resolution: {integrity: sha512-t85bS6jbRpmdjr4pdr/FY/fpx8lo1vv9S7BAs2EsXKJQhRDMIiC3QW+k2acYJoRuqirlvJcJVFQGCq/PfyC1kA==}
    engines: {node: '>=12'}
@ -2141,6 +2192,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-freebsd-arm64/0.14.42:
+    resolution: {integrity: sha512-W6Jebeu5TTDQMJUJVarEzRU9LlKpNkPBbjqSu+GUPTHDCly5zZEQq9uHkmHHl7OKm+mQ2zFySN83nmfCeZCyNA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-linux-32/0.14.31:
    resolution: {integrity: sha512-XYtOk/GodSkv+UOYVwryGpGPuFnszsMvRMKq6cIUfFfdssHuKDsU9IZveyCG44J106J39ABenQ5EetbYtVJHUw==}
    engines: {node: '>=12'}
@ -2149,6 +2209,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-linux-32/0.14.42:
+    resolution: {integrity: sha512-Ooy/Bj+mJ1z4jlWcK5Dl6SlPlCgQB9zg1UrTCeY8XagvuWZ4qGPyYEWGkT94HUsRi2hKsXvcs6ThTOjBaJSMfg==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-linux-64/0.14.31:
    resolution: {integrity: sha512-Zf9CZxAxaXWHLqCg/QZ/hs0RU0XV3IBxV+ENQzy00S4QOTnZAvSLgPciILHHrVJ0lPIlb4XzAqlLM5y6iI2LIw==}
    engines: {node: '>=12'}
@ -2157,6 +2226,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-linux-64/0.14.42:
+    resolution: {integrity: sha512-2L0HbzQfbTuemUWfVqNIjOfaTRt9zsvjnme6lnr7/MO9toz/MJ5tZhjqrG6uDWDxhsaHI2/nsDgrv8uEEN2eoA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-linux-arm/0.14.31:
    resolution: {integrity: sha512-RpiaeHPRlgCCDskxoyIsI49BhcDtZ4cl8+SLffizDm0yMNWP538SUg0ezQ2TTOPj3/svaGIbkRDwYtAon0Sjkg==}
    engines: {node: '>=12'}
@ -2165,6 +2243,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-linux-arm/0.14.42:
+    resolution: {integrity: sha512-STq69yzCMhdRaWnh29UYrLSr/qaWMm/KqwaRF1pMEK7kDiagaXhSL1zQGXbYv94GuGY/zAwzK98+6idCMUOOCg==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-linux-arm64/0.14.31:
    resolution: {integrity: sha512-V/H0tv+xpQ9IOHM+o85oCKNNidIEc5CcnDWl0V+hPd2F03dqdbFkWPBGphx8rD4JSQn6UefUQ1iH7y1qIzO8Fw==}
    engines: {node: '>=12'}
@ -2173,6 +2260,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-linux-arm64/0.14.42:
+    resolution: {integrity: sha512-c3Ug3e9JpVr8jAcfbhirtpBauLxzYPpycjWulD71CF6ZSY26tvzmXMJYooQ2YKqDY4e/fPu5K8bm7MiXMnyxuA==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-linux-mips64le/0.14.31:
    resolution: {integrity: sha512-9/oBfAckInRuUg6AEgdCLLn6KJ6UOJDOLmUinTsReVSg6AfV6wxYQJq9iQM2idRogP7GUpomJ+bvCdWXpotQRQ==}
    engines: {node: '>=12'}
@ -2181,6 +2277,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-linux-mips64le/0.14.42:
+    resolution: {integrity: sha512-QuvpHGbYlkyXWf2cGm51LBCHx6eUakjaSrRpUqhPwjh/uvNUYvLmz2LgPTTPwCqaKt0iwL+OGVL0tXA5aDbAbg==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-linux-ppc64le/0.14.31:
    resolution: {integrity: sha512-NMcb14Pg+8q8raGkzor9/R3vQwKzgxE3694BtO2SDLBwJuL2C1dQ1ZtM1t7ZvArQBgT8RiZVxb0/3fD+qGNk7g==}
    engines: {node: '>=12'}
@ -2189,6 +2294,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-linux-ppc64le/0.14.42:
+    resolution: {integrity: sha512-8ohIVIWDbDT+i7lCx44YCyIRrOW1MYlks9fxTo0ME2LS/fxxdoJBwHWzaDYhjvf8kNpA+MInZvyOEAGoVDrMHg==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-linux-riscv64/0.14.31:
    resolution: {integrity: sha512-l13yvmsVfawAnoYfcpuvml+nTlrOmtdceXYufSkXl2DOb0JKcuR6ARlAzuQCDcpo49SOJy1cCxpwlOIsUQBfzA==}
    engines: {node: '>=12'}
@ -2197,6 +2311,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-linux-riscv64/0.14.42:
+    resolution: {integrity: sha512-DzDqK3TuoXktPyG1Lwx7vhaF49Onv3eR61KwQyxYo4y5UKTpL3NmuarHSIaSVlTFDDpcIajCDwz5/uwKLLgKiQ==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-linux-s390x/0.14.31:
    resolution: {integrity: sha512-GIwV9mY3koYja9MCSkKLk1P7rj+MkPV0UsGsZ575hEcIBrXeKN9jBi6X/bxDDPEN/SUAH35cJhBNrZU4x9lEfg==}
    engines: {node: '>=12'}
@ -2205,6 +2328,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-linux-s390x/0.14.42:
+    resolution: {integrity: sha512-YFRhPCxl8nb//Wn6SiS5pmtplBi4z9yC2gLrYoYI/tvwuB1jldir9r7JwAGy1Ck4D7sE7wBN9GFtUUX/DLdcEQ==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-netbsd-64/0.14.31:
    resolution: {integrity: sha512-bJ+pyLvKQm+Obp5k7/Wk8e9Gdkls56F1aiI3uptoIfOIUqsZImH7pDyTrSufwqsFp62kO9LRuwXnjDwQtPyhFQ==}
    engines: {node: '>=12'}
@ -2213,6 +2345,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-netbsd-64/0.14.42:
+    resolution: {integrity: sha512-QYSD2k+oT9dqB/4eEM9c+7KyNYsIPgzYOSrmfNGDIyJrbT1d+CFVKvnKahDKNJLfOYj8N4MgyFaU9/Ytc6w5Vw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-openbsd-64/0.14.31:
    resolution: {integrity: sha512-NRAAPPca05H9j9Xab0kVXK0V6/pyZGGy8d2Y8KS0BMwWEydlD4KCJDmH8/7bWCKYLRGOOCE9/GPBJyPWHFW3sg==}
    engines: {node: '>=12'}
@ -2221,6 +2362,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-openbsd-64/0.14.42:
+    resolution: {integrity: sha512-M2meNVIKWsm2HMY7+TU9AxM7ZVwI9havdsw6m/6EzdXysyCFFSoaTQ/Jg03izjCsK17FsVRHqRe26Llj6x0MNA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-sunos-64/0.14.31:
    resolution: {integrity: sha512-9uA+V8w9Eehu4ldb95lPWdgCMcMO5HH6pXmfkk5usn3JsSZxKdLKsXB4hYgP80wscZvVYXJl2G+KNxsUTfPhZw==}
    engines: {node: '>=12'}
@ -2229,6 +2379,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-sunos-64/0.14.42:
+    resolution: {integrity: sha512-uXV8TAZEw36DkgW8Ak3MpSJs1ofBb3Smkc/6pZ29sCAN1KzCAQzsje4sUwugf+FVicrHvlamCOlFZIXgct+iqQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-windows-32/0.14.31:
    resolution: {integrity: sha512-VGdncQTqoxD9q3v/dk0Yugbmx2FzOkcs0OemBYc1X9KXOLQYH0uQbLJIckZdZOC3J+JKSExbYFrzYCOwWPuNyA==}
    engines: {node: '>=12'}
@ -2237,6 +2396,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-windows-32/0.14.42:
+    resolution: {integrity: sha512-4iw/8qWmRICWi9ZOnJJf9sYt6wmtp3hsN4TdI5NqgjfOkBVMxNdM9Vt3626G1Rda9ya2Q0hjQRD9W1o+m6Lz6g==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-windows-64/0.14.31:
    resolution: {integrity: sha512-v/2ye5zBqpmCzi3bLCagStbNQlnOsY7WtMrD2Q0xZxeSIXONxji15KYtVee5o7nw4lXWbQSS1BL8G6BBMvtq4A==}
    engines: {node: '>=12'}
@ -2245,6 +2413,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-windows-64/0.14.42:
+    resolution: {integrity: sha512-j3cdK+Y3+a5H0wHKmLGTJcq0+/2mMBHPWkItR3vytp/aUGD/ua/t2BLdfBIzbNN9nLCRL9sywCRpOpFMx3CxzA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild-windows-arm64/0.14.31:
    resolution: {integrity: sha512-RXeU42FJoG1sriNHg73h4S+5B7L/gw+8T7U9u8IWqSSEbY6fZvBh4uofugiU1szUDqqP00GHwZ09WgYe3lGZiw==}
    engines: {node: '>=12'}
@ -2253,6 +2430,15 @@ packages:
    requiresBuild: true
    optional: true

+  /esbuild-windows-arm64/0.14.42:
+    resolution: {integrity: sha512-+lRAARnF+hf8J0mN27ujO+VbhPbDqJ8rCcJKye4y7YZLV6C4n3pTRThAb388k/zqF5uM0lS5O201u0OqoWSicw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: true
+    optional: true
+
  /esbuild/0.14.31:
    resolution: {integrity: sha512-QA0fUM13+JZzcvg1bdrhi7wo8Lr5IRHA9ypNn2znqxGqb66dSK6pAh01TjyBOhzZGazPQJZ1K26VrCAQJ715qA==}
    engines: {node: '>=12'}
@ -2280,6 +2466,34 @@ packages:
      esbuild-windows-64: 0.14.31
      esbuild-windows-arm64: 0.14.31

+  /esbuild/0.14.42:
+    resolution: {integrity: sha512-V0uPZotCEHokJdNqyozH6qsaQXqmZEOiZWrXnds/zaH/0SyrIayRXWRB98CENO73MIZ9T3HBIOsmds5twWtmgw==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      esbuild-android-64: 0.14.42
+      esbuild-android-arm64: 0.14.42
+      esbuild-darwin-64: 0.14.42
+      esbuild-darwin-arm64: 0.14.42
+      esbuild-freebsd-64: 0.14.42
+      esbuild-freebsd-arm64: 0.14.42
+      esbuild-linux-32: 0.14.42
+      esbuild-linux-64: 0.14.42
+      esbuild-linux-arm: 0.14.42
+      esbuild-linux-arm64: 0.14.42
+      esbuild-linux-mips64le: 0.14.42
+      esbuild-linux-ppc64le: 0.14.42
+      esbuild-linux-riscv64: 0.14.42
+      esbuild-linux-s390x: 0.14.42
+      esbuild-netbsd-64: 0.14.42
+      esbuild-openbsd-64: 0.14.42
+      esbuild-sunos-64: 0.14.42
+      esbuild-windows-32: 0.14.42
+      esbuild-windows-64: 0.14.42
+      esbuild-windows-arm64: 0.14.42
+    dev: true
+
  /escalade/3.1.1:
    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
    engines: {node: '>=6'}
@ -2388,7 +2602,7 @@ packages:
    dev: true

  /fs.realpath/1.0.0:
-    resolution: {integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8=}
+    resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}

  /fsevents/2.3.2:
    resolution: {integrity: sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==}
@ -2401,7 +2615,7 @@ packages:
    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}

  /gauge/2.7.4:
-    resolution: {integrity: sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=}
+    resolution: {integrity: sha512-14x4kjc6lkD3ltw589k0NrPD6cCNTD6CWoVUNpB85+DrtONoZn+Rug6xZU5RvSC4+TZPxA5AnBibQYAvZn41Hg==}
    dependencies:
      aproba: 1.2.0
      console-control-strings: 1.1.0
@ -2540,7 +2754,7 @@ packages:
    dev: false

  /has-unicode/2.0.1:
-    resolution: {integrity: sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=}
+    resolution: {integrity: sha512-8Rf9Y83NBReMnx0gFzA8JImQACstCYWUplepDa9xprwwtmgEZUF0h/i5xSA625zB/I37EtrswSST6OXxwaaIJQ==}
    dev: true

  /has/1.0.3:
@ -2610,7 +2824,7 @@ packages:
      resolve-from: 4.0.0

  /inflight/1.0.6:
-    resolution: {integrity: sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=}
+    resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
    dependencies:
      once: 1.4.0
      wrappy: 1.0.2
@ -2700,7 +2914,7 @@ packages:
    engines: {node: '>=0.10.0'}

  /is-fullwidth-code-point/1.0.0:
-    resolution: {integrity: sha1-754xOG8DGn8NZDr4L95QxFfvAMs=}
+    resolution: {integrity: sha512-1pqUqRjkhPJ9miNq9SwMfdvi6lBJcd6eFxvfaivQhaH3SgisfiuudvFntdKOmxuee/77l+FPjKrQjWvmPjWrRw==}
    engines: {node: '>=0.10.0'}
    dependencies:
      number-is-nan: 1.0.1
@ -3042,7 +3256,6 @@ packages:
    resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true
-    dev: false

  /needle/2.9.1:
    resolution: {integrity: sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==}
@ -3198,12 +3411,12 @@ packages:
    dev: false

  /number-is-nan/1.0.1:
-    resolution: {integrity: sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=}
+    resolution: {integrity: sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ==}
    engines: {node: '>=0.10.0'}
    dev: true

  /object-assign/4.1.1:
-    resolution: {integrity: sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=}
+    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}
    dev: true

@ -3231,7 +3444,7 @@ packages:
    dev: false

  /once/1.4.0:
-    resolution: {integrity: sha1-WDsap3WWHUsROsF9nFC6753Xa9E=}
+    resolution: {integrity: sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==}
    dependencies:
      wrappy: 1.0.2

@ -3245,12 +3458,12 @@ packages:
    dev: false

  /os-homedir/1.0.2:
-    resolution: {integrity: sha1-/7xJiDNuDoM94MFox+8VISGqf7M=}
+    resolution: {integrity: sha512-B5JU3cabzk8c67mRRd3ECmROafjYMXbuzlwtqdM8IbS8ktlTix8aFGb2bAGKrSRIlnfKwovGUUr72JUPyOb6kQ==}
    engines: {node: '>=0.10.0'}
    dev: true

  /os-tmpdir/1.0.2:
-    resolution: {integrity: sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=}
+    resolution: {integrity: sha512-D2FR03Vir7FIu45XBY20mTb+/ZSWB00sjU9jdQXt83gDrI4Ztz5Fs7/yy74g2N5SVQY4xY1qDr4rNddwYRVX0g==}
    engines: {node: '>=0.10.0'}
    dev: true

@ -3289,7 +3502,7 @@ packages:
      lines-and-columns: 1.2.4

  /path-is-absolute/1.0.1:
-    resolution: {integrity: sha1-F0uSaHNVNP+8es5r9TpanhtcX18=}
+    resolution: {integrity: sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==}
    engines: {node: '>=0.10.0'}

  /path-key/2.0.1:
@ -3455,7 +3668,6 @@ packages:
      nanoid: 3.3.4
      picocolors: 1.0.0
      source-map-js: 1.0.2
-    dev: false

  /postcss/8.4.6:
    resolution: {integrity: sha512-OovjwIzs9Te46vlEx7+uXB0PLijpwjXGKXjVGGPIGubGpq7uh5Xgf6D6FiJ/SzJMBosHDp6a2hiXOS97iBXcaA==}
@ -4462,7 +4674,6 @@ packages:
      rollup: 2.66.1
    optionalDependencies:
      fsevents: 2.3.2
-    dev: false

  /vitest/0.12.7_happy-dom@2.49.0:
    resolution: {integrity: sha512-rQsb9i/zEw+HtiTNr+5p+tOUMu0Ojp0jtZc/6FfE4T1xL2bhMq74tfUgu7hav3rFF9eGKpJeZBVlEszjdCuYQg==}
--- a/ui/tailwind.config.cjs
+++ b/ui/tailwind.config.cjs
@ -8,6 +8,5 @@ module.exports = {
 		extend: {}
 	},

-	plugins: [require("@tailwindcss/forms")],
-	important: ".gradio-container"
+	plugins: [require("@tailwindcss/forms")]
 };