Playground v1 (#5386)

* changes

* broken

* working

* working

* add changeset

* useing gradio code component

* rework demos

* lockfile

* fix anyio error

* add changeset

* changes

* many changes

* add changeset

* lockfile

* demos

* new

* fix load issue

* sizing and spacing

* gutters not transparent

* styling

* mobile responsive

* fix meta image

* remove ffmpeg demos

* use latest lite

* bring back demo names

* more mobile responsive

* latest cdn

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/olive-roses-vanish.md

@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Playground v1

demo/fake_diffusion/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: fake_diffusion\n", "### This demo uses a fake model to showcase iterative output. The Image output will update every time a generator is returned until the final image.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import time\n", "\n", "# define core fn, which returns a generator {steps} times before returning the image\n", "def fake_diffusion(steps):\n", "    for _ in range(steps):\n", "        time.sleep(1)\n", "        image = np.random.random((600, 600, 3))\n", "        yield image\n", "    image = \"https://gradio-builds.s3.amazonaws.com/diffusion_image/cute_dog.jpg\"\n", "    yield image\n", "\n", "\n", "demo = gr.Interface(fake_diffusion, inputs=gr.Slider(1, 10, 3), outputs=\"image\")\n", "\n", "# define queue - required for generators\n", "demo.queue()\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: fake_diffusion\n", "### This demo uses a fake model to showcase iterative output. The Image output will update every time a generator is returned until the final image.\n", "        "]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "import time\n", "\n", "# define core fn, which returns a generator {steps} times before returning the image\n", "def fake_diffusion(steps):\n", "    for _ in range(steps):\n", "        time.sleep(1)\n", "        image = np.random.random((600, 600, 3))\n", "        yield image\n", "    image = np.ones((1000,1000,3), np.uint8)\n", "    image[:] = [255, 124, 0]\n", "    yield image\n", "\n", "\n", "demo = gr.Interface(fake_diffusion, inputs=gr.Slider(1, 10, 3), outputs=\"image\")\n", "\n", "# define queue - required for generators\n", "demo.queue()\n", "\n", "demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/fake_diffusion/run.py

@@ -8,7 +8,8 @@ def fake_diffusion(steps):
         time.sleep(1)
         image = np.random.random((600, 600, 3))
         yield image
-    image = "https://gradio-builds.s3.amazonaws.com/diffusion_image/cute_dog.jpg"
+    image = np.ones((1000,1000,3), np.uint8)
+    image[:] = [255, 124, 0]
     yield image
 
 

demo/reverse_audio_2/requirements.txt

@@ -0,0 +1 @@
+numpy

demo/reverse_audio_2/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: reverse_audio_2"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio numpy"]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import numpy as np\n", "\n", "\n", "def reverse_audio(audio):\n", "    sr, data = audio\n", "    return (sr, np.flipud(data))\n", "\n", "\n", "demo = gr.Interface(fn=reverse_audio, \n", "                    inputs=\"microphone\", \n", "                    outputs=\"audio\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/reverse_audio_2/run.py

@@ -0,0 +1,15 @@
+import gradio as gr
+import numpy as np
+
+
+def reverse_audio(audio):
+    sr, data = audio
+    return (sr, np.flipud(data))
+
+
+demo = gr.Interface(fn=reverse_audio, 
+                    inputs="microphone", 
+                    outputs="audio")
+
+if __name__ == "__main__":
+    demo.launch()

demo/tabbed_interface_lite/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: tabbed_interface_lite"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "hello_world = gr.Interface(lambda name: \"Hello \" + name, \"text\", \"text\")\n", "bye_world = gr.Interface(lambda name: \"Bye \" + name, \"text\", \"text\")\n", "\n", "demo = gr.TabbedInterface([hello_world, bye_world], [\"Hello World\", \"Bye World\"])\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/tabbed_interface_lite/run.py

@@ -0,0 +1,9 @@
+import gradio as gr
+
+hello_world = gr.Interface(lambda name: "Hello " + name, "text", "text")
+bye_world = gr.Interface(lambda name: "Bye " + name, "text", "text")
+
+demo = gr.TabbedInterface([hello_world, bye_world], ["Hello World", "Bye World"])
+
+if __name__ == "__main__":
+    demo.launch()

demo/video_identity/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: video_identity"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('video')\n", "!wget -q -O video/video_sample.mp4 https://github.com/gradio-app/gradio/raw/main/demo/video_identity/video/video_sample.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "\n", "\n", "def video_identity(video):\n", "    return video\n", "\n", "\n", "demo = gr.Interface(video_identity, \n", "                    gr.Video(), \n", "                    \"playable_video\", \n", "                    examples=[\n", "                        os.path.join(os.path.abspath(''), \n", "                                     \"video/video_sample.mp4\")], \n", "                    cache_examples=True)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: video_identity"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["# Downloading files from the demo repo\n", "import os\n", "os.mkdir('video')\n", "!wget -q -O video/video_sample.mp4 https://github.com/gradio-app/gradio/raw/main/demo/video_identity/video/video_sample.mp4"]}, {"cell_type": "code", "execution_count": null, "id": "44380577570523278879349135829904343037", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import os\n", "\n", "\n", "def video_identity(video):\n", "    return video\n", "\n", "\n", "demo = gr.Interface(video_identity, \n", "                    gr.Video(), \n", "                    \"playable_video\", \n", "                    examples=[\n", "                        os.path.join(os.path.abspath(''), \n", "                                     \"video/video_sample.mp4\")], \n", "                    cache_examples=True)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/video_identity/run.py

@@ -15,4 +15,4 @@ demo = gr.Interface(video_identity,
                     cache_examples=True)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()

demo/video_identity_2/run.ipynb

@@ -0,0 +1 @@
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: video_identity_2"]}, {"cell_type": "code", "execution_count": null, "id": "272996653310673477252411125948039410165", "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": "288918539441861185822528903084949547379", "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "\n", "def video_identity(video):\n", "    return video\n", "\n", "\n", "demo = gr.Interface(video_identity, \n", "                    gr.Video(), \n", "                    \"playable_video\", \n", "                    )\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/video_identity_2/run.py

@@ -0,0 +1,13 @@
+import gradio as gr
+
+def video_identity(video):
+    return video
+
+
+demo = gr.Interface(video_identity, 
+                    gr.Video(), 
+                    "playable_video", 
+                    )
+
+if __name__ == "__main__":
+    demo.launch()

js/_website/generate_jsons/src/demos/__init__.py

@@ -4,143 +4,131 @@ import os
 DIR = os.path.dirname(__file__)
 GRADIO_DEMO_DIR = os.path.abspath(os.path.join(DIR, "../../../../../demo/"))
 
-def get_code_and_description(demo_name):
+def get_code_description_and_reqs(demo_name):
     with open(os.path.join(GRADIO_DEMO_DIR, demo_name, "run.py")) as f:
         code = f.read()
-    with open(os.path.join(GRADIO_DEMO_DIR, demo_name, "DESCRIPTION.md")) as f:
-        description = f.read()
-    return code, description
+    description = ""
+    if os.path.exists(os.path.join(GRADIO_DEMO_DIR, demo_name, "DESCRIPTION.md")):
+        with open(os.path.join(GRADIO_DEMO_DIR, demo_name, "DESCRIPTION.md")) as f:
+            description = f.read()
+    requirements = []
+    if os.path.exists(os.path.join(GRADIO_DEMO_DIR, demo_name, "requirements.txt")):
+        with open(os.path.join(GRADIO_DEMO_DIR, demo_name, "requirements.txt")) as f:
+            requirements = f.read().strip().split("\n")
+    return code, description, requirements
 
 
 demos_by_category = [
     {
-        "category": "🖊️ Text & Natural Language Processing",
+        "category": "Text",
         "demos": [
             {
                 "name": "Hello World", 
                 "dir": "hello_world", 
             },
             {
-                "name": "Text Generation", 
-                "dir": "text_generation", 
+                "name": "Hello Blocks", 
+                "dir": "hello_blocks", 
             },
             {
-                "name": "Autocomplete", 
-                "dir": "autocomplete", 
+                "name": "Sentence Builder", 
+                "dir": "sentence_builder", 
             },
             {
-                "name": "Sentiment Analysis", 
-                "dir": "sentiment_analysis", 
+                "name": "Diff Texts", 
+                "dir": "diff_texts", 
             },
-            {
-                "name": "Named Entity Recognition", 
-                "dir": "text_analysis", 
-            },
-            {
-                "name": "Multilingual Translation", 
-                "dir": "translation", 
-            }
+            
 
         ]
     },
      {
-        "category": "🖼️ Images & Computer Vision",
+        "category": "Media",
         "demos": [
             {
-                "name": "Image Classification", 
-                "dir": "image_classification", 
+                "name": "Sepia Filter", 
+                "dir": "sepia_filter", 
             },
             {
-                "name": "Image Segmentation", 
-                "dir": "image_segmentation", 
-            },
-            {
-                "name": "Image Transformation with AnimeGAN", 
-                "dir": "animeganv2", 
-            },
-            {
-                "name": "Image Generation (Fake GAN)", 
-                "dir": "fake_gan", 
+                "name": "Video Identity",
+                "dir": "video_identity_2",
             },
             {
                 "name": "Iterative Output",
                 "dir": "fake_diffusion",
             },
             {
-                "name": "3D Models", 
-                "dir": "depth_estimation", 
+                "name": "Generate Tone", 
+                "dir": "generate_tone", 
             },
         ]
     },
     {
-        "category": "📈 Tabular Data & Plots",
+        "category": "Tabular",
         "demos": [
             {
-                "name": "Interactive Dashboard",
-                "dir": "dashboard"
+                "name": "Filter Records",
+                "dir": "filter_records"
             },
             {
-                "name": "Dashboard with Live Updates",
-                "dir": "live_dashboard"
+                "name": "Transpose Matrix",
+                "dir": "matrix_transpose"
             },
             {
-                "name": "Interactive Map of AirBnB Locations",
-                "dir": "map_airbnb"
+                "name": "Tax Calculator",
+                "dir": "tax_calculator"
             },
             {
-                "name": "Outbreak Forecast", 
-                "dir": "outbreak_forecast", 
+                "name": "Kinematics", 
+                "dir": "blocks_kinematics", 
             },
             {
-                "name": "Clustering with Scikit-Learn", 
-                "dir": "clustering", 
-            },
-            {
-                "name": "Time Series Forecasting", 
-                "dir": "timeseries-forecasting-with-prophet", 
-            },
-            {
-                "name": "Income Classification with XGBoost", 
-                "dir": "xgboost-income-prediction-with-explainability", 
-            },
-            {
-                "name": "Leaderboard", 
-                "dir": "leaderboard", 
-            },
-            {
-                "name": "Tax Calculator", 
-                "dir": "tax_calculator", 
+                "name": "Stock Forecast", 
+                "dir": "stock_forecast", 
             },
         ]
     },
     {
-        "category": "🎤 Audio & Speech",
+        "category": "Other",
         "demos": [
             {
-                "name": "Text to Speech", 
-                "dir": "neon-tts-plugin-coqui", 
+                "name": "Tabbed Interface", 
+                "dir": "tabbed_interface_lite", 
             },
             {
-                "name": "Speech to Text (ASR)", 
-                "dir": "automatic-speech-recognition", 
+                "name": "Chatbot", 
+                "dir": "chatinterface_random_response", 
             },
             {
-                "name": "Musical Instrument Identification", 
-                "dir": "musical_instrument_identification", 
+                "name": "Streaming Chatbot", 
+                "dir": "chatinterface_streaming_echo", 
             },
             {
-                "name": "Speaker Verification", 
-                "dir": "same-person-or-different", 
+                "name": "Layouts", 
+                "dir": "blocks_flipper", 
             },
+            {
+                "name": "Error", 
+                "dir": "calculator", 
+            },
+            {
+                "name": "Chained Events", 
+                "dir": "blocks_chained_events", 
+            },
+            {
+                "name": "Change Listener", 
+                "dir": "blocks_hello", 
+            }
         ]
-    },
+    }
 ]
 
 for category in demos_by_category:
     for demo in category["demos"]:
-        code, description = get_code_and_description(demo["dir"])
+        code, description, requirements = get_code_description_and_reqs(demo["dir"])
         demo["code"] = code
         demo["text"] = description
+        demo["requirements"] = requirements 
 
 def generate(json_path):
     with open(json_path, 'w+') as f:

js/_website/package.json

@@ -14,6 +14,7 @@
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-static": "^2.0.2",
 		"@sveltejs/kit": "^1.5.0",
+		"svelte-i18n": "^3.6.0",
 		"@tailwindcss/forms": "^0.5.0",
 		"@tailwindcss/typography": "^0.5.4",
 		"@types/node": "^20.3.2",
@@ -25,13 +26,14 @@
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^4.3.9"
-	},
+		},
 	"type": "module",
 	"dependencies": {
 		"@sindresorhus/slugify": "^2.2.0",
 		"@sveltejs/adapter-vercel": "^3.0.3",
 		"hast-util-to-string": "^3.0.0",
 		"mdsvex": "^0.11.0",
-		"postcss": ">=8.3.3 <9.0.0"
+		"postcss": ">=8.3.3 <9.0.0",
+		"@gradio/code": "workspace:^"
 	}
 }

js/_website/src/lib/assets/style.css

@@ -115,6 +115,13 @@
 	@apply border-orange-500 text-orange-500;
 }
 
+/* playground */
+
+.current-playground-demo {
+	@apply text-orange-500 pl-4;
+
+}
+
 /* docs */
 .selected-demo {
 	@apply font-semibold bg-gray-50 rounded text-orange-500;
@@ -155,6 +162,12 @@ code.language-bash {
 .clipboard-button:focus {
 	@apply outline-0;
 }
+
+/* interactive banner */
+.interactive-banner {
+	@apply absolute right-0 px-1.5 pt-0.5 pb-1 m-4 -mt-1 text-sm z-[100] bg-orange-500 rounded-lg ;
+}
+
 .codeblock {
 	@apply relative bg-gray-50 mx-auto p-3 mt-2;
 }

js/_website/src/lib/components/DemosLite.svelte

@@ -0,0 +1,97 @@
+<script lang="ts">
+	import { afterNavigate } from  '$app/navigation';
+	import InteractiveCode from "@gradio/code/interactive";
+	export let demos: {
+				name: string;
+				dir: string;
+				code: string;
+				requirements: string[];
+			}[];
+	export let current_selection: string;
+
+	let mounted = false;
+	let controller: any;
+
+	let dummy_elem: any = {classList: {contains: () => false}};
+	let dummy_gradio: any = {dispatch: (_) => {}};
+	
+	let requirements = demos.find(demo => demo.name === current_selection)?.requirements || [];
+	let code = demos.find(demo => demo.name === current_selection)?.code || "";
+
+	afterNavigate(() => {
+		controller = createGradioApp({
+					target: document.getElementById("lite-demo"),
+					requirements: demos[0].requirements,
+					code: demos[0].code,
+					info: true,
+					container: true,
+					isEmbed: true,
+					initialHeight: "100%",
+					eager: false,
+					themeMode: null,
+					autoScroll: false,
+					controlPageTitle: false,
+					appMode: true
+				});
+			mounted = true;
+	});
+
+	function update(code: string, requirements: string[]) {
+		try {
+			controller.run_code(code);
+			controller.install(requirements);
+		} catch (error) {
+			console.error(error);
+		}
+		controller.run_code(code);
+		controller.install(requirements);
+	}
+
+$: code = demos.find(demo => demo.name === current_selection)?.code || "";
+$: requirements = demos.find(demo => demo.name === current_selection)?.requirements || [];
+$: if (mounted) {
+	update(code, requirements);
+}
+
+</script>
+
+<svelte:head>
+	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css" />
+	<link rel="stylesheet" href="https://gradio-hello-world.hf.space/theme.css">
+</svelte:head>
+
+<div class="flex flex-col md:flex-row w-full min-w-0" style="height: 70vh;">
+
+	{#each demos as demo, i}
+		<div hidden={current_selection !== demo.name}
+		class="code-editor mx-auto md:pr-4 w-full md:w-1/2 h-1/2 mb-2 md:mb-0 md:h-full">
+			<InteractiveCode bind:value={demos[i].code} language="python" label="code" target={dummy_elem} gradio={dummy_gradio} lines={10} />
+		</div>
+	{/each}
+
+
+	<div class="lite-demo w-full md:w-1/2 mx-auto h-1/2 md:h-full" id="lite-demo" />
+</div>
+
+
+<style>
+	:global(div.code-editor div.block) {
+		height: 100%;
+	}
+	:global(div.code-editor div.block div.wrap) {
+		height: 90%;
+	}
+	:global(div.code-editor div.block .cm-gutters) {
+		background-color: white;	
+	}
+
+	:global(div.code-editor div.block .cm-content) {
+		width: 0;	
+	}
+
+	:global(div.lite-demo div.gradio-container) {
+		height: 100%;
+		overflow-y: scroll;
+		margin: 0 !important;
+	}
+</style>

js/_website/src/lib/components/Header.svelte

@@ -40,8 +40,8 @@
 		<a class="thin-link flex items-center gap-3" href="/guides"
 			><span>💡</span> <span>Guides</span></a
 		>
-		<a class="thin-link flex items-center gap-3" href="/demos"
-			><span>🎢</span> <span>Demos</span></a
+		<a class="thin-link flex items-center gap-3" href="/playground"
+			><span>🎢</span> <span>Playground<sup class="text-orange-500">NEW</sup></span></a
 		>
 		<div
 			on:mouseenter={() => (show_help_menu = true)}

js/_website/src/lib/components/MetaTags.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import image from "../assets/img/meta-image.png";
 	export let title = "Gradio";
 	export let description = "Build & Share Delightful Machine Learning Apps";
 	export let url: string;
@@ -18,7 +17,7 @@
 	<meta property="og:description" content={description} />
 	<meta
 		property="og:image"
-		content="https://raw.githubusercontent.com/gradio-app/gradio/main/website/homepage/src/assets/img/meta-image.png"
+		content="https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/lib/assets/img/header-image.jpg"
 	/>
 	<meta name="twitter:card" content="summary_large_image" />
 	<meta name="twitter:creator" content="@Gradio" />
@@ -26,7 +25,7 @@
 	<meta name="twitter:description" content="{description}." />
 	<meta
 		name="twitter:image"
-		content="https://raw.githubusercontent.com/gradio-app/gradio/main/website/homepage/src/assets/img/meta-image.png"
+		content="https://raw.githubusercontent.com/gradio-app/gradio/main/js/_website/src/lib/assets/img/header-image.jpg"
 	/>
 
 	<link rel="canonical" href={canonical} />

js/_website/src/routes/+layout.svelte

@@ -53,6 +53,8 @@
 		href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap"
 		rel="stylesheet"
 	/>
+	<script type="module" crossorigin=true src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"></script>
+
 
 	<script
 		async

js/_website/src/routes/demos/+page.server.ts

@@ -1,32 +0,0 @@
-import Prism from "prismjs";
-import "prismjs/components/prism-python";
-import demos_by_category from "$lib/json/demos.json";
-
-let language = "python";
-
-type Demo = {
-	name: string;
-	dir: string;
-	code: string;
-	highlighted_code?: string;
-};
-type Category = {
-	category: string;
-	demos: Demo[];
-};
-
-export async function load() {
-	demos_by_category.forEach((category: Category) => {
-		category.demos.forEach((demo: Demo) => {
-			demo.highlighted_code = Prism.highlight(
-				demo.code,
-				Prism.languages[language],
-				"python"
-			);
-		});
-	});
-
-	return {
-		demos_by_category
-	};
-}

js/_website/src/routes/demos/+page.svelte

@@ -1,92 +0,0 @@
-<script lang="ts">
-	import space_logo from "$lib/assets/img/spaces-logo.svg";
-	import Demos from "$lib/components/Demos.svelte";
-	import MetaTags from "$lib/components/MetaTags.svelte";
-
-	export let data: {
-		demos_by_category: {
-			category: string;
-			demos: {
-				name: string;
-				dir: string;
-				code: string;
-				highlighted_code: string;
-			}[];
-		}[];
-	};
-
-	let current_selection = 0;
-</script>
-
-<MetaTags
-	title="Gradio Demos"
-	url="https://gradio.app/demos"
-	canonical="https://gradio.app/demos"
-	description="Play Around with Gradio Demos"
-/>
-
-<main class="container mx-auto px-4 gap-4">
-	<h2 class="text-4xl font-light mb-2 pt-2 text-orange-500 group">Demos</h2>
-	<p class="mt-8 mb-4 text-lg text-gray-600">
-		Here are some examples of what you can build with Gradio in just a few lines
-		of Python. Once you’re ready to learn, head over to the <a
-			class="link text-black"
-			target="_blank"
-			href="/getting_started">⚡ Quickstart</a
-		>.
-	</p>
-	<p class="mt-4 mb-8 text-lg text-gray-600">
-		Check out more demos on <a
-			class="link text-black"
-			target="_blank"
-			href="https://huggingface.co/spaces"
-			><img
-				class="inline-block my-0 mx-auto w-5 max-w-full pb-1"
-				src={space_logo}
-			/> Spaces</a
-		>.
-	</p>
-	{#each data.demos_by_category as { category, demos } (category)}
-		<div class="category mb-8">
-			<h2 class="mb-4 text-2xl font-thin block">{category}</h2>
-			<div>
-				<div class="demo-window overflow-y-auto h-full w-full my-4">
-					<div
-						class="relative mx-auto my-auto rounded-md bg-white"
-						style="top: 5%; height: 90%"
-					>
-						<div class="flex overflow-auto pt-4">
-							{#each demos as demo, i}
-								<button
-									on:click={() => (current_selection = i)}
-									class:selected-demo-tab={current_selection == i}
-									class="demo-btn px-4 py-2 text-lg min-w-max text-gray-600 hover:text-orange-500"
-									>{demo.name}</button
-								>
-							{/each}
-						</div>
-						{#each demos as demo, i}
-							<div
-								class:hidden={current_selection !== i}
-								class:selected-demo-window={current_selection == i}
-								class="demo-content px-4"
-							>
-								<Demos
-									name={demo.dir}
-									code={demo.code}
-									highlighted_code={demo.highlighted_code}
-								/>
-							</div>
-						{/each}
-					</div>
-				</div>
-			</div>
-		</div>
-	{/each}
-</main>
-
-<style>
-	.code {
-		white-space: pre-wrap;
-	}
-</style>

js/_website/src/routes/playground/+page.server.ts

@@ -0,0 +1,19 @@
+import Prism from "prismjs";
+import demos_by_category from "$lib/json/demos.json";
+
+type Demo = {
+	name: string;
+	dir: string;
+	code: string;
+	requirements: string[];
+};
+type Category = {
+	category: string;
+	demos: Demo[];
+};
+
+export async function load() {
+	return {
+		demos_by_category
+	};
+}

js/_website/src/routes/playground/+page.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	import DemosLite from "../../lib/components/DemosLite.svelte";
+	import MetaTags from "$lib/components/MetaTags.svelte";
+
+	export let data: {
+		demos_by_category: {
+			category: string;
+			demos: {
+				name: string;
+				dir: string;
+				code: string;
+				requirements: string[];
+			}[];
+		}[];
+	};
+
+	let all_demos = data.demos_by_category.flatMap((category) => category.demos);
+	let current_selection = all_demos[0].name;
+
+</script>
+
+<MetaTags
+	title="Gradio Playground"
+	url="https://gradio.app/playground"
+	canonical="https://gradio.app/playground"
+	description="Play Around with Gradio Demos"
+/>
+
+<main class="container mx-auto px-4 gap-4">
+	<h2 class="text-4xl font-light mb-2 pt-2 text-orange-500 group">Playground</h2> 
+	<p class="mt-4 mb-8 text-lg text-gray-600">
+			All the demos on this page are interactive - meaning you can change the code and the embedded demo will update automatically. 
+					Use this as a space to explore and play around with Gradio. This is made possible thanks to the 
+					<a
+					class="link text-black"
+					target="_blank"
+					href="https://gradio.app/main/guides/serverless-gradio">
+					Gradio Lite 
+					</a>
+					package.
+	</p>
+
+	<p class="mt-4 mb-8 text-lg text-gray-600 md:hidden">
+		Playground renders best on desktop.
+	</p>
+		
+	<div class="flex w-full border border-gray-200 shadow-xl rounded-xl p-4 mb-3">
+		<div class="mr-4 overflow-y-scroll mb-0 p-0 pb-4 text-md block rounded-t-xl bg-gradient-to-r from-white to-gray-50 overflow-x-clip w-3/12 xl:w-[12%]" style="height: 70vh; word-break: normal; overflow-wrap: break-word; white-space:nowrap">
+			{#each data.demos_by_category as { category, demos } (category)}
+				<p class="px-4 my-2">{category}</p>
+				{#each demos as demo, i}	
+					<button
+						on:click={() => (current_selection = demo.name)}
+						class:current-playground-demo={current_selection == demo.name}
+						class="thin-link font-light px-4 block"
+						>{demo.name}</button
+					>
+				{/each}
+			{/each}
+		</div>
+
+			<DemosLite
+				demos={all_demos}
+				current_selection={current_selection}
+			/>
+</main>
+
+<style>
+	.code {
+		white-space: pre-wrap;
+	}
+</style>

js/_website/src/routes/redirects.js

@@ -96,5 +96,6 @@ export const redirects = {
 		"/guides/image-classification-with-vision-transformers",
 	"/Gradio_and_Wandb_Integration": "/guides/Gradio-and-Wandb-Integration",
 	"/image_classification_in_tensorflow":
-		"/guides/image-classification-in-tensorflow"
+		"/guides/image-classification-in-tensorflow",
+	"/demos": "/playground"
 };

pnpm-lock.yaml

@@ -276,6 +276,9 @@ importers:
 
   js/_website:
     dependencies:
+      '@gradio/code':
+        specifier: workspace:^
+        version: link:../code
       '@sindresorhus/slugify':
         specifier: ^2.2.0
         version: 2.2.0
@@ -322,6 +325,9 @@ importers:
       svelte-check:
         specifier: ^3.0.1
         version: 3.4.4(@babel/core@7.22.5)(less@4.1.3)(postcss@8.4.21)(svelte@3.59.2)
+      svelte-i18n:
+        specifier: ^3.6.0
+        version: 3.6.0(svelte@3.59.2)
       tailwindcss:
         specifier: ^3.1.6
         version: 3.1.6(postcss@8.4.21)
@@ -4863,6 +4869,13 @@ packages:
     resolution: {integrity: sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==}
     dev: true
 
+  /@formatjs/ecma402-abstract@1.11.4:
+    resolution: {integrity: sha512-EBikYFp2JCdIfGEb5G9dyCkTGDmC57KSHhRQOC3aYxoPWVZvfWCDjZwkGYHN7Lis/fmuWl906bnNTJifDQ3sXw==}
+    dependencies:
+      '@formatjs/intl-localematcher': 0.2.25
+      tslib: 2.6.1
+    dev: true
+
   /@formatjs/ecma402-abstract@1.17.2:
     resolution: {integrity: sha512-k2mTh0m+IV1HRdU0xXM617tSQTi53tVR2muvYOsBeYcUgEAyxV1FOC7Qj279th3fBVQ+Dj6muvNJZcHSPNdbKg==}
     dependencies:
@@ -4870,12 +4883,26 @@ packages:
       tslib: 2.6.1
     dev: false
 
+  /@formatjs/fast-memoize@1.2.1:
+    resolution: {integrity: sha512-Rg0e76nomkz3vF9IPlKeV+Qynok0r7YZjL6syLz4/urSg0IbjPZCB/iYUMNsYA643gh4mgrX3T7KEIFIxJBQeg==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
   /@formatjs/fast-memoize@2.2.0:
     resolution: {integrity: sha512-hnk/nY8FyrL5YxwP9e4r9dqeM6cAbo8PeU9UjyXojZMNvVad2Z06FAVHyR3Ecw6fza+0GH7vdJgiKIVXTMbSBA==}
     dependencies:
       tslib: 2.6.1
     dev: false
 
+  /@formatjs/icu-messageformat-parser@2.1.0:
+    resolution: {integrity: sha512-Qxv/lmCN6hKpBSss2uQ8IROVnta2r9jd3ymUEIjm2UyIkUCHVcbUVRGL/KS/wv7876edvsPe+hjHVJ4z8YuVaw==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.11.4
+      '@formatjs/icu-skeleton-parser': 1.3.6
+      tslib: 2.6.1
+    dev: true
+
   /@formatjs/icu-messageformat-parser@2.7.0:
     resolution: {integrity: sha512-7uqC4C2RqOaBQtcjqXsSpGRYVn+ckjhNga5T/otFh6MgxRrCJQqvjfbrGLpX1Lcbxdm5WH3Z2WZqt1+Tm/cn/Q==}
     dependencies:
@@ -4884,6 +4911,13 @@ packages:
       tslib: 2.6.1
     dev: false
 
+  /@formatjs/icu-skeleton-parser@1.3.6:
+    resolution: {integrity: sha512-I96mOxvml/YLrwU2Txnd4klA7V8fRhb6JG/4hm3VMNmeJo1F03IpV2L3wWt7EweqNLES59SZ4d6hVOPCSf80Bg==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.11.4
+      tslib: 2.6.1
+    dev: true
+
   /@formatjs/icu-skeleton-parser@1.6.2:
     resolution: {integrity: sha512-VtB9Slo4ZL6QgtDFJ8Injvscf0xiDd4bIV93SOJTBjUF4xe2nAWOoSjLEtqIG+hlIs1sNrVKAaFo3nuTI4r5ZA==}
     dependencies:
@@ -4891,6 +4925,12 @@ packages:
       tslib: 2.6.1
     dev: false
 
+  /@formatjs/intl-localematcher@0.2.25:
+    resolution: {integrity: sha512-YmLcX70BxoSopLFdLr1Ds99NdlTI2oWoLbaUW2M406lxOIPzE1KQhRz2fPUkq34xVZQaihCoU29h0KK7An3bhA==}
+    dependencies:
+      tslib: 2.6.1
+    dev: true
+
   /@formatjs/intl-localematcher@0.4.2:
     resolution: {integrity: sha512-BGdtJFmaNJy5An/Zan4OId/yR9Ih1OojFjcduX/xOvq798OgWSyDtd6Qd5jqJXwJs1ipe4Fxu9+cshic5Ox2tA==}
     dependencies:
@@ -8392,7 +8432,6 @@ packages:
       es6-iterator: 2.0.3
       memoizee: 0.4.15
       timers-ext: 0.1.7
-    dev: false
 
   /cli-cursor@3.1.0:
     resolution: {integrity: sha512-I/zHAwsKf9FqGoXM4WWRACob9+SNukZTd94DWF57E4toouRulbCxcUh6RKUEOQlYTHJnzkPMySvPNaaSLNfLZw==}
@@ -8960,7 +8999,6 @@ packages:
     dependencies:
       es5-ext: 0.10.62
       type: 1.2.0
-    dev: false
 
   /dashify@2.0.0:
     resolution: {integrity: sha512-hpA5C/YrPjucXypHPPc0oJ1l9Hf6wWbiOL7Ik42cxnsUOhWiCB/fylKbKqqJalW9FgkNQCw16YO8uW9Hs0Iy1A==}
@@ -9458,7 +9496,6 @@ packages:
       es6-iterator: 2.0.3
       es6-symbol: 3.1.3
       next-tick: 1.1.0
-    dev: false
 
   /es6-iterator@2.0.3:
     resolution: {integrity: sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==}
@@ -9466,7 +9503,6 @@ packages:
       d: 1.0.1
       es5-ext: 0.10.62
       es6-symbol: 3.1.3
-    dev: false
 
   /es6-object-assign@1.1.0:
     resolution: {integrity: sha512-MEl9uirslVwqQU369iHNWZXsI8yaZYGg/D65aOgZkeyFJwHYSxilf7rQzXKI7DdDuBPrBXbfk3sl9hJhmd5AUw==}
@@ -9480,7 +9516,6 @@ packages:
     dependencies:
       d: 1.0.1
       ext: 1.7.0
-    dev: false
 
   /es6-weak-map@2.0.3:
     resolution: {integrity: sha512-p5um32HOTO1kP+w7PRnB+5lQ43Z6muuMuIMffvDN8ZB4GcnjLBV6zGStpbASIMk4DCAvEaamhe2zhyCb/QXXsA==}
@@ -9489,7 +9524,6 @@ packages:
       es5-ext: 0.10.62
       es6-iterator: 2.0.3
       es6-symbol: 3.1.3
-    dev: false
 
   /esbuild-plugin-alias@0.2.1:
     resolution: {integrity: sha512-jyfL/pwPqaFXyKnj8lP8iLk6Z0m099uXR45aSN8Av1XD4vhvQutxxPzgA2bTcAwQpa1zCXDcWOlhFgyP3GKqhQ==}
@@ -9876,7 +9910,6 @@ packages:
 
   /estree-walker@2.0.2:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
-    dev: false
 
   /estree-walker@3.0.3:
     resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==}
@@ -9897,7 +9930,6 @@ packages:
     dependencies:
       d: 1.0.1
       es5-ext: 0.10.62
-    dev: false
 
   /events@3.3.0:
     resolution: {integrity: sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==}
@@ -9972,7 +10004,6 @@ packages:
     resolution: {integrity: sha512-6hxeJYaL110a9b5TEJSj0gojyHQAmA2ch5Os+ySCiA1QGdS697XWY1pzsrSjqA9LDEEgdB/KypIlR59RcLuHYw==}
     dependencies:
       type: 2.7.2
-    dev: false
 
   /extend@3.0.2:
     resolution: {integrity: sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==}
@@ -9988,7 +10019,7 @@ packages:
       '@babel/runtime': 7.22.6
       broker-factory: 3.0.68
       extendable-media-recorder-wav-encoder-worker: 8.0.69
-      tslib: 2.5.3
+      tslib: 2.6.1
     dev: false
 
   /extendable-media-recorder-wav-encoder-broker@7.0.88:
@@ -10004,7 +10035,7 @@ packages:
     resolution: {integrity: sha512-8RJgKYTTHkzDoCWrnPMMqX+TyJpwzP9lwqxQWDpa9J5J1DP0SybgoYWP8Dtty/R5xT344lU+NKo7g1661i7Ujg==}
     dependencies:
       '@babel/runtime': 7.22.6
-      tslib: 2.5.3
+      tslib: 2.6.1
       worker-factory: 6.0.69
     dev: false
 
@@ -10810,6 +10841,15 @@ packages:
       tslib: 2.6.1
     dev: false
 
+  /intl-messageformat@9.13.0:
+    resolution: {integrity: sha512-7sGC7QnSQGa5LZP7bXLDhVDtQOeKGeBFGHF2Y8LVBwYZoQZCgWeKoPGTa5GMG8g/TzDgeXuYJQis7Ggiw2xTOw==}
+    dependencies:
+      '@formatjs/ecma402-abstract': 1.11.4
+      '@formatjs/fast-memoize': 1.2.1
+      '@formatjs/icu-messageformat-parser': 2.1.0
+      tslib: 2.6.1
+    dev: true
+
   /ip@2.0.0:
     resolution: {integrity: sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==}
     dev: true
@@ -10979,7 +11019,6 @@ packages:
 
   /is-promise@2.2.2:
     resolution: {integrity: sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==}
-    dev: false
 
   /is-reference@3.0.1:
     resolution: {integrity: sha512-baJJdQLiYaJdvFbJqXrcGv3WU3QCzBlUcI5QhbesIm6/xPsvmO+2CDoi/GMOFBQEQm+PXkwOPrp9KK5ozZsp2w==}
@@ -11612,7 +11651,6 @@ packages:
     resolution: {integrity: sha512-BpdYkt9EvGl8OfWHDQPISVpcl5xZthb+XPsbELj5AQXxIC8IriDZIQYjBJPEm5rS420sjZ0TLEzRcq5KdBhYrQ==}
     dependencies:
       es5-ext: 0.10.62
-    dev: false
 
   /lz-string@1.4.4:
     resolution: {integrity: sha512-0ckx7ZHRPqb0oUm8zNr+90mtf9DQB60H1wMCjBtfi62Kl3a7JbHob6gA2bC+xRvZoOL+1hzUK8jeuEIQE8svEQ==}
@@ -11766,7 +11804,6 @@ packages:
       lru-queue: 0.1.0
       next-tick: 1.1.0
       timers-ext: 0.1.7
-    dev: false
 
   /memoizerific@1.11.3:
     resolution: {integrity: sha512-/EuHYwAPdLtXwAwSZkh/Gutery6pD2KYd44oQLhAvQp/50mpyduZh8Q7PYHXTCJ+wuXxt7oij2LXyIJOOYFPog==}
@@ -12040,7 +12077,6 @@ packages:
 
   /next-tick@1.1.0:
     resolution: {integrity: sha512-CXdUiJembsNjuToQvxayPZF9Vqht7hewsvy2sOWafLvi2awflj9mOC6bHIg50orX8IJvWKY9wYQ/zB2kogPslQ==}
-    dev: false
 
   /nice-try@1.0.5:
     resolution: {integrity: sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==}
@@ -14099,6 +14135,22 @@ packages:
     dependencies:
       svelte: 4.0.0
 
+  /svelte-i18n@3.6.0(svelte@3.59.2):
+    resolution: {integrity: sha512-qvvcMqHVCXJ5pHoQR5uGzWAW5vS3qB9mBq+W6veLZ6jkrzZGOziR+wyOUJsc59BupMh+Ae30qjOndFrRU6v5jA==}
+    engines: {node: '>= 16'}
+    hasBin: true
+    peerDependencies:
+      svelte: ^3.25.1
+    dependencies:
+      cli-color: 2.0.3
+      deepmerge: 4.3.1
+      estree-walker: 2.0.2
+      intl-messageformat: 9.13.0
+      sade: 1.8.1
+      svelte: 3.59.2
+      tiny-glob: 0.2.9
+    dev: true
+
   /svelte-i18n@4.0.0(svelte@4.0.0):
     resolution: {integrity: sha512-4vivjKZADUMRIhTs38JuBNy3unbnh9AFRxWFLxq62P4NHic+/BaIZZlAsvqsCdnp7IdJf5EoSiH6TNdItcjA6g==}
     engines: {node: '>= 16'}
@@ -14529,7 +14581,6 @@ packages:
     dependencies:
       es5-ext: 0.10.62
       next-tick: 1.1.0
-    dev: false
 
   /tiny-glob@0.2.9:
     resolution: {integrity: sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==}
@@ -14715,11 +14766,9 @@ packages:
 
   /type@1.2.0:
     resolution: {integrity: sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==}
-    dev: false
 
   /type@2.7.2:
     resolution: {integrity: sha512-dzlvlNlt6AXU7EBSfpAscydQ7gXB+pPGsPnfJnZpiNJBDj7IaJzQlBZYGdEi4R9HmPdBv2XmWJ6YUtoTa7lmCw==}
-    dev: false
 
   /typed-array-length@1.0.4:
     resolution: {integrity: sha512-KjZypGq+I/H7HI5HlOoGHkWUUGq+Q0TPhQurLbyrVrvnKTBgzLhIJ7j6J/XTQOi0d1RjyZ0wdas8bKs2p0x3Ng==}
@@ -14982,7 +15031,7 @@ packages:
       fast-json-patch: 3.1.1
       json-stringify-pretty-compact: 3.0.0
       semver: 7.4.0
-      tslib: 2.5.3
+      tslib: 2.6.1
       vega: 5.22.1
       vega-interpreter: 1.0.5
       vega-lite: 5.12.0(vega@5.22.1)