ui: make pretty :)

app.py

@@ -8,55 +8,94 @@ import pandas as pd
 def get_data():
     file_path = "predictions.json"
     if not os.path.exists(file_path):
-        return (
-            pd.DataFrame({"Status": ["File not found yet. Run GitHub Action."]}),
-            "N/A",
-        )
+        return pd.DataFrame(), "N/A", None
 
     try:
         with open(file_path, "r") as f:
             raw_data = json.load(f)
 
-        # 1. Extract the nested list
         predictions_list = raw_data.get("predictions", [])
         date = raw_data.get("prediction_date", "Unknown Date")
 
-        # 2. Convert to DataFrame
         df = pd.DataFrame(predictions_list)
 
-        # 3. Clean up the data (Optional but recommended)
         if not df.empty:
-            # Sort by highest probability
             df = df.sort_values(by="probability", ascending=False)
-            # Format probability to 2 decimal percentage (e.g., 0.953 -> 95.39%)
-            df["probability"] = df["probability"].apply(lambda x: f"{x:.2%}")
-            # Rename columns for a nicer UI
-            df.columns = ["Repository", "Main Language", "Trend Probability"]
-
-        return df, date
-
-    except Exception as e:
-        return pd.DataFrame({"Error": [str(e)]}), "Error"
 
+            # 1. Create a display version of the repo name (Clickable Link)
+            df["Repository"] = 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>'
+            )
 
-# Create the Gradio Interface
-with gr.Blocks(theme=gr.themes.Default(primary_hue="blue")) as demo:
-    gr.Markdown("# 🚀 GitHub Trend Predictor")
+            # 2. Prepare plot data (using raw numbers)
+            plot_df = df.copy()
 
-    with gr.Row():
-        date_display = gr.Textbox(label="Prediction Date", interactive=False)
+            # 3. Format percentage for the table
+            df["Trend Score"] = df["probability"].apply(lambda x: f"{x:.1%}")
 
-    with gr.Row():
-        # interactive=False removes the editing capability
-        table = gr.Dataframe(interactive=False)
+            # Final table selection
+            table_df = df[["Repository", "language", "Trend Score"]]
+            table_df.columns = ["Repository", "Language", "Trend Score"]
 
-    refresh_btn = gr.Button("🔄 Refresh Data")
+            return table_df, f"📅 Last Prediction Run: {date}", plot_df
 
-    # Load data on startup
-    demo.load(fn=get_data, outputs=[table, date_display])
+    except Exception as e:
+        return pd.DataFrame({"Error": [str(e)]}), "Error", None
+
+
+# Custom CSS for a sleek, modern look
+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;}
+"""
+
+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>
+        """
+        )
 
-    # Reload on button click
-    refresh_btn.click(fn=get_data, outputs=[table, date_display])
+        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
+    demo.load(fn=get_data, outputs=[table, date_display, chart])
+    refresh_btn.click(fn=get_data, outputs=[table, date_display, chart])
 
 if __name__ == "__main__":
     demo.launch()