Update app.py

app.py

@@ -2,8 +2,8 @@ import gradio as gr
 import numpy as np
 import joblib
 import folium
-from folium import Map, Marker
 from io import BytesIO
+import base64
 
 # Define model paths
 model_paths = {
@@ -56,45 +56,67 @@ def load_model_and_predict(prediction_type, time_interval, input_data):
         processed_data = process_input(input_data, scaler)
         prediction = model.predict(processed_data)
         
-        if prediction_type == 'Path':
-            latitude, longitude = prediction[0][0], prediction[0][1]
-            return f"Predicted Path after {time_interval}: Latitude: {latitude}, Longitude: {longitude}", display_map(latitude, longitude)
+        lat, lon = prediction[0][0], prediction[0][1]
+        
+        # Create Folium map for predicted location
+        map_ = folium.Map(location=[lat, lon], zoom_start=6)
+        folium.Marker([lat, lon], popup=f"Predicted Location ({lat:.2f}, {lon:.2f})").add_to(map_)
+        
+        # Save map as HTML and convert to base64
+        map_html = BytesIO()
+        map_.save(map_html, format="html")
+        map_base64 = base64.b64encode(map_html.getvalue()).decode("utf-8")
+        
+        return f"Predicted Path after {time_interval}: Latitude: {lat}, Longitude: {lon}", f'<iframe src="data:text/html;base64,{map_base64}" width="100%" height="400"></iframe>'
     except Exception as e:
-        return str(e)
-
-def display_map(latitude, longitude):
-    # Create a map centered around the predicted coordinates
-    m = folium.Map(location=[latitude, longitude], zoom_start=6)
-    folium.Marker([latitude, longitude], tooltip="Predicted Location").add_to(m)
-    
-    # Save map as HTML and load in Gradio
-    map_data = BytesIO()
-    m.save(map_data, close_file=False)
-    return map_data
+        return str(e), None
 
 # Gradio interface components
 with gr.Blocks() as cyclone_predictor:
     gr.Markdown("# Cyclone Path Prediction App")
     
-    prediction_type = gr.Dropdown(choices=['Path'], value='Path', label="Select Prediction Type")
+    # Dropdown for Prediction Type
+    prediction_type = gr.Dropdown(
+        choices=['Path'],
+        value='Path',
+        label="Select Prediction Type"
+    )
+    
+    # Dropdown for Time Interval
     time_interval = gr.Dropdown(
         choices=['3 hours', '6 hours', '9 hours', '12 hours', '15 hours', '18 hours', '21 hours', '24 hours', '27 hours', '30 hours', '33 hours', '36 hours'],
         label="Select Time Interval"
     )
     
-    previous_lat_lon = gr.Textbox(placeholder="Enter previous 3-hour lat/lon (e.g., 15.54,90.64)", label="Previous 3-hour Latitude/Longitude")
+    # Input fields for user data
+    previous_lat_lon = gr.Textbox(
+        placeholder="Enter previous 3-hour lat/lon (e.g., 15.54,90.64)",
+        label="Previous 3-hour Latitude/Longitude"
+    )
     previous_speed = gr.Number(label="Previous 3-hour Speed")
-    previous_timestamp = gr.Textbox(placeholder="Enter previous 3-hour timestamp (e.g., 2024,10,23,0)", label="Previous 3-hour Timestamp (year, month, day, hour)")
-    
-    present_lat_lon = gr.Textbox(placeholder="Enter present 3-hour lat/lon (e.g., 15.71,90.29)", label="Present 3-hour Latitude/Longitude")
+    previous_timestamp = gr.Textbox(
+        placeholder="Enter previous 3-hour timestamp (e.g., 2024,10,23,0)",
+        label="Previous 3-hour Timestamp (year, month, day, hour)"
+    )
+
+    present_lat_lon = gr.Textbox(
+        placeholder="Enter present 3-hour lat/lon (e.g., 15.71,90.29)",
+        label="Present 3-hour Latitude/Longitude"
+    )
     present_speed = gr.Number(label="Present 3-hour Speed")
-    present_timestamp = gr.Textbox(placeholder="Enter present 3-hour timestamp (e.g., 2024,10,23,3)", label="Present 3-hour Timestamp (year, month, day, hour)")
+    present_timestamp = gr.Textbox(
+        placeholder="Enter present 3-hour timestamp (e.g., 2024,10,23,3)",
+        label="Present 3-hour Timestamp (year, month, day, hour)"
+    )
 
+    # Output prediction
     prediction_output = gr.Textbox(label="Prediction Output")
     map_output = gr.HTML(label="Predicted Location Map")
-
+    
+    # Predict button
     def get_input_data(previous_lat_lon, previous_speed, previous_timestamp, present_lat_lon, present_speed, present_timestamp):
         try:
+            # Parse inputs into required format
             prev_lat, prev_lon = map(float, previous_lat_lon.split(','))
             prev_time = list(map(int, previous_timestamp.split(',')))
             previous_data = [prev_lat, prev_lon, previous_speed] + prev_time
@@ -109,6 +131,7 @@ with gr.Blocks() as cyclone_predictor:
 
     predict_button = gr.Button("Predict Path")
     
+    # Linking function to UI elements
     predict_button.click(
         fn=lambda pt, ti, p_lat_lon, p_speed, p_time, c_lat_lon, c_speed, c_time: load_model_and_predict(
             pt, ti, get_input_data(p_lat_lon, p_speed, p_time, c_lat_lon, c_speed, c_time)