mapa-blend-es

Running

App Files Files Community

ouhenio commited on 29 days ago

Commit

db58fdb

verified ·

1 Parent(s): dcf465d

Update app.py

Browse files

Files changed (1) hide show

app.py +136 -68

app.py CHANGED Viewed

@@ -6,82 +6,149 @@ from fastapi import FastAPI
 # Create a FastAPI app
 app = FastAPI()
-# Route to serve a simple D3.js test page
-@app.get("/d3-test")
-async def serve_test_page():
-    html_content = """
     <!DOCTYPE html>
     <html>
     <head>
         <meta charset="utf-8">
-        <title>D3.js Load Test</title>
         <script src="https://d3js.org/d3.v7.min.js"></script>
         <style>
-            body {
                 font-family: sans-serif;
                 padding: 20px;
-                background-color: #f5f5f5;
-            }
-            #status {
-                margin-top: 20px;
-                padding: 15px;
-                border-radius: 5px;
-            }
-            .success {
-                background-color: #d4edda;
-                color: #155724;
-                border: 1px solid #c3e6cb;
-            }
-            .error {
-                background-color: #f8d7da;
-                color: #721c24;
-                border: 1px solid #f5c6cb;
-            }
         </style>
     </head>
     <body>
-        <h1>D3.js Load Test</h1>
-        <div id="status">Checking if D3.js is loaded...</div>
         <script>
-            document.addEventListener('DOMContentLoaded', function() {
-                const statusDiv = document.getElementById('status');
-                try {
-                    // Check if d3 is defined
-                    if (typeof d3 !== 'undefined') {
-                        statusDiv.textContent = 'D3.js successfully loaded! (Version: ' + d3.version + ')';
-                        statusDiv.className = 'success';
-                        // Create a simple SVG to verify D3 functions work
-                        const svg = d3.select('body')
-                            .append('svg')
-                            .attr('width', 200)
-                            .attr('height', 100);
-                        svg.append('circle')
-                            .attr('cx', 50)
-                            .attr('cy', 50)
-                            .attr('r', 40)
-                            .style('fill', 'steelblue');
-                        svg.append('text')
-                            .attr('x', 50)
-                            .attr('y', 50)
-                            .attr('text-anchor', 'middle')
-                            .attr('dominant-baseline', 'middle')
-                            .text('D3')
-                            .style('fill', 'white');
-                    } else {
-                        statusDiv.textContent = 'Error: D3.js is not loaded';
-                        statusDiv.className = 'error';
-                    }
-                } catch (error) {
-                    statusDiv.textContent = 'Error: ' + error.message;
-                    statusDiv.className = 'error';
-                    console.error('D3 test error:', error);
-                }
-            });
         </script>
     </body>
     </html>
@@ -89,22 +156,23 @@ async def serve_test_page():
     return fastapi.responses.HTMLResponse(content=html_content)
-# Create a simple Gradio interface with an iframe
 def create_iframe():
     # Add a random parameter to force reload
     random_param = random.randint(1, 10000)
-    return f'<iframe src="/d3-test?t={random_param}" style="width:100%; height:300px; border:none;"></iframe>'
 # Create the Gradio blocks
-with gr.Blocks() as demo:
-    gr.Markdown("# D3.js Load Test")
     iframe_output = gr.HTML(create_iframe())
-    # Refresh button
     def refresh():
         return create_iframe()
-    gr.Button("Refresh Test").click(fn=refresh, outputs=iframe_output)
 # Mount the Gradio app to the FastAPI app
 gr.mount_gradio_app(app, demo, path="/")

 # Create a FastAPI app
 app = FastAPI()
+# Sample data for the plot
+def generate_data():
+    return [
+        {"name": "Argentina", "value": random.randint(10, 90)},
+        {"name": "Brazil", "value": random.randint(10, 90)},
+        {"name": "Chile", "value": random.randint(10, 90)},
+        {"name": "Colombia", "value": random.randint(10, 90)},
+        {"name": "Mexico", "value": random.randint(10, 90)},
+        {"name": "Peru", "value": random.randint(10, 90)},
+        {"name": "Spain", "value": random.randint(10, 90)},
+        {"name": "Venezuela", "value": random.randint(10, 90)}
+    ]
+# Route to serve a D3.js bar chart
+@app.get("/d3-plot")
+async def serve_plot():
+    # Generate random data for the plot
+    data = generate_data()
+    # Convert the data to a JavaScript string
+    data_str = str(data).replace("'", '"')
+    html_content = f"""
     <!DOCTYPE html>
     <html>
     <head>
         <meta charset="utf-8">
+        <title>D3.js Simple Plot</title>
         <script src="https://d3js.org/d3.v7.min.js"></script>
         <style>
+            body {{
                 font-family: sans-serif;
                 padding: 20px;
+                background-color: #111;
+                color: #fff;
+            }}
+            .bar {{
+                fill: #f32b7b;
+                transition: fill 0.3s;
+            }}
+            .bar:hover {{
+                fill: #4a1942;
+            }}
+            .axis text {{
+                fill: #ccc;
+            }}
+            .axis path,
+            .axis line {{
+                stroke: #666;
+            }}
+            .axis-title {{
+                fill: #fff;
+                font-size: 12px;
+            }}
         </style>
     </head>
     <body>
+        <h1>Latin America & Spain Progress</h1>
+        <div id="chart"></div>
         <script>
+            // The data from Python
+            const data = {data_str};
+            document.addEventListener('DOMContentLoaded', function() {{
+                // Set up dimensions
+                const margin = {{top: 30, right: 30, bottom: 70, left: 60}};
+                const width = 800 - margin.left - margin.right;
+                const height = 400 - margin.top - margin.bottom;
+                // Create SVG
+                const svg = d3.select("#chart")
+                    .append("svg")
+                    .attr("width", width + margin.left + margin.right)
+                    .attr("height", height + margin.top + margin.bottom)
+                    .append("g")
+                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+                // X axis
+                const x = d3.scaleBand()
+                    .range([0, width])
+                    .domain(data.map(function(d) {{ return d.name; }}))
+                    .padding(0.2);
+                svg.append("g")
+                    .attr("class", "axis")
+                    .attr("transform", "translate(0," + height + ")")
+                    .call(d3.axisBottom(x))
+                    .selectAll("text")
+                    .attr("transform", "translate(-10,0)rotate(-45)")
+                    .style("text-anchor", "end");
+                // Add X axis title
+                svg.append("text")
+                    .attr("class", "axis-title")
+                    .attr("text-anchor", "middle")
+                    .attr("x", width / 2)
+                    .attr("y", height + margin.bottom - 5)
+                    .text("Country");
+                // Y axis
+                const y = d3.scaleLinear()
+                    .domain([0, 100])
+                    .range([height, 0]);
+                svg.append("g")
+                    .attr("class", "axis")
+                    .call(d3.axisLeft(y));
+                // Add Y axis title
+                svg.append("text")
+                    .attr("class", "axis-title")
+                    .attr("text-anchor", "middle")
+                    .attr("transform", "rotate(-90)")
+                    .attr("x", -height / 2)
+                    .attr("y", -margin.left + 15)
+                    .text("Progress (%)");
+                // Bars
+                svg.selectAll("rect")
+                    .data(data)
+                    .enter()
+                    .append("rect")
+                    .attr("class", "bar")
+                    .attr("x", function(d) {{ return x(d.name); }})
+                    .attr("y", function(d) {{ return y(d.value); }})
+                    .attr("width", x.bandwidth())
+                    .attr("height", function(d) {{ return height - y(d.value); }})
+                    .append("title")
+                    .text(function(d) {{ return d.name + ": " + d.value + "%"; }});
+                // Value labels on top of bars
+                svg.selectAll(".label")
+                    .data(data)
+                    .enter()
+                    .append("text")
+                    .attr("class", "label")
+                    .attr("text-anchor", "middle")
+                    .attr("x", function(d) {{ return x(d.name) + x.bandwidth() / 2; }})
+                    .attr("y", function(d) {{ return y(d.value) - 5; }})
+                    .text(function(d) {{ return d.value + "%"; }})
+                    .attr("fill", "white");
+            }});
         </script>
     </body>
     </html>
     return fastapi.responses.HTMLResponse(content=html_content)
+# Create a simple Gradio interface with an iframe to display the plot
 def create_iframe():
     # Add a random parameter to force reload
     random_param = random.randint(1, 10000)
+    return f'<iframe src="/d3-plot?t={random_param}" style="width:100%; height:500px; border:none;"></iframe>'
 # Create the Gradio blocks
+with gr.Blocks(theme=gr.themes.Soft(primary_hue="pink", secondary_hue="purple")) as demo:
+    gr.Markdown("# Latin America & Spain Progress Chart")
     iframe_output = gr.HTML(create_iframe())
+    # Refresh button to generate new random data
     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="/")