mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2024-11-21 01:01:05 +08:00
Code Issues Packages Projects Releases Wiki Activity

Scrolling by default only in Interface, remove progress animation on streaming (#1499)

Browse Source 
* changes

* changes

* format

* changes

* add relative to block

* changes

* ensure statustracker component is never rendered by render

Co-authored-by: pngwn <hello@pngwn.io>
This commit is contained in:
aliabid94 2022-06-13 17:11:19 -07:00 committed by GitHub
parent 311972dba6
commit 11b12d9456
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 85 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
demo/blocks_scroll/run.py Normal file
View File

@ -0,0 +1,24 @@
import gradio as gr
demo = gr.Blocks()
with demo:
inp = gr.Textbox(placeholder="Enter text.")
scroll_btn = gr.Button("Scroll")
no_scroll_btn = gr.Button("No Scroll")
big_block = gr.HTML("""
<div style='height: 800px; width: 100px; background-color: pink;'></div>
""")
out = gr.Textbox()
scroll_btn.click(lambda x: x,
inputs=inp,
outputs=out,
scroll_to_output=True)
no_scroll_btn.click(lambda x: x,
inputs=inp,
outputs=out)
if __name__ == "__main__":
demo.launch()

6
gradio/blocks.py
View File

@ -85,6 +85,8 @@ class Block:
outputs: Optional[Component | List[Component]],
preprocess: bool = True,
postprocess: bool = True,
scroll_to_output: bool = False,
show_progress: bool = True,
api_name: Optional[AnyStr] = None,
js: Optional[str] = False,
no_target: bool = False,
@ -100,6 +102,8 @@ class Block:
outputs: output list
preprocess: whether to run the preprocess methods of components
postprocess: whether to run the postprocess methods of components
scroll_to_output: whether to scroll to output of dependency on trigger
show_progress: whether to show progress animation while running.
api_name: Defining this parameter exposes the endpoint in the api docs
js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components
no_target: if True, sets "targets" to [], used for Blocks "load" event
@ -129,6 +133,8 @@ class Block:
else None,
"queue": queue,
"api_name": api_name,
"scroll_to_output": scroll_to_output,
"show_progress": show_progress,
}
if api_name is not None:
dependency["documentation"] = [

46
gradio/events.py
View File

@ -14,8 +14,10 @@ class Changeable(Block):
fn: Callable,
inputs: List[Component],
outputs: List[Component],
status_tracker: Optional[StatusTracker] = None,
api_name: AnyStr = None,
status_tracker: Optional[StatusTracker] = None,
scroll_to_output: bool = False,
show_progress: bool = True,
queue: Optional[bool] = None,
_js: Optional[str] = None,
_preprocess: bool = True,
@ -26,12 +28,14 @@ class Changeable(Block):
or uploads an image)
Parameters:
fn (Callable): Callable function
inputs (List[Component]): List of inputs
outputs (List[Component]): List of outputs
status_tracker (StatusTracker): StatusTracker to visualize function progress
api_name (str): Defining this parameter exposes the endpoint in the api docs
_js (str): Optional frontend js method to run before running 'fn'. Input arguments for js method are values of input and outputs components, return should be a list of values for output component.
fn: Callable function
inputs: List of inputs
outputs: List of outputs
api_name: Defining this parameter exposes the endpoint in the api docs
status_tracker: StatusTracker to visualize function progress
scroll_to_output: If True, will scroll to output component on completion
show_progress: If True, will show progress animation while pending
_js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of input and outputs components, return should be a list of values for output component.
Returns: None
"""
self.set_event_trigger(
@ -39,8 +43,10 @@ class Changeable(Block):
fn,
inputs,
outputs,
status_tracker=status_tracker,
api_name=api_name,
status_tracker=status_tracker,
scroll_to_output=scroll_to_output,
show_progress=show_progress,
js=_js,
preprocess=_preprocess,
postprocess=_postprocess,
@ -54,8 +60,10 @@ class Clickable(Block):
fn: Callable,
inputs: List[Component],
outputs: List[Component],
status_tracker: Optional[StatusTracker] = None,
api_name: AnyStr = None,
status_tracker: Optional[StatusTracker] = None,
scroll_to_output: bool = False,
show_progress: bool = True,
queue=None,
_js: Optional[str] = None,
_preprocess: bool = True,
@ -68,8 +76,10 @@ class Clickable(Block):
fn: Callable function
inputs: List of inputs
outputs: List of outputs
status_tracker: StatusTracker to visualize function progress
api_name: Defining this parameter exposes the endpoint in the api docs
status_tracker: StatusTracker to visualize function progress
scroll_to_output: If True, will scroll to output component on completion
show_progress: If True, will show progress animation while pending
_js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
_preprocess: If False, will not run preprocessing of component data before running 'fn'.
_postprocess: If False, will not run postprocessing of component data before returning 'fn' output.
@ -80,8 +90,10 @@ class Clickable(Block):
fn,
inputs,
outputs,
status_tracker=status_tracker,
api_name=api_name,
status_tracker=status_tracker,
scroll_to_output=scroll_to_output,
show_progress=show_progress,
queue=queue,
js=_js,
preprocess=_preprocess,
@ -95,8 +107,10 @@ class Submittable(Block):
fn: Callable,
inputs: List[Component],
outputs: List[Component],
status_tracker: Optional[StatusTracker] = None,
api_name: AnyStr = None,
status_tracker: Optional[StatusTracker] = None,
scroll_to_output: bool = False,
show_progress: bool = True,
queue: Optional[bool] = None,
_js: Optional[str] = None,
_preprocess: bool = True,
@ -109,8 +123,10 @@ class Submittable(Block):
fn: Callable function
inputs: List of inputs
outputs: List of outputs
status_tracker: StatusTracker to visualize function progress
api_name: Defining this parameter exposes the endpoint in the api docs
status_tracker: StatusTracker to visualize function progress
scroll_to_output: If True, will scroll to output component on completion
show_progress: If True, will show progress animation while pending
_js: Optional frontend js method to run before running 'fn'. Input arguments for js method are values of 'inputs' and 'outputs', return should be a list of values for output components.
Returns: None
"""
@ -121,6 +137,8 @@ class Submittable(Block):
outputs,
status_tracker=status_tracker,
api_name=api_name,
scroll_to_output=scroll_to_output,
show_progress=show_progress,
js=_js,
preprocess=_preprocess,
postprocess=_postprocess,
@ -313,6 +331,7 @@ class Streamable(Block):
inputs: List[Component],
outputs: List[Component],
api_name: AnyStr = None,
show_progress: bool = False,
queue: Optional[bool] = None,
_js: Optional[str] = None,
_preprocess: bool = True,
@ -341,4 +360,5 @@ class Streamable(Block):
preprocess=_preprocess,
postprocess=_postprocess,
queue=queue,
show_progress=False,
)

1
gradio/interface.py
View File

@ -545,6 +545,7 @@ class Interface(Blocks):
self.input_components,
self.output_components,
api_name="predict",
scroll_to_output=True,
status_tracker=status_tracker,
)
clear_btn.click(

15
ui/packages/app/src/Blocks.svelte
View File

@ -3,7 +3,7 @@
import { onMount } from "svelte";
import { component_map } from "./components/directory";
import { loading_status } from "./stores";
import type { LoadingStatus } from "./stores";
import type { LoadingStatus } from "./components/StatusTracker/types";
import { _ } from "svelte-i18n";
import { setupi18n } from "./i18n";
@ -42,6 +42,8 @@
outputs: Array<number>;
backend_fn: boolean;
js: string | null;
scroll_to_output: boolean;
show_progress: boolean;
frontend_fn?: Function;
status_tracker: number | null;
status?: string;
@ -62,6 +64,7 @@
export let analytics_enabled: boolean = false;
export let target: HTMLElement;
export let css: string;
export let is_space: boolean;
export let id: number = 0;
let rootNode: Component = { id: layout.id, type: "column", props: {} };
@ -326,14 +329,16 @@
loading_status.register(i, v.inputs, v.outputs);
});
function set_status(
statuses: Record<number, Omit<LoadingStatus, "outputs">>
) {
function set_status(statuses: Record<number, LoadingStatus>) {
if (window.__gradio_mode__ === "website") {
return;
}
for (const id in statuses) {
set_prop(instance_map[id], "loading_status", statuses[id]);
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;
set_prop(instance_map[id], "loading_status", loading_status);
}
const inputs_to_update = loading_status.get_inputs_to_update();
for (const [id, pending_status] of inputs_to_update) {

2
ui/packages/app/src/Render.svelte
View File

@ -86,7 +86,7 @@
}
}
children =
$: children =
children &&
children.filter((v) => instance_map[v.id].type !== "statustracker");

2
ui/packages/app/src/components/StatusTracker/StatusTracker.svelte
View File

@ -44,6 +44,7 @@
export let eta: number | null = null;
export let queue_position: number | null;
export let status: "complete" | "pending" | "error";
export let scroll_to_output: boolean = false;
export let timer: boolean = true;
let el: HTMLDivElement;
@ -101,6 +102,7 @@
}
$: el &&
scroll_to_output &&
(status === "pending" || status === "complete") &&
scroll_into_view(el);

3
ui/packages/app/src/components/StatusTracker/types.ts
View File

@ -2,4 +2,7 @@ export interface LoadingStatus {
eta: number;
queue_position: number;
status: "pending" | "error" | "complete";
scroll_to_output: boolean;
visible: boolean;
fn_index: number;
}

6
ui/packages/app/src/stores.ts
View File

@ -4,6 +4,7 @@ export interface LoadingStatus {
eta: number | null;
status: "pending" | "error" | "complete";
queue_position: number | null;
fn_index: number;
outputs: Array<number>;
}
@ -19,7 +20,7 @@ function create_loading_status_store() {
const fn_status: Array<LoadingStatus["status"]> = [];
function update(
fn_index: number,
fn_index: LoadingStatus["fn_index"],
status: LoadingStatus["status"],
position: LoadingStatus["queue_position"],
eta: LoadingStatus["eta"]
@ -82,7 +83,8 @@ function create_loading_status_store() {
outputs[id] = {
queue_position,
eta: eta || outputs[id]?.eta,
status
status,
fn_index
};
});

2
ui/packages/atoms/src/Block.svelte
View File

@ -73,7 +73,7 @@
this={tag}
data-testid={test_id}
id={elem_id}
class="overflow-hidden {styles[variant]} {rounded
class="relative w-full overflow-hidden {styles[variant]} {rounded
? styles[color]
: ''} {form_class} {classes} {rounded_style}"
class:gr-panel={padding}