ui: fix vertical issue

app.py

@@ -8,7 +8,7 @@ import pandas as pd
 def get_data():
     file_path = "predictions.json"
     if not os.path.exists(file_path):
-        return pd.DataFrame(), "N/A", None
+        return pd.DataFrame(), "📅 Status: Waiting for data sync...", None
 
     try:
         with open(file_path, "r") as f:
@@ -20,82 +20,81 @@ def get_data():
         df = pd.DataFrame(predictions_list)
 
         if not df.empty:
+            # Sort by highest probability for both chart and table
             df = df.sort_values(by="probability", ascending=False)
 
-            # 1. Create a display version of the repo name (Clickable Link)
-            df["Repository"] = df["repo_name"].apply(
+            # Create a copy for the table with HTML links
+            table_df = df.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>'
             )
 
-            # 2. Prepare plot data (using raw numbers)
-            plot_df = df.copy()
-
-            # 3. Format percentage for the table
-            df["Trend Score"] = df["probability"].apply(lambda x: f"{x:.1%}")
+            # Format percentage for the table view
+            table_df["probability"] = table_df["probability"].apply(
+                lambda x: f"{x:.1%}"
+            )
 
-            # Final table selection
-            table_df = df[["Repository", "language", "Trend Score"]]
-            table_df.columns = ["Repository", "Language", "Trend Score"]
+            # Select and rename columns for display
+            table_df = table_df[["repo_name", "language", "probability"]]
+            table_df.columns = ["Repository", "Language", "Trend Probability"]
 
-            return table_df, f"📅 Last Prediction Run: {date}", plot_df
+            return table_df, f"📅 Last Prediction Run: {date}", df
 
     except Exception as e:
-        return pd.DataFrame({"Error": [str(e)]}), "Error", None
+        return pd.DataFrame({"Error": [str(e)]}), "⚠️ Error loading data", None
 
 
-# Custom CSS for a sleek, modern look
+# Modern GitHub-like CSS
 custom_css = """
-footer {visibility: hidden}
-.gradio-container {background-color: #0d1117 !important; color: white !important;}
-table {border-collapse: collapse !important; border-radius: 8px !important; overflow: hidden !important;}
-thead th {background-color: #161b22 !important; color: #8b949e !important;}
+.gradio-container {background-color: #0d1117 !important;}
+label {color: #8b949e !important;}
+footer {display: none !important;}
 """
 
-with gr.Blocks(
-    theme=gr.themes.Soft(primary_hue="blue", secondary_hue="slate"), css=custom_css
-) as demo:
-    with gr.Column(elem_id="container"):
-        gr.HTML(
-            """
-            <div style="text-align: center; padding: 20px;">
-                <h1 style="font-size: 2.5em; margin-bottom: 0px;">📈 GitHub Trend Predictor</h1>
-                <p style="color: #8b949e;">AI-powered forecast of the next big repositories</p>
-            </div>
+with gr.Blocks() as demo:
+    gr.HTML(
         """
-        )
-
-        with gr.Row():
-            date_display = gr.Markdown(value="Loading data...", elem_id="date-box")
-
-        with gr.Tabs():
-            with gr.TabItem("📊 Probability Chart"):
-                # Horizontal Bar Plot
-                chart = gr.BarPlot(
-                    x="repo_name",
-                    y="probability",
-                    title="Top Predicted Trends",
-                    tooltip=["repo_name", "probability", "language"],
-                    vertical=False,
-                    y_label="Probability",
-                    x_label="Repository",
-                    container=True,
-                    height=400,
-                    color="language",  # Colors bars by language
-                )
-
-            with gr.TabItem("📋 Detailed List"):
-                # Table with HTML support for links
-                table = gr.Dataframe(
-                    datatype=["html", "str", "str"],  # Ensures links are clickable
-                    interactive=False,
-                    wrap=True,
-                )
-
-        refresh_btn = gr.Button("🔄 Sync Latest Predictions", variant="primary")
-
-    # Wire up the data
+        <div style="text-align: center; padding: 20px; font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Helvetica,Arial,sans-serif;">
+            <h1 style="font-size: 2.2em; color: #f0f6fc; margin-bottom: 8px;">📈 GitHub Trend Predictor</h1>
+            <p style="color: #8b949e; font-size: 1.1em;">Daily AI forecast of emerging repositories</p>
+        </div>
+    """
+    )
+
+    with gr.Row():
+        date_display = gr.Markdown(value="Checking for updates...", elem_id="date-box")
+
+    with gr.Tabs():
+        with gr.Tab("📊 Visual Forecast"):
+            chart = gr.BarPlot(
+                x="repo_name",
+                y="probability",
+                title="Trend Probability by Repository",
+                tooltip=["repo_name", "probability", "language"],
+                direction="horizontal",
+                y_label="Probability",
+                x_label="Repository",
+                color="language",
+                height=450,
+                container=True,
+            )
+
+        with gr.Tab("📋 Detailed Rankings"):
+            table = gr.Dataframe(
+                datatype=["html", "str", "str"], interactive=False, wrap=True
+            )
+
+    refresh_btn = gr.Button("🔄 Sync Latest Predictions", variant="primary")
+
+    # Load data on page entry
     demo.load(fn=get_data, outputs=[table, date_display, chart])
+    # Manual refresh
     refresh_btn.click(fn=get_data, outputs=[table, date_display, chart])
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(
+        theme=gr.themes.Soft(
+            primary_hue="blue", secondary_hue="slate", font=["Inter", "sans-serif"]
+        ),
+        css=custom_css,
+    )