freddyaboulton HF staff commited on
Commit
d9a3dc8
1 Parent(s): b375fb4

Upload folder using huggingface_hub

Browse files
Files changed (10) hide show
  1. Dockerfile +0 -1
  2. README.md +2 -2
  3. _app.py +22 -0
  4. app.py +118 -0
  5. css.css +157 -0
  6. src/README.md +227 -4
  7. src/demo/_app.py +22 -0
  8. src/demo/app.py +118 -0
  9. src/demo/css.css +157 -0
  10. src/pyproject.toml +1 -1
Dockerfile CHANGED
@@ -10,7 +10,6 @@ RUN chmod a+rwx -R /tmp/cache/
10
  ENV TRANSFORMERS_CACHE=/tmp/cache/
11
 
12
  RUN pip install --no-cache-dir -r requirements.txt
13
- RUN pip install --upgrade gradio
14
 
15
  ENV PYTHONUNBUFFERED=1 GRADIO_ALLOW_FLAGGING=never GRADIO_NUM_PORTS=1 GRADIO_SERVER_NAME=0.0.0.0 GRADIO_SERVER_PORT=7860 SYSTEM=spaces
16
 
 
10
  ENV TRANSFORMERS_CACHE=/tmp/cache/
11
 
12
  RUN pip install --no-cache-dir -r requirements.txt
 
13
 
14
  ENV PYTHONUNBUFFERED=1 GRADIO_ALLOW_FLAGGING=never GRADIO_NUM_PORTS=1 GRADIO_SERVER_NAME=0.0.0.0 GRADIO_SERVER_PORT=7860 SYSTEM=spaces
15
 
README.md CHANGED
@@ -2,8 +2,8 @@
2
  ---
3
  tags: [gradio-custom-component,maps,geospatial,folium]
4
  title: gradio_folium V0.0.6
5
- colorFrom: blue
6
- colorTo: purple
7
  sdk: docker
8
  pinned: false
9
  license: apache-2.0
 
2
  ---
3
  tags: [gradio-custom-component,maps,geospatial,folium]
4
  title: gradio_folium V0.0.6
5
+ colorFrom: green
6
+ colorTo: gray
7
  sdk: docker
8
  pinned: false
9
  license: apache-2.0
_app.py ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ import gradio as gr
3
+ from gradio_folium import Folium
4
+ from folium import Map
5
+ import pandas as pd
6
+ import pathlib
7
+
8
+ df = pd.read_csv(pathlib.Path(__file__).parent / "cities.csv")
9
+
10
+ def select(df, data: gr.SelectData):
11
+ row = df.iloc[data.index[0], :]
12
+ return Map(location=[row['Latitude'], row['Longitude']])
13
+
14
+ with gr.Blocks() as demo:
15
+ gr.Markdown(("# 🗺️ Explore World Capitals with Gradio and Folium\n"
16
+ "Install this custom component with `pip install gradio_folium`"))
17
+ map = Folium(value=Map(location=[25.7617, -80.1918]), height=400)
18
+ data = gr.DataFrame(value=df, height=200)
19
+ data.select(select, data, map)
20
+
21
+ if __name__ == "__main__":
22
+ demo.launch()
app.py CHANGED
@@ -1,4 +1,44 @@
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  import gradio as gr
3
  from gradio_folium import Folium
4
  from folium import Map
@@ -18,4 +58,82 @@ with gr.Blocks() as demo:
18
  data = gr.DataFrame(value=df, height=200)
19
  data.select(select, data, map)
20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  demo.launch()
 
1
 
2
+ import gradio as gr
3
+ from _app import demo as app
4
+ import os
5
+
6
+ _docs = {'Folium': {'description': 'A base class for defining methods that all input/output components should have.', 'members': {'__init__': {'value': {'type': 'Any', 'default': 'None', 'description': None}, 'height': {'type': 'int | None', 'default': 'None', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'load_fn': {'type': 'Callable[Ellipsis, Any] | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}}, 'postprocess': {'x': {'type': 'folium.folium.Map', 'description': None}, 'value': {'type': 'folium.folium.Map', 'description': None}}, 'preprocess': {}}, 'events': {}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'Folium': []}}}
7
+
8
+ abs_path = os.path.join(os.path.dirname(__file__), "css.css")
9
+
10
+ with gr.Blocks(
11
+ css=abs_path,
12
+ theme=gr.themes.Default(
13
+ font_mono=[
14
+ gr.themes.GoogleFont("Inconsolata"),
15
+ "monospace",
16
+ ],
17
+ ),
18
+ ) as demo:
19
+ gr.Markdown(
20
+ """
21
+ # `gradio_folium`
22
+
23
+ <div style="display: flex; gap: 7px;">
24
+ <a href="https://pypi.org/project/gradio_folium/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_folium"></a>
25
+ </div>
26
+
27
+ Display Interactive Maps Created with Folium
28
+ """, elem_classes=["md-custom"], header_links=True)
29
+ app.render()
30
+ gr.Markdown(
31
+ """
32
+ ## Installation
33
+
34
+ ```bash
35
+ pip install gradio_folium
36
+ ```
37
+
38
+ ## Usage
39
+
40
+ ```python
41
+
42
  import gradio as gr
43
  from gradio_folium import Folium
44
  from folium import Map
 
58
  data = gr.DataFrame(value=df, height=200)
59
  data.select(select, data, map)
60
 
61
+ if __name__ == "__main__":
62
+ demo.launch()
63
+
64
+ ```
65
+ """, elem_classes=["md-custom"], header_links=True)
66
+
67
+
68
+ gr.Markdown("""
69
+ ## `Folium`
70
+
71
+ ### Initialization
72
+ """, elem_classes=["md-custom"], header_links=True)
73
+
74
+ gr.ParamViewer(value=_docs["Folium"]["members"]["__init__"], linkify=[])
75
+
76
+
77
+
78
+
79
+ gr.Markdown("""
80
+
81
+ ### User function
82
+
83
+ 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).
84
+
85
+ - When used as an Input, the component only impacts the input signature of the user function.
86
+ - When used as an output, the component only impacts the return signature of the user function.
87
+
88
+ The code snippet below is accurate in cases where the component is used as both an input and an output.
89
+
90
+
91
+
92
+ ```python
93
+ def predict(
94
+ value: Unknown
95
+ ) -> folium.folium.Map:
96
+ return value
97
+ ```
98
+ """, elem_classes=["md-custom", "Folium-user-fn"], header_links=True)
99
+
100
+
101
+
102
+
103
+ demo.load(None, js=r"""function() {
104
+ const refs = {};
105
+ const user_fn_refs = {
106
+ Folium: [], };
107
+ requestAnimationFrame(() => {
108
+
109
+ Object.entries(user_fn_refs).forEach(([key, refs]) => {
110
+ if (refs.length > 0) {
111
+ const el = document.querySelector(`.${key}-user-fn`);
112
+ if (!el) return;
113
+ refs.forEach(ref => {
114
+ el.innerHTML = el.innerHTML.replace(
115
+ new RegExp("\\b"+ref+"\\b", "g"),
116
+ `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
117
+ );
118
+ })
119
+ }
120
+ })
121
+
122
+ Object.entries(refs).forEach(([key, refs]) => {
123
+ if (refs.length > 0) {
124
+ const el = document.querySelector(`.${key}`);
125
+ if (!el) return;
126
+ refs.forEach(ref => {
127
+ el.innerHTML = el.innerHTML.replace(
128
+ new RegExp("\\b"+ref+"\\b", "g"),
129
+ `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
130
+ );
131
+ })
132
+ }
133
+ })
134
+ })
135
+ }
136
+
137
+ """)
138
+
139
  demo.launch()
css.css ADDED
@@ -0,0 +1,157 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ html {
2
+ font-family: Inter;
3
+ font-size: 16px;
4
+ font-weight: 400;
5
+ line-height: 1.5;
6
+ -webkit-text-size-adjust: 100%;
7
+ background: #fff;
8
+ color: #323232;
9
+ -webkit-font-smoothing: antialiased;
10
+ -moz-osx-font-smoothing: grayscale;
11
+ text-rendering: optimizeLegibility;
12
+ }
13
+
14
+ :root {
15
+ --space: 1;
16
+ --vspace: calc(var(--space) * 1rem);
17
+ --vspace-0: calc(3 * var(--space) * 1rem);
18
+ --vspace-1: calc(2 * var(--space) * 1rem);
19
+ --vspace-2: calc(1.5 * var(--space) * 1rem);
20
+ --vspace-3: calc(0.5 * var(--space) * 1rem);
21
+ }
22
+
23
+ .app {
24
+ max-width: 748px !important;
25
+ }
26
+
27
+ .prose p {
28
+ margin: var(--vspace) 0;
29
+ line-height: var(--vspace * 2);
30
+ font-size: 1rem;
31
+ }
32
+
33
+ code {
34
+ font-family: "Inconsolata", sans-serif;
35
+ font-size: 16px;
36
+ }
37
+
38
+ h1,
39
+ h1 code {
40
+ font-weight: 400;
41
+ line-height: calc(2.5 / var(--space) * var(--vspace));
42
+ }
43
+
44
+ h1 code {
45
+ background: none;
46
+ border: none;
47
+ letter-spacing: 0.05em;
48
+ padding-bottom: 5px;
49
+ position: relative;
50
+ padding: 0;
51
+ }
52
+
53
+ h2 {
54
+ margin: var(--vspace-1) 0 var(--vspace-2) 0;
55
+ line-height: 1em;
56
+ }
57
+
58
+ h3,
59
+ h3 code {
60
+ margin: var(--vspace-1) 0 var(--vspace-2) 0;
61
+ line-height: 1em;
62
+ }
63
+
64
+ h4,
65
+ h5,
66
+ h6 {
67
+ margin: var(--vspace-3) 0 var(--vspace-3) 0;
68
+ line-height: var(--vspace);
69
+ }
70
+
71
+ .bigtitle,
72
+ h1,
73
+ h1 code {
74
+ font-size: calc(8px * 4.5);
75
+ word-break: break-word;
76
+ }
77
+
78
+ .title,
79
+ h2,
80
+ h2 code {
81
+ font-size: calc(8px * 3.375);
82
+ font-weight: lighter;
83
+ word-break: break-word;
84
+ border: none;
85
+ background: none;
86
+ }
87
+
88
+ .subheading1,
89
+ h3,
90
+ h3 code {
91
+ font-size: calc(8px * 1.8);
92
+ font-weight: 600;
93
+ border: none;
94
+ background: none;
95
+ letter-spacing: 0.1em;
96
+ text-transform: uppercase;
97
+ }
98
+
99
+ h2 code {
100
+ padding: 0;
101
+ position: relative;
102
+ letter-spacing: 0.05em;
103
+ }
104
+
105
+ blockquote {
106
+ font-size: calc(8px * 1.1667);
107
+ font-style: italic;
108
+ line-height: calc(1.1667 * var(--vspace));
109
+ margin: var(--vspace-2) var(--vspace-2);
110
+ }
111
+
112
+ .subheading2,
113
+ h4 {
114
+ font-size: calc(8px * 1.4292);
115
+ text-transform: uppercase;
116
+ font-weight: 600;
117
+ }
118
+
119
+ .subheading3,
120
+ h5 {
121
+ font-size: calc(8px * 1.2917);
122
+ line-height: calc(1.2917 * var(--vspace));
123
+
124
+ font-weight: lighter;
125
+ text-transform: uppercase;
126
+ letter-spacing: 0.15em;
127
+ }
128
+
129
+ h6 {
130
+ font-size: calc(8px * 1.1667);
131
+ font-size: 1.1667em;
132
+ font-weight: normal;
133
+ font-style: italic;
134
+ font-family: "le-monde-livre-classic-byol", serif !important;
135
+ letter-spacing: 0px !important;
136
+ }
137
+
138
+ #start .md > *:first-child {
139
+ margin-top: 0;
140
+ }
141
+
142
+ h2 + h3 {
143
+ margin-top: 0;
144
+ }
145
+
146
+ .md hr {
147
+ border: none;
148
+ border-top: 1px solid var(--block-border-color);
149
+ margin: var(--vspace-2) 0 var(--vspace-2) 0;
150
+ }
151
+ .prose ul {
152
+ margin: var(--vspace-2) 0 var(--vspace-1) 0;
153
+ }
154
+
155
+ .gap {
156
+ gap: 0;
157
+ }
src/README.md CHANGED
@@ -1,9 +1,232 @@
1
- # gradio_folium
2
- A Custom Gradio component for displaying maps built with Folium.
3
 
4
- ## Example usage
 
 
 
 
 
 
 
 
 
 
 
5
 
6
  ```python
 
7
  import gradio as gr
8
  from gradio_folium import Folium
9
- ```
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
 
2
+ # `gradio_folium`
3
+ <a href="https://pypi.org/project/gradio_folium/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_folium"></a>
4
+
5
+ Display Interactive Maps Created with Folium
6
+
7
+ ## Installation
8
+
9
+ ```bash
10
+ pip install gradio_folium
11
+ ```
12
+
13
+ ## Usage
14
 
15
  ```python
16
+
17
  import gradio as gr
18
  from gradio_folium import Folium
19
+ from folium import Map
20
+ import pandas as pd
21
+ import pathlib
22
+
23
+ df = pd.read_csv(pathlib.Path(__file__).parent / "cities.csv")
24
+
25
+ def select(df, data: gr.SelectData):
26
+ row = df.iloc[data.index[0], :]
27
+ return Map(location=[row['Latitude'], row['Longitude']])
28
+
29
+ with gr.Blocks() as demo:
30
+ gr.Markdown(("# 🗺️ Explore World Capitals with Gradio and Folium\n"
31
+ "Install this custom component with `pip install gradio_folium`"))
32
+ map = Folium(value=Map(location=[25.7617, -80.1918]), height=400)
33
+ data = gr.DataFrame(value=df, height=200)
34
+ data.select(select, data, map)
35
+
36
+ if __name__ == "__main__":
37
+ demo.launch()
38
+
39
+ ```
40
+
41
+ ## `Folium`
42
+
43
+ ### Initialization
44
+
45
+ <table>
46
+ <thead>
47
+ <tr>
48
+ <th align="left">name</th>
49
+ <th align="left" style="width: 25%;">type</th>
50
+ <th align="left">default</th>
51
+ <th align="left">description</th>
52
+ </tr>
53
+ </thead>
54
+ <tbody>
55
+ <tr>
56
+ <td align="left"><code>value</code></td>
57
+ <td align="left" style="width: 25%;">
58
+
59
+ ```python
60
+ Any
61
+ ```
62
+
63
+ </td>
64
+ <td align="left"><code>None</code></td>
65
+ <td align="left">None</td>
66
+ </tr>
67
+
68
+ <tr>
69
+ <td align="left"><code>height</code></td>
70
+ <td align="left" style="width: 25%;">
71
+
72
+ ```python
73
+ int | None
74
+ ```
75
+
76
+ </td>
77
+ <td align="left"><code>None</code></td>
78
+ <td align="left">None</td>
79
+ </tr>
80
+
81
+ <tr>
82
+ <td align="left"><code>label</code></td>
83
+ <td align="left" style="width: 25%;">
84
+
85
+ ```python
86
+ str | None
87
+ ```
88
+
89
+ </td>
90
+ <td align="left"><code>None</code></td>
91
+ <td align="left">None</td>
92
+ </tr>
93
+
94
+ <tr>
95
+ <td align="left"><code>container</code></td>
96
+ <td align="left" style="width: 25%;">
97
+
98
+ ```python
99
+ bool
100
+ ```
101
+
102
+ </td>
103
+ <td align="left"><code>True</code></td>
104
+ <td align="left">None</td>
105
+ </tr>
106
+
107
+ <tr>
108
+ <td align="left"><code>scale</code></td>
109
+ <td align="left" style="width: 25%;">
110
+
111
+ ```python
112
+ int | None
113
+ ```
114
+
115
+ </td>
116
+ <td align="left"><code>None</code></td>
117
+ <td align="left">None</td>
118
+ </tr>
119
+
120
+ <tr>
121
+ <td align="left"><code>min_width</code></td>
122
+ <td align="left" style="width: 25%;">
123
+
124
+ ```python
125
+ int | None
126
+ ```
127
+
128
+ </td>
129
+ <td align="left"><code>None</code></td>
130
+ <td align="left">None</td>
131
+ </tr>
132
+
133
+ <tr>
134
+ <td align="left"><code>visible</code></td>
135
+ <td align="left" style="width: 25%;">
136
+
137
+ ```python
138
+ bool
139
+ ```
140
+
141
+ </td>
142
+ <td align="left"><code>True</code></td>
143
+ <td align="left">None</td>
144
+ </tr>
145
+
146
+ <tr>
147
+ <td align="left"><code>elem_id</code></td>
148
+ <td align="left" style="width: 25%;">
149
+
150
+ ```python
151
+ str | None
152
+ ```
153
+
154
+ </td>
155
+ <td align="left"><code>None</code></td>
156
+ <td align="left">None</td>
157
+ </tr>
158
+
159
+ <tr>
160
+ <td align="left"><code>elem_classes</code></td>
161
+ <td align="left" style="width: 25%;">
162
+
163
+ ```python
164
+ list[str] | str | None
165
+ ```
166
+
167
+ </td>
168
+ <td align="left"><code>None</code></td>
169
+ <td align="left">None</td>
170
+ </tr>
171
+
172
+ <tr>
173
+ <td align="left"><code>render</code></td>
174
+ <td align="left" style="width: 25%;">
175
+
176
+ ```python
177
+ bool
178
+ ```
179
+
180
+ </td>
181
+ <td align="left"><code>True</code></td>
182
+ <td align="left">None</td>
183
+ </tr>
184
+
185
+ <tr>
186
+ <td align="left"><code>load_fn</code></td>
187
+ <td align="left" style="width: 25%;">
188
+
189
+ ```python
190
+ Callable[Ellipsis, Any] | None
191
+ ```
192
+
193
+ </td>
194
+ <td align="left"><code>None</code></td>
195
+ <td align="left">None</td>
196
+ </tr>
197
+
198
+ <tr>
199
+ <td align="left"><code>every</code></td>
200
+ <td align="left" style="width: 25%;">
201
+
202
+ ```python
203
+ float | None
204
+ ```
205
+
206
+ </td>
207
+ <td align="left"><code>None</code></td>
208
+ <td align="left">None</td>
209
+ </tr>
210
+ </tbody></table>
211
+
212
+
213
+
214
+
215
+ ### User function
216
+
217
+ 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).
218
+
219
+ - When used as an Input, the component only impacts the input signature of the user function.
220
+ - When used as an output, the component only impacts the return signature of the user function.
221
+
222
+ The code snippet below is accurate in cases where the component is used as both an input and an output.
223
+
224
+
225
+
226
+ ```python
227
+ def predict(
228
+ value: Unknown
229
+ ) -> folium.folium.Map:
230
+ return value
231
+ ```
232
+
src/demo/_app.py ADDED
@@ -0,0 +1,22 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+
2
+ import gradio as gr
3
+ from gradio_folium import Folium
4
+ from folium import Map
5
+ import pandas as pd
6
+ import pathlib
7
+
8
+ df = pd.read_csv(pathlib.Path(__file__).parent / "cities.csv")
9
+
10
+ def select(df, data: gr.SelectData):
11
+ row = df.iloc[data.index[0], :]
12
+ return Map(location=[row['Latitude'], row['Longitude']])
13
+
14
+ with gr.Blocks() as demo:
15
+ gr.Markdown(("# 🗺️ Explore World Capitals with Gradio and Folium\n"
16
+ "Install this custom component with `pip install gradio_folium`"))
17
+ map = Folium(value=Map(location=[25.7617, -80.1918]), height=400)
18
+ data = gr.DataFrame(value=df, height=200)
19
+ data.select(select, data, map)
20
+
21
+ if __name__ == "__main__":
22
+ demo.launch()
src/demo/app.py CHANGED
@@ -1,4 +1,44 @@
1
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  import gradio as gr
3
  from gradio_folium import Folium
4
  from folium import Map
@@ -18,4 +58,82 @@ with gr.Blocks() as demo:
18
  data = gr.DataFrame(value=df, height=200)
19
  data.select(select, data, map)
20
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
21
  demo.launch()
 
1
 
2
+ import gradio as gr
3
+ from _app import demo as app
4
+ import os
5
+
6
+ _docs = {'Folium': {'description': 'A base class for defining methods that all input/output components should have.', 'members': {'__init__': {'value': {'type': 'Any', 'default': 'None', 'description': None}, 'height': {'type': 'int | None', 'default': 'None', 'description': None}, 'label': {'type': 'str | None', 'default': 'None', 'description': None}, 'container': {'type': 'bool', 'default': 'True', 'description': None}, 'scale': {'type': 'int | None', 'default': 'None', 'description': None}, 'min_width': {'type': 'int | None', 'default': 'None', 'description': None}, 'visible': {'type': 'bool', 'default': 'True', 'description': None}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': None}, 'render': {'type': 'bool', 'default': 'True', 'description': None}, 'load_fn': {'type': 'Callable[Ellipsis, Any] | None', 'default': 'None', 'description': None}, 'every': {'type': 'float | None', 'default': 'None', 'description': None}}, 'postprocess': {'x': {'type': 'folium.folium.Map', 'description': None}, 'value': {'type': 'folium.folium.Map', 'description': None}}, 'preprocess': {}}, 'events': {}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'Folium': []}}}
7
+
8
+ abs_path = os.path.join(os.path.dirname(__file__), "css.css")
9
+
10
+ with gr.Blocks(
11
+ css=abs_path,
12
+ theme=gr.themes.Default(
13
+ font_mono=[
14
+ gr.themes.GoogleFont("Inconsolata"),
15
+ "monospace",
16
+ ],
17
+ ),
18
+ ) as demo:
19
+ gr.Markdown(
20
+ """
21
+ # `gradio_folium`
22
+
23
+ <div style="display: flex; gap: 7px;">
24
+ <a href="https://pypi.org/project/gradio_folium/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_folium"></a>
25
+ </div>
26
+
27
+ Display Interactive Maps Created with Folium
28
+ """, elem_classes=["md-custom"], header_links=True)
29
+ app.render()
30
+ gr.Markdown(
31
+ """
32
+ ## Installation
33
+
34
+ ```bash
35
+ pip install gradio_folium
36
+ ```
37
+
38
+ ## Usage
39
+
40
+ ```python
41
+
42
  import gradio as gr
43
  from gradio_folium import Folium
44
  from folium import Map
 
58
  data = gr.DataFrame(value=df, height=200)
59
  data.select(select, data, map)
60
 
61
+ if __name__ == "__main__":
62
+ demo.launch()
63
+
64
+ ```
65
+ """, elem_classes=["md-custom"], header_links=True)
66
+
67
+
68
+ gr.Markdown("""
69
+ ## `Folium`
70
+
71
+ ### Initialization
72
+ """, elem_classes=["md-custom"], header_links=True)
73
+
74
+ gr.ParamViewer(value=_docs["Folium"]["members"]["__init__"], linkify=[])
75
+
76
+
77
+
78
+
79
+ gr.Markdown("""
80
+
81
+ ### User function
82
+
83
+ 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).
84
+
85
+ - When used as an Input, the component only impacts the input signature of the user function.
86
+ - When used as an output, the component only impacts the return signature of the user function.
87
+
88
+ The code snippet below is accurate in cases where the component is used as both an input and an output.
89
+
90
+
91
+
92
+ ```python
93
+ def predict(
94
+ value: Unknown
95
+ ) -> folium.folium.Map:
96
+ return value
97
+ ```
98
+ """, elem_classes=["md-custom", "Folium-user-fn"], header_links=True)
99
+
100
+
101
+
102
+
103
+ demo.load(None, js=r"""function() {
104
+ const refs = {};
105
+ const user_fn_refs = {
106
+ Folium: [], };
107
+ requestAnimationFrame(() => {
108
+
109
+ Object.entries(user_fn_refs).forEach(([key, refs]) => {
110
+ if (refs.length > 0) {
111
+ const el = document.querySelector(`.${key}-user-fn`);
112
+ if (!el) return;
113
+ refs.forEach(ref => {
114
+ el.innerHTML = el.innerHTML.replace(
115
+ new RegExp("\\b"+ref+"\\b", "g"),
116
+ `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
117
+ );
118
+ })
119
+ }
120
+ })
121
+
122
+ Object.entries(refs).forEach(([key, refs]) => {
123
+ if (refs.length > 0) {
124
+ const el = document.querySelector(`.${key}`);
125
+ if (!el) return;
126
+ refs.forEach(ref => {
127
+ el.innerHTML = el.innerHTML.replace(
128
+ new RegExp("\\b"+ref+"\\b", "g"),
129
+ `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
130
+ );
131
+ })
132
+ }
133
+ })
134
+ })
135
+ }
136
+
137
+ """)
138
+
139
  demo.launch()
src/demo/css.css ADDED
@@ -0,0 +1,157 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ html {
2
+ font-family: Inter;
3
+ font-size: 16px;
4
+ font-weight: 400;
5
+ line-height: 1.5;
6
+ -webkit-text-size-adjust: 100%;
7
+ background: #fff;
8
+ color: #323232;
9
+ -webkit-font-smoothing: antialiased;
10
+ -moz-osx-font-smoothing: grayscale;
11
+ text-rendering: optimizeLegibility;
12
+ }
13
+
14
+ :root {
15
+ --space: 1;
16
+ --vspace: calc(var(--space) * 1rem);
17
+ --vspace-0: calc(3 * var(--space) * 1rem);
18
+ --vspace-1: calc(2 * var(--space) * 1rem);
19
+ --vspace-2: calc(1.5 * var(--space) * 1rem);
20
+ --vspace-3: calc(0.5 * var(--space) * 1rem);
21
+ }
22
+
23
+ .app {
24
+ max-width: 748px !important;
25
+ }
26
+
27
+ .prose p {
28
+ margin: var(--vspace) 0;
29
+ line-height: var(--vspace * 2);
30
+ font-size: 1rem;
31
+ }
32
+
33
+ code {
34
+ font-family: "Inconsolata", sans-serif;
35
+ font-size: 16px;
36
+ }
37
+
38
+ h1,
39
+ h1 code {
40
+ font-weight: 400;
41
+ line-height: calc(2.5 / var(--space) * var(--vspace));
42
+ }
43
+
44
+ h1 code {
45
+ background: none;
46
+ border: none;
47
+ letter-spacing: 0.05em;
48
+ padding-bottom: 5px;
49
+ position: relative;
50
+ padding: 0;
51
+ }
52
+
53
+ h2 {
54
+ margin: var(--vspace-1) 0 var(--vspace-2) 0;
55
+ line-height: 1em;
56
+ }
57
+
58
+ h3,
59
+ h3 code {
60
+ margin: var(--vspace-1) 0 var(--vspace-2) 0;
61
+ line-height: 1em;
62
+ }
63
+
64
+ h4,
65
+ h5,
66
+ h6 {
67
+ margin: var(--vspace-3) 0 var(--vspace-3) 0;
68
+ line-height: var(--vspace);
69
+ }
70
+
71
+ .bigtitle,
72
+ h1,
73
+ h1 code {
74
+ font-size: calc(8px * 4.5);
75
+ word-break: break-word;
76
+ }
77
+
78
+ .title,
79
+ h2,
80
+ h2 code {
81
+ font-size: calc(8px * 3.375);
82
+ font-weight: lighter;
83
+ word-break: break-word;
84
+ border: none;
85
+ background: none;
86
+ }
87
+
88
+ .subheading1,
89
+ h3,
90
+ h3 code {
91
+ font-size: calc(8px * 1.8);
92
+ font-weight: 600;
93
+ border: none;
94
+ background: none;
95
+ letter-spacing: 0.1em;
96
+ text-transform: uppercase;
97
+ }
98
+
99
+ h2 code {
100
+ padding: 0;
101
+ position: relative;
102
+ letter-spacing: 0.05em;
103
+ }
104
+
105
+ blockquote {
106
+ font-size: calc(8px * 1.1667);
107
+ font-style: italic;
108
+ line-height: calc(1.1667 * var(--vspace));
109
+ margin: var(--vspace-2) var(--vspace-2);
110
+ }
111
+
112
+ .subheading2,
113
+ h4 {
114
+ font-size: calc(8px * 1.4292);
115
+ text-transform: uppercase;
116
+ font-weight: 600;
117
+ }
118
+
119
+ .subheading3,
120
+ h5 {
121
+ font-size: calc(8px * 1.2917);
122
+ line-height: calc(1.2917 * var(--vspace));
123
+
124
+ font-weight: lighter;
125
+ text-transform: uppercase;
126
+ letter-spacing: 0.15em;
127
+ }
128
+
129
+ h6 {
130
+ font-size: calc(8px * 1.1667);
131
+ font-size: 1.1667em;
132
+ font-weight: normal;
133
+ font-style: italic;
134
+ font-family: "le-monde-livre-classic-byol", serif !important;
135
+ letter-spacing: 0px !important;
136
+ }
137
+
138
+ #start .md > *:first-child {
139
+ margin-top: 0;
140
+ }
141
+
142
+ h2 + h3 {
143
+ margin-top: 0;
144
+ }
145
+
146
+ .md hr {
147
+ border: none;
148
+ border-top: 1px solid var(--block-border-color);
149
+ margin: var(--vspace-2) 0 var(--vspace-2) 0;
150
+ }
151
+ .prose ul {
152
+ margin: var(--vspace-2) 0 var(--vspace-1) 0;
153
+ }
154
+
155
+ .gap {
156
+ gap: 0;
157
+ }
src/pyproject.toml CHANGED
@@ -36,7 +36,7 @@ classifiers = [
36
  dev = ["build", "twine"]
37
 
38
  [tool.hatch.build]
39
- artifacts = ["/backend/gradio_folium/templates", "*.pyi", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates"]
40
 
41
  [tool.hatch.build.targets.wheel]
42
  packages = ["/backend/gradio_folium"]
 
36
  dev = ["build", "twine"]
37
 
38
  [tool.hatch.build]
39
+ artifacts = ["/backend/gradio_folium/templates", "*.pyi", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates", "backend/gradio_folium/templates"]
40
 
41
  [tool.hatch.build.targets.wheel]
42
  packages = ["/backend/gradio_folium"]