Optional labels fe (#1105)

* optional labels * added prop * Added IOComponent class * get component fix * fixed component function * fixed test components * formatting * fixed output tests * working on blocks tests * fixed test blocks * cleanup * respect show_label prop in all components * Update ui/packages/app/src/components/File/File.svelte Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Update ui/packages/app/src/components/Audio/Audio.svelte Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Update ui/packages/atoms/src/BlockLabel.svelte * foirmatting * formatting again Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
gradio-app · Apr 27, 2022 · f856869 · f856869
1 parent 90f3aec
commit f856869
Show file tree

Hide file tree

Showing 35 changed files with 148 additions and 67 deletions.
diff --git a/demo/blocks_outputs/run.py b/demo/blocks_outputs/run.py
@@ -1,27 +1,35 @@
 import gradio as gr
 
 with gr.Blocks() as demo:
-    txt = gr.Textbox(label="Small Textbox", lines=1)
-    txt = gr.Textbox(label="Large Textbox", lines=5)
-    num = gr.Number(label="Number")
-    check = gr.Checkbox(label="Checkbox")
-    check_g = gr.CheckboxGroup(label="Checkbox Group", choices=["One", "Two", "Three"])
-    radio = gr.Radio(label="Radio", choices=["One", "Two", "Three"])
-    drop = gr.Dropdown(label="Dropdown", choices=["One", "Two", "Three"])
-    slider = gr.Slider(label="Slider")
-    audio = gr.Audio()
-    video = gr.Video()
-    image = gr.Image()
-    ts = gr.Timeseries()
-    df = gr.Dataframe()
-    html = gr.HTML()
-    json = gr.JSON()
-    md = gr.Markdown()
-    label = gr.Label()
-    highlight = gr.HighlightedText()
-    # layout components are static only
-    # carousel doesn't work like other components
-    # carousel = gr.Carousel()
+    with gr.Column():
+        txt = gr.Textbox(label="Small Textbox", lines=1, show_label=False)
+        txt = gr.Textbox(label="Large Textbox", lines=5, show_label=False)
+        num = gr.Number(label="Number", show_label=False)
+        check = gr.Checkbox(label="Checkbox", show_label=False)
+        check_g = gr.CheckboxGroup(
+            label="Checkbox Group", choices=["One", "Two", "Three"], show_label=False
+        )
+        radio = gr.Radio(
+            label="Radio", choices=["One", "Two", "Three"], show_label=False
+        )
+        drop = gr.Dropdown(
+            label="Dropdown", choices=["One", "Two", "Three"], show_label=False
+        )
+        slider = gr.Slider(label="Slider", show_label=False)
+        audio = gr.Audio(show_label=False)
+        file = gr.File(show_label=False)
+        video = gr.Video(show_label=False)
+        image = gr.Image(show_label=False)
+        ts = gr.Timeseries(show_label=False)
+        df = gr.Dataframe(show_label=False)
+        html = gr.HTML(show_label=False)
+        json = gr.JSON(show_label=False)
+        md = gr.Markdown(show_label=False)
+        label = gr.Label(show_label=False)
+        highlight = gr.HighlightedText(show_label=False)
+        # layout components are static only
+        # carousel doesn't work like other components
+        # carousel = gr.Carousel()
 
 
 if __name__ == "__main__":

diff --git a/ui/packages/app/src/components/Audio/Audio.svelte b/ui/packages/app/src/components/Audio/Audio.svelte
@@ -16,6 +16,7 @@
 	export let type: "normal" | "numpy" = "normal";
 	export let label: string;
 	export let root: string;
+	export let show_label: boolean;
 
 	export let loading_status: "complete" | "pending" | "error";
 
@@ -39,6 +40,7 @@
 	{#if mode === "dynamic"}
 		<Audio
 			{label}
+			{show_label}
 			value={_value}
 			on:change={({ detail }) => (value = detail)}
 			on:drag={({ detail }) => (dragging = detail)}
@@ -55,6 +57,11 @@
 			upload_text={$_("interface.click_to_upload")}
 		/>
 	{:else}
-		<StaticAudio value={_value} name={_value?.name || "audio_file"} {label} />
+		<StaticAudio
+			{show_label}
+			value={_value}
+			name={_value?.name || "audio_file"}
+			{label}
+		/>
 	{/if}
 </Block>
diff --git a/ui/packages/app/src/components/Checkbox/Checkbox.svelte b/ui/packages/app/src/components/Checkbox/Checkbox.svelte
@@ -9,6 +9,7 @@
 	export let label: string = "Checkbox";
 	export let mode: "static" | "dynamic";
 	export let form_position: "first" | "last" | "mid" | "single" = "single";
+	export let show_label: boolean;
 
 	export let loading_status: "complete" | "pending" | "error";
 
@@ -18,5 +19,12 @@
 <Block {form_position}>
 	<StatusTracker tracked_status={loading_status} />
 
-	<Checkbox {style} {label} bind:value on:change disabled={mode === "static"} />
+	<Checkbox
+		{style}
+		{label}
+		{show_label}
+		bind:value
+		on:change
+		disabled={mode === "static"}
+	/>
 </Block>
diff --git a/ui/packages/app/src/components/CheckboxGroup/CheckboxGroup.svelte b/ui/packages/app/src/components/CheckboxGroup/CheckboxGroup.svelte
@@ -11,6 +11,7 @@
 	export let style: string = "";
 	export let label: string = "Checkbox Group";
 	export let form_position: "first" | "last" | "mid" | "single" = "single";
+	export let show_label: boolean;
 
 	export let loading_status: "complete" | "pending" | "error";
 
@@ -25,6 +26,7 @@
 		{choices}
 		{style}
 		{label}
+		{show_label}
 		on:change
 		disabled={mode === "static"}
 	/>

diff --git a/ui/packages/app/src/components/Dropdown/Dropdown.svelte b/ui/packages/app/src/components/Dropdown/Dropdown.svelte
@@ -9,6 +9,7 @@
 	export let style: string = "";
 	export let choices: Array<string>;
 	export let form_position: "first" | "last" | "mid" | "single" = "single";
+	export let show_label: boolean;
 
 	export let loading_status: "complete" | "pending" | "error";
 
@@ -25,6 +26,7 @@
 		{style}
 		{choices}
 		{label}
+		{show_label}
 		on:change
 		disabled={mode === "static"}
 	/>

diff --git a/ui/packages/app/src/components/File/File.svelte b/ui/packages/app/src/components/File/File.svelte
@@ -13,6 +13,7 @@
 	export let mode: "static" | "dynamic";
 	export let root: string;
 	export let label: string;
+	export let show_label: boolean;
 
 	export let loading_status: "complete" | "pending" | "error";
 
@@ -33,6 +34,8 @@
 
 	{#if mode === "dynamic"}
 		<FileUpload
+			{label}
+			{show_label}
 			value={_value}
 			on:change={({ detail }) => (value = detail)}
 			on:drag={({ detail }) => (dragging = detail)}
@@ -44,6 +47,6 @@
 			upload_text={$_("interface.click_to_upload")}
 		/>
 	{:else}
-		<File value={_value} {style} {label} />
+		<File value={_value} {style} {label} {show_label} />
 	{/if}
 </Block>
diff --git a/ui/packages/app/src/components/Image/Image.svelte b/ui/packages/app/src/components/Image/Image.svelte
@@ -11,6 +11,7 @@
 	export let source: "canvas" | "webcam" | "upload" = "upload";
 	export let tool: "editor" | "select" = "editor";
 	export let label: string;
+	export let show_label: boolean;
 
 	export let loading_status: "complete" | "pending" | "error";
 
@@ -34,7 +35,7 @@
 >
 	<StatusTracker tracked_status={loading_status} />
 	{#if mode === "static"}
-		<StaticImage {value} {label} {style} />
+		<StaticImage {value} {label} {style} {show_label} />
 	{:else}
 		<Image
 			bind:value
@@ -46,6 +47,7 @@
 			on:change
 			on:drag={({ detail }) => (dragging = detail)}
 			{label}
+			{show_label}
 			drop_text={$_("interface.drop_image")}
 			or_text={$_("or")}
 			upload_text={$_("interface.click_to_upload")}

diff --git a/ui/packages/app/src/components/Label/Label.svelte b/ui/packages/app/src/components/Label/Label.svelte
@@ -16,6 +16,7 @@
 
 	export let style: string = "";
 	export let loading_status: "complete" | "pending" | "error";
+	export let show_label: boolean;
 
 	const dispatch = createEventDispatcher<{ change: undefined }>();
 
@@ -28,6 +29,6 @@
 	<StatusTracker tracked_status={loading_status} />
 
 	{#if value !== undefined && value !== null}
-		<Label {style} {value} />
+		<Label {style} {value} {show_label} />
 	{/if}
 </Block>
diff --git a/ui/packages/app/src/components/Model3D/Model3D.svelte b/ui/packages/app/src/components/Model3D/Model3D.svelte
@@ -12,9 +12,11 @@
 	export let style: string = "";
 	export let mode: "static" | "dynamic";
 	export let root: string;
-	export let clearColor: [];
+	export let clearColor: Array<number>;
 
 	export let loading_status: "complete" | "pending" | "error";
+	export let label: string;
+	export let show_label: boolean;
 
 	if (default_value) value = default_value;
 
@@ -33,6 +35,8 @@
 
 	{#if mode === "dynamic"}
 		<Model3DUpload
+			{label}
+			{show_label}
 			value={_value}
 			on:change={({ detail }) => (value = detail)}
 			on:drag={({ detail }) => (dragging = detail)}
@@ -44,6 +48,6 @@
 			upload_text={$_("interface.click_to_upload")}
 		/>
 	{:else if _value}
-		<Model3D value={_value} {clearColor} {style} />
+		<Model3D value={_value} {clearColor} {style} {label} {show_label} />
 	{/if}
 </Block>
diff --git a/ui/packages/app/src/components/Number/Number.svelte b/ui/packages/app/src/components/Number/Number.svelte
@@ -7,6 +7,7 @@
 	export let value: number = 0;
 	export let default_value: number;
 	export let form_position: "first" | "last" | "mid" | "single" = "single";
+	export let show_label: boolean;
 
 	export let loading_status: "complete" | "pending" | "error";
 
@@ -23,6 +24,7 @@
 	<Number
 		bind:value
 		{label}
+		{show_label}
 		{style}
 		disabled={mode === "static"}
 		on:change

diff --git a/ui/packages/app/src/components/Radio/Radio.svelte b/ui/packages/app/src/components/Radio/Radio.svelte
@@ -10,6 +10,7 @@
 	export let choices: Array<string> = [];
 	export let mode: "static" | "dynamic";
 	export let form_position: "first" | "last" | "mid" | "single" = "single";
+	export let show_label: boolean;
 
 	export let loading_status: "complete" | "pending" | "error";
 
@@ -23,6 +24,7 @@
 		{form_position}
 		bind:value
 		{label}
+		{show_label}
 		{style}
 		{choices}
 		disabled={mode === "static"}

diff --git a/ui/packages/app/src/components/Slider/Slider.svelte b/ui/packages/app/src/components/Slider/Slider.svelte
@@ -14,6 +14,7 @@
 	export let step: number;
 	export let mode: "static" | "dynamic";
 	export let form_position: "first" | "last" | "mid" | "single" = "single";
+	export let show_label: boolean;
 
 	export let loading_status: "complete" | "pending" | "error";
 
@@ -26,6 +27,7 @@
 	<Range
 		bind:value
 		{label}
+		{show_label}
 		{style}
 		{minimum}
 		{maximum}

diff --git a/ui/packages/app/src/components/Textbox/Textbox.svelte b/ui/packages/app/src/components/Textbox/Textbox.svelte
@@ -12,6 +12,7 @@
 	export let lines: number;
 	export let placeholder: string = "";
 	export let form_position: "first" | "last" | "mid" | "single" = "single";
+	export let show_label: boolean;
 
 	export let loading_status: "complete" | "pending" | "error";
 
@@ -26,6 +27,7 @@
 	<TextBox
 		bind:value
 		{label}
+		{show_label}
 		{style}
 		{lines}
 		autoheight={mode === "static"}

diff --git a/ui/packages/app/src/components/TimeSeries/TimeSeries.svelte b/ui/packages/app/src/components/TimeSeries/TimeSeries.svelte
@@ -34,6 +34,7 @@
 	export let x: string;
 	export let mode: "static" | "dynamic";
 	export let label: string;
+	export let show_label: boolean;
 
 	export let loading_status: "complete" | "pending" | "error";
 
@@ -118,7 +119,7 @@
 	color={"grey"}
 	padding={false}
 >
-	<BlockLabel image={chart_icon} label={label || "TimeSeries"} />
+	<BlockLabel {show_label} image={chart_icon} label={label || "TimeSeries"} />
 	<StatusTracker tracked_status={loading_status} />
 
 	{#if mode === "static"}

diff --git a/ui/packages/app/src/components/Video/Video.svelte b/ui/packages/app/src/components/Video/Video.svelte
@@ -13,7 +13,7 @@
 	export let style: string = "";
 	export let source: string;
 	export let root: string;
-
+	export let show_label: boolean;
 	export let loading_status: "complete" | "pending" | "error";
 
 	export let mode: "static" | "dynamic";
@@ -36,13 +36,14 @@
 	<StatusTracker tracked_status={loading_status} />
 
 	{#if mode === "static"}
-		<StaticVideo value={_value} {label} {style} />
+		<StaticVideo value={_value} {label} {show_label} {style} />
 	{:else}
 		<Video
 			value={_value}
 			on:change={({ detail }) => (value = detail)}
 			on:drag={({ detail }) => (dragging = detail)}
 			{label}
+			{show_label}
 			{style}
 			{source}
 			drop_text={$_("interface.drop_video")}

diff --git a/ui/packages/atoms/src/BlockLabel.svelte b/ui/packages/atoms/src/BlockLabel.svelte
@@ -6,6 +6,7 @@
 
 	export let label: string | null = null;
 	export let image: string | undefined = undefined;
+	export let show_label: boolean = true;
 
 	// const type_labels = {
 	// 	"audio/*": { text: "Audio", icon: audio_icon },
@@ -21,6 +22,7 @@
 </script>
 
 <div
+	class:sr-only={!show_label}
 	class="absolute left-0 top-0 py-1 px-2 rounded-br-lg shadow-sm text-xs text-gray-500 flex items-center pointer-events-none bg-white z-20 border-b border-r border-gray-100"
 >
 	<img src={image} alt="" class="mr-2 h-[12px] w-[12px] opacity-50" />

diff --git a/ui/packages/atoms/src/BlockTitle.svelte b/ui/packages/atoms/src/BlockTitle.svelte
@@ -1,3 +1,10 @@
-<span class="text-gray-600 text-[0.855rem] mb-2 block">
+<script lang="ts">
+	export let show_label: boolean = true;
+</script>
+
+<span
+	class="text-gray-600 text-[0.855rem] mb-2 block"
+	class:sr-only={!show_label}
+>
 	<slot />
 </span>
diff --git a/ui/packages/audio/src/Audio.svelte b/ui/packages/audio/src/Audio.svelte
@@ -17,6 +17,7 @@
 
 	export let value: null | { name: string; data: string } = null;
 	export let label: string;
+	export let show_label: boolean;
 	export let style: string = "";
 	export let name: string;
 	export let source: "microphone" | "upload" | "none";
@@ -152,7 +153,7 @@
 	$: dispatch("drag", dragging);
 </script>
 
-<BlockLabel image={audio_icon} label={label || "Audio"} />
+<BlockLabel {show_label} image={audio_icon} label={label || "Audio"} />
 {#if value === null}
 	{#if source === "microphone"}
 		<div class="mt-6 p-2">