Upload 3 files

app.py

@@ -0,0 +1,142 @@
+import gradio as gr
+import sqlite3
+import pandas as pd
+from themes import IndonesiaTheme  # Tema custom
+
+DB_PATH = "spaces.db"
+
+def load_data(status_filter="All", keyword=""):
+    conn = sqlite3.connect(DB_PATH)
+    query = "SELECT name, author, desc, likes, updated, status, link FROM spaces"
+    df = pd.read_sql_query(query, conn)
+    conn.close()
+
+    if status_filter != "All":
+        df = df[df['status'].str.contains(status_filter, case=False, na=False)]
+
+    if keyword.strip():
+        df = df[df['name'].str.contains(keyword, case=False, na=False)]
+
+    df = df.sort_values("likes", ascending=False).head(20)
+
+    # Kolom Visit tetap
+    df["🔗 Visit"] = df["link"].apply(lambda url: f"<a href='{url}' target='_blank'>🌐 Visit</a>")
+
+    # Kolom Name: bold
+    df["name"] = df["name"].apply(lambda name: f"<b>{name}</b>")
+
+    # Kolom Status: warna dinamis
+    def format_status(s):
+        if "running" in s.lower():
+            return f"<span style='color:green;font-weight:bold'>{s}</span>"
+        else:
+            return f"<span style='color:red;font-weight:bold'>{s}</span>"
+
+    df["status"] = df["status"].apply(format_status)
+
+    # Susun ulang kolom
+    df = df[["name", "author", "desc", "likes", "updated", "status", "🔗 Visit"]]
+    df.columns = ["📛 Name", "👤 Author", "📝 Description", "❤️ Likes", "🕒 Updated", "⚙️ Status", "🔗 Visit"]
+
+
+    return df.reset_index(drop=True)
+
+def view_leaderboard(status, keyword):
+    return load_data(status, keyword)
+
+css = """
+table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+    font-size: 0.92rem;
+}
+
+th {
+    background: #f0f0f0;
+    padding: 8px;
+    text-align: left;
+    font-weight: bold;
+    border-bottom: 2px solid #ccc;
+}
+
+td {
+    padding: 8px;
+    border-bottom: 1px solid #eee;
+    vertical-align: top;
+}
+
+tr:hover {
+    background-color: #f9f9f9;
+}
+
+td a {
+    text-decoration: none;
+    color: #1e90ff;
+    font-weight: bold;
+}
+"""
+
+
+# === Gradio App UI ===
+with gr.Blocks(theme=IndonesiaTheme()) as demo:
+    with gr.Column():
+        gr.Markdown("## 🌌 HuggingFace Spaces Leaderboard")
+        gr.Markdown("🎯 Menampilkan 20 space dengan jumlah like terbanyak + link kunjungan langsung")
+
+        with gr.Row():
+            with gr.Column(elem_id="col-left"):
+                status_choice = gr.Dropdown(["All", "Running", "Zero", "Stopped"],
+                                            label="🎛️ Filter Status", value="All")
+            with gr.Column(elem_id="col-mid"):
+                keyword_input = gr.Textbox(label="🔍 Search by Name",
+                                           placeholder="e.g. llama, tts, image")
+
+        with gr.Column(elem_id="col-bott"):
+            output_table = gr.HTML(label="Leaderboard Table")
+
+        def render_html_table(status, keyword):
+            df = load_data(status, keyword)
+            html_table = df.to_html(escape=False, index=False, classes="styled-table")
+            return f"""
+            <style>
+            .styled-table {{
+                width: 100%;
+                border-collapse: collapse;
+                font-size: 0.9rem;
+                font-family: 'Segoe UI', sans-serif;
+                background-color: #1e1e1e;
+                color: #e0e0e0;
+            }}
+            .styled-table th {{
+                background-color: #2e2e2e;
+                text-align: left;
+                padding: 10px;
+                border-bottom: 2px solid #444;
+            }}
+            .styled-table td {{
+                padding: 10px;
+                border-bottom: 1px solid #333;
+                vertical-align: top;
+            }}
+            .styled-table tr:hover td {{
+                background-color: #2a2a2a;
+            }}
+            a {{
+                color: #4da6ff;
+                text-decoration: none;
+                font-weight: bold;
+            }}
+            </style>
+            {html_table}
+            """
+
+
+        status_choice.change(fn=render_html_table, inputs=[status_choice, keyword_input], outputs=output_table)
+        keyword_input.change(fn=render_html_table, inputs=[status_choice, keyword_input], outputs=output_table)
+        gr.Button("🔄 Refresh").click(fn=render_html_table,
+                                      inputs=[status_choice, keyword_input], outputs=output_table)
+
+        gr.Markdown("#### Made with ❤️ by Deddy | HuggingFace Leaderboard Mirror", elem_id="footer")
+
+demo.launch()

themes.py

@@ -0,0 +1,51 @@
+from __future__ import annotations
+from typing import Iterable
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+
+class IndonesiaTheme(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.red,
+        secondary_hue: colors.Color | str = colors.gray,
+        neutral_hue: colors.Color | str = colors.gray,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_md,
+        text_size: sizes.Size | str = sizes.text_md,
+        font: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Quicksand"),
+            "ui-sans-serif",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Mono"),
+            "ui-monospace",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+
+        # Override latar belakang utama body
+        self.set(
+            body_background_fill="linear-gradient(180deg, #111111 0%, #222222 100%)",
+            body_text_color="#e0e0e0",
+            block_background_fill="#2a2a2a",
+            block_border_width="0px",
+            block_shadow="none",
+            button_primary_background_fill="#ff4b5c",
+            button_primary_text_color="white",
+        )