Refactoring playground (#9426)

* Use @gradio/code.BaseCode instead of its default export like #8804 * Delete unused code * add changeset * Fix * Rename a variable to be descriptive * Mount single <Code> instance instead of creating one for each demo * Fix the initial value passed to createGradioApp * Use const instead of let * Rename variable * Update * Fix layout * Restore the preset requirements * Delete unused variable * Add type hint * Attach the keydown handler directly to the input element instead of the window object * Add code editor widget --------- Co-authored-by: gradio-pr-bot <[email protected]>
gradio-app · Sep 26, 2024 · 4e54105 · 4e54105
1 parent 8f469e1
commit 4e54105
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 81 deletions.
diff --git a/.changeset/silly-chefs-marry.md b/.changeset/silly-chefs-marry.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Refactoring playground
diff --git a/js/_website/src/lib/components/DemosLite.svelte b/js/_website/src/lib/components/DemosLite.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Code from "@gradio/code";
+	import { BaseCode as Code, BaseWidget as CodeWidget } from "@gradio/code";
 	import Slider from "./Slider.svelte";
 	import Fullscreen from "./icons/Fullscreen.svelte";
 	import Close from "./icons/Close.svelte";
@@ -14,7 +14,6 @@
 
 	let generated = true;
 
-	let ai_code: string | undefined = "";
 	let current_code = false;
 	let compare = false;
 
@@ -103,7 +102,6 @@
 				const content = chunk.choices[0].delta.content;
 				if (content) {
 					out += content;
-					ai_code = out;
 					demos[demos.length - 1].code =
 						out ||
 						"# Describe your app above, and the LLM will generate the code here.";
@@ -128,12 +126,8 @@
 
 	let user_query: string;
 
-	let user_query_elem: HTMLInputElement;
-
-	$: user_query;
-
-	function handle_key_down(e: KeyboardEvent): void {
-		if (e.key === "Enter" && document.activeElement === user_query_elem) {
+	function handle_user_query_key_down(e: KeyboardEvent): void {
+		if (e.key === "Enter") {
 			generate_code(user_query);
 		}
 	}
@@ -147,7 +141,7 @@
 	export let current_selection: string;
 	export let show_nav = true;
 
-	let new_demo = {
+	const blank_demo_for_ai_gen = {
 		name: "Blank",
 		dir: "Blank",
 		code: "# Describe your app above, and the LLM will generate the code here.",
@@ -160,13 +154,13 @@
 		current_code = false;
 	}
 
-	demos.push(new_demo);
+	demos.push(blank_demo_for_ai_gen);
 
 	let mounted = false;
-	let controller: any;
-
-	let dummy_elem: any = { classList: { contains: () => false } };
-	let dummy_gradio: any = { dispatch: (_) => {} };
+	let controller: {
+		run_code: (code: string) => Promise<void>;
+		install: (requirements: string[]) => Promise<void>;
+	};
 
 	function debounce<T extends any[]>(
 		func: (...args: T) => Promise<unknown>,
@@ -199,16 +193,17 @@
 			await loadScript(WHEEL.gradio_lite_url + "/dist/lite.js");
 			controller = createGradioApp({
 				target: document.getElementById("lite-demo"),
-				requirements: [
+				requirements: requirements.concat([
+					// Frequently used libraries
 					"numpy",
 					"pandas",
 					"matplotlib",
 					"plotly",
 					"transformers_js_py",
 					"requests",
 					"pillow"
-				],
-				code: demos[0].code,
+				]),
+				code,
 				info: true,
 				container: true,
 				isEmbed: true,
@@ -242,9 +237,9 @@
 		setTimeout(() => (copied_link = false), 2000);
 	}
 
-	$: code = demos.find((demo) => demo.name === current_selection)?.code || "";
-	$: requirements =
-		demos.find((demo) => demo.name === current_selection)?.requirements || [];
+	$: selected_demo = demos.find((demo) => demo.name === current_selection);
+	$: code = selected_demo?.code || "";
+	$: requirements = selected_demo?.requirements || [];
 	$: requirementsStr = JSON.stringify(requirements); // Use the stringified version to trigger reactivity only when the array values actually change, while the `requirements` object's identity always changes.
 
 	$: if (mounted) {
@@ -296,7 +291,7 @@
 		}
 	}
 
-	let demos_copy: typeof demos = JSON.parse(JSON.stringify(demos));
+	const demos_copy: typeof demos = JSON.parse(JSON.stringify(demos));
 
 	$: show_dialog(demos, demos_copy, shared);
 	$: if (code) {
@@ -384,8 +379,6 @@
 	<link rel="stylesheet" href="https://gradio-hello-world.hf.space/theme.css" />
 </svelte:head>
 
-<svelte:window on:keydown={handle_key_down} />
-
 <div class="share-btns flex flex-row absolute">
 	<button class="share-button" on:click={() => copy_link(current_selection)}>
 		{#if !copied_link}
@@ -416,16 +409,14 @@
 >
 	<Slider bind:position bind:show_nav>
 		<div class="flex-row min-w-0 h-full" class:flex={!fullscreen}>
-			{#each demos as demo, i}
+			{#if selected_demo}
 				<div
-					hidden={current_selection !== demo.name}
-					class="code-editor w-full border-r"
-					id={demo.dir}
+					class="code-editor w-full border-r flex flex-col"
+					id={selected_demo.dir}
 					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 class="flex float-right"></div>
 						{#if current_code}
 							<div class="flex items-center">
 								<p class="text-sm text-gray-600">
@@ -445,16 +436,16 @@
 						{/if}
 					</div>
 
-					{#if demo.name === "Blank"}
+					{#if selected_demo.name === "Blank"}
 						<div class="search-bar">
 							{#if !generated}
 								<div class="loader"></div>
 							{:else}
 								✨
 							{/if}
 							<input
-								bind:this={user_query_elem}
 								bind:value={user_query}
+								on:keydown={handle_user_query_key_down}
 								placeholder="What do you want to build?"
 								autocomplete="off"
 								autocorrect="off"
@@ -476,19 +467,18 @@
 						</div>
 					{/if}
 
-					<Code
-						bind:value={demos[i].code}
-						on:input={() => console.log("input")}
-						label=""
-						language="python"
-						target={dummy_elem}
-						gradio={dummy_gradio}
-						lines={10}
-						interactive="true"
-					/>
+					<div class="flex-1 relative">
+						<CodeWidget value={selected_demo.code} language="python" />
+						<Code
+							bind:value={selected_demo.code}
+							language="python"
+							lines={10}
+							readonly={false}
+							dark_mode={false}
+						/>
+					</div>
 				</div>
-			{/each}
-
+			{/if}
 			<div
 				class="preview w-full mx-auto"
 				style="width: {fullscreen ? 100 : (1 - position) * 100}%"
@@ -576,18 +566,6 @@
 		margin: 0 !important;
 	}
 
-	.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;
 		min-height: none !important;

diff --git a/js/_website/src/routes/playground/+page.svelte b/js/_website/src/routes/playground/+page.svelte
@@ -7,7 +7,7 @@
 	import { gradio_logo } from "$lib/assets";
 	import { afterNavigate } from "$app/navigation";
 	import { clickOutside } from "$lib/components/clickOutside.js";
-	import Code from "@gradio/code";
+	import { BaseCode as Code } from "@gradio/code";
 	import version_json from "$lib/json/version.json";
 	import WHEEL from "$lib/json/wheel.json";
 
@@ -37,12 +37,8 @@
 
 	let show_nav = true;
 
-	$: show_nav;
-
 	let show_mobile_nav = false;
 
-	$: show_mobile_nav;
-
 	let show_preview = false;
 
 	let on_desktop = false;
@@ -57,9 +53,6 @@
 		show_mobile_nav = false;
 	};
 
-	let dummy_elem: any = { classList: { contains: () => false } };
-	let dummy_gradio: any = { dispatch: (_) => {} };
-
 	let version = version_json.version;
 </script>
 
@@ -253,12 +246,10 @@
 					{#if !show_preview}
 						<Code
 							bind:value={demos[i].code}
-							label=""
 							language="python"
-							target={dummy_elem}
-							gradio={dummy_gradio}
 							lines={10}
-							interactive="false"
+							readonly
+							dark_mode={false}
 						/>
 					{:else}
 						<gradio-app space={"gradio/" + demo.dir} />
@@ -295,9 +286,6 @@
 {/if}
 
 <style>
-	.code {
-		white-space: pre-wrap;
-	}
 	:global(body) {
 		min-height: 100vh;
 		display: grid;
@@ -348,13 +336,6 @@
 		box-shadow: 0 0 1px #fc963c;
 	}
 
-	input:checked + .code-btn {
-		color: #fc963c !important;
-	}
-	input:focus + .code-btn {
-		color: #fc963c !important;
-	}
-
 	input:checked + .slider:before {
 		-webkit-transform: translateX(26px);
 		-ms-transform: translateX(26px);
@@ -369,10 +350,6 @@
 		border-radius: 50%;
 	}
 
-	.code-mobile .block {
-		height: 100%;
-	}
-
 	.mobile-window {
 		height: 58vh;
 		overflow-y: scroll;