improve layout

app.py

@@ -130,17 +130,33 @@ def run_forecast(date, lead_time, device):
 def plot_forecast(state, selected_variable):
     latitudes, longitudes = state["latitudes"], state["longitudes"]
     values = state["fields"][selected_variable]
-    fig, ax = plt.subplots(figsize=(11, 6), subplot_kw={"projection": ccrs.PlateCarree()})
-    ax.coastlines()
-    ax.add_feature(cfeature.BORDERS, linestyle=":")
-    triangulation = tri.Triangulation(longitudes, latitudes)
     
-    # Use 'RdBu_r' instead of 'RdBu' to reverse the color scheme
+    # Create figure with specific projection centered on 0°
+    fig = plt.figure(figsize=(15, 8))
+    ax = plt.axes(projection=ccrs.PlateCarree(central_longitude=0))
+    
+    ax.set_global()
+    ax.set_extent([-180, 180, -90, 90], crs=ccrs.PlateCarree())
+    
+    # Add map features
+    ax.coastlines(resolution='50m')
+    ax.add_feature(cfeature.BORDERS, linestyle=":", alpha=0.5)
+    ax.gridlines(draw_labels=True)
+    
+    # Fix longitudes to be -180 to 180
+    fixed_lons = np.where(longitudes > 180, longitudes - 360, longitudes)
+    
+    # Create triangulation with fixed longitudes
+    triangulation = tri.Triangulation(fixed_lons, latitudes)
+    
+    # Create the contour plot
     contour = ax.tricontourf(triangulation, values, levels=20, 
                             transform=ccrs.PlateCarree(), 
                             cmap='RdBu_r')
+    
     plt.title(f"{selected_variable} at {state['date']}")
-    plt.colorbar(contour)
+    plt.colorbar(contour, orientation='horizontal', pad=0.05)
+    
     return fig
 
 # Create dropdown choices with groups
@@ -152,37 +168,61 @@ for group_name, variables in VARIABLE_GROUPS.items():
     for var_id, desc in sorted(variables.items()):
         DROPDOWN_CHOICES.append((f"{desc} ({var_id})", var_id))
 
-def gradio_interface(lead_time, selected_variable):
-    # Use the global latest date
-    global DEFAULT_DATE
-    state = run_forecast(DEFAULT_DATE, lead_time, "cuda")  # Always use CUDA
-    return plot_forecast(state, selected_variable)
-
-demo = gr.Interface(
-    fn=gradio_interface,
-    inputs=[
-        gr.Slider(
-            minimum=6, 
-            maximum=48, 
-            step=6, 
-            value=12, 
-            label="Forecast Hours Ahead",
-            info=f"Latest data available from: {DEFAULT_DATE.strftime('%Y-%m-%d %H:%M UTC')}"
-        ),
-        gr.Dropdown(
-            choices=DROPDOWN_CHOICES,
-            value="2t",  # Default to 2m temperature
-            label="Select Variable to Plot",
-            info="Choose a meteorological variable to visualize"
-        )
-    ],
-    outputs=gr.Plot(),
-    title="AIFS Weather Forecast",
-    description=f"""
-    Interactive visualization of ECMWF AIFS weather forecasts. 
-    Starting from the latest available data ({DEFAULT_DATE.strftime('%Y-%m-%d %H:%M UTC')}), 
+with gr.Blocks(css="""
+    .centered-header {
+        text-align: center;
+        margin-bottom: 20px;
+    }
+""") as demo:
+    # Centered header section
+    gr.Markdown(f"""
+    # AIFS Weather Forecast
+    
+    Interactive visualization of ECMWF AIFS weather forecasts. Starting from the latest available data ({DEFAULT_DATE.strftime('%Y-%m-%d %H:%M UTC')}), 
     select how many hours ahead you want to forecast and which meteorological variable to visualize.
-    """
-)
+    """, elem_classes=["centered-header"])
+    
+    with gr.Row():
+        # Controls column - takes up 1/3 of the width
+        with gr.Column(scale=1):
+            lead_time = gr.Slider(
+                minimum=6, 
+                maximum=48, 
+                step=6, 
+                value=12, 
+                label="Forecast Hours Ahead"
+            )
+            variable = gr.Dropdown(
+                choices=DROPDOWN_CHOICES,
+                value="2t",
+                label="Select Variable to Plot",
+                info="Choose a meteorological variable to visualize"
+            )
+            
+            # Add buttons in a row
+            with gr.Row():
+                clear_btn = gr.Button("Clear")
+                submit_btn = gr.Button("Submit", variant="primary")
+        
+        # Map column - takes up 2/3 of the width
+        with gr.Column(scale=2):
+            plot_output = gr.Plot()
+    
+    # Connect the inputs to the forecast function
+    def update_plot(lead_time, variable):
+        state = run_forecast(DEFAULT_DATE, lead_time, "cuda")
+        return plot_forecast(state, variable)
+    
+    # Clear function to reset to defaults
+    def clear():
+        return [
+            gr.Slider.update(value=12),
+            gr.Dropdown.update(value="2t"),
+            None  # Clear the plot
+        ]
+    
+    # Connect the buttons
+    submit_btn.click(fn=update_plot, inputs=[lead_time, variable], outputs=plot_output)
+    clear_btn.click(fn=clear, inputs=[], outputs=[lead_time, variable, plot_output])
 
 demo.launch()