mapa-blend-es

Running

App Files Files Community

ouhenio commited on 29 days ago

Commit

76138e1

verified ·

1 Parent(s): 4886dc4

Update app.py

Browse files

Files changed (1) hide show

app.py +95 -626

app.py CHANGED Viewed

@@ -3,647 +3,116 @@ import random
 import json
 import fastapi
 from fastapi import FastAPI
-# Create a FastAPI app
-app = FastAPI()
-# Sample country data with random progress percentages - using the proper ISO codes
-def generate_data():
-    return {
-        "MEX": {"name": "Mexico", "percent": random.randint(10, 90)},
-        "ARG": {"name": "Argentina", "percent": random.randint(10, 90)},
-        "COL": {"name": "Colombia", "percent": random.randint(10, 90)},
-        "CHL": {"name": "Chile", "percent": random.randint(10, 90)},
-        "PER": {"name": "Peru", "percent": random.randint(10, 90)},
-        "ESP": {"name": "Spain", "percent": random.randint(10, 90)},
-        "BRA": {"name": "Brazil", "percent": random.randint(10, 90)},
-        "VEN": {"name": "Venezuela", "percent": random.randint(10, 90)},
-        "ECU": {"name": "Ecuador", "percent": random.randint(10, 90)},
-        "BOL": {"name": "Bolivia", "percent": random.randint(10, 90)},
-        "PRY": {"name": "Paraguay", "percent": random.randint(10, 90)},
-        "URY": {"name": "Uruguay", "percent": random.randint(10, 90)},
-        "CRI": {"name": "Costa Rica", "percent": random.randint(10, 90)},
-        "PAN": {"name": "Panama", "percent": random.randint(10, 90)},
-        "DOM": {"name": "Dominican Republic", "percent": random.randint(10, 90)},
-        "GTM": {"name": "Guatemala", "percent": random.randint(10, 90)},
-        "HND": {"name": "Honduras", "percent": random.randint(10, 90)},
-        "SLV": {"name": "El Salvador", "percent": random.randint(10, 90)},
-        "NIC": {"name": "Nicaragua", "percent": random.randint(10, 90)},
-        "CUB": {"name": "Cuba", "percent": random.randint(10, 90)}
-    }
-# HTML template - avoiding f-strings with JavaScript template literals
-HTML_TEMPLATE = """
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8">
-    <title>Cartografía de anotación</title>
-    <script src="https://d3js.org/d3.v7.min.js"></script>
-    <style>
-        body {
-            margin: 0;
-            padding: 20px;
-            background-color: #0f1218;
-            color: #fff;
-            font-family: system-ui, -apple-system, sans-serif;
-        }
-        h1 {
-            margin-bottom: 20px;
-        }
-        .container {
-            display: flex;
-            width: 100%;
-        }
-        .map-container {
-            flex: 3;
-            height: 600px;
-            position: relative;
-            background-color: #0f1218;
-        }
-        .stats-container {
-            flex: 1;
-            padding: 20px;
-            background-color: #161b22;
-            border-radius: 8px;
-            margin-right: 20px;
-        }
-        #tooltip {
-            position: absolute;
-            background-color: rgba(0, 0, 0, 0.8);
-            border-radius: 5px;
-            padding: 8px;
-            color: white;
-            font-size: 12px;
-            pointer-events: none;
-            opacity: 0;
-            transition: opacity 0.3s;
-            border: 1px solid rgba(255, 255, 255, 0.2);
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            z-index: 1000;
-        }
-        .country {
-            cursor: pointer;
-            transition: opacity 0.3s;
-        }
-        .country:hover {
-            opacity: 0.8;
-        }
-        .stat-title {
-            font-size: 1.2rem;
-            margin-bottom: 20px;
-            font-weight: bold;
-        }
-        .stat-item {
-            margin-bottom: 10px;
-            color: #abb4c2;
-        }
-        .stat-value {
-            font-weight: bold;
-            color: white;
-        }
-        .stat-bar-container {
-            width: 100%;
-            height: 8px;
-            background-color: #30363d;
-            border-radius: 4px;
-            margin-top: 5px;
-            overflow: hidden;
-        }
-        .stat-bar {
-            height: 100%;
-            background: linear-gradient(to right, #4a1942, #f32b7b);
-            border-radius: 4px;
-        }
-        .top-countries {
-            margin-top: 30px;
-        }
-        .country-stat {
-            display: flex;
-            justify-content: space-between;
-            margin-bottom: 8px;
-            align-items: center;
-            font-size: 14px;
-        }
-        .country-bar {
-            flex: 1;
-            height: 6px;
-            background-color: #30363d;
-            border-radius: 3px;
-            overflow: hidden;
-            margin: 0 10px;
-        }
-        .country-bar-fill {
-            height: 100%;
-            background: linear-gradient(to right, #4a1942, #f32b7b);
-            border-radius: 3px;
-        }
-        .country-value {
-            width: 80px;
-            text-align: right;
-        }
-        .legend {
-            margin-top: 20px;
-        }
-        .footer-note {
-            margin-top: 30px;
-            font-style: italic;
-            font-size: 0.9em;
-            color: #abb4c2;
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="stats-container">
-            <div class="stat-title">Resumen General</div>
-            <div class="stat-item">
-                Países en la base de datos:<br>
-                <span class="stat-value">20</span>
-            </div>
-            <div class="stat-item">
-                Total de documentos:<br>
-                <span class="stat-value" id="total-docs">0</span>
-            </div>
-            <div class="stat-item">
-                Promedio de completitud:<br>
-                <span class="stat-value" id="avg-percent">0%</span>
-            </div>
-            <div class="top-countries">
-                <div class="stat-item">Los 5 países con mayor recolección:</div>
-                <div id="top-countries-list">
-                    <!-- Will be populated by JavaScript -->
-                </div>
-            </div>
-            <div class="footer-note">
-                Selecciona un país en el mapa para ver información detallada.
-            </div>
-        </div>
-        <div class="map-container" id="map-container"></div>
-    </div>
-    <div id="tooltip"></div>
-    <script>
-        // Country data from Python - will be replaced
-        const countryData = COUNTRY_DATA_PLACEHOLDER;
-        document.addEventListener('DOMContentLoaded', function() {
-            console.log('Document loaded, initializing map...');
-            // Set up dimensions
-            const container = document.getElementById('map-container');
-            const width = container.clientWidth;
-            const height = container.clientHeight;
-            console.log('Container dimensions:', width, height);
-            // Create SVG
-            const svg = d3.select('#map-container')
-                .append('svg')
-                .attr('width', width)
-                .attr('height', height);
-            console.log('SVG created');
-            // Create color scale
-            const colorScale = d3.scaleLinear()
-                .domain([0, 100])
-                .range(['#4a1942', '#f32b7b']);
-            // Set up projection with specific focus
-            const projection = d3.geoMercator()
-                .center([-60, -15]) // Centered on South America
-                .scale(width / 3)
-                .translate([width / 2, height / 2]);
-            const path = d3.geoPath().projection(projection);
-            // Tooltip setup
-            const tooltip = d3.select('#tooltip');
-            console.log('Loading GeoJSON data...');
-            // Load GeoJSON data
-            d3.json('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson')
-                .then(function(data) {
-                    console.log('GeoJSON data loaded');
-                    // The relevant country codes
-                    const relevantCountryCodes = Object.keys(countryData);
-                    // Log countries in data
-                    console.log('Countries in countryData:', relevantCountryCodes);
-                    // Log some sample features to check the properties structure
-                    const sampleFeatures = data.features.slice(0, 3);
-                    console.log('Sample feature properties:', sampleFeatures.map(f => f.properties));
-                    // Add ocean background
-                    svg.append('rect')
-                        .attr('width', width)
-                        .attr('height', height)
-                        .attr('fill', '#0f1218');
-                    // Filter the features - check for id match
-                    const relevantFeatures = data.features.filter(d =>
-                        relevantCountryCodes.includes(d.id)
-                    );
-                    console.log('Filtered features count:', relevantFeatures.length);
-                    // If we still don't have matches, look more deeply at the data structure
-                    if (relevantFeatures.length === 0) {
-                        console.log('No matches found using id, checking all feature properties');
-                        // Get the first 10 features to examine their structure
-                        const firstTen = data.features.slice(0, 10);
-                        console.log('First ten features:', firstTen);
-                        // Look for our countries in all features
-                        const latinAmericanFeatures = data.features.filter(f => {
-                            // Check various properties that might contain the country code
-                            return relevantCountryCodes.includes(f.id) ||
-                                   (f.properties && relevantCountryCodes.includes(f.properties.iso_a3)) ||
-                                   (f.properties && relevantCountryCodes.includes(f.properties.name));
-                        });
-                        console.log('Latin American features found:', latinAmericanFeatures.length);
-                        // If there are still no matches, just use all features and filter visually
-                        if (latinAmericanFeatures.length === 0) {
-                            console.log('Still no matches, using all features and hiding non-Latin American countries');
-                            // Draw all countries but only color our target ones
-                            svg.selectAll('.country')
-                                .data(data.features)
-                                .enter()
-                                .append('path')
-                                .attr('class', 'country')
-                                .attr('d', path)
-                                .attr('fill', function(d) {
-                                    // Try to match with id or iso_a3
-                                    if (d.id && countryData[d.id]) {
-                                        return colorScale(countryData[d.id].percent);
-                                    } else if (d.properties && d.properties.iso_a3 && countryData[d.properties.iso_a3]) {
-                                        return colorScale(countryData[d.properties.iso_a3].percent);
-                                    } else if (d.properties && d.properties.name && countryData[d.properties.name]) {
-                                        return colorScale(countryData[d.properties.name].percent);
-                                    } else {
-                                        // Try checking if it's a Latin American country by name
-                                        const latinAmericanCountries = [
-                                            'Mexico', 'Argentina', 'Colombia', 'Chile', 'Peru', 'Spain',
-                                            'Brazil', 'Venezuela', 'Ecuador', 'Bolivia', 'Paraguay',
-                                            'Uruguay', 'Costa Rica', 'Panama', 'Dominican Republic',
-                                            'Guatemala', 'Honduras', 'El Salvador', 'Nicaragua', 'Cuba'
-                                        ];
-                                        if (d.properties && latinAmericanCountries.includes(d.properties.name)) {
-                                            // Find the matching country in our data
-                                            for (const code in countryData) {
-                                                if (countryData[code].name === d.properties.name) {
-                                                    return colorScale(countryData[code].percent);
-                                                }
-                                            }
-                                        }
-                                        // If not a target country, make it transparent
-                                        return 'transparent';
-                                    }
-                                })
-                                .attr('stroke', function(d) {
-                                    // Only show outlines for Latin American countries
-                                    const latinAmericanCountries = [
-                                        'Mexico', 'Argentina', 'Colombia', 'Chile', 'Peru', 'Spain',
-                                        'Brazil', 'Venezuela', 'Ecuador', 'Bolivia', 'Paraguay',
-                                        'Uruguay', 'Costa Rica', 'Panama', 'Dominican Republic',
-                                        'Guatemala', 'Honduras', 'El Salvador', 'Nicaragua', 'Cuba'
-                                    ];
-                                    if (d.properties && latinAmericanCountries.includes(d.properties.name)) {
-                                        return '#0f1218';
-                                    } else {
-                                        return 'transparent';
-                                    }
-                                })
-                                .attr('stroke-width', 1)
-                                .on('mouseover', function(event, d) {
-                                    // Only enable hover for target countries
-                                    if (d.id && countryData[d.id]) {
-                                        const iso = d.id;
-                                        showTooltip(event, iso);
-                                    } else if (d.properties && d.properties.iso_a3 && countryData[d.properties.iso_a3]) {
-                                        const iso = d.properties.iso_a3;
-                                        showTooltip(event, iso);
-                                    } else if (d.properties && d.properties.name) {
-                                        // Find the matching country in our data by name
-                                        for (const code in countryData) {
-                                            if (countryData[code].name === d.properties.name) {
-                                                showTooltip(event, code);
-                                                break;
-                                            }
-                                        }
-                                    }
-                                })
-                                .on('mousemove', function(event) {
-                                    tooltip.style('left', (event.pageX + 15) + 'px')
-                                        .style('top', (event.pageY + 15) + 'px');
-                                })
-                                .on('mouseout', function() {
-                                    d3.select(this)
-                                        .attr('stroke', function(d) {
-                                            const latinAmericanCountries = [
-                                                'Mexico', 'Argentina', 'Colombia', 'Chile', 'Peru', 'Spain',
-                                                'Brazil', 'Venezuela', 'Ecuador', 'Bolivia', 'Paraguay',
-                                                'Uruguay', 'Costa Rica', 'Panama', 'Dominican Republic',
-                                                'Guatemala', 'Honduras', 'El Salvador', 'Nicaragua', 'Cuba'
-                                            ];
-                                            if (d.properties && latinAmericanCountries.includes(d.properties.name)) {
-                                                return '#0f1218';
-                                            } else {
-                                                return 'transparent';
-                                            }
-                                        })
-                                        .attr('stroke-width', 1);
-                                    tooltip.style('opacity', 0);
-                                });
-                        } else {
-                            // Draw only the Latin American features
-                            svg.selectAll('.country')
-                                .data(latinAmericanFeatures)
-                                .enter()
-                                .append('path')
-                                .attr('class', 'country')
-                                .attr('d', path)
-                                .attr('fill', function(d) {
-                                    if (d.id && countryData[d.id]) {
-                                        return colorScale(countryData[d.id].percent);
-                                    } else if (d.properties && d.properties.iso_a3 && countryData[d.properties.iso_a3]) {
-                                        return colorScale(countryData[d.properties.iso_a3].percent);
-                                    } else {
-                                        return colorScale(50); // Default to mid-range if no match
-                                    }
-                                })
-                                .attr('stroke', '#0f1218')
-                                .attr('stroke-width', 1)
-                                .on('mouseover', function(event, d) {
-                                    if (d.id && countryData[d.id]) {
-                                        const iso = d.id;
-                                        showTooltip(event, iso);
-                                    } else if (d.properties && d.properties.iso_a3 && countryData[d.properties.iso_a3]) {
-                                        const iso = d.properties.iso_a3;
-                                        showTooltip(event, iso);
-                                    }
-                                })
-                                .on('mousemove', function(event) {
-                                    tooltip.style('left', (event.pageX + 15) + 'px')
-                                        .style('top', (event.pageY + 15) + 'px');
-                                })
-                                .on('mouseout', function() {
-                                    d3.select(this)
-                                        .attr('stroke', '#0f1218')
-                                        .attr('stroke-width', 1);
-                                    tooltip.style('opacity', 0);
-                                });
-                        }
-                    } else {
-                        // Draw only our target countries
-                        svg.selectAll('.country')
-                            .data(relevantFeatures)
-                            .enter()
-                            .append('path')
-                            .attr('class', 'country')
-                            .attr('d', path)
-                            .attr('fill', function(d) {
-                                const iso = d.id;
-                                return colorScale(countryData[iso].percent);
-                            })
-                            .attr('stroke', '#0f1218')
-                            .attr('stroke-width', 1)
-                            .on('mouseover', function(event, d) {
-                                const iso = d.id;
-                                showTooltip(event, iso);
-                            })
-                            .on('mousemove', function(event) {
-                                tooltip.style('left', (event.pageX + 15) + 'px')
-                                    .style('top', (event.pageY + 15) + 'px');
-                            })
-                            .on('mouseout', function() {
-                                d3.select(this)
-                                    .attr('stroke', '#0f1218')
-                                    .attr('stroke-width', 1);
-                                tooltip.style('opacity', 0);
-                            });
-                    }
-                    // Function to show tooltip
-                    function showTooltip(event, iso) {
-                        d3.select(event.currentTarget)
-                            .attr('stroke', '#fff')
-                            .attr('stroke-width', 1.5);
-                        tooltip.style('opacity', 1)
-                            .style('left', (event.pageX + 15) + 'px')
-                            .style('top', (event.pageY + 15) + 'px')
-                            .html('<strong>' + countryData[iso].name + '</strong><br/>' +
-                                'Progress: ' + countryData[iso].percent + '%');
-                    }
-                    // Add a legend on the right side of the map
-                    const legendWidth = 200;
-                    const legendHeight = 15;
-                    const legendX = width - legendWidth - 20;
-                    const legendY = 20;
-                    // Create legend group
-                    const legend = svg.append('g')
-                        .attr('transform', 'translate(' + legendX + ',' + legendY + ')');
-                    // Legend title
-                    legend.append('text')
-                        .attr('x', legendWidth / 2)
-                        .attr('y', -5)
-                        .attr('text-anchor', 'middle')
-                        .style('fill', '#fff')
-                        .style('font-size', '12px')
-                        .text('Porcentaje de Datos Recolectado');
-                    // Create gradient for legend
-                    const defs = svg.append('defs');
-                    const gradient = defs.append('linearGradient')
-                        .attr('id', 'legendGradient')
-                        .attr('x1', '0%')
-                        .attr('x2', '100%')
-                        .attr('y1', '0%')
-                        .attr('y2', '0%');
-                    gradient.append('stop')
-                        .attr('offset', '0%')
-                        .attr('stop-color', '#4a1942');
-                    gradient.append('stop')
-                        .attr('offset', '100%')
-                        .attr('stop-color', '#f32b7b');
-                    // Add legend rectangle
-                    legend.append('rect')
-                        .attr('width', legendWidth)
-                        .attr('height', legendHeight)
-                        .style('fill', 'url(#legendGradient)')
-                        .style('stroke', 'none');
-                    // Add min and max labels
-                    legend.append('text')
-                        .attr('x', 0)
-                        .attr('y', legendHeight + 15)
-                        .attr('text-anchor', 'start')
-                        .style('fill', '#fff')
-                        .style('font-size', '12px')
-                        .text('0%');
-                    legend.append('text')
-                        .attr('x', legendWidth / 2)
-                        .attr('y', legendHeight + 15)
-                        .attr('text-anchor', 'middle')
-                        .style('fill', '#fff')
-                        .style('font-size', '12px')
-                        .text('50%');
-                    legend.append('text')
-                        .attr('x', legendWidth)
-                        .attr('y', legendHeight + 15)
-                        .attr('text-anchor', 'end')
-                        .style('fill', '#fff')
-                        .style('font-size', '12px')
-                        .text('100%');
-                    // Update statistics
-                    updateStatistics();
-                })
-                .catch(function(error) {
-                    console.error('Error loading or rendering the map:', error);
-                    container.innerHTML = '<div style="color: white; text-align: center; padding: 20px;">Error loading map: ' + error.message + '</div>';
-                });
-            // Function to update statistics
-            function updateStatistics() {
-                console.log('Updating statistics');
-                // Add random document counts to countries that don't have them
-                Object.keys(countryData).forEach(code => {
-                    if (!countryData[code].documents) {
-                        countryData[code].documents = Math.floor(Math.random() * 300000) + 300000;
-                    }
-                });
-                // Calculate total documents
-                const totalDocs = Object.values(countryData).reduce((sum, country) => {
-                    return sum + (country.documents || 0);
-                }, 0);
-                // Calculate average percentage
-                const avgPercent = Object.values(countryData).reduce((sum, country) => {
-                    return sum + country.percent;
-                }, 0) / Object.values(countryData).length;
-                // Update the stats
-                document.getElementById('total-docs').textContent = totalDocs.toLocaleString();
-                document.getElementById('avg-percent').textContent = avgPercent.toFixed(1) + '%';
-                // Create an array of countries with document counts
-                const countriesWithDocs = Object.keys(countryData).map(code => {
-                    return {
-                        code: code,
-                        name: countryData[code].name,
-                        percent: countryData[code].percent,
-                        documents: countryData[code].documents
-                    };
-                });
-                // Sort by document count descending
-                countriesWithDocs.sort((a, b) => b.documents - a.documents);
-                // Take the top 5
-                const topCountries = countriesWithDocs.slice(0, 5);
-                // Update the top countries list
-                const topCountriesList = document.getElementById('top-countries-list');
-                topCountriesList.innerHTML = '';
-                topCountries.forEach(country => {
-                    const countryDiv = document.createElement('div');
-                    countryDiv.className = 'country-stat';
-                    countryDiv.innerHTML = `
-                        <span>${country.name}</span>
-                        <div class="country-bar">
-                            <div class="country-bar-fill" style="width: ${country.percent}%;"></div>
-                        </div>
-                        <span class="country-value">${country.documents.toLocaleString()}</span>
-                    `;
-                    topCountriesList.appendChild(countryDiv);
-                });
-                console.log('Statistics updated');
-            }
-            // Handle window resize
-            window.addEventListener('resize', function() {
-                console.log('Window resized');
-                const width = container.clientWidth;
-                const height = container.clientHeight;
-                // Update SVG dimensions
-                d3.select('svg')
-                    .attr('width', width)
-                    .attr('height', height);
-                // Update projection
-                projection.scale(width / 3)
-                    .translate([width / 2, height / 2]);
-                // Update paths
-                d3.selectAll('path').attr('d', path);
-                // Update legend position
-                const legendX = width - 220;
-                d3.select('.legend')
-                    .attr('transform', 'translate(' + legendX + ',20)');
-            });
-        });
-    </script>
-</body>
-</html>
-"""
 # Route to serve the map visualization
 @app.get("/d3-map")
 async def serve_map():
-    # Generate random data for each country with document counts
-    country_data = generate_data()
-    # Add random document counts
-    for code in country_data:
-        country_data[code]["documents"] = random.randint(300000, 700000)
     # Convert to JSON for JavaScript
     country_data_json = json.dumps(country_data)
     # Replace the placeholder with actual data
-    html_content = HTML_TEMPLATE.replace("COUNTRY_DATA_PLACEHOLDER", country_data_json)
     return fastapi.responses.HTMLResponse(content=html_content)
@@ -663,7 +132,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue="pink", secondary_hue="purple"))
     def refresh():
         return create_iframe()
-    gr.Button("Generate New Data").click(fn=refresh, outputs=iframe_output)
 # Mount the Gradio app to the FastAPI app
 gr.mount_gradio_app(app, demo, path="/")

 import json
 import fastapi
 from fastapi import FastAPI
+import os
+import argilla as rg
+# Initialize Argilla client
+client = rg.Argilla(
+    api_url=os.getenv("ARGILLA_API_URL", ""),
+    api_key=os.getenv("ARGILLA_API_KEY", "")
+)
+# List of countries to check
+COUNTRIES = [
+    "MEX", "ARG", "COL", "CHL", "PER", "ESP", "BRA",
+    "VEN", "ECU", "BOL", "PRY", "URY", "CRI", "PAN",
+    "DOM", "GTM", "HND", "SLV", "NIC", "CUB"
+]
+def count_answers_per_space(country: str):
+    """
+    Count the number of answers for a specific country's answering space.
+    Args:
+        country: Country code (e.g., "CHL")
+    Returns:
+        Dictionary with statistics about answers in the space
+    """
+    # Convert country code to full country name
+    country_mapping = {
+        "MEX": "Mexico", "ARG": "Argentina", "COL": "Colombia",
+        "CHL": "Chile", "PER": "Peru", "ESP": "Spain",
+        "BRA": "Brazil", "VEN": "Venezuela", "ECU": "Ecuador",
+        "BOL": "Bolivia", "PRY": "Paraguay", "URY": "Uruguay",
+        "CRI": "Costa Rica", "PAN": "Panama", "DOM": "Dominican Republic",
+        "GTM": "Guatemala", "HND": "Honduras", "SLV": "El Salvador",
+        "NIC": "Nicaragua", "CUB": "Cuba"
+    }
+    full_country_name = country_mapping.get(country, country)
+    dataset_name = f"{full_country_name}_responder_preguntas"
+    try:
+        dataset = client.datasets(dataset_name)
+        # Get all records with their responses
+        records = dataset.records(with_responses=True)
+        # Count total questions
+        total_questions = len(list(records))
+        # Count answered questions
+        answered_questions = 0
+        total_answers = 0
+        answers_per_user = {}
+        for record in records:
+            responses = record.responses.get("text", [])
+            if responses:
+                answered_questions += 1
+                total_answers += len(responses)
+                # Count per user
+                for response in responses:
+                    user_id = str(response.user_id)
+                    if user_id in answers_per_user:
+                        answers_per_user[user_id] += 1
+                    else:
+                        answers_per_user[user_id] = 1
+        percentage_complete = (answered_questions / total_questions * 100) if total_questions > 0 else 0
+        return {
+            "name": full_country_name,
+            "total_questions": total_questions,
+            "answered_questions": answered_questions,
+            "total_answers": total_answers,
+            "percent": round(percentage_complete, 2),
+            "documents": total_answers * 10  # Approximation of document count
+        }
+    except Exception as e:
+        # If space doesn't exist, return zero values
+        print(f"No dataset found for {dataset_name}: {e}")
+        return {
+            "name": full_country_name,
+            "total_questions": 0,
+            "answered_questions": 0,
+            "total_answers": 0,
+            "percent": 0,
+            "documents": 0
+        }
+# Create a FastAPI app
+app = FastAPI()
 # Route to serve the map visualization
 @app.get("/d3-map")
 async def serve_map():
+    # Generate data for each country by querying Argilla
+    country_data = {}
+    for country_code in COUNTRIES:
+        country_data[country_code] = count_answers_per_space(country_code)
     # Convert to JSON for JavaScript
     country_data_json = json.dumps(country_data)
     # Replace the placeholder with actual data
+    with open('template.txt', 'r') as f:
+        html_template = f.read()
+    html_content = html_template.replace("COUNTRY_DATA_PLACEHOLDER", country_data_json)
     return fastapi.responses.HTMLResponse(content=html_content)
     def refresh():
         return create_iframe()
+    gr.Button("Actualizar Datos").click(fn=refresh, outputs=iframe_output)
 # Mount the Gradio app to the FastAPI app
 gr.mount_gradio_app(app, demo, path="/")