From 0044c243db5c8059b8ae7d5379d52bdeb982a734 Mon Sep 17 00:00:00 2001
From: pngwn <hello@pngwn.io>
Date: Wed, 2 Mar 2022 16:42:43 +0000
Subject: [PATCH] pull all components into packages

---
 .../src/components/input/Audio/Audio.svelte   |   2 +-
 ui/packages/audio/src/Audio.svelte            |   1 -
 ui/packages/button/package.json               |   5 +-
 ui/packages/carousel/README.md                |  17 +
 ui/packages/carousel/package.json             |  10 +
 ui/packages/carousel/src/Carousel.svelte      |  78 ++++
 ui/packages/carousel/src/CarouselItem.svelte  |  22 +
 ui/packages/carousel/src/index.ts             |   2 +
 ui/packages/chart/README.md                   |   1 +
 ui/packages/chart/package.json                |  16 +
 ui/packages/chart/src/Chart.svelte            | 162 +++++++
 ui/packages/chart/src/index.ts                |   1 +
 ui/packages/chart/src/utils.ts                |  92 ++++
 ui/packages/chatbot/README.md                 |  11 +
 ui/packages/chatbot/package.json              |  10 +
 ui/packages/chatbot/src/ChatBot.svelte        |  33 ++
 ui/packages/chatbot/src/index.ts              |   1 +
 ui/packages/file/README.md                    |  11 +
 ui/packages/file/package.json                 |  13 +
 ui/packages/file/src/File.svelte              |  61 +++
 ui/packages/file/src/index.ts                 |   1 +
 ui/packages/file/src/utils.ts                 |  10 +
 ui/packages/form/README.md                    |  11 +
 ui/packages/{components => form}/package.json |   2 +-
 ui/packages/form/src/Checkbox.svelte          |  62 +++
 ui/packages/form/src/CheckboxGroup.svelte     |  73 ++++
 ui/packages/form/src/Dropdown.svelte          |  55 +++
 ui/packages/form/src/Number.svelte            |  38 ++
 ui/packages/form/src/Radio.svelte             |  47 ++
 ui/packages/form/src/Textbox.svelte           |  50 +++
 ui/packages/form/src/index.ts                 |   6 +
 ui/packages/form/src/utils.ts                 |   9 +
 ui/packages/highlighted-text/README.md        |  11 +
 ui/packages/highlighted-text/package.json     |  10 +
 .../src/HighlightedText.svelte                | 130 ++++++
 ui/packages/highlighted-text/src/index.ts     |   1 +
 ui/packages/highlighted-text/src/utils.ts     |  36 ++
 ui/packages/html/README.md                    |  11 +
 ui/packages/html/package.json                 |  10 +
 ui/packages/html/src/HTML.svelte              |   8 +
 ui/packages/html/src/index.ts                 |   1 +
 ui/packages/image/README.md                   |  11 +
 ui/packages/image/package.json                |  17 +
 ui/packages/image/src/Cropper.svelte          |  27 ++
 ui/packages/image/src/Image.svelte            | 103 +++++
 ui/packages/image/src/ImageEditor.svelte      |  46 ++
 ui/packages/image/src/ModifySketch.svelte     |  23 +
 ui/packages/image/src/Sketch.svelte           | 365 ++++++++++++++++
 ui/packages/image/src/Webcam.svelte           |  74 ++++
 ui/packages/image/src/camera.svg              |   1 +
 ui/packages/image/src/clear.svg               |  67 +++
 ui/packages/image/src/index.ts                |   1 +
 ui/packages/image/src/undo-solid.svg          |   1 +
 ui/packages/json/README.md                    |  11 +
 ui/packages/json/package.json                 |  10 +
 ui/packages/json/src/JSON.svelte              |  16 +
 ui/packages/json/src/JSONNode.svelte          |  84 ++++
 ui/packages/json/src/index.ts                 |   1 +
 ui/packages/label/README.md                   |  11 +
 ui/packages/label/package.json                |  10 +
 ui/packages/label/src/Label.svelte            |  55 +++
 ui/packages/label/src/index.ts                |   1 +
 ui/packages/table/README.md                   |   1 +
 ui/packages/table/package.json                |  10 +
 ui/packages/table/src/Table.svelte            | 400 ++++++++++++++++++
 ui/packages/table/src/index.ts                |   1 +
 ui/packages/theme/package.json                |   5 +-
 ui/packages/tooltip/README.md                 |  11 +
 ui/packages/tooltip/package.json              |  10 +
 ui/packages/tooltip/src/Tooltip.svelte        |  20 +
 ui/packages/tooltip/src/index.ts              |   1 +
 ui/packages/tooltip/src/tooltip.ts            |  49 +++
 ui/packages/upload/src/ModifyUpload.svelte    |   4 +-
 ui/packages/upload/src/Upload.svelte          |  12 +-
 ui/packages/upload/src/index.ts               |   1 +
 ui/packages/upload/src/types.ts               |   6 +
 ui/packages/video/README.md                   |  11 +
 ui/packages/video/package.json                |  13 +
 ui/packages/video/src/Video.svelte            |  62 +++
 ui/packages/video/src/index.ts                |   1 +
 ui/packages/video/src/utils.ts                |  17 +
 ui/packages/workbench/package.json            |  15 +-
 ui/packages/workbench/src/assets/cheetah1.jpg | Bin 0 -> 20552 bytes
 ui/packages/workbench/src/assets/time.csv     |   8 +
 ui/packages/workbench/src/routes/_Nav.svelte  |   6 +-
 ui/packages/workbench/src/routes/audio.svelte |   1 -
 .../workbench/src/routes/carousel.svelte      |  13 +
 ui/packages/workbench/src/routes/chart.svelte |  14 +
 .../workbench/src/routes/chatbot.svelte       |  14 +
 ui/packages/workbench/src/routes/file.svelte  |   5 +
 ui/packages/workbench/src/routes/forms.svelte |  31 ++
 .../src/routes/highlightedtext.svelte         |  51 +++
 ui/packages/workbench/src/routes/html.svelte  |   7 +
 ui/packages/workbench/src/routes/image.svelte |  20 +
 ui/packages/workbench/src/routes/json.svelte  |  34 ++
 ui/packages/workbench/src/routes/label.svelte |  20 +
 ui/packages/workbench/src/routes/table.svelte |   5 +
 .../workbench/src/routes/upload.svelte        |   7 +
 ui/packages/workbench/src/routes/video.svelte |   5 +
 ui/pnpm-lock.yaml                             | 133 +++++-
 100 files changed, 3048 insertions(+), 42 deletions(-)
 create mode 100644 ui/packages/carousel/README.md
 create mode 100644 ui/packages/carousel/package.json
 create mode 100644 ui/packages/carousel/src/Carousel.svelte
 create mode 100644 ui/packages/carousel/src/CarouselItem.svelte
 create mode 100644 ui/packages/carousel/src/index.ts
 create mode 100644 ui/packages/chart/README.md
 create mode 100644 ui/packages/chart/package.json
 create mode 100644 ui/packages/chart/src/Chart.svelte
 create mode 100644 ui/packages/chart/src/index.ts
 create mode 100644 ui/packages/chart/src/utils.ts
 create mode 100644 ui/packages/chatbot/README.md
 create mode 100644 ui/packages/chatbot/package.json
 create mode 100644 ui/packages/chatbot/src/ChatBot.svelte
 create mode 100644 ui/packages/chatbot/src/index.ts
 create mode 100644 ui/packages/file/README.md
 create mode 100644 ui/packages/file/package.json
 create mode 100644 ui/packages/file/src/File.svelte
 create mode 100644 ui/packages/file/src/index.ts
 create mode 100644 ui/packages/file/src/utils.ts
 create mode 100644 ui/packages/form/README.md
 rename ui/packages/{components => form}/package.json (86%)
 create mode 100644 ui/packages/form/src/Checkbox.svelte
 create mode 100644 ui/packages/form/src/CheckboxGroup.svelte
 create mode 100644 ui/packages/form/src/Dropdown.svelte
 create mode 100644 ui/packages/form/src/Number.svelte
 create mode 100644 ui/packages/form/src/Radio.svelte
 create mode 100644 ui/packages/form/src/Textbox.svelte
 create mode 100644 ui/packages/form/src/index.ts
 create mode 100644 ui/packages/form/src/utils.ts
 create mode 100644 ui/packages/highlighted-text/README.md
 create mode 100644 ui/packages/highlighted-text/package.json
 create mode 100644 ui/packages/highlighted-text/src/HighlightedText.svelte
 create mode 100644 ui/packages/highlighted-text/src/index.ts
 create mode 100644 ui/packages/highlighted-text/src/utils.ts
 create mode 100644 ui/packages/html/README.md
 create mode 100644 ui/packages/html/package.json
 create mode 100644 ui/packages/html/src/HTML.svelte
 create mode 100644 ui/packages/html/src/index.ts
 create mode 100644 ui/packages/image/README.md
 create mode 100644 ui/packages/image/package.json
 create mode 100644 ui/packages/image/src/Cropper.svelte
 create mode 100644 ui/packages/image/src/Image.svelte
 create mode 100644 ui/packages/image/src/ImageEditor.svelte
 create mode 100644 ui/packages/image/src/ModifySketch.svelte
 create mode 100644 ui/packages/image/src/Sketch.svelte
 create mode 100644 ui/packages/image/src/Webcam.svelte
 create mode 100644 ui/packages/image/src/camera.svg
 create mode 100644 ui/packages/image/src/clear.svg
 create mode 100644 ui/packages/image/src/index.ts
 create mode 100644 ui/packages/image/src/undo-solid.svg
 create mode 100644 ui/packages/json/README.md
 create mode 100644 ui/packages/json/package.json
 create mode 100644 ui/packages/json/src/JSON.svelte
 create mode 100644 ui/packages/json/src/JSONNode.svelte
 create mode 100644 ui/packages/json/src/index.ts
 create mode 100644 ui/packages/label/README.md
 create mode 100644 ui/packages/label/package.json
 create mode 100644 ui/packages/label/src/Label.svelte
 create mode 100644 ui/packages/label/src/index.ts
 create mode 100644 ui/packages/table/README.md
 create mode 100644 ui/packages/table/package.json
 create mode 100644 ui/packages/table/src/Table.svelte
 create mode 100644 ui/packages/table/src/index.ts
 create mode 100644 ui/packages/tooltip/README.md
 create mode 100644 ui/packages/tooltip/package.json
 create mode 100644 ui/packages/tooltip/src/Tooltip.svelte
 create mode 100644 ui/packages/tooltip/src/index.ts
 create mode 100644 ui/packages/tooltip/src/tooltip.ts
 create mode 100644 ui/packages/upload/src/types.ts
 create mode 100644 ui/packages/video/README.md
 create mode 100644 ui/packages/video/package.json
 create mode 100644 ui/packages/video/src/Video.svelte
 create mode 100644 ui/packages/video/src/index.ts
 create mode 100644 ui/packages/video/src/utils.ts
 create mode 100644 ui/packages/workbench/src/assets/cheetah1.jpg
 create mode 100644 ui/packages/workbench/src/assets/time.csv
 create mode 100644 ui/packages/workbench/src/routes/carousel.svelte
 create mode 100644 ui/packages/workbench/src/routes/chart.svelte
 create mode 100644 ui/packages/workbench/src/routes/chatbot.svelte
 create mode 100644 ui/packages/workbench/src/routes/file.svelte
 create mode 100644 ui/packages/workbench/src/routes/forms.svelte
 create mode 100644 ui/packages/workbench/src/routes/highlightedtext.svelte
 create mode 100644 ui/packages/workbench/src/routes/html.svelte
 create mode 100644 ui/packages/workbench/src/routes/image.svelte
 create mode 100644 ui/packages/workbench/src/routes/json.svelte
 create mode 100644 ui/packages/workbench/src/routes/label.svelte
 create mode 100644 ui/packages/workbench/src/routes/table.svelte
 create mode 100644 ui/packages/workbench/src/routes/upload.svelte
 create mode 100644 ui/packages/workbench/src/routes/video.svelte

diff --git a/ui/packages/app/src/components/input/Audio/Audio.svelte b/ui/packages/app/src/components/input/Audio/Audio.svelte
index fb483a8774..7c8c61af00 100644
--- a/ui/packages/app/src/components/input/Audio/Audio.svelte
+++ b/ui/packages/app/src/components/input/Audio/Audio.svelte
@@ -128,7 +128,7 @@
 				</button>
 			{:else}
 				<button
-					class="p-2 rounded font-semibold bg-white dark:bg-gray-600 shadow transition hover:shadow-md bg-white dark:bg-gray-800"
+					class="p-2 rounded font-semibold shadow transition hover:shadow-md bg-white dark:bg-gray-800"
 					on:click={record}
 				>
 					Record
diff --git a/ui/packages/audio/src/Audio.svelte b/ui/packages/audio/src/Audio.svelte
index 077d23b41a..38f401e7f7 100644
--- a/ui/packages/audio/src/Audio.svelte
+++ b/ui/packages/audio/src/Audio.svelte
@@ -66,7 +66,6 @@
 	}
 
 	onDestroy(() => {
-		console.log(recorder);
 		if (recorder && recorder.state !== "inactive") {
 			recorder.stop();
 		}
diff --git a/ui/packages/button/package.json b/ui/packages/button/package.json
index 5e84c24c49..b509a5a94d 100644
--- a/ui/packages/button/package.json
+++ b/ui/packages/button/package.json
@@ -6,8 +6,5 @@
 	"main": "src/index.ts",
 	"author": "",
 	"license": "ISC",
-	"private": true,
-	"dependencies": {
-		"@gradio/upload": "workspace:^0.0.1"
-	}
+	"private": true
 }
diff --git a/ui/packages/carousel/README.md b/ui/packages/carousel/README.md
new file mode 100644
index 0000000000..48bd1448bd
--- /dev/null
+++ b/ui/packages/carousel/README.md
@@ -0,0 +1,17 @@
+# `@gradio/carousel`
+
+```html
+<script>
+	import { Carousel, CarouselItem } from "@gradio/carousel";
+</script>
+
+<Carousel>
+	<CarouselItem>
+		<h3>hello</h3>
+	</CarouselItem>
+
+	<CarouselItem>
+		<img />
+	</CarouselItem>
+</Carousel>
+```
diff --git a/ui/packages/carousel/package.json b/ui/packages/carousel/package.json
new file mode 100644
index 0000000000..c41491b06f
--- /dev/null
+++ b/ui/packages/carousel/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "@gradio/carousel",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true
+}
diff --git a/ui/packages/carousel/src/Carousel.svelte b/ui/packages/carousel/src/Carousel.svelte
new file mode 100644
index 0000000000..5e5967fffb
--- /dev/null
+++ b/ui/packages/carousel/src/Carousel.svelte
@@ -0,0 +1,78 @@
+<script context="module">
+	export const CAROUSEL = {};
+</script>
+
+<script lang="ts">
+	import { setContext } from "svelte";
+	import { writable } from "svelte/store";
+
+	export let theme: string = "default";
+
+	const items = writable<Array<number>>([]);
+	const current = writable<number>();
+
+	let id = -1;
+
+	setContext(CAROUSEL, {
+		register: () => {
+			$items.push(++id);
+			$items = $items;
+			return id;
+		},
+		unregister: (id: number) => {
+			const i = $items.findIndex((_id) => _id === id);
+			$items.slice(i, 1);
+
+			$items = $items;
+		},
+		current
+	});
+
+	let carousel_index: number = 0;
+	$: $current = $items[carousel_index] || 0;
+
+	const next = () => {
+		carousel_index = (carousel_index + 1) % $items.length;
+	};
+
+	const prev = () => {
+		carousel_index = (carousel_index - 1 + $items.length) % $items.length;
+	};
+</script>
+
+<div class="output-carousel flex flex-col gap-2" {theme}>
+	<slot />
+
+	<div class="carousel-control flex gap-4 justify-center items-center my-1">
+		<button on:click={prev}>
+			<svg
+				class="caret h-3 mt-0.5 fill-current"
+				viewBox="0 0 9.1457395 15.999842"
+			>
+				<path
+					d="M 0.32506616,7.2360106 7.1796187,0.33129769 c 0.4360247,-0.439451 1.1455702,-0.442056 1.5845974,-0.0058 0.4390612,0.435849 0.441666,1.14535901 0.00582,1.58438501 l -6.064985,6.1096644 6.10968,6.0646309 c 0.4390618,0.436026 0.4416664,1.145465 0.00582,1.584526 -0.4358485,0.439239 -1.1453586,0.441843 -1.5845975,0.0058 L 0.33088256,8.8203249 C 0.11135166,8.6022941 0.00105996,8.3161928 7.554975e-6,8.0295489 -0.00104244,7.7427633 0.10735446,7.4556467 0.32524356,7.2361162"
+				/>
+			</svg>
+		</button>
+		<div
+			class="carousel_index text-xl text-center font-semibold"
+			style="min-width: 60px"
+		>
+			{carousel_index + 1} / {$items.length}
+		</div>
+		<button on:click={next}>
+			<svg
+				class="caret h-3 mt-0.5 fill-current"
+				viewBox="0 0 9.1457395 15.999842"
+				transform="scale(-1, 1)"
+			>
+				<path
+					d="M 0.32506616,7.2360106 7.1796187,0.33129769 c 0.4360247,-0.439451 1.1455702,-0.442056 1.5845974,-0.0058 0.4390612,0.435849 0.441666,1.14535901 0.00582,1.58438501 l -6.064985,6.1096644 6.10968,6.0646309 c 0.4390618,0.436026 0.4416664,1.145465 0.00582,1.584526 -0.4358485,0.439239 -1.1453586,0.441843 -1.5845975,0.0058 L 0.33088256,8.8203249 C 0.11135166,8.6022941 0.00105996,8.3161928 7.554975e-6,8.0295489 -0.00104244,7.7427633 0.10735446,7.4556467 0.32524356,7.2361162"
+				/>
+			</svg>
+		</button>
+	</div>
+</div>
+
+<style lang="postcss">
+</style>
diff --git a/ui/packages/carousel/src/CarouselItem.svelte b/ui/packages/carousel/src/CarouselItem.svelte
new file mode 100644
index 0000000000..50a90df43f
--- /dev/null
+++ b/ui/packages/carousel/src/CarouselItem.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { onDestroy } from "svelte";
+	import { getContext } from "svelte";
+	import { CAROUSEL } from "./Carousel.svelte";
+
+	export let label: string | undefined = undefined;
+
+	const { register, unregister, current } = getContext(CAROUSEL);
+
+	let id = register();
+
+	onDestroy(() => unregister(id));
+</script>
+
+{#if $current === id}
+	<div class="component">
+		{#if label}
+			<div class="panel-header">{label}</div>
+		{/if}
+		<slot />
+	</div>
+{/if}
diff --git a/ui/packages/carousel/src/index.ts b/ui/packages/carousel/src/index.ts
new file mode 100644
index 0000000000..e2024e29fe
--- /dev/null
+++ b/ui/packages/carousel/src/index.ts
@@ -0,0 +1,2 @@
+export { default as Carousel } from "./Carousel.svelte";
+export { default as CarouselItem } from "./CarouselItem.svelte";
diff --git a/ui/packages/chart/README.md b/ui/packages/chart/README.md
new file mode 100644
index 0000000000..7bae7bb394
--- /dev/null
+++ b/ui/packages/chart/README.md
@@ -0,0 +1 @@
+# `@gradio/chart`
diff --git a/ui/packages/chart/package.json b/ui/packages/chart/package.json
new file mode 100644
index 0000000000..aa7c712dcd
--- /dev/null
+++ b/ui/packages/chart/package.json
@@ -0,0 +1,16 @@
+{
+	"name": "@gradio/chart",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true,
+	"dependencies": {
+		"@gradio/tooltip": "workspace:^0.0.1",
+		"d3-dsv": "^3.0.1",
+		"d3-scale": "^4.0.2",
+		"d3-shape": "^3.1.0"
+	}
+}
diff --git a/ui/packages/chart/src/Chart.svelte b/ui/packages/chart/src/Chart.svelte
new file mode 100644
index 0000000000..28996a4d5a
--- /dev/null
+++ b/ui/packages/chart/src/Chart.svelte
@@ -0,0 +1,162 @@
+<script lang="ts">
+	import { csvParse } from "d3-dsv";
+	import { scaleLinear } from "d3-scale";
+	import { line as _line, curveLinear } from "d3-shape";
+	import { createEventDispatcher, onMount } from "svelte";
+
+	import { get_domains, transform_values, get_color } from "./utils";
+	import { tooltip } from "@gradio/tooltip";
+
+	export let value: string | Array<Record<string, string>>;
+	export let x: string | undefined = undefined;
+	export let y: Array<string> | undefined = undefined;
+
+	const dispatch = createEventDispatcher();
+
+	$: ({ x: _x, y: _y } =
+		typeof value === "string"
+			? transform_values(csvParse(value) as Array<Record<string, string>>, x, y)
+			: transform_values(value, x, y));
+
+	$: x_domain = get_domains(_x);
+	$: y_domain = get_domains(_y);
+
+	$: scale_x = scaleLinear(x_domain, [0, 600]).nice();
+	$: scale_y = scaleLinear(y_domain, [350, 0]).nice();
+	$: x_ticks = scale_x.ticks(8);
+	$: y_ticks = scale_y.ticks(y_domain[1] < 10 ? y_domain[1] : 8);
+
+	let colors: Record<string, string>;
+	$: colors = _y.reduce(
+		(acc, next) => ({ ...acc, [next.name]: get_color() }),
+		{}
+	);
+
+	onMount(() => {
+		dispatch("process", { x: _x, y: _y });
+	});
+</script>
+
+<div>
+	<div class="flex justify-center align-items-center text-sm">
+		{#each _y as { name }}
+			<div class="mx-2">
+				<span
+					class="inline-block w-[10px] h-[10px]"
+					style="background-color: {colors[name]}"
+				/>
+				{name}
+			</div>
+		{/each}
+	</div>
+	<svg class="w-full" viewBox="-70 -20 700 420">
+		<g>
+			{#each x_ticks as tick}
+				<line
+					stroke-width="0.5"
+					x1={scale_x(tick)}
+					x2={scale_x(tick)}
+					y1={scale_y(y_ticks[0] < y_domain[0] ? y_ticks[0] : y_domain[0]) + 10}
+					y2={scale_y(
+						y_domain[1] > y_ticks[y_ticks.length - 1]
+							? y_domain[1]
+							: y_ticks[y_ticks.length - 1]
+					)}
+					stroke="#aaa"
+				/>
+				<text
+					class="font-mono text-xs"
+					text-anchor="middle"
+					x={scale_x(tick)}
+					y={scale_y(y_ticks[0]) + 30}
+				>
+					{tick}
+				</text>
+			{/each}
+
+			{#each y_ticks as tick}
+				<line
+					stroke-width="0.5"
+					y1={scale_y(tick)}
+					y2={scale_y(tick)}
+					x1={scale_x(x_ticks[0] < x_domain[0] ? x_ticks[0] : x_domain[0]) - 10}
+					x2={scale_x(
+						x_domain[1] > x_ticks[x_ticks.length - 1]
+							? x_domain[1]
+							: x_ticks[x_ticks.length - 1]
+					)}
+					stroke="#aaa"
+				/>
+
+				<text
+					class="font-mono text-xs"
+					text-anchor="end"
+					y={scale_y(tick) + 4}
+					x={scale_x(x_ticks[0]) - 20}
+				>
+					{tick}
+				</text>
+			{/each}
+
+			{#if y_domain[1] > y_ticks[y_ticks.length - 1]}
+				<line
+					stroke-width="0.5"
+					y1={scale_y(y_domain[1])}
+					y2={scale_y(y_domain[1])}
+					x1={scale_x(x_ticks[0])}
+					x2={scale_x(x_domain[1])}
+					stroke="#aaa"
+				/>
+				<text
+					class="font-mono text-xs"
+					text-anchor="end"
+					y={scale_y(y_domain[1]) + 4}
+					x={scale_x(x_ticks[0]) - 20}
+				>
+					{y_domain[1]}
+				</text>
+			{/if}
+		</g>
+
+		{#each _y as { name, values }}
+			{@const color = colors[name]}
+			{#each values as { x, y }}
+				<circle
+					r="3.5"
+					cx={scale_x(x)}
+					cy={scale_y(y)}
+					stroke-width="1.5"
+					stroke={color}
+					fill="none"
+				/>
+			{/each}
+			<path
+				d={_line().curve(curveLinear)(
+					values.map(({ x, y }) => [scale_x(x), scale_y(y)])
+				)}
+				fill="none"
+				stroke={color}
+				stroke-width="3"
+			/>
+		{/each}
+
+		{#each _y as { name, values }}
+			{@const color = colors[name]}
+			{#each values as { x, y }}
+				<circle
+					use:tooltip={{ color, text: `(${x}, ${y})` }}
+					r="7"
+					cx={scale_x(x)}
+					cy={scale_y(y)}
+					stroke="black"
+					fill="black"
+					style="cursor: pointer; opacity: 0"
+				/>
+			{/each}
+		{/each}
+	</svg>
+
+	<div class="flex justify-center align-items-center text-sm">
+		{_x.name}
+	</div>
+</div>
diff --git a/ui/packages/chart/src/index.ts b/ui/packages/chart/src/index.ts
new file mode 100644
index 0000000000..0659e3e8d4
--- /dev/null
+++ b/ui/packages/chart/src/index.ts
@@ -0,0 +1 @@
+export { default as Chart } from "./Chart.svelte";
diff --git a/ui/packages/chart/src/utils.ts b/ui/packages/chart/src/utils.ts
new file mode 100644
index 0000000000..32bcd4e76a
--- /dev/null
+++ b/ui/packages/chart/src/utils.ts
@@ -0,0 +1,92 @@
+interface XYValue {
+	x: number;
+	y: number;
+}
+
+interface ObjectValue {
+	values: XYValue[];
+}
+
+export function get_domains(
+	values: ObjectValue[] | { values: number[] }
+): [number, number] {
+	let _vs: number[];
+	if (Array.isArray(values)) {
+		_vs = values.reduce<number[]>((acc, { values }) => {
+			return [...acc, ...values.map(({ x, y }) => y)];
+		}, []);
+	} else {
+		_vs = values.values;
+	}
+	return [Math.min(..._vs), Math.max(..._vs)];
+}
+
+interface Row {
+	name: string;
+	values: number[];
+}
+
+interface RowPoint {
+	name: string;
+	values: Array<{ x: number; y: number }>;
+}
+
+interface TransformedValues {
+	x: Row;
+	y: Array<RowPoint>;
+}
+
+export function transform_values(
+	values: Array<Record<string, string>>,
+	x?: string,
+	y?: string[]
+) {
+	const transformed_values = Object.entries(
+		values[0]
+	).reduce<TransformedValues>(
+		(acc, next, i) => {
+			if ((!x && i === 0) || (x && next[0] === x)) {
+				acc.x.name = next[0];
+			} else if (!y || (y && y.includes(next[0]))) {
+				acc.y.push({ name: next[0], values: [] });
+			}
+			return acc;
+		},
+		{ x: { name: "", values: [] }, y: [] }
+	);
+
+	for (let i = 0; i < values.length; i++) {
+		const _a = Object.entries(values[i]);
+		for (let j = 0; j < _a.length; j++) {
+			let [name, x] = _a[j];
+			if (name === transformed_values.x.name) {
+				transformed_values.x.values.push(parseInt(x, 10));
+			} else {
+				transformed_values.y[j - 1].values.push({
+					y: parseInt(_a[j][1], 10),
+					x: parseInt(_a[0][1], 10)
+				});
+			}
+		}
+	}
+
+	return transformed_values;
+}
+
+let c = 0;
+export function get_color(): string {
+	let default_colors = [
+		[255, 99, 132],
+		[54, 162, 235],
+		[240, 176, 26],
+		[153, 102, 255],
+		[75, 192, 192],
+		[255, 159, 64]
+	];
+
+	if (c >= default_colors.length) c = 0;
+
+	const [r, g, b] = default_colors[c++];
+
+	return `rgb(${r},${g},${b})`;
+}
diff --git a/ui/packages/chatbot/README.md b/ui/packages/chatbot/README.md
new file mode 100644
index 0000000000..e5b427fdb3
--- /dev/null
+++ b/ui/packages/chatbot/README.md
@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```
diff --git a/ui/packages/chatbot/package.json b/ui/packages/chatbot/package.json
new file mode 100644
index 0000000000..34179cf419
--- /dev/null
+++ b/ui/packages/chatbot/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "@gradio/chatbot",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true
+}
diff --git a/ui/packages/chatbot/src/ChatBot.svelte b/ui/packages/chatbot/src/ChatBot.svelte
new file mode 100644
index 0000000000..9bd80835f7
--- /dev/null
+++ b/ui/packages/chatbot/src/ChatBot.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { beforeUpdate, afterUpdate } from "svelte";
+	export let value: Array<[string, string]>;
+	let div: HTMLDivElement;
+	let autoscroll: Boolean;
+
+	beforeUpdate(() => {
+		autoscroll =
+			div && div.offsetHeight + div.scrollTop > div.scrollHeight - 20;
+	});
+
+	afterUpdate(() => {
+		if (autoscroll) div.scrollTo(0, div.scrollHeight);
+	});
+</script>
+
+<div
+	class="overflow-y-auto h-64 border border-b-0 rounded-t-lg leading-tight"
+	bind:this={div}
+>
+	<div class="flex flex-col items-end space-y-4 p-3">
+		{#each value as message}
+			<div class="px-3 py-2 rounded-2xl bg-yellow-500 text-white ml-7">
+				{message[0]}
+			</div>
+			<div
+				class="px-3 py-2 rounded-2xl place-self-start bg-gray-300 dark:bg-gray-850 dark:text-gray-200 mr-7"
+			>
+				{message[1]}
+			</div>
+		{/each}
+	</div>
+</div>
diff --git a/ui/packages/chatbot/src/index.ts b/ui/packages/chatbot/src/index.ts
new file mode 100644
index 0000000000..e010050bf8
--- /dev/null
+++ b/ui/packages/chatbot/src/index.ts
@@ -0,0 +1 @@
+export { default as ChatBot } from "./ChatBot.svelte";
diff --git a/ui/packages/file/README.md b/ui/packages/file/README.md
new file mode 100644
index 0000000000..e5b427fdb3
--- /dev/null
+++ b/ui/packages/file/README.md
@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```
diff --git a/ui/packages/file/package.json b/ui/packages/file/package.json
new file mode 100644
index 0000000000..a178b92870
--- /dev/null
+++ b/ui/packages/file/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "@gradio/file",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true,
+	"dependencies": {
+		"@gradio/upload": "workspace:^0.0.1"
+	}
+}
diff --git a/ui/packages/file/src/File.svelte b/ui/packages/file/src/File.svelte
new file mode 100644
index 0000000000..9634a202d1
--- /dev/null
+++ b/ui/packages/file/src/File.svelte
@@ -0,0 +1,61 @@
+<script lang="ts">
+	import { Upload, ModifyUpload } from "@gradio/upload";
+	import type { FileData } from "@gradio/upload";
+	import { prettyBytes } from "./utils";
+
+	export let value: null | FileData;
+
+	export let theme: string = "default";
+	export let drop_text: string = "Drop an audio file";
+	export let or_text: string = "or";
+	export let upload_text: string = "click to upload";
+
+	function handle_upload({ detail }: CustomEvent<FileData>) {
+		value = detail;
+	}
+
+	function handle_clear({ detail }: CustomEvent<null>) {
+		value = null;
+	}
+</script>
+
+<div class="input-file" {theme}>
+	{#if value === null}
+		<Upload on:load={handle_upload} {theme}>
+			{drop_text}
+			<br />- {or_text} -<br />
+			{upload_text}
+		</Upload>
+	{:else}
+		<div
+			class="file-preview w-full flex flex-row flex-wrap justify-center items-center relative"
+		>
+			<ModifyUpload on:clear={handle_clear} {theme} />
+
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				class="h-10 w-1/5"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke="currentColor"
+			>
+				<path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					stroke-width="2"
+					d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+				/>
+			</svg>
+			<div class="file-name w-3/5 text-4xl p-6 break-all">{value.name}</div>
+			<div class="file-size text-2xl p-2">
+				{prettyBytes(value.size)}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style lang="postcss">
+	.input-file[theme="default"] .file-preview {
+		@apply h-60;
+	}
+</style>
diff --git a/ui/packages/file/src/index.ts b/ui/packages/file/src/index.ts
new file mode 100644
index 0000000000..837b16f85d
--- /dev/null
+++ b/ui/packages/file/src/index.ts
@@ -0,0 +1 @@
+export { default as File } from "./File.svelte";
diff --git a/ui/packages/file/src/utils.ts b/ui/packages/file/src/utils.ts
new file mode 100644
index 0000000000..8a7dd00218
--- /dev/null
+++ b/ui/packages/file/src/utils.ts
@@ -0,0 +1,10 @@
+export const prettyBytes = (bytes: number): string => {
+	let units = ["B", "KB", "MB", "GB", "PB"];
+	let i = 0;
+	while (bytes > 1024) {
+		bytes /= 1024;
+		i++;
+	}
+	let unit = units[i];
+	return bytes.toFixed(1) + " " + unit;
+};
diff --git a/ui/packages/form/README.md b/ui/packages/form/README.md
new file mode 100644
index 0000000000..e5b427fdb3
--- /dev/null
+++ b/ui/packages/form/README.md
@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```
diff --git a/ui/packages/components/package.json b/ui/packages/form/package.json
similarity index 86%
rename from ui/packages/components/package.json
rename to ui/packages/form/package.json
index eb6bcb3311..fab79daf59 100644
--- a/ui/packages/components/package.json
+++ b/ui/packages/form/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "~name~",
+	"name": "@gradio/form",
 	"version": "0.0.1",
 	"description": "Gradio UI packages",
 	"type": "module",
diff --git a/ui/packages/form/src/Checkbox.svelte b/ui/packages/form/src/Checkbox.svelte
new file mode 100644
index 0000000000..bc44859e2c
--- /dev/null
+++ b/ui/packages/form/src/Checkbox.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	export let value: boolean;
+	export let theme: string = "default";
+
+	const dispatch = createEventDispatcher<{ change: boolean }>();
+
+	function handle_change() {
+		dispatch("change", !value);
+		value = !value;
+	}
+</script>
+
+<div class="input-checkbox inline-block" {theme} on:click={handle_change}>
+	<button
+		class="checkbox-item py-2 px-3 rounded cursor-pointer"
+		class:selected={value}
+	>
+		<div class="checkbox w-4 h-4 bg-white flex items-center justify-center">
+			<svg class="check opacity-0 h-3 w-4" viewBox="-10 -10 20 20">
+				<line
+					x1="-7.5"
+					y1="0"
+					x2="-2.5"
+					y2="5"
+					stroke="white"
+					stroke-width="4"
+					stroke-linecap="round"
+				/>
+				<line
+					x1="-2.5"
+					y1="5"
+					x2="7.5"
+					y2="-7.5"
+					stroke="white"
+					stroke-width="4"
+					stroke-linecap="round"
+				/>
+			</svg>
+		</div>
+	</button>
+</div>
+
+<style lang="postcss">
+	.selected .check {
+		@apply opacity-100;
+	}
+	.input-checkbox[theme="default"] {
+		.checkbox-item {
+			@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
+		}
+		.checkbox {
+			@apply bg-gray-100 dark:bg-gray-400 transition;
+		}
+		.checkbox-item.selected {
+			@apply bg-amber-500 dark:bg-red-600 text-white;
+		}
+		.selected .checkbox {
+			@apply bg-amber-600 dark:bg-red-700;
+		}
+	}
+</style>
diff --git a/ui/packages/form/src/CheckboxGroup.svelte b/ui/packages/form/src/CheckboxGroup.svelte
new file mode 100644
index 0000000000..439eb803d4
--- /dev/null
+++ b/ui/packages/form/src/CheckboxGroup.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	export let value: Array<string>;
+	export let choices: Array<string>;
+
+	export let theme: string = "default";
+
+	const dispatch = createEventDispatcher<{ change: Array<string> }>();
+
+	const toggleChoice = (choice: string) => {
+		if (value.includes(choice)) {
+			value.splice(value.indexOf(choice), 1);
+		} else {
+			value.push(choice);
+		}
+		dispatch("change", value);
+		value = value;
+	};
+</script>
+
+<div class="input-checkbox-group flex flex-wrap gap-2" {theme}>
+	{#each choices as choice, i}
+		<button
+			class="checkbox-item py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-2"
+			class:selected={value.includes(choice)}
+			on:click={() => toggleChoice(choice)}
+		>
+			<div class="checkbox w-4 h-4 bg-white flex items-center justify-center">
+				<svg class="check opacity-0 h-3 w-4" viewBox="-10 -10 20 20">
+					<line
+						x1="-7.5"
+						y1="0"
+						x2="-2.5"
+						y2="5"
+						stroke="white"
+						stroke-width="4"
+						stroke-linecap="round"
+					/>
+					<line
+						x1="-2.5"
+						y1="5"
+						x2="7.5"
+						y2="-7.5"
+						stroke="white"
+						stroke-width="4"
+						stroke-linecap="round"
+					/>
+				</svg>
+			</div>
+			{choice}
+		</button>
+	{/each}
+</div>
+
+<style lang="postcss">
+	.selected .check {
+		@apply opacity-100;
+	}
+	.input-checkbox-group[theme="default"] {
+		.checkbox-item {
+			@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
+		}
+		.checkbox {
+			@apply bg-gray-100 dark:bg-gray-400 transition;
+		}
+		.checkbox-item.selected {
+			@apply bg-amber-500 dark:bg-red-600 text-white;
+		}
+		.selected .checkbox {
+			@apply bg-amber-600 dark:bg-red-700;
+		}
+	}
+</style>
diff --git a/ui/packages/form/src/Dropdown.svelte b/ui/packages/form/src/Dropdown.svelte
new file mode 100644
index 0000000000..26fd994c84
--- /dev/null
+++ b/ui/packages/form/src/Dropdown.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	export let label: string;
+	export let value: string | undefined = undefined;
+	export let theme: string = "default";
+	export let choices: Array<string>;
+
+	const dispatch = createEventDispatcher<{ change: string }>();
+
+	function handle_change(choice: string) {
+		dispatch("change", choice);
+		value = choice;
+	}
+</script>
+
+<div class="input-dropdown group inline-block relative" {theme}>
+	<button
+		class="selector py-2 px-3 font-semibold rounded inline-flex items-center"
+	>
+		{label}
+		<svg class="caret ml-2 fill-current h-4 w-4" viewBox="0 0 20 20">
+			<path
+				d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
+			/>
+		</svg>
+	</button>
+	<div
+		class="dropdown-menu-holder absolute hidden group-hover:block pt-1 z-10 bg-none"
+	>
+		<ul class="dropdown-menu max-h-80 overflow-y-auto">
+			{#each choices as choice, i}
+				<li
+					class="dropdown-item first:rounded-t transition last:rounded-b py-2 px-3 block whitespace-nowrap cursor-pointer"
+					on:click={() => handle_change(choice)}
+				>
+					{choice}
+				</li>
+			{/each}
+		</ul>
+	</div>
+</div>
+
+<style lang="postcss" global>
+	.input-dropdown[theme="default"] {
+		.selector {
+			@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
+		}
+		.dropdown-menu {
+			@apply shadow;
+		}
+		.dropdown-item {
+			@apply bg-white dark:bg-gray-800 hover:bg-amber-500 dark:hover:bg-red-600 hover:text-gray-50 hover:font-semibold;
+		}
+	}
+</style>
diff --git a/ui/packages/form/src/Number.svelte b/ui/packages/form/src/Number.svelte
new file mode 100644
index 0000000000..57d265d975
--- /dev/null
+++ b/ui/packages/form/src/Number.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { debounce } from "./utils";
+
+	export let value: number = 0;
+	export let theme: string = "default";
+
+	const dispatch = createEventDispatcher<{ change: number }>();
+
+	function handle_change(n: number) {
+		dispatch("change", n);
+	}
+
+	const debounced_handle_change = debounce(handle_change, 500);
+
+	$: debounced_handle_change(value);
+</script>
+
+<input
+	type="number"
+	class="input-number w-full rounded box-border p-2 focus:outline-none appearance-none"
+	bind:value
+	{theme}
+/>
+
+<style lang="postcss" global>
+	input::-webkit-outer-spin-button,
+	input::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+	input[type="number"] {
+		-moz-appearance: textfield;
+	}
+	.input-number[theme="default"] {
+		@apply shadow transition hover:shadow-md dark:bg-gray-800;
+	}
+</style>
diff --git a/ui/packages/form/src/Radio.svelte b/ui/packages/form/src/Radio.svelte
new file mode 100644
index 0000000000..878d2d5ef6
--- /dev/null
+++ b/ui/packages/form/src/Radio.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+	export let value: string;
+	export let theme: string = "default";
+	export let choices: Array<string>;
+
+	const dispatch = createEventDispatcher();
+
+	function handle_change(choice: string) {
+		dispatch("change", choice);
+		value = choice;
+	}
+</script>
+
+<div class="input-radio flex flex-wrap gap-2" {theme}>
+	{#each choices as choice}
+		<button
+			class="radio-item py-2 px-3 font-semibold rounded cursor-pointer flex items-center gap-2"
+			class:selected={value === choice}
+			on:click={() => handle_change(choice)}
+		>
+			<div class="radio-circle w-4 h-4 rounded-full box-border" />
+			{choice}
+		</button>
+	{/each}
+</div>
+
+<style lang="postcss">
+	.input-radio[theme="default"] {
+		.radio-item {
+			@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
+		}
+		.radio-circle {
+			@apply bg-gray-50 dark:bg-gray-400 border-4 border-gray-200 dark:border-gray-600;
+		}
+		.radio-item.selected {
+			@apply bg-amber-500 dark:bg-red-600 text-white shadow;
+		}
+		.radio-circle {
+			@apply w-4 h-4 bg-white transition rounded-full box-border;
+		}
+		.selected .radio-circle {
+			@apply border-amber-600 dark:border-red-700;
+		}
+	}
+</style>
diff --git a/ui/packages/form/src/Textbox.svelte b/ui/packages/form/src/Textbox.svelte
new file mode 100644
index 0000000000..7c0b21b0c8
--- /dev/null
+++ b/ui/packages/form/src/Textbox.svelte
@@ -0,0 +1,50 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { debounce } from "./utils";
+
+	export let value: string = "";
+	export let theme: string = "default";
+	export let lines: number = 1;
+	export let placeholder: string = "";
+
+	const dispatch = createEventDispatcher<{ change: string }>();
+
+	type CustomInputEvent =
+		| (Event & {
+				target: EventTarget & HTMLTextAreaElement;
+		  })
+		| (Event & {
+				target: EventTarget & HTMLInputElement;
+		  });
+
+	function handle_change(event: CustomInputEvent) {
+		dispatch("change", event?.target?.value);
+	}
+
+	const debounced_handle_change = debounce(handle_change, 500);
+</script>
+
+{#if lines > 1}
+	<textarea
+		class="input-text w-full rounded box-border p-2 focus:outline-none appearance-none"
+		{value}
+		{placeholder}
+		on:input={debounced_handle_change}
+		{theme}
+	/>
+{:else}
+	<input
+		type="text"
+		class="input-text w-full rounded box-border p-2 focus:outline-none appearance-none"
+		{value}
+		{placeholder}
+		on:input={debounced_handle_change}
+		{theme}
+	/>
+{/if}
+
+<style lang="postcss" global>
+	.input-text[theme="default"] {
+		@apply shadow transition hover:shadow-md dark:bg-gray-800;
+	}
+</style>
diff --git a/ui/packages/form/src/index.ts b/ui/packages/form/src/index.ts
new file mode 100644
index 0000000000..090be14041
--- /dev/null
+++ b/ui/packages/form/src/index.ts
@@ -0,0 +1,6 @@
+export { default as Checkbox } from "./Checkbox.svelte";
+export { default as CheckboxGroup } from "./CheckboxGroup.svelte";
+export { default as Dropdown } from "./Dropdown.svelte";
+export { default as Number } from "./Number.svelte";
+export { default as Radio } from "./Radio.svelte";
+export { default as TextBox } from "./Textbox.svelte";
diff --git a/ui/packages/form/src/utils.ts b/ui/packages/form/src/utils.ts
new file mode 100644
index 0000000000..eb35c24729
--- /dev/null
+++ b/ui/packages/form/src/utils.ts
@@ -0,0 +1,9 @@
+export const debounce = (callback: Function, wait = 250) => {
+	let timeout: NodeJS.Timeout | null = null;
+	return (...args: Array<unknown>) => {
+		const next = () => callback(...args);
+		if (timeout) clearTimeout(timeout);
+
+		timeout = setTimeout(next, wait);
+	};
+};
diff --git a/ui/packages/highlighted-text/README.md b/ui/packages/highlighted-text/README.md
new file mode 100644
index 0000000000..e5b427fdb3
--- /dev/null
+++ b/ui/packages/highlighted-text/README.md
@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```
diff --git a/ui/packages/highlighted-text/package.json b/ui/packages/highlighted-text/package.json
new file mode 100644
index 0000000000..f81b25ade7
--- /dev/null
+++ b/ui/packages/highlighted-text/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "@gradio/highlighted-text",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true
+}
diff --git a/ui/packages/highlighted-text/src/HighlightedText.svelte b/ui/packages/highlighted-text/src/HighlightedText.svelte
new file mode 100644
index 0000000000..984ecb02e3
--- /dev/null
+++ b/ui/packages/highlighted-text/src/HighlightedText.svelte
@@ -0,0 +1,130 @@
+<script lang="ts">
+	import { getNextColor } from "./utils";
+
+	export let value: Array<[string, string | number]>;
+	export let theme: string = "default";
+	export let show_legend: boolean = false;
+	export let color_map: Record<string, string> = {};
+
+	let ctx: CanvasRenderingContext2D;
+
+	function name_to_rgba(name: string) {
+		if (!ctx) {
+			var canvas = document.createElement("canvas");
+			ctx = canvas.getContext("2d")!;
+		}
+		ctx.fillStyle = name;
+		ctx.fillRect(0, 0, 1, 1);
+		const [r, g, b, a] = ctx.getImageData(0, 0, 1, 1).data;
+		ctx.clearRect(0, 0, 1, 1);
+		return `rgba(${r}, ${g}, ${b}, ${255 / a})`;
+	}
+
+	let mode: "categories" | "scores";
+
+	if (color_map === null) {
+		color_map = {};
+	}
+	if (value.length > 0) {
+		for (let [_, label] of value) {
+			if (label !== null) {
+				if (typeof label === "string") {
+					mode = "categories";
+					if (!(label in color_map)) {
+						let color = getNextColor(Object.keys(color_map).length);
+						color_map[label] = color;
+					}
+				} else {
+					mode = "scores";
+				}
+			}
+		}
+	}
+
+	function correct_color_map() {
+		for (const col in color_map) {
+			const _c = color_map[col].trim();
+			if (_c.startsWith("rgba")) {
+				color_map[col] = color_map[col];
+			} else {
+				color_map[col] = name_to_rgba(color_map[col]);
+			}
+		}
+	}
+</script>
+
+<div class="output-highlightedtext" {theme}>
+	{#if mode === "categories"}
+		{#if show_legend}
+			<div class="category-legend flex flex-wrap gap-1 mb-2">
+				{#each Object.entries(color_map) as [category, color], i}
+					<div
+						class="category-label px-2 py-1 rounded text-white font-semibold"
+						style={"background-color:" + color}
+					>
+						{category}
+					</div>
+				{/each}
+			</div>
+		{/if}
+		<div
+			class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-word"
+		>
+			{#each value as [text, category], i}
+				<span
+					class="textspan p-1 mr-0.5 bg-opacity-20 dark:bg-opacity-80 rounded-sm"
+					style={category === null
+						? ""
+						: `color: ${color_map[category]}; background-color: ${color_map[
+								category
+						  ].replace("1)", "var(--tw-bg-opacity))")}`}
+				>
+					<span class="text dark:text-white">{text}</span>
+					{#if !show_legend && category !== null}
+						<span
+							class="inline-category text-xs text-white ml-0.5 px-0.5 rounded-sm"
+							style={category === null
+								? ""
+								: `background-color: ${color_map[category]}`}
+						>
+							{category}
+						</span>
+					{/if}
+				</span>
+			{/each}
+		</div>
+	{:else}
+		{#if show_legend}
+			<div
+				class="color_legend flex px-2 py-1 justify-between rounded mb-3 font-semibold"
+				style="background: -webkit-linear-gradient(to right,#8d83d6,(255,255,255,0),#eb4d4b); background: linear-gradient(to right,#8d83d6,rgba(255,255,255,0),#eb4d4b);"
+			>
+				<span>-1</span>
+				<span>0</span>
+				<span>+1</span>
+			</div>
+		{/if}
+		<div
+			class="textfield p-2 bg-white dark:bg-gray-800 rounded box-border max-w-full leading-8 break-word"
+		>
+			{#each value as [text, score], i}
+				<span
+					class="textspan p-1 mr-0.5 bg-opacity-20 dark:bg-opacity-80 rounded-sm"
+					style={"background-color: rgba(" +
+						(score < 0 ? "141, 131, 214," + -score : "235, 77, 75," + score) +
+						")"}
+				>
+					<span class="text dark:text-white">{text}</span>
+				</span>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style lang="postcss">
+	.output-highlightedtext[theme="default"] {
+		.textfield {
+			@apply shadow;
+		}
+	}
+</style>
diff --git a/ui/packages/highlighted-text/src/index.ts b/ui/packages/highlighted-text/src/index.ts
new file mode 100644
index 0000000000..d8dee9ade8
--- /dev/null
+++ b/ui/packages/highlighted-text/src/index.ts
@@ -0,0 +1 @@
+export { default as HighlightedText } from "./HighlightedText.svelte";
diff --git a/ui/packages/highlighted-text/src/utils.ts b/ui/packages/highlighted-text/src/utils.ts
new file mode 100644
index 0000000000..36d8d64a8b
--- /dev/null
+++ b/ui/packages/highlighted-text/src/utils.ts
@@ -0,0 +1,36 @@
+export function randInt(min: number, max: number): number {
+	return Math.floor(Math.random() * (max - min) + min);
+}
+
+export const getNextColor = (index: number, alpha: number = 1): string => {
+	let default_colors = [
+		[255, 99, 132],
+		[54, 162, 235],
+		[240, 176, 26],
+		[153, 102, 255],
+		[75, 192, 192],
+		[255, 159, 64],
+		[194, 88, 74],
+		[44, 102, 219],
+		[44, 163, 23],
+		[191, 46, 217],
+		[160, 162, 162],
+		[163, 151, 27]
+	];
+	if (index < default_colors.length) {
+		var color_set = default_colors[index];
+	} else {
+		var color_set = [randInt(64, 196), randInt(64, 196), randInt(64, 196)];
+	}
+	return (
+		"rgba(" +
+		color_set[0] +
+		", " +
+		color_set[1] +
+		", " +
+		color_set[2] +
+		", " +
+		alpha +
+		")"
+	);
+};
diff --git a/ui/packages/html/README.md b/ui/packages/html/README.md
new file mode 100644
index 0000000000..e5b427fdb3
--- /dev/null
+++ b/ui/packages/html/README.md
@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```
diff --git a/ui/packages/html/package.json b/ui/packages/html/package.json
new file mode 100644
index 0000000000..1b921b3f08
--- /dev/null
+++ b/ui/packages/html/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "@gradio/html",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true
+}
diff --git a/ui/packages/html/src/HTML.svelte b/ui/packages/html/src/HTML.svelte
new file mode 100644
index 0000000000..7b28d258c4
--- /dev/null
+++ b/ui/packages/html/src/HTML.svelte
@@ -0,0 +1,8 @@
+<script lang="ts">
+	export let value: string;
+	export let theme: string = "default";
+</script>
+
+<div class="output-html" {theme}>
+	{@html value}
+</div>
diff --git a/ui/packages/html/src/index.ts b/ui/packages/html/src/index.ts
new file mode 100644
index 0000000000..0bb382fa27
--- /dev/null
+++ b/ui/packages/html/src/index.ts
@@ -0,0 +1 @@
+export { default as HTML } from "./HTML.svelte";
diff --git a/ui/packages/image/README.md b/ui/packages/image/README.md
new file mode 100644
index 0000000000..e5b427fdb3
--- /dev/null
+++ b/ui/packages/image/README.md
@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```
diff --git a/ui/packages/image/package.json b/ui/packages/image/package.json
new file mode 100644
index 0000000000..f925692a65
--- /dev/null
+++ b/ui/packages/image/package.json
@@ -0,0 +1,17 @@
+{
+	"name": "@gradio/image",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true,
+	"dependencies": {
+		"@gradio/upload": "workspace:^0.0.1",
+		"cropperjs": "^1.5.12",
+		"lazy-brush": "^1.0.1",
+		"resize-observer-polyfill": "^1.5.1",
+		"tui-image-editor": "^3.15.2"
+	}
+}
diff --git a/ui/packages/image/src/Cropper.svelte b/ui/packages/image/src/Cropper.svelte
new file mode 100644
index 0000000000..8ad9c7cfec
--- /dev/null
+++ b/ui/packages/image/src/Cropper.svelte
@@ -0,0 +1,27 @@
+<script lang="ts">
+	import Cropper from "cropperjs";
+	import { onMount, createEventDispatcher } from "svelte";
+
+	export let image: string;
+	let el: HTMLImageElement;
+
+	const dispatch = createEventDispatcher();
+
+	onMount(() => {
+		const cropper = new Cropper(el, {
+			autoCropArea: 1,
+			cropend() {
+				const image_data = cropper.getCroppedCanvas().toDataURL();
+				dispatch("crop", image_data);
+			}
+		});
+
+		dispatch("crop", image);
+
+		return () => {
+			cropper.destroy();
+		};
+	});
+</script>
+
+<img src={image} bind:this={el} alt="" />
diff --git a/ui/packages/image/src/Image.svelte b/ui/packages/image/src/Image.svelte
new file mode 100644
index 0000000000..0391d86b6f
--- /dev/null
+++ b/ui/packages/image/src/Image.svelte
@@ -0,0 +1,103 @@
+<script lang="ts">
+	import Cropper from "./Cropper.svelte";
+	import Sketch from "./Sketch.svelte";
+	import Webcam from "./Webcam.svelte";
+	import ModifySketch from "./ModifySketch.svelte";
+	import ImageEditor from "./ImageEditor.svelte";
+
+	import { Upload, ModifyUpload } from "@gradio/upload";
+
+	export let value: null | string;
+
+	export let theme: string = "default";
+	export let source: "canvas" | "webcam" | "upload" = "upload";
+	export let tool: "editor" | "select" = "editor";
+
+	export let drop_text: string = "Drop an image file";
+	export let or_text: string = "or";
+	export let upload_text: string = "click to upload";
+
+	let mode: "edit" | "view" = "view";
+	let sketch: Sketch;
+
+	function handle_upload({ detail }: CustomEvent<string>) {
+		value = detail;
+	}
+
+	function handle_clear({ detail }: CustomEvent<null>) {
+		value = null;
+	}
+
+	function handle_save({ detail }: { detail: string }) {
+		value = detail;
+		mode = "view";
+	}
+
+	$: console.log(value, source);
+</script>
+
+<div class="input-image">
+	<div
+		class="image-preview w-full h-60 flex justify-center items-center dark:bg-gray-600 relative"
+		class:bg-gray-200={value}
+		class:h-60={source !== "webcam"}
+	>
+		{#if source === "canvas"}
+			<ModifySketch
+				on:undo={() => sketch.undo()}
+				on:clear={() => sketch.clear()}
+			/>
+			<Sketch {value} bind:this={sketch} on:change={handle_save} />
+		{:else if value === null}
+			{#if source === "upload"}
+				<Upload
+					filetype="image/x-png,image/gif,image/jpeg"
+					on:load={handle_upload}
+					include_file_metadata={false}
+					{theme}
+				>
+					{drop_text}
+					<br />- {or_text} -<br />
+					{upload_text}
+				</Upload>
+			{:else if source === "webcam"}
+				<Webcam on:capture={handle_save} />
+			{/if}
+		{:else if tool === "select"}
+			<Cropper image={value} on:crop={handle_save} />
+		{:else if tool === "editor"}
+			{#if mode === "edit"}
+				<ImageEditor
+					{value}
+					on:cancel={() => (mode = "view")}
+					on:save={handle_save}
+				/>
+			{/if}
+			<ModifyUpload
+				on:edit={() => (mode = "edit")}
+				on:clear={handle_clear}
+				editable
+				{theme}
+			/>
+
+			<img class="w-full h-full object-contain" src={value} alt="" />
+		{/if}
+	</div>
+</div>
+
+<style lang="postcss">
+	:global(.image_editor_buttons) {
+		width: 800px;
+		@apply flex justify-end gap-1;
+	}
+	:global(.image_editor_buttons button) {
+		@apply px-2 py-1 text-xl bg-black text-white font-semibold rounded-t;
+	}
+	:global(.tui-image-editor-header-buttons) {
+		@apply hidden;
+	}
+	:global(.tui-colorpicker-palette-button) {
+		width: 12px;
+		height: 12px;
+	}
+</style>
diff --git a/ui/packages/image/src/ImageEditor.svelte b/ui/packages/image/src/ImageEditor.svelte
new file mode 100644
index 0000000000..6f2521634f
--- /dev/null
+++ b/ui/packages/image/src/ImageEditor.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import ImageEditor from "tui-image-editor";
+
+	import { createEventDispatcher, onMount } from "svelte";
+
+	export let value: string;
+	let el: HTMLDivElement;
+	let editor: ImageEditor;
+
+	const dispatch = createEventDispatcher();
+
+	function create_editor() {
+		editor = new ImageEditor(el, {
+			usageStatistics: false,
+			includeUI: {
+				loadImage: {
+					path: value,
+					name: "Edit Image"
+				},
+				menuBarPosition: "left",
+				uiSize: {
+					width: "800px",
+					height: "600px"
+				}
+			},
+			cssMaxWidth: 700,
+			cssMaxHeight: 500,
+			selectionStyle: {
+				cornerSize: 20,
+				rotatingPointOffset: 70
+			}
+		});
+	}
+
+	onMount(create_editor);
+</script>
+
+<div
+	class="fixed w-screen h-screen top-0 left-0 bg-black bg-opacity-50 z-40 flex flex-col justify-center items-center"
+>
+	<div class="image_editor_buttons">
+		<button on:click={() => dispatch("save", editor.toDataURL())}>Save</button>
+		<button on:click={() => dispatch("cancel")}>Cancel</button>
+	</div>
+	<div bind:this={el} />
+</div>
diff --git a/ui/packages/image/src/ModifySketch.svelte b/ui/packages/image/src/ModifySketch.svelte
new file mode 100644
index 0000000000..31aa579785
--- /dev/null
+++ b/ui/packages/image/src/ModifySketch.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+
+	import undo_solid from "./undo-solid.svg";
+	import clear from "./clear.svg";
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<div class="z-50 top-0 right-0 justify-end m-1 flex gap-1 absolute">
+	<button
+		class="bg-opacity-30 hover:bg-opacity-100 transition p-1.5 bg-amber-500 dark:bg-red-600 rounded shadow w-8 h-8"
+		on:click={() => dispatch("undo")}
+	>
+		<img alt="undo sketch" src={undo_solid} />
+	</button>
+	<button
+		class="clear bg-opacity-30 hover:bg-opacity-100 transition p-1 bg-gray-50 dark:bg-gray-500 rounded shadow w-8 h-8"
+		on:click={() => dispatch("clear")}
+	>
+		<img alt="clear sketch" src={clear} />
+	</button>
+</div>
diff --git a/ui/packages/image/src/Sketch.svelte b/ui/packages/image/src/Sketch.svelte
new file mode 100644
index 0000000000..f880481b9a
--- /dev/null
+++ b/ui/packages/image/src/Sketch.svelte
@@ -0,0 +1,365 @@
+<script>
+	import { onMount, onDestroy, createEventDispatcher } from "svelte";
+	import { LazyBrush } from "lazy-brush/src";
+	import ResizeObserver from "resize-observer-polyfill";
+
+	const dispatch = createEventDispatcher();
+
+	export let value;
+
+	let mounted;
+
+	let brush_radius = 50;
+	let brush_color = "#444";
+	let catenary_color = "#aaa";
+	let background_color = "#FFF";
+
+	let canvas_width = 400;
+	let canvas_height = 400;
+
+	$: mounted && !value && clear();
+
+	function mid_point(p1, p2) {
+		return {
+			x: p1.x + (p2.x - p1.x) / 2,
+			y: p1.y + (p2.y - p1.y) / 2
+		};
+	}
+
+	const canvas_types = [
+		{
+			name: "interface",
+			zIndex: 15
+		},
+		{
+			name: "drawing",
+			zIndex: 11
+		},
+		{
+			name: "temp",
+			zIndex: 12
+		}
+	];
+
+	let canvas = {};
+	let ctx = {};
+	let points = [];
+	let lines = [];
+	let mouse_has_moved = true;
+	let values_changed = true;
+	let is_drawing = false;
+	let is_pressing = false;
+	let lazy = null;
+	let chain_length = null;
+	let canvas_container = null;
+	let canvas_observer = null;
+	let save_data = "";
+
+	onMount(() => {
+		Object.keys(canvas).forEach((key) => {
+			ctx[key] = canvas[key].getContext("2d");
+		});
+		lazy = new LazyBrush({
+			radius: brush_radius / 1.5,
+			enabled: true,
+			initialPoint: {
+				x: window.innerWidth / 2,
+				y: window.innerHeight / 2
+			}
+		});
+		chain_length = brush_radius;
+		canvas_observer = new ResizeObserver((entries, observer) =>
+			handle_canvas_resize(entries, observer)
+		);
+		canvas_observer.observe(canvas_container);
+		loop();
+		mounted = true;
+		window.setTimeout(() => {
+			const initX = window.innerWidth / 2;
+			const initY = window.innerHeight / 2;
+			lazy.update({ x: initX - chain_length / 4, y: initY }, { both: true });
+			lazy.update({ x: initX + chain_length / 4, y: initY }, { both: false });
+			mouse_has_moved = true;
+			values_changed = true;
+			clear();
+
+			if (save_data) {
+				load_save_data(save_data);
+			}
+		}, 100);
+	});
+
+	onDestroy(() => {
+		mounted = false;
+		canvas_observer.unobserve(canvas_container);
+	});
+
+	export function undo() {
+		const _lines = lines.slice(0, -1);
+		clear();
+		draw_lines({ lines: _lines });
+		trigger_on_change();
+	}
+
+	let get_save_data = () => {
+		return JSON.stringify({
+			lines: lines,
+			width: canvas_width,
+			height: canvas_height
+		});
+	};
+
+	let load_save_data = (save_data) => {
+		if (typeof save_data !== "string") {
+			throw new Error("save_data needs to be of type string!");
+		}
+		const { lines, width, height } = JSON.parse(save_data);
+		if (!lines || typeof lines.push !== "function") {
+			throw new Error("save_data.lines needs to be an array!");
+		}
+		clear();
+		if (width === canvas_width && height === canvas_height) {
+			draw_lines({
+				lines
+			});
+		} else {
+			const scaleX = canvas_width / width;
+			const scaleY = canvas_height / height;
+			draw_lines({
+				lines: lines.map((line) => ({
+					...line,
+					points: line.points.map((p) => ({
+						x: p.x * scaleX,
+						y: p.y * scaleY
+					})),
+					brush_radius: line.brush_radius
+				}))
+			});
+		}
+	};
+
+	let draw_lines = ({ lines }) => {
+		lines.forEach((line) => {
+			const { points: _points, brush_color, brush_radius } = line;
+
+			draw_points({
+				points: _points,
+				brush_color,
+				brush_radius
+			});
+			points = _points;
+			saveLine({ brush_color, brush_radius });
+			return;
+		});
+	};
+
+	let handle_draw_start = (e) => {
+		e.preventDefault();
+		is_pressing = true;
+		const { x, y } = get_pointer_pos(e);
+		if (e.touches && e.touches.length > 0) {
+			lazy.update({ x, y }, { both: true });
+		}
+		handle_pointer_move(x, y);
+	};
+
+	let handle_draw_move = (e) => {
+		e.preventDefault();
+		const { x, y } = get_pointer_pos(e);
+		handle_pointer_move(x, y);
+	};
+
+	let handle_draw_end = (e) => {
+		e.preventDefault();
+		handle_draw_move(e);
+		is_drawing = false;
+		is_pressing = false;
+		saveLine();
+	};
+
+	let handle_canvas_resize = (entries) => {
+		const save_data = get_save_data();
+		for (const entry of entries) {
+			const { width, height } = entry.contentRect;
+			set_canvas_size(canvas.interface, width, height);
+			set_canvas_size(canvas.drawing, width, height);
+			set_canvas_size(canvas.temp, width, height);
+			loop({ once: true });
+		}
+		load_save_data(save_data, true);
+	};
+
+	let set_canvas_size = (canvas, width, height) => {
+		canvas.width = width * 3;
+		canvas.height = height * 3;
+		canvas.style.width = width;
+		canvas.style.height = height;
+	};
+
+	let get_pointer_pos = (e) => {
+		const rect = canvas.interface.getBoundingClientRect();
+
+		let clientX = e.clientX;
+		let clientY = e.clientY;
+		if (e.changedTouches && e.changedTouches.length > 0) {
+			clientX = e.changedTouches[0].clientX;
+			clientY = e.changedTouches[0].clientY;
+		}
+		return {
+			x: clientX - rect.left,
+			y: clientY - rect.top
+		};
+	};
+
+	let handle_pointer_move = (x, y) => {
+		lazy.update({ x: x * 3, y: y * 3 });
+		const is_disabled = !lazy.isEnabled();
+		if ((is_pressing && !is_drawing) || (is_disabled && is_pressing)) {
+			is_drawing = true;
+			points.push(lazy.brush.toObject());
+		}
+		if (is_drawing) {
+			points.push(lazy.brush.toObject());
+
+			draw_points({
+				points: points,
+				brush_color,
+				brush_radius
+			});
+		}
+		mouse_has_moved = true;
+	};
+
+	let draw_points = ({ points, brush_color, brush_radius }) => {
+		ctx.temp.lineJoin = "round";
+		ctx.temp.lineCap = "round";
+		ctx.temp.strokeStyle = brush_color;
+		ctx.temp.clearRect(0, 0, ctx.temp.canvas.width, ctx.temp.canvas.height);
+		ctx.temp.lineWidth = brush_radius;
+		let p1 = points[0];
+		let p2 = points[1];
+		ctx.temp.moveTo(p2.x, p2.y);
+		ctx.temp.beginPath();
+		for (var i = 1, len = points.length; i < len; i++) {
+			var midPoint = mid_point(p1, p2);
+			ctx.temp.quadraticCurveTo(p1.x, p1.y, midPoint.x, midPoint.y);
+			p1 = points[i];
+			p2 = points[i + 1];
+		}
+
+		ctx.temp.lineTo(p1.x, p1.y);
+		ctx.temp.stroke();
+	};
+
+	let saveLine = () => {
+		if (points.length < 2) return;
+
+		lines.push({
+			points: [...points],
+			brush_color: brush_color,
+			brush_radius
+		});
+		points.length = 0;
+		const width = canvas.temp.width;
+		const height = canvas.temp.height;
+		ctx.drawing.drawImage(canvas.temp, 0, 0, width, height);
+
+		ctx.temp.clearRect(0, 0, width, height);
+		trigger_on_change();
+	};
+
+	let trigger_on_change = () => {
+		dispatch("change", get_image_data());
+	};
+
+	export function clear() {
+		lines = [];
+		values_changed = true;
+		ctx.drawing.clearRect(0, 0, canvas.drawing.width, canvas.drawing.height);
+		ctx.temp.clearRect(0, 0, canvas.temp.width, canvas.temp.height);
+		ctx.drawing.fillStyle = "#FFFFFF";
+		ctx.drawing.fillRect(0, 0, canvas.drawing.width, canvas.drawing.height);
+	}
+
+	let loop = ({ once = false } = {}) => {
+		if (mouse_has_moved || values_changed) {
+			const pointer = lazy.getPointerCoordinates();
+			const brush = lazy.getBrushCoordinates();
+			draw_interface(ctx.interface, pointer, brush);
+			mouse_has_moved = false;
+			values_changed = false;
+		}
+		if (!once) {
+			window.requestAnimationFrame(() => {
+				loop();
+			});
+		}
+	};
+
+	let draw_interface = (ctx, pointer, brush) => {
+		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+		// brush preview
+		ctx.beginPath();
+		ctx.fillStyle = brush_color;
+		ctx.arc(brush.x, brush.y, brush_radius / 2, 0, Math.PI * 2, true);
+		ctx.fill();
+
+		// mouse point dangler
+		ctx.beginPath();
+		ctx.fillStyle = catenary_color;
+		ctx.arc(pointer.x, pointer.y, 4, 0, Math.PI * 2, true);
+		ctx.fill();
+
+		//  catenary
+		if (lazy.isEnabled()) {
+			ctx.beginPath();
+			ctx.lineWidth = 2;
+			ctx.lineCap = "round";
+			ctx.setLineDash([2, 4]);
+			ctx.strokeStyle = catenary_color;
+			ctx.stroke();
+		}
+
+		// tiny brush point dot
+		ctx.beginPath();
+		ctx.fillStyle = catenary_color;
+		ctx.arc(brush.x, brush.y, 2, 0, Math.PI * 2, true);
+		ctx.fill();
+	};
+
+	export function get_image_data() {
+		return canvas.drawing.toDataURL("image/png");
+	}
+</script>
+
+<div
+	class="container"
+	style="height:100%; width:100%; background-color:{background_color}"
+	bind:this={canvas_container}
+	bind:offsetWidth={canvas_width}
+	bind:offsetHeight={canvas_height}
+>
+	{#each canvas_types as { name, zIndex }}
+		<canvas
+			key={name}
+			style="display:block;position:absolute; z-index:{zIndex}; width: {canvas_width}px; height: {canvas_height}px"
+			bind:this={canvas[name]}
+			on:mousedown={name === "interface" ? handle_draw_start : undefined}
+			on:mousemove={name === "interface" ? handle_draw_move : undefined}
+			on:mouseup={name === "interface" ? handle_draw_end : undefined}
+			on:mouseout={name === "interface" ? handle_draw_end : undefined}
+			on:touchstart={name === "interface" ? handle_draw_start : undefined}
+			on:touchmove={name === "interface" ? handle_draw_move : undefined}
+			on:touchend={name === "interface" ? handle_draw_end : undefined}
+			on:touchcancel={name === "interface" ? handle_draw_end : undefined}
+		/>
+	{/each}
+</div>
+
+<style>
+	.container {
+		display: block;
+		touch-action: none;
+	}
+</style>
diff --git a/ui/packages/image/src/Webcam.svelte b/ui/packages/image/src/Webcam.svelte
new file mode 100644
index 0000000000..b977799b89
--- /dev/null
+++ b/ui/packages/image/src/Webcam.svelte
@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { createEventDispatcher, onMount } from "svelte";
+	import camera from "./camera.svg";
+
+	let video_source: HTMLVideoElement;
+	let canvas: HTMLCanvasElement;
+
+	const dispatch = createEventDispatcher();
+
+	onMount(() => (canvas = document.createElement("canvas")));
+
+	async function access_webcam() {
+		try {
+			const stream = await navigator.mediaDevices.getUserMedia({
+				video: true
+			});
+			video_source.srcObject = stream;
+			video_source.play();
+		} catch (error) {
+			console.error(error);
+		}
+	}
+
+	function clearphoto() {
+		var context = canvas.getContext("2d")!;
+		context.fillStyle = "#AAA";
+		context.fillRect(0, 0, canvas.width, canvas.height);
+	}
+
+	function takepicture() {
+		var context = canvas.getContext("2d")!;
+
+		if (video_source.videoWidth && video_source.videoHeight) {
+			canvas.width = video_source.videoWidth;
+			canvas.height = video_source.videoHeight;
+			context.drawImage(
+				video_source,
+				0,
+				0,
+				video_source.videoWidth,
+				video_source.videoHeight
+			);
+
+			var data = canvas.toDataURL("image/png");
+			dispatch("capture", data);
+		}
+	}
+
+	access_webcam();
+</script>
+
+<div class="h-full w-full relative">
+	<!-- svelte-ignore a11y-media-has-caption -->
+	<video bind:this={video_source} class=" h-full w-full" />
+	<button
+		on:click={takepicture}
+		style="background-color: #333;"
+		class="rounded-full w-10 h-10 flex justify-center items-center absolute inset-x-0 bottom-2 m-auto drop-shadow-lg"
+	>
+		<img
+			style="color: white"
+			src={camera}
+			alt="take a screenshot"
+			class="w-2/4 h-2/4"
+		/>
+	</button>
+</div>
+
+<style lang="postcss" global>
+	video {
+		-webkit-transform: scaleX(-1);
+		transform: scaleX(-1);
+	}
+</style>
diff --git a/ui/packages/image/src/camera.svg b/ui/packages/image/src/camera.svg
new file mode 100644
index 0000000000..b46daebb74
--- /dev/null
+++ b/ui/packages/image/src/camera.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
\ No newline at end of file
diff --git a/ui/packages/image/src/clear.svg b/ui/packages/image/src/clear.svg
new file mode 100644
index 0000000000..bea0330748
--- /dev/null
+++ b/ui/packages/image/src/clear.svg
@@ -0,0 +1,67 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="5.9403949mm"
+   height="5.9403949mm"
+   viewBox="0 0 5.9403949 5.9403949"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1 (c68e22c387, 2021-05-23)"
+   sodipodi:docname="clear.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="10.925474"
+     inkscape:cx="4.1188143"
+     inkscape:cy="15.559965"
+     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(-115.10942,-119.22353)">
+    <g
+       id="g239"
+       transform="matrix(0.05138986,0.05138986,-0.05138986,0.05138986,117.0869,112.75317)">
+      <rect
+         style="fill:#000000;stroke-width:0.295287"
+         id="rect31"
+         width="20"
+         height="80"
+         x="-111.51107"
+         y="42.193726"
+         rx="2.9434128"
+         ry="2.6448057"
+         transform="scale(-1,1)" />
+      <rect
+         style="fill:#000000;stroke-width:0.295287"
+         id="rect31-3"
+         width="20"
+         height="80"
+         x="-92.193726"
+         y="-141.51106"
+         rx="2.9434128"
+         ry="2.6448057"
+         transform="matrix(0,-1,-1,0,0,0)" />
+    </g>
+  </g>
+</svg>
diff --git a/ui/packages/image/src/index.ts b/ui/packages/image/src/index.ts
new file mode 100644
index 0000000000..a8829ff3b1
--- /dev/null
+++ b/ui/packages/image/src/index.ts
@@ -0,0 +1 @@
+export { default as Image } from "./Image.svelte";
diff --git a/ui/packages/image/src/undo-solid.svg b/ui/packages/image/src/undo-solid.svg
new file mode 100644
index 0000000000..bbbc9670bb
--- /dev/null
+++ b/ui/packages/image/src/undo-solid.svg
@@ -0,0 +1 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="undo" class="svg-inline--fa fa-undo fa-w-16" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor" d="M212.333 224.333H12c-6.627 0-12-5.373-12-12V12C0 5.373 5.373 0 12 0h48c6.627 0 12 5.373 12 12v78.112C117.773 39.279 184.26 7.47 258.175 8.007c136.906.994 246.448 111.623 246.157 248.532C504.041 393.258 393.12 504 256.333 504c-64.089 0-122.496-24.313-166.51-64.215-5.099-4.622-5.334-12.554-.467-17.42l33.967-33.967c4.474-4.474 11.662-4.717 16.401-.525C170.76 415.336 211.58 432 256.333 432c97.268 0 176-78.716 176-176 0-97.267-78.716-176-176-176-58.496 0-110.28 28.476-142.274 72.333h98.274c6.627 0 12 5.373 12 12v48c0 6.627-5.373 12-12 12z"></path></svg>
\ No newline at end of file
diff --git a/ui/packages/json/README.md b/ui/packages/json/README.md
new file mode 100644
index 0000000000..e5b427fdb3
--- /dev/null
+++ b/ui/packages/json/README.md
@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```
diff --git a/ui/packages/json/package.json b/ui/packages/json/package.json
new file mode 100644
index 0000000000..8416ee643d
--- /dev/null
+++ b/ui/packages/json/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "@gradio/json",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true
+}
diff --git a/ui/packages/json/src/JSON.svelte b/ui/packages/json/src/JSON.svelte
new file mode 100644
index 0000000000..5bdb5fd930
--- /dev/null
+++ b/ui/packages/json/src/JSON.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+	import JSONNode from "./JSONNode.svelte";
+
+	export let value: any;
+	export let theme: string = "default";
+</script>
+
+<div class="output-json font-mono leading-relaxed" {theme}>
+	<JSONNode {value} depth={0} {theme} />
+</div>
+
+<style lang="postcss" global>
+	.output-text[theme="default"] {
+		@apply shadow transition hover:shadow-md dark:bg-gray-800;
+	}
+</style>
diff --git a/ui/packages/json/src/JSONNode.svelte b/ui/packages/json/src/JSONNode.svelte
new file mode 100644
index 0000000000..273138db73
--- /dev/null
+++ b/ui/packages/json/src/JSONNode.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+	export let value: any;
+	export let theme: string = "default";
+	export let depth: number;
+	export let collapsed = depth > 4;
+</script>
+
+<div class="json-node inline" {theme}>
+	{#if value instanceof Array}
+		{#if collapsed}
+			<button
+				on:click={() => {
+					collapsed = false;
+				}}
+			>
+				[+{value.length} children]
+			</button>
+		{:else}
+			[
+			<div class="json-children pl-4">
+				{#each value as node, i}
+					<div class="json-item">
+						{i}: <svelte:self value={node} depth={depth + 1} {theme} />
+						{#if i !== value.length - 1}
+							,
+						{/if}
+					</div>
+				{/each}
+			</div>
+			]
+		{/if}
+	{:else if value instanceof Object}
+		{#if collapsed}
+			<button
+				on:click={() => {
+					collapsed = false;
+				}}
+			>
+				&#123;+{Object.keys(value).length} items&#125;
+			</button>
+		{:else}
+			&#123;
+			<div class="json-children pl-4">
+				{#each Object.entries(value) as node, i}
+					<div class="json-item">
+						{node[0]}: <svelte:self
+							value={node[1]}
+							depth={depth + 1}
+							key={i}
+							{theme}
+						/><!--
+            -->{#if i !== Object.keys(value).length - 1}<!--
+            -->,
+						{/if}
+					</div>
+				{/each}
+			</div>
+			&#125;
+		{/if}
+	{:else if value === null}
+		<div
+			class="json-item inline text-gray-500 dark:text-gray-400"
+			item-type="null"
+		>
+			null
+		</div>
+	{:else if typeof value === "string"}
+		<div class="json-item inline text-green-500" item-type="string">
+			"{value}"
+		</div>
+	{:else if typeof value === "boolean"}
+		<div class="json-item inline text-red-500" item-type="boolean">
+			{value.toLocaleString()}
+		</div>
+	{:else if typeof value === "number"}
+		<div class="json-item inline text-blue-500" item-type="number">
+			{value}
+		</div>
+	{:else}
+		<div class="json-item inline" item-type="other">
+			{value}
+		</div>
+	{/if}
+</div>
diff --git a/ui/packages/json/src/index.ts b/ui/packages/json/src/index.ts
new file mode 100644
index 0000000000..fe475e75a9
--- /dev/null
+++ b/ui/packages/json/src/index.ts
@@ -0,0 +1 @@
+export { default as JSON } from "./JSON.svelte";
diff --git a/ui/packages/label/README.md b/ui/packages/label/README.md
new file mode 100644
index 0000000000..e5b427fdb3
--- /dev/null
+++ b/ui/packages/label/README.md
@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```
diff --git a/ui/packages/label/package.json b/ui/packages/label/package.json
new file mode 100644
index 0000000000..624da78c16
--- /dev/null
+++ b/ui/packages/label/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "@gradio/label",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true
+}
diff --git a/ui/packages/label/src/Label.svelte b/ui/packages/label/src/Label.svelte
new file mode 100644
index 0000000000..d8d3630cea
--- /dev/null
+++ b/ui/packages/label/src/Label.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+	export let value: {
+		label: string;
+		confidences?: Array<{ label: string; confidence: number }>;
+	};
+	export let theme: string = "default";
+</script>
+
+<div class="output-label" {theme}>
+	<div
+		class="output-class font-bold text-2xl py-6 px-4 flex-grow flex items-center justify-center"
+		class:no-confidence={!("confidences" in value)}
+	>
+		{value.label}
+	</div>
+	{#if value.confidences}
+		<div class="confidence-intervals flex text-xl">
+			<div class="labels mr-2" style="maxWidth: 120px">
+				{#each value.confidences as confidence_set}
+					<div
+						class="label overflow-hidden whitespace-nowrap h-7 mb-2 overflow-ellipsis text-right"
+						title={confidence_set.label}
+					>
+						{confidence_set.label}
+					</div>
+				{/each}
+			</div>
+			<div class="confidences flex flex-grow flex-col items-baseline">
+				{#each value.confidences as confidence_set, i}
+					<div
+						class="confidence flex justify-end items-center overflow-hidden whitespace-nowrap h-7 mb-2 px-1"
+						style="min-width: calc(
+							{Math.round(confidence_set.confidence * 100)}% - 12px)"
+					>
+						{Math.round(confidence_set.confidence * 100)}%
+					</div>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+<style lang="postcss">
+	.output-label[theme="default"] {
+		.label {
+			@apply text-base h-7;
+		}
+		.confidence {
+			@apply font-mono box-border border-b-2 border-gray-300 bg-gray-200 dark:bg-gray-500 dark:border-gray-600 text-sm h-7 font-semibold rounded;
+		}
+		.confidence:first-child {
+			@apply bg-amber-500 dark:bg-red-600 border-red-700 text-white;
+		}
+	}
+</style>
diff --git a/ui/packages/label/src/index.ts b/ui/packages/label/src/index.ts
new file mode 100644
index 0000000000..5a8bf391fb
--- /dev/null
+++ b/ui/packages/label/src/index.ts
@@ -0,0 +1 @@
+export { default as Label } from "./Label.svelte";
diff --git a/ui/packages/table/README.md b/ui/packages/table/README.md
new file mode 100644
index 0000000000..b1508da249
--- /dev/null
+++ b/ui/packages/table/README.md
@@ -0,0 +1 @@
+# `@gradio/table`
diff --git a/ui/packages/table/package.json b/ui/packages/table/package.json
new file mode 100644
index 0000000000..b088fcfb14
--- /dev/null
+++ b/ui/packages/table/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "@gradio/table",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true
+}
diff --git a/ui/packages/table/src/Table.svelte b/ui/packages/table/src/Table.svelte
new file mode 100644
index 0000000000..4e6d5feace
--- /dev/null
+++ b/ui/packages/table/src/Table.svelte
@@ -0,0 +1,400 @@
+<script lang="ts">
+	import { createEventDispatcher, tick } from "svelte";
+
+	export let headers: Array<string> = [];
+	export let values: Array<Array<string | number>> = [["", "", ""]];
+	// export let default_data: Array<Array<string | number>> = [];
+
+	if ($$props.default) values = $$props.default;
+
+	// export let setValue: (val: typeof values) => typeof values;
+	export let editable = true;
+
+	const dispatch = createEventDispatcher<{ change: typeof values }>();
+
+	let id = 0;
+	let editing: boolean | number = false;
+	let selected: boolean | number = false;
+	let els: Record<
+		string,
+		{ cell: null | HTMLTableCellElement; input: null | HTMLInputElement }
+	> = {};
+
+	type Headers = Array<{ value: string; id: number }>;
+
+	function make_headers(_h: Array<string>): Headers {
+		if (_h.length === 0) {
+			return values[0].map((_, i) => {
+				const _id = ++id;
+				els[_id] = { cell: null, input: null };
+				return { id: _id, value: JSON.stringify(i + 1) };
+			});
+		} else {
+			return _h.map((h) => {
+				const _id = ++id;
+				els[_id] = { cell: null, input: null };
+				return { id: _id, value: h };
+			});
+		}
+	}
+
+	let _headers = make_headers(headers);
+
+	let data = values.map((x) =>
+		x.map((n) => {
+			const _id = ++id;
+			els[id] = { input: null, cell: null };
+			return { value: n, id: _id };
+		})
+	) || [
+		Array(headers.length)
+			.fill(0)
+
+			.map((_) => {
+				const _id = ++id;
+				els[id] = { input: null, cell: null };
+
+				return { value: "", id: _id };
+			})
+	];
+
+	$: dispatch(
+		"change",
+		data.map((r) => r.map(({ value }) => value))
+	);
+
+	function get_sort_status(
+		name: string,
+		sort: number,
+		direction?: SortDirection
+	) {
+		if (!sort) return "none";
+		if (headers[sort] === name) {
+			if (direction === "asc") return "ascending";
+			if (direction === "des") return "descending";
+		}
+	}
+
+	async function start_edit(id: number) {
+		if (!editable) return;
+		editing = id;
+		await tick();
+		const { input } = els[id];
+		input?.focus();
+	}
+
+	function handle_keydown(
+		event: KeyboardEvent,
+		i: number,
+		j: number,
+		id: number
+	) {
+		let is_data;
+		switch (event.key) {
+			case "ArrowRight":
+				if (editing) break;
+				event.preventDefault();
+				is_data = data[i][j + 1];
+				selected = is_data ? is_data.id : selected;
+				break;
+			case "ArrowLeft":
+				if (editing) break;
+				event.preventDefault();
+				is_data = data[i][j - 1];
+				selected = is_data ? is_data.id : selected;
+				break;
+			case "ArrowDown":
+				if (editing) break;
+				event.preventDefault();
+				is_data = data[i + 1];
+				selected = is_data ? is_data[j].id : selected;
+				break;
+			case "ArrowUp":
+				if (editing) break;
+				event.preventDefault();
+				is_data = data[i - 1];
+				selected = is_data ? is_data[j].id : selected;
+				break;
+			case "Escape":
+				if (!editable) break;
+				event.preventDefault();
+				editing = false;
+				break;
+			case "Enter":
+				if (!editable) break;
+				event.preventDefault();
+				if (editing === id) {
+					editing = false;
+				} else {
+					editing = id;
+				}
+				break;
+			case "Backspace":
+				if (!editable) break;
+				if (!editing) {
+					event.preventDefault();
+					data[i][j].value = "";
+				}
+				break;
+			case "Delete":
+				if (!editable) break;
+				if (!editing) {
+					event.preventDefault();
+					data[i][j].value = "";
+				}
+				break;
+			default:
+				break;
+		}
+	}
+
+	async function handle_cell_click(id: number) {
+		editing = false;
+		selected = id;
+	}
+
+	async function set_focus(id: number | boolean, type: "edit" | "select") {
+		if (type === "edit" && typeof id == "number") {
+			await tick();
+			els[id].input?.focus();
+		}
+
+		if (
+			type === "edit" &&
+			typeof id == "boolean" &&
+			typeof selected === "number"
+		) {
+			let cell = els[selected]?.cell;
+			await tick();
+			cell?.focus();
+		}
+
+		if (type === "select" && typeof id == "number") {
+			const { cell } = els[id];
+			cell?.setAttribute("tabindex", "0");
+			await tick();
+			els[id].cell?.focus();
+		}
+	}
+
+	$: set_focus(editing, "edit");
+	$: set_focus(selected, "select");
+
+	type SortDirection = "asc" | "des";
+	let sort_direction: SortDirection;
+	let sort_by: number;
+
+	function sort(col: number, dir: SortDirection) {
+		if (dir === "asc") {
+			data = data.sort((a, b) => (a[col].value < b[col].value ? -1 : 1));
+		} else if (dir === "des") {
+			data = data.sort((a, b) => (a[col].value > b[col].value ? -1 : 1));
+		}
+	}
+
+	function handle_sort(col: number) {
+		if (typeof sort_by !== "number" || sort_by !== col) {
+			sort_direction = "asc";
+			sort_by = col;
+		} else {
+			if (sort_direction === "asc") {
+				sort_direction = "des";
+			} else if (sort_direction === "des") {
+				sort_direction = "asc";
+			}
+		}
+
+		sort(col, sort_direction);
+	}
+
+	let header_edit: number | boolean;
+
+	async function edit_header(_id: number, select?: boolean) {
+		if (!editable) return;
+		header_edit = _id;
+		await tick();
+		els[_id].input?.focus();
+
+		if (select) els[_id].input?.select();
+	}
+
+	function end_header_edit(event: KeyboardEvent) {
+		if (!editable) return;
+
+		switch (event.key) {
+			case "Escape":
+				event.preventDefault();
+				header_edit = false;
+				break;
+			case "Enter":
+				event.preventDefault();
+				header_edit = false;
+		}
+	}
+
+	function add_row() {
+		data.push(
+			headers.map(() => {
+				const _id = ++id;
+				els[_id] = { cell: null, input: null };
+				return { id: _id, value: "" };
+			})
+		);
+		data = data;
+	}
+
+	async function add_col() {
+		for (let i = 0; i < data.length; i++) {
+			const _id = ++id;
+			els[_id] = { cell: null, input: null };
+			data[i].push({ id: _id, value: "" });
+		}
+
+		const _id = ++id;
+		els[_id] = { cell: null, input: null };
+		_headers.push({ id: _id, value: `Header ${_headers.length + 1}` });
+
+		data = data;
+		_headers = _headers;
+
+		await tick();
+
+		edit_header(_id, true);
+	}
+
+	const double_click = (
+		node: HTMLElement,
+		{ click, dblclick }: { click: Function; dblclick: Function }
+	) => {
+		let timer: NodeJS.Timeout | undefined;
+
+		function handler(event: MouseEvent) {
+			if (timer) {
+				clearTimeout(timer);
+				timer = undefined;
+				dblclick(event);
+			} else {
+				timer = setTimeout(() => {
+					click(event);
+					timer = undefined;
+				}, 250);
+			}
+		}
+
+		node.addEventListener("click", handler);
+
+		return {
+			destroy: () => node.removeEventListener("click", handler)
+		};
+	};
+</script>
+
+<div class="shadow overflow-hidden border-gray-200 rounded-sm relative">
+	<table
+		id="grid"
+		role="grid"
+		aria-labelledby="title"
+		class="min-w-full divide-y divide-gray-200 "
+	>
+		<thead class="bg-gray-50">
+			<tr>
+				{#each _headers as { value, id }, i (id)}
+					<th
+						use:double_click={{
+							click: () => handle_sort(i),
+							dblclick: () => edit_header(id)
+						}}
+						aria-sort={get_sort_status(value, sort_by, sort_direction)}
+						class="after:absolute after:opacity-0 after:content-['▲'] after:ml-2 after:inset-y-0 after:h-[1.05rem] after:m-auto relative px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider"
+						class:sorted={sort_by === i}
+						class:des={sort_by === i && sort_direction === "des"}
+					>
+						{#if header_edit === id}
+							<input
+								class="bg-transparent inset-y-0 left-6 outline-none absolute p-0 w-3/4 text-xs font-medium text-gray-500 uppercase tracking-wider"
+								tabindex="-1"
+								bind:value
+								bind:this={els[id].input}
+								on:keydown={end_header_edit}
+								on:blur={({ currentTarget }) =>
+									currentTarget.setAttribute("tabindex", "-1")}
+							/>
+						{/if}
+						<span
+							tabindex="-1"
+							role="button"
+							class="min-h-full"
+							class:opacity-0={header_edit === id}>{value}</span
+						>
+					</th>
+				{/each}
+			</tr></thead
+		><tbody class="bg-white divide-y divide-gray-200">
+			{#each data as row, i (row)}
+				<tr>
+					{#each row as { value, id }, j (id)}
+						<td
+							tabindex="-1"
+							class="p-0 whitespace-nowrap display-block outline-none relative "
+							on:dblclick={() => start_edit(id)}
+							on:click={() => handle_cell_click(id)}
+							on:keydown={(e) => handle_keydown(e, i, j, id)}
+							bind:this={els[id].cell}
+							on:blur={({ currentTarget }) =>
+								currentTarget.setAttribute("tabindex", "-1")}
+						>
+							<div
+								class:border-gray-600={selected === id}
+								class:border-transparent={selected !== id}
+								class="min-h-[3.3rem] px-5 py-3  border-[0.125rem]"
+							>
+								{#if editing === id}
+									<input
+										class="outline-none absolute p-0 w-3/4"
+										tabindex="-1"
+										bind:value
+										bind:this={els[id].input}
+										on:blur={({ currentTarget }) =>
+											currentTarget.setAttribute("tabindex", "-1")}
+									/>
+								{/if}
+								<span
+									class=" cursor-default w-full"
+									class:opacity-0={editing === id}
+									tabindex="-1"
+									role="button"
+								>
+									{value}
+								</span>
+							</div>
+						</td>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</div>
+{#if editable}
+	<div class="flex justify-end ">
+		<button
+			on:click={add_col}
+			class="hover:bg-gray-100 dark:hover:bg-gray-600 shadow  py-1 px-3 rounded transition  focus:outline-none m-2 mr-0"
+			>New Column</button
+		>
+		<button
+			on:click={add_row}
+			class="bg-amber-500 hover:bg-amber-400 dark:bg-red-700 dark:hover:bg-red-600 text-white shadow py-1 px-3 rounded transition focus:outline-none m-2 mr-0"
+			>New Row</button
+		>
+	</div>
+{/if}
+
+<style>
+	.sorted::after {
+		opacity: 1;
+	}
+
+	.des::after {
+		transform: rotate(180deg) translateY(1.5px);
+	}
+</style>
diff --git a/ui/packages/table/src/index.ts b/ui/packages/table/src/index.ts
new file mode 100644
index 0000000000..e74f5e71ce
--- /dev/null
+++ b/ui/packages/table/src/index.ts
@@ -0,0 +1 @@
+export { default as Table } from "./Table.svelte";
diff --git a/ui/packages/theme/package.json b/ui/packages/theme/package.json
index 19d2c11f0a..1c871baef6 100644
--- a/ui/packages/theme/package.json
+++ b/ui/packages/theme/package.json
@@ -6,8 +6,5 @@
 	"main": "src/index.ts",
 	"author": "",
 	"license": "ISC",
-	"private": true,
-	"dependencies": {
-		"@gradio/upload": "workspace:^0.0.1"
-	}
+	"private": true
 }
diff --git a/ui/packages/tooltip/README.md b/ui/packages/tooltip/README.md
new file mode 100644
index 0000000000..e5b427fdb3
--- /dev/null
+++ b/ui/packages/tooltip/README.md
@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```
diff --git a/ui/packages/tooltip/package.json b/ui/packages/tooltip/package.json
new file mode 100644
index 0000000000..d184d6f4a8
--- /dev/null
+++ b/ui/packages/tooltip/package.json
@@ -0,0 +1,10 @@
+{
+	"name": "@gradio/tooltip",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true
+}
diff --git a/ui/packages/tooltip/src/Tooltip.svelte b/ui/packages/tooltip/src/Tooltip.svelte
new file mode 100644
index 0000000000..7ead6ced4f
--- /dev/null
+++ b/ui/packages/tooltip/src/Tooltip.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	export let text: string;
+	export let x: number;
+	export let y: number;
+	export let color: string;
+
+	let w: number;
+	let h: number;
+</script>
+
+<div
+	class="bg-black bg-opacity-80 text-white border-r-2 p-1 absolute text-xs flex items-center justify-center"
+	bind:offsetWidth={w}
+	bind:offsetHeight={h}
+	style="
+		top: {y - h / 2}px;
+		left: {x - w - 7}px;"
+>
+	<span class="inline-block w-3 h-3 mr-1" style="background: {color}" />{text}
+</div>
diff --git a/ui/packages/tooltip/src/index.ts b/ui/packages/tooltip/src/index.ts
new file mode 100644
index 0000000000..b89ac870e5
--- /dev/null
+++ b/ui/packages/tooltip/src/index.ts
@@ -0,0 +1 @@
+export { tooltip } from "./tooltip";
diff --git a/ui/packages/tooltip/src/tooltip.ts b/ui/packages/tooltip/src/tooltip.ts
new file mode 100644
index 0000000000..cd1d83952f
--- /dev/null
+++ b/ui/packages/tooltip/src/tooltip.ts
@@ -0,0 +1,49 @@
+import Tooltip from "./Tooltip.svelte";
+
+interface ActionArgs {
+	color: string;
+	text: string;
+}
+
+export function tooltip(
+	element: HTMLElement | SVGElement,
+	{ color, text }: ActionArgs
+) {
+	let tooltipComponent: Tooltip;
+	function mouse_over(event: MouseEvent) {
+		tooltipComponent = new Tooltip({
+			props: {
+				text,
+				x: event.pageX,
+				y: event.pageY,
+				color
+			},
+			target: document.body
+		});
+
+		return event;
+	}
+	function mouseMove(event: MouseEvent) {
+		tooltipComponent.$set({
+			x: event.pageX,
+			y: event.pageY
+		});
+	}
+	function mouseLeave() {
+		tooltipComponent.$destroy();
+	}
+
+	const el = element as HTMLElement;
+
+	el.addEventListener("mouseover", mouse_over);
+	el.addEventListener("mouseleave", mouseLeave);
+	el.addEventListener("mousemove", mouseMove);
+
+	return {
+		destroy() {
+			el.removeEventListener("mouseover", mouse_over);
+			el.removeEventListener("mouseleave", mouseLeave);
+			el.removeEventListener("mousemove", mouseMove);
+		}
+	};
+}
diff --git a/ui/packages/upload/src/ModifyUpload.svelte b/ui/packages/upload/src/ModifyUpload.svelte
index 3ec046282c..da59c14577 100644
--- a/ui/packages/upload/src/ModifyUpload.svelte
+++ b/ui/packages/upload/src/ModifyUpload.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import type { FileData } from "./types";
 	import edit from "./edit.svg";
 	import clear from "./clear.svg";
 
@@ -8,8 +9,7 @@
 	export let theme: string;
 	export let absolute = true;
 
-	const dispatch =
-		createEventDispatcher<{ edit: undefined; clear: undefined }>();
+	const dispatch = createEventDispatcher<{ edit: FileData; clear: null }>();
 </script>
 
 <div
diff --git a/ui/packages/upload/src/Upload.svelte b/ui/packages/upload/src/Upload.svelte
index 7f9b1b5f43..ad18d752c7 100644
--- a/ui/packages/upload/src/Upload.svelte
+++ b/ui/packages/upload/src/Upload.svelte
@@ -1,17 +1,9 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	interface FileData {
-		name: string;
-		size: number;
-		data: string;
-		is_example: false;
-	}
+	import type { FileData } from "./types";
 
-	// export let load: (
-	// 	val: Array<string | FileData> | string | FileData | null
-	// ) => Array<string | FileData> | string | FileData | null;
 	export let filetype: string | undefined = undefined;
-	export let theme: string;
+	export let theme: string = "default";
 	export let single_file: boolean = true;
 	export let include_file_metadata = true;
 	let hidden_upload: HTMLInputElement;
diff --git a/ui/packages/upload/src/index.ts b/ui/packages/upload/src/index.ts
index 54c8868fbe..b72d92096c 100644
--- a/ui/packages/upload/src/index.ts
+++ b/ui/packages/upload/src/index.ts
@@ -1,2 +1,3 @@
 export { default as Upload } from "./Upload.svelte";
 export { default as ModifyUpload } from "./ModifyUpload.svelte";
+export type { FileData } from "./types";
diff --git a/ui/packages/upload/src/types.ts b/ui/packages/upload/src/types.ts
new file mode 100644
index 0000000000..97f5abcdc2
--- /dev/null
+++ b/ui/packages/upload/src/types.ts
@@ -0,0 +1,6 @@
+export interface FileData {
+	name: string;
+	size: number;
+	data: string;
+	is_example: false;
+}
diff --git a/ui/packages/video/README.md b/ui/packages/video/README.md
new file mode 100644
index 0000000000..e5b427fdb3
--- /dev/null
+++ b/ui/packages/video/README.md
@@ -0,0 +1,11 @@
+# `@gradio/button`
+
+```html
+<script>
+	import { Button } from "@gradio/button";
+</script>
+
+<button type="primary|secondary" href="string" on:click="{e.detail === href}">
+	content
+</button>
+```
diff --git a/ui/packages/video/package.json b/ui/packages/video/package.json
new file mode 100644
index 0000000000..cefe3be6bf
--- /dev/null
+++ b/ui/packages/video/package.json
@@ -0,0 +1,13 @@
+{
+	"name": "@gradio/video",
+	"version": "0.0.1",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"private": true,
+	"dependencies": {
+		"@gradio/upload": "workspace:^0.0.1"
+	}
+}
diff --git a/ui/packages/video/src/Video.svelte b/ui/packages/video/src/Video.svelte
new file mode 100644
index 0000000000..15d30fcb82
--- /dev/null
+++ b/ui/packages/video/src/Video.svelte
@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { Upload, ModifyUpload } from "@gradio/upload";
+	import type { FileData } from "@gradio/upload";
+	import { prettyBytes, playable } from "./utils";
+
+	export let value: FileData | null = null;
+	export let theme: string = "default";
+	export let source: string;
+
+	export let drop_text: string = "Drop a video file";
+	export let or_text: string = "or";
+	export let upload_text: string = "click to upload";
+
+	const dispatch = createEventDispatcher<{ change: FileData | null }>();
+
+	function handle_load({ detail }: CustomEvent<FileData | null>) {
+		dispatch("change", detail);
+		value = detail;
+	}
+
+	function handle_clear({ detail }: CustomEvent<FileData | null>) {
+		dispatch("change", null);
+		value = null;
+	}
+</script>
+
+<div
+	class="video-preview w-full h-60 object-contain flex justify-center items-center dark:bg-gray-600 relative"
+	class:bg-gray-200={value}
+>
+	{#if value === null}
+		{#if source === "upload"}
+			<Upload
+				filetype="video/mp4,video/x-m4v,video/*"
+				on:load={handle_load}
+				{theme}
+			>
+				{drop_text}
+				<br />- {or_text} -<br />
+				{upload_text}
+			</Upload>
+		{/if}
+	{:else}
+		<ModifyUpload on:clear={handle_clear} {theme} />
+		{#if playable(value.name)}
+			<!-- svelte-ignore a11y-media-has-caption -->
+			<video
+				class="w-full h-full object-contain bg-black"
+				controls
+				playsInline
+				preload="auto"
+				src={value.data}
+			/>
+		{:else}
+			<div class="file-name text-4xl p-6 break-all">{value.name}</div>
+			<div class="file-size text-2xl p-2">
+				{prettyBytes(value.size)}
+			</div>
+		{/if}
+	{/if}
+</div>
diff --git a/ui/packages/video/src/index.ts b/ui/packages/video/src/index.ts
new file mode 100644
index 0000000000..979dcd6831
--- /dev/null
+++ b/ui/packages/video/src/index.ts
@@ -0,0 +1 @@
+export { default as Video } from "./Video.svelte";
diff --git a/ui/packages/video/src/utils.ts b/ui/packages/video/src/utils.ts
new file mode 100644
index 0000000000..3ea2f79687
--- /dev/null
+++ b/ui/packages/video/src/utils.ts
@@ -0,0 +1,17 @@
+export const prettyBytes = (bytes: number): string => {
+	let units = ["B", "KB", "MB", "GB", "PB"];
+	let i = 0;
+	while (bytes > 1024) {
+		bytes /= 1024;
+		i++;
+	}
+	let unit = units[i];
+	return bytes.toFixed(1) + " " + unit;
+};
+
+export const playable = (filename: string): boolean => {
+	// let video_element = document.createElement("video");
+	// let mime_type = mime.lookup(filename);
+	// return video_element.canPlayType(mime_type) != "";
+	return true; // FIX BEFORE COMMIT - mime import causing issues
+};
diff --git a/ui/packages/workbench/package.json b/ui/packages/workbench/package.json
index b6d48def54..453895a309 100644
--- a/ui/packages/workbench/package.json
+++ b/ui/packages/workbench/package.json
@@ -25,6 +25,19 @@
 	"dependencies": {
 		"@gradio/audio": "workspace:^0.0.1",
 		"@gradio/button": "workspace:^0.0.1",
-		"@gradio/theme": "workspace:^0.0.1"
+		"@gradio/carousel": "workspace:^0.0.1",
+		"@gradio/chart": "workspace:^0.0.1",
+		"@gradio/chatbot": "workspace:^0.0.1",
+		"@gradio/file": "workspace:^0.0.1",
+		"@gradio/form": "workspace:^0.0.1",
+		"@gradio/highlighted-text": "workspace:^0.0.1",
+		"@gradio/html": "workspace:^0.0.1",
+		"@gradio/image": "workspace:^0.0.1",
+		"@gradio/json": "workspace:^0.0.1",
+		"@gradio/label": "workspace:^0.0.1",
+		"@gradio/table": "workspace:^0.0.1",
+		"@gradio/theme": "workspace:^0.0.1",
+		"@gradio/upload": "workspace:^0.0.1",
+		"@gradio/video": "workspace:^0.0.1"
 	}
 }
diff --git a/ui/packages/workbench/src/assets/cheetah1.jpg b/ui/packages/workbench/src/assets/cheetah1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c510ff30e09c1ce410afa499f0bfc3a63c751134
GIT binary patch
literal 20552
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

literal 0
HcmV?d00001

diff --git a/ui/packages/workbench/src/assets/time.csv b/ui/packages/workbench/src/assets/time.csv
new file mode 100644
index 0000000000..ddb2035c4e
--- /dev/null
+++ b/ui/packages/workbench/src/assets/time.csv
@@ -0,0 +1,8 @@
+time,value,price
+1,1,4
+2,3,8
+3,6,12
+4,10,16
+5,15,20
+6,21,24
+7,28,28
\ No newline at end of file
diff --git a/ui/packages/workbench/src/routes/_Nav.svelte b/ui/packages/workbench/src/routes/_Nav.svelte
index 26daf15351..13dc2585be 100644
--- a/ui/packages/workbench/src/routes/_Nav.svelte
+++ b/ui/packages/workbench/src/routes/_Nav.svelte
@@ -3,7 +3,6 @@
 	const comp_routes = [
 		"Audio",
 		"Button",
-		"DataFrame",
 		"Carousel",
 		"Chatbot",
 		"Chart",
@@ -14,13 +13,10 @@
 		"Image",
 		"JSON",
 		"Label",
-		"Markdown",
-		"Tooltip",
+		"Table",
 		"Upload",
 		"Video"
 	].map((n) => [n, n.toLowerCase()]);
-
-	$: console.log($page.url);
 </script>
 
 <nav class="inline-block">
diff --git a/ui/packages/workbench/src/routes/audio.svelte b/ui/packages/workbench/src/routes/audio.svelte
index 567237e377..e58d35e014 100644
--- a/ui/packages/workbench/src/routes/audio.svelte
+++ b/ui/packages/workbench/src/routes/audio.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { Audio } from "@gradio/audio";
-	import audio from "../assets/cantina.wav";
 </script>
 
 <h2>upload input</h2>
diff --git a/ui/packages/workbench/src/routes/carousel.svelte b/ui/packages/workbench/src/routes/carousel.svelte
new file mode 100644
index 0000000000..27294286a5
--- /dev/null
+++ b/ui/packages/workbench/src/routes/carousel.svelte
@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { Carousel, CarouselItem } from "@gradio/carousel";
+	import cheetah from "../assets/cheetah1.jpg";
+</script>
+
+<Carousel>
+	<CarouselItem>
+		<h1>hello</h1>
+	</CarouselItem>
+	<CarouselItem>
+		<img src={cheetah} alt="" />
+	</CarouselItem>
+</Carousel>
diff --git a/ui/packages/workbench/src/routes/chart.svelte b/ui/packages/workbench/src/routes/chart.svelte
new file mode 100644
index 0000000000..4b63ee9c8e
--- /dev/null
+++ b/ui/packages/workbench/src/routes/chart.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { Chart } from "@gradio/chart";
+
+	const csv = `time,value,price
+1,1,4
+2,3,8
+3,6,12
+4,10,16
+5,15,20
+6,21,24
+7,28,28`;
+</script>
+
+<Chart value={csv} />
diff --git a/ui/packages/workbench/src/routes/chatbot.svelte b/ui/packages/workbench/src/routes/chatbot.svelte
new file mode 100644
index 0000000000..92a2ce777a
--- /dev/null
+++ b/ui/packages/workbench/src/routes/chatbot.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import { ChatBot } from "@gradio/chatbot";
+
+	let messages: Array<[string, string]> = [
+		["message one", "message two"],
+		["message three", "message four"]
+	];
+
+	setTimeout(() => {
+		messages = [...messages, ["message five", "message six"]];
+	}, 1000);
+</script>
+
+<ChatBot value={messages} />
diff --git a/ui/packages/workbench/src/routes/file.svelte b/ui/packages/workbench/src/routes/file.svelte
new file mode 100644
index 0000000000..ba01896445
--- /dev/null
+++ b/ui/packages/workbench/src/routes/file.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { File } from "@gradio/file";
+</script>
+
+<File value={null} />
diff --git a/ui/packages/workbench/src/routes/forms.svelte b/ui/packages/workbench/src/routes/forms.svelte
new file mode 100644
index 0000000000..3ebc228416
--- /dev/null
+++ b/ui/packages/workbench/src/routes/forms.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+	import {
+		Checkbox,
+		CheckboxGroup,
+		Dropdown,
+		Radio,
+		TextBox,
+		Number
+	} from "@gradio/form";
+</script>
+
+<h2>TextBox</h2>
+<TextBox on:change={({ detail }) => console.log(detail)} />
+
+<h2>TextArea</h2>
+<TextBox lines={5} on:change={({ detail }) => console.log(detail)} />
+
+<h2>Number</h2>
+<Number on:change={({ detail }) => console.log(detail)} />
+
+<h2>Radio</h2>
+<Radio choices={["true", "false"]} value={"true"} />
+
+<h2>CheckBox</h2>
+<Checkbox value={false} />
+
+<h2>Checkbox Group</h2>
+<CheckboxGroup choices={["one", "two"]} value={[]} />
+
+<h2>Dropdown</h2>
+<Dropdown label={"choose"} choices={["one", "two", "three"]} />
diff --git a/ui/packages/workbench/src/routes/highlightedtext.svelte b/ui/packages/workbench/src/routes/highlightedtext.svelte
new file mode 100644
index 0000000000..2a2450c70c
--- /dev/null
+++ b/ui/packages/workbench/src/routes/highlightedtext.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	import { HighlightedText } from "@gradio/highlighted-text";
+</script>
+
+<h2>With legend</h2>
+<HighlightedText
+	show_legend={true}
+	value={[
+		["one", "1"],
+		["two", "2"],
+		["three", "3"],
+		["two", "2"],
+		["three", "3"]
+	]}
+/>
+
+<h2>Without legend</h2>
+<HighlightedText
+	value={[
+		["one", "1"],
+		["two", "2"],
+		["three", "3"],
+		["two", "2"],
+		["three", "3"]
+	]}
+/>
+
+<h2>Custom color_map with legend</h2>
+<HighlightedText
+	show_legend={true}
+	value={[
+		["one", "+"],
+		["two", "-"],
+		["three", "-"],
+		["two", "+"],
+		["three", "-"]
+	]}
+	color_map={{ "+": "limegreen", "-": "crimson" }}
+/>
+
+<h2>Custom color_map without legend</h2>
+<HighlightedText
+	value={[
+		["one", "+"],
+		["two", "-"],
+		["three", "-"],
+		["two", "+"],
+		["three", "-"]
+	]}
+	color_map={{ "+": "limegreen", "-": "crimson" }}
+/>
diff --git a/ui/packages/workbench/src/routes/html.svelte b/ui/packages/workbench/src/routes/html.svelte
new file mode 100644
index 0000000000..c015a8d32a
--- /dev/null
+++ b/ui/packages/workbench/src/routes/html.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { HTML } from "@gradio/html";
+
+	const src = `<h1>hello</h1>`;
+</script>
+
+<HTML value={src} />
diff --git a/ui/packages/workbench/src/routes/image.svelte b/ui/packages/workbench/src/routes/image.svelte
new file mode 100644
index 0000000000..20640de4ae
--- /dev/null
+++ b/ui/packages/workbench/src/routes/image.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { browser } from "$app/env";
+	import { Image } from "@gradio/image";
+
+	const src = `<h1>hello</h1>`;
+</script>
+
+{#if browser}
+	<h2>Editor with upload</h2>
+	<Image value={null} source={"upload"} tool="editor" />
+
+	<h2>Editor with webcam</h2>
+	<Image value={null} source={"webcam"} tool="editor" />
+
+	<h2>Editor with sketch</h2>
+	<Image value={null} source={"canvas"} tool="editor" />
+
+	<h2>Cropper with upload</h2>
+	<Image value={null} source={"upload"} tool="select" />
+{/if}
diff --git a/ui/packages/workbench/src/routes/json.svelte b/ui/packages/workbench/src/routes/json.svelte
new file mode 100644
index 0000000000..3b463d0e3c
--- /dev/null
+++ b/ui/packages/workbench/src/routes/json.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { JSON } from "@gradio/json";
+
+	const json = {
+		a: 1,
+		b: "two",
+		c: [
+			1,
+			"two",
+			[1, 2, 3],
+			{
+				a: 1,
+				b: "two",
+				c: [1, "two", []]
+			}
+		],
+		d: {
+			a: 1,
+			b: "two",
+			c: [
+				1,
+				"two",
+				[1, 2, 3],
+				{
+					a: 1,
+					b: "two",
+					c: [1, "two", []]
+				}
+			]
+		}
+	};
+</script>
+
+<JSON value={json} />
diff --git a/ui/packages/workbench/src/routes/label.svelte b/ui/packages/workbench/src/routes/label.svelte
new file mode 100644
index 0000000000..227969b4a1
--- /dev/null
+++ b/ui/packages/workbench/src/routes/label.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { Label } from "@gradio/label";
+
+	const data = {
+		label: "hello",
+		confidences: [
+			{ label: "hello", confidence: 0.8 },
+			{ label: "helooo", confidence: 0.4 },
+			{ label: "helloooo", confidence: 0.6 }
+		]
+	};
+</script>
+
+<h2>Without confidence</h2>
+
+<Label value={{ label: "hello" }} />
+
+<h2>With confidence</h2>
+
+<Label value={data} />
diff --git a/ui/packages/workbench/src/routes/table.svelte b/ui/packages/workbench/src/routes/table.svelte
new file mode 100644
index 0000000000..9beac7b3f3
--- /dev/null
+++ b/ui/packages/workbench/src/routes/table.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { Table } from "@gradio/table";
+</script>
+
+<Table />
diff --git a/ui/packages/workbench/src/routes/upload.svelte b/ui/packages/workbench/src/routes/upload.svelte
new file mode 100644
index 0000000000..666fdf20bb
--- /dev/null
+++ b/ui/packages/workbench/src/routes/upload.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Upload } from "@gradio/upload";
+</script>
+
+<Upload on:load={({ detail }) => console.log("change", detail)}
+	>drag or click</Upload
+>
diff --git a/ui/packages/workbench/src/routes/video.svelte b/ui/packages/workbench/src/routes/video.svelte
new file mode 100644
index 0000000000..7caa58cfcd
--- /dev/null
+++ b/ui/packages/workbench/src/routes/video.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { Video } from "@gradio/video";
+</script>
+
+<Video value={null} source={"upload"} />
diff --git a/ui/pnpm-lock.yaml b/ui/pnpm-lock.yaml
index 17f9b8b952..c41ae40079 100644
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@@ -79,17 +79,113 @@ importers:
     dependencies:
       '@gradio/upload': link:../upload
 
+  packages/carousel:
+    specifiers:
+      '@gradio/upload': workspace:^0.0.1
+    dependencies:
+      '@gradio/upload': link:../upload
+
+  packages/chart:
+    specifiers:
+      '@gradio/tooltip': workspace:^0.0.1
+      d3-dsv: ^3.0.1
+      d3-scale: ^4.0.2
+      d3-shape: ^3.1.0
+    dependencies:
+      '@gradio/tooltip': link:../tooltip
+      d3-dsv: 3.0.1
+      d3-scale: 4.0.2
+      d3-shape: 3.1.0
+
+  packages/chatbot:
+    specifiers: {}
+
   packages/components:
     specifiers: {}
 
+  packages/file:
+    specifiers:
+      '@gradio/upload': workspace:^0.0.1
+    dependencies:
+      '@gradio/upload': link:../upload
+
+  packages/form:
+    specifiers:
+      '@gradio/upload': workspace:^0.0.1
+    dependencies:
+      '@gradio/upload': link:../upload
+
+  packages/highlighted-text:
+    specifiers:
+      '@gradio/upload': workspace:^0.0.1
+    dependencies:
+      '@gradio/upload': link:../upload
+
+  packages/html:
+    specifiers:
+      '@gradio/upload': workspace:^0.0.1
+    dependencies:
+      '@gradio/upload': link:../upload
+
+  packages/image:
+    specifiers:
+      '@gradio/upload': workspace:^0.0.1
+      cropperjs: ^1.5.12
+      lazy-brush: ^1.0.1
+      resize-observer-polyfill: ^1.5.1
+      tui-image-editor: ^3.15.2
+    dependencies:
+      '@gradio/upload': link:../upload
+      cropperjs: 1.5.12
+      lazy-brush: 1.0.1
+      resize-observer-polyfill: 1.5.1
+      tui-image-editor: 3.15.2
+
+  packages/table:
+    specifiers:
+      '@gradio/upload': workspace:^0.0.1
+    dependencies:
+      '@gradio/upload': link:../upload
+
+  packages/theme:
+    specifiers:
+      '@gradio/upload': workspace:^0.0.1
+    dependencies:
+      '@gradio/upload': link:../upload
+
+  packages/tooltip:
+    specifiers:
+      '@gradio/upload': workspace:^0.0.1
+    dependencies:
+      '@gradio/upload': link:../upload
+
   packages/upload:
     specifiers: {}
 
+  packages/video:
+    specifiers:
+      '@gradio/upload': workspace:^0.0.1
+    dependencies:
+      '@gradio/upload': link:../upload
+
   packages/workbench:
     specifiers:
       '@gradio/audio': workspace:^0.0.1
       '@gradio/button': workspace:^0.0.1
+      '@gradio/carousel': workspace:^0.0.1
+      '@gradio/chart': workspace:^0.0.1
+      '@gradio/chatbot': workspace:^0.0.1
+      '@gradio/file': workspace:^0.0.1
+      '@gradio/form': workspace:^0.0.1
+      '@gradio/highlighted-text': workspace:^0.0.1
+      '@gradio/html': workspace:^0.0.1
+      '@gradio/image': workspace:^0.0.1
+      '@gradio/json': workspace:^0.0.1
+      '@gradio/label': workspace:^0.0.1
+      '@gradio/table': workspace:^0.0.1
       '@gradio/theme': workspace:^0.0.1
+      '@gradio/upload': workspace:^0.0.1
+      '@gradio/video': workspace:^0.0.1
       '@sveltejs/adapter-auto': next
       '@sveltejs/kit': next
       autoprefixer: ^10.4.2
@@ -104,10 +200,23 @@ importers:
     dependencies:
       '@gradio/audio': link:../audio
       '@gradio/button': link:../button
+      '@gradio/carousel': link:../carousel
+      '@gradio/chart': link:../chart
+      '@gradio/chatbot': link:../chatbot
+      '@gradio/file': link:../file
+      '@gradio/form': link:../form
+      '@gradio/highlighted-text': link:../highlighted-text
+      '@gradio/html': link:../html
+      '@gradio/image': link:../image
+      '@gradio/json': link:../json
+      '@gradio/label': link:../label
+      '@gradio/table': link:../table
       '@gradio/theme': link:../theme
+      '@gradio/upload': link:../upload
+      '@gradio/video': link:../video
     devDependencies:
-      '@sveltejs/adapter-auto': 1.0.0-next.28
-      '@sveltejs/kit': 1.0.0-next.286_svelte@3.46.3
+      '@sveltejs/adapter-auto': 1.0.0-next.30
+      '@sveltejs/kit': 1.0.0-next.288_svelte@3.46.3
       autoprefixer: 10.4.2_postcss@8.4.6
       postcss: 8.4.6
       postcss-load-config: 3.1.1
@@ -221,12 +330,12 @@ packages:
       picomatch: 2.3.1
     dev: true
 
-  /@sveltejs/adapter-auto/1.0.0-next.28:
-    resolution: {integrity: sha512-MuJUghh7HYXeThS1btsKJFZBN//DM5BmfTXhSBRN3MgKwDMF1XYvadNegZI2nIVzb9RQTh/al3jGKKZfBVHGEg==}
+  /@sveltejs/adapter-auto/1.0.0-next.30:
+    resolution: {integrity: sha512-kKKDvv2bwH66l/A97u26973OG3Zh7V1WlTKgkOr95Koo1/Y6rBhBfkz0Jw+WLzsZ+hcTzgIrcegtWVt+GQRJpw==}
     dependencies:
       '@sveltejs/adapter-cloudflare': 1.0.0-next.14
-      '@sveltejs/adapter-netlify': 1.0.0-next.47
-      '@sveltejs/adapter-vercel': 1.0.0-next.44
+      '@sveltejs/adapter-netlify': 1.0.0-next.49
+      '@sveltejs/adapter-vercel': 1.0.0-next.45
     dev: true
 
   /@sveltejs/adapter-cloudflare/1.0.0-next.14:
@@ -235,22 +344,22 @@ packages:
       esbuild: 0.14.23
     dev: true
 
-  /@sveltejs/adapter-netlify/1.0.0-next.47:
-    resolution: {integrity: sha512-fyJ2UP14ViusPFMtnuXbLRxE9bQ3dQ7Aj5HkAddN4fgV1A15tGWthrSUOH0iozYmOYLu6AWvUxx9o01OhJbfZQ==}
+  /@sveltejs/adapter-netlify/1.0.0-next.49:
+    resolution: {integrity: sha512-EYP0/eK1foC90fBNn6V9fP0ngrMF3MrkaNN+wCnMj0rHGKOKUzXlIeyPtGtQnDL9cqHac39pbPhSyMaMuWZF/w==}
     dependencies:
       '@iarna/toml': 2.2.5
       esbuild: 0.14.23
       tiny-glob: 0.2.9
     dev: true
 
-  /@sveltejs/adapter-vercel/1.0.0-next.44:
-    resolution: {integrity: sha512-q0o7JG0pAam2lkkM5XiaLzYBGSRtOogjXpKYwpc7iiMuaSV4nzsnYlLxwbtib7ZJQzE1D32pPZQuvf5pAIqrmQ==}
+  /@sveltejs/adapter-vercel/1.0.0-next.45:
+    resolution: {integrity: sha512-WoOMu4FSWjVeRiPq2NKfdZhobfOLmDykObZmm8JHptMDb0/I5SB+6wstzAeaNtQr2ZbQkUy0k7EX95riJifEEQ==}
     dependencies:
       esbuild: 0.14.23
     dev: true
 
-  /@sveltejs/kit/1.0.0-next.286_svelte@3.46.3:
-    resolution: {integrity: sha512-txWUYKLpZohHPCEYc3oYIByMnZe+d/FItMBiCNJbTLdKaDop+SfCOzBar+K9IgP2MTXSScILSkPOms845uhz0A==}
+  /@sveltejs/kit/1.0.0-next.288_svelte@3.46.3:
+    resolution: {integrity: sha512-6ky4CUFNGKoU1QV+fY2LOIB7atHdUCIMRx3pX21B2g9yZzQzkot0zHBrMMBSKF0/4Wx19PLEWrlGxlhakYmi8Q==}
     engines: {node: '>=14.13'}
     hasBin: true
     peerDependencies: