Update visuals and description

app.py

@@ -5,6 +5,7 @@ import seaborn as sns
 import plotly.graph_objects as go
 import plotly.express as px
 from st_social_media_links import SocialMediaIcons
+from streamlit_javascript import st_javascript
 
 
 AVERAGE_COLUMN_NAME = "Average"
@@ -33,12 +34,43 @@ def style_dataframe(df: pd.DataFrame):
 
 def styler(df: pd.DataFrame):
     palette = sns.color_palette("RdYlGn", as_cmap=True)
-    styled_df = df.style.background_gradient(cmap=palette, subset=[AVERAGE_COLUMN_NAME, SENTIMENT_COLUMN_NAME, PHRASEOLOGY_COLUMN_NAME, UNDERSTANDING_COLUMN_NAME]).format(precision=2)
+    styled_df = df.style.set_table_styles(
+        [{
+            'selector': 'th',
+            'props': [
+                ('background-color', '#4CAF50'),
+                ('color', 'white'),
+                ('font-family', 'Arial, sans-serif'),
+                ('font-size', '16px')
+            ]
+        }, 
+        {
+            'selector': 'td, th',
+            'props': [
+                ('border', '2px solid #4CAF50')
+            ]
+        }]
+    ).background_gradient(cmap=palette, subset=[AVERAGE_COLUMN_NAME, SENTIMENT_COLUMN_NAME, PHRASEOLOGY_COLUMN_NAME, UNDERSTANDING_COLUMN_NAME]
+                                            ).format(precision=2
+                                            )
     return styled_df
 
 
 ### Streamlit app
 st.set_page_config(layout="wide")
+# Check if background color is white using JavaScript
+st.markdown("""
+<script>
+function checkBackgroundColor() {
+    var backgroundColor = getComputedStyle(document.body).backgroundColor;
+    var isWhite = backgroundColor === 'rgb(255, 255, 255)' || backgroundColor === '#FFFFFF';
+    return isWhite;
+}
+
+var isWhiteBackground = checkBackgroundColor();
+Streamlit.setComponentValue('background_color', isWhiteBackground);
+</script>
+""", unsafe_allow_html=True)
 
 st.markdown("""
         <style>
@@ -53,7 +85,6 @@ st.markdown("""
         """, unsafe_allow_html=True)
 
 ### Prepare layout
-st.subheader("")
 
 st.markdown("""
 <style>
@@ -66,73 +97,12 @@ st.markdown("""
     .center-text {
         text-align: center;
     }
-    .table-responsive {
-        text-align: center;
-        font-size: 0.9em;
-        margin-left: 0%;
-        margin-right: 0%;
-        overflow-x: auto;
-        -ms-overflow-style: 3px;  /* Internet Explorer 10+ */
-        scrollbar-width: thin;  /* Firefox */
-    }
-    .table-responsive::-webkit-scrollbar { 
-        /*display: none;*/  /* Safari and Chrome */
-        width: 6px;
-    }
-
-    #table_id {
-      display: block;
-    }
-
-    #table_id th {
-      display: inline-block;
-    }
-
-    #table_id td {
-        padding-left: 0.7rem; 
-        padding-right: 0.7rem;
-        display: inline-block;
-    }
-    #table_id td:hover {
-        color:#FDA428;
-    }
 
-    a:link {color:#A85E00;}      /* unvisited link */
+    a:link {color:#FDA428;}      /* unvisited link */
     a:hover {color:#FDA428;}   /* Mouse over link */
-    a:visited {color:#A85E00;}  /* visited link */
-    a:active {color:#A85E00;}  /* selected link */
-
-    .image-container {
-      position: relative;
-      display: inline-block;
-      transition: transform 0.3s ease;
-    }
-
-    .image-container img {
-      vertical-align: middle;
-    }
+    a:visited {color:#FDA428;}  /* visited link */
+    a:active {color:#FDA428;}  /* selected link */
 
-    .image-container::after {
-      content: "";
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      height: 2px;
-      background-color: #FDA428; /* Change this to your desired color */
-      transform: scaleX(0);
-      transition: transform 0.3s ease;
-    }
-
-    .image-container:hover {
-      transform: translateY(-3px); /* Change the value to adjust the upward movement */
-    }
-
-    .image-container:hover::after {
-      transform: scaleX(1);
-    }
-
-/* ---------------------------------------------------------------- */
 </style>
 """, unsafe_allow_html=True)
 
@@ -159,35 +129,47 @@ white_color = "#FFFFFF"
 black_color = "#000000"
 links_color = white_color
 
-# if theme.get('background_color') == white_color:
-#     links_color = black_color
+return_value = False
+
+return_value = st_javascript("""function darkMode(i){return (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches)}(1)""")
+print("IS dark mode? return_value: ", return_value)
+
+### Retrieve the background color information in Streamlit
+# if st.query_params.get('background_color') == 'true':
+if not return_value:
+    links_color = black_color
+else:
+    links_color = white_color
 
 social_media_links_colors = [
-    dark_orange,
-    dark_orange,
-    dark_orange,
-    dark_orange,
-    dark_orange
+    links_color,
+    links_color,
+    links_color,
+    links_color,
+    links_color
 ]
 
 social_media_icons = SocialMediaIcons(social_media_links, social_media_links_colors)
 social_media_icons.render(justify_content='right')
 
+st.markdown("""
+    <br>
+    <img src="https://speakleash.org/wp-content/uploads/2023/09/SpeakLeash_logo.svg" alt="SpeakLeash Logo">
+""", unsafe_allow_html=True)
+
 # Add logo, title, and subheader in a flexible container with equal spacing
 st.markdown("""
     <div class="header-container">
-        <br>
-        <img src="https://speakleash.org/wp-content/uploads/2023/09/SpeakLeash_logo.svg" alt="SpeakLeash Logo">
-        <hr>
+        <br><br>
         <div class="title-container">
-            <h1 style='color: #FDA428; margin-top: -1rem; font-size: 3.1em;'>Phrase-Bench</h1>
+            <h1 style='color: #FDA428; margin-top: -1rem; font-size: 3.1em;'>CPTUB - Complex Polish Text Understanging Benchmark</h1>
             <h3 style="margin-top: 0;">Understanding of Polish text, sentiment and phraseological compounds</h2>
         </div>
     </div>
     """, unsafe_allow_html=True)
 
 # Create tabs
-tab1, tab2 = st.tabs([RESULTS_COLUMN_NAME, "Opis"])
+tab1, tab2 = st.tabs([RESULTS_COLUMN_NAME, "Description"])
 
 with tab1:
     st.write("This benchmark evaluates the ability of language models to correctly interpret Polish texts with complex implicatures, such as sarcasm and idiomatic expressions. Models are assessed on sentiment analysis, understanding of true intentions, and identification of idiomatic phrases.")
@@ -204,15 +186,13 @@ with tab1:
         "Params": st.column_config.NumberColumn("Params [B]", format="%.1f"),
         AVERAGE_COLUMN_NAME: st.column_config.NumberColumn(AVERAGE_COLUMN_NAME),
         RESULTS_COLUMN_NAME: st.column_config.BarChartColumn(
-            RESULTS_COLUMN_NAME, help="Summary of the results of each task",
+            "Bar chart of results", help="Summary of the results of each task",
             y_min=0,y_max=5,),
         SENTIMENT_COLUMN_NAME: st.column_config.NumberColumn(SENTIMENT_COLUMN_NAME, help='Ability to analyze sentiment'),
-        PHRASEOLOGY_COLUMN_NAME: st.column_config.NumberColumn(PHRASEOLOGY_COLUMN_NAME, help='Ability to understand phraseological compounds'),
         UNDERSTANDING_COLUMN_NAME: st.column_config.NumberColumn(UNDERSTANDING_COLUMN_NAME, help='Ability to understand language'),
+        PHRASEOLOGY_COLUMN_NAME: st.column_config.NumberColumn(PHRASEOLOGY_COLUMN_NAME, help='Ability to understand phraseological compounds'),
         }, hide_index=True, disabled=True, height=500)
 
-    # st.divider()
-
     # Add selection for models and create a bar chart for selected models using the AVERAGE_COLUMN_NAME, SENTIMENT_COLUMN_NAME, PHRASEOLOGY_COLUMN_NAME, UNDERSTANDING_COLUMN_NAME
     # Add default selection of 3 best models from AVERAGE_COLUMN_NAME and 1 best model with "Bielik" in Model column
     default_models = list(data.sort_values(AVERAGE_COLUMN_NAME, ascending=False)['Model'].head(3))
@@ -220,17 +200,17 @@ with tab1:
     if bielik_model not in default_models:
         default_models.append(bielik_model)
     selected_models = st.multiselect("Select models to compare", data["Model"].unique(), default=default_models)
-    # selected_models = st.multiselect("Select models to compare", data["Model"].unique())
     selected_data = data[data["Model"].isin(selected_models)]
     categories = [AVERAGE_COLUMN_NAME, SENTIMENT_COLUMN_NAME, PHRASEOLOGY_COLUMN_NAME, UNDERSTANDING_COLUMN_NAME]
 
     if selected_models:
         # Kolorki do wyboru:
         # colors = px.colors.sample_colorscale("viridis", len(selected_models)+1)
-        colors = px.colors.qualitative.D3[:len(selected_models)]
-        # Create a chart with bars for each model for each category
+        colors = px.colors.qualitative.G10[:len(selected_models)]
         fig_bars = go.Figure()
         for model, color in zip(selected_models, colors):
+            # Set y-axis range from 0 to 5
+            
             values = selected_data[selected_data['Model'] == model][categories].values.flatten().tolist()
             fig_bars.add_trace(go.Bar(
                 x=categories,
@@ -247,18 +227,79 @@ with tab1:
             yaxis_title="Score",
             template="plotly_dark"
         )
+        fig_bars.update_yaxes(range=[0, 5.1])
         st.plotly_chart(fig_bars)
 
 
 ### Zakładka 2 --> Opis
 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.")
+    st.markdown("""
+### <span style='text-decoration: #FDA428 wavy underline;'>**Cause of Creation**</span>
+1. **Need**: Models face significant challenges when dealing with understanding complex, context-reliant texts that involve meanings implied beyond the literal content of a statement. Such cases include sarcasm, implicatures, and phraseological compounds. 
+
+Traditional sentiment classifiers typically rely on word-based features (e.g., identifying positive or negative words) to assess sentiment. However, with sarcasm, the literal meaning of words often contradicts the intended sentiment, making it difficult for models to accurately gauge tone. Sarcasm's context-dependence further complicates matters, as these classifiers typically lack the ability to grasp nuanced cues in context, especially when sarcasm is subtle.
+Similarly, classifiers struggle with implicatures, where the underlying intent is implied rather than explicitly stated. Here, models fail to capture the full sentiment because they rely heavily on surface-level words, missing the non-literal meaning that often drives the sentiment.
+Phraseological compounds add another layer of difficulty. These are fixed or semi-fixed expressions whose meanings cannot be directly inferred from the individual words. Language models, trained on word-level patterns, often misinterpret these expressions because they fail to recognize the idiomatic or non-literal meaning, leading to inaccurate sentiment analysis.
+In addition to sentiment analysis, we decided to include the understanding of more complex texts in the benchmark, which was measured by the ability to uncover the intended meaning.
+
+### <span style='text-decoration: #FDA428 wavy underline;'>**Dataset Information**</span>
+The dataset contains 200 examples, all written in Polish. Each example consists of the following:
+- **Main Text**: This is a statement (often an opinion) on any topic that includes a certain type of implicature, often several simultaneously, such as sarcasm, phraseological compounds or implicatures.
+- **Reference Sentiment**: The sentiment associated with the main text. We use three categories: negative, neutral, and positive. Ambiguous examples were labeled as "neutral" to exclude them from sentiment classification testing.
+- **Reference phraseological compounds**: A list of phraseological compounds found in the main text.
+- **Reference Explanation**: An explanation of the underlying intentions that the author of the main text might have had.
+
+### <span style='text-decoration: #FDA428 wavy underline;'>**Evaluation Procedure**</span>
+We distinguish between two models in the evaluation process:
+- **Evaluated Model**: The model that performs specific tasks, is then assessed based on its performance, and added to a ranking.
+- **Judge Metamodel**: One of the currently strongest, most versatile LLMs.
+
+### <span style='text-decoration: #FDA428 wavy underline;'>**GENERATING RESPONSES FROM THE EVALUATED MODEL**</span>
+1. For each text in the dataset, the evaluated model was required to list the following in three points:
+    - The sentiment (only positive/negative).
+    - The underlying intentions of the author of the text.
+    - All phraseological compounds present in the text along with their meanings in the given context.
+2. No system prompt is used. The prompt provided to the evaluated model is written in Polish, as we are testing the models in this language. It contains:
+    - **User Prompt**: 3 elements, each consisting of a header written in capital letters and content enclosed in triple quotes:
+        - Information about the role of a careful linguist with extensive experience.
+        - The instruction to perform the three previously described tasks.
+        - The first example of a text that could be included in the dataset.
+    - **Assistant Prompt**: A human-written example answer for the first example text.
+    - **User Prompt**: A second example of a text that could be included in the dataset.
+    - **Assistant Prompt**: A human-written example answer for the second example text.
+    - **User Prompt**: The target text, based on which the evaluated model will be assessed.
+3. The decision to split the examples into user prompts and assistant prompts was made due to the better results achieved by the vast majority of models. The two examples were selected based on diversity: one has a negative sentiment and several phraseological compounds, while the other is positive and lacks phraseological compounds.
+
+### <span style='text-decoration: #FDA428 wavy underline;'>**GENERATING METAMODEL EVALUATIONS**</span>
+1. The purpose of the metamodel is to return the following evaluations:
+    - **Understanding of the Text**: A comparison of the evaluated model's response description to the reference explanation.
+    - **Sentiment Analysis**: An optional evaluation, only if the reference sentiment is "positive" or "negative." We made this decision to exclude texts that people might interpret ambiguously.
+    - **phraseological compounds**: The model is penalized for phrases not included in the reference phraseological compounds. In cases where there are no phraseological compounds, the highest score is awarded only if the model indicates the absence of such expressions — one point is deducted for each excess phrase until the score reaches zero.
+2. Each evaluation is provided in JSON format. Example of a full response from the metamodel:
+```json
+{"WYDŹWIĘK": "5"}
+{"OCENA": "4"}
+{"ZWIĄZKI": "3"}
+```
+3. The judge metamodel's prompt structure is similar to that of the evaluated model's prompt. No system prompt is used. The prompt includes:
+    - **User Prompt**: 3 elements, each consisting of a header written in capital letters and content enclosed in triple quotes:
+        - **Role**: A reliable assistant who adheres to the instructions and does not perform any other tasks, nor enters any additional text in the response.
+        - **Task**: According to the description in point 1. The comparison of phraseological compounds has the most guidelines, so we noted that the model should focus on this as it is the most challenging step, and that its work will be evaluated based on this point.
+        - The first example of a potential response from the evaluated model along with the references.
+    - **Assistant Prompt**: An example response containing the evaluations.
+    - **User Prompt**: A second example of a potential response from the evaluated model along with the references.
+    - **Assistant Prompt**: An example response containing the evaluations for the second example.
+    - **User Prompt**: The actual response from the evaluated model and the references on which the metamodel will base its evaluations included in the benchmark.
+4. Here, the examples were also selected based on diversity. One includes a reference with a positive sentiment, while the other contains no reference sentiment at all (an example labeled as "neutral" in the dataset).
+5. It is worth explaining why we chose this particular process for evaluating phraseological compounds. Initially, we intended to check only those phrases included in the reference and ignore others in the evaluation. Unfortunately, this procedure favored models that provided many phrases that were not phraseological compounds.
+Therefore, we decided to penalize models for phrases not included in the reference. We aimed to ensure that models were not penalized for providing phraseological compounds we had not included in the reference. After generating the responses, we collected phrases noted by several models and manually reviewed all references to identify phraseological compounds we might have missed.
+A similar procedure was applied to sentiment analysis—we listed all examples where several models consistently recorded a different sentiment than the reference and reconsidered whether the examples could be interpreted differently than initially assumed.
+    """, unsafe_allow_html=True)
 
 
 # Ending :)
-st.divider()
+st.markdown("<hr style='border: 1px solid #A85E00;'>", unsafe_allow_html=True)
+# st.divider()
 st.markdown("""
 ### Authors:
 - [Jan Sowa](https://www.linkedin.com/in/janpiotrsowa) - leadership, writing texts, benchmark code