Allow users to return dicts for values (#1373)

* changes

* changes

* add visible flag

demo/blocks_form/run.py

@@ -0,0 +1,32 @@
+import gradio as gr
+
+with gr.Blocks() as demo:
+    error_box = gr.Textbox(label="Error", visible=False)
+
+    name_box = gr.Textbox(label="Name")
+    age_box = gr.Number(label="Age")
+    symptoms_box = gr.CheckboxGroup(["Cough", "Fever", "Runny Nose"])
+    submit_btn = gr.Button("Submit")
+
+    diagnosis_box = gr.Textbox(label="Diagnosis")
+    patient_summary_box = gr.Textbox(label="Patient Summary")
+
+    def submit(name, age, symptoms):
+        if len(name) == 0:
+            return {error_box: gr.update(value="Enter name", visible=True)}
+        if age < 0 or age > 200:
+            return {error_box: gr.update(value="Enter valid age", visible=True)}
+        return {
+            diagnosis_box: "covid" if "Cough" in symptoms else "flu",
+            patient_summary_box: f"{name}, {age} y/o",
+        }
+
+    submit_btn.click(
+        submit,
+        [name_box, age_box, symptoms_box],
+        [error_box, diagnosis_box, patient_summary_box],
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()

gradio/__init__.py

@@ -5,7 +5,7 @@ import gradio.inputs as inputs
 import gradio.outputs as outputs
 import gradio.processing_utils
 import gradio.templates
-from gradio.blocks import Blocks
+from gradio.blocks import Blocks, skip, update
 from gradio.components import (
     HTML,
     JSON,
@@ -39,7 +39,6 @@ from gradio.components import (
     Variable,
     Video,
     component,
-    update,
 )
 from gradio.external import load_interface
 from gradio.flagging import (

gradio/blocks.py

@@ -167,6 +167,20 @@ class BlockFunction:
         self.total_runs = 0
 
 
+def update(**kwargs) -> dict:
+    """
+    Updates component parameters
+    @param kwargs: Updating component parameters
+    @return: Updated component parameters
+    """
+    kwargs["__type__"] = "generic_update"
+    return kwargs
+
+
+def skip() -> dict:
+    return update()
+
+
 class Blocks(BlockContext):
     """
     The Blocks class is a low-level API that allows you to create custom web
@@ -278,6 +292,22 @@ class Blocks(BlockContext):
         duration = time.time() - start
         block_fn.total_runtime += duration
         block_fn.total_runs += 1
+        if type(predictions) is dict and len(predictions) > 0:
+            keys_are_blocks = [isinstance(key, Block) for key in predictions.keys()]
+            if all(keys_are_blocks):
+                reordered_predictions = [skip() for _ in dependency["outputs"]]
+                for component, value in predictions.items():
+                    if component._id not in dependency["outputs"]:
+                        return ValueError(
+                            f"Returned component {component} not specified as output of function."
+                        )
+                    output_index = dependency["outputs"].index(component._id)
+                    reordered_predictions[output_index] = value
+                predictions = reordered_predictions
+            elif any(keys_are_blocks):
+                raise ValueError(
+                    "Returned dictionary included some keys as Components. Either all keys must be Components to assign Component values, or return a List of values to assign output values in order."
+                )
         if len(dependency["outputs"]) == 1:
             predictions = (predictions,)
         if block_fn.postprocess:

gradio/components.py

@@ -3733,13 +3733,3 @@ DataFrame = Dataframe
 Highlightedtext = HighlightedText
 Checkboxgroup = CheckboxGroup
 TimeSeries = Timeseries
-
-
-def update(**kwargs) -> dict:
-    """
-    Updates component parameters
-    @param kwargs: Updating component parameters
-    @return: Updated component parameters
-    """
-    kwargs["__type__"] = "generic_update"
-    return kwargs

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

@@ -15,6 +15,7 @@
 	import { _ } from "svelte-i18n";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let mode: "static" | "dynamic";
 	export let value: null | FileData | string = null;
 	export let name: string;
@@ -41,6 +42,7 @@
 	color={dragging ? "green" : "grey"}
 	padding={false}
 	{elem_id}
+	{visible}
 >
 	<StatusTracker {...loading_status} />
 

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

@@ -4,10 +4,11 @@
 	export let style: Record<string, any> = {};
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: string;
 	export let variant: "primary" | "secondary" = "primary";
 </script>
 
-<Button {variant} {elem_id} {style} on:click>
+<Button {variant} {elem_id} {visible} {style} on:click>
 	{$_(value)}
 </Button>

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

@@ -4,10 +4,11 @@
 	import type { LoadingStatus } from "../StatusTracker/types";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let loading_status: LoadingStatus;
 </script>
 
-<Carousel {elem_id} on:change>
+<Carousel {elem_id} {visible} on:change>
 	<StatusTracker {...loading_status} />
 
 	<slot />

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

@@ -5,13 +5,14 @@
 	import type { LoadingStatus } from "../StatusTracker/types";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: Array<[string, string]> = [];
 	export let color_map: Array<[string, string]>;
 
 	export let loading_status: LoadingStatus;
 </script>
 
-<Block padding={false} {elem_id}>
+<Block padding={false} {elem_id} {visible}>
 	<StatusTracker {...loading_status} />
 	<ChatBot {value} {color_map} on:change />
 </Block>

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

@@ -5,6 +5,7 @@
 	import type { LoadingStatus } from "../StatusTracker/types";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: boolean = false;
 	export let label: string = "Checkbox";
 	export let mode: "static" | "dynamic";
@@ -15,7 +16,7 @@
 	export let loading_status: LoadingStatus;
 </script>
 
-<Block {form_position} {elem_id} {style}>
+<Block {form_position} {elem_id} {visible} {style}>
 	<StatusTracker {...loading_status} />
 
 	<Checkbox

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

@@ -5,6 +5,7 @@
 	import type { LoadingStatus } from "../StatusTracker/types";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: Array<string> = [];
 	export let choices: Array<string>;
 	export let style: Record<string, any> = {};
@@ -17,7 +18,7 @@
 	export let loading_status: LoadingStatus;
 </script>
 
-<Block {form_position} {elem_id} {style} type="fieldset">
+<Block {form_position} {elem_id} {visible} {style} type="fieldset">
 	<StatusTracker {...loading_status} />
 
 	<CheckboxGroup

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

@@ -2,6 +2,7 @@
 	import { create_classes } from "@gradio/utils";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let variant: "default" | "panel" = "default";
 	export let parent: string | null = null;
 	export let style: Record<string, unknown> = {};
@@ -9,6 +10,7 @@
 
 <div
 	id={elem_id}
+	class:hidden={visible === false}
 	class:bg-gray-50={variant === "panel"}
 	class:p-2={variant === "panel"}
 	class:rounded-lg={variant === "panel"}

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

@@ -9,6 +9,7 @@
 
 	export let headers: Headers = [];
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: Data | { data: Data; headers: Headers } = [["", "", ""]];
 	export let mode: "static" | "dynamic";
 	export let col_count: [number, "fixed" | "dynamic"];
@@ -39,6 +40,7 @@
 
 <div
 	id={elem_id}
+	class:hidden={visible === false}
 	class="relative overflow-hidden"
 	class:flex-1={parent === "row" || !parent}
 >

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

@@ -6,6 +6,7 @@
 	export let headers: Array<string>;
 	export let samples: Array<Array<any>>;
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: Number | null = null;
 	export let root: string;
 	export let samples_per_page: number = 10;
@@ -50,7 +51,11 @@
 	}
 </script>
 
-<div id={elem_id} class="mt-4 inline-block max-w-full text-gray-700 w-full">
+<div
+	id={elem_id}
+	class:hidden={visible === false}
+	class="mt-4 inline-block max-w-full text-gray-700 w-full"
+>
 	<div class="text-xs mb-2 flex items-center text-gray-500">
 		<svg
 			xmlns="http://www.w3.org/2000/svg"

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

@@ -6,6 +6,7 @@
 
 	export let label: string = "Dropdown";
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: string = "";
 	export let choices: Array<string>;
 	export let form_position: "first" | "last" | "mid" | "single" = "single";
@@ -17,7 +18,7 @@
 	export let mode: "static" | "dynamic";
 </script>
 
-<Block {form_position} {elem_id} {style}>
+<Block {form_position} {elem_id} {visible} {style}>
 	<StatusTracker {...loading_status} />
 
 	<Dropdown

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

@@ -9,6 +9,7 @@
 	import { _ } from "svelte-i18n";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: null | FileData = null;
 	export let mode: "static" | "dynamic";
 	export let root: string;
@@ -28,6 +29,7 @@
 	color={dragging ? "green" : "grey"}
 	padding={false}
 	{elem_id}
+	{visible}
 >
 	<StatusTracker {...loading_status} />
 

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

@@ -10,6 +10,7 @@
 	export let show_label: boolean;
 	export let label: string;
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: Array<string> | null = null;
 	export let style: Record<string, unknown> = {};
 
@@ -86,7 +87,7 @@
 
 <svelte:window bind:innerHeight={window_height} />
 
-<Block variant="solid" color="grey" padding={false} {elem_id}>
+<Block variant="solid" color="grey" padding={false} {elem_id} {visible}>
 	<StatusTracker {...loading_status} />
 	<BlockLabel {show_label} Icon={Image} label={label || "Gallery"} />
 	{#if value === null}

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

@@ -4,6 +4,7 @@
 
 	export let label: string;
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: string = "";
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
@@ -11,4 +12,4 @@
 	$: label, dispatch("change");
 </script>
 
-<HTML {value} {elem_id} on:change />
+<HTML {value} {elem_id} {visible} on:change />

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

@@ -7,6 +7,7 @@
 	import type { LoadingStatus } from "../StatusTracker/types";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: Array<[string, string | number]>;
 	export let show_legend: boolean;
 	export let color_map: Record<string, string> = {};
@@ -19,7 +20,7 @@
 	$: value, dispatch("change");
 </script>
 
-<Block {elem_id}>
+<Block {elem_id} {visible}>
 	<StatusTracker {...loading_status} />
 	{#if label}
 		<BlockLabel Icon={TextHighlight} {label} />

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

@@ -6,6 +6,7 @@
 	import { Component as StatusTracker } from "../StatusTracker/";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: null | string = null;
 	export let source: "canvas" | "webcam" | "upload" = "upload";
 	export let tool: "editor" | "select" = "editor";
@@ -32,6 +33,7 @@
 	color={dragging ? "green" : "grey"}
 	padding={false}
 	{elem_id}
+	{visible}
 >
 	<StatusTracker {...loading_status} />
 	{#if mode === "static"}

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

@@ -8,6 +8,7 @@
 	import type { LoadingStatus } from "../StatusTracker/types";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: any;
 	export let loading_status: LoadingStatus;
 	export let label: string;
@@ -17,7 +18,7 @@
 	$: value, dispatch("change");
 </script>
 
-<Block test_id="json" {elem_id}>
+<Block test_id="json" {elem_id} {visible}>
 	{#if label}
 		<BlockLabel Icon={JSONIcon} {label} />
 	{/if}

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

@@ -7,6 +7,7 @@
 	import type { LoadingStatus } from "../StatusTracker/types";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: {
 		label: string;
 		confidences?: Array<{ label: string; confidence: number }>;
@@ -21,7 +22,7 @@
 	$: value, dispatch("change");
 </script>
 
-<Block {elem_id}>
+<Block {elem_id} {visible}>
 	<StatusTracker {...loading_status} />
 	<BlockLabel Icon={LabelIcon} {label} />
 

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

@@ -4,6 +4,7 @@
 
 	export let label: string;
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: string = "";
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
@@ -11,4 +12,4 @@
 	$: label, dispatch("change");
 </script>
 
-<Markdown {value} on:change />
+<Markdown {value} {elem_id} {visible} on:change />

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

@@ -9,6 +9,7 @@
 	import { _ } from "svelte-i18n";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: null | FileData = null;
 	export let mode: "static" | "dynamic";
 	export let root: string;
@@ -29,6 +30,7 @@
 	color={dragging ? "green" : "grey"}
 	padding={false}
 	{elem_id}
+	{visible}
 >
 	<StatusTracker {...loading_status} />
 

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

@@ -6,6 +6,7 @@
 
 	export let label: string = "Number";
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let style: Record<string, any> = {};
 	export let value: number = 0;
 	export let form_position: "first" | "last" | "mid" | "single" = "single";
@@ -15,7 +16,7 @@
 	export let mode: "static" | "dynamic";
 </script>
 
-<Block {form_position} {elem_id} {style}>
+<Block {form_position} {elem_id} {visible} {style}>
 	<StatusTracker {...loading_status} />
 
 	<Number

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

@@ -6,6 +6,7 @@
 
 	export let label: string = "Radio";
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: string = "";
 	export let choices: Array<string> = [];
 	export let mode: "static" | "dynamic";
@@ -16,7 +17,7 @@
 	export let loading_status: LoadingStatus;
 </script>
 
-<Block {form_position} type="fieldset" {elem_id} {style}>
+<Block {form_position} type="fieldset" {elem_id} {visible} {style}>
 	<StatusTracker {...loading_status} />
 
 	<Radio

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

@@ -5,6 +5,7 @@
 	import type { LoadingStatus } from "../StatusTracker/types";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: number = 0;
 	export let label: string = "Slider";
 	export let style: Record<string, any> = {};
@@ -19,7 +20,7 @@
 	export let loading_status: LoadingStatus;
 </script>
 
-<Block {form_position} {elem_id} {style}>
+<Block {form_position} {elem_id} {visible} {style}>
 	<StatusTracker {...loading_status} />
 
 	<Range

ui/packages/app/src/components/TabItem/Tabs.svelte

@@ -2,9 +2,10 @@
 	import { TabItem } from "@gradio/tabs";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let label: string;
 </script>
 
-<TabItem {elem_id} name={label} on:select>
+<TabItem {elem_id} {visible} name={label} on:select>
 	<slot />
 </TabItem>

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

@@ -2,8 +2,9 @@
 	import { Tabs } from "@gradio/tabs";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 </script>
 
-<Tabs on:change>
+<Tabs {elem_id} {visible} on:change>
 	<slot />
 </Tabs>

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

@@ -8,6 +8,7 @@
 
 	export let label: string = "Textbox";
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: string = "";
 	export let lines: number;
 	export let placeholder: string = "";
@@ -25,6 +26,7 @@
 <Block
 	{form_position}
 	{elem_id}
+	{visible}
 	disable={typeof style.container === "boolean" && !style.container}
 >
 	<StatusTracker {...loading_status} />

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

@@ -29,6 +29,7 @@
 	}
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: null | Data;
 	export let y: Array<string>;
 	export let x: string;
@@ -118,6 +119,7 @@
 	color={"grey"}
 	padding={false}
 	{elem_id}
+	{visible}
 >
 	<BlockLabel {show_label} Icon={ChartIcon} label={label || "TimeSeries"} />
 	<StatusTracker {...loading_status} />

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

@@ -9,6 +9,7 @@
 	import { _ } from "svelte-i18n";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: FileData | null | string = null;
 	export let label: string;
 	export let source: string;
@@ -31,6 +32,7 @@
 	color={dragging ? "green" : "grey"}
 	padding={false}
 	{elem_id}
+	{visible}
 >
 	<StatusTracker {...loading_status} />
 

ui/packages/atoms/src/Block.svelte

@@ -6,6 +6,7 @@
 
 	export let style: Record<string, any> = {};
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let variant: "solid" | "dashed" | "none" = "solid";
 	export let color: "grey" | "green" = "grey";
 	export let padding: boolean = true;
@@ -53,6 +54,7 @@
 	this={tag}
 	data-testid={test_id}
 	id={elem_id}
+	class:hidden={visible === false}
 	class={"w-full overflow-hidden " +
 		styles[variant] +
 		" " +

ui/packages/button/src/Button.svelte

@@ -3,6 +3,7 @@
 
 	export let style: Record<string, any> = {};
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let variant: "primary" | "secondary" = "secondary";
 	export let size: "sm" | "lg" = "lg";
 </script>
@@ -12,6 +13,7 @@
 	class={`gr-button gr-button-${size} gr-button-${variant} self-start` +
 		create_classes(style)}
 	id={elem_id}
+	class:hidden={visible === false}
 >
 	<slot />
 </button>

ui/packages/carousel/src/Carousel.svelte

@@ -7,6 +7,7 @@
 	import { writable } from "svelte/store";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 
 	const dispatch = createEventDispatcher<{
 		change: undefined;
@@ -45,7 +46,11 @@
 	};
 </script>
 
-<div class="output-carousel flex flex-col relative" id={elem_id}>
+<div
+	class="output-carousel flex flex-col relative"
+	id={elem_id}
+	class:hidden={visible === false}
+>
 	<slot />
 
 	<div

ui/packages/html/src/HTML.svelte

@@ -2,6 +2,7 @@
 	import { createEventDispatcher } from "svelte";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: string;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
@@ -9,6 +10,6 @@
 	$: value, dispatch("change");
 </script>
 
-<div class="output-html" id={elem_id}>
+<div class="output-html" id={elem_id} class:hidden={visible === false}>
 	{@html value}
 </div>

ui/packages/markdown/src/Markdown.svelte

@@ -3,6 +3,7 @@
 	import "./typography.css";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: string;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
@@ -10,6 +11,11 @@
 	$: value, dispatch("change");
 </script>
 
-<div id={elem_id} class="output-markdown gr-prose" style="max-width: 100%">
+<div
+	id={elem_id}
+	class:hidden={visible === false}
+	class="output-markdown gr-prose"
+	style="max-width: 100%"
+>
 	{@html value}
 </div>

ui/packages/plot/src/Plot.svelte

@@ -12,6 +12,7 @@
 
 <script lang="ts">
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let value: null | string;
 	export let theme: string;
 	import { afterUpdate, onMount} from "svelte";

ui/packages/tabs/src/TabItem.svelte

@@ -3,6 +3,7 @@
 	import { TABS } from "./Tabs.svelte";
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 	export let name: string;
 
 	const dispatch = createEventDispatcher<{ select: undefined }>();
@@ -22,6 +23,7 @@
 {#if $selected_tab === id}
 	<div
 		id={elem_id}
+		class:hidden={visible === false}
 		class="tabitem p-2 border-2 border-t-0 border-gray-200 relative flex"
 	>
 		<div

ui/packages/tabs/src/Tabs.svelte

@@ -12,6 +12,7 @@
 	}
 
 	export let elem_id: string = "";
+	export let visible: boolean = true;
 
 	const tabs: Array<Tab> = [];
 
@@ -40,7 +41,11 @@
 	}
 </script>
 
-<div class="tabs flex flex-col my-4" id={elem_id}>
+<div
+	class="tabs flex flex-col my-4"
+	id={elem_id}
+	class:hidden={visible === false}
+>
 	<div class="flex border-b-2 dark:border-gray-700">
 		{#each tabs as t, i}
 			{#if t.id === $selected_tab}