ui: fix the error

app.py

@@ -20,7 +20,7 @@ def get_data():
         df = pd.DataFrame(predictions_list)
 
         if not df.empty:
-            # Sort for Chart (Bottom-up for horizontal)
+            # Sort for Chart (Ascending for horizontal Plotly layout)
             chart_df = df.sort_values(by="probability", ascending=True)
 
             fig = px.bar(
@@ -36,15 +36,15 @@ def get_data():
                     "language": "Language",
                 },
                 template="plotly_dark",
-                color_discrete_sequence=px.colors.qualitative.Safe,
             )
             fig.update_layout(
                 paper_bgcolor="rgba(0,0,0,0)",
                 plot_bgcolor="rgba(0,0,0,0)",
                 font_color="#8b949e",
+                margin=dict(l=20, r=20, t=40, b=20),
             )
 
-            # Prepare Table (Top-down)
+            # Prepare Table (Descending for the list view)
             table_df = df.sort_values(by="probability", ascending=False).copy()
             table_df["repo_name"] = table_df["repo_name"].apply(
                 lambda x: f'<a href="https://github.com/{x}" target="_blank" style="color: #58a6ff; text-decoration: none; font-weight: bold;">🔗 {x}</a>'
@@ -55,35 +55,41 @@ def get_data():
             table_df = table_df[["repo_name", "language", "probability"]]
             table_df.columns = ["Repository", "Language", "Trend Probability"]
 
-            return table_df, f"📅 Last Prediction Run: __{date}__", fig
+            return table_df, f"### 📅 Last Prediction Run: {date}", fig
 
     except Exception as e:
-        return pd.DataFrame({"Error": [str(e)]}), "⚠️ Error loading data", None
+        return pd.DataFrame({"Error": [str(e)]}), "### ⚠️ Error loading data", None
 
 
-with gr.Blocks(theme=gr.themes.Soft(primary_hue="blue")) as demo:
+# CSS to center the markdown text since 'style' is no longer allowed in components
+custom_css = """
+#date-container { text-align: center; margin-bottom: 20px; }
+.gradio-container { background-color: #0d1117 !important; }
+"""
+
+with gr.Blocks() as demo:
     gr.HTML(
-        '<div style="text-align: center; padding: 10px;"><h1 style="color: #f0f6fc;">📈 GitHub Trend Predictor</h1></div>'
+        '<div style="text-align: center; padding: 10px;"><h1 style="color: #f0f6fc; margin-bottom: 0;">📈 GitHub Trend Predictor</h1></div>'
     )
 
-    with gr.Row():
-        date_display = gr.Markdown(value="Syncing...", style={"text-align": "center"})
+    # Use a container to handle alignment via CSS
+    with gr.Column(elem_id="date-container"):
+        date_display = gr.Markdown(value="Syncing...")
 
-    # We wrap the tabs in a variable to attach the listener
     with gr.Tabs() as tabs:
-        with gr.Tab("📊 Visual Forecast", id="chart_tab"):
+        with gr.Tab("📊 Visual Forecast"):
             chart = gr.Plot()
 
-        with gr.Tab("📋 Detailed Rankings", id="list_tab"):
+        with gr.Tab("📋 Detailed Rankings"):
             table = gr.Dataframe(datatype=["html", "str", "str"], interactive=False)
 
-    # --- EVENT LISTENERS ---
+    refresh_btn = gr.Button("🔄 Sync Latest Predictions", variant="primary")
 
-    # 1. Sync when the page first loads
+    # Listeners
     demo.load(fn=get_data, outputs=[table, date_display, chart])
-
-    # 2. Sync whenever a user clicks/switches between tabs
     tabs.select(fn=get_data, outputs=[table, date_display, chart])
+    refresh_btn.click(fn=get_data, outputs=[table, date_display, chart])
 
 if __name__ == "__main__":
-    demo.launch()
+    # Parameters moved to launch() for Gradio 6.0 compatibility
+    demo.launch(theme=gr.themes.Soft(primary_hue="blue"), css=custom_css)