Scroll to output (#1077)

* implement loader + scroll into view

* changes

* refactor components to use Block inside the app

* cleanup

* cleanup

* implement all changes for all changes for all relevant components

* fix formatting

* demos

* add status tracker to every component

* fix tests

* fix unti test flake: randInt

* cleanup CI

* fix CI

Co-authored-by: Abubakar Abid <abubakar@huggingface.co>

Author: pngwn

.github/workflows/ui.yml

@@ -58,12 +58,6 @@ jobs:
           node-version: 16
           cache: pnpm
           cache-dependency-path: ui/pnpm-lock.yaml
-      - name: Cache browsers
-        id: browser_cache
-        uses: actions/cache@main
-        with:
-          path: "~/.cache/ms-playwright"
-          key: chromium-${{ runner.os }}-${{ hashFiles('**/pnpm-lock.yaml') }}
       - run: pnpm install --frozen-lockfile
       - run: pnpx playwright install chromium
       - run: pnpm build

demo/kitchen_sink/run.py

@@ -1,3 +1,4 @@
+import os
 import json
 
 import numpy as np
@@ -40,9 +41,9 @@ def fn(
         },  # Label
         (audio1[0], np.flipud(audio1[1]))
         if audio1 is not None
-        else "files/cantina.wav",  # Audio
-        np.flipud(im1) if im1 is not None else "files/cheetah1.jpg",  # Image
-        video if video is not None else "files/world.mp4",  # Video
+        else os.path.join(os.path.dirname(__file__),"files/cantina.wav"),  # Audio
+        np.flipud(im1) if im1 is not None else os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg"),  # Image
+        video if video is not None else os.path.join(os.path.dirname(__file__),"files/world.mp4"),  # Video
         [
             ("The", "art"),
             ("quick brown", "adj"),
@@ -72,11 +73,11 @@ def fn(
         "<button style='background-color: red'>Click Me: "
         + radio
         + "</button>",  # HTML
-        "files/titanic.csv",
+        os.path.join(os.path.dirname(__file__),"files/titanic.csv"),
         df1,  # Dataframe
         np.random.randint(0, 10, (4, 4)),  # Dataframe
         [
-            im for im in [im1, im2, im3, im4, "files/cheetah1.jpg"] if im is not None
+            im for im in [im1, im2, im3, im4, os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg")] if im is not None
         ],  # Carousel
         df2,  # Timeseries
     )
@@ -136,16 +137,16 @@ def fn(
             ["foo", "baz"],
             "baz",
             "bar",
-            "files/cheetah1.jpg",
-            "files/cheetah1.jpg",
-            "files/cheetah1.jpg",
-            "files/cheetah1.jpg",
-            "files/world.mp4",
-            "files/cantina.wav",
-            "files/cantina.wav",
-            "files/titanic.csv",
+            os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__),"files/cheetah1.jpg"),
+            os.path.join(os.path.dirname(__file__),"files/world.mp4"),
+            os.path.join(os.path.dirname(__file__),"files/cantina.wav"),
+            os.path.join(os.path.dirname(__file__),"files/cantina.wav"),
+            os.path.join(os.path.dirname(__file__),"files/titanic.csv"),
             [[1, 2, 3], [3, 4, 5]],
-            "files/time.csv",
+            os.path.join(os.path.dirname(__file__),"files/time.csv"),
         ]
     ]
     * 3,

demo/main_note/run.py

@@ -1,6 +1,6 @@
 from math import log2, pow
+import os
 
-import matplotlib.pyplot as plt
 import numpy as np
 from scipy.fftpack import fft
 
@@ -46,8 +46,8 @@ def main_note(audio):
     gr.Audio(source="microphone"),
     gr.Label(num_top_classes=4),
     examples=[
-        ["audio/recording1.wav"],
-        ["audio/cantina.wav"],
+        [os.path.join(os.path.dirname(__file__),"audio/recording1.wav")],
+        [os.path.join(os.path.dirname(__file__),"audio/cantina.wav")],
     ],
     interpretation="default",
 )

demo/zip_two_files/run.py

@@ -1,3 +1,4 @@
+import os
 from zipfile import ZipFile
 
 import gradio as gr
@@ -15,7 +16,8 @@ def zip_two_files(file1, file2):
     ["file", "file"],
     "file",
     examples=[
-        ["files/titanic.csv", "files/titanic.csv"],
+        [os.path.join(os.path.dirname(__file__),"files/titanic.csv"), 
+         os.path.join(os.path.dirname(__file__),"files/titanic.csv")],
     ],
 )
 

ui/package.json

@@ -23,32 +23,32 @@
 	"dependencies": {
 		"@gradio/tootils": "workspace:^0.0.1",
 		"@playwright/test": "^1.20.0",
-		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.36",
+		"@sveltejs/vite-plugin-svelte": "^1.0.0-next.41",
 		"@tailwindcss/forms": "^0.5.0",
 		"@testing-library/dom": "^8.11.3",
 		"@testing-library/svelte": "^3.1.0",
 		"@testing-library/user-event": "^13.5.0",
 		"autoprefixer": "^10.4.4",
+		"babylonjs": "^4.2.1",
+		"babylonjs-loaders": "^4.2.1",
 		"happy-dom": "^2.49.0",
 		"npm-run-all": "^4.1.5",
+		"plotly.js-dist-min": "^2.10.1",
 		"polka": "^1.0.0-next.22",
 		"postcss": "^8.4.5",
 		"postcss-nested": "^5.0.6",
-		"prettier": "^2.5.1",
-		"prettier-plugin-svelte": "^2.6.0",
+		"prettier": "^2.6.2",
+		"prettier-plugin-svelte": "^2.7.0",
 		"sirv": "^2.0.2",
 		"sirv-cli": "^2.0.2",
-		"svelte": "^3.46.3",
-		"svelte-check": "^2.4.1",
+		"svelte": "^3.47.0",
+		"svelte-check": "^2.7.0",
 		"svelte-i18n": "^3.3.13",
-		"svelte-preprocess": "^4.10.1",
+		"svelte-preprocess": "^4.10.6",
 		"tailwindcss": "^3.0.23",
 		"tinyspy": "^0.3.0",
-		"vite": "^2.9.1",
-		"vitest": "^0.3.2",
-		"plotly.js-dist-min": "^2.10.1",
-		"babylonjs": "^4.2.1",
-		"babylonjs-loaders": "^4.2.1"
+		"vite": "^2.9.5",
+		"vitest": "^0.10.0"
 	},
 	"devDependencies": {
 		"@types/three": "^0.138.0"

ui/packages/app/src/Blocks.svelte

@@ -55,7 +55,7 @@
 		value?: unknown;
 	}
 
-	const instance_map = components.reduce((acc, next) => {
+	let instance_map = components.reduce((acc, next) => {
 		return {
 			...acc,
 			[next.id]: {
@@ -89,8 +89,6 @@
 			_n.has_modes = true;
 		}
 
-		// console.log(await _component_map.get(meta.type));
-
 		if (node.children) {
 			_n.children = await Promise.all(node.children.map((v) => walk_layout(v)));
 		}
@@ -107,24 +105,25 @@
 	});
 
 	let tree;
+
 	Promise.all(Array.from(component_set)).then((v) => {
 		Promise.all(layout.children.map((c) => walk_layout(c))).then((v) => {
 			console.log(v);
 			tree = v;
 		});
 	});
 
+	function set_prop(obj: Instance, prop: string, val: any) {
+		if (!obj?.props) {
+			obj.props = {};
+		}
+		obj.props[prop] = val;
+		tree = tree;
+	}
+
 	let handled_dependencies: Array<number[]> = [];
 	let status_tracker_values: Record<number, string> = {};
 
-	let set_status = (dependency_index: number, status: string) => {
-		dependencies[dependency_index].status = status;
-		let status_tracker_id = dependencies[dependency_index].status_tracker;
-		if (status_tracker_id !== null) {
-			status_tracker_values[status_tracker_id] = status;
-		}
-	};
-
 	async function handle_mount({ detail }) {
 		await tick();
 		dependencies.forEach(({ targets, trigger, inputs, outputs, queue }, i) => {
@@ -164,14 +163,15 @@
 			}
 
 			target_instances.forEach(([id, { instance }]: [number, Instance]) => {
-				// console.log(id, handled_dependencies[i]?.includes(id) || !instance);
 				if (handled_dependencies[i]?.includes(id) || !instance) return;
-				// console.log(trigger, target_instances, instance);
 				instance?.$on(trigger, () => {
 					if (status === "pending") {
 						return;
 					}
-					set_status(i, "pending");
+					outputs.forEach((_id) =>
+						set_prop(instance_map[_id], "loading_status", "pending")
+					);
+
 					fn(
 						"predict",
 						{
@@ -182,13 +182,21 @@
 						() => {}
 					)
 						.then((output) => {
-							set_status(i, "complete");
+							// set_status(i, "complete");
 							output.data.forEach((value, i) => {
 								instance_map[outputs[i]].value = value;
+								set_prop(
+									instance_map[outputs[i]],
+									"loading_status",
+									"complete"
+								);
 							});
 						})
 						.catch((error) => {
-							set_status(i, "error");
+							outputs.forEach((_id) =>
+								set_prop(instance_map[_id], "loading_status", "error")
+							);
+
 							console.error(error);
 						});
 				});

ui/packages/app/src/Render.svelte

@@ -79,6 +79,9 @@
 			node.props.form_position = "single";
 		}
 	}
+	children =
+		children &&
+		children.filter((v) => instance_map[v.id].type !== "statustracker");
 </script>
 
 <svelte:component
@@ -91,7 +94,7 @@
 	tracked_status={status_tracker_values[id]}
 >
 	{#if children && children.length}
-		{#each children as { component, id, props, children, has_modes }}
+		{#each children as { component, id, props, children, has_modes } (id)}
 			<svelte:self
 				{component}
 				{id}

ui/packages/app/src/components/Audio/Audio.svelte

@@ -2,6 +2,9 @@
 	import { Audio, StaticAudio } from "@gradio/audio";
 	import type { FileData } from "@gradio/upload";
 	import { normalise_file } from "@gradio/upload";
+	import { Block } from "@gradio/atoms";
+
+	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
 	import { _ } from "svelte-i18n";
 
 	export let mode: "static" | "dynamic";
@@ -14,29 +17,44 @@
 	export let label: string;
 	export let root: string;
 
+	export let loading_status: "complete" | "pending" | "error";
+
 	if (default_value) value = default_value;
 
 	let _value: null | FileData;
 	$: _value = normalise_file(value, root);
+
+	let dragging: boolean;
 </script>
 
-{#if mode === "dynamic"}
-	<Audio
-		{label}
-		value={_value}
-		on:change={({ detail }) => (value = detail)}
-		{style}
-		{name}
-		{source}
-		{type}
-		on:edit
-		on:play
-		on:pause
-		on:ended
-		drop_text={$_("interface.drop_audio")}
-		or_text={$_("or")}
-		upload_text={$_("interface.click_to_upload")}
-	/>
-{:else}
-	<StaticAudio value={_value} name={_value?.name || "audio_file"} {label} />
-{/if}
+<Block
+	variant={mode === "dynamic" && value === null && source === "upload"
+		? "dashed"
+		: "solid"}
+	color={dragging ? "green" : "grey"}
+	padding={false}
+>
+	<StatusTracker tracked_status={loading_status} />
+
+	{#if mode === "dynamic"}
+		<Audio
+			{label}
+			value={_value}
+			on:change={({ detail }) => (value = detail)}
+			on:drag={({ detail }) => (dragging = detail)}
+			{style}
+			{name}
+			{source}
+			{type}
+			on:edit
+			on:play
+			on:pause
+			on:ended
+			drop_text={$_("interface.drop_audio")}
+			or_text={$_("or")}
+			upload_text={$_("interface.click_to_upload")}
+		/>
+	{:else}
+		<StaticAudio value={_value} name={_value?.name || "audio_file"} {label} />
+	{/if}
+</Block>

ui/packages/app/src/components/Button/Button.svelte

@@ -3,7 +3,7 @@
 	import { _ } from "svelte-i18n";
 
 	export let value: string;
-	export let default_value: string;
+	export let default_value: string | undefined = undefined;
 	export let style: string = "";
 	export let variant: "primary" | "secondary" = "primary";
 

ui/packages/app/src/components/Carousel/Carousel.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
 	import { Carousel } from "@gradio/carousel";
+	import StatusTracker from "../StatusTracker/StatusTracker.svelte";
 
 	export let style: string = "";
+	export let loading_status: "complete" | "pending" | "error";
 </script>
 
 <Carousel {style} on:change>
+	<StatusTracker tracked_status={loading_status} />
+
 	<slot />
 </Carousel>