ui: fix grid plot

app.py

@@ -3,6 +3,7 @@ import os
 
 import gradio as gr
 import pandas as pd
+import plotly.express as px
 
 
 def get_data():
@@ -16,85 +17,66 @@ def get_data():
 
         predictions_list = raw_data.get("predictions", [])
         date = raw_data.get("prediction_date", "Unknown Date")
-
         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)
+            df = df.sort_values(
+                by="probability", ascending=True
+            )  # Ascending for horizontal bar
+
+            # Create Plotly Chart
+            fig = px.bar(
+                df,
+                x="probability",
+                y="repo_name",
+                orientation="h",
+                color="language",
+                title="Trend Probability by Repository",
+                labels={
+                    "probability": "Probability",
+                    "repo_name": "Repository",
+                    "language": "Language",
+                },
+                template="plotly_dark",
+            )
+            fig.update_layout(
+                paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)"
+            )
 
-            # Create a copy for the table with HTML links
-            table_df = df.copy()
+            # Prepare Table
+            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>'
             )
-
-            # Format percentage for the table view
             table_df["probability"] = table_df["probability"].apply(
                 lambda x: f"{x:.1%}"
             )
-
-            # 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}", df
+            return table_df, f"📅 Last Prediction Run: {date}", fig
 
     except Exception as e:
         return pd.DataFrame({"Error": [str(e)]}), "⚠️ Error loading data", None
 
 
-# Modern GitHub-like CSS
-custom_css = """
-.gradio-container {background-color: #0d1117 !important;}
-label {color: #8b949e !important;}
-footer {display: none !important;}
-"""
-
 with gr.Blocks() as demo:
     gr.HTML(
-        """
-        <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>
-    """
+        '<div style="text-align: center; padding: 20px;"><h1 style="color: white;">📈 GitHub Trend Predictor</h1></div>'
     )
-
-    with gr.Row():
-        date_display = gr.Markdown(value="Checking for updates...", elem_id="date-box")
+    date_display = gr.Markdown(value="Checking for updates...")
 
     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,
-            )
+            chart = gr.Plot()  # Stable Plotly container
 
         with gr.Tab("📋 Detailed Rankings"):
-            table = gr.Dataframe(
-                datatype=["html", "str", "str"], interactive=False, wrap=True
-            )
+            table = gr.Dataframe(datatype=["html", "str", "str"], interactive=False)
 
     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(
-        theme=gr.themes.Soft(
-            primary_hue="blue", secondary_hue="slate", font=["Inter", "sans-serif"]
-        ),
-        css=custom_css,
-    )
+    # We remove CSS/Theme from here to ensure the core app starts even if Gradio 6.x config is strict
+    demo.launch()

requirements.txt

@@ -1,2 +1,3 @@
-gradio
+gradio>=6.0.0
 pandas
+plotly