update Ui and data

app.py

@@ -155,6 +155,7 @@ def update_table(
     visible_columns: list,
     color_columns: list,
     size_range: list,
+    midpoint: float = 0.5,
     sort_by: str = "Average (lower=better)",
     ascending: bool = True,
 ):
@@ -201,16 +202,33 @@ def update_table(
 
     # color gradient
     colors = ["#63be7b", "#ffffff", "#f8696b"]
-    cmap = LinearSegmentedColormap.from_list("custom_cmap", colors)
     vmin = {}
     vmax = {}
+    vmid = {}
     for column in filtered_data.columns:
         if column in ["Name", "Params (B)"]:
             continue
         col_values = filtered_data[column]
         if len(col_values) > 1:
-            vmin[column] = col_values.min()
-            vmax[column] = col_values.max()
+            sorted_values = np.sort(col_values)
+            vmin[column] = sorted_values.min()
+            vmax[column] = sorted_values.max()
+            idx = int(len(sorted_values) * midpoint)
+            vmid[column] = sorted_values[idx]
+
+    def custom_background_gradient(series, cmap, vmin, vmax, vmid):
+        if len(series) == 0:
+            return series
+
+        def normalize(x):
+            if x <= vmid:
+                return 0.5 * (x - vmin) / (vmid - vmin)
+            else:
+                return 0.5 + 0.5 * (x - vmid) / (vmax - vmid)
+
+        normed = series.apply(normalize)
+        colors = [cmap(x) for x in normed]
+        return ["background-color: rgba({}, {}, {}, {})".format(*[int(255 * x) for x in c[:3]], c[3]) for c in colors]
 
     target_color_columns = []
     if "Average" in color_columns:
@@ -221,10 +239,16 @@ def update_table(
     styler = filtered_data.style.format(formatter).map(color_cell, subset=["Params (B)"])
 
     for column in target_color_columns:
-        styler = styler.background_gradient(cmap=cmap, subset=[column], vmin=vmin[column], vmax=vmax[column])
+        styler = styler.apply(
+            custom_background_gradient,
+            cmap=LinearSegmentedColormap.from_list("custom_cmap", colors),
+            vmin=vmin[column],
+            vmax=vmax[column],
+            vmid=vmid[column],
+            subset=[column],
+        )
 
     # return styler
-
     styler = styler.hide(axis="index")
 
     widths = [300, 150, 150, 100, 100, 100, 100, 100, 100, 100, 100]
@@ -232,11 +256,47 @@ def update_table(
 
     for i, w in enumerate(widths):
         table_styles.append(
-            {"selector": f"th.col{i}", "props": [("min-width", f"{w}px"), ("max-width", f"{w}px"), ("text-align", "center")]}  # 添加表头文字居中
+            {
+                "selector": "th",
+                "props": [
+                    ("background-color", "#f5f5f5"),
+                    ("padding", "8px"),
+                    ("font-weight", "bold"),
+                ],
+            }
         )
         table_styles.append(
-            {"selector": f"td.col{i}", "props": [("min-width", f"{w}px"), ("max-width", f"{w}px"), ("text-align", "center")]}  # 添加单元格文字居中
+            {
+                "selector": f"th.col{i}",
+                "props": [
+                    ("min-width", f"{w}px"),
+                    ("max-width", f"{w}px"),
+                    ("text-align", "center"),
+                    ("border", "1px solid #dddddd"),
+                ],
+            }
         )
+        table_styles.append(
+            {
+                "selector": f"td.col{i}",
+                "props": [
+                    ("min-width", f"{w}px"),
+                    ("max-width", f"{w}px"),
+                    ("text-align", "center"),
+                    ("border", "1px solid #dddddd"),
+                ],
+            }
+        )
+
+    table_styles.append(
+        {
+            "selector": "table",
+            "props": [
+                ("border-collapse", "collapse"),
+                ("border", "1px solid #dddddd"),
+            ],
+        }
+    )
 
     styler = styler.set_table_styles(table_styles)
 
@@ -566,6 +626,7 @@ with gr.Blocks(css=css) as demo:
                     size_range_slider = RangeSlider(minimum=0, maximum=15, value=[0, 15], step=0.1, label="Model Size Range")
                     metric_selector = gr.Dropdown(label="Metric", choices=metric_list, value=initial_metric)
                 with gr.Column():
+                    midpoint_slider = gr.Slider(minimum=0.1, maximum=0.9, value=0.5, step=0.01, label="Color Gradient Midpoint")
                     color_selector = gr.CheckboxGroup(label="Colored Columns", choices=["Average", "Individual Tests"], value=initial_colors)
                     colfilter = gr.CheckboxGroup(label="Data Source", choices=get_unique_column_names(all_data), value=initial_columns)
 
@@ -578,22 +639,39 @@ with gr.Blocks(css=css) as demo:
             table = gr.HTML(initial_data)
 
             period_selector.change(
-                update_table, inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider], outputs=table
+                update_table,
+                inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider, midpoint_slider],
+                outputs=table,
             )
             model_selector.change(
-                update_table, inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider], outputs=table
+                update_table,
+                inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider, midpoint_slider],
+                outputs=table,
             )
             metric_selector.change(
-                update_table, inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider], outputs=table
+                update_table,
+                inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider, midpoint_slider],
+                outputs=table,
             )
             colfilter.change(
-                update_table, inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider], outputs=table
+                update_table,
+                inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider, midpoint_slider],
+                outputs=table,
             )
             color_selector.change(
-                update_table, inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider], outputs=table
+                update_table,
+                inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider, midpoint_slider],
+                outputs=table,
             )
             size_range_slider.change(
-                update_table, inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider], outputs=table
+                update_table,
+                inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider, midpoint_slider],
+                outputs=table,
+            )
+            midpoint_slider.change(
+                update_table,
+                inputs=[period_selector, model_selector, metric_selector, colfilter, color_selector, size_range_slider, midpoint_slider],
+                outputs=table,
             )
 
         with gr.Tab("🌍 MultiLang"):
@@ -601,7 +679,6 @@ with gr.Blocks(css=css) as demo:
             world_languages_plot = gr.Plot(create_world_languages_gdp_chart())
 
         with gr.Tab("📈 Scaling Law"):
-            print(time_list)
             period_selector_2 = gr.Dropdown(label="Period", choices=time_list, value=last_period)
 
             def update_plot(period):