Ask LLM to generate the requirements.txt in the playground (#9647)

* Ask LLM to generate the requirements.txt

* add changeset

* Fix

* Remove adhoc installs

* Suspend auto-run during code generation by LLM

* Add a rule to make sure the code includes all necessary imports

* Format

---------

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

.changeset/yummy-donkeys-ask.md

@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Ask LLM to generate the requirements.txt in the playground

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

@@ -256,20 +256,19 @@ def organize_pages():
 gradio_docs = docs["docs"]["gradio"]
 
 SYSTEM_PROMPT = """
-Generate code for using the Gradio python library. 
+Generate code for using the Gradio python library.
 
 The following RULES must be followed.  Whenever you are forming a response, ensure all rules have been followed otherwise start over.
 
-RULES: 
+RULES:
 Only respond with code, not text.
 Only respond with valid Python syntax.
-Never include backticks in your response such as ``` or ```python. 
-Never use any external library aside from: gradio, numpy, pandas, plotly, transformers_js and matplotlib.
+Never include backticks in your response such as ``` or ```python.
 Do not include any code that is not necessary for the app to run.
-Respond with a full Gradio app. 
+Respond with a full Gradio app.
 Respond with a full Gradio app using correct syntax and features of the latest Gradio version. DO NOT write code that doesn't follow the signatures listed.
 Add comments explaining the code, but do not include any text that is not formatted as a Python comment.
-
+Make sure the code includes all necessary imports.
 
 
 Here's an example of a valid response:

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

@@ -149,6 +149,29 @@
 				}
 			}
 		}
+
+		const system_prompt_requirements_txt = `User gives Python code.
+You return the required package list in the format of \`requirements.txt\` for pip.
+You exclude \`gradio\` from the package list because it's already installed in the user's environment.
+You only return the content of \`requirements.txt\`, without any other texts or messages.`;
+		const query_requirements_txt = demos[queried_index].code;
+		let generated_requirements_txt = "";
+		for await (const chunk of streamFromWorker(
+			query_requirements_txt,
+			system_prompt_requirements_txt,
+			abortController.signal
+		)) {
+			if (chunk.choices && chunk.choices.length > 0) {
+				const content = chunk.choices[0].delta.content;
+				if (content) {
+					generated_requirements_txt += content;
+				}
+			}
+		}
+		demos[queried_index].requirements = generated_requirements_txt
+			.split("\n")
+			.filter((r) => r.trim() !== "");
+
 		generated = true;
 		if (selected_demo.name === demo_name) {
 			highlight_changes(code_to_compare, demos[queried_index].code);
@@ -167,7 +190,10 @@
 
 	function handle_user_query_key_down(e: KeyboardEvent): void {
 		if (e.key === "Enter") {
-			generate_code(user_query, selected_demo.name);
+			run_as_update = false;
+			suspend_and_resume_auto_run(() =>
+				generate_code(user_query, selected_demo.name)
+			);
 		}
 	}
 
@@ -289,35 +315,33 @@
 		}
 
 		controller.install(cleanupRequirements(current_demo.requirements));
-		controller.install([
-			"numpy",
-			"pandas",
-			"matplotlib",
-			"plotly",
-			"transformers_js_py",
-			"requests",
-			"pillow"
-		]);
 	}
 	$: if (mounted) {
 		// When the selected demo changes, we need to call controller.install() immediately without debouncing.
 		on_demo_selected(current_selection);
 	}
-	$: if (mounted) {
+
+	let run_as_update = true;
+	$: if (mounted && run_as_update) {
 		debounced_run_code && debounced_run_code(code);
 	}
-	$: if (mounted) {
+	$: if (mounted && run_as_update) {
 		debounced_install &&
-			debounced_install(cleanupRequirements(requirementsStr.split("\n"))) &&
-			debounced_install([
-				"numpy",
-				"pandas",
-				"matplotlib",
-				"plotly",
-				"transformers_js_py",
-				"requests",
-				"pillow"
-			]);
+			debounced_install(cleanupRequirements(requirementsStr.split("\n")));
+	}
+	async function suspend_and_resume_auto_run(
+		inner_fn: () => unknown | Promise<unknown>
+	) {
+		run_as_update = false;
+		try {
+			await inner_fn();
+			await controller.install(
+				cleanupRequirements(requirementsStr.split("\n"))
+			);
+			await controller.run_code(code);
+		} finally {
+			run_as_update = true;
+		}
 	}
 
 	let position = 0.5;
@@ -653,7 +677,9 @@
 						{#if generated}
 							<button
 								on:click={() => {
-									generate_code(user_query, selected_demo.name);
+									suspend_and_resume_auto_run(() =>
+										generate_code(user_query, selected_demo.name)
+									);
 								}}
 								class="flex items-center w-fit min-w-fit bg-gradient-to-r from-orange-100 to-orange-50 border border-orange-200 px-4 py-0.5 rounded-full text-orange-800 hover:shadow"
 							>