From edcd5748f6c0faf2028a8e6a330aad5eccf103d5 Mon Sep 17 00:00:00 2001
From: "Yuichiro Tachibana (Tsuchiya)" <t.yic.yt@gmail.com>
Date: Fri, 5 Jul 2024 16:37:27 +0900
Subject: [PATCH] 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                  |  5 ++
 demo/hello_world/run.ipynb                    |  2 +-
 demo/hello_world/run.py                       |  4 +-
 .../src/lib/components/DemosLite.svelte       | 52 +++++++++----------
 4 files changed, 33 insertions(+), 30 deletions(-)
 create mode 100644 .changeset/slow-ties-hope.md

diff --git a/.changeset/slow-ties-hope.md b/.changeset/slow-ties-hope.md
new file mode 100644
index 0000000000..06fe758fb7
--- /dev/null
+++ b/.changeset/slow-ties-hope.md
@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Fix playground to display errors
diff --git a/demo/hello_world/run.ipynb b/demo/hello_world/run.ipynb
index 5023722053..ddfe0d41ac 100644
--- a/demo/hello_world/run.ipynb
+++ b/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}
\ No newline at end of file
+{"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}
\ No newline at end of file
diff --git a/demo/hello_world/run.py b/demo/hello_world/run.py
index fa488212ec..15e7cb988b 100644
--- a/demo/hello_world/run.py
+++ b/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()   
\ No newline at end of file
+    demo.launch()
diff --git a/js/_website/src/lib/components/DemosLite.svelte b/js/_website/src/lib/components/DemosLite.svelte
index c03cbbd4e9..9bc5bb186c 100644
--- a/js/_website/src/lib/components/DemosLite.svelte
+++ b/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;