improved colors

tabs/leaderboard.py

@@ -39,6 +39,10 @@ def filter_leaderboard(df, model_type, category, sort_by):
                 --hover-bg: #2d2e32;
                 --note-bg: #2d2e32;
                 --note-text: #a1a1aa;
+                --accent-blue: #60A5FA;
+                --accent-purple: #A78BFA;
+                --accent-pink: #F472B6;
+                --score-bg: rgba(255, 255, 255, 0.1);
             }}
         }}
         
@@ -50,6 +54,10 @@ def filter_leaderboard(df, model_type, category, sort_by):
                 --hover-bg: #f3f4f6;
                 --note-bg: #f3f4f6;
                 --note-text: #4b5563;
+                --accent-blue: #3B82F6;
+                --accent-purple: #8B5CF6;
+                --accent-pink: #EC4899;
+                --score-bg: rgba(0, 0, 0, 0.1);
             }}
         }}
         

utils.py

@@ -1,3 +1,23 @@
+def get_chart_colors():
+    # if is_dark_theme():
+    #     return {
+    #         "Private": "#60A5FA",  # accent-blue
+    #         "Open source": "#A78BFA",  # accent-purple
+    #         "performance_bands": ["#DCFCE7", "#FEF9C3", "#FEE2E2"],
+    #         "text": "#FFFFFF",
+    #         "background": "#1a1b1e",
+    #         "grid": (1, 1, 1, 0.1),  # RGBA tuple for grid
+    #     }
+    return {
+        "Private": "#3F78FA",  # accent-blue light
+        "Open source": "#A13AE2",  # accent-purple light
+        "performance_bands": ["#DCFCE7", "#FEF9C3", "#FEE2E2"],
+        "text": "#111827",
+        "background": "#FFFFFF",
+        "grid": (0, 0, 0, 0.1),  # RGBA tuple for grid
+    }
+
+
 def get_rank_badge(rank):
     """Generate HTML for rank badge with appropriate styling"""
     badge_styles = {
@@ -41,7 +61,8 @@ def get_rank_badge(rank):
 
 def get_type_badge(model_type):
     """Generate HTML for model type badge"""
-    colors = {"Private": "#4F46E5", "Open source": "#16A34A"}
+    colors = get_chart_colors()
+    colors = {"Private": colors["Private"], "Open source": colors["Open source"]}
     bg_color = colors.get(model_type, "#4F46E5")
     return f"""
         <div style="
@@ -60,23 +81,24 @@ def get_type_badge(model_type):
 
 
 def get_score_bar(score):
-    """Generate HTML for score bar"""
+    """Generate HTML for score bar with gradient styling"""
     width = score * 100
     return f"""
         <div style="display: flex; align-items: center; gap: 12px; width: 100%;">
             <div style="
                 flex-grow: 1;
-                height: 6px;
+                height: 8px;
                 background: var(--score-bg, rgba(255, 255, 255, 0.1));
-                border-radius: 3px;
+                border-radius: 4px;
                 overflow: hidden;
                 max-width: 200px;
             ">
                 <div style="
                     width: {width}%;
                     height: 100%;
-                    background: var(--accent-color, #4F46E5);
-                    border-radius: 3px;
+                    background: linear-gradient(90deg, var(--accent-blue, #60A5FA), var(--accent-purple, #A78BFA));
+                    border-radius: 4px;
+                    transition: width 0.3s ease;
                 "></div>
             </div>
             <span style="

visualization.py

@@ -1,3 +1,4 @@
+from utils import get_chart_colors
 import matplotlib
 import matplotlib.pyplot as plt
 import numpy as np
@@ -5,54 +6,68 @@ import plotly.graph_objects as go
 
 
 def setup_matplotlib():
-    """Set up matplotlib configuration."""
     matplotlib.use("Agg")
     plt.close("all")
 
 
 def get_performance_chart(df, category_name="Overall"):
     plt.close("all")
+    colors = get_chart_colors()
     score_column = "Category Score"
     df_sorted = df.sort_values(score_column, ascending=True)
-    colors = {"Private": "#4F46E5", "Open source": "#16A34A"}
 
     height = max(8, len(df_sorted) * 0.8)
     fig, ax = plt.subplots(figsize=(16, height))
     plt.rcParams.update({"font.size": 12})
 
+    fig.patch.set_facecolor(colors["background"])
+    ax.set_facecolor(colors["background"])
+
     try:
         bars = ax.barh(
             np.arange(len(df_sorted)),
             df_sorted[score_column],
-            height=0.6,
+            height=0.4,
+            capstyle="round",
             color=[colors[t] for t in df_sorted["Model Type"]],
         )
 
         ax.set_title(
-            f"Model Performance Comparison - {category_name}",
+            f"Model Performance - {category_name}",
             pad=20,
             fontsize=20,
             fontweight="bold",
+            color=colors["text"],
         )
-        ax.set_xlabel("Average Score", fontsize=14, labelpad=10)
+        ax.set_xlabel("Average Score", fontsize=14, labelpad=10, color=colors["text"])
         ax.set_xlim(0.0, 1.0)
 
         ax.set_yticks(np.arange(len(df_sorted)))
-        ax.set_yticklabels(df_sorted["Model"], fontsize=12)
+        ax.set_yticklabels(df_sorted["Model"], fontsize=12, color=colors["text"])
 
         plt.subplots_adjust(left=0.35)
 
         for i, v in enumerate(df_sorted[score_column]):
             ax.text(
-                v + 0.01, i, f"{v:.3f}", va="center", fontsize=12, fontweight="bold"
+                v + 0.01,
+                i,
+                f"{v:.3f}",
+                va="center",
+                fontsize=12,
+                fontweight="bold",
+                color=colors["text"],
             )
 
-        ax.grid(True, axis="x", linestyle="--", alpha=0.2)
+        ax.grid(True, axis="x", linestyle="--", alpha=0.2, color=colors["grid"])
         ax.spines[["top", "right"]].set_visible(False)
+        ax.spines[["bottom", "left"]].set_color(colors["grid"])
+        ax.tick_params(colors=colors["text"])
 
         legend_elements = [
             plt.Rectangle((0, 0), 1, 1, facecolor=color, label=label)
-            for label, color in colors.items()
+            for label, color in {
+                k: colors[k] for k in ["Private", "Open source"]
+            }.items()
         ]
         ax.legend(
             handles=legend_elements,
@@ -60,6 +75,8 @@ def get_performance_chart(df, category_name="Overall"):
             loc="lower right",
             fontsize=12,
             title_fontsize=14,
+            facecolor=colors["background"],
+            labelcolor=colors["text"],
         )
 
         plt.tight_layout()
@@ -67,7 +84,6 @@ def get_performance_chart(df, category_name="Overall"):
     finally:
         plt.close(fig)
 
-
 def create_radar_plot(df, model_names):
     datasets = [col for col in df.columns[7:] if col != "IO Cost"]
     fig = go.Figure()
@@ -132,26 +148,24 @@ def create_radar_plot(df, model_names):
 
 
 def get_performance_cost_chart(df, category_name="Overall"):
-    # Create figure and axis with specified style
+    colors = get_chart_colors()
     fig, ax = plt.subplots(figsize=(12, 8), dpi=300)
 
-    # Configure plot style
-    ax.grid(True, linestyle="--", alpha=0.15, which="both")
-    ax.set_facecolor("white")
-    fig.patch.set_facecolor("white")
-
-    colors = {"Private": "#4F46E5", "Open source": "#16A34A"}
-    performance_colors = ["#DCFCE7", "#FEF9C3", "#FEE2E2"]
+    fig.patch.set_facecolor(colors["background"])
+    ax.set_facecolor(colors["background"])
+    ax.grid(True, linestyle="--", alpha=0.15, which="both", color=colors["grid"])
 
     score_column = "Category Score"
 
-    # Plot data points
     for _, row in df.iterrows():
         color = colors[row["Model Type"]]
         size = 100 if row[score_column] > 0.85 else 80
-        edge_color = "#3730A3" if row["Model Type"] == "Private" else "#166534"
+        edge_color = (
+            colors["Private"]
+            if row["Model Type"] == "Private"
+            else colors["Open source"]
+        )
 
-        # Plot scatter points
         ax.scatter(
             row["IO Cost"],
             row[score_column] * 100,
@@ -160,11 +174,12 @@ def get_performance_cost_chart(df, category_name="Overall"):
             alpha=0.9,
             edgecolor=edge_color,
             linewidth=1,
-            zorder=5,  # Ensure points are above grid
+            zorder=5,
         )
 
-        # Add annotations with model names
-        bbox_props = dict(boxstyle="round,pad=0.3", fc="white", ec="none", alpha=0.8)
+        bbox_props = dict(
+            boxstyle="round,pad=0.3", fc=colors["background"], ec="none", alpha=0.8
+        )
 
         ax.annotate(
             f"{row['Model']}\n(${row['IO Cost']:.2f})",
@@ -172,50 +187,56 @@ def get_performance_cost_chart(df, category_name="Overall"):
             xytext=(5, 5),
             textcoords="offset points",
             fontsize=8,
+            color=colors["text"],
             bbox=bbox_props,
             zorder=6,
         )
 
-    # Configure axes
     ax.set_xscale("log")
-    ax.set_xlim(0.08, 40)  # Adjust based on your data range
+    ax.set_xlim(0.08, 40)
     ax.set_ylim(60, 95)
 
-    # Customize axis labels
-    ax.set_xlabel("I/O Cost per Million Tokens ($)", fontsize=10, labelpad=10)
-    ax.set_ylabel("Model Performance Score", fontsize=10, labelpad=10)
+    ax.set_xlabel(
+        "I/O Cost per Million Tokens ($)",
+        fontsize=10,
+        labelpad=10,
+        color=colors["text"],
+    )
+    ax.set_ylabel(
+        "Model Performance Score", fontsize=10, labelpad=10, color=colors["text"]
+    )
 
-    # Add legend
     legend_elements = [
-        plt.scatter([], [], c=color, label=label, s=80)
-        for label, color in colors.items()
+        plt.scatter([], [], c=colors[label], label=label, s=80)
+        for label in ["Private", "Open source"]
     ]
     ax.legend(
         handles=legend_elements,
         loc="upper right",
         frameon=True,
-        facecolor="white",
+        facecolor=colors["background"],
         edgecolor="none",
         fontsize=9,
+        labelcolor=colors["text"],
     )
 
-    # Set title
     ax.set_title(
-        f"AI Language Model Performance vs. Cost - {category_name}", fontsize=12, pad=15
+        f"Performance vs. Cost - {category_name}",
+        fontsize=12,
+        pad=15,
+        fontweight="bold",
+        color=colors["text"],
     )
 
-    # Add performance bands
-    for y1, y2, color in zip([85, 75, 60], [95, 85, 75], performance_colors):
+    for y1, y2, color in zip([85, 75, 60], [95, 85, 75], colors["performance_bands"]):
         ax.axhspan(y1, y2, alpha=0.2, color=color, zorder=1)
 
-    # Customize tick parameters
-    ax.tick_params(axis="both", which="major", labelsize=9)
-    ax.tick_params(axis="both", which="minor", labelsize=8)
-
-    # Add minor ticks for log scale
+    ax.tick_params(axis="both", which="major", labelsize=9, colors=colors["text"])
+    ax.tick_params(axis="both", which="minor", labelsize=8, colors=colors["text"])
     ax.xaxis.set_minor_locator(plt.LogLocator(base=10.0, subs=np.arange(2, 10) * 0.1))
 
-    # Adjust layout
-    plt.tight_layout()
+    for spine in ax.spines.values():
+        spine.set_color(colors["grid"])
 
+    plt.tight_layout()
     return fig