Update app.py

app.py

@@ -1,7 +1,6 @@
 import gradio as gr
 import random
 
-# Ahantu n'aho biherereye
 locations = {
     "Downtown": {"lat": -1.95, "lon": 30.05},
     "Highway": {"lat": -1.92, "lon": 30.06},
@@ -9,16 +8,14 @@ locations = {
     "School Zone": {"lat": -1.93, "lon": 30.03}
 }
 
-def simulate_map_only():
+def simulate_map_google_style():
     markers = ""
     alerts = []
 
     for name, info in locations.items():
-        # Simulate traffic data
         speed = round(random.gauss(30, 15), 1)
         vehicles = int(random.gauss(40, 15))
 
-        # Define traffic level
         if speed < 20 and vehicles > 50:
             status = "🚦 Heavy Traffic"
             color = "red"
@@ -31,21 +28,20 @@ def simulate_map_only():
 
         alerts.append(f"📍 {name}: {status} — {speed} km/h, {vehicles} cars")
 
-        # Add marker to map
         markers += f"""
         L.circleMarker([{info['lat']}, {info['lon']}], {{
             color: '{color}',
             radius: 10
         }}).addTo(map).bindPopup("<b>{name}</b><br>Speed: {speed} km/h<br>Cars: {vehicles}<br>Status: {status}");"""
 
-    # Leaflet Map HTML
     html = f"""
     <div id="map" style="width:100%; height:500px;"></div>
     <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css"/>
     <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
     <script>
       var map = L.map('map').setView([-1.935, 30.05], 13);
-      L.tileLayer('https://{{s}}.tile.openstreetmap.org/{{z}}/{{x}}/{{y}}.png', {{
+      L.tileLayer('https://{{s}}.basemaps.cartocdn.com/light_all/{{z}}/{{x}}/{{y}}.png', {{
+        attribution: '&copy; <a href="https://carto.com/">CartoDB</a> contributors',
         maxZoom: 19
       }}).addTo(map);
       L.control.zoom({{ position: 'topright' }}).addTo(map);
@@ -56,13 +52,12 @@ def simulate_map_only():
     return "\n".join(alerts), html
 
 with gr.Blocks() as demo:
-    gr.Markdown("## 🗺️ Real-Time Traffic Visualization on Map Only")
+    gr.Markdown("## 🗺️ Google-Like Traffic Map with Leaflet")
 
-    btn = gr.Button("🔁 Update Traffic")
-    report = gr.Textbox(label="Traffic Status", lines=8)
-    mapview = gr.HTML()
+    btn = gr.Button("🔁 Refresh Traffic Data")
+    report = gr.Textbox(label="Traffic Report", lines=8)
+    map_html = gr.HTML()
 
-    btn.click(fn=simulate_map_only, inputs=[], outputs=[report, mapview])
+    btn.click(fn=simulate_map_google_style, inputs=[], outputs=[report, map_html])
 
 demo.launch()
-