@gradio/core 0.11.1 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @gradio/core
 
+## 0.12.0
+
+### Features
+
+- [#10500](https://github.com/gradio-app/gradio/pull/10500) [`16d419b`](https://github.com/gradio-app/gradio/commit/16d419b9f1f18ae4507d18a4739eb83ac4f3fae9) - Allow functions that solely update component properties to run in the frontend by setting `js=True`.  Thanks @abidlabs!
+
+### Dependency updates
+
+- @gradio/upload@0.15.3
+- @gradio/video@0.14.3
+- @gradio/code@0.11.1
+- @gradio/client@1.13.0
+- @gradio/button@0.4.8
+- @gradio/image@0.21.3
+- @gradio/gallery@0.15.8
+- @gradio/file@0.12.8
+
 ## 0.11.1
 
 ### Features

package/dist/src/Blocks.svelte

@@ -212,7 +212,7 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
     event_data: dep.collects_event_data ? event_data : null,
     trigger_id
   };
-  if (dep.frontend_fn) {
+  if (dep.frontend_fn && typeof dep.frontend_fn !== "boolean") {
     dep.frontend_fn(
       payload.data.concat(
         await Promise.all(dep.outputs.map((id) => get_data(id)))
@@ -235,6 +235,19 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
     );
   } else {
     if (dep.backend_fn) {
+      if (dep.js_implementation) {
+        let js_fn = new AsyncFunction(
+          `let result = await (${dep.js_implementation})(...arguments);
+						return (!Array.isArray(result)) ? [result] : result;`
+        );
+        js_fn(...payload.data).then((js_result) => {
+          handle_update(js_result, dep_index);
+          payload.js_implementation = true;
+        }).catch((error) => {
+          console.error(error);
+          payload.js_implementation = false;
+        });
+      }
       trigger_prediction(dep, payload);
     }
   }
@@ -299,6 +312,9 @@ async function trigger_api_call(dep_index, trigger_id = null, event_data = null)
     }
     submit_map.set(dep_index, submission);
     for await (const message of submission) {
+      if (payload2.js_implementation) {
+        return;
+      }
       if (message.type === "data") {
         handle_data(message);
       } else if (message.type === "render") {

package/dist/src/init.d.ts

@@ -45,7 +45,7 @@ export declare const AsyncFunction: new (...args: string[]) => (...args: any[])
  * @param output_length the number of outputs
  * @returns The function, or null if the source code is invalid or missing
  */
-export declare function process_frontend_fn(source: string | null | undefined | false, backend_fn: boolean, input_length: number, output_length: number): ((...args: unknown[]) => Promise<unknown[]>) | null;
+export declare function process_frontend_fn(source: string | null | undefined | boolean, backend_fn: boolean, input_length: number, output_length: number): ((...args: unknown[]) => Promise<unknown[]>) | null;
 /**
  * `Dependency.targets` is an array of `[id, trigger]` pairs with the ids as the `fn_id`.
  * This function take a single list of `Dependency.targets` and add those to the target_map.

package/dist/src/init.js

@@ -298,7 +298,7 @@ export const AsyncFunction = Object.getPrototypeOf(async function () { }).constr
  * @returns The function, or null if the source code is invalid or missing
  */
 export function process_frontend_fn(source, backend_fn, input_length, output_length) {
-    if (!source)
+    if (!source || source === true)
         return null;
     const wrap = backend_fn ? input_length === 1 : output_length === 1;
     try {

package/dist/src/types.d.ts

@@ -39,6 +39,7 @@ export interface Payload {
     data: unknown[];
     event_data?: unknown | null;
     trigger_id?: number | null;
+    js_implementation?: boolean | null;
 }
 /** A dependency as received from the backend */
 export interface Dependency {
@@ -70,6 +71,7 @@ export interface Dependency {
     stream_every: number;
     like_user_message: boolean;
     event_specific_args: string[];
+    js_implementation: string | null;
 }
 interface TypeDescription {
     input_payload?: string;

package/package.json

@@ -1,67 +1,67 @@
 {
   "name": "@gradio/core",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "type": "module",
   "devDependencies": {
     "@gradio/accordion": "^0.5.8",
-    "@gradio/annotatedimage": "^0.9.8",
     "@gradio/atoms": "^0.13.3",
+    "@gradio/audio": "^0.17.3",
     "@gradio/box": "^0.2.12",
+    "@gradio/annotatedimage": "^0.9.9",
+    "@gradio/button": "^0.4.8",
+    "@gradio/chatbot": "^0.24.2",
     "@gradio/checkbox": "^0.4.14",
-    "@gradio/button": "^0.4.7",
-    "@gradio/chatbot": "^0.24.1",
-    "@gradio/audio": "^0.17.2",
     "@gradio/checkboxgroup": "^0.6.14",
-    "@gradio/client": "^1.12.0",
+    "@gradio/client": "^1.13.0",
+    "@gradio/code": "^0.11.1",
     "@gradio/colorpicker": "^0.4.14",
-    "@gradio/code": "^0.11.0",
-    "@gradio/column": "^0.2.0",
-    "@gradio/dataframe": "^0.16.3",
-    "@gradio/dataset": "^0.4.7",
-    "@gradio/downloadbutton": "^0.3.7",
-    "@gradio/dropdown": "^0.9.13",
+    "@gradio/dataset": "^0.4.8",
     "@gradio/datetime": "^0.3.6",
+    "@gradio/column": "^0.2.0",
+    "@gradio/downloadbutton": "^0.3.8",
+    "@gradio/dataframe": "^0.16.4",
     "@gradio/fallback": "^0.4.14",
-    "@gradio/fileexplorer": "^0.5.18",
-    "@gradio/file": "^0.12.7",
+    "@gradio/file": "^0.12.8",
+    "@gradio/dropdown": "^0.9.13",
     "@gradio/form": "^0.2.12",
+    "@gradio/fileexplorer": "^0.5.19",
+    "@gradio/gallery": "^0.15.8",
     "@gradio/group": "^0.2.0",
-    "@gradio/gallery": "^0.15.7",
-    "@gradio/highlightedtext": "^0.8.14",
     "@gradio/html": "^0.6.5",
-    "@gradio/image": "^0.21.2",
-    "@gradio/imageeditor": "^0.12.9",
     "@gradio/icons": "^0.10.0",
-    "@gradio/label": "^0.5.6",
+    "@gradio/highlightedtext": "^0.8.14",
+    "@gradio/imageeditor": "^0.12.10",
+    "@gradio/image": "^0.21.3",
     "@gradio/json": "^0.5.14",
+    "@gradio/label": "^0.5.6",
     "@gradio/browserstate": "^0.3.1",
     "@gradio/markdown": "^0.13.4",
-    "@gradio/model3d": "^0.14.2",
+    "@gradio/multimodaltextbox": "^0.9.9",
+    "@gradio/model3d": "^0.14.3",
     "@gradio/nativeplot": "^0.5.8",
-    "@gradio/number": "^0.5.14",
-    "@gradio/multimodaltextbox": "^0.9.8",
     "@gradio/paramviewer": "^0.7.2",
     "@gradio/plot": "^0.9.9",
+    "@gradio/number": "^0.5.14",
     "@gradio/radio": "^0.6.14",
-    "@gradio/row": "^0.2.1",
-    "@gradio/sidebar": "^0.1.5",
     "@gradio/simpledropdown": "^0.3.14",
-    "@gradio/simpleimage": "^0.8.18",
+    "@gradio/row": "^0.2.1",
+    "@gradio/simpleimage": "^0.8.19",
     "@gradio/simpletextbox": "^0.3.14",
-    "@gradio/slider": "^0.6.2",
+    "@gradio/sidebar": "^0.1.5",
     "@gradio/sketchbox": "^0.6.0",
-    "@gradio/statustracker": "^0.10.4",
+    "@gradio/slider": "^0.6.2",
     "@gradio/state": "^0.1.2",
+    "@gradio/statustracker": "^0.10.4",
     "@gradio/tabitem": "^0.4.2",
     "@gradio/tabs": "^0.4.2",
-    "@gradio/textbox": "^0.10.4",
     "@gradio/theme": "^0.4.0",
-    "@gradio/upload": "^0.15.2",
     "@gradio/timer": "^0.4.4",
-    "@gradio/uploadbutton": "^0.8.7",
-    "@gradio/wasm": "^0.17.3",
+    "@gradio/upload": "^0.15.3",
+    "@gradio/textbox": "^0.10.4",
+    "@gradio/uploadbutton": "^0.8.8",
     "@gradio/utils": "^0.10.1",
-    "@gradio/video": "^0.14.2"
+    "@gradio/video": "^0.14.3",
+    "@gradio/wasm": "^0.17.3"
   },
   "msw": {
     "workerDirectory": "public"

package/src/Blocks.svelte

@@ -289,7 +289,7 @@
 			trigger_id: trigger_id
 		};
 
-		if (dep.frontend_fn) {
+		if (dep.frontend_fn && typeof dep.frontend_fn !== "boolean") {
 			dep
 				.frontend_fn(
 					payload.data.concat(
@@ -314,6 +314,21 @@
 			);
 		} else {
 			if (dep.backend_fn) {
+				if (dep.js_implementation) {
+					let js_fn = new AsyncFunction(
+						`let result = await (${dep.js_implementation})(...arguments);
+						return (!Array.isArray(result)) ? [result] : result;`
+					);
+					js_fn(...payload.data)
+						.then((js_result) => {
+							handle_update(js_result, dep_index);
+							payload.js_implementation = true;
+						})
+						.catch((error) => {
+							console.error(error);
+							payload.js_implementation = false;
+						});
+				}
 				trigger_prediction(dep, payload);
 			}
 		}
@@ -391,6 +406,9 @@
 			submit_map.set(dep_index, submission);
 
 			for await (const message of submission) {
+				if (payload.js_implementation) {
+					return;
+				}
 				if (message.type === "data") {
 					handle_data(message);
 				} else if (message.type === "render") {

package/src/init.ts

@@ -478,12 +478,12 @@ export const AsyncFunction: new (
  * @returns The function, or null if the source code is invalid or missing
  */
 export function process_frontend_fn(
-	source: string | null | undefined | false,
+	source: string | null | undefined | boolean,
 	backend_fn: boolean,
 	input_length: number,
 	output_length: number
 ): ((...args: unknown[]) => Promise<unknown[]>) | null {
-	if (!source) return null;
+	if (!source || source === true) return null;
 
 	const wrap = backend_fn ? input_length === 1 : output_length === 1;
 	try {

package/src/types.ts

@@ -43,6 +43,7 @@ export interface Payload {
 	data: unknown[];
 	event_data?: unknown | null;
 	trigger_id?: number | null;
+	js_implementation?: boolean | null;
 }
 
 /** A dependency as received from the backend */
@@ -75,6 +76,7 @@ export interface Dependency {
 	stream_every: number;
 	like_user_message: boolean;
 	event_specific_args: string[];
+	js_implementation: string | null;
 }
 
 interface TypeDescription {