app/draw_diagram.py

import streamlit as st
import pandas as pd
import numpy as np
from streamlit_echarts import st_echarts
from streamlit.components.v1 import html
# from PIL import Image 
from app.show_examples import *
import pandas as pd

# huggingface_image = Image.open('style/huggingface.jpg')

# other info 
#path = "./AudioBench-Leaderboard/additional_info/Leaderboard-Rename.xlsx"
path = "./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, cus_sort=True):
    
    folder = f"./results/{metrics}/"

    display_names = {
        'SU': 'Speech Understanding',
        'ASU': 'Audio Scene Understanding',
        'VU': 'Voice Understanding'
    }
    
    data_path = f'{folder}/{category_name.lower()}.csv'
    chart_data = pd.read_csv(data_path).round(3)
    new_dataset_name = dataset_name.replace('-', '_').lower()
    chart_data = chart_data[['Model', new_dataset_name]]
    
    st.markdown("""
                <style>
                .stMultiSelect [data-baseweb=select] span {
                    max-width: 800px;
                    font-size: 0.9rem;
                    background-color: #3C6478 !important; /* Background color for selected items */
                    color: white; /* Change text color */
                    back
                }
                </style>
                """, unsafe_allow_html=True)
    
    # 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_show'] = chart_data['Model'].map(display_model_names)

    models = st.multiselect("Please choose the model", 
                            sorted(chart_data['model_show'].tolist()), 
                            default = sorted(chart_data['model_show'].tolist()),
                            )
    
    chart_data = chart_data[chart_data['model_show'].isin(models)]
    chart_data = chart_data.sort_values(by=[new_dataset_name], ascending=cus_sort).dropna(axis=0)

    if len(chart_data) == 0:
        return

    # Get Values
    data_values = chart_data.iloc[:, 1]
    
    # Calculate Q1 and Q3
    q1 = data_values.quantile(0.25)
    q3 = data_values.quantile(0.75)

    # Calculate IQR
    iqr = q3 - q1

    # Define lower and upper bounds (1.5*IQR is a common threshold)
    lower_bound = q1 - 1.5 * iqr
    upper_bound = q3 + 1.5 * iqr

    # Filter data within the bounds
    filtered_data = data_values[(data_values >= lower_bound) & (data_values <= upper_bound)]

    # Calculate min and max values after outlier handling
    min_value = round(filtered_data.min() - 0.1 * filtered_data.min(), 3)
    max_value = round(filtered_data.max() + 0.1 * filtered_data.max(), 3)

    options = {
        #"title": {"text": f"{display_names[folder_name.upper()]}"},
        "title": {"text": f"{dataset_name}"},
        "tooltip": {
            "trigger": "axis",
            "axisPointer": {"type": "cross", "label": {"backgroundColor": "#6a7985"}},
            "triggerOn": 'mousemove',
        },
        "legend": {"data": ['Overall Accuracy']},
        "toolbox": {"feature": {"saveAsImage": {}}},
        "grid": {"left": "3%", "right": "4%", "bottom": "3%", "containLabel": True},
        "xAxis": [
            {
                "type": "category",
                "boundaryGap": True,
                "triggerEvent": True,
                "data":  chart_data['model_show'].tolist(),
            }
        ],
        "yAxis": [{"type": "value", 
                    "min": min_value,
                    "max": max_value, 
                    "boundaryGap": True
                    # "splitNumber": 10
                    }],
        "series": [{
                "name": f"{dataset_name}",
                "type": "bar",
                "data": chart_data[f'{new_dataset_name}'].tolist(),
            }],
    }
    
    events = {
        "click": "function(params) { return params.value }"
    }

    value = st_echarts(options=options, events=events, height="500px")
    
    # if value != None:
    #     # print(value)
    #     nav_to(value)

    # if value != None:
    #     highlight_table_line(value)

    '''
    Show table
    '''
    # st.divider()
    with st.container():
        # st.write("")
        st.markdown('##### Results')
        # custom_css = """
                   
        #             """
        # 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'])}

        chart_data['model_link'] = chart_data['model_show'].map(model_link) 

        chart_data_table = chart_data[['model_show', chart_data.columns[1], chart_data.columns[3]]]

        cur_dataset_name = chart_data_table.columns[1]
        print(cur_dataset_name)

        if cur_dataset_name in [
                            'librispeech_test_clean',
                            'librispeech_test_other',
                            'common_voice_15_en_test',
                            'peoples_speech_test',
                            'gigaspeech_test',
                            'earnings21_test',
                            'earnings22_test',
                            'tedlium3_test',
                            'tedlium3_long_form_test',
                            'imda_part1_asr_test',
                            'imda_part2_asr_test',

                            'aishell_asr_zh_test',
                            ]:
            
            styled_df = chart_data_table.style.highlight_min(
                subset=[chart_data_table.columns[1]], color='yellow'
            )
        else:

            chart_data_table = chart_data_table.sort_values(
                    by=chart_data_table.columns[1],
                    ascending=False
                ).reset_index(drop=True)

            styled_df = chart_data_table.style.highlight_max(
                subset=[chart_data_table.columns[1]], color='yellow'
            )

        st.dataframe(
                styled_df,
                column_config={
                    'model_show': 'Model',
                    chart_data_table.columns[1]: {'alignment': 'left'},
                    "model_link": st.column_config.LinkColumn(
                        "Model Link",
                        # # # help="",
                        # validate=r"^https://(.*?)$",
                        # # max_chars=100,
                        # display_text=r"\[(.*?)\]"
                    ),
                },
                hide_index=True,
                use_container_width=True
            )
        

        


        # s = ''
        # for model in models:
        #     try:
        #         # <td align="center"><input type="checkbox" name="select"></td>
        #         s += f"""<tr>
        #             <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 all function
        # select_all_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>"""
        # st.markdown(f"""
        #             <div class="select_all">{select_all_function}</div>
        #             """, unsafe_allow_html=True)

        # info_body_details = f"""
        #     <table style="width:80%">
        #         <thead>
        #             <tr style="text-align: center;">
        #                 <th style="width:45%">MODEL</th>
        #                 <th style="width:45%">{dataset_name}</th>
        #             </tr>
        #             {s}
        #         </thead>
        #     </table>
        # """
        # #<th style="width:10%"><input type="checkbox" onclick="toggle(this);"></th>
        # # html_code = custom_css + select_all_function + info_body_details
        # # html(html_code, height = 300)
                    
        # 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
    '''
    if dataset_name in ['Earnings21-Test', 'Earnings22-Test', 'Tedlium3-Test', 'Tedlium3-Long-form-Test']:
        pass
    else:
        show_examples(category_name, dataset_name, chart_data['Model'].tolist(), display_model_names)