app.py

import json
import streamlit as st
import pandas as pd
import seaborn as sns


# Function to load data from JSON file
def load_data(file_path):
    with open(file_path, 'r', encoding='utf-8') as file:
        data = json.load(file)
    return pd.DataFrame(data)

# Function to style the DataFrame
def style_dataframe(df: pd.DataFrame):
    df['Wyniki'] = df.apply(lambda row: [row['Analiza wydźwięku'], row['Zrozumienie tekstu'], row['Znajomość związków frazeologicznych']], axis=1)

    # Insert the new column after the 'Średnia' column
    cols = list(df.columns)
    cols.insert(cols.index('Średnia') + 1, cols.pop(cols.index('Wyniki')))
    df = df[cols]

    # Create a color ramp using Seaborn
    return df

def styler(df: pd.DataFrame):
    palette = sns.color_palette("RdYlGn", as_cmap=True)
    styled_df = df.style.background_gradient(cmap=palette, subset=["Średnia", "Analiza wydźwięku", "Znajomość związków frazeologicznych", "Zrozumienie tekstu"]).format(precision=2)
    return styled_df

# Load data from JSON file
data = load_data('data.json')


# Streamlit app
st.set_page_config(layout="wide")
st.markdown("""
        <style>
               .block-container {
                    padding-top: 3%;
                    padding-bottom: 1%;
                    padding-left: 10%;
                    padding-right: 10%;
                    scrollbar-width: thin;
                }
               .header-container {
                    display: flex;
                    justify-content: space-around;  /* Evenly distribute space between elements */
               }
               @media (max-width: 768px) {
                    .header-container {
                        flex-direction: column;
                        align-items: center; /* Center the items vertically on smaller screens */
                        width: 100%;
                    }
               }
        </style>
        """, unsafe_allow_html=True)

# Add logo, title, and subheader in a flexible container with equal spacing
st.markdown("""
    <div class="header-container">
        <img src="https://speakleash.org/wp-content/uploads/2023/09/SpeakLeash_logo.svg" alt="SpeakLeash Logo">
        <div class="title-container">
            <h1>Benchmark Modeli LLM</h1>
            <h2 style="margin-top: 0;">z sarkazmami i idiomami w języku polskim</h2>
        </div>
    </div>
    """, unsafe_allow_html=True)


# Create tabs
tab1, tab2 = st.tabs(["Wyniki", "Opis"])

with tab1:
    st.write("Poniżej znajduje się tabela przedstawiająca wyniki benchmarku dla różnych modeli LLM.")

    # Display the styled DataFrame
    styled_df_show = style_dataframe(data)
    styled_df_show = styler(styled_df_show)
    # st.dataframe(styled_df_show)

    st.data_editor(styled_df_show, column_config={
                    'Średnia': st.column_config.NumberColumn('Średnia'),
                    'Wyniki': st.column_config.BarChartColumn(
                        "Wyniki", help="Zestawienie wyników poszczególnych zadań",
                        y_min=0,y_max=5,),
                    'Analiza wydźwięku': st.column_config.NumberColumn('Wydźwięk', help='Umiejętność analizy wydźwięku'),
                    'Znajomość związków frazeologicznych': st.column_config.NumberColumn('Frazeologizmy', help='Znajomość związków frazeologicznych'),
                    'Zrozumienie tekstu': st.column_config.NumberColumn('Zrozumienie tekstu', help='Umiejętność zrozumienia tekstu'),
                    },hide_index=True, disabled=True)

with tab2:
    st.header("Opis")
    st.write("Tutaj znajduje się trochę tekstu jako wypełniacz.")
    st.write("To jest przykładowy tekst, który może zawierać dodatkowe informacje o benchmarku, metodologii, itp.")

# Run the app with `streamlit run your_script.py`