Update app.py

app.py

@@ -1,145 +1,170 @@
 import gradio as gr
-import sqlite3
 import pandas as pd
-from themes import IndonesiaTheme  # Tema custom
-
-DB_PATH = "spaces.db"
+from themes import IndonesiaTheme
 
 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)
-    # df = pd.read_csv("https://huggingface.co/datasets/username/leaderboard-dataset/raw/main/leaderboard.csv")
-    # conn.close()
-
     df = pd.read_csv("https://huggingface.co/datasets/Deddy/leaderboard-dataset/raw/main/leaderboard.csv")
 
     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)
+    df = df.sort_values("likes", ascending=False).head(100).reset_index(drop=True)
 
     # 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 Name: bold, warna emas untuk top 10, emoji piala untuk top 3
+    def decorate_name(row):
+        i = row.name + 1  # row.name = index mulai dari 0
+        name = f"{row['name']}"
+        medal = ""
+        if i == 1:
+            medal = "👑 "
+        elif i == 2:
+            medal = "🏆 "
+        elif i == 3:
+            medal = "🏅 "
+        if i <= 10:
+            # Emas (#FFD700)
+            return f"<span style='color:#FFD700; font-weight:bold'>{medal}{name}</span>"
+        return f"<b>{name}</b>"
+
+    df["decorated_name"] = df.apply(decorate_name, axis=1)
 
     # Kolom Status: warna dinamis
     def format_status(s):
-        if "running" in s.lower():
-            return f"<span style='color:green;font-weight:bold'>{s}</span>"
+        if isinstance(s, str) and "running" in s.lower():
+            return f"<span style='color:lime;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;
-}
-"""
-
+    df["status_fmt"] = df["status"].apply(format_status)
+
+    # Susun ulang kolom: No, Name, dst
+    df_final = pd.DataFrame()
+    df_final["No"] = range(1, len(df) + 1)
+    df_final["📛 Name"] = df["decorated_name"]
+    df_final["👤 Author"] = df["author"]
+    df_final["📝 Description"] = df["desc"]
+    df_final["❤️ Likes"] = df["likes"]
+    df_final["🕒 Updated"] = df["updated"]
+    df_final["⚙️ Status"] = df["status_fmt"]
+    df_final["🔗 Visit"] = df["🔗 Visit"]
+
+    return df_final
+
+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: 1.02rem;
+        font-family: 'Segoe UI', sans-serif;
+        background-color: #191a22;
+        color: #e0e0e0;
+        border-radius: 16px;
+        overflow: hidden;
+        box-shadow: 0 4px 24px #00000030;
+    }}
+    .styled-table th {{
+        background: linear-gradient(90deg, #5f0a87 0%, #a4508b 100%);
+        text-align: left;
+        padding: 12px;
+        border-bottom: 3px solid #FFD70080;
+        font-size: 1.08rem;
+        letter-spacing: 1px;
+        color: #ffe29f;
+    }}
+    .styled-table td {{
+        padding: 12px 10px;
+        border-bottom: 1px solid #222;
+        vertical-align: top;
+        font-size: 0.97rem;
+    }}
+    .styled-table tr:nth-child(even) td {{
+        background-color: #1e2030;
+    }}
+    .styled-table tr:hover td {{
+        background-color: #343651;
+        transition: background 0.2s;
+    }}
+    .styled-table td a {{
+        color: #FFBF00;
+        text-decoration: none;
+        font-weight: bold;
+        transition: color 0.2s;
+    }}
+    .styled-table td a:hover {{
+        color: #fff700;
+    }}
+    .styled-table td:first-child {{
+        text-align: center;
+        font-weight: bold;
+        color: #FFD700;
+        background: linear-gradient(180deg, #24243e 0%, #191a22 100%);
+        border-right: 2px solid #FFD70022;
+    }}
+    </style>
+    {html_table}
+    """
+
+css = ""  # CSS sudah di-inject via render_html_table
 
-# === 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()
+    gr.Markdown("""
+    <div style='
+        background: linear-gradient(90deg, #5f0a87 0%, #a4508b 100%);
+        color: #fffde4;
+        padding: 36px 8px 22px 8px;
+        border-radius: 20px;
+        text-align:center;
+        font-size:2.0rem;
+        font-weight:bold;
+        letter-spacing: 1.5px;
+        margin-bottom: 16px;
+        box-shadow: 0 6px 48px #00000044;'>
+    🚀 <span style='color:#FFD700'>100 SPACES TERPOPULER HUGGING FACE! - HOURLY UPDATE!!🔥</span> 🚀<br>
+    <span style='font-size:1.16rem; font-weight:500; letter-spacing:1px;'>Tersaring dari ribuan aplikasi, hanya yang terbaik, terfavorit, dan paling inovatif yang masuk leaderboard ini!<br>
+    Siapkah kamu menemukan Space AI idamanmu hari ini? <span style='color:#ffe29f'>✨</span></span>
+    </div>
+    """)
+    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")
+        gr.Markdown("""
+        <div style='
+            color:#693f00;
+            padding: 24px 6px 18px 6px;
+            border-radius: 18px;
+            font-size: 1.12rem;
+            text-align:center;
+            margin-top:18px;
+            box-shadow: 0 3px 24px #FFD70033;
+            font-weight:bold;
+        '>
+        🎉 <b>Selamat untuk seluruh Space yang masuk 100 besar! Kalian membanggakan komunitas AI Dunia! 🚀🔥</b><br>
+        <span style='font-size:1.55rem;'>Terus berkarya, jangan berhenti berinovasi! 💪🌟🥳</span>
+        </div>
+        """)
+    gr.Button("🔄 Refresh").click(fn=render_html_table,
+                                  inputs=[status_choice, keyword_input], outputs=output_table)
+
+    gr.Markdown("#### Made with ❤️ by Deddy | HuggingFace Popular Space Leaderboard - Update Every Hour 🔥", elem_id="footer")
+
+    # Inisialisasi tampilan awal
+    output_table.value = render_html_table("All", "")
+
+# Jalankan aplikasi Gradio (local/web)
+demo.queue(api_open=False).launch(show_api=False)