Upload folder using huggingface_hub

app/draw_diagram.py

@@ -5,6 +5,7 @@ from streamlit_echarts import st_echarts
 # from streamlit_echarts import JsCode
 from streamlit_javascript import st_javascript
 # from PIL import Image 
+from app.show_examples import *
 
 links_dic = {}
 
@@ -38,27 +39,16 @@ def draw(folder_name, category_name, dataset_name, metrics):
     # else:
     #     ascend = False
 
-    dataset_name = dataset_name.replace('-', '_').lower()
-    chart_data = chart_data[['Model', dataset_name]]
+    new_dataset_name = dataset_name.replace('-', '_').lower()
+    chart_data = chart_data[['Model', new_dataset_name]]
     
-    chart_data = chart_data.sort_values(by=[dataset_name], ascending=True).dropna(axis=0)
+    chart_data = chart_data.sort_values(by=[new_dataset_name], ascending=True).dropna(axis=0)
 
     if len(chart_data) == 0:
         return
     
     min_value = round(chart_data.iloc[:, 1::].min().min() - 0.1, 1) 
-    max_value = round(chart_data.iloc[:, 1::].max().max() + 0.1, 1) 
-
-    # columns = list(chart_data.columns)[1:]
-    # for col in columns:
-        # series.append(
-        #     {
-        #         "name": f"{col.replace('_', '-')}",
-        #         "type": "line",
-        #         "data": chart_data[f'{col}'].tolist(),
-        #     }
-        #     )
-        
+    max_value = round(chart_data.iloc[:, 1::].max().max() + 0.1, 1)         
 
     options = {
         "title": {"text": f"{display_names[folder_name.upper()]}"},
@@ -84,9 +74,9 @@ def draw(folder_name, category_name, dataset_name, metrics):
                     # "splitNumber": 10
                     }],
         "series": [{
-                "name": f"{dataset_name.replace('_', '-')}",
+                "name": f"{dataset_name}",
                 "type": "line",
-                "data": chart_data[f'{dataset_name}'].tolist(),
+                "data": chart_data[f'{new_dataset_name}'].tolist(),
             }],
     }
     
@@ -103,14 +93,22 @@ def draw(folder_name, category_name, dataset_name, metrics):
     # if value != None:
     #     highlight_table_line(value)
 
-    ### create table
-    st.divider()
+    '''
+    Show table
+    '''
+    # st.divider()
+    with st.expander('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)
+        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
+    '''
+    show_examples(category_name, dataset_name, chart_data['Model'].tolist())
+    

app/pages.py

@@ -36,9 +36,9 @@ def dashboard():
         
         st.markdown("###### :dart: Our Benchmark includes: ")
         cols = st.columns(10)
-        cols[1].metric(label="Tasks", value="8", delta="Tasks", delta_color="off")
-        cols[2].metric(label="Datasets", value="26", delta="Datasets", delta_color="off")
-        cols[3].metric(label="Test On", value="4", delta="Models", delta_color="off")
+        cols[1].metric(label="Tasks", value="8") #delta="Tasks", delta_color="off"
+        cols[2].metric(label="Datasets", value="26")
+        cols[3].metric(label="Test Models", value="5")
 
         # st.markdown("###### :dart: Supported Models and Datasets: ")
         
@@ -53,7 +53,6 @@ def dashboard():
         # st.data_editor(sup, num_rows="dynamic")
 
 
-
     st.divider()
     with st.container():
         st.markdown("##### Citations")
@@ -112,6 +111,10 @@ def asr():
     else:
         draw('su', 'ASR', 'LibriSpeech-Test-Clean', 'wer')
 
+
+    ## examples
+    
+
 def sqa():
     st.title("Speech Question Answering")
     

app/show_examples.py

@@ -0,0 +1,99 @@
+import streamlit as st
+import datasets
+import numpy as np
+import soundfile as sf
+
+
+def show_examples(category_name, dataset_name, model_lists):
+    st.divider()
+    sample_folder = f"./examples/{category_name}/{dataset_name}"
+    dataset = datasets.load_from_disk(sample_folder)
+
+    for index in range(len(dataset)):
+
+        with st.expander(f'EXAMPLE {index+1}'):
+            col1, col2 = st.columns([0.3, 0.7], vertical_alignment="center")
+
+            with col1:
+                st.audio(f'{sample_folder}/sample_{index}.wav', format="audio/wav")
+                      
+            with col2:
+                with st.container():
+                    custom_css = """
+                                <style>
+                                .my-container-question {
+                                background-color: #F5EEF8;
+                                padding: 10px;
+                                border-radius: 10px;
+                                height: 50px;
+                                }
+                                </style>
+                                """
+                    st.markdown(custom_css, unsafe_allow_html=True)
+                    st.markdown(f"""<div class="my-container-question">
+                                <p>QUESTION: {dataset[index]['instruction']['text']}</p>
+                                </div>""", unsafe_allow_html=True)
+                
+                with st.container():
+                    custom_css = """
+                                <style>
+                                .my-container-answer {
+                                background-color: #F9EBEA;
+                                padding: 10px;
+                                border-radius: 10px;
+                                height: 50px;
+                                }
+                                </style>
+                                """
+                    st.markdown(custom_css, unsafe_allow_html=True)
+                    st.markdown(f"""<div class="my-container-answer">
+                                <p>CORRECT ANSWER: {dataset[index]['answer']['text']}</p>
+                                </div>""", unsafe_allow_html=True)
+
+            
+            st.divider()
+            with st.container():
+                custom_css = """
+                            <style>
+                            .my-container-table {
+                            background-color: #F8F9F9;
+                            padding: 10px;
+                            border-radius: 5px;
+                            # height: 50px;
+                            }
+                            </style>
+                            """
+                st.markdown(custom_css, unsafe_allow_html=True)
+
+                model_lists.sort()
+                
+                s = ''
+                for model in model_lists:
+                    try:
+                        s += f"""<tr>
+                            <td>{model}</td>
+                            <td>{dataset[index][model]['text']}</td>
+                            <td>{dataset[index][model]['model_prediction']}</td>
+                        </tr>"""
+                    except:
+                        print(f"{model} is not in {dataset_name}")
+                        continue
+                
+                body_details = f"""<table style="width:100%">
+                <thead>
+                    <tr style="text-align: center;">
+                        <th style="width:20%">MODEL</th>
+                        <th style="width:40%">QUESTION</th>
+                        <th style="width:40%">MODEL PREDICTION</th>
+                    </tr>
+                {s}
+                </thead>
+                </table>"""
+                
+                st.markdown(f"""<div class="my-container-table">
+                                {body_details}
+                                </div>""", unsafe_allow_html=True)
+                
+                # st.markdown(body_details, unsafe_allow_html=True)
+    
+