Spaces:
Running
Running
Upload folder using huggingface_hub
Browse files- .gitignore +9 -0
- README.md +129 -12
- src/backend/gradio_modal/templates/component/index.js +0 -0
- src/backend/gradio_modal/templates/component/style.css +0 -0
- src/frontend/package-lock.json +0 -0
- src/frontend/package.json +13 -7
- src/frontend/pnpm-lock.yaml +0 -0
- src/pyproject.toml +2 -2
.gitignore
ADDED
@@ -0,0 +1,9 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.eggs/
|
2 |
+
dist/
|
3 |
+
*.pyc
|
4 |
+
__pycache__/
|
5 |
+
*.py[cod]
|
6 |
+
*$py.class
|
7 |
+
__tmp/*
|
8 |
+
*.pyi
|
9 |
+
node_modules
|
README.md
CHANGED
@@ -1,17 +1,134 @@
|
|
1 |
|
2 |
-
|
3 |
-
|
4 |
-
title: gradio_modal V0.0.3
|
5 |
-
colorFrom: red
|
6 |
-
colorTo: gray
|
7 |
-
sdk: docker
|
8 |
-
pinned: false
|
9 |
-
license: apache-2.0
|
10 |
-
---
|
11 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
12 |
|
13 |
-
# Name: gradio_modal
|
14 |
|
15 |
-
Description: A popup modal component
|
16 |
|
17 |
-
Install with: pip install gradio_modal
|
|
|
1 |
|
2 |
+
# `gradio_modal`
|
3 |
+
<a href="https://pypi.org/project/gradio_modal/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_modal"></a>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
4 |
|
5 |
+
A popup modal component
|
6 |
+
|
7 |
+
## Installation
|
8 |
+
|
9 |
+
```bash
|
10 |
+
pip install gradio_modal
|
11 |
+
```
|
12 |
+
|
13 |
+
## Usage
|
14 |
+
|
15 |
+
```python
|
16 |
+
import gradio as gr
|
17 |
+
from gradio_modal import Modal
|
18 |
+
|
19 |
+
with gr.Blocks() as demo:
|
20 |
+
with gr.Tab("Tab 1"):
|
21 |
+
text_1 = gr.Textbox(label="Input 1")
|
22 |
+
text_2 = gr.Textbox(label="Input 2")
|
23 |
+
text_1.submit(lambda x:x, text_1, text_2)
|
24 |
+
show_btn = gr.Button("Show Modal")
|
25 |
+
show_btn2 = gr.Button("Show Modal 2")
|
26 |
+
gr.Examples(
|
27 |
+
[["Text 1", "Text 2"], ["Text 3", "Text 4"]],
|
28 |
+
inputs=[text_1, text_2],
|
29 |
+
)
|
30 |
+
with gr.Tab("Tab 2"):
|
31 |
+
gr.Markdown("This is tab 2")
|
32 |
+
with Modal(visible=False) as modal:
|
33 |
+
for i in range(5):
|
34 |
+
gr.Markdown("Hello world!")
|
35 |
+
with Modal(visible=False) as modal2:
|
36 |
+
for i in range(100):
|
37 |
+
gr.Markdown("Hello world!")
|
38 |
+
show_btn.click(lambda: Modal(visible=True), None, modal)
|
39 |
+
show_btn2.click(lambda: Modal(visible=True), None, modal2)
|
40 |
+
|
41 |
+
if __name__ == "__main__":
|
42 |
+
demo.launch()
|
43 |
+
|
44 |
+
```
|
45 |
+
|
46 |
+
## `Modal`
|
47 |
+
|
48 |
+
### Initialization
|
49 |
+
|
50 |
+
<table>
|
51 |
+
<thead>
|
52 |
+
<tr>
|
53 |
+
<th align="left">name</th>
|
54 |
+
<th align="left" style="width: 25%;">type</th>
|
55 |
+
<th align="left">default</th>
|
56 |
+
<th align="left">description</th>
|
57 |
+
</tr>
|
58 |
+
</thead>
|
59 |
+
<tbody>
|
60 |
+
<tr>
|
61 |
+
<td align="left"><code>visible</code></td>
|
62 |
+
<td align="left" style="width: 25%;">
|
63 |
+
|
64 |
+
```python
|
65 |
+
bool
|
66 |
+
```
|
67 |
+
|
68 |
+
</td>
|
69 |
+
<td align="left"><code>False</code></td>
|
70 |
+
<td align="left">If False, modal will be hidden.</td>
|
71 |
+
</tr>
|
72 |
+
|
73 |
+
<tr>
|
74 |
+
<td align="left"><code>elem_id</code></td>
|
75 |
+
<td align="left" style="width: 25%;">
|
76 |
+
|
77 |
+
```python
|
78 |
+
str | None
|
79 |
+
```
|
80 |
+
|
81 |
+
</td>
|
82 |
+
<td align="left"><code>None</code></td>
|
83 |
+
<td align="left">An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
|
84 |
+
</tr>
|
85 |
+
|
86 |
+
<tr>
|
87 |
+
<td align="left"><code>elem_classes</code></td>
|
88 |
+
<td align="left" style="width: 25%;">
|
89 |
+
|
90 |
+
```python
|
91 |
+
list[str] | str | None
|
92 |
+
```
|
93 |
+
|
94 |
+
</td>
|
95 |
+
<td align="left"><code>None</code></td>
|
96 |
+
<td align="left">An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
|
97 |
+
</tr>
|
98 |
+
|
99 |
+
<tr>
|
100 |
+
<td align="left"><code>allow_user_close</code></td>
|
101 |
+
<td align="left" style="width: 25%;">
|
102 |
+
|
103 |
+
```python
|
104 |
+
bool
|
105 |
+
```
|
106 |
+
|
107 |
+
</td>
|
108 |
+
<td align="left"><code>True</code></td>
|
109 |
+
<td align="left">If True, user can close the modal (by clicking outside, clicking the X, or the escape key).</td>
|
110 |
+
</tr>
|
111 |
+
|
112 |
+
<tr>
|
113 |
+
<td align="left"><code>render</code></td>
|
114 |
+
<td align="left" style="width: 25%;">
|
115 |
+
|
116 |
+
```python
|
117 |
+
bool
|
118 |
+
```
|
119 |
+
|
120 |
+
</td>
|
121 |
+
<td align="left"><code>True</code></td>
|
122 |
+
<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>
|
123 |
+
</tr>
|
124 |
+
</tbody></table>
|
125 |
+
|
126 |
+
|
127 |
+
### Events
|
128 |
+
|
129 |
+
| name | description |
|
130 |
+
|:-----|:------------|
|
131 |
+
| `blur` | This listener is triggered when the Modal is unfocused/blurred. |
|
132 |
|
|
|
133 |
|
|
|
134 |
|
|
src/backend/gradio_modal/templates/component/index.js
CHANGED
The diff for this file is too large to render.
See raw diff
|
|
src/backend/gradio_modal/templates/component/style.css
CHANGED
The diff for this file is too large to render.
See raw diff
|
|
src/frontend/package-lock.json
CHANGED
The diff for this file is too large to render.
See raw diff
|
|
src/frontend/package.json
CHANGED
@@ -9,14 +9,20 @@
|
|
9 |
"private": false,
|
10 |
"main": "./Index.svelte",
|
11 |
"exports": {
|
12 |
-
".":
|
|
|
|
|
13 |
"./package.json": "./package.json"
|
14 |
},
|
15 |
"dependencies": {
|
16 |
-
"@gradio/
|
17 |
-
"@gradio/
|
18 |
-
"@gradio/
|
19 |
-
"@gradio/
|
20 |
-
"@gradio/
|
|
|
|
|
|
|
|
|
21 |
}
|
22 |
-
}
|
|
|
9 |
"private": false,
|
10 |
"main": "./Index.svelte",
|
11 |
"exports": {
|
12 |
+
".": {
|
13 |
+
"gradio": "./Index.svelte"
|
14 |
+
},
|
15 |
"./package.json": "./package.json"
|
16 |
},
|
17 |
"dependencies": {
|
18 |
+
"@gradio/markdown": "0.10.0",
|
19 |
+
"@gradio/atoms": "0.9.0",
|
20 |
+
"@gradio/column": "0.2.0",
|
21 |
+
"@gradio/icons": "0.8.0",
|
22 |
+
"@gradio/statustracker": "0.8.1",
|
23 |
+
"@gradio/utils": "0.7.0"
|
24 |
+
},
|
25 |
+
"devDependencies": {
|
26 |
+
"@gradio/preview": "^0.12.0"
|
27 |
}
|
28 |
+
}
|
src/frontend/pnpm-lock.yaml
CHANGED
The diff for this file is too large to render.
See raw diff
|
|
src/pyproject.toml
CHANGED
@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
|
|
8 |
|
9 |
[project]
|
10 |
name = "gradio_modal"
|
11 |
-
version = "0.0.
|
12 |
description = "A popup modal component"
|
13 |
readme = "README.md"
|
14 |
license = "MIT"
|
@@ -16,7 +16,7 @@ requires-python = ">=3.8"
|
|
16 |
authors = [{ name = "YOUR NAME", email = "[email protected]" }]
|
17 |
keywords = ["gradio-custom-component", "gradio-template-Column", "Modal, Popup"]
|
18 |
# Add dependencies here
|
19 |
-
dependencies = ["gradio>=4.0,<
|
20 |
classifiers = [
|
21 |
'Development Status :: 3 - Alpha',
|
22 |
'License :: OSI Approved :: Apache Software License',
|
|
|
8 |
|
9 |
[project]
|
10 |
name = "gradio_modal"
|
11 |
+
version = "0.0.4"
|
12 |
description = "A popup modal component"
|
13 |
readme = "README.md"
|
14 |
license = "MIT"
|
|
|
16 |
authors = [{ name = "YOUR NAME", email = "[email protected]" }]
|
17 |
keywords = ["gradio-custom-component", "gradio-template-Column", "Modal, Popup"]
|
18 |
# Add dependencies here
|
19 |
+
dependencies = ["gradio>=4.0,<6.0"]
|
20 |
classifiers = [
|
21 |
'Development Status :: 3 - Alpha',
|
22 |
'License :: OSI Approved :: Apache Software License',
|