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 = "/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):
    
    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;
                    }
                </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'] = 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)

    if len(chart_data) == 0:
        return
    
    min_value = round(chart_data.iloc[:, 1::].min().min() - 0.1*chart_data.iloc[:, 1::].min().min(), 1) 
    max_value = round(chart_data.iloc[:, 1::].max().max() + 0.1*chart_data.iloc[:, 1::].max().max(), 1)         

    options = {
        "title": {"text": f"{display_names[folder_name.upper()]}"},
        "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'].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('##### TABLE')
        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'])}

        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 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: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>
        """
        # 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-Long-form-Test']:
        pass
    else:
        show_examples(category_name, dataset_name, chart_data['Model'].tolist())