updated gradio

gradio_ui.py

@@ -1,5 +1,6 @@
 import gradio as gr
 import pandas as pd
+from map_generator import *
 from flight_distance import *
 from optimize import *
 from weather import *
@@ -8,14 +9,13 @@ from weather import *
 airport_df = pd.read_csv(r'airport.csv')  # Adjust the path to your CSV file
 aircraft_df = pd.read_csv(r'aircraft.csv')  # Adjust the path to your CSV file
 
-# Create a combined option list with both IATA codes and airport names
 airport_options = [f"{row['IATA']} - {row['Airport_Name']}" for _, row in airport_df.iterrows()]
+airports_dict = {row['IATA']: row['Airport_Name'] for _, row in airport_df.iterrows()}  # For map display
 
 # Ensure the correct column is used for aircraft types
 aircraft_type_column = 'Aircraft'
 aircraft_options = aircraft_df[aircraft_type_column].tolist()
 
-# Gradio function to determine if a route can be flown
 def check_route(airport_selections, aircraft_type):
     # Extract IATA codes from the selected options
     airports = [selection.split(" - ")[0] for selection in airport_selections]
@@ -42,9 +42,13 @@ def check_route(airport_selections, aircraft_type):
     
     # Check if aircraft details were retrieved successfully
     if isinstance(aircraft_specs, str):
-        return {"Error": aircraft_specs}  # Return error message if aircraft not found
+        return {"Error": aircraft_specs}, ""  # Return error message if aircraft not found
     
-    # Prepare sector-wise details for flight time, fuel required, and refueling need
+    # Step 7: Check if the aircraft can fly the route
+    route_feasibility = check_route_feasibility(optimal_route, trip_distance, aircraft_specs)
+    
+    # Collect sectors needing refuel
+    refuel_sectors = set()  # Track sectors that require refueling
     sector_details = []
     refuel_required = False  # Flag to track if refueling is required
     
@@ -63,6 +67,7 @@ def check_route(airport_selections, aircraft_type):
         # Check if refueling is required for this sector
         if fuel > aircraft_specs['Max_Fuel_Capacity_kg']:
             sector_info["Refuel Required"] = "Yes"
+            refuel_sectors.add((optimal_route[i], optimal_route[i + 1]))  # Add to refuel sectors
             refuel_required = True
         else:
             sector_info["Refuel Required"] = "No"
@@ -83,13 +88,17 @@ def check_route(airport_selections, aircraft_type):
     
     if fuel > aircraft_specs['Max_Fuel_Capacity_kg']:
         final_leg_info["Refuel Required"] = "Yes"
+        refuel_sectors.add((optimal_route[-1], optimal_route[0]))  # Add final leg to refuel sectors
         refuel_required = True
     else:
         final_leg_info["Refuel Required"] = "No"
     
     sector_details.append(final_leg_info)
     
-    # Step 7: Prepare and return result
+    # Step 8: Create the route map with refuel sectors highlighted
+    map_html = create_route_map(airports_dict, lat_long_dict, optimal_route, refuel_sectors)
+    
+    # Step 9: Prepare and return result
     if refuel_required:
         result = {
             "Optimal Route": " -> ".join(optimal_route) + f" -> {optimal_route[0]}",
@@ -105,20 +114,26 @@ def check_route(airport_selections, aircraft_type):
             "Sector Details": sector_details
         }
     
-    return result
-
+    return result, map_html
 
 # Gradio Interface
 with gr.Blocks() as demo:
     gr.Markdown("## Airport Route Feasibility Checker")
-    airport_selector = gr.Dropdown(airport_options, multiselect=True, label="Select Airports (IATA - Name)")
-    aircraft_selector = gr.Dropdown(aircraft_options, label="Select Aircraft Type")
-    check_button = gr.Button("Check Route Feasibility")
-    
-    result_output = gr.JSON(label="Result")
+
+    # Place components in two columns for results and map
+    with gr.Row():
+        with gr.Column():
+            airport_selector = gr.Dropdown(airport_options, multiselect=True, label="Select Airports (IATA - Name)")
+            aircraft_selector = gr.Dropdown(aircraft_options, label="Select Aircraft Type")
+            check_button = gr.Button("Check Route Feasibility")
+            result_output = gr.JSON(label="Result")
+        
+        with gr.Column():
+            gr.Markdown("## Route Map")
+            map_output = gr.HTML(label="Route Map")
 
     # Connect the button click to the check_route function
-    check_button.click(fn=check_route, inputs=[airport_selector, aircraft_selector], outputs=result_output)
+    check_button.click(fn=check_route, inputs=[airport_selector, aircraft_selector], outputs=[result_output, map_output])
 
 # Launch the Gradio app
-demo.launch()
+demo.launch()

map_generator.py

@@ -0,0 +1,67 @@
+import folium
+
+# Function to create the map
+def create_route_map(airports, lat_long_dict, optimal_route, refuel_sectors):
+    """
+    Create a map displaying the optimal route with red straight lines, 
+    and dotted lines for sectors requiring refuel. Adds a legend for line meanings.
+    """
+    # Create the map centered at the first airport
+    start_lat, start_long = lat_long_dict[optimal_route[0]]
+    route_map = folium.Map(location=[start_lat, start_long], zoom_start=4)
+
+    # Collect bounds for autoscaling the map
+    bounds = []
+
+    # Add markers for each airport
+    for i, airport in enumerate(optimal_route):
+        lat, lon = lat_long_dict[airport]
+        bounds.append([lat, lon])
+        folium.Marker([lat, lon], popup=f"{airport} - {airports[airport]}").add_to(route_map)
+
+    # Draw lines between the airports
+    for i in range(len(optimal_route) - 1):
+        airport1 = optimal_route[i]
+        airport2 = optimal_route[i + 1]
+        lat1, lon1 = lat_long_dict[airport1]
+        lat2, lon2 = lat_long_dict[airport2]
+
+        # Check if refuel is required for this sector
+        if (airport1, airport2) in refuel_sectors or (airport2, airport1) in refuel_sectors:
+            folium.PolyLine(
+                locations=[(lat1, lon1), (lat2, lon2)], color="red", weight=2.5, opacity=1, dash_array="10,10"
+            ).add_to(route_map)
+        else:
+            folium.PolyLine(
+                locations=[(lat1, lon1), (lat2, lon2)], color="red", weight=2.5, opacity=1
+            ).add_to(route_map)
+
+    # Special case for two points: check the return leg explicitly
+    lat_last, lon_last = lat_long_dict[optimal_route[-1]]
+    lat_start, lon_start = lat_long_dict[optimal_route[0]]
+    if (optimal_route[-1], optimal_route[0]) in refuel_sectors or (optimal_route[0], optimal_route[-1]) in refuel_sectors:
+        folium.PolyLine(
+            locations=[(lat_last, lon_last), (lat_start, lon_start)], color="red", weight=2.5, opacity=1, dash_array="10,10"
+        ).add_to(route_map)
+    else:
+        folium.PolyLine(
+            locations=[(lat_last, lon_last), (lat_start, lon_start)], color="red", weight=2.5, opacity=1
+        ).add_to(route_map)
+
+    # Autoscale the map to fit all points
+    route_map.fit_bounds(bounds)
+
+    # Add custom legend as a child of the map
+    legend_html = '''
+     <div style="position: fixed; 
+     bottom: 50px; left: 50px; width: 250px; height: 90px; 
+     background-color: white; border:2px solid grey; z-index:9999; font-size:14px;">
+     &nbsp; <strong>Legend</strong><br>
+     &nbsp; <i class="fa fa-circle" style="color:red"></i> Solid line: No refuel required<br>
+     &nbsp; <i class="fa fa-circle--" style="color:red"></i> Dotted line: Refuel required
+     </div>
+    '''
+    route_map.get_root().html.add_child(folium.Element(legend_html))
+
+    # Convert the map to HTML string
+    return route_map._repr_html_()

route_map.html

@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html>
+<head>
+    
+    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+    
+        <script>
+            L_NO_TOUCH = false;
+            L_DISABLE_3D = false;
+        </script>
+    
+    <style>html, body {width: 100%;height: 100%;margin: 0;padding: 0;}</style>
+    <style>#map {position:absolute;top:0;bottom:0;right:0;left:0;}</style>
+    <script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.js"></script>
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.9.3/dist/leaflet.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"/>
+    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.0/css/all.min.css"/>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Leaflet.awesome-markers/2.0.2/leaflet.awesome-markers.css"/>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/python-visualization/folium/folium/templates/leaflet.awesome.rotate.min.css"/>
+    
+            <meta name="viewport" content="width=device-width,
+                initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+            <style>
+                #map_f2b9b17a8d8355bf6792b4ae422a25b1 {
+                    position: relative;
+                    width: 100.0%;
+                    height: 100.0%;
+                    left: 0.0%;
+                    top: 0.0%;
+                }
+                .leaflet-container { font-size: 1rem; }
+            </style>
+        
+</head>
+<body>
+    
+    
+            <div class="folium-map" id="map_f2b9b17a8d8355bf6792b4ae422a25b1" ></div>
+        
+</body>
+<script>
+    
+    
+            var map_f2b9b17a8d8355bf6792b4ae422a25b1 = L.map(
+                "map_f2b9b17a8d8355bf6792b4ae422a25b1",
+                {
+                    center: [22.654739, 88.446722],
+                    crs: L.CRS.EPSG3857,
+                    zoom: 4,
+                    zoomControl: true,
+                    preferCanvas: false,
+                }
+            );
+
+            
+
+        
+    
+            var tile_layer_312841c4bf44a13069f366baaa0847d4 = L.tileLayer(
+                "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
+                {"attribution": "\u0026copy; \u003ca href=\"https://www.openstreetmap.org/copyright\"\u003eOpenStreetMap\u003c/a\u003e contributors", "detectRetina": false, "maxNativeZoom": 19, "maxZoom": 19, "minZoom": 0, "noWrap": false, "opacity": 1, "subdomains": "abc", "tms": false}
+            );
+        
+    
+            tile_layer_312841c4bf44a13069f366baaa0847d4.addTo(map_f2b9b17a8d8355bf6792b4ae422a25b1);
+        
+    
+            var marker_9d9271717824cf9da0dab95f48db98eb = L.marker(
+                [22.654739, 88.446722],
+                {}
+            ).addTo(map_f2b9b17a8d8355bf6792b4ae422a25b1);
+        
+    
+        var popup_cc05141a40a4dd28cf42a84b81505b8f = L.popup({"maxWidth": "100%"});
+
+        
+            
+                var html_5ad3a9f80f35854605a087077a62f44c = $(`<div id="html_5ad3a9f80f35854605a087077a62f44c" style="width: 100.0%; height: 100.0%;">CCU</div>`)[0];
+                popup_cc05141a40a4dd28cf42a84b81505b8f.setContent(html_5ad3a9f80f35854605a087077a62f44c);
+            
+        
+
+        marker_9d9271717824cf9da0dab95f48db98eb.bindPopup(popup_cc05141a40a4dd28cf42a84b81505b8f)
+        ;
+
+        
+    
+    
+            marker_9d9271717824cf9da0dab95f48db98eb.bindTooltip(
+                `<div>
+                     CCU
+                 </div>`,
+                {"sticky": true}
+            );
+        
+    
+            var poly_line_64c1ea99ecdd2ac8195ad3c5c09a9416 = L.polyline(
+                [[22.654739, 88.446722], [28.5665, 77.103088]],
+                {"bubblingMouseEvents": true, "color": "blue", "dashArray": null, "dashOffset": null, "fill": false, "fillColor": "blue", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "noClip": false, "opacity": 1, "smoothFactor": 1.0, "stroke": true, "weight": 2.5}
+            ).addTo(map_f2b9b17a8d8355bf6792b4ae422a25b1);
+        
+    
+            var marker_45bec2c73a65e7ea5f8d1ce2b04c4ea5 = L.marker(
+                [28.5665, 77.103088],
+                {}
+            ).addTo(map_f2b9b17a8d8355bf6792b4ae422a25b1);
+        
+    
+        var popup_a38073ceac50e5501253d2665fa086e2 = L.popup({"maxWidth": "100%"});
+
+        
+            
+                var html_fc2f02230d43e90ed1657f137240ff6a = $(`<div id="html_fc2f02230d43e90ed1657f137240ff6a" style="width: 100.0%; height: 100.0%;">DEL</div>`)[0];
+                popup_a38073ceac50e5501253d2665fa086e2.setContent(html_fc2f02230d43e90ed1657f137240ff6a);
+            
+        
+
+        marker_45bec2c73a65e7ea5f8d1ce2b04c4ea5.bindPopup(popup_a38073ceac50e5501253d2665fa086e2)
+        ;
+
+        
+    
+    
+            marker_45bec2c73a65e7ea5f8d1ce2b04c4ea5.bindTooltip(
+                `<div>
+                     DEL
+                 </div>`,
+                {"sticky": true}
+            );
+        
+    
+            var poly_line_7393b88083ba4e5eb5ce6f397bea175a = L.polyline(
+                [[28.5665, 77.103088], [12.949986, 77.668206]],
+                {"bubblingMouseEvents": true, "color": "blue", "dashArray": null, "dashOffset": null, "fill": false, "fillColor": "blue", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "noClip": false, "opacity": 1, "smoothFactor": 1.0, "stroke": true, "weight": 2.5}
+            ).addTo(map_f2b9b17a8d8355bf6792b4ae422a25b1);
+        
+    
+            var marker_789b26203246e616ede3030000ac61c6 = L.marker(
+                [12.949986, 77.668206],
+                {}
+            ).addTo(map_f2b9b17a8d8355bf6792b4ae422a25b1);
+        
+    
+        var popup_3eaae3513672d94c46be693c21c58c22 = L.popup({"maxWidth": "100%"});
+
+        
+            
+                var html_f14429d8ebd2e4ae40284df9766aabfe = $(`<div id="html_f14429d8ebd2e4ae40284df9766aabfe" style="width: 100.0%; height: 100.0%;">BLR</div>`)[0];
+                popup_3eaae3513672d94c46be693c21c58c22.setContent(html_f14429d8ebd2e4ae40284df9766aabfe);
+            
+        
+
+        marker_789b26203246e616ede3030000ac61c6.bindPopup(popup_3eaae3513672d94c46be693c21c58c22)
+        ;
+
+        
+    
+    
+            marker_789b26203246e616ede3030000ac61c6.bindTooltip(
+                `<div>
+                     BLR
+                 </div>`,
+                {"sticky": true}
+            );
+        
+    
+            var poly_line_6a981383714f043d8255c1ab6bbdf417 = L.polyline(
+                [[12.949986, 77.668206], [22.654739, 88.446722]],
+                {"bubblingMouseEvents": true, "color": "blue", "dashArray": null, "dashOffset": null, "fill": false, "fillColor": "blue", "fillOpacity": 0.2, "fillRule": "evenodd", "lineCap": "round", "lineJoin": "round", "noClip": false, "opacity": 1, "smoothFactor": 1.0, "stroke": true, "weight": 2.5}
+            ).addTo(map_f2b9b17a8d8355bf6792b4ae422a25b1);
+        
+</script>
+</html>