Fix playground to display errors (#8689)

* Fix the Playground on the website to trigger run_code() and install() with debounce and to display errors

* Remove an unused function, make_full_screen()

* Format demo/hello_world/run.py

* Update notebook

* add changeset

* add changeset

---------

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

.changeset/slow-ties-hope.md

@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Fix playground to display errors

demo/hello_world/run.ipynb

@@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: hello_world\n", "### The simplest possible Gradio demo. It wraps a 'Hello {name}!' function in an Interface that accepts and returns text.\n", "        "]}, {"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 greet(name):\n", "    return \"Hello \" + name + \"!\"\n", "\n", "demo = gr.Interface(fn=greet, inputs=\"textbox\", outputs=\"textbox\")\n", "    \n", "if __name__ == \"__main__\":\n", "    demo.launch()   "]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": "302934307671667531413257853548643485645", "metadata": {}, "source": ["# Gradio Demo: hello_world\n", "### The simplest possible Gradio demo. It wraps a 'Hello {name}!' function in an Interface that accepts and returns text.\n", "        "]}, {"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 greet(name):\n", "    return \"Hello \" + name + \"!\"\n", "\n", "demo = gr.Interface(fn=greet, inputs=\"textbox\", outputs=\"textbox\")\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}

demo/hello_world/run.py

@@ -4,6 +4,6 @@ def greet(name):
     return "Hello " + name + "!"
 
 demo = gr.Interface(fn=greet, inputs="textbox", outputs="textbox")
-    
+
 if __name__ == "__main__":
-    demo.launch()   
+    demo.launch()

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

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { afterNavigate } from "$app/navigation";
 	import Code from "@gradio/code";
 	import Slider from "./Slider.svelte";
 	import Fullscreen from "./icons/Fullscreen.svelte";
@@ -8,6 +7,7 @@
 	import share from "$lib/assets/img/anchor_gray.svg";
 	import { svgCheck } from "$lib/assets/copy.js";
 	import { browser } from "$app/environment";
+	import { onMount } from "svelte";
 
 	export let demos: {
 		name: string;
@@ -33,11 +33,22 @@
 	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 || "";
+	function debounce<T extends any[]>(
+		func: (...args: T) => Promise<unknown>,
+		timeout: number
+	): (...args: T) => void {
+		let timer: any;
+		return function (...args: any) {
+			clearTimeout(timer);
+			timer = setTimeout(() => {
+				func(...args);
+			}, timeout);
+		};
+	}
 
-	afterNavigate(() => {
+	let debounced_run_code: Function | undefined;
+	let debounced_install: Function | undefined;
+	onMount(() => {
 		controller = createGradioApp({
 			target: document.getElementById("lite-demo"),
 			requirements: demos[0].requirements,
@@ -52,22 +63,13 @@
 			controlPageTitle: false,
 			appMode: true
 		});
+		const debounce_timeout = 1000;
+		debounced_run_code = debounce(controller.run_code, debounce_timeout);
+		debounced_install = debounce(controller.install, debounce_timeout);
+
 		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);
-	}
-
-	let timeout: any;
-
 	let copied_link = false;
 	async function copy_link(name: string) {
 		let code_b64 = btoa(code);
@@ -82,22 +84,18 @@
 	$: code = demos.find((demo) => demo.name === current_selection)?.code || "";
 	$: requirements =
 		demos.find((demo) => demo.name === current_selection)?.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) {
-		if (timeout) {
-			clearTimeout(timeout);
-		}
-		timeout = setTimeout(() => {
-			update(code, requirements);
-		}, 1000);
+		debounced_run_code && debounced_run_code(code);
+	}
+	$: if (mounted) {
+		debounced_install && debounced_install(JSON.parse(requirementsStr));
 	}
 
 	let position = 0.5;
 
 	let fullscreen = false;
-	function make_full_screen() {
-		fullscreen = true;
-	}
 	let preview_width = 100;
 	let lg_breakpoint = false;