Update app.py

app.py

@@ -173,48 +173,73 @@ class OceanCurrentMapper:
         wind_speeds = np.random.normal(10, 5, forecast_hours)
         wind_speeds = np.maximum(wind_speeds, 0)
         
-        # Create forecast plot
-        fig = go.Figure()
+        # Create subplots for better separation
+        from plotly.subplots import make_subplots
+        
+        fig = make_subplots(
+            rows=3, cols=1,
+            subplot_titles=('Current Speed (m/s)', 'Wave Height (m)', 'Wind Speed (m/s)'),
+            vertical_spacing=0.08,
+            shared_xaxes=True
+        )
+        
+        # Current Speed subplot
+        fig.add_trace(
+            go.Scatter(
+                x=times,
+                y=current_speeds,
+                mode='lines+markers',
+                name='Current Speed',
+                line=dict(color='blue', width=2),
+                marker=dict(size=4)
+            ),
+            row=1, col=1
+        )
+        
+        # Wave Height subplot
+        fig.add_trace(
+            go.Scatter(
+                x=times,
+                y=wave_heights,
+                mode='lines+markers',
+                name='Wave Height',
+                line=dict(color='green', width=2),
+                marker=dict(size=4)
+            ),
+            row=2, col=1
+        )
         
-        fig.add_trace(go.Scatter(
-            x=times,
-            y=current_speeds,
-            mode='lines+markers',
-            name='Current Speed (m/s)',
-            line=dict(color='blue', width=2)
-        ))
-        
-        fig.add_trace(go.Scatter(
-            x=times,
-            y=wave_heights,
-            mode='lines+markers',
-            name='Wave Height (m)',
-            line=dict(color='green', width=2),
-            yaxis='y2'
-        ))
-        
-        fig.add_trace(go.Scatter(
-            x=times,
-            y=wind_speeds,
-            mode='lines+markers',
-            name='Wind Speed (m/s)',
-            line=dict(color='red', width=2),
-            yaxis='y3'
-        ))
+        # Wind Speed subplot
+        fig.add_trace(
+            go.Scatter(
+                x=times,
+                y=wind_speeds,
+                mode='lines+markers',
+                name='Wind Speed',
+                line=dict(color='red', width=2),
+                marker=dict(size=4)
+            ),
+            row=3, col=1
+        )
         
+        # Update layout
         fig.update_layout(
             title=f'Ocean Conditions Forecast - {region}',
-            xaxis_title='Time',
-            yaxis=dict(title='Current Speed (m/s)', side='left'),
-            yaxis2=dict(title='Wave Height (m)', side='right', overlaying='y'),
-            yaxis3=dict(title='Wind Speed (m/s)', side='right', overlaying='y', position=0.95),
-            showlegend=True,
-            width=None,  # Let it auto-size
-            height=350,  # Smaller height for embedding
+            showlegend=False,  # Remove legend since subplot titles are clear
+            width=None,
+            height=600,  # Increased height for 3 subplots
             autosize=True,
             margin=dict(l=50, r=50, t=80, b=50)
         )
         
+        # Update x-axis labels
+        fig.update_xaxes(title_text="Time", row=3, col=1)
+        
+        # Update y-axis labels
+        fig.update_yaxes(title_text="Speed (m/s)", row=1, col=1)
+        fig.update_yaxes(title_text="Height (m)", row=2, col=1)
+        fig.update_yaxes(title_text="Speed (m/s)", row=3, col=1)
+        
         return fig
     
     def analyze_surfing_conditions(self, region: str) -> str:
@@ -228,20 +253,20 @@ class OceanCurrentMapper:
         conditions = []
         
         if avg_speed < 0.3:
-            conditions.append("Low current speeds - good for beginners")
+            conditions.append("✅ Low current speeds - good for beginners")
         elif avg_speed < 0.8:
-            conditions.append("Moderate currents - suitable for intermediate surfers")
+            conditions.append("⚠️ Moderate currents - suitable for intermediate surfers")
         else:
-            conditions.append("Strong currents - experienced surfers only")
+            conditions.append("❌ Strong currents - experienced surfers only")
         
         if max_speed > 1.0:
-            conditions.append("Strong rip currents detected in some areas")
+            conditions.append("🌊 Strong rip currents detected in some areas")
         
         # Add mock weather conditions
         conditions.extend([
-            f"Water temperature: {20 + np.random.randint(0, 10)}°C",
-            f"Wind: {5 + np.random.randint(0, 15)} mph offshore",
-            f"Wave height: {1 + np.random.randint(0, 3)} meters"
+            f"🌡️ Water temperature: {20 + np.random.randint(0, 10)}°C",
+            f"💨 Wind: {5 + np.random.randint(0, 15)} mph offshore",
+            f"🌊 Wave height: {1 + np.random.randint(0, 3)} meters"
         ])
         
         return "\n".join(conditions)
@@ -288,8 +313,8 @@ def analyze_conditions(region):
 # Define the Gradio interface
 with gr.Blocks(title="Ocean Current Mapper", theme=gr.themes.Ocean()) as demo:
     gr.Markdown("""
-    <h1 style="font-size: 3em; text-align: center; color: #1e3a8a; text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-family: 'Arial Black', sans-serif;">
-    Real-Time Ocean Current Mapping Tool
+    <h1 style="font-size: 3em; text-align: center; color: #2E86AB; margin-bottom: 0.5em;">
+        🌊 Real-Time Ocean Current Mapper
     </h1>
     
     <div style="text-align: center; font-size: 1.2em; margin-bottom: 2em;">