Update app.py

app.py

@@ -30,6 +30,7 @@ st.markdown("""
         gap: 1px;
         padding-top: 10px;
         padding-bottom: 10px;
+        color: #333333;
     }
     .stTabs [aria-selected="true"] {
         background-color: #4e8df5;
@@ -61,17 +62,18 @@ st.markdown("""
     }
     .metric-title {
         font-size: 16px;
-        color: #555;
+        color: #333333 !important;
         margin-bottom: 5px;
     }
     .metric-value {
         font-size: 30px;
         font-weight: bold;
+        color: #333333 !important;
         margin-bottom: 10px;
     }
     .model-badge {
         background-color: #4e8df5;
-        color: white;
+        color: white !important;
         padding: 4px 12px;
         border-radius: 15px;
         font-weight: bold;
@@ -135,15 +137,9 @@ data = {
 
 df = pd.DataFrame(data)
 
-# Your models filter
+    # Your models filter
 your_models = ["OpenElla-Llama-3-2B", "MiniMaid-L1", "MiniMaid-L2", "MiniMaid-L3"]
-df_your_models = df[df["Model"].isin(your_models)].copy()
-df_your_models["Is Your Model"] = "Yes"
-
-df_others = df[~df["Model"].isin(your_models)].copy()
-df_others["Is Your Model"] = "No"
-
-df_all = pd.concat([df_your_models, df_others])
+# Instead of creating a separate column, we'll use the 'Family' column for coloring
 
 # Sidebar
 st.sidebar.markdown("<h2>Leaderboard Controls</h2>", unsafe_allow_html=True)
@@ -230,8 +226,8 @@ with tab1:
             filtered_df, 
             x="Model", 
             y="Overall Score",
-            color="Is Your Model" if highlight_yours and len(filtered_df) > len(your_models) else None,
-            color_discrete_map={"Yes": "#4e8df5", "No": "#aaaaaa"},
+            color="Family" if highlight_yours else None,
+            color_discrete_map={"OpenElla": "#4e8df5", "MiniMaid": "#f5854e", "DeepSeek": "#aaaaaa", "Dolphin": "#aaaaaa", "Hermes": "#aaaaaa"},
             text_auto='.2f',
             title="Overall Roleplay Performance",
             height=400
@@ -257,8 +253,8 @@ with tab1:
                         filtered_df, 
                         x="Model", 
                         y=metric,
-                        color="Is Your Model" if highlight_yours and len(filtered_df) > len(your_models) else None,
-                        color_discrete_map={"Yes": "#4e8df5", "No": "#aaaaaa"},
+                        color="Family" if highlight_yours else None,
+                        color_discrete_map={"OpenElla": "#4e8df5", "MiniMaid": "#f5854e", "DeepSeek": "#aaaaaa", "Dolphin": "#aaaaaa", "Hermes": "#aaaaaa"},
                         text_auto='.2f',
                         title=f"{metric}",
                         height=350
@@ -383,25 +379,25 @@ with tab3:
         st.markdown("""
         <div class="card openella-card">
             <h3>OpenElla-Llama-3-2B</h3>
-            <div class="model-badge">OpenElla</div>
-            <div class="model-badge">2B Parameters</div>
-            <div class="model-badge">Released: February 2024</div>
+            <div class="model-badge" style="color: white;">OpenElla</div>
+            <div class="model-badge" style="color: white;">2B Parameters</div>
+            <div class="model-badge" style="color: white;">Released: February 2024</div>
             <hr>
             <p>OpenElla-Llama-3-2B is optimized for roleplay with excellent character consistency
             and good immersion capabilities. Built on the Llama 3 architecture, this model
             delivers impressively balanced performance despite its compact 2B parameter size.</p>
             <div style="display: flex; margin-top: 15px;">
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Overall Score</div>
-                    <div class="metric-value">0.83</div>
+                    <div class="metric-title" style="color: #333333;">Overall Score</div>
+                    <div class="metric-value" style="color: #333333;">0.83</div>
                 </div>
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Character Consistency</div>
-                    <div class="metric-value">0.83</div>
+                    <div class="metric-title" style="color: #333333;">Character Consistency</div>
+                    <div class="metric-value" style="color: #333333;">0.83</div>
                 </div>
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Immersion</div>
-                    <div class="metric-value">0.67</div>
+                    <div class="metric-title" style="color: #333333;">Immersion</div>
+                    <div class="metric-value" style="color: #333333;">0.67</div>
                 </div>
             </div>
         </div>
@@ -412,25 +408,25 @@ with tab3:
         st.markdown("""
         <div class="card minimaid-l1-card">
             <h3>MiniMaid-L1</h3>
-            <div class="model-badge">MiniMaid</div>
-            <div class="model-badge">1B Parameters</div>
-            <div class="model-badge">Released: January 2024</div>
+            <div class="model-badge" style="color: white;">MiniMaid</div>
+            <div class="model-badge" style="color: white;">1B Parameters</div>
+            <div class="model-badge" style="color: white;">Released: January 2024</div>
             <hr>
             <p>MiniMaid-L1 is the first generation of the MiniMaid series, designed for maximum speed and efficiency.
             With only 1B parameters, it's optimized for low-resource environments while still maintaining
             good length handling capabilities.</p>
             <div style="display: flex; margin-top: 15px;">
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Overall Score</div>
-                    <div class="metric-value">0.51</div>
+                    <div class="metric-title" style="color: #333333;">Overall Score</div>
+                    <div class="metric-value" style="color: #333333;">0.51</div>
                 </div>
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Character Consistency</div>
-                    <div class="metric-value">0.50</div>
+                    <div class="metric-title" style="color: #333333;">Character Consistency</div>
+                    <div class="metric-value" style="color: #333333;">0.50</div>
                 </div>
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Speed</div>
-                    <div class="metric-value">320 t/s</div>
+                    <div class="metric-title" style="color: #333333;">Speed</div>
+                    <div class="metric-value" style="color: #333333;">320 t/s</div>
                 </div>
             </div>
         </div>
@@ -440,25 +436,25 @@ with tab3:
         st.markdown("""
         <div class="card minimaid-l2-card">
             <h3>MiniMaid-L2</h3>
-            <div class="model-badge">MiniMaid</div>
-            <div class="model-badge">1.5B Parameters</div>
-            <div class="model-badge">Released: March 2024</div>
+            <div class="model-badge" style="color: white;">MiniMaid</div>
+            <div class="model-badge" style="color: white;">1.5B Parameters</div>
+            <div class="model-badge" style="color: white;">Released: March 2024</div>
             <hr>
             <p>MiniMaid-L2 represents a significant improvement over L1, with enhanced immersion capabilities
             and better overall roleplay performance. The model retains excellent efficiency while delivering
             more engaging and consistent character portrayals.</p>
             <div style="display: flex; margin-top: 15px;">
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Overall Score</div>
-                    <div class="metric-value">0.71</div>
+                    <div class="metric-title" style="color: #333333;">Overall Score</div>
+                    <div class="metric-value" style="color: #333333;">0.71</div>
                 </div>
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Immersion</div>
-                    <div class="metric-value">0.60</div>
+                    <div class="metric-title" style="color: #333333;">Immersion</div>
+                    <div class="metric-value" style="color: #333333;">0.60</div>
                 </div>
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Speed</div>
-                    <div class="metric-value">280 t/s</div>
+                    <div class="metric-title" style="color: #333333;">Speed</div>
+                    <div class="metric-value" style="color: #333333;">280 t/s</div>
                 </div>
             </div>
         </div>
@@ -468,25 +464,25 @@ with tab3:
         st.markdown("""
         <div class="card minimaid-l3-card">
             <h3>MiniMaid-L3</h3>
-            <div class="model-badge">MiniMaid</div>
-            <div class="model-badge">2.5B Parameters</div>
-            <div class="model-badge">Released: April 2024</div>
+            <div class="model-badge" style="color: white;">MiniMaid</div>
+            <div class="model-badge" style="color: white;">2.5B Parameters</div>
+            <div class="model-badge" style="color: white;">Released: April 2024</div>
             <hr>
             <p>MiniMaid-L3 is the latest and most advanced model in the MiniMaid series. With 2.5B parameters,
             it achieves the highest immersion score of all models while maintaining excellent length handling.
             This model represents the pinnacle of the MiniMaid series' development.</p>
             <div style="display: flex; margin-top: 15px;">
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Overall Score</div>
-                    <div class="metric-value">0.76</div>
+                    <div class="metric-title" style="color: #333333;">Overall Score</div>
+                    <div class="metric-value" style="color: #333333;">0.76</div>
                 </div>
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Immersion</div>
-                    <div class="metric-value">0.73</div>
+                    <div class="metric-title" style="color: #333333;">Immersion</div>
+                    <div class="metric-value" style="color: #333333;">0.73</div>
                 </div>
                 <div style="flex: 1; text-align: center;">
-                    <div class="metric-title">Length Score</div>
-                    <div class="metric-value">1.00</div>
+                    <div class="metric-title" style="color: #333333;">Length Score</div>
+                    <div class="metric-value" style="color: #333333;">1.00</div>
                 </div>
             </div>
         </div>
@@ -503,10 +499,10 @@ with tab3:
                 st.markdown(f"""
                 <div class="card">
                     <h4>{model}</h4>
-                    <div class="model-badge">{model_data['Family']}</div>
-                    <div class="model-badge">{model_data['Parameters (B)']}B</div>
+                    <div class="model-badge" style="color: white !important;">{model_data['Family']}</div>
+                    <div class="model-badge" style="color: white !important;">{model_data['Parameters (B)']}B</div>
                     <p>{model_data['Description']}</p>
-                    <p><b>Overall Score:</b> {model_data['Overall Score']:.2f}</p>
+                    <p style="color: #333333;"><b>Overall Score:</b> {model_data['Overall Score']:.2f}</p>
                 </div>
                 """, unsafe_allow_html=True)