Merge pull request #546 from gradio-app/dawood/i18n

dawood/i18n

gradio/templates/frontend/lang/en.json

@@ -0,0 +1,14 @@
+{
+  "interface": {
+    "submit": "Submit",
+    "clear": "Clear",
+    "interpret": "Interpret",
+    "flag": "Flag",
+    "examples": "Examples",
+    "drop_image": "Drop Image Here",
+    "or": "or",
+    "click_to_upload": "Click to Upload",
+    "view_api": "view the api",
+    "built_with_Gradio": "built with gradio"
+  }
+}

gradio/templates/frontend/lang/es.json

@@ -0,0 +1,14 @@
+{
+  "interface": {
+    "submit": "Enviar",
+    "clear": "Limpiar",
+    "interpret": "Interpretar",
+    "flag": "Avisar",
+    "examples": "Ejemplos",
+    "drop_image": "Coloque la Imagen Aquí",
+    "or": "o",
+    "click_to_upload": "Haga Clic para Cargar",
+    "view_api": "Para ver la API",
+    "built_with_Gradio": "Construido con Gradio"
+  }
+}

ui/package.json

@@ -19,6 +19,7 @@
 		"prettier-plugin-svelte": "^2.6.0",
 		"svelte": "^3.46.3",
 		"svelte-check": "^2.4.1",
+		"svelte-i18n": "^3.3.13",
 		"vitest": "^0.3.2"
 	}
 }

ui/packages/app/public/lang/en.json

@@ -0,0 +1,18 @@
+{
+  "interface": {
+    "submit": "Submit",
+    "clear": "Clear",
+    "interpret": "Interpret",
+    "flag": "Flag",
+    "examples": "Examples",
+    "drop_image": "Drop Image Here",
+    "drop_video": "Drop Video Here",
+    "drop_audio": "Drop Audio Here",
+    "drop_file": "Drop File Here",
+    "drop_csv": "Drop CSV Here",
+    "or": "or",
+    "click_to_upload": "Click to Upload",
+    "view_api": "view the api",
+    "built_with_Gradio": "built with gradio"
+  }
+}

ui/packages/app/public/lang/es.json

@@ -0,0 +1,18 @@
+{
+  "interface": {
+    "submit": "Enviar",
+    "clear": "Limpiar",
+    "interpret": "Interpretar",
+    "flag": "Avisar",
+    "examples": "Ejemplos",
+    "drop_image": "Coloque la Imagen Aquí",
+    "drop_video": "Coloque la Video Aquí",
+    "drop_audio": "Coloque la Audio Aquí",
+    "drop_file": "Coloque la Archivo Aquí",
+    "drop_csv": "Coloque el CSV Aquí",
+    "or": "o",
+    "click_to_upload": "Haga Clic para Cargar",
+    "view_api": "Para ver la API",
+    "built_with_Gradio": "Construido con Gradio"
+  }
+}

ui/packages/app/src/App.svelte

@@ -13,6 +13,9 @@
 	import "./themes/grass.css";
 	import "./themes/peach.css";
 	import "./themes/seafoam.css";
+	import { _ } from "svelte-i18n";
+	import { setupi18n } from "./i18n";
+	setupi18n();
 
 	interface Component {
 		name: string;
@@ -99,17 +102,18 @@
 				class="footer flex-shrink-0 inline-flex gap-2.5 items-center text-gray-400 justify-center py-2"
 			>
 				<a href="api" target="_blank" rel="noreferrer">
-					view the api
+					{$_("interface.view_api")}
 					<img
-						class="h-5 inline-block"
+						class="h-4 inline-block"
 						src="{static_src}/static/img/api-logo.svg"
 						alt="api"
 					/>
 				</a>
 				&bull;
 				<a href="https://gradio.app" target="_blank" rel="noreferrer">
-					built with <img
-						class="h-6 inline-block"
+					{$_("interface.built_with_Gradio")}
+					<img
+						class="h-5 inline-block"
 						src="{static_src}/static/img/logo.svg"
 						alt="logo"
 					/>

ui/packages/app/src/ExampleSet.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { input_component_map } from "./components/directory";
+	import { _ } from "svelte-i18n";
 
 	interface Component {
 		name: string;
@@ -19,7 +20,7 @@
 </script>
 
 <div class="examples" {theme}>
-	<h4 class="text-lg font-semibold my-2">Examples</h4>
+	<h4 class="text-lg font-semibold my-2">{$_("interface.examples")}</h4>
 	<div
 		class="examples-holder mt-4 inline-block max-w-full"
 		class:gallery

ui/packages/app/src/Interface.svelte

@@ -5,6 +5,7 @@
 	} from "./components/directory";
 	import { deepCopy } from "./components/utils/helpers";
 	import ExampleSet from "./ExampleSet.svelte";
+	import { _ } from "svelte-i18n";
 
 	interface Component {
 		name: string;
@@ -222,13 +223,13 @@
 					class="panel-button bg-gray-50 dark:bg-gray-700 flex-1 p-3 rounded transition font-semibold focus:outline-none"
 					on:click={clear}
 				>
-					Clear
+					{$_("interface.clear")}
 				</button>
 				<button
 					class="panel-button submit bg-gray-50 dark:bg-gray-700 flex-1 p-3 rounded transition font-semibold focus:outline-none"
 					on:click={submit}
 				>
-					Submit
+					{$_("interface.submit")}
 				</button>
 			</div>
 		</div>
@@ -295,7 +296,7 @@
 						{#if interpret_mode}
 							Hide
 						{:else}
-							Interpret
+							{$_("interface.interpret")}
 						{/if}
 					</button>
 				{/if}
@@ -304,7 +305,7 @@
 						class="panel-button flag bg-gray-50 dark:bg-gray-700 flex-1 p-3 rounded transition font-semibold focus:outline-none"
 						on:click={flag}
 					>
-						Flag
+						{$_("interface.flag")}
 					</button>
 				{/if}
 			</div>

ui/packages/app/src/components/input/Audio/Audio.svelte

@@ -6,6 +6,7 @@
 	import ModifyUpload from "../../utils/ModifyUpload.svelte";
 	//@ts-ignore
 	import Range from "svelte-range-slider-pips";
+	import { _ } from "svelte-i18n";
 
 	export let value: null | Value;
 	export let setValue: (val: typeof value) => typeof value;
@@ -135,9 +136,9 @@
 			{/if}
 		{:else if source === "upload"}
 			<Upload filetype="audio/*" load={setValue} {theme}>
-				Drop Audio Here
-				<br />- or -<br />
-				Click to Upload
+				{$_("interface.drop_audio")}
+				<br />- {$_("interface.or")} -<br />
+				{$_("interface.click_to_upload")}
 			</Upload>
 		{/if}
 	{:else}

ui/packages/app/src/components/input/File/File.svelte

@@ -3,6 +3,7 @@
 	import Upload from "../../utils/Upload.svelte";
 	import ModifyUpload from "../../utils/ModifyUpload.svelte";
 	import { prettyBytes } from "../../utils/helpers";
+	import { _ } from "svelte-i18n";
 
 	export let value: null | FileData;
 	export let setValue: (
@@ -15,9 +16,9 @@
 <div class="input-file" {theme}>
 	{#if value === null}
 		<Upload load={setValue} {theme}>
-			Drop File Here
-			<br />- or -<br />
-			Click to Upload
+			{$_("interface.drop_file")}
+			<br />- {$_("interface.or")} -<br />
+			{$_("interface.click_to_upload")}
 		</Upload>
 	{:else}
 		<div

ui/packages/app/src/components/input/Image/Image.svelte

@@ -7,6 +7,7 @@
 	import ImageEditor from "../../utils/ImageEditor.svelte";
 	import Sketch from "../../utils/Sketch.svelte";
 	import Webcam from "../../utils/Webcam.svelte";
+	import { _ } from "svelte-i18n";
 	export let value: null | string;
 	export let setValue: (val: typeof value) => typeof value;
 	export let theme: string;
@@ -60,9 +61,9 @@
 					include_file_metadata={false}
 					{theme}
 				>
-					Drop Image Here
-					<br />- or -<br />
-					Click to Upload
+					{$_("interface.drop_image")}
+					<br />- {$_("interface.or")} -<br />
+					{$_("interface.click_to_upload")}
 				</Upload>
 			{:else if source === "webcam"}
 				<Webcam on:capture={({ detail }) => setValue(detail)} {static_src} />

ui/packages/app/src/components/input/TimeSeries/TimeSeries.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import Upload from "../../utils/Upload.svelte";
 	import Chart from "../../utils/Chart.svelte";
+	import { _ } from "svelte-i18n";
 
 	interface Data {
 		data: Array<Array<number>> | string;
@@ -103,8 +104,8 @@
 		include_file_metadata={false}
 		{theme}
 	>
-		Drop CSV Here
-		<br />- or -<br />
-		Click to Upload
+		{$_("interface.drop_csv")}
+		<br />- {$_("interface.or")} -<br />
+		{$_("interface.click_to_upload")}
 	</Upload>
 {/if}

ui/packages/app/src/components/input/Video/Video.svelte

@@ -2,6 +2,7 @@
 	import Upload from "../../utils/Upload.svelte";
 	import ModifyUpload from "../../utils/ModifyUpload.svelte";
 	import { prettyBytes, playable } from "../../utils/helpers";
+	import { _ } from "svelte-i18n";
 
 	interface Data {
 		data: string;
@@ -39,9 +40,9 @@
 				load={handle_load}
 				{theme}
 			>
-				Drop Video Here
-				<br />- or -<br />
-				Click to Upload
+				{$_("interface.drop_video")}
+				<br />- {$_("interface.or")} -<br />
+				{$_("interface.click_to_upload")}
 			</Upload>
 		{/if}
 	{:else}

ui/packages/app/src/i18n.js

@@ -0,0 +1,13 @@
+import { addMessages, init, getLocaleFromNavigator } from "svelte-i18n";
+import en from "../public/lang/en.json";
+import es from "../public/lang/es.json";
+
+addMessages("en", en);
+addMessages("es", es);
+
+export function setupi18n() {
+	init({
+		fallbackLocale: "en",
+		initialLocale: getLocaleFromNavigator()
+	});
+}

ui/pnpm-lock.yaml

@@ -8,12 +8,14 @@ importers:
       prettier-plugin-svelte: ^2.6.0
       svelte: ^3.46.3
       svelte-check: ^2.4.1
+      svelte-i18n: ^3.3.13
       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
+      svelte-i18n: 3.3.13_svelte@3.46.3
       vitest: 0.3.2
 
   packages/app:
@@ -87,6 +89,40 @@ packages:
       js-tokens: 4.0.0
     dev: true
 
+  /@formatjs/ecma402-abstract/1.11.3:
+    resolution: {integrity: sha512-kP/Buv5vVFMAYLHNvvUzr0lwRTU0u2WTy44Tqwku1X3C3lJ5dKqDCYVqA8wL+Y19Bq+MwHgxqd5FZJRCIsLRyQ==}
+    dependencies:
+      '@formatjs/intl-localematcher': 0.2.24
+      tslib: 2.3.1
+    dev: false
+
+  /@formatjs/fast-memoize/1.2.1:
+    resolution: {integrity: sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==}
+    dependencies:
+      tslib: 2.3.1
+    dev: false
+
+  /@formatjs/icu-messageformat-parser/2.0.18:
+    resolution: {integrity: sha512-vquIzsAJJmZ5jWVH8dEgUKcbG4yu3KqtyPet+q35SW5reLOvblkfeCXTRW2TpIwNXzdVqsJBwjbTiRiSU9JxwQ==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.11.3
+      '@formatjs/icu-skeleton-parser': 1.3.5
+      tslib: 2.3.1
+    dev: false
+
+  /@formatjs/icu-skeleton-parser/1.3.5:
+    resolution: {integrity: sha512-Nhyo2/6kG7ZfgeEfo02sxviOuBcvtzH6SYUharj3DLCDJH3A/4OxkKcmx/2PWGX4bc6iSieh+FA94CsKDxnZBQ==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.11.3
+      tslib: 2.3.1
+    dev: false
+
+  /@formatjs/intl-localematcher/0.2.24:
+    resolution: {integrity: sha512-K/HRGo6EMnCbhpth/y3u4rW4aXkmQNqRe1L2G+Y5jNr3v0gYhvaucV8WixNju/INAMbPBlbsRBRo/nfjnoOnxQ==}
+    dependencies:
+      tslib: 2.3.1
+    dev: false
+
   /@mapbox/node-pre-gyp/1.0.8:
     resolution: {integrity: sha512-CMGKi28CF+qlbXh26hDe6NxCd7amqeAzEqnS6IHeO6LoaKyM/n+Xw3HT1COdq8cuioOdlKdqn/hCmqPUOMOywg==}
     hasBin: true
@@ -717,6 +753,11 @@ packages:
     dev: false
     optional: true
 
+  /deepmerge/4.2.2:
+    resolution: {integrity: sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /defined/1.0.0:
     resolution: {integrity: sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=}
     dev: true
@@ -977,7 +1018,6 @@ packages:
 
   /estree-walker/2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-    dev: true
 
   /esutils/2.0.3:
     resolution: {integrity: sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==}
@@ -1080,7 +1120,19 @@ packages:
     optional: true
 
   /function-bind/1.1.1:
+<<<<<<< HEAD
+<<<<<<< HEAD
+    resolution:
+      {
+        integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+      }
+=======
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+>>>>>>> parent of 2438b0bb (more pretty formatting)
+    dev: true
+=======
+    resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
+>>>>>>> master
 
   /gauge/3.0.2:
     resolution: {integrity: sha512-+5J6MS/5XksCuXq++uFRsnUd7Ovu1XenbeuIuNRJxYWjgQbPuFhT14lAvsWfqfAmnwluf1OwMjz39HjfLPci0Q==}
@@ -1133,6 +1185,14 @@ packages:
       path-is-absolute: 1.0.1
     dev: false
 
+  /globalyzer/0.1.0:
+    resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
+    dev: false
+
+  /globrex/0.1.2:
+    resolution: {integrity: sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==}
+    dev: false
+
   /graceful-fs/4.2.9:
     resolution: {integrity: sha512-NtNxqUcXgpW2iMrfqSfR73Glt39K+BLwWsPs94yR63v45T0Wbej7eRmL5cWfwEgqXnmjQp3zaJTshdRW/qC2ZQ==}
     dev: false
@@ -1240,6 +1300,15 @@ packages:
     engines: {node: '>=12'}
     dev: false
 
+  /intl-messageformat/9.11.4:
+    resolution: {integrity: sha512-77TSkNubIy/hsapz6LQpyR6OADcxhWdhSaboPb5flMaALCVkPvAIxr48AlPqaMl4r1anNcvR9rpLWVdwUY1IKg==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.11.3
+      '@formatjs/fast-memoize': 1.2.1
+      '@formatjs/icu-messageformat-parser': 2.0.18
+      tslib: 2.3.1
+    dev: false
+
   /ip-regex/2.1.0:
     resolution: {integrity: sha1-+ni/XS5pE8kRzp+BnuUUa7bYROk=}
     engines: {node: '>=4'}
@@ -1651,6 +1720,10 @@ packages:
 
   /path-parse/1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
+<<<<<<< HEAD
+=======
+    dev: true
+>>>>>>> parent of 2438b0bb (more pretty formatting)
 
   /path-type/4.0.0:
     resolution: {integrity: sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==}
@@ -1992,8 +2065,22 @@ packages:
     dev: false
 
   /source-map-js/1.0.2:
+<<<<<<< HEAD
+<<<<<<< HEAD
+    resolution:
+      {
+        integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+      }
+    engines: { node: ">=0.10.0" }
+=======
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
+>>>>>>> parent of 2438b0bb (more pretty formatting)
+    dev: true
+=======
+    resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
+    engines: {node: '>=0.10.0'}
+>>>>>>> master
 
   /source-map/0.6.1:
     resolution: {integrity: sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==}
@@ -2078,8 +2165,22 @@ packages:
     dev: true
 
   /supports-preserve-symlinks-flag/1.0.0:
+<<<<<<< HEAD
+<<<<<<< HEAD
+    resolution:
+      {
+        integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+      }
+    engines: { node: ">= 0.4" }
+=======
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
+>>>>>>> parent of 2438b0bb (more pretty formatting)
+    dev: true
+=======
+    resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
+    engines: {node: '>= 0.4'}
+>>>>>>> master
 
   /svelte-check/2.4.1_svelte@3.46.3:
     resolution: {integrity: sha512-xhf3ShP5rnRwBokrgTBJ/0cO9QIc1DAVu1NWNRTfCDsDBNjGmkS3HgitgUadRuoMKj1+irZR/yHJ+Uqobnkbrw==}
@@ -2118,6 +2219,21 @@ packages:
       svelte: 3.46.3
     dev: true
 
+  /svelte-i18n/3.3.13_svelte@3.46.3:
+    resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
+    engines: {node: '>= 11.15.0'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.25.1
+    dependencies:
+      deepmerge: 4.2.2
+      estree-walker: 2.0.2
+      intl-messageformat: 9.11.4
+      sade: 1.8.1
+      svelte: 3.46.3
+      tiny-glob: 0.2.9
+    dev: false
+
   /svelte-preprocess/4.10.2_postcss@8.4.6+svelte@3.46.3:
     resolution: {integrity: sha512-aPpkCreSo8EL/y8kJSa1trhiX0oyAtTjlNNM7BNjRAsMJ8Yy2LtqHt0zyd4pQPXt+D4PzbO3qTjjio3kwOxDlA==}
     engines: {node: '>= 9.11.2'}
@@ -2280,6 +2396,13 @@ packages:
     dev: false
     optional: true
 
+<<<<<<< HEAD
+  /tiny-glob/0.2.9:
+    resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
+    dependencies:
+      globalyzer: 0.1.0
+      globrex: 0.1.2
+=======
   /tinypool/0.1.2:
     resolution: {integrity: sha512-fvtYGXoui2RpeMILfkvGIgOVkzJEGediv8UJt7TxdAOY8pnvUkFg/fkvqTfXG9Acc9S17Cnn1S4osDc2164guA==}
     engines: {node: '>=14.0.0'}
@@ -2288,6 +2411,7 @@ packages:
   /tinyspy/0.2.10:
     resolution: {integrity: sha512-Qij6rGWCDjWIejxCXXVi6bNgvrYBp3PbqC4cBP/0fD6WHDOHCw09Zd13CsxrDqSR5PFq01WeqDws8t5lz5sH0A==}
     engines: {node: '>=14.0.0'}
+>>>>>>> master
     dev: false
 
   /to-regex-range/5.0.1:
@@ -2327,6 +2451,10 @@ packages:
     dev: false
     optional: true
 
+  /tslib/2.3.1:
+    resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
+    dev: false
+
   /tui-code-snippet/1.5.2:
     resolution: {integrity: sha512-6UqTlQaaC1KLcmC0HAoq5dtl1G4Fib+R+NC7pmaV7kiIlZ7JqKhUmnOoGRcreAyzd81UTK/vCvhrw9QJskpCFQ==}
     dev: false

website/homepage/src/guides_template.html

@@ -28,7 +28,7 @@
 
     .prose p>img {
       margin: 0 auto;
-      width: 900px;
+      width: 600px;
       max-width: 100%;
     }
 
@@ -111,6 +111,23 @@
       </div>
       {% endfor %}
       </div>
+    <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 %}
+
+    {% 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 %}
+      {% endfor %}
+    </p>
     {% endif %}
 
     <div class="prose mt-6">
@@ -206,4 +223,4 @@
 
 </body>
 
-</html>
+</html>