playground proposal (#6040)

* tweaks

* add changeset

* fix demo overflowing

* make clear divider

* fix demos tab minimizing increasing width

* display width and breakpoints

* mobile responsive

* add delay and skip queue

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>
Co-authored-by: Ali Abdalla <ali.si3luwa@gmail.com>

.changeset/cold-breads-vanish.md

@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:playground proposal

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

@@ -1,39 +1,44 @@
 <script lang="ts">
-	import { afterNavigate } from  '$app/navigation';
+	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;
+	import Slider from "./Slider.svelte";
+	import Fullscreen from "./icons/Fullscreen.svelte";
+	import Close from "./icons/Close.svelte";
 
+	export let demos: {
+		name: string;
+		dir: string;
+		code: string;
+		requirements: string[];
+	}[];
+	export let current_selection: string;
+	export let show_nav = true;
 	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 || "";
+	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;
+			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[]) {
@@ -47,46 +52,130 @@
 		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);
-}
+	let timeout: any;
 
+	$: code = demos.find((demo) => demo.name === current_selection)?.code || "";
+	$: requirements =
+		demos.find((demo) => demo.name === current_selection)?.requirements || [];
+	
+	$: if (mounted) {
+		if (timeout) {
+            clearTimeout(timeout);
+        }
+		timeout = setTimeout(() => {
+			update(code, requirements);
+		}, 1000);
+	}
+
+	let position = 0.5;
+
+	let fullscreen = false;
+	function make_full_screen() {
+		fullscreen = true;
+	}
+	let preview_width = 100;
+	let lg_breakpoint = false;
+	
+
+	$: lg_breakpoint = preview_width - 13 >= 688;
 </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">
+	<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;">
+<div
+	class=" absolute top-0 bottom-0 right-0"
+	style="left:{show_nav ? 200 : 37}px"
+>
+	<Slider bind:position bind:show_nav>
+		<div class="flex-row min-w-0 h-full" class:flex={!fullscreen}>
+			{#each demos as demo, i}
+				<div
+					hidden={current_selection !== demo.name}
+					class="code-editor w-full border-r hidden sm:block"
+					style="width: {position * 100}%"
+				>
+					<div class="flex justify-between align-middle h-8 border-b pl-4 pr-2">
+						<h3 class="pt-1">Code</h3>
+					</div>
 
-	{#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} />
+					<InteractiveCode
+						bind:value={demos[i].code}
+						label=""
+						language="python"
+						target={dummy_elem}
+						gradio={dummy_gradio}
+						lines={10}
+					/>
+				</div>
+			{/each}
+
+			<div
+				class="preview w-full mx-auto"
+				style="width: {fullscreen ? 100 : (1 - position) * 100}%"
+				class:fullscreen
+				bind:clientWidth={preview_width}
+			>
+				<div class="flex justify-between align-middle h-8 border-b pl-4 pr-2 ml-0 sm:ml-2">
+					<div class="flex align-middle">
+						<h3 class="pr-2 pt-1">Preview</h3>
+						<p class="pt-1.5 text-sm text-gray-600 hidden sm:block">{preview_width - 13}px</p>
+						<p 
+						class:text-orange-300={lg_breakpoint}
+						class:text-gray-300={!lg_breakpoint}
+						class="pt-2 text-sm pl-2 w-6  hidden sm:block">
+							<svg viewBox="0 0 110 100" xmlns="http://www.w3.org/2000/svg">
+								<rect width="50" height="100"  rx="15" fill="currentColor"/>
+								<rect x="60" width="50" height="100" rx="15" fill="currentColor" />
+							</svg>
+						</p>
+						<p 
+						class:text-orange-300={!lg_breakpoint}
+						class:text-gray-300={lg_breakpoint}
+						class="pt-2 text-sm pl-2 w-6  hidden sm:block">
+							<svg viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg">
+								<rect width="110" height="45"  rx="15" fill="currentColor"/>
+								<rect y="50" width="110" height="45" rx="15" fill="currentColor" />
+							</svg>
+						</p>
+					</div>
+					<div class="flex">
+						{#if !fullscreen}<button
+								class="ml-1 w-[20px] float-right text-gray-600"
+								on:click={() => (fullscreen = true)}><Fullscreen /></button
+							>{:else}
+							<button
+								class="ml-1 w-[15px] float-right text-gray-600"
+								on:click={() => (fullscreen = false)}><Close /></button
+							>
+						{/if}
+					</div>
+				</div>
+
+				<div class="lite-demo h-[93%] pl-3" id="lite-demo" />
+			</div>
 		</div>
-	{/each}
-
-
-	<div class="lite-demo w-full md:w-1/2 mx-auto h-1/2 md:h-full" id="lite-demo" />
+	</Slider>
 </div>
 
-
 <style>
 	:global(div.code-editor div.block) {
-		height: 100%;
-	}
-	:global(div.code-editor div.block div.wrap) {
-		height: 90%;
+		height: calc(100% - 2rem);
+		border-radius: 0;
+		border: none;
 	}
+
 	:global(div.code-editor div.block .cm-gutters) {
-		background-color: white;	
+		background-color: white;
 	}
 
 	:global(div.code-editor div.block .cm-content) {
-		width: 0;	
+		width: 0;
 	}
 
 	:global(div.lite-demo div.gradio-container) {
@@ -94,4 +183,43 @@ $: if (mounted) {
 		overflow-y: scroll;
 		margin: 0 !important;
 	}
-</style>
+
+	.code-editor :global(label) {
+		display: none;
+	}
+
+	.code-editor :global(.codemirror-wrappper) {
+		border-radius: var(--block-radius);
+	}
+
+	.code-editor :global(> .block) {
+		border: none !important;
+	}
+
+	.code-editor :global(.cm-scroller) {
+		height: 100% !important;
+	}
+
+	.lite-demo :global(.embed-container) {
+		border: none !important;
+	}
+
+	.fullscreen {
+		position: fixed !important; 
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 1000;
+		background-color: white;
+	}
+	/* .preview {
+			width: 100% !important;
+		} */
+	@media (max-width: 640px) {
+		.preview {
+			width: 100% !important;
+		}
+	}
+
+</style>

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

@@ -0,0 +1,128 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	export let position = 0.5;
+	export let disabled = false;
+	export let show_nav = true;
+
+	let active = false;
+	let hidden = true;
+	let el: HTMLDivElement;
+	let inner: HTMLDivElement;
+	let box: DOMRect;
+	let px = 0;
+	let offset = 0;
+
+	function handle_mousedown(e: MouseEvent) {
+		if (disabled) return;
+		active = true;
+		box = el.getBoundingClientRect();
+		const innerbox = inner.getBoundingClientRect();
+		offset = e.clientX - innerbox.left;
+	}
+
+	function handle_mouseup(e: MouseEvent) {
+		active = false;
+	}
+
+	function handle_mousemove(e: MouseEvent) {
+		if (!active) return;
+		px = clamp(e.clientX - offset - box.left, 100, box.width - 240);
+		position = round((px + 10) / box.width, 5);
+	}
+
+	function clamp(n: number, min: number, max: number) {
+		return n < min ? min : n > max ? max : n;
+	}
+
+	function round(n: number, points: number) {
+		const mod = Math.pow(10, points);
+		return Math.round((n + Number.EPSILON) * mod) / mod;
+	}
+
+	function set_position() {
+		box = el.getBoundingClientRect();
+		px = box.width * position - 10;
+		hidden = false;
+	}
+
+	onMount(set_position);
+
+	$: if (!hidden && show_nav) {
+		box = el.getBoundingClientRect();
+		px = box.width * position - 10;
+	} else if (!hidden && !show_nav) {
+		box = el.getBoundingClientRect();
+		px = box.width * position - 10;
+	}
+</script>
+
+<svelte:window
+	on:resize={set_position}
+	on:mousemove={handle_mousemove}
+	on:mouseup={handle_mouseup}
+/>
+
+<div class="wrap" bind:this={el}>
+	<slot />
+	<div
+		class="outer hidden sm:block"
+		class:disabled
+		on:mousedown={handle_mousedown}
+		on:mouseup={handle_mouseup}
+		bind:this={inner}
+		role="none"
+		style="transform: translateX({px}px)"
+	>
+		<div hidden={hidden} 
+		class="inner">
+			<div class="notches text-gray-400 select-none">&#124;&#124;</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.wrap {
+		position: relative;
+		width: 100%;
+		height: 100%;
+	}
+
+	.outer {
+		width: 20px;
+		height: 100%;
+		position: absolute;
+		cursor: grab;
+		position: absolute;
+		top: 0;
+		left: 0;
+		cursor: ew-resize;
+	}
+
+	.inner {
+		width: 15px;
+		height: 100%;
+		background: #fbfcfc;
+		position: absolute;
+		left: calc((100% - 2px) / 2);
+		border-right: 1px solid rgb(229, 231, 235);
+		border-left: 1px solid rgb(229, 231, 235);
+	}
+
+	.disabled {
+		cursor: auto;
+	}
+
+	.disabled .inner {
+		box-shadow: none;
+	}
+
+	.notches {
+		margin: 0;
+		position: absolute;
+		top: 50%;
+  		left: 50%;		
+		transform: translate(-50%, -50%) scale(1, 2.5);
+		font-weight: bold;
+	}
+</style>

js/_website/src/lib/components/icons/Close.svelte

@@ -0,0 +1,24 @@
+<svg
+	width="100%"
+	height="100%"
+	viewBox="0 0 24 24"
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	xml:space="preserve"
+	stroke="currentColor"
+	style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;"
+>
+	<g
+		transform="matrix(1.14096,-0.140958,-0.140958,1.14096,-0.0559523,0.0559523)"
+	>
+		<path
+			d="M18,6L6.087,17.913"
+			style="fill:none;fill-rule:nonzero;stroke-width:2px;"
+		/>
+	</g>
+	<path
+		d="M4.364,4.364L19.636,19.636"
+		style="fill:none;fill-rule:nonzero;stroke-width:2px;"
+	/>
+</svg>

js/_website/src/lib/components/icons/Fullscreen.svelte

@@ -0,0 +1,10 @@
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width="100%"
+	height="100%"
+	viewBox="0 0 24 24"
+	><path
+		fill="currentColor"
+		d="M6 14c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1H7v-2c0-.55-.45-1-1-1zm0-4c.55 0 1-.45 1-1V7h2c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1v3c0 .55.45 1 1 1zm11 7h-2c-.55 0-1 .45-1 1s.45 1 1 1h3c.55 0 1-.45 1-1v-3c0-.55-.45-1-1-1s-1 .45-1 1v2zM14 6c0 .55.45 1 1 1h2v2c0 .55.45 1 1 1s1-.45 1-1V6c0-.55-.45-1-1-1h-3c-.55 0-1 .45-1 1z"
+	/></svg
+>

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

@@ -20,7 +20,6 @@
 	let show_nav = true;
 
 	$: show_nav;
-
 </script>
 
 <MetaTags
@@ -30,50 +29,68 @@
 	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/guides/gradio-lite">
-					Gradio Lite 
-					</a>
-					package.
-	</p>
+<main class="px-6 flex flex-col justify-between">
+	<div class="container mx-auto px-4 gap-4">
+		<h2
+			class="text-4xl font-light mb-2 pt-2 text-orange-500 group container mx-auto gap-4"
+		>
+			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/guides/gradio-lite"
+			>
+				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:w-10={!show_nav} class:xl:w-10={!show_nav} class:w-[33%]={show_nav} class:xl:w-[15%]={show_nav} 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" style="height: 70vh; word-break: normal; overflow-wrap: break-word; white-space:nowrap">
-			<button
-						on:click={() => (show_nav = !show_nav)}
-						class="float-right p-1 px-2 text-gray-600"
-						>{#if show_nav}&larr;{:else}&rarr;{/if}</button
-					>
+		<p class="mt-4 mb-8 text-lg text-gray-600 md:hidden">
+			Playground renders best on desktop.
+		</p>
+	</div>
+
+	<div
+		class="w-full border border-gray-200 shadow-xl rounded-xl mb-3 h-full relative"
+	>
+		<div
+			class="w-[200px] h-full rounded-tr-none rounded-bl-xl 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"
+			style="word-break: normal; overflow-wrap: break-word; white-space:nowrap; width: {show_nav
+				? 200
+				: 37}px;"
+		>
+			<div class="flex justify-between align-middle h-8 border-b px-2">
+				{#if show_nav}
+					<h3 class="pl-2 pt-1">Demos</h3>
+				{/if}
+				<button
+					on:click={() => (show_nav = !show_nav)}
+					class="float-right text-gray-600 pl-1"
+					>{#if show_nav}&larr;{:else}&rarr;{/if}</button
+				>
+			</div>
 			{#if show_nav}
-			{#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 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}
-			{/each}
 			{/if}
 		</div>
 
-			<DemosLite
-				demos={all_demos}
-				current_selection={current_selection}
-			/>
+		<DemosLite demos={all_demos} {current_selection} {show_nav} />
+	</div>
 </main>
 
 <style>