Modify UI (#8)

- mod - Modify UI (5a84de9e83bbac38ebd6d697789d90c5d1de8acc)


Co-authored-by: Y <q275343119@users.noreply.huggingface.co>

app.py

@@ -26,6 +26,13 @@ nav = get_nav_from_toml(
 # Add custom CSS
 css = "\n".join(LI_CSS)
 st.markdown(f"""
+    <style>
+
+        div[data-testid="stToolbar"] {{visibility: hidden; height: 0px;}}
+
+        footer {{visibility: hidden;}}
+    </style>
+
     <style>
         {css}
     </style>
@@ -34,6 +41,6 @@ st.markdown(f"""
 
 pg = st.navigation(nav)
 
-add_page_title(pg)
+# add_page_title(pg)
 
 pg.run()

app/backend/data_engine.py

@@ -83,7 +83,9 @@ class DataEngine:
             df_results_list.append(df_result_row)
         df_result = pd.concat(df_results_list)
 
-        df_result = df_result[["model_name", "dataset_name", "ndcg_at_10"]]
+        df_result = df_result[["model_name", "dataset_name", "ndcg_at_10", "embd_dim", "embd_dtype"]]
+
+        df_result["ndcg_at_10"] = (df_result["ndcg_at_10"] * 100).round(2)
 
         df_datasets_list = []
         for item in self.datasets:
@@ -105,44 +107,29 @@ class DataEngine:
         df = pd.merge(df_result, df_dataset, on=["dataset_name"], how="inner")
         # df = pd.merge(df, df_model, on=["model_name"], how="inner")
 
-        dataset_num_map = {}
-        grouped_dataset_count = df.groupby(["group_name"]).agg({
-            "dataset_name": "nunique"
-        }).reset_index()
-
-        for _, row in grouped_dataset_count.iterrows():
-            dataset_num_map[row["group_name"]] = row["dataset_name"]
+        # dataset_num_map = {}
+        # grouped_dataset_count = df.groupby(["group_name"]).agg({
+        #     "dataset_name": "nunique"
+        # }).reset_index()
+        #
+        # for _, row in grouped_dataset_count.iterrows():
+        #     dataset_num_map[row["group_name"]] = row["dataset_name"]
 
-        # Create a list of open datasets
-        open_datasets = []
-        for result in results_list:
-            if not result.get("is_closed", False):
-                open_datasets.append(result["dataset_name"])
-
-        # Count open datasets
-        open_dataset_count = len(open_datasets)
-
-        grouped_model = df.groupby(["model_name", "group_name"]).agg({
+        grouped_model = df.groupby(["model_name", "group_name", "embd_dim", "embd_dtype"]).agg({
             "ndcg_at_10": "mean",
         }).reset_index()
 
-        pivot = grouped_model.pivot(index="model_name", columns="group_name", values=["ndcg_at_10"])
+        pivot = grouped_model.pivot(index=["model_name", "embd_dim", "embd_dtype"], columns="group_name",
+                                    values=["ndcg_at_10"]).round(2)
 
         # Rename columns
         pivot.columns = list(
-            map(lambda x: f"{x[1].capitalize()} Average ({dataset_num_map[x[1]]} datasets)" if x[1] != 'text' else f"Average ({dataset_num_map[x[1]]} datasets)",
-                pivot.columns))
-
-        pivot_dataset = df_result.pivot(index="model_name", columns="dataset_name", values="ndcg_at_10")
+            map(lambda x: f"{x[1].capitalize()} Average" if x[1] != 'text' else f"Average", pivot.columns))
 
-        # Calculate open average
-        open_df = df_result[df_result["dataset_name"].isin(open_datasets)]
-        open_avg = open_df.groupby("model_name")["ndcg_at_10"].mean().reset_index()
-        open_avg = open_avg.rename(columns={"ndcg_at_10": f"Open average ({open_dataset_count} datasets)"})
+        pivot_dataset = df_result.pivot(index=["model_name", "embd_dim", "embd_dtype"], columns="dataset_name", values="ndcg_at_10")
 
-        df = pd.merge(df_model, pivot, on="model_name")
-        df = pd.merge(df, open_avg, on="model_name")
-        df = pd.merge(df, pivot_dataset, on="model_name")
+        df = pd.merge(df_model, pivot, on=["model_name", "embd_dim", "embd_dtype"])
+        df = pd.merge(df, pivot_dataset, on=["model_name", "embd_dim", "embd_dtype"])
 
         if df.empty:
             return pd.DataFrame(columns=COLUMNS + ["reference"])

app/backend/data_page.py

@@ -3,11 +3,14 @@
 # @Author   : q275343119
 # @File     : data_page.py
 # @Description:
+import io
+
 from st_aggrid import AgGrid, JsCode, ColumnsAutoSizeMode
 
 import streamlit as st
 
 from app.backend.app_init_func import LEADERBOARD_MAP
+from app.backend.constant import LEADERBOARD_ICON_MAP
 
 COLUMNS = ['model_name',
            'embd_dtype', 'embd_dim', 'num_params', 'max_tokens', 'similarity',
@@ -37,8 +40,15 @@ def get_closed_dataset():
     return closed_list
 
 
+def convert_df_to_csv(df):
+    output = io.StringIO()
+    df.to_csv(output, index=False)
+    return output.getvalue()
+
+
 def render_page(group_name):
     # Add theme color and grid styles
+    st.title("Retrieval Embedding Benchmark (RTEB)")
     st.markdown("""
         <style>
             :root {
@@ -94,18 +104,36 @@ def render_page(group_name):
             a:hover {
                 color: rgba(129, 150, 64, 0.8) !important;
             }
+            /* Download Button */
+            button[data-testid="stBaseButton-secondary"] {
+                float: right;
+    
+            }
         </style>
     """, unsafe_allow_html=True)
 
     #  logo
     # st.markdown('<img src="https://www.voyageai.com/logo.svg" class="center-image" width="200">', unsafe_allow_html=True)
-
+    title = f'<h2 class="center-text">{LEADERBOARD_ICON_MAP.get(group_name.capitalize(), "")} {group_name.capitalize()}</h2>'
+    if is_section(group_name):
+        title = f'<h2 class="center-text">{LEADERBOARD_ICON_MAP.get(group_name.capitalize() + " Leaderboard", "")} {group_name.capitalize() + " Leaderboard"}</h2>'
     # title
-    st.markdown('<h2 class="center-text">Embedding Benchmark For Retrieval</h2>', unsafe_allow_html=True)
+    st.markdown(title, unsafe_allow_html=True)
 
     data_engine = st.session_state["data_engine"]
 
-    df = data_engine.jsons_to_df()[:]
+    df = data_engine.jsons_to_df().copy()
+
+    csv = convert_df_to_csv(df)
+    file_name = f"{group_name.capitalize()} Leaderboard" if is_section(group_name) else group_name.capitalize()
+    st.download_button(
+        label="Download CSV",
+        data=csv,
+        file_name=f"{file_name}.csv",
+        mime="text/csv",
+        icon=":material/download:",
+    )
+
     # get columns
     column_list = []
     avg_column = None
@@ -126,10 +154,8 @@ def render_page(group_name):
 
             if column.startswith(group_name.capitalize() + " "):
                 avg_column = column
-                new_column = avg_column.replace(group_name.capitalize(), "").strip()
-                df.rename(columns={avg_column: new_column}, inplace=True)
-                column_list.append(new_column)
-                avg_column = new_column
+
+                column_list.append(avg_column)
 
     dataset_list = []
 
@@ -140,16 +166,22 @@ def render_page(group_name):
         column_list.extend(dataset_list)
     closed_list = get_closed_dataset()
     close_avg_list = list(set(dataset_list) & set(closed_list))
-    df["Closed average"] = df[close_avg_list].mean(axis=1)
+    df["Closed average"] = df[close_avg_list].mean(axis=1).round(2)
     column_list.append("Closed average")
 
-    # Add Open average to the column list if it's not already there
-    open_avg_col = next((col for col in df.columns if col.startswith("Open average")), None)
-    if open_avg_col and open_avg_col not in column_list:
-        column_list.append(open_avg_col)
+    open_avg_list = list(set(dataset_list) - set(closed_list))
+    df["Open average"] = df[open_avg_list].mean(axis=1).round(2)
+    column_list.append("Open average")
 
     df = df[COLUMNS + column_list].sort_values(by=avg_column, ascending=False)
 
+    # rename avg column  name
+    if not is_section(group_name):
+        new_column = avg_column.replace(group_name.capitalize(), "").strip()
+        df.rename(columns={avg_column: new_column}, inplace=True)
+        column_list.remove(avg_column)
+        avg_column = new_column
+
     # setting column config
     grid_options = {
         'columnDefs': [
@@ -160,12 +192,16 @@ def render_page(group_name):
                 'sortable': False,
                 'headerStyle': HEADER_STYLE,
                 'cellStyle': CELL_STYLE,
+                "tooltipValueGetter": JsCode(
+                    """function(p) {return p.value}"""
+                ),
+                "width": 250,
                 'cellRenderer': JsCode("""class CustomHTML {
                     init(params) {
                         const link = params.data.reference;
                         this.eGui = document.createElement('div');
                         this.eGui.innerHTML = link ? 
-                            `<a href="${link}" target="_blank">${params.value}</a>` : 
+                            `<a href="${link}" class="a-cell" target="_blank">${params.value} </a>` : 
                             params.value;
                     }
 
@@ -173,85 +209,111 @@ def render_page(group_name):
                         return this.eGui;
                     }
                 }"""),
+                'suppressSizeToFit': True
+
             },
-            {'headerName': avg_column,
+            {'headerName': "Overall Score",
              'field': avg_column,
              'headerStyle': HEADER_STYLE,
              'cellStyle': CELL_STYLE,
-             'suppressSizeToFit': True},
+             # 'suppressSizeToFit': True
+             },
 
             # Add Open average column definition
-            {'headerName': open_avg_col if open_avg_col else 'Open average',
-             'field': open_avg_col if open_avg_col else 'Open average',
+            {'headerName': 'Open Average',
+             'field': 'Open average',
              'headerStyle': HEADER_STYLE,
              'cellStyle': CELL_STYLE,
-             'suppressSizeToFit': True},
+             # 'suppressSizeToFit': True
+             },
 
-            {'headerName': 'Closed average',
+            {'headerName': 'Closed Average',
              'field': 'Closed average',
              'headerStyle': HEADER_STYLE,
              'cellStyle': CELL_STYLE,
-             'suppressSizeToFit': True},
+             # 'suppressSizeToFit': True
+             },
 
             {
-                'headerName': 'Data Type',
+                'headerName': 'Embd Dtype',
                 'field': 'embd_dtype',
                 'headerStyle': HEADER_STYLE,
                 'cellStyle': CELL_STYLE,
-                'suppressSizeToFit': True,
+                # 'suppressSizeToFit': True,
             },
             {
                 'headerName': 'Embd Dim',
                 'field': 'embd_dim',
                 'headerStyle': HEADER_STYLE,
                 'cellStyle': CELL_STYLE,
-                'suppressSizeToFit': True,
+                # 'suppressSizeToFit': True,
             },
             {
-                'headerName': 'Model Size (# of Parameters)',
+                'headerName': 'Number of Parameters',
                 'field': 'num_params',
                 'cellDataType': 'number',
                 'headerStyle': HEADER_STYLE,
                 'cellStyle': CELL_STYLE,
-                'suppressSizeToFit': True,
+                'valueFormatter': JsCode(
+                    """function(params) {
+                    const num = params.value;
+                    if (num >= 1e9) return (num / 1e9).toFixed(2) + "B";
+                    if (num >= 1e6) return (num / 1e6).toFixed(2) + "M";
+                    if (num >= 1e3) return (num / 1e3).toFixed(2) + "K";
+                    return num;
+                    }"""
+                ),
+                # 'suppressSizeToFit': True,
             },
             {
                 'headerName': 'Context Length',
                 'field': 'max_tokens',
                 'headerStyle': HEADER_STYLE,
                 'cellStyle': CELL_STYLE,
-                'suppressSizeToFit': True,
-            },
-            {
-                'headerName': 'Query Instruction',
-                'field': 'query_instruct',
-                'headerStyle': HEADER_STYLE,
-                'cellStyle': CELL_STYLE,
-                'suppressSizeToFit': True,
-
+                # 'suppressSizeToFit': True,
             },
-            {
-                'headerName': 'Corpus Instruction',
-                'field': 'corpus_instruct',
-                'headerStyle': HEADER_STYLE,
-                'cellStyle': CELL_STYLE,
-                'suppressSizeToFit': True,
 
-            },
-            *[{'headerName': column,
+            *[{'headerName': column if "Average" not in column else column.replace("Average", "").strip().capitalize(),
                'field': column,
                'headerStyle': HEADER_STYLE,
                'cellStyle': CELL_STYLE,
-               'suppressSizeToFit': True} for column in column_list if column not in (avg_column, "Closed average")]
+               # 'suppressSizeToFit': True
+               } for column in column_list if
+              column not in (avg_column, "Closed average", "Open average")]
         ],
         'defaultColDef': {
             'filter': True,
             'sortable': True,
-            'resizable': True
+            'resizable': True,
+            'headerClass': "multi-line-header",
+            'autoHeaderHeight': True
+        },
+        "autoSizeStrategy": {
+            "type": 'fitGridWidth',
+            "defaultMinWidth": 105,
         },
-        'autoSizeStrategy': {
-            'type': 'fitCellContents'
+        "tooltipShowDelay": 500,
+
+    }
+
+    custom_css = {
+
+        ".a-cell": {
+            "display": "inline-block",
+            "white-space": "nowrap",
+            "overflow": "hidden",
+            "text-overflow": "ellipsis",
+            "width": "100%",
+            "min-width": "0"
+        },
+
+        ".multi-line-header": {
+            "text-overflow": "clip",
+            "overflow": "visible",
+            "white-space": "normal",
+            "height": "auto",
         }
+
     }
 
     AgGrid(
@@ -261,4 +323,5 @@ def render_page(group_name):
         allow_unsafe_jscode=True,
         columns_auto_size_mode=ColumnsAutoSizeMode.FIT_CONTENTS,
         theme="streamlit",
+        custom_css=custom_css
     )

utils/cache_decorator.py

@@ -31,7 +31,7 @@ def cache_dict_with_custom_key(cache_key: str):
     def decorator(func):
         @wraps(func)
         def wrapper(*args, **kwargs):
-            if cache_key in CACHE and CACHE[cache_key].get("expiry") - time.time() < TTL:
+            if cache_key in CACHE and time.time() - CACHE[cache_key].get("expiry") < TTL:
                 return CACHE[cache_key]["data"]
 
             result: dict = func(*args, **kwargs)