Update app.py

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 import pandas as pd
 import numpy as np
+import json
 from functools import partial
 
 custom_css = """
@@ -35,8 +36,72 @@ custom_css = """
 .default-underline {
     text-decoration: underline !important;
 }
+.customrangeslider {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+}
+.customrangeslider input[type="range"] {
+    -webkit-appearance: none;
+    width: 100%;
+    height: 10px;
+    border-radius: 5px;
+    background: #d3d3d3;
+    outline: none;
+    opacity: 0.7;
+    transition: opacity .2s;
+}
+.customrangeslider input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #4CAF50;
+    cursor: pointer;
+}
+.customrangeslider input[type="range"]::-moz-range-thumb {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: #4CAF50;
+    cursor: pointer;
+}
 """
 
+class CustomRangeSlider(gr.components.Component):
+    def __init__(self, minimum, maximum, value, step, label):
+        super().__init__(self)
+        self.minimum = minimum
+        self.maximum = maximum
+        self.value = value
+        self.step = step
+        self.label = label
+
+    def get_template_context(self):
+        return {
+            "min": self.minimum,
+            "max": self.maximum,
+            "value": self.value,
+            "step": self.step,
+            "label": self.label,
+        }
+
+    @classmethod
+    def get_component_instance(cls, props):
+        return cls(**props)
+
+    def preprocess(self, x):
+        return json.loads(x)
+
+    def postprocess(self, y):
+        return json.dumps(y)
+
+    def get_block_name(self):
+        return "customrangeslider"
+
+gr.components.Component.register_component("customrangeslider")(CustomRangeSlider)
+
 # Define the columns for the different leaderboards
 UGI_COLS = ['#P', 'Model', 'UGI 🏆', 'W/10 👍', 'Unruly', 'Internet', 'Stats', 'Writing', 'PolContro']
 WRITING_STYLE_COLS = ['#P', 'Model', 'Reg+MyScore 🏆', 'Reg+Int 🏆', 'MyScore 🏆', 'ASSS⬇️', 'SMOG⬆️', 'Yule⬇️']
@@ -63,7 +128,7 @@ def load_leaderboard_data(csv_file_path):
         return pd.DataFrame(columns=UGI_COLS + WRITING_STYLE_COLS + ANIME_RATING_COLS)
 
 # Update the leaderboard table based on the search query and parameter range filters
-def update_table(df: pd.DataFrame, query: str, param_ranges: list, columns: list, w10_min: float, w10_max: float) -> pd.DataFrame:
+def update_table(df: pd.DataFrame, query: str, param_ranges: list, columns: list, w10_range: list) -> pd.DataFrame:
     filtered_df = df.copy()
     if param_ranges:
         param_mask = pd.Series(False, index=filtered_df.index)
@@ -91,7 +156,7 @@ def update_table(df: pd.DataFrame, query: str, param_ranges: list, columns: list
     
     # Apply W/10 filtering
     if 'W/10 👍' in filtered_df.columns:
-        filtered_df = filtered_df[(filtered_df['W/10 👍'] >= w10_min) & (filtered_df['W/10 👍'] <= w10_max)]
+        filtered_df = filtered_df[(filtered_df['W/10 👍'] >= w10_range[0]) & (filtered_df['W/10 👍'] <= w10_range[1])]
     
     return filtered_df[columns]
 
@@ -126,8 +191,7 @@ with GraInter:
                 elem_id="filter-columns-size",
             )
         with gr.Row():
-            w10_min = gr.Slider(minimum=0, maximum=10, value=0, step=0.1, label="Min W/10")
-            w10_max = gr.Slider(minimum=0, maximum=10, value=10, step=0.1, label="Max W/10")
+            w10_range = CustomRangeSlider(minimum=0, maximum=10, value=[0, 10], step=0.1, label="W/10 Range")
     
     # Load the initial leaderboard data
     leaderboard_df = load_leaderboard_data("ugi-leaderboard-data.csv")
@@ -247,42 +311,36 @@ with GraInter:
             **NA:** When models either reply with one number for every anime, give ratings not between 1 and 10, or don't give every anime in the list a rating.
             """)
 
-    def update_all_tables(query, param_ranges, w10_min, w10_max):
-        ugi_table = update_table(leaderboard_df, query, param_ranges, UGI_COLS, w10_min, w10_max)
+    def update_all_tables(query, param_ranges, w10_range):
+        ugi_table = update_table(leaderboard_df, query, param_ranges, UGI_COLS, w10_range)
         
         ws_df = leaderboard_df.sort_values(by='Reg+MyScore 🏆', ascending=False)
-        ws_table = update_table(ws_df, query, param_ranges, WRITING_STYLE_COLS, w10_min, w10_max)
+        ws_table = update_table(ws_df, query, param_ranges, WRITING_STYLE_COLS, w10_range)
         
         arp_df = leaderboard_df.sort_values(by='Score 🏆', ascending=False)
         arp_df_na = arp_df[arp_df[['Dif', 'Cor']].isna().any(axis=1)]
         arp_df = arp_df[~arp_df[['Dif', 'Cor']].isna().any(axis=1)]
         
-        arp_table = update_table(arp_df, query, param_ranges, ANIME_RATING_COLS, w10_min, w10_max)
-        arp_na_table = update_table(arp_df_na, query, param_ranges, ANIME_RATING_COLS, w10_min, w10_max).fillna('NA')
+        arp_table = update_table(arp_df, query, param_ranges, ANIME_RATING_COLS, w10_range)
+        arp_na_table = update_table(arp_df_na, query, param_ranges, ANIME_RATING_COLS, w10_range).fillna('NA')
         
         return ugi_table, ws_table, arp_table, arp_na_table
 
     search_bar.change(
         fn=update_all_tables,
-        inputs=[search_bar, filter_columns_size, w10_min, w10_max],
+        inputs=[search_bar, filter_columns_size, w10_range],
         outputs=[leaderboard_table_ugi, leaderboard_table_ws, leaderboard_table_arp, leaderboard_table_arp_na]
     )
     
     filter_columns_size.change(
         fn=update_all_tables,
-        inputs=[search_bar, filter_columns_size, w10_min, w10_max],
-        outputs=[leaderboard_table_ugi, leaderboard_table_ws, leaderboard_table_arp, leaderboard_table_arp_na]
-    )
-
-    w10_min.change(
-        fn=update_all_tables,
-        inputs=[search_bar, filter_columns_size, w10_min, w10_max],
+        inputs=[search_bar, filter_columns_size, w10_range],
         outputs=[leaderboard_table_ugi, leaderboard_table_ws, leaderboard_table_arp, leaderboard_table_arp_na]
     )
 
-    w10_max.change(
+    w10_range.change(
         fn=update_all_tables,
-        inputs=[search_bar, filter_columns_size, w10_min, w10_max],
+        inputs=[search_bar, filter_columns_size, w10_range],
         outputs=[leaderboard_table_ugi, leaderboard_table_ws, leaderboard_table_arp, leaderboard_table_arp_na]
     )