Use latest lite wheel on website (#9500)

* use main wheel

* fixes

* formatting

* add changeset

---------

Co-authored-by: gradio-pr-bot <[email protected]>

Author: aliabd

.changeset/tall-impalas-reply.md

@@ -0,0 +1,5 @@
+---
+"website": minor
+---
+
+feat:Use latest lite wheel on website

js/_website/generate_jsons/generate.py

@@ -67,6 +67,7 @@ def get_latest_release():
                     "gradio_install": f"pip install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-{version}-py3-none-any.whl",
                     "gradio_py_client_install": f"pip install 'gradio-client @ git+https://github.com/gradio-app/gradio@{sha}#subdirectory=client/python'",
                     "gradio_js_client_install": f"npm install https://gradio-builds.s3.amazonaws.com/{sha}/gradio-client-{js_client_version}.tgz",
+                    "gradio_lite_url": f"https://gradio-lite-previews.s3.amazonaws.com/{sha}"
                 },
                 j,
             )

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

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import WHEEL from "$lib/json/wheel.json";
+
 	export let name: string;
 	export let code: string;
 	export let highlighted_code: string;
@@ -8,10 +10,7 @@
 </script>
 
 <svelte:head>
-	<link
-		rel="stylesheet"
-		href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css"
-	/>
+	<link rel="stylesheet" href="{WHEEL.gradio_lite_url}/dist/lite.css" />
 </svelte:head>
 
 <div class="hidden lg:block py-2 max-h-[750px] overflow-y-scroll">

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

@@ -8,6 +8,7 @@
 	import { svgCheck } from "$lib/assets/copy.js";
 	import { browser } from "$app/environment";
 	import { onMount } from "svelte";
+	import WHEEL from "$lib/json/wheel.json";
 
 	export let demos: {
 		name: string;
@@ -48,26 +49,42 @@
 
 	let debounced_run_code: Function | undefined;
 	let debounced_install: Function | undefined;
-	onMount(() => {
-		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
+
+	function loadScript(src: string) {
+		return new Promise((resolve, reject) => {
+			const script = document.createElement("script");
+			script.src = src;
+			script.onload = () => resolve(script);
+			script.onerror = () => reject(new Error(`Script load error for ${src}`));
+			document.head.appendChild(script);
 		});
-		const debounce_timeout = 1000;
-		debounced_run_code = debounce(controller.run_code, debounce_timeout);
-		debounced_install = debounce(controller.install, debounce_timeout);
+	}
 
-		mounted = true;
+	onMount(async () => {
+		try {
+			await loadScript(WHEEL.gradio_lite_url + "/dist/lite.js");
+			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
+			});
+			const debounce_timeout = 1000;
+			debounced_run_code = debounce(controller.run_code, debounce_timeout);
+			debounced_install = debounce(controller.install, debounce_timeout);
+
+			mounted = true;
+		} catch (error) {
+			console.error("Error loading Gradio Lite:", error);
+		}
 	});
 
 	let copied_link = false;
@@ -146,12 +163,10 @@
 </script>
 
 <svelte:head>
-	<link
-		rel="stylesheet"
-		href="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.css"
-	/>
+	<link rel="stylesheet" href="{WHEEL.gradio_lite_url}/dist/lite.css" />
 	<link rel="stylesheet" href="https://gradio-hello-world.hf.space/theme.css" />
 </svelte:head>
+
 <div class="flex flex-row" style="position: absolute; top: -6%; right: 0.4%">
 	<button
 		class="border border-gray-300 rounded-md mx-2 px-2 py-.5 my-[3px] text-md text-gray-600 hover:bg-gray-50 flex"

js/_website/src/routes/+layout.svelte

@@ -16,6 +16,8 @@
 	import Header from "$lib/components/Header.svelte";
 	import Footer from "$lib/components/Footer.svelte";
 
+	import WHEEL from "$lib/json/wheel.json";
+
 	import { media_query } from "../lib/utils";
 	store = media_query();
 
@@ -45,7 +47,7 @@
 				}
 			}
 			const script = document.createElement("script");
-			script.src = "https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js";
+			script.src = WHEEL.gradio_lite_url + "/dist/lite.js";
 			script.type = "module";
 			document.head.appendChild(script);
 		}

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

@@ -9,6 +9,7 @@
 	import { clickOutside } from "$lib/components/clickOutside.js";
 	import Code from "@gradio/code";
 	import version_json from "$lib/json/version.json";
+	import WHEEL from "$lib/json/wheel.json";
 
 	export let data: {
 		demos_by_category: {
@@ -70,10 +71,7 @@
 />
 
 <svelte:head>
-	<script
-		type="module"
-		src="https://cdn.jsdelivr.net/npm/@gradio/lite/dist/lite.js"
-	></script>
+	<script type="module" src="{WHEEL.gradio_lite_url}/dist/lite.js"></script>
 	<link rel="stylesheet" href="https://gradio-hello-world.hf.space/theme.css" />
 	<script
 		id="gradio-js-script"