mirror of
https://github.com/gradio-app/gradio.git
synced 2025-02-17 11:29:58 +08:00
Create event listener table for components on docs (#5298)
* changes * changes * remove languages from code docs * fix img path in guide * rework event listeners * add changeset * remove console log * name it event arguments * Update js/_website/src/lib/components/EventListeners.svelte Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * Update js/_website/src/lib/components/EventListeners.svelte Co-authored-by: Abubakar Abid <abubakar@huggingface.co> * requested changes --------- Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Abubakar Abid <abubakar@huggingface.co>
This commit is contained in:
Ali Abdalla
GitHub
parent
7b8fa8aa58
commit
cf167cd1dd
6
.changeset/itchy-birds-burn.md
Normal file
6
.changeset/itchy-birds-burn.md
Normal file
@ -0,0 +1,6 @@
|
||||
---
|
||||
"gradio": minor
|
||||
"website": minor
|
||||
---
|
||||
|
||||
feat:Create event listener table for components on docs
|
||||
@ -13,7 +13,7 @@ from gradio.events import Changeable, Inputable
|
||||
set_documentation_group("component")
|
||||
|
||||
|
||||
@document("languages")
|
||||
@document()
|
||||
class Code(Changeable, Inputable, IOComponent, StringSerializable):
|
||||
"""
|
||||
Creates a Code editor for entering, editing or viewing code.
|
||||
|
||||
@ -108,10 +108,11 @@ class EventListenerMethod:
|
||||
) -> Dependency:
|
||||
"""
|
||||
Parameters:
|
||||
fn: the function to wrap an interface around. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
|
||||
fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component.
|
||||
inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list.
|
||||
outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list.
|
||||
api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name.
|
||||
status_tracker: Deprecated and has no effect.
|
||||
scroll_to_output: If True, will scroll to output component on completion
|
||||
show_progress: If True, will show progress animation while pending
|
||||
queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app.
|
||||
@ -119,7 +120,7 @@ class EventListenerMethod:
|
||||
max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True)
|
||||
preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component).
|
||||
postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser.
|
||||
cancels: A list of other events to cancel when This listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
|
||||
cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish.
|
||||
every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled.
|
||||
"""
|
||||
if status_tracker:
|
||||
@ -169,7 +170,6 @@ class Changeable(EventListener):
|
||||
"""
|
||||
This listener is triggered when the component's value changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger).
|
||||
See `.input()` for a listener that is only triggered by user input.
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
|
||||
@ -179,7 +179,6 @@ class Inputable(EventListener):
|
||||
self.input = EventListenerMethod(self, "input")
|
||||
"""
|
||||
This listener is triggered when the user changes the value of the component.
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
|
||||
@ -189,7 +188,6 @@ class Clickable(EventListener):
|
||||
self.click = EventListenerMethod(self, "click")
|
||||
"""
|
||||
This listener is triggered when the component (e.g. a button) is clicked.
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
|
||||
@ -199,7 +197,6 @@ class Submittable(EventListener):
|
||||
self.submit = EventListenerMethod(self, "submit")
|
||||
"""
|
||||
This listener is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused.
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
|
||||
@ -209,7 +206,7 @@ class Editable(EventListener):
|
||||
self.edit = EventListenerMethod(self, "edit")
|
||||
"""
|
||||
This listener is triggered when the user edits the component (e.g. image) using the
|
||||
built-in editor. This method can be used when this component is in a Gradio Blocks.
|
||||
built-in editor.
|
||||
"""
|
||||
|
||||
|
||||
@ -219,7 +216,7 @@ class Clearable(EventListener):
|
||||
self.clear = EventListenerMethod(self, "clear")
|
||||
"""
|
||||
This listener is triggered when the user clears the component (e.g. image or audio)
|
||||
using the X button for the component. This method can be used when this component is in a Gradio Blocks.
|
||||
using the X button for the component.
|
||||
"""
|
||||
|
||||
|
||||
@ -229,25 +226,21 @@ class Playable(EventListener):
|
||||
self.play = EventListenerMethod(self, "play")
|
||||
"""
|
||||
This listener is triggered when the user plays the component (e.g. audio or video).
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
self.pause = EventListenerMethod(self, "pause")
|
||||
"""
|
||||
This listener is triggered when the media stops playing for any reason (e.g. audio or video).
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
self.stop = EventListenerMethod(self, "stop")
|
||||
"""
|
||||
This listener is triggered when the user reaches the end of the media track (e.g. audio or video).
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
self.end = EventListenerMethod(self, "end")
|
||||
"""
|
||||
This listener is triggered when the user reaches the end of the media track (e.g. audio or video).
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
|
||||
@ -263,7 +256,7 @@ class Streamable(EventListener):
|
||||
)
|
||||
"""
|
||||
This listener is triggered when the user streams the component (e.g. a live webcam
|
||||
component). This method can be used when this component is in a Gradio Blocks.
|
||||
component).
|
||||
"""
|
||||
|
||||
def check_streamable(self):
|
||||
@ -284,13 +277,11 @@ class Recordable(EventListener):
|
||||
self.start_recording = EventListenerMethod(self, "start_recording")
|
||||
"""
|
||||
This listener is triggered when the user starts recording with the component (e.g. audio or video).
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
self.stop_recording = EventListenerMethod(self, "stop_recording")
|
||||
"""
|
||||
This listener is triggered when the user stops recording with the component (e.g. audio or video).
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
|
||||
@ -300,13 +291,11 @@ class Focusable(EventListener):
|
||||
self.focus = EventListenerMethod(self, "focus")
|
||||
"""
|
||||
This listener is triggered when the component is focused (e.g. when the user clicks inside a textbox).
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
self.blur = EventListenerMethod(self, "blur")
|
||||
"""
|
||||
This listener is triggered when the component's is unfocused/blurred (e.g. when the user clicks outside of a textbox).
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
|
||||
@ -316,7 +305,6 @@ class Uploadable(EventListener):
|
||||
self.upload = EventListenerMethod(self, "upload")
|
||||
"""
|
||||
This listener is triggered when the user uploads a file into the component (e.g. when the user uploads a video into a video component).
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
|
||||
@ -326,7 +314,6 @@ class Releaseable(EventListener):
|
||||
self.release = EventListenerMethod(self, "release")
|
||||
"""
|
||||
This listener is triggered when the user releases the mouse on this component (e.g. when the user releases the slider).
|
||||
This method can be used when this component is in a Gradio Blocks.
|
||||
"""
|
||||
|
||||
|
||||
|
||||
@ -109,7 +109,7 @@ If you wish for the user to provide a reason for flagging, you can pass a list o
|
||||
|
||||
## Preprocessing and Postprocessing
|
||||
|
||||
|
||||
|
||||
|
||||
As you've seen, Gradio includes components that can handle a variety of different data types, such as images, audio, and video. Most components can be used both as inputs or outputs.
|
||||
|
||||
|
||||
188
guides/assets/dataflow.svg
Normal file
188
guides/assets/dataflow.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 142 KiB |
101
js/_website/src/lib/components/EventListeners.svelte
Normal file
101
js/_website/src/lib/components/EventListeners.svelte
Normal file
@ -0,0 +1,101 @@
|
||||
<script lang="ts">
|
||||
export let fns: any[];
|
||||
</script>
|
||||
|
||||
|
||||
<div id="event-listeners-description">
|
||||
<h4 class="mt-8 text-xl text-orange-500 font-light group">
|
||||
Description
|
||||
</h4>
|
||||
<p class="mb-2 text-lg text-gray-600">Event listeners allow you to capture and respond to user interactions with the UI components you've defined in a Gradio Blocks app. When a user interacts with an element, such as changing a slider value or uploading an image, a function is called.</p>
|
||||
</div>
|
||||
|
||||
<div id="event-listeners-list">
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="supported-event-listeners"
|
||||
>
|
||||
Supported Event Listeners
|
||||
</h4>
|
||||
<p class="mb-4 text-lg text-gray-600"> The <span class="font-mono">{fns[0].parent.replace("gradio.","")}</span> component supports the following event listeners. Each event listener takes the same parameters, which are listed in the <a href="#event-listeners-arguments" class="text-orange-500 font-light">Event Arguments</a> table below.</p>
|
||||
|
||||
<table class="mb-4 table-fixed w-full">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold w-2/5"
|
||||
>Listener</th
|
||||
>
|
||||
<th class="px-3 pb-3 text-gray-700 font-semibold"
|
||||
>Description</th
|
||||
>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class="text-left divide-y rounded-lg bg-gray-50 border border-gray-100 overflow-hidden"
|
||||
>
|
||||
{#each fns as fn}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80 align-top ">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<p>
|
||||
<code class="lang-python">{fn.parent}.{fn.name}(fn, ···)</code
|
||||
>
|
||||
</p>
|
||||
</td>
|
||||
<td class="p-3 break-words text-gray-700">
|
||||
<p>{fn.description}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="event-listeners-arguments">
|
||||
<h4
|
||||
class="text-xl text-orange-500 font-light group"
|
||||
id="event-listener-arguments"
|
||||
>
|
||||
Event Arguments
|
||||
</h4>
|
||||
|
||||
<table class="table-fixed w-full leading-loose">
|
||||
<thead class="text-left">
|
||||
<tr>
|
||||
<th class="px-3 pb-3 font-semibold text-gray-700 w-2/5">Parameter</th>
|
||||
<th class="px-3 pb-3 font-semibold text-gray-700">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody
|
||||
class=" rounded-lg bg-gray-50 border border-gray-100 overflow-hidden text-left align-top divide-y"
|
||||
>
|
||||
{#each fns[0].parameters as param}
|
||||
{#if param["name"] != "self"}
|
||||
<tr class="group hover:bg-gray-200/60 odd:bg-gray-100/80">
|
||||
<td class="p-3 w-2/5 break-words">
|
||||
<code class="block">
|
||||
{param["name"]}
|
||||
</code>
|
||||
<p class="text-gray-500 italic">{param["annotation"]}</p>
|
||||
{#if "default" in param}
|
||||
<p class="text-gray-500 font-semibold">
|
||||
default: {param["default"]}
|
||||
</p>
|
||||
{:else if !("kwargs" in param)}
|
||||
<p class="text-orange-600 font-semibold italic">required</p>
|
||||
{/if}
|
||||
</td>
|
||||
<td class="p-3 text-gray-700 break-words">
|
||||
<p>{param["doc"] || ""}</p>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
code {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
</style>
|
||||
@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
export let fn: any;
|
||||
export let parent;
|
||||
import anchor from "../assets/img/anchor.svg";
|
||||
|
||||
function handleAnchorClick(event: MouseEvent) {
|
||||
@ -135,4 +134,4 @@
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
@ -83,15 +83,19 @@ export async function load({ params, parent }) {
|
||||
}
|
||||
|
||||
if ("fns" in obj && obj.fns.length > 0) {
|
||||
headers.push(["Methods", "methods"]);
|
||||
for (const fn of obj.fns) {
|
||||
method_headers.push([fn.name, fn.slug]);
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(
|
||||
fn.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
if (mode === "components") {
|
||||
headers.push(["Event Listeners", "event-listeners"]);
|
||||
} else {
|
||||
headers.push(["Methods", "methods"]);
|
||||
for (const fn of obj.fns) {
|
||||
method_headers.push([fn.name, fn.slug]);
|
||||
if (fn.example) {
|
||||
fn.highlighted_example = Prism.highlight(
|
||||
fn.example,
|
||||
Prism.languages[language],
|
||||
"python"
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -111,4 +115,4 @@ export async function load({ params, parent }) {
|
||||
headers,
|
||||
method_headers
|
||||
};
|
||||
}
|
||||
}
|
||||
@ -2,6 +2,7 @@
|
||||
import Demos from "$lib/components/Demos.svelte";
|
||||
import DocsNav from "$lib/components/DocsNav.svelte";
|
||||
import FunctionDoc from "$lib/components/FunctionDoc.svelte";
|
||||
import EventListeners from "$lib/components/EventListeners.svelte";
|
||||
import MetaTags from "$lib/components/MetaTags.svelte";
|
||||
import anchor from "$lib/assets/img/anchor.svg";
|
||||
import { onDestroy } from "svelte";
|
||||
@ -17,6 +18,7 @@
|
||||
let routes = data.routes;
|
||||
let py_client = data.py_client;
|
||||
|
||||
|
||||
let headers: [string, string][];
|
||||
let method_headers: [string, string][];
|
||||
$: headers = data.headers;
|
||||
@ -393,23 +395,41 @@
|
||||
{/if}
|
||||
|
||||
{#if obj.fns && obj.fns.length > 0}
|
||||
<div id="methods">
|
||||
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
|
||||
Methods
|
||||
<a
|
||||
href="#methods"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
{#if mode === "components"}
|
||||
<div id="event-listeners">
|
||||
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
|
||||
Event Listeners
|
||||
<a
|
||||
href="#event-listeners"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
<EventListeners fns={obj.fns} />
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<div id="methods">
|
||||
<h4 class="mt-4 p-3 text-xl text-orange-500 font-light group">
|
||||
Methods
|
||||
<a
|
||||
href="#methods"
|
||||
class="invisible group-hover-visible"
|
||||
on:click={handleAnchorClick}
|
||||
><img class="anchor-img-small" src={anchor} /></a
|
||||
>
|
||||
</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if obj.guides && obj.guides.length > 0}
|
||||
|
||||
@ -339,7 +339,7 @@
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
<FunctionDoc {fn} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
|
||||
@ -342,7 +342,7 @@
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
<FunctionDoc {fn} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
|
||||
@ -341,7 +341,7 @@
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
<FunctionDoc {fn} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
|
||||
@ -359,7 +359,7 @@
|
||||
<h4 class="mt-4 p-3 font-semibold">Methods</h4>
|
||||
<div class="flex flex-col gap-8 pl-12">
|
||||
{#each obj.fns as fn}
|
||||
<FunctionDoc {fn} parent={obj.name} />
|
||||
<FunctionDoc {fn} />
|
||||
{/each}
|
||||
<div class="ml-12" />
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user