Skip to content

Commit b2aabdb

Browse files
digitsisyphdigitsisyph
committed
Add custome components
1 parent 78d7784 commit b2aabdb

File tree

14 files changed

+975
-0
lines changed

14 files changed

+975
-0
lines changed

‎custom_components/sandboxcomponent/.gitignore‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
.eggs/
2+
dist/
3+
*.pyc
4+
__pycache__/
5+
*.py[cod]
6+
*$py.class
7+
__tmp/*
8+
*.pyi
9+
.mypycache
10+
.ruff_cache
11+
node_modules
12+
backend/**/templates/

‎custom_components/sandboxcomponent/README.md‎

Lines changed: 253 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,253 @@
1+
2+
# `gradio_sandboxcomponent`
3+
<img alt="Static Badge" src="https://img.shields.io/badge/version%20-%200.0.9%20-%20orange">
4+
5+
Python library for easily interacting with trained machine learning models
6+
7+
## Installation
8+
9+
```bash
10+
pip install gradio_sandboxcomponent
11+
```
12+
13+
## Usage
14+
15+
```python
16+
17+
import gradio as gr
18+
from gradio_sandboxcomponent import SandboxComponent
19+
20+
21+
example = SandboxComponent().example_value()
22+
23+
24+
with gr.Blocks() as demo:
25+
with gr.Tab("My iFrame"):
26+
with gr.Row():
27+
gr.Markdown("## Baidu iFrame")
28+
with gr.Row():
29+
SandboxComponent(
30+
label="iFrame Example",
31+
value=("https://www.baidu.com/", "Hello World"),
32+
show_label=True)
33+
34+
35+
if __name__ == "__main__":
36+
demo.launch()
37+
38+
```
39+
40+
## `SandboxComponent`
41+
42+
### Initialization
43+
44+
<table>
45+
<thead>
46+
<tr>
47+
<th align="left">name</th>
48+
<th align="left" style="width: 25%;">type</th>
49+
<th align="left">default</th>
50+
<th align="left">description</th>
51+
</tr>
52+
</thead>
53+
<tbody>
54+
<tr>
55+
<td align="left"><code>value</code></td>
56+
<td align="left" style="width: 25%;">
57+
58+
```python
59+
tuple[str, str] | Callable | None
60+
```
61+
62+
</td>
63+
<td align="left"><code>None</code></td>
64+
<td align="left">default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.</td>
65+
</tr>
66+
67+
<tr>
68+
<td align="left"><code>label</code></td>
69+
<td align="left" style="width: 25%;">
70+
71+
```python
72+
str | None
73+
```
74+
75+
</td>
76+
<td align="left"><code>None</code></td>
77+
<td align="left">the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.</td>
78+
</tr>
79+
80+
<tr>
81+
<td align="left"><code>every</code></td>
82+
<td align="left" style="width: 25%;">
83+
84+
```python
85+
Timer | float | None
86+
```
87+
88+
</td>
89+
<td align="left"><code>None</code></td>
90+
<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.</td>
91+
</tr>
92+
93+
<tr>
94+
<td align="left"><code>inputs</code></td>
95+
<td align="left" style="width: 25%;">
96+
97+
```python
98+
Component | Sequence[Component] | set[Component] | None
99+
```
100+
101+
</td>
102+
<td align="left"><code>None</code></td>
103+
<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.</td>
104+
</tr>
105+
106+
<tr>
107+
<td align="left"><code>show_label</code></td>
108+
<td align="left" style="width: 25%;">
109+
110+
```python
111+
bool | None
112+
```
113+
114+
</td>
115+
<td align="left"><code>None</code></td>
116+
<td align="left">if True, will display label.</td>
117+
</tr>
118+
119+
<tr>
120+
<td align="left"><code>scale</code></td>
121+
<td align="left" style="width: 25%;">
122+
123+
```python
124+
int | None
125+
```
126+
127+
</td>
128+
<td align="left"><code>None</code></td>
129+
<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
130+
</tr>
131+
132+
<tr>
133+
<td align="left"><code>min_width</code></td>
134+
<td align="left" style="width: 25%;">
135+
136+
```python
137+
int
138+
```
139+
140+
</td>
141+
<td align="left"><code>160</code></td>
142+
<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
143+
</tr>
144+
145+
<tr>
146+
<td align="left"><code>interactive</code></td>
147+
<td align="left" style="width: 25%;">
148+
149+
```python
150+
bool | None
151+
```
152+
153+
</td>
154+
<td align="left"><code>None</code></td>
155+
<td align="left">if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</td>
156+
</tr>
157+
158+
<tr>
159+
<td align="left"><code>visible</code></td>
160+
<td align="left" style="width: 25%;">
161+
162+
```python
163+
bool
164+
```
165+
166+
</td>
167+
<td align="left"><code>True</code></td>
168+
<td align="left">If False, component will be hidden.</td>
169+
</tr>
170+
171+
<tr>
172+
<td align="left"><code>elem_id</code></td>
173+
<td align="left" style="width: 25%;">
174+
175+
```python
176+
str | None
177+
```
178+
179+
</td>
180+
<td align="left"><code>None</code></td>
181+
<td align="left">None</td>
182+
</tr>
183+
184+
<tr>
185+
<td align="left"><code>elem_classes</code></td>
186+
<td align="left" style="width: 25%;">
187+
188+
```python
189+
list[str] | str | None
190+
```
191+
192+
</td>
193+
<td align="left"><code>None</code></td>
194+
<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
195+
</tr>
196+
197+
<tr>
198+
<td align="left"><code>render</code></td>
199+
<td align="left" style="width: 25%;">
200+
201+
```python
202+
bool
203+
```
204+
205+
</td>
206+
<td align="left"><code>True</code></td>
207+
<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
208+
</tr>
209+
210+
<tr>
211+
<td align="left"><code>key</code></td>
212+
<td align="left" style="width: 25%;">
213+
214+
```python
215+
int | str | None
216+
```
217+
218+
</td>
219+
<td align="left"><code>None</code></td>
220+
<td align="left">if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.</td>
221+
</tr>
222+
</tbody></table>
223+
224+
225+
### Events
226+
227+
| name | description |
228+
|:-----|:------------|
229+
| `change` | Triggered when the value of the SandboxComponent 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. |
230+
| `input` | This listener is triggered when the user changes the value of the SandboxComponent. |
231+
| `submit` | This listener is triggered when the user presses the Enter key while the SandboxComponent is focused. |
232+
233+
234+
235+
### User function
236+
237+
The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
238+
239+
- When used as an Input, the component only impacts the input signature of the user function.
240+
- When used as an output, the component only impacts the return signature of the user function.
241+
242+
The code snippet below is accurate in cases where the component is used as both an input and an output.
243+
244+
- **As output:** Is passed, passes text value as a {str} into the function.
245+
- **As input:** Should return, expects a {str} returned from function and sets textarea value to it.
246+
247+
```python
248+
def predict(
249+
value: str | None
250+
) -> str | None:
251+
return value
252+
```
253+

‎custom_components/sandboxcomponent/backend/gradio_sandboxcomponent/__init__.py‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
from .sandboxcomponent import SandboxComponent
3+
4+
__all__ = ['SandboxComponent']

‎custom_components/sandboxcomponent/backend/gradio_sandboxcomponent/sandboxcomponent.py‎

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
from __future__ import annotations
2+
3+
from collections.abc import Callable, Sequence
4+
import json
5+
from typing import TYPE_CHECKING, Any
6+
7+
from gradio.components.base import Component, FormComponent
8+
from gradio.events import Events
9+
10+
if TYPE_CHECKING:
11+
from gradio.components import Timer
12+
13+
14+
class SandboxComponent(FormComponent):
15+
"""
16+
Creates a very simple textbox for user to enter string input or display string output.
17+
"""
18+
19+
EVENTS = [
20+
Events.change,
21+
Events.input,
22+
Events.submit,
23+
]
24+
25+
def __init__(
26+
self,
27+
value: tuple[str, str] | Callable | None = None,
28+
*,
29+
label: str | None = None,
30+
every: Timer | float | None = None,
31+
inputs: Component | Sequence[Component] | set[Component] | None = None,
32+
show_label: bool | None = None,
33+
scale: int | None = None,
34+
min_width: int = 160,
35+
interactive: bool | None = None,
36+
visible: bool = True,
37+
elem_id: str | None = None,
38+
elem_classes: list[str] | str | None = None,
39+
render: bool = True,
40+
key: int | str | None = None,
41+
):
42+
"""
43+
Parameters:
44+
value: default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.
45+
placeholder: placeholder hint to provide behind textbox.
46+
label: the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.
47+
every: Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.
48+
inputs: Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.
49+
show_label: if True, will display label.
50+
scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
51+
min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
52+
interactive: if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
53+
visible: If False, component will be hidden.
54+
elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
55+
render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
56+
key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
57+
"""
58+
59+
super().__init__(
60+
label=label,
61+
every=every,
62+
inputs=inputs,
63+
show_label=show_label,
64+
scale=scale,
65+
min_width=min_width,
66+
interactive=interactive,
67+
visible=visible,
68+
elem_id=elem_id,
69+
elem_classes=elem_classes,
70+
value=value,
71+
render=render,
72+
key=key,
73+
)
74+
75+
def api_info(self) -> dict[str, Any]:
76+
"""Provides info about this component's API. Used by Gradio's JS client.
77+
78+
Returns:
79+
dict: A dictionary containing API documentation
80+
"""
81+
return {
82+
"type": "string"
83+
}
84+
85+
def preprocess(self, payload: str | None) -> str | None:
86+
"""
87+
Parameters:
88+
payload: the text entered in the textarea.
89+
Returns:
90+
Passes text value as a {str} into the function.
91+
"""
92+
return None if payload is None else str(payload)
93+
94+
def postprocess(self, value: str | None) -> str | None:
95+
"""
96+
Parameters:
97+
value: Expects a {str} returned from function and sets textarea value to it.
98+
Returns:
99+
The value to display in the textarea.
100+
"""
101+
return None if value is None else json.dumps(value)
102+
103+
def example_payload(self) -> Any:
104+
return ("https://www.google.com", "print('Hello, world!')")
105+
106+
def example_value(self) -> Any:
107+
return ("https://www.google.com", "print('Hello, world!')")

‎custom_components/sandboxcomponent/demo/__init__.py‎

Whitespace-only changes.

0 commit comments

Comments
 (0)