Corner status tracker (#4396)

* changes * first commit * Update gradio/upload.py Co-authored-by: Aarni Koskela <akx@iki.fi> * Update gradio/upload.py Co-authored-by: Aarni Koskela <akx@iki.fi> * changes * changes * changes * changes * changes * changes * changes * chnages * changes * changes * changes * changes * changes * changes * changes * changes * chagnes * changes * changes * changes * changes * changes * changes --------- Co-authored-by: Aarni Koskela <akx@iki.fi> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
2025-04-06 12:30:29 +08:00 · 2023-06-05 18:11:53 -07:00 · 2023-06-05 18:11:53 -07:00 · bc786ae4da
commit bc786ae4da
parent e4014d058d
13 changed files with 47 additions and 29 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -41,7 +41,7 @@ No changes to highlight.
 ## New Features:

 - Introduced `gradio deploy` to launch a Gradio app to Spaces directly from your terminal. By [@aliabid94](https://github.com/aliabid94) in [PR 4033](https://github.com/gradio-app/gradio/pull/4033). 
-
+- Introduce `show_progress='corner'` argument to event listeners, which will not cover the output components with the progress animation, but instead show it in the corner of the components. By [@aliabid94](https://github.com/aliabid94) in [PR 4396](https://github.com/gradio-app/gradio/pull/4396).

 ## Bug Fixes:

--- a/demo/chatbot_simple/run.ipynb
+++ b/demo/chatbot_simple/run.ipynb
@ -1 +1 @@
-{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: chatbot_simple"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "import time\n", "\n", "md = \"\"\"This is some code:\n", "\n", "<h1>hello</h1>\n", "\n", "```py\n", "def fn(x, y, z):\n", "    print(x, y, z)\n", "\"\"\"\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot()\n", "    msg = gr.Textbox()\n", "    clear = gr.Button(\"Clear\")\n", "\n", "    def respond(message, chat_history):\n", "        bot_message = random.choice([\"How are you?\", \"I love you\", \"I'm very hungry\"])\n", "        chat_history.append((message, md))\n", "        time.sleep(1)\n", "        return \"\", chat_history\n", "\n", "    msg.submit(respond, [msg, chatbot], [msg, chatbot])\n", "    clear.click(lambda: None, None, chatbot, queue=False)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
+{"cells": [{"cell_type": "markdown", "id": 302934307671667531413257853548643485645, "metadata": {}, "source": ["# Gradio Demo: chatbot_simple"]}, {"cell_type": "code", "execution_count": null, "id": 272996653310673477252411125948039410165, "metadata": {}, "outputs": [], "source": ["!pip install -q gradio "]}, {"cell_type": "code", "execution_count": null, "id": 288918539441861185822528903084949547379, "metadata": {}, "outputs": [], "source": ["import gradio as gr\n", "import random\n", "import time\n", "\n", "with gr.Blocks() as demo:\n", "    chatbot = gr.Chatbot()\n", "    msg = gr.Textbox()\n", "    clear = gr.Button(\"Clear\")\n", "\n", "    def respond(message, chat_history):\n", "        bot_message = random.choice([\"How are you?\", \"I love you\", \"I'm very hungry\"])\n", "        chat_history.append((message, bot_message))\n", "        time.sleep(2)\n", "        return \"\", chat_history\n", "\n", "    msg.submit(respond, [msg, chatbot], [msg, chatbot])\n", "    clear.click(lambda: None, None, chatbot, queue=False)\n", "\n", "if __name__ == \"__main__\":\n", "    demo.launch()\n"]}], "metadata": {}, "nbformat": 4, "nbformat_minor": 5}
--- a/demo/chatbot_simple/run.py
+++ b/demo/chatbot_simple/run.py
@ -2,15 +2,6 @@ import gradio as gr
 import random
 import time

-md = """This is some code:
-
-<h1>hello</h1>
-
-```py
-def fn(x, y, z):
-    print(x, y, z)
-"""
-
 with gr.Blocks() as demo:
    chatbot = gr.Chatbot()
    msg = gr.Textbox()
@ -18,8 +9,8 @@ with gr.Blocks() as demo:

    def respond(message, chat_history):
        bot_message = random.choice(["How are you?", "I love you", "I'm very hungry"])
-        chat_history.append((message, md))
-        time.sleep(1)
+        chat_history.append((message, bot_message))
+        time.sleep(2)
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot])
--- a/gradio/blocks.py
+++ b/gradio/blocks.py
@ -165,7 +165,7 @@ class Block:
        preprocess: bool = True,
        postprocess: bool = True,
        scroll_to_output: bool = False,
-        show_progress: bool = True,
+        show_progress: str = "full",
        api_name: str | None = None,
        js: str | None = None,
        no_target: bool = False,
@ -1444,7 +1444,7 @@ Received outputs:
        outputs: list[Component] | None = None,
        api_name: str | None = None,
        scroll_to_output: bool = False,
-        show_progress: bool = True,
+        show_progress: str = "full",
        queue=None,
        batch: bool = False,
        max_batch_size: int = 4,
--- a/gradio/events.py
+++ b/gradio/events.py
@ -7,13 +7,14 @@ import warnings
 from typing import TYPE_CHECKING, Any, Callable

 from gradio_client.documentation import document, set_documentation_group
+from typing_extensions import Literal

 from gradio.blocks import Block
 from gradio.helpers import EventData
 from gradio.utils import get_cancel_function

 if TYPE_CHECKING:  # Only import for type checking (is False at runtime).
-    from gradio.components import Component, StatusTracker
+    from gradio.components import Component

 set_documentation_group("events")

@ -76,7 +77,9 @@ class EventListenerMethod:
        self,
        trigger: Block,
        event_name: str,
-        show_progress: bool = True,
+        show_progress: Literal["full"]
+        | Literal["minimal"]
+        | Literal["hidden"] = "full",
        callback: Callable | None = None,
        trigger_after: int | None = None,
        trigger_only_on_success: bool = False,
@ -94,9 +97,11 @@ class EventListenerMethod:
        inputs: Component | list[Component] | set[Component] | None = None,
        outputs: Component | list[Component] | None = None,
        api_name: str | None = None,
-        status_tracker: StatusTracker | None = None,
+        status_tracker: None = None,
        scroll_to_output: bool = False,
-        show_progress: bool | None = None,
+        show_progress: Literal["full"]
+        | Literal["minimal"]
+        | Literal["hidden"] = "full",
        queue: bool | None = None,
        batch: bool = False,
        max_batch_size: int = 4,
@ -128,6 +133,8 @@ class EventListenerMethod:
            )
        if isinstance(self, Streamable):
            self.check_streamable()
+        if isinstance(show_progress, bool):
+            show_progress = "full" if show_progress else "hidden"

        dep, dep_index = self.trigger.set_event_trigger(
            self.event_name,
@ -245,7 +252,7 @@ class Streamable(EventListener):
        self.stream = EventListenerMethod(
            self,
            "stream",
-            show_progress=False,
+            show_progress="hidden",
            callback=lambda: setattr(self, "streaming", True),
        )
        """
--- a/gradio/helpers.py
+++ b/gradio/helpers.py
@ -260,7 +260,7 @@ class Examples:
                load_example,
                inputs=[self.dataset],
                outputs=targets,  # type: ignore
-                show_progress=False,
+                show_progress="hidden",
                postprocess=False,
                queue=False,
            )
--- a/gradio/test_data/blocks_configs.py
+++ b/gradio/test_data/blocks_configs.py
@ -262,6 +262,7 @@ XRAY_CONFIG = {
            "collects_event_data": False,
            "trigger_after": None,
            "trigger_only_on_success": False,
+            "show_progress": "full",
        },
        {
            "targets": [18],
@ -282,6 +283,7 @@ XRAY_CONFIG = {
            "collects_event_data": False,
            "trigger_after": None,
            "trigger_only_on_success": False,
+            "show_progress": "full",
        },
        {
            "targets": [],
@ -302,6 +304,7 @@ XRAY_CONFIG = {
            "collects_event_data": False,
            "trigger_after": None,
            "trigger_only_on_success": False,
+            "show_progress": "full",
        },
    ],
 }
@ -571,6 +574,7 @@ XRAY_CONFIG_DIFF_IDS = {
            "collects_event_data": False,
            "trigger_after": None,
            "trigger_only_on_success": False,
+            "show_progress": "full",
        },
        {
            "targets": [18],
@ -591,6 +595,7 @@ XRAY_CONFIG_DIFF_IDS = {
            "collects_event_data": False,
            "trigger_after": None,
            "trigger_only_on_success": False,
+            "show_progress": "full",
        },
        {
            "targets": [],
@ -611,6 +616,7 @@ XRAY_CONFIG_DIFF_IDS = {
            "collects_event_data": False,
            "trigger_after": None,
            "trigger_only_on_success": False,
+            "show_progress": "full",
        },
    ],
 }
@ -797,6 +803,7 @@ XRAY_CONFIG_WITH_MISTAKE = {
            "cancels": [],
            "trigger_after": None,
            "trigger_only_on_success": False,
+            "show_progress": "full",
        },
        {
            "targets": [13],
@ -809,6 +816,7 @@ XRAY_CONFIG_WITH_MISTAKE = {
            "cancels": [],
            "trigger_after": None,
            "trigger_only_on_success": False,
+            "show_progress": "full",
        },
    ],
 }
--- a/js/app/src/Blocks.svelte
+++ b/js/app/src/Blocks.svelte
@ -384,7 +384,7 @@
 			let loading_status = statuses[id];
 			let dependency = dependencies[loading_status.fn_index];
 			loading_status.scroll_to_output = dependency.scroll_to_output;
-			loading_status.visible = dependency.show_progress;
+			loading_status.show_progress = dependency.show_progress;

 			set_prop(instance_map[id], "loading_status", loading_status);
 		}
--- a/js/app/src/components/Chatbot/Chatbot.svelte
+++ b/js/app/src/components/Chatbot/Chatbot.svelte
@ -7,6 +7,7 @@
 	import { Chat } from "@gradio/icons";
 	import type { FileData } from "@gradio/upload";
 	import { normalise_file } from "@gradio/upload";
+	import StatusTracker from "../StatusTracker/StatusTracker.svelte";

 	export let elem_id: string = "";
 	export let elem_classes: Array<string> = [];
@ -40,6 +41,14 @@
 </script>

 <Block {elem_id} {elem_classes} {visible} padding={false}>
+	{#if loading_status}
+		<StatusTracker
+			{...loading_status}
+			show_progress={loading_status.show_progress === "hidden"
+				? "hidden"
+				: "minimal"}
+		/>
+	{/if}
 	{#if show_label}
 		<BlockLabel
 			{show_label}
--- a/js/app/src/components/StatusTracker/StatusTracker.svelte
+++ b/js/app/src/components/StatusTracker/StatusTracker.svelte
@ -58,7 +58,7 @@
 	export let status: "complete" | "pending" | "error" | "generating";
 	export let scroll_to_output: boolean = false;
 	export let timer: boolean = true;
-	export let visible: boolean = true;
+	export let show_progress: "full" | "minimal" | "hidden" = "full";
 	export let message: string | null = null;
 	export let progress: LoadingStatus["progress"] | null | undefined = null;
 	export let variant: "default" | "center" = "default";
@ -184,17 +184,18 @@

 <div
 	class="wrap {variant}"
-	class:hide={!status || status === "complete" || !visible}
+	class:hide={!status || status === "complete" || show_progress === "hidden"}
 	class:translucent={(variant === "center" &&
 		(status === "pending" || status === "error")) ||
-		translucent}
+		translucent ||
+		show_progress === "minimal"}
 	class:generating={status === "generating"}
 	style:position={absolute ? "absolute" : "static"}
 	style:padding={absolute ? "0" : "var(--size-8) 0"}
 	bind:this={el}
 >
 	{#if status === "pending"}
-		{#if variant === "default" && show_eta_bar}
+		{#if variant === "default" && show_eta_bar && show_progress === "full"}
 			<div
 				class="eta-bar"
 				style:transform="translateX({(eta_level || 0) * 100 - 100}%)"
@ -257,7 +258,7 @@
 					/>
 				</div>
 			</div>
-		{:else}
+		{:else if show_progress === "full"}
 			<Loader margin={variant === "default"} />
 		{/if}

@ -315,6 +316,7 @@
 		padding: 0 var(--size-6);
 		max-height: var(--size-screen-h);
 		overflow: hidden;
+		pointer-events: none;
 	}

 	.wrap.center {
--- a/js/app/src/components/StatusTracker/types.ts
+++ b/js/app/src/components/StatusTracker/types.ts
@ -3,6 +3,7 @@ export interface LoadingStatus {
 	queue_position: number;
 	queue_size: number;
 	status: "pending" | "error" | "complete";
+	show_progress: "full" | "minimal" | "hidden";
 	scroll_to_output: boolean;
 	visible: boolean;
 	fn_index: number;
--- a/js/app/src/components/types.ts
+++ b/js/app/src/components/types.ts
@ -30,7 +30,7 @@ export interface Dependency {
 	backend_fn: boolean;
 	js: string | null;
 	scroll_to_output: boolean;
-	show_progress: boolean;
+	show_progress: "full" | "minimal" | "hidden";
 	frontend_fn?: Function;
 	status?: string;
 	queue: boolean | null;
--- a/js/app/src/stores.ts
+++ b/js/app/src/stores.ts
@ -9,7 +9,7 @@ export interface LoadingStatus {
 	fn_index: number;
 	message?: string | null;
 	scroll_to_output?: boolean;
-	visible?: boolean;
+	show_progress?: "full" | "minimal" | "hidden";
 	progress?: Array<{
 		progress: number | null;
 		index: number | null;