Add logo with space-around style

app.py

@@ -19,23 +19,12 @@ def style_dataframe(df: pd.DataFrame):
     cols.insert(cols.index('Średnia') + 1, cols.pop(cols.index('Wyniki')))
     df = df[cols]
 
-    # df = st.data_editor(df, 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=100,),
-    #                             '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)
-
     # 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)
-    # styled_df = styled_df.style.map('text-align: left;', subset=["Średnia", "Analiza wydźwięku", "Znajomość związków frazeologicznych", "Zrozumienie tekstu"])
     return styled_df
 
 # Load data from JSON file
@@ -53,12 +42,30 @@ st.markdown("""
                     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)
 
-st.title("Benchmark Modeli LLM")
-st.subheader("z sarkazmami i idiomami w języku polskim")
-
+# 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