Merge branch 'master' into dawood/chatbot

2025-01-24 10:54:04 +08:00 · 2022-02-14 21:57:57 -05:00 · 2022-02-14 21:57:57 -05:00 · 4c1027c674
commit 4c1027c674
parent 09e333c0e7 ba8ec489e9
44 changed files with 2462 additions and 117 deletions
--- a/.github/workflows/ui.yml
+++ b/.github/workflows/ui.yml
@ -32,5 +32,7 @@ jobs:
      - name: typecheck
        run: pnpm ts:check
        continue-on-error: true
+      - name: unit tests
+        run: pnpm test:run
      - name: build
        run: pnpm build
--- a/gradio.egg-info/PKG-INFO
+++ b/gradio.egg-info/PKG-INFO
@ -1,4 +1,4 @@
-Metadata-Version: 2.1
+Metadata-Version: 1.0
 Name: gradio
 Version: 2.8.0b5
 Summary: Python library for easily interacting with trained machine learning models
@ -6,9 +6,6 @@ Home-page: https://github.com/gradio-app/gradio-UI
 Author: Abubakar Abid, Ali Abid, Ali Abdalla, Dawood Khan, Ahsen Khaliq
 Author-email: team@gradio.app
 License: Apache License 2.0
+Description: UNKNOWN
 Keywords: machine learning,visualization,reproducibility
 Platform: UNKNOWN
-License-File: LICENSE
-
-UNKNOWN
-
--- a/gradio.egg-info/requires.txt
+++ b/gradio.egg-info/requires.txt
@ -1,5 +1,5 @@
-analytics-python
 aiohttp
+analytics-python
 fastapi
 ffmpy
 markdown-it-py[linkify,plugins]
@ -9,7 +9,7 @@ pandas
 paramiko
 pillow
 pycryptodome
-python-multipart
 pydub
+python-multipart
 requests
 uvicorn
--- a/gradio/templates/frontend/index.html
+++ b/gradio/templates/frontend/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="min-height: 100%; margin: 0; padding: 0">
+<html lang="en" style="height: 100%; margin: 0; padding: 0">
 	<head>
 		<meta charset="utf-8" />
 		<meta
@ -45,10 +45,10 @@
 		</script>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js"></script>
 		<title>Gradio</title>
-		<script type="module" crossorigin src="/assets/index.1efa643a.js"></script>
-		<link rel="modulepreload" href="/assets/vendor.a0afec2a.js">
+		<script type="module" crossorigin src="/assets/index.8bfab7fc.js"></script>
+		<link rel="modulepreload" href="/assets/vendor.086ddd97.js">
 		<link rel="stylesheet" href="/assets/vendor.327fceeb.css">
-		<link rel="stylesheet" href="/assets/index.dee61218.css">
+		<link rel="stylesheet" href="/assets/index.b7106307.css">
 	</head>

 	<body style="height: 100%; margin: 0; padding: 0">
--- a/test/golden/diff_texts/magic_trick.png
+++ b/test/golden/diff_texts/magic_trick.png
--- a/test/golden/image_mod/cheetah1.png
+++ b/test/golden/image_mod/cheetah1.png
--- a/test/golden/longest_word/wonderful.png
+++ b/test/golden/longest_word/wonderful.png
--- a/test/golden/sentence_builder/two_cats.png
+++ b/test/golden/sentence_builder/two_cats.png
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
--- a/ui/package.json
+++ b/ui/package.json
@ -7,7 +7,9 @@
 		"build": "pnpm build --filter @gradio/app",
 		"format:check": "prettier --check --plugin-search-dir=. .",
 		"format:write": "prettier --write --plugin-search-dir=. .",
-		"ts:check": "svelte-check --tsconfig tsconfig.json"
+		"ts:check": "svelte-check --tsconfig tsconfig.json",
+		"test": "vitest dev",
+		"test:run": "vitest run"
 	},
 	"author": "",
 	"license": "ISC",
@ -16,6 +18,7 @@
 		"prettier": "^2.5.1",
 		"prettier-plugin-svelte": "^2.6.0",
 		"svelte": "^3.46.3",
-		"svelte-check": "^2.4.1"
+		"svelte-check": "^2.4.1",
+		"vitest": "^0.3.2"
 	}
 }
--- a/ui/packages/app/index.html
+++ b/ui/packages/app/index.html
@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" style="min-height: 100%; margin: 0; padding: 0">
+<html lang="en" style="height: 100%; margin: 0; padding: 0">
 	<head>
 		<meta charset="utf-8" />
 		<meta
--- a/ui/packages/app/src/ExampleSet.svelte
+++ b/ui/packages/app/src/ExampleSet.svelte
@ -89,7 +89,7 @@
 					@apply border-gray-300 dark:border-gray-600;
 				}
 				tbody tr:hover {
-					@apply bg-yellow-500 dark:bg-red-700 text-white;
+					@apply bg-amber-500 dark:bg-red-700 text-white;
 				}
 			}
 		}
@ -98,7 +98,7 @@
 				@apply shadow;
 			}
 			.example:hover {
-				@apply bg-yellow-500 text-white;
+				@apply bg-amber-500 text-white;
 			}
 		}
 	}
--- a/ui/packages/app/src/Interface.svelte
+++ b/ui/packages/app/src/Interface.svelte
@ -365,7 +365,7 @@
 			@apply text-gray-400 cursor-not-allowed;
 		}
 		.panel-button.submit {
-			@apply bg-yellow-500 hover:bg-yellow-400 dark:bg-red-700 dark:hover:bg-red-600 text-white;
+			@apply bg-amber-500 hover:bg-amber-400 dark:bg-red-700 dark:hover:bg-red-600 text-white;
 		}
 		.examples {
 			.examples-table-holder:not(.gallery) {
@ -376,7 +376,7 @@
 						@apply border-gray-300 dark:border-gray-600;
 					}
 					tbody tr:hover {
-						@apply bg-yellow-500 dark:bg-red-700 text-white;
+						@apply bg-amber-500 dark:bg-red-700 text-white;
 					}
 				}
 			}
@ -385,7 +385,7 @@
 					@apply shadow;
 				}
 				tbody td:hover {
-					@apply bg-yellow-500 text-white;
+					@apply bg-amber-500 text-white;
 				}
 			}
 		}
--- a/ui/packages/app/src/Login.svelte
+++ b/ui/packages/app/src/Login.svelte
@ -17,7 +17,7 @@
 		<input class="p-2 block" type="password" name="password" />
 		<input
 			type="submit"
-			class="block bg-yellow-500 hover:bg-yellow-400 dark:hover:bg-yellow-600 transition px-4 py-2 rounded text-white font-semibold cursor-pointer mt-4"
+			class="block bg-amber-500 hover:bg-amber-400 dark:hover:bg-amber-600 transition px-4 py-2 rounded text-white font-semibold cursor-pointer mt-4"
 		/>
 	</form>
 </div>
--- a/ui/packages/app/src/components/input/Checkbox/Checkbox.svelte
+++ b/ui/packages/app/src/components/input/Checkbox/Checkbox.svelte
@ -50,10 +50,10 @@
 			@apply bg-gray-100 dark:bg-gray-400 transition;
 		}
 		.checkbox-item.selected {
-			@apply bg-yellow-500 dark:bg-red-600 text-white;
+			@apply bg-amber-500 dark:bg-red-600 text-white;
 		}
 		.selected .checkbox {
-			@apply bg-yellow-600 dark:bg-red-700;
+			@apply bg-amber-600 dark:bg-red-700;
 		}
 	}
 </style>
--- a/ui/packages/app/src/components/input/Checkbox/Interpretation.svelte
+++ b/ui/packages/app/src/components/input/Checkbox/Interpretation.svelte
@ -52,7 +52,7 @@
 			@apply bg-white dark:bg-gray-800 shadow transition hover:shadow-md;
 		}
 		.checkbox-item.selected {
-			@apply bg-yellow-500 dark:bg-red-600 text-white;
+			@apply bg-amber-500 dark:bg-red-600 text-white;
 		}
 	}
 </style>
--- a/ui/packages/app/src/components/input/CheckboxGroup/CheckboxGroup.svelte
+++ b/ui/packages/app/src/components/input/CheckboxGroup/CheckboxGroup.svelte
@ -61,10 +61,10 @@
 			@apply bg-gray-100 dark:bg-gray-400 transition;
 		}
 		.checkbox-item.selected {
-			@apply bg-yellow-500 dark:bg-red-600 text-white;
+			@apply bg-amber-500 dark:bg-red-600 text-white;
 		}
 		.selected .checkbox {
-			@apply bg-yellow-600 dark:bg-red-700;
+			@apply bg-amber-600 dark:bg-red-700;
 		}
 	}
 </style>
--- a/ui/packages/app/src/components/input/CheckboxGroup/Interpretation.svelte
+++ b/ui/packages/app/src/components/input/CheckboxGroup/Interpretation.svelte
@ -60,10 +60,10 @@
 			@apply bg-gray-100 dark:bg-gray-400 transition;
 		}
 		.checkbox-item.selected {
-			@apply bg-yellow-500 dark:bg-red-600 text-white;
+			@apply bg-amber-500 dark:bg-red-600 text-white;
 		}
 		.selected .checkbox {
-			@apply bg-yellow-600 dark:bg-red-700;
+			@apply bg-amber-600 dark:bg-red-700;
 		}
 	}
 </style>
--- a/ui/packages/app/src/components/input/DataFrame/DataFrame.svelte
+++ b/ui/packages/app/src/components/input/DataFrame/DataFrame.svelte
@ -368,7 +368,7 @@
 		>
 		<button
 			on:click={add_row}
-			class="bg-yellow-500 hover:bg-yellow-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"
+			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>
--- a/ui/packages/app/src/components/input/Dropdown/Dropdown.svelte
+++ b/ui/packages/app/src/components/input/Dropdown/Dropdown.svelte
@ -41,7 +41,7 @@
 			@apply shadow;
 		}
 		.dropdown-item {
-			@apply bg-white dark:bg-gray-800 hover:bg-yellow-500 dark:hover:bg-red-600 hover:text-gray-50 hover:font-semibold;
+			@apply bg-white dark:bg-gray-800 hover:bg-amber-500 dark:hover:bg-red-600 hover:text-gray-50 hover:font-semibold;
 		}
 	}
 </style>
--- a/ui/packages/app/src/components/input/Image/Image.svelte
+++ b/ui/packages/app/src/components/input/Image/Image.svelte
@ -37,9 +37,9 @@

 <div class="input-image">
 	<div
-		class="image-preview w-full h-80 flex justify-center items-center dark:bg-gray-600 relative"
+		class="image-preview w-full h-60 flex justify-center items-center dark:bg-gray-600 relative"
 		class:bg-gray-200={value}
-		class:h-80={source !== "webcam"}
+		class:h-60={source !== "webcam"}
 	>
 		{#if source === "canvas"}
 			<ModifySketch
--- a/ui/packages/app/src/components/input/Radio/Interpretation.svelte
+++ b/ui/packages/app/src/components/input/Radio/Interpretation.svelte
@ -31,7 +31,7 @@
 			@apply w-4 h-4  rounded-full box-border;
 		}
 		.radio-item.selected {
-			@apply bg-yellow-500 dark:bg-red-600 text-white shadow;
+			@apply bg-amber-500 dark:bg-red-600 text-white shadow;
 		}
 	}
 </style>
--- a/ui/packages/app/src/components/input/Radio/Radio.svelte
+++ b/ui/packages/app/src/components/input/Radio/Radio.svelte
@ -27,13 +27,13 @@
 			@apply bg-gray-50 dark:bg-gray-400 border-4 border-gray-200 dark:border-gray-600;
 		}
 		.radio-item.selected {
-			@apply bg-yellow-500 dark:bg-red-600 text-white shadow;
+			@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-yellow-600 dark:border-red-700;
+			@apply border-amber-600 dark:border-red-700;
 		}
 	}
 </style>
--- a/ui/packages/app/src/components/input/Slider/Interpretation.svelte
+++ b/ui/packages/app/src/components/input/Slider/Interpretation.svelte
@ -44,10 +44,10 @@
 			@apply bg-white dark:bg-gray-800 shadow h-3 transition hover:shadow-md;
 		}
 		.range::-webkit-slider-thumb {
-			@apply bg-gradient-to-b from-yellow-400 to-yellow-500 dark:from-red-500 dark:to-red-600 shadow;
+			@apply bg-gradient-to-b from-amber-400 to-amber-500 dark:from-red-500 dark:to-red-600 shadow;
 		}
 		.range::-moz-range-thumb {
-			@apply bg-gradient-to-b from-yellow-400 to-yellow-500 shadow;
+			@apply bg-gradient-to-b from-amber-400 to-amber-500 shadow;
 		}
 		.value {
 			@apply bg-gray-100 dark:bg-gray-600 font-semibold;
--- a/ui/packages/app/src/components/input/Slider/Slider.svelte
+++ b/ui/packages/app/src/components/input/Slider/Slider.svelte
@ -38,10 +38,10 @@
 			@apply bg-white dark:bg-gray-800 shadow h-3 transition hover:shadow-md;
 		}
 		.range::-webkit-slider-thumb {
-			@apply bg-gradient-to-b from-yellow-400 to-yellow-500 dark:from-red-500 dark:to-red-600 shadow;
+			@apply bg-gradient-to-b from-amber-400 to-amber-500 dark:from-red-500 dark:to-red-600 shadow;
 		}
 		.range::-moz-range-thumb {
-			@apply bg-gradient-to-b from-yellow-400 to-yellow-500 shadow;
+			@apply bg-gradient-to-b from-amber-400 to-amber-500 shadow;
 		}
 		.value {
 			@apply bg-gray-100 dark:bg-gray-600 font-semibold;
--- a/ui/packages/app/src/components/input/Slider/config.ts
+++ b/ui/packages/app/src/components/input/Slider/config.ts
@ -1,4 +1,4 @@
-import Component from "./Silder.svelte";
+import Component from "./Slider.svelte";
 import ExampleComponent from "./Example.svelte";
 import Interpretation from "./Interpretation.svelte";

--- a/ui/packages/app/src/components/input/Video/Video.svelte
+++ b/ui/packages/app/src/components/input/Video/Video.svelte
@ -29,7 +29,7 @@
 </script>

 <div
-	class="video-preview w-full h-80 object-contain flex justify-center items-center  dark:bg-gray-600 relative"
+	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}
--- a/ui/packages/app/src/components/output/HighlightedText/HighlightedText.svelte
+++ b/ui/packages/app/src/components/output/HighlightedText/HighlightedText.svelte
@ -8,6 +8,9 @@

 	let mode: "categories" | "scores";

+	if (color_map === null) {
+		color_map = {};
+	}
 	if (value.length > 0) {
 		for (let [_, label] of value) {
 			if (label !== null) {
--- a/ui/packages/app/src/components/output/Label/Label.svelte
+++ b/ui/packages/app/src/components/output/Label/Label.svelte
@ -49,7 +49,7 @@
 			@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 border-yellow-600 bg-yellow-500 dark:bg-red-600 border-red-700 text-white;
+			@apply border-amber-600 bg-amber-500 dark:bg-red-600 border-red-700 text-white;
 		}
 	}
 </style>
--- a/ui/packages/app/src/components/utils/ModifySketch.svelte
+++ b/ui/packages/app/src/components/utils/ModifySketch.svelte
@ -8,7 +8,7 @@

 <div class="z-50 top-0 right-0 flex justify-end m-1 flex gap-1 absolute">
 	<button
-		class="bg-opacity-30 hover:bg-opacity-100 transition p-1.5 bg-yellow-500 dark:bg-red-600 rounded shadow w-8 h-8"
+		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="{static_src}/static/img/undo-solid.svg" />
--- a/ui/packages/app/src/components/utils/ModifyUpload.svelte
+++ b/ui/packages/app/src/components/utils/ModifyUpload.svelte
@ -39,7 +39,7 @@
 	.modify-upload[theme="default"] {
 		@apply m-1 flex gap-1;
 		.edit {
-			@apply bg-yellow-500 dark:bg-red-600 rounded shadow;
+			@apply bg-amber-500 dark:bg-red-600 rounded shadow;
 		}
 		.clear {
 			@apply bg-gray-50 dark:bg-gray-500 rounded shadow;
--- a/ui/packages/app/src/components/utils/helpers.test.ts
+++ b/ui/packages/app/src/components/utils/helpers.test.ts
@ -0,0 +1,24 @@
+import { assert, describe, expect, it } from "vitest";
+import { prettyBytes } from "./helpers";
+
+describe("prettyBytes", () => {
+	it("handle B", () => {
+		assert.equal(prettyBytes(10), "10.0 B");
+	});
+
+	it("handles KB", () => {
+		assert.equal(prettyBytes(1_300), "1.3 KB");
+	});
+
+	it("handles MB", () => {
+		assert.equal(prettyBytes(1_300_000), "1.2 MB");
+	});
+
+	it("handles GB", () => {
+		assert.equal(prettyBytes(1_300_000_123), "1.2 GB");
+	});
+
+	it("handles PB", () => {
+		assert.equal(prettyBytes(1_300_000_123_000), "1.2 PB");
+	});
+});
--- a/ui/packages/app/src/themes/peach.css
+++ b/ui/packages/app/src/themes/peach.css
@ -1,5 +1,5 @@
 .gradio-bg[theme="peach"] {
-	@apply bg-gradient-to-r from-red-50 to-yellow-100 dark:from-gray-900 dark:to-gray-800;
+	@apply bg-gradient-to-r from-red-50 to-amber-100 dark:from-gray-900 dark:to-gray-800;
 }
 .gradio-bg[theme="peach"] .gradio-interface {
 	.component-set {
@ -15,14 +15,14 @@
 		@apply rounded-lg bg-white dark:bg-gray-800 shadow;
 	}
 	.panel-button.submit {
-		@apply text-white bg-gradient-to-tr from-red-500 to-yellow-400;
+		@apply text-white bg-gradient-to-tr from-red-500 to-amber-400;
 	}
 	.examples {
 		.examples-holder:not(.gallery) {
 			.examples-table {
 				@apply bg-white dark:bg-gray-800;
 				tbody tr:hover {
-					@apply bg-yellow-500 dark:bg-red-800;
+					@apply bg-amber-500 dark:bg-red-800;
 				}
 			}
 		}
@ -31,7 +31,7 @@
 				@apply bg-white dark:bg-gray-800;
 			}
 			.example:hover {
-				@apply bg-yellow-500 dark:bg-red-800;
+				@apply bg-amber-500 dark:bg-red-800;
 			}
 		}
 	}
@ -48,10 +48,10 @@
 			@apply bg-gray-50 dark:bg-gray-700 rounded-lg;
 		}
 		.range::-webkit-slider-thumb {
-			@apply bg-gradient-to-tr from-red-500 to-yellow-400 rounded-lg shadow-sm;
+			@apply bg-gradient-to-tr from-red-500 to-amber-400 rounded-lg shadow-sm;
 		}
 		.range::-moz-range-thumb {
-			@apply bg-gradient-to-tr from-red-500 to-yellow-400 rounded-lg shadow-sm;
+			@apply bg-gradient-to-tr from-red-500 to-amber-400 rounded-lg shadow-sm;
 		}
 		.value {
 			@apply font-semibold text-gray-500 dark:bg-gray-700 dark:text-gray-50;
@ -62,7 +62,7 @@
 			@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
 		}
 		.radio-item.selected {
-			@apply bg-gradient-to-tr from-red-500 to-yellow-400 text-white shadow;
+			@apply bg-gradient-to-tr from-red-500 to-amber-400 text-white shadow;
 		}
 		.radio-circle {
 			@apply w-4 h-4 bg-white transition rounded-full box-border;
@ -75,7 +75,7 @@
 			@apply bg-gray-100 rounded-lg dark:bg-gray-700 dark:text-gray-50;
 		}
 		.checkbox-item.selected {
-			@apply bg-gradient-to-tr from-red-500 to-yellow-400 text-white shadow;
+			@apply bg-gradient-to-tr from-red-500 to-amber-400 text-white shadow;
 		}
 		.selected .checkbox {
 			@apply bg-gray-200 bg-opacity-20;
@ -102,7 +102,7 @@
 			@apply bg-gray-300 text-white dark:bg-gray-600 font-semibold rounded-lg;
 		}
 		.confidence:first-child {
-			@apply bg-gradient-to-tr from-red-500 to-yellow-400;
+			@apply bg-gradient-to-tr from-red-500 to-amber-400;
 		}
 	}
 }
--- a/ui/packages/app/src/themes/seafoam.css
+++ b/ui/packages/app/src/themes/seafoam.css
@ -1,5 +1,5 @@
 .gradio-bg[theme="seafoam"] {
-	@apply bg-yellow-100 dark:bg-gray-700;
+	@apply bg-amber-100 dark:bg-gray-700;
 }
 .gradio-bg[theme="seafoam"] .gradio-interface {
 	.component-set {
--- a/ui/pnpm-lock.yaml
+++ b/ui/pnpm-lock.yaml
@ -8,11 +8,13 @@ importers:
      prettier-plugin-svelte: ^2.6.0
      svelte: ^3.46.3
      svelte-check: ^2.4.1
+      vitest: ^0.3.2
    dependencies:
      prettier: 2.5.1
      prettier-plugin-svelte: 2.6.0_prettier@2.5.1+svelte@3.46.3
      svelte: 3.46.3
      svelte-check: 2.4.1_svelte@3.46.3
+      vitest: 0.3.2

  packages/app:
    specifiers:
@ -152,6 +154,16 @@ packages:
      - supports-color
    dev: true

+  /@types/chai-subset/1.3.3:
+    resolution: {integrity: sha512-frBecisrNGz+F4T6bcc+NLeolfiojh5FxW2klu669+8BARtyQv2C/GkNW6FUodVe4BroGMP/wER/YDGc7rEllw==}
+    dependencies:
+      '@types/chai': 4.3.0
+    dev: false
+
+  /@types/chai/4.3.0:
+    resolution: {integrity: sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw==}
+    dev: false
+
  /@types/d3-dsv/3.0.0:
    resolution: {integrity: sha512-o0/7RlMl9p5n6FQDptuJVMxDf/7EDEv2SYEO/CwdG2tr1hTfUVi0Iavkk2ax+VpaQ/1jVhpnj5rq1nj8vwhn2A==}
    dev: false
@ -326,6 +338,10 @@ packages:
    dev: false
    optional: true

+  /assertion-error/1.1.0:
+    resolution: {integrity: sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==}
+    dev: false
+
  /asynckit/0.4.0:
    resolution: {integrity: sha1-x57Zf380y48robyXkLzDZkdLS3k=}
    dev: false
@ -435,6 +451,19 @@ packages:
    dev: false
    optional: true

+  /chai/4.3.6:
+    resolution: {integrity: sha512-bbcp3YfHCUzMOvKqsztczerVgBKSsEijCySNlHHbX3VG1nskvqjz5Rfso1gGwD6w6oOV3eI60pKuMOV5MV7p3Q==}
+    engines: {node: '>=4'}
+    dependencies:
+      assertion-error: 1.1.0
+      check-error: 1.0.2
+      deep-eql: 3.0.1
+      get-func-name: 2.0.0
+      loupe: 2.3.4
+      pathval: 1.1.1
+      type-detect: 4.0.8
+    dev: false
+
  /chalk/2.4.2:
    resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}
    engines: {node: '>=4'}
@ -452,6 +481,10 @@ packages:
      supports-color: 7.2.0
    dev: true

+  /check-error/1.0.2:
+    resolution: {integrity: sha1-V00xLt2Iu13YkS6Sht1sCu1KrII=}
+    dev: false
+
  /chokidar/3.5.3:
    resolution: {integrity: sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==}
    engines: {node: '>= 8.10.0'}
@ -672,6 +705,13 @@ packages:
    dev: false
    optional: true

+  /deep-eql/3.0.1:
+    resolution: {integrity: sha512-+QeIQyN5ZuO+3Uk5DYh6/1eKO0m0YmJFGNmFHGACpf1ClL1nmlV/p4gNgbl2pJGxgXb4faqo6UE+M5ACEMyVcw==}
+    engines: {node: '>=0.12'}
+    dependencies:
+      type-detect: 4.0.8
+    dev: false
+
  /deep-is/0.1.4:
    resolution: {integrity: sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==}
    dev: false
@ -761,7 +801,6 @@ packages:
    cpu: [arm64]
    os: [android]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-darwin-64/0.13.15:
@ -769,7 +808,6 @@ packages:
    cpu: [x64]
    os: [darwin]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-darwin-arm64/0.13.15:
@ -777,7 +815,6 @@ packages:
    cpu: [arm64]
    os: [darwin]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-freebsd-64/0.13.15:
@ -785,7 +822,6 @@ packages:
    cpu: [x64]
    os: [freebsd]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-freebsd-arm64/0.13.15:
@ -793,7 +829,6 @@ packages:
    cpu: [arm64]
    os: [freebsd]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-linux-32/0.13.15:
@ -801,7 +836,6 @@ packages:
    cpu: [ia32]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-linux-64/0.13.15:
@ -809,7 +843,6 @@ packages:
    cpu: [x64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-linux-arm/0.13.15:
@ -817,7 +850,6 @@ packages:
    cpu: [arm]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-linux-arm64/0.13.15:
@ -825,7 +857,6 @@ packages:
    cpu: [arm64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-linux-mips64le/0.13.15:
@ -833,7 +864,6 @@ packages:
    cpu: [mips64el]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-linux-ppc64le/0.13.15:
@ -841,7 +871,6 @@ packages:
    cpu: [ppc64]
    os: [linux]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-netbsd-64/0.13.15:
@ -849,7 +878,6 @@ packages:
    cpu: [x64]
    os: [netbsd]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-openbsd-64/0.13.15:
@ -857,7 +885,6 @@ packages:
    cpu: [x64]
    os: [openbsd]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-sunos-64/0.13.15:
@ -865,7 +892,6 @@ packages:
    cpu: [x64]
    os: [sunos]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-windows-32/0.13.15:
@ -873,7 +899,6 @@ packages:
    cpu: [ia32]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-windows-64/0.13.15:
@ -881,7 +906,6 @@ packages:
    cpu: [x64]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild-windows-arm64/0.13.15:
@ -889,7 +913,6 @@ packages:
    cpu: [arm64]
    os: [win32]
    requiresBuild: true
-    dev: true
    optional: true

  /esbuild/0.13.15:
@ -914,7 +937,6 @@ packages:
      esbuild-windows-32: 0.13.15
      esbuild-windows-64: 0.13.15
      esbuild-windows-arm64: 0.13.15
-    dev: true

  /escalade/3.1.1:
    resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==}
@ -1059,7 +1081,6 @@ packages:

  /function-bind/1.1.1:
    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
-    dev: true

  /gauge/3.0.2:
    resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
@ -1077,6 +1098,10 @@ packages:
    dev: false
    optional: true

+  /get-func-name/2.0.0:
+    resolution: {integrity: sha1-6td0q+5y4gQJQzoGY2YCPdaIekE=}
+    dev: false
+
  /getpass/0.1.7:
    resolution: {integrity: sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=}
    dependencies:
@ -1148,7 +1173,6 @@ packages:
    engines: {node: '>= 0.4.0'}
    dependencies:
      function-bind: 1.1.1
-    dev: true

  /html-encoding-sniffer/1.0.2:
    resolution: {integrity: sha512-71lZziiDnsuabfdYiUeWdCVyKuqwWi23L8YeIgV9jSSZHCtb6wB1BKWooH7L3tn4/FuZJMVWyNaIDr4RGmaSYw==}
@ -1236,7 +1260,6 @@ packages:
    resolution: {integrity: sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==}
    dependencies:
      has: 1.0.3
-    dev: true

  /is-extglob/2.1.1:
    resolution: {integrity: sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=}
@ -1377,6 +1400,11 @@ packages:
    resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
    dev: true

+  /local-pkg/0.4.1:
+    resolution: {integrity: sha512-lL87ytIGP2FU5PWwNDo0w3WhIo2gopIAxPg9RxDYF7m4rr5ahuZxP22xnJHIvaLTe4Z9P6uKKY2UHiwyB4pcrw==}
+    engines: {node: '>=14'}
+    dev: false
+
  /lodash.sortby/4.7.0:
    resolution: {integrity: sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=}
    dev: false
@ -1387,6 +1415,12 @@ packages:
    dev: false
    optional: true

+  /loupe/2.3.4:
+    resolution: {integrity: sha512-OvKfgCC2Ndby6aSTREl5aCCPTNIzlDfQZvZxNUrBrihDhL3xcrYegTblhmEiCrg2kKQz4XsFIaemE5BF4ybSaQ==}
+    dependencies:
+      get-func-name: 2.0.0
+    dev: false
+
  /lru-cache/6.0.0:
    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
    engines: {node: '>=10'}
@ -1499,7 +1533,6 @@ packages:
    resolution: {integrity: sha512-fmsZYa9lpn69Ad5eDn7FMcnnSR+8R34W9qJEijxYhTbfOWzr22n1QxCMzXLK+ODyW2973V3Fux959iQoUxzUIA==}
    engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
    hasBin: true
-    dev: true

  /node-fetch/2.6.7:
    resolution: {integrity: sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==}
@ -1618,13 +1651,16 @@ packages:

  /path-parse/1.0.7:
    resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true

  /path-type/4.0.0:
    resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
    engines: {node: '>=8'}
    dev: true

+  /pathval/1.1.1:
+    resolution: {integrity: sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==}
+    dev: false
+
  /performance-now/2.1.0:
    resolution: {integrity: sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=}
    dev: false
@ -1705,7 +1741,6 @@ packages:
      nanoid: 3.2.0
      picocolors: 1.0.0
      source-map-js: 1.0.2
-    dev: true

  /prelude-ls/1.1.2:
    resolution: {integrity: sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=}
@ -1838,7 +1873,6 @@ packages:
      is-core-module: 2.8.1
      path-parse: 1.0.7
      supports-preserve-symlinks-flag: 1.0.0
-    dev: true

  /reusify/1.0.4:
    resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
@ -1865,7 +1899,6 @@ packages:
    hasBin: true
    optionalDependencies:
      fsevents: 2.3.2
-    dev: true

  /run-parallel/1.2.0:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
@ -1961,7 +1994,6 @@ packages:
  /source-map-js/1.0.2:
    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
    engines: {node: '>=0.10.0'}
-    dev: true

  /source-map/0.6.1:
    resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@ -2048,7 +2080,6 @@ packages:
  /supports-preserve-symlinks-flag/1.0.0:
    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
    engines: {node: '>= 0.4'}
-    dev: true

  /svelte-check/2.4.1_svelte@3.46.3:
    resolution: {integrity: sha512-xhf3ShP5rnRwBokrgTBJ/0cO9QIc1DAVu1NWNRTfCDsDBNjGmkS3HgitgUadRuoMKj1+irZR/yHJ+Uqobnkbrw==}
@ -2249,6 +2280,16 @@ packages:
    dev: false
    optional: true

+  /tinypool/0.1.2:
+    resolution: {integrity: sha512-fvtYGXoui2RpeMILfkvGIgOVkzJEGediv8UJt7TxdAOY8pnvUkFg/fkvqTfXG9Acc9S17Cnn1S4osDc2164guA==}
+    engines: {node: '>=14.0.0'}
+    dev: false
+
+  /tinyspy/0.2.10:
+    resolution: {integrity: sha512-Qij6rGWCDjWIejxCXXVi6bNgvrYBp3PbqC4cBP/0fD6WHDOHCw09Zd13CsxrDqSR5PFq01WeqDws8t5lz5sH0A==}
+    engines: {node: '>=14.0.0'}
+    dev: false
+
  /to-regex-range/5.0.1:
    resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
    engines: {node: '>=8.0'}
@ -2327,6 +2368,11 @@ packages:
    dev: false
    optional: true

+  /type-detect/4.0.8:
+    resolution: {integrity: sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==}
+    engines: {node: '>=4'}
+    dev: false
+
  /typescript/4.5.5:
    resolution: {integrity: sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==}
    engines: {node: '>=4.2.0'}
@ -2382,7 +2428,38 @@ packages:
      rollup: 2.66.1
    optionalDependencies:
      fsevents: 2.3.2
-    dev: true
+
+  /vitest/0.3.2:
+    resolution: {integrity: sha512-Xc0u8BVPBdD029uDcLSYDvy1MFenC6V8WvTJOGdld6NNWgz/swgsMvwZNzftsDohmHLgDyck8A+TaQdDd1tNwA==}
+    engines: {node: '>=14.14.0'}
+    hasBin: true
+    peerDependencies:
+      '@vitest/ui': '*'
+      c8: '*'
+      happy-dom: '*'
+      jsdom: '*'
+    peerDependenciesMeta:
+      '@vitest/ui':
+        optional: true
+      c8:
+        optional: true
+      happy-dom:
+        optional: true
+      jsdom:
+        optional: true
+    dependencies:
+      '@types/chai': 4.3.0
+      '@types/chai-subset': 1.3.3
+      chai: 4.3.6
+      local-pkg: 0.4.1
+      tinypool: 0.1.2
+      tinyspy: 0.2.10
+      vite: 2.7.13
+    transitivePeerDependencies:
+      - less
+      - sass
+      - stylus
+    dev: false

  /w3c-hr-time/1.0.2:
    resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
--- a/ui/vitest.config.ts
+++ b/ui/vitest.config.ts
@ -0,0 +1,3 @@
+import config from "./packages/app/vite.config";
+
+export default config;
--- a/website/homepage/.dockerignore
+++ b/website/homepage/.dockerignore
@ -1,5 +1,5 @@
-/node_modules
-/dist
-/generated
+node_modules
+dist
+generated
 client_secrets.json
 google_credentials.json
--- a/website/homepage/Dockerfile
+++ b/website/homepage/Dockerfile
@ -1,16 +1,20 @@
 FROM python:3.8

-RUN apt-get update --fix-missing
-RUN apt-get --assume-yes install npm nginx libcairo2-dev pkg-config python3-dev
+RUN apt-get update
+RUN curl -fsSL https://deb.nodesource.com/setup_14.x | bash -
+RUN apt-get install -y nodejs
+RUN npm install -g npm@latest
+RUN apt-get --assume-yes install nginx libcairo2-dev pkg-config python3-dev
 RUN pip install pandas matplotlib
 RUN mkdir gradio
 WORKDIR /gradio
-COPY ./frontend ./frontend
+COPY ./ui ./ui
 RUN mkdir gradio
 COPY ./gradio/version.txt ./gradio/version.txt
-WORKDIR /gradio/frontend
-RUN npm install
-RUN npm run build
+RUN npm i pnpm -g
+WORKDIR /gradio/ui
+RUN pnpm i
+RUN pnpm build
 WORKDIR /gradio
 COPY ./gradio ./gradio
 COPY ./setup.py ./setup.py
@ -25,6 +29,7 @@ COPY ./guides ./guides
 COPY ./demo ./demo
 WORKDIR /gradio/website/homepage
 ARG COLAB_NOTEBOOK_LINKS
+RUN mkdir -p generated dist
 RUN echo $COLAB_NOTEBOOK_LINKS > generated/colab_links.json
 RUN npm install
 RUN npm run build
@ -36,3 +41,4 @@ RUN cp -r /gradio/website/homepage/dist/. ./
 RUN cp /gradio/website/homepage/nginx.conf /etc/nginx/conf.d/default.conf

 ENTRYPOINT ["nginx", "-g", "daemon off;"]
+
--- a/website/homepage/render_html.py
+++ b/website/homepage/render_html.py
@ -44,7 +44,7 @@ def render_index():

 guides = []
 for guide in sorted(os.listdir(GRADIO_GUIDES_DIR)):
-    if guide.lower() in ["getting_started.md", "readme.md"]:
+    if guide.lower() == "readme.md":
        continue
    guide_name = guide[:-3]
    pretty_guide_name = " ".join(
@ -108,6 +108,7 @@ def render_guides():
        code_tags = re.findall(r'\{\{ code\["([^\s]*)"\] \}\}', guide["content"])
        demo_names = re.findall(r'\{\{ demos\["([^\s]*)"\] \}\}', guide["content"])
        code, demos = {}, {}
+
        guide["content"] = (
            guide["content"]
            .replace("website/src/assets", "/assets")
@ -144,14 +145,13 @@ def render_guides():
            guide_output,
        )

-        output_html = markdown2.markdown(guide_output, extras=["target-blank-links"])
-
-        for match in re.findall(r"<h3>([A-Za-z0-9 ]*)<\/h3>", output_html):
-            output_html = output_html.replace(
-                f"<h3>{match}</h3>",
-                f"<h3 id={match.lower().replace(' ', '_')}>{match}</h3>",
-            )
+        copy_button = "<button class='copy flex float-right cursor-pointer rounded-l-none rounded-r mx-0 my-2' " \
+                      "onclick='copyCode(this)'><img class='copy-svg m0 w-7 flex-initial' " \
+                      "src='/assets/img/copy-grey.svg'><div class='flex-auto'></div></button>"
+        guide_output = guide_output.replace("<pre>", "<div class='code-block' style='display: flex'><pre>")
+        guide_output = guide_output.replace("</pre>", f"</pre>{copy_button}</div>")

+        output_html = markdown2.markdown(guide_output, extras=["target-blank-links", "header-ids"])
        os.makedirs("generated", exist_ok=True)
        os.makedirs(os.path.join("generated", guide["name"]), exist_ok=True)
        with open(
--- a/website/homepage/src/assets/img/anchor.svg
+++ b/website/homepage/src/assets/img/anchor.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="#808080" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>
--- a/website/homepage/src/assets/img/copy-grey.svg
+++ b/website/homepage/src/assets/img/copy-grey.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill: #808080;"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/></svg>
--- a/website/homepage/src/assets/img/copy-orange.svg
+++ b/website/homepage/src/assets/img/copy-orange.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" style="fill: #eb9f59;"><!-- Font Awesome Pro 5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/></svg>
--- a/website/homepage/src/guides_template.html
+++ b/website/homepage/src/guides_template.html
@ -28,7 +28,7 @@

    .prose p>img {
      margin: 0 auto;
-      width: 600px;
+      width: 900px;
      max-width: 100%;
    }

@ -42,6 +42,8 @@

    .prose .code,
    .prose pre {
+      width: 95%;
+      border-radius: 4px 0 0 4px;
      color: black;
      background: rgb(249, 250, 251);
    }
@ -53,6 +55,34 @@
    .prose h1 {
      font-weight: 600;
    }
+
+    .anchor-img {
+      margin: 0 0 0 5px !important;
+    }
+
+    .anchor {
+      visibility: hidden;
+    }
+
+    .header:hover .anchor {
+      visibility: visible;
+    }
+
+    .copy {
+      padding-right: 1em;
+      background: #f9fafb;
+    }
+
+    .copy-svg {
+      visibility: hidden;
+      margin: 1em 0 0 0 !important;
+      width: 20px;
+    }
+
+    .code-block:hover .copy-svg {
+       visibility: visible;
+    }
+
  </style>
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-156449732-1"></script>
  <script>
@ -69,23 +99,18 @@
  {{navbar_html|safe}}
  <div class="container mx-auto max-w-4xl px-4 mb-12 mt-6" id="guide-template">
    {% if spaces is not none %}
-    <p class='mb-2 text-sm text-gray-500'>
-      <span class="italic">Related Spaces:</span>
-      {% for space in spaces %}
-        <a href='{{ space }}' target='_blank' class="hover:text-blue-500 transition">{{ space[30:] }}</a>
-        {% if not loop.last %}, {% endif %}
-      {% endfor %}
-    </p>
-    {% endif %}
+    <div id='spaces-holder'>
+      <a href='https://hf.co/spaces' target='_blank'>
+        <img class="inline-block my-0 mx-auto w-5 max-w-full pb-1" src='/assets/img/spaces-logo.svg'>
+      </a>
+      <p class="m-0 inline text-lg font-normal">Related Spaces: </p>

-    {% if tags is not none %}
-    <p class='mb-2 text-sm text-gray-500'>
-      <span class="italic">Tags:</span>
-      {% for tag in tags %}
-        <span>{{ tag }}</span><!--
-     -->{% if not loop.last %}, {% endif %}
+      {% for space in spaces %}
+      <div class='space-link inline-block m-1 px-1 rounded-md'>
+        <a href='{{space}}' target='_blank' class="no-underline">{{space[30:]}}</a>
+      </div>
      {% endfor %}
-    </p>
+      </div>
    {% endif %}

    <div class="prose mt-6">
@ -121,6 +146,62 @@
          });
      });
    });
+    function createAnchorTag(link) {
+            let a = document.createElement('a');
+            a.href = link;
+            a.classList.add("anchor");
+            let img = document.createElement('img');
+            img.classList.add("anchor-img", "w-7", "max-w-full", "inline-block", "mr-0", "ml-1")
+            img.src = "/assets/img/anchor.svg";
+            a.appendChild(img);
+            return a;
+        }
+    var headers = document.querySelectorAll("h1, h2, h3, h4, h5, h6");
+    for (let i = 0; i < headers.length; i++) {
+      headers[i].classList.add("header");
+      let link = '#' + headers[i].id;
+      headers[i].appendChild(createAnchorTag(link))
+    }
+
+    function copyCode(elem) {
+        var text = elem.parentElement.innerText;
+        navigator.clipboard.writeText(text);
+        elem.firstChild.src = "/assets/img/copy-orange.svg"
+        setTimeout(function(){
+          elem.firstChild.src = "/assets/img/copy-grey.svg"
+        }, 600);
+    };
+
+    var spacesHolder, spaces;
+    spacesHolder = document.getElementById("spaces-holder");
+    spaces = spacesHolder.getElementsByTagName('div');
+
+    var backgrounds = ['rgba(255,254,188,0.3)',
+                       'rgba(255,205,188,0.3)',
+                       'rgba(255,188,188,0.3)',
+                       'rgba(194,255,169,0.3)',
+                       'rgba(169,255,237,0.3)',
+                       'rgba(182,169,255,0.3)',
+                       'rgba(255,183,245,0.3)']
+
+    function shuffleBackgrounds(array) {
+      for (let i = array.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [array[i], array[j]] = [array[j], array[i]];
+      }
+    }
+
+    shuffleBackgrounds(backgrounds);
+
+    color_counter = 0
+    for (let i = 0; i < spaces.length; i++) {
+      spaces[i].style.background = backgrounds[color_counter];
+      color_counter += 1
+      if (color_counter == backgrounds.length) {
+        color_counter = 0;
+      }
+    }
+
  </script>

 </body>
--- a/website/homepage/src/navbar.html
+++ b/website/homepage/src/navbar.html
@ -17,7 +17,7 @@
        <span>✍️</span>
        <span>Docs</span>
      </a>
-      <a class="link flex gap-3 items-center" href="/guides.html">
+      <a class="link flex gap-3 items-center" href="/guides">
        <span>💡</span>
        <span>Guides</span>
      </a>
@ -33,7 +33,7 @@
          <a class="link px-4 py-2 inline-block hover:bg-gray-100"
            href="https://discuss.huggingface.co/c/gradio/26" target="_blank">Discuss</a>
          <a class="link px-4 py-2 inline-block hover:bg-gray-100" target="_blank"
-            href="https://discord.gg/Vuujh8wt">Discord</a>
+            href="https://discord.gg/feTf9x3ZSB">Discord</a>
          <a class="link px-4 py-2 inline-block hover:bg-gray-100" target="_blank"
            href="https://gradio.curated.co/">Newsletter</a>
        </div>
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" fill="#808080" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg>