Upload folder using huggingface_hub

app/draw_diagram.py

@@ -2,24 +2,24 @@ import streamlit as st
 import pandas as pd
 import numpy as np
 from streamlit_echarts import st_echarts
-# from streamlit_echarts import JsCode
-from streamlit_javascript import st_javascript
+from streamlit.components.v1 import html
 # from PIL import Image 
 from app.show_examples import *
-
-links_dic = {}
-
-links_dic = {k.lower().replace('_', '-') : v for k, v in links_dic.items()}
+import pandas as pd
 
 # huggingface_image = Image.open('style/huggingface.jpg')
 
-def nav_to(value):
-    try:
-        url = links_dic[str(value).lower()]
-        js = f'window.open("{url}", "_blank").then(r => window.parent.location.href);'
-        st_javascript(js)
-    except:
-        pass
+# other info 
+path = "/home/Collaborative_Projects/SpeechEval-Related/leadboard_st_audio/additional_info/Leaderboard-Rename.xlsx"
+info_df = pd.read_excel(path)
+
+# def nav_to(value):
+#     try:
+#         url = links_dic[str(value).lower()]
+#         js = f'window.open("{url}", "_blank").then(r => window.parent.location.href);'
+#         st_javascript(js)
+#     except:
+#         pass
 
 def draw(folder_name, category_name, dataset_name, metrics):
     
@@ -44,7 +44,15 @@ def draw(folder_name, category_name, dataset_name, metrics):
                     }
                 </style>
                 """, unsafe_allow_html=True)
-    models = st.multiselect("Please choose the model", chart_data['Model'].tolist(), default = chart_data['Model'].tolist())
+    
+    # remap model names
+    display_model_names = {key.strip() :val.strip() for key, val in zip(info_df['AudioBench'], info_df['Proper Display Name'])}
+    chart_data['Model'] = chart_data['Model'].map(display_model_names)
+
+    models = st.multiselect("Please choose the model", 
+                            chart_data['Model'].tolist(), 
+                            default =  chart_data['Model'].tolist())
+    
     chart_data = chart_data[chart_data['Model'].isin(models)]
     
     chart_data = chart_data.sort_values(by=[new_dataset_name], ascending=True).dropna(axis=0)
@@ -70,7 +78,7 @@ def draw(folder_name, category_name, dataset_name, metrics):
                 "type": "category",
                 "boundaryGap": True,
                 "triggerEvent": True,
-                "data": chart_data['Model'].tolist(),
+                "data":  chart_data['Model'].tolist(),
             }
         ],
         "yAxis": [{"type": "value", 
@@ -92,9 +100,9 @@ def draw(folder_name, category_name, dataset_name, metrics):
 
     value = st_echarts(options=options, events=events, height="500px")
     
-    if value != None:
-        # print(value)
-        nav_to(value)
+    # if value != None:
+    #     # print(value)
+    #     nav_to(value)
 
     # if value != None:
     #     highlight_table_line(value)
@@ -103,17 +111,75 @@ def draw(folder_name, category_name, dataset_name, metrics):
     Show table
     '''
     # st.divider()
-    st.write("")
-    st.markdown('##### TABLE')
-    # chart_data['Link'] = chart_data['Model'].map(links_dic)
-    st.dataframe(chart_data,
-                #  column_config = {
-                #      "Link": st.column_config.LinkColumn(
-                #          display_text= st.image(huggingface_image)
-                #      ),
-                #  }, 
-                    hide_index = True, 
-                    use_container_width=True)
+    with st.container():
+        # st.write("")
+        st.markdown('##### TABLE')
+        custom_css = """
+                    <style>
+                    .my-data-table {
+                    background-color: #FFFFFF;
+                    padding: 10px;
+                    border-radius: 5px;
+                    # height: 50px;
+                    }
+                    </style>
+                    """
+        st.markdown(custom_css, unsafe_allow_html=True)
+        
+        model_link = {key.strip(): val for key, val in zip(info_df['Proper Display Name'], info_df['Link'])}
+
+        s = ''
+        for model in models:
+            try:
+                s += f"""<tr>
+                    <td align="center"><input type="checkbox" name="select"></td>
+                    <td><a href={model_link[model]}>{model}</a></td>
+                    <td>{chart_data[chart_data['Model'] == model][new_dataset_name].tolist()[0]}</td>
+                </tr>"""
+            except:
+                # print(f"{model} is not in {dataset_name}")
+                continue
+
+        select_function = """<script>
+            function toggle(source) {
+                var checkboxes = document.querySelectorAll('input[type="checkbox"]');
+                for (var i = 0; i < checkboxes.length; i++) {
+                    if (checkboxes[i] != source)
+                        checkboxes[i].checked = source.checked;
+                }
+            }
+        </script>"""
+
+
+        info_body_details = select_function + f"""
+        <div class="my-data-table">
+            <table style="width:100%">
+                <thead>
+                    <tr style="text-align: center;">
+                        <th style="width:10%"><input type="checkbox" onclick="toggle(this);"></th>
+                        <th style="width:45%">MODEL</th>
+                        <th style="width:45%">{dataset_name}</th>
+                    </tr>
+                    {s}
+                </thead>
+            </table>
+        </div>
+        """
+        # html(info_body_details)
+                    
+        st.markdown(f"""
+                    <div class="my-data-table">{info_body_details}</div>
+                    """, unsafe_allow_html=True)
+        
+        
+    # st.dataframe(chart_data,
+    #             #  column_config = {
+    #             #      "Link": st.column_config.LinkColumn(
+    #             #          display_text= st.image(huggingface_image)
+    #             #      ),
+    #             #  }, 
+    #                 hide_index = True, 
+    #                 use_container_width=True)
     '''
     show samples
     '''