Update app.py

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
 import folium
 import networkx as nx
-from folium import Map, Marker, PolyLine
+from folium import Map, Marker, PolyLine, Popup, IFrame
 from math import radians, cos, sin, sqrt, atan2
 from branca.element import MacroElement
 from jinja2 import Template
@@ -40,7 +40,7 @@ places = {
     "Ngororero": (-1.8733, 29.5811)
 }
 
-# 2. Place images URLs (free Wikimedia images or placeholders)
+# 2. Place images URLs
 place_images = {
     "Kigali": "https://upload.wikimedia.org/wikipedia/commons/8/89/Kigali_city_view.jpg",
     "Nyarugenge": "https://upload.wikimedia.org/wikipedia/commons/f/f8/Nyarugenge_district.jpg",
@@ -96,7 +96,6 @@ edges = [
     ("Ruhango", "Nyanza"), ("Nyanza", "Huye"), ("Huye", "Gisagara"), ("Gisagara", "Nyaruguru"),
     ("Nyaruguru", "Nyamagabe"), ("Nyamagabe", "Karongi"), ("Ngororero", "Ruhango"),
     ("Gicumbi", "Gasabo"), ("Bugesera", "Ngoma"),
-    # Kigali connections
     ("Kigali", "Nyarugenge"), ("Kigali", "Gasabo"), ("Kigali", "Kicukiro")
 ]
 
@@ -105,7 +104,7 @@ G = nx.Graph()
 for u, v in edges:
     G.add_edge(u, v, weight=haversine(places[u], places[v]))
 
-# 6. Animation class for marker movement on folium map
+# 6. Animation class for marker movement
 class AnimateMarker(MacroElement):
     _template = Template("""
         {% macro script(this, kwargs) %}
@@ -128,7 +127,7 @@ class AnimateMarker(MacroElement):
         self._name = "AnimateMarker"
         self.locations = locations
 
-# 7. Routing function with images output
+# 7. Routing function with popup images on map markers
 def generate_map(start, end):
     if start == end:
         return "Hitamo aho utangiriye n’aho ugiye bitandukanye.", "", ""
@@ -141,50 +140,41 @@ def generate_map(start, end):
         coords = [places[p] for p in path]
 
         m = Map(location=[-1.9441, 30.0619], zoom_start=9)
-        for name, coord in places.items():
-            Marker(location=coord, popup=name).add_to(m)
 
+        # Add markers for all places (normal popup with name)
+        for name, coord in places.items():
+            if name == start or name == end:
+                # For start and end: popup with image + name
+                img_url = place_images.get(name, "https://via.placeholder.com/300?text=No+Image")
+                html = f"""
+                    <h4>{name}</h4>
+                    <img src="{img_url}" width="300" style="border-radius:8px;"/>
+                """
+                iframe = IFrame(html, width=320, height=320)
+                popup = Popup(iframe, max_width=320)
+                Marker(location=coord, popup=popup, icon=folium.Icon(color='green' if name == start else 'red')).add_to(m)
+            else:
+                Marker(location=coord, popup=name).add_to(m)
+
+        # Draw the route line
         PolyLine(coords, color="blue", weight=5).add_to(m)
         m.add_child(AnimateMarker(coords))
 
-        # Get images URLs for start and end locations
-        start_img = place_images.get(start, "https://via.placeholder.com/300?text=No+Image")
-        end_img = place_images.get(end, "https://via.placeholder.com/300?text=No+Image")
-
-        images_html = f"""
-            <div style='display:flex; justify-content:space-around; margin-top: 10px;'>
-                <div style='text-align:center;'>
-                    <h4>{start}</h4>
-                    <img src="{start_img}" alt="{start}" width="300" style="border-radius: 8px;"/>
-                </div>
-                <div style='text-align:center;'>
-                    <h4>{end}</h4>
-                    <img src="{end_img}" alt="{end}" width="300" style="border-radius: 8px;"/>
-                </div>
-            </div>
-        """
-
-        return "Inzira ngufi ni: " + " ➔ ".join(path), m._repr_html_(), images_html
+        return "Inzira ngufi ni: " + " ➔ ".join(path), m._repr_html_(), ""
 
     except Exception as e:
         return f"Ntibishoboka kubona inzira: {str(e)}", "", ""
 
-# 8. Gradio Interface
-iface = gr.Interface(
-    fn=generate_map,
-    inputs=[
-        gr.Dropdown(list(places.keys()), label="Hitamo aho uri"),
-        gr.Dropdown(list(places.keys()), label="Hitamo aho ugiye")
-    ],
-    outputs=[
-        gr.Textbox(label="Ubutumwa"),
-        gr.HTML(label="Ikarita"),
-        gr.HTML(label="Amafoto y'aho hantu")
-    ],
-    title="🗺️ VIATEUR AI - Rwanda Smart Route Planner",
-    theme="default"
-)
-
-if __name__ == "__main__":
-    iface.launch()
+# 8. Gradio interface
+with gr.Blocks() as demo:
+    gr.Markdown("## Shaka inzira ngufi hagati y’uturere twa Rwanda")
+    start = gr.Dropdown(list(places.keys()), label="Aho utangirira")
+    end = gr.Dropdown(list(places.keys()), label="Aho ugiye")
+    btn = gr.Button("Shaka inzira")
+    output_text = gr.Textbox(label="Inzira", interactive=False)
+    output_map = gr.HTML()
+    
+    btn.click(fn=generate_map, inputs=[start, end], outputs=[output_text, output_map, gr.Textbox(visible=False)])
+
+demo.launch()