Hugging Face's logo

Spaces:
somosnlp
/
mapa-blend-es
Running

App Files Community
ouhenio commited on
Commit
e8a8241
·
verified ·
1 Parent(s): ddd101e

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +70 -252
app.py CHANGED
@@ -1,270 +1,84 @@
1
  import gradio as gr
2
- import json
3
- import random
4
  import os
5
 
6
- # Sample country data with random progress percentages
7
- COUNTRY_DATA = {
8
- "MX": {"name": "Mexico", "percent": random.randint(10, 90)},
9
- "AR": {"name": "Argentina", "percent": random.randint(10, 90)},
10
- "CO": {"name": "Colombia", "percent": random.randint(10, 90)},
11
- "CL": {"name": "Chile", "percent": random.randint(10, 90)},
12
- "PE": {"name": "Peru", "percent": random.randint(10, 90)},
13
- "ES": {"name": "Spain", "percent": random.randint(10, 90)},
14
- "BR": {"name": "Brazil", "percent": random.randint(10, 90)},
15
- "VE": {"name": "Venezuela", "percent": random.randint(10, 90)},
16
- "EC": {"name": "Ecuador", "percent": random.randint(10, 90)},
17
- "BO": {"name": "Bolivia", "percent": random.randint(10, 90)},
18
- "PY": {"name": "Paraguay", "percent": random.randint(10, 90)},
19
- "UY": {"name": "Uruguay", "percent": random.randint(10, 90)},
20
- "CR": {"name": "Costa Rica", "percent": random.randint(10, 90)},
21
- "PA": {"name": "Panama", "percent": random.randint(10, 90)}
22
- }
23
-
24
- # Create an iframe that will display our map
25
- def create_iframe():
26
- return """
27
- <iframe id="map-iframe" src="/map" style="width:100%; height:600px; border:none;"></iframe>
28
- """
29
-
30
- # Create a new random dataset
31
- def generate_random_data():
32
- global COUNTRY_DATA
33
-
34
- # Create new random percentages
35
- COUNTRY_DATA = {
36
- code: {"name": data["name"], "percent": random.randint(10, 90)}
37
- for code, data in COUNTRY_DATA.items()
38
- }
39
-
40
- # Refresh the iframe by changing the src with a timestamp
41
- timestamp = random.randint(1, 1000000)
42
- return f"""
43
- <iframe id="map-iframe" src="/map?t={timestamp}" style="width:100%; height:600px; border:none;"></iframe>
44
- """
45
-
46
- # Create the FastAPI application for Gradio
47
  app = gr.routes.App()
48
 
49
- # Create a route to serve the map HTML
50
- @app.get("/map")
51
- def serve_map():
52
- # Create a standalone HTML file for the map
53
- html_content = f"""
54
  <!DOCTYPE html>
55
  <html>
56
  <head>
57
  <meta charset="utf-8">
58
- <title>Latin America Map</title>
59
  <script src="https://d3js.org/d3.v7.min.js"></script>
60
  <style>
61
- body {{
62
- margin: 0;
63
- padding: 0;
64
- background-color: #111;
65
- color: white;
66
  font-family: sans-serif;
67
- }}
68
- #map-container {{
69
- width: 100%;
70
- height: 600px;
71
- position: relative;
72
- }}
73
- #tooltip {{
74
- position: absolute;
75
- background-color: rgba(0,0,0,0.8);
76
  border-radius: 5px;
77
- padding: 8px;
78
- color: white;
79
- font-size: 12px;
80
- pointer-events: none;
81
- opacity: 0;
82
- transition: opacity 0.3s;
83
- }}
 
 
 
 
84
  </style>
85
  </head>
86
  <body>
87
- <div id="map-container"></div>
88
- <div id="tooltip"></div>
89
 
90
  <script>
91
- // Country data
92
- const countryData = {json.dumps(COUNTRY_DATA)};
93
-
94
- // Set up
95
- document.addEventListener('DOMContentLoaded', function() {{
96
- // Get container dimensions
97
- const container = document.getElementById('map-container');
98
- const width = container.clientWidth;
99
- const height = container.clientHeight || 600;
100
-
101
- // Create SVG
102
- const svg = d3.select('#map-container')
103
- .append('svg')
104
- .attr('width', width)
105
- .attr('height', height)
106
- .attr('viewBox', `0 0 ${{width}} ${{height}}`);
107
-
108
- // Create color scale
109
- const colorScale = d3.scaleLinear()
110
- .domain([0, 100])
111
- .range(['#4a1942', '#f32b7b']);
112
-
113
- // Set up projection focused on Latin America
114
- const projection = d3.geoMercator()
115
- .center([-60, 0])
116
- .scale(width / 5)
117
- .translate([width / 2, height / 2]);
118
-
119
- const path = d3.geoPath().projection(projection);
120
 
121
- // Tooltip setup
122
- const tooltip = d3.select('#tooltip');
123
-
124
- // Load GeoJSON data
125
- d3.json('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson')
126
- .then(function(data) {{
127
- // Draw countries
128
- svg.selectAll('path')
129
- .data(data.features)
130
- .enter()
131
- .append('path')
132
- .attr('d', path)
133
- .attr('stroke', '#f32b7b')
134
- .attr('stroke-width', 1)
135
- .attr('fill', d => {{
136
- // Get the ISO code from the properties
137
- const iso = d.properties.iso_a2;
138
-
139
- if (countryData[iso]) {{
140
- return colorScale(countryData[iso].percent);
141
- }}
142
- return '#2d3748'; // Default gray for other countries
143
- }})
144
- .on('mouseover', function(event, d) {{
145
- const iso = d.properties.iso_a2;
146
-
147
- d3.select(this)
148
- .attr('stroke', '#4a1942')
149
- .attr('stroke-width', 2);
150
-
151
- if (countryData[iso]) {{
152
- tooltip.style('opacity', 1)
153
- .style('left', (event.pageX + 15) + 'px')
154
- .style('top', (event.pageY + 15) + 'px')
155
- .html(`
156
- <strong>${{countryData[iso].name}}</strong><br/>
157
- Progress: ${{countryData[iso].percent}}%
158
- `);
159
- }}
160
- }})
161
- .on('mousemove', function(event) {{
162
- tooltip.style('left', (event.pageX + 15) + 'px')
163
- .style('top', (event.pageY + 15) + 'px');
164
- }})
165
- .on('mouseout', function() {{
166
- d3.select(this)
167
- .attr('stroke', '#f32b7b')
168
- .attr('stroke-width', 1);
169
-
170
- tooltip.style('opacity', 0);
171
- }});
172
-
173
- // Add a legend
174
- const legendWidth = Math.min(width - 40, 200);
175
- const legendHeight = 15;
176
- const legendX = width - legendWidth - 20;
177
-
178
- const legend = svg.append('g')
179
- .attr('transform', `translate(${{legendX}}, 30)`);
180
 
181
- // Create gradient for legend
182
- const defs = svg.append('defs');
183
- const gradient = defs.append('linearGradient')
184
- .attr('id', 'dataGradient')
185
- .attr('x1', '0%')
186
- .attr('y1', '0%')
187
- .attr('x2', '100%')
188
- .attr('y2', '0%');
189
-
190
- gradient.append('stop')
191
- .attr('offset', '0%')
192
- .attr('stop-color', '#4a1942');
193
-
194
- gradient.append('stop')
195
- .attr('offset', '100%')
196
- .attr('stop-color', '#f32b7b');
197
-
198
- // Add legend title
199
- legend.append('text')
200
- .attr('x', legendWidth / 2)
201
- .attr('y', -10)
202
- .attr('text-anchor', 'middle')
203
- .attr('font-size', '12px')
204
- .attr('fill', '#f1f5f9')
205
- .text('Progress');
206
-
207
- // Add legend rectangle
208
- legend.append('rect')
209
- .attr('width', legendWidth)
210
- .attr('height', legendHeight)
211
- .attr('rx', 2)
212
- .attr('ry', 2)
213
- .style('fill', 'url(#dataGradient)');
214
-
215
- // Add legend labels
216
- legend.append('text')
217
- .attr('x', 0)
218
- .attr('y', legendHeight + 15)
219
- .attr('text-anchor', 'start')
220
- .attr('font-size', '10px')
221
- .attr('fill', '#94a3b8')
222
- .text('0%');
223
-
224
- legend.append('text')
225
- .attr('x', legendWidth / 2)
226
- .attr('y', legendHeight + 15)
227
  .attr('text-anchor', 'middle')
228
- .attr('font-size', '10px')
229
- .attr('fill', '#94a3b8')
230
- .text('50%');
231
-
232
- legend.append('text')
233
- .attr('x', legendWidth)
234
- .attr('y', legendHeight + 15)
235
- .attr('text-anchor', 'end')
236
- .attr('font-size', '10px')
237
- .attr('fill', '#94a3b8')
238
- .text('100%');
239
- })
240
- .catch(function(error) {{
241
- console.error('Error loading or rendering the map:', error);
242
- container.innerHTML = `<div style="color: white; text-align: center;">Error loading map: ${{error.message}}</div>`;
243
- }});
244
-
245
- // Handle window resize
246
- window.addEventListener('resize', function() {{
247
- const width = container.clientWidth;
248
-
249
- // Update SVG dimensions
250
- d3.select('svg')
251
- .attr('width', width)
252
- .attr('viewBox', `0 0 ${{width}} ${{height}}`);
253
-
254
- // Update projection
255
- projection.scale(width / 5)
256
- .translate([width / 2, height / 2]);
257
-
258
- // Update paths
259
- d3.selectAll('path').attr('d', path);
260
-
261
- // Update legend position
262
- const legendWidth = Math.min(width - 40, 200);
263
- const legendX = width - legendWidth - 20;
264
-
265
- d3.select('g').attr('transform', `translate(${{legendX}}, 30)`);
266
- }});
267
- }});
268
  </script>
269
  </body>
270
  </html>
@@ -273,14 +87,18 @@ def serve_map():
273
  return gr.routes.Response(content=html_content, media_type="text/html")
274
 
275
  # Create a simple Gradio interface
276
- with gr.Blocks(theme=gr.themes.Soft(primary_hue="pink", secondary_hue="purple"), css="#map-iframe{min-height:600px;}") as demo:
277
- gr.Markdown("# Latin America & Spain Map")
 
 
 
278
 
279
- # Create an iframe to show the map
280
- map_display = gr.HTML(create_iframe())
 
 
281
 
282
- # Button to generate new random data
283
- gr.Button("Generate New Random Data").click(fn=generate_random_data, outputs=map_display)
284
 
285
  # Launch the app
286
  if __name__ == "__main__":
 
1
  import gradio as gr
 
 
2
  import os
3
 
4
+ # Create a route to serve a simple test page
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
5
  app = gr.routes.App()
6
 
7
+ @app.get("/d3-test")
8
+ def serve_test_page():
9
+ html_content = """
 
 
10
  <!DOCTYPE html>
11
  <html>
12
  <head>
13
  <meta charset="utf-8">
14
+ <title>D3.js Load Test</title>
15
  <script src="https://d3js.org/d3.v7.min.js"></script>
16
  <style>
17
+ body {
 
 
 
 
18
  font-family: sans-serif;
19
+ padding: 20px;
20
+ background-color: #f5f5f5;
21
+ }
22
+ #status {
23
+ margin-top: 20px;
24
+ padding: 15px;
 
 
 
25
  border-radius: 5px;
26
+ }
27
+ .success {
28
+ background-color: #d4edda;
29
+ color: #155724;
30
+ border: 1px solid #c3e6cb;
31
+ }
32
+ .error {
33
+ background-color: #f8d7da;
34
+ color: #721c24;
35
+ border: 1px solid #f5c6cb;
36
+ }
37
  </style>
38
  </head>
39
  <body>
40
+ <h1>D3.js Load Test</h1>
41
+ <div id="status">Checking if D3.js is loaded...</div>
42
 
43
  <script>
44
+ document.addEventListener('DOMContentLoaded', function() {
45
+ const statusDiv = document.getElementById('status');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
 
47
+ try {
48
+ // Check if d3 is defined
49
+ if (typeof d3 !== 'undefined') {
50
+ statusDiv.textContent = `D3.js successfully loaded! (Version: ${d3.version})`;
51
+ statusDiv.className = 'success';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
52
 
53
+ // Create a simple SVG to verify D3 functions work
54
+ const svg = d3.select('body')
55
+ .append('svg')
56
+ .attr('width', 200)
57
+ .attr('height', 100);
58
+
59
+ svg.append('circle')
60
+ .attr('cx', 50)
61
+ .attr('cy', 50)
62
+ .attr('r', 40)
63
+ .style('fill', 'steelblue');
64
+
65
+ svg.append('text')
66
+ .attr('x', 50)
67
+ .attr('y', 50)
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
68
  .attr('text-anchor', 'middle')
69
+ .attr('dominant-baseline', 'middle')
70
+ .text('D3')
71
+ .style('fill', 'white');
72
+ } else {
73
+ statusDiv.textContent = 'Error: D3.js is not loaded';
74
+ statusDiv.className = 'error';
75
+ }
76
+ } catch (error) {
77
+ statusDiv.textContent = `Error: ${error.message}`;
78
+ statusDiv.className = 'error';
79
+ console.error('D3 test error:', error);
80
+ }
81
+ });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
82
  </script>
83
  </body>
84
  </html>
 
87
  return gr.routes.Response(content=html_content, media_type="text/html")
88
 
89
  # Create a simple Gradio interface
90
+ with gr.Blocks() as demo:
91
+ gr.Markdown("# D3.js Load Test")
92
+
93
+ # Create an iframe to the test page
94
+ gr.HTML('<iframe src="/d3-test" style="width:100%; height:300px; border:none;"></iframe>')
95
 
96
+ # Add a refresh button
97
+ def refresh():
98
+ timestamp = os.urandom(4).hex()
99
+ return f'<iframe src="/d3-test?t={timestamp}" style="width:100%; height:300px; border:none;"></iframe>'
100
 
101
+ gr.Button("Refresh Test").click(fn=refresh, outputs=gr.HTML())
 
102
 
103
  # Launch the app
104
  if __name__ == "__main__":