Good bar chart

app.py

@@ -2,7 +2,6 @@ import gradio as gr
 import matplotlib.pyplot as plt
 import matplotlib
 
-from data import ModelBenchmarkData
 from bar_plot import create_matplotlib_bar_plot
 
 
@@ -11,9 +10,6 @@ matplotlib.use('Agg')
 plt.ioff()
 
 
-DATA = ModelBenchmarkData("data.json")
-
-
 def load_css():
     """Load CSS styling."""
     try:
@@ -23,10 +19,10 @@ def load_css():
         return "body { background: #000; color: #fff; }"
 
 
-
 def refresh_plot():
     """Generate new matplotlib charts and update description."""
-    return create_matplotlib_bar_plot(DATA.get_bar_plot_data()), "**Transformer CI Dashboard**<br>-<br>**AMD runs on MI325**<br>**NVIDIA runs on A10**<br><br>*This dashboard only tracks important models*<br>*(Data refreshed)*"
+    sidebar_text = "**Transformer CI Dashboard**<br>-<br>**AMD runs on MI325**<br>**NVIDIA runs on A10**<br><br>*This dashboard only tracks important models*<br>*(Data refreshed)*"
+    return create_matplotlib_bar_plot(), sidebar_text
 
 # Create Gradio interface
 with gr.Blocks(title="Random Data Dashboard", css=load_css(), fill_height=True, fill_width=True) as demo:
@@ -40,7 +36,7 @@ with gr.Blocks(title="Random Data Dashboard", css=load_css(), fill_height=True,
         # Main plot area
         with gr.Column(elem_classes=["main-content"]):
             plot = gr.HTML(
-                create_matplotlib_bar_plot(DATA.get_bar_plot_data()),
+                create_matplotlib_bar_plot(),
                 elem_classes=["plot-container"],
             )
 

bar_plot.py

@@ -3,66 +3,9 @@ import io
 import numpy as np
 import base64
 
+from plot_utils import get_color_for_config
+from data import load_data
 
-# Color manipulation functions
-def hex_to_rgb(hex_color):
-    hex_color = hex_color.lstrip('#')
-    r, g, b = int(hex_color[0:2], 16), int(hex_color[2:4], 16), int(hex_color[4:6], 16)
-    return r, g, b
-
-def blend_colors(rgb, hex_color, blend_strength):
-    other_rgb = hex_to_rgb(hex_color)
-    return tuple(map(lambda i: int(rgb[i] * blend_strength + other_rgb[i] * (1 - blend_strength)), range(3)))
-
-def increase_brightness(r, g, b, factor):
-    return tuple(map(lambda x: int(x + (255 - x) * factor), (r, g, b)))
-
-def decrease_brightness(r, g, b, factor):
-    return tuple(map(lambda x: int(x * factor), (r, g, b)))
-
-def increase_saturation(r, g, b, factor) -> tuple[int, int, int]:
-    gray = 0.299 * r + 0.587 * g + 0.114 * b
-    return tuple(map(lambda x: int(gray + (x - gray) * factor), (r, g, b)))
-
-def rgb_to_hex(r, g, b):
-    r, g, b = map(lambda x: min(max(x, 0), 255), (r, g, b))
-    return f"#{r:02x}{g:02x}{b:02x}"
-
-# Color assignment function
-def get_color_for_config(config, filtered_on_compile_mode: bool = False):
-    
-    # Determine the main hue for the attention implementation
-    attn_implementation, sdpa_backend = config["attn_implementation"], config["sdpa_backend"]
-    compilation = config["compilation"]
-    if attn_implementation == "eager":
-        main_hue = "#FF4B4BFF" if compilation else "#FF4141FF"
-    elif attn_implementation == "sdpa":
-        main_hue = {
-            None:                  "#4A90E2" if compilation else "#2E82E1FF",
-            "math":                "#408DDB" if compilation else "#227BD3FF",
-            "flash_attention":     "#35A34D" if compilation else "#219F3CFF",
-            "efficient_attention": "#605895" if compilation else "#423691FF",
-            "cudnn_attention":     "#774AE2" if compilation else "#5D27DCFF",
-        }[sdpa_backend]  # fmt: off
-    elif attn_implementation == "flash_attention_2":
-        main_hue = "#FFD700" if compilation else "#FFBF00FF"
-    else:
-        raise ValueError(f"Unknown attention implementation: {attn_implementation}")
-
-    # Apply color modifications for compilation and kernelization
-    r, g, b = hex_to_rgb(main_hue)
-    if config["compilation"]:
-        delta = 0.2
-        delta += 0.2 * (len(config["compile_mode"]) - 7) / 8 if filtered_on_compile_mode else 0
-        r, g, b = increase_brightness(r, g, b, delta)
-    if config["kernelize"]:
-        pass
-        # r, g, b = blend_colors((r, g, b), "#FF00F2FF", 0.7)
-        r, g, b = decrease_brightness(r, g, b, 0.8)
-        # r, g, b = increase_saturation(r, g, b, 0.9)
-    
-    # Return the color as a hex string
-    return rgb_to_hex(r, g, b)
 
 def reorder_data(per_scenario_data: dict) -> dict:
     keys = list(per_scenario_data.keys())
@@ -78,70 +21,59 @@ def reorder_data(per_scenario_data: dict) -> dict:
     return per_scenario_data
 
 
-def make_bar_kwargs(per_scenario_data: dict, key: str) -> tuple[dict, list]:
+def make_bar_kwargs(key: str) -> tuple[dict, list]:
+    # Prepare accumulators
+    current_x = 0
     bar_kwargs = {"x": [], "height": [], "color": [], "label": []}
-    errors = []
-    for i, (name, data) in enumerate(per_scenario_data.items()):    
-        bar_kwargs["x"].append(i)
-        bar_kwargs["height"].append(np.median(data[key]))
-        bar_kwargs["color"].append(get_color_for_config(data["config"]))
-        bar_kwargs["label"].append(name)
-        errors.append(np.std(data[key]))
-    return bar_kwargs, errors
-
-def draw_bar_plot(ax: plt.Axes, bar_kwargs: dict, errors: list, title: str, ylabel: str):
-    ax.set_facecolor('#000000')
-    # ax.grid(True, alpha=0.3, color='white')
-    # Draw bars
-    _ = ax.bar(**bar_kwargs, width=1.0, edgecolor='white', linewidth=1)
-    # Add error bars
-    ax.errorbar(
-        bar_kwargs["x"], bar_kwargs["height"], yerr=errors, 
-        fmt='none', ecolor='white', alpha=0.8, elinewidth=1.5, capthick=1.5, capsize=4,
-    )
-    # Set labels and title
-    ax.set_ylabel(ylabel, color='white', fontsize=16)
-    ax.set_title(title, color='white', fontsize=18, pad=20)
-    # Set ticks and grid
-    ax.set_xticks([])
-    ax.tick_params(colors='white', labelsize=13)
-    # Truncate axis to better fit the bars
-    new_ymin, new_ymax = 1e9, -1e9
-    for h, e in zip(bar_kwargs["height"], errors):
-        new_ymin = min(new_ymin, 0.98 * (h - e))
-        new_ymax = max(new_ymax, 1.02 * (h + e))
-    ymin, ymax = ax.get_ylim() 
-    ax.set_ylim(max(ymin, new_ymin), min(ymax, new_ymax))
-
-
-def create_matplotlib_bar_plot(per_scenario_data: dict):
+    errors_bars = []
+    x_ticks = []
+
+    for device_name, device_data in load_data(keep_common_scenarios_only=False).items():
+        per_scenario_data = device_data.get_bar_plot_data()
+        per_scenario_data = reorder_data(per_scenario_data)
+        device_xs = []
+        
+        for scenario_name, scenario_data in per_scenario_data.items():    
+            bar_kwargs["x"].append(current_x)
+            bar_kwargs["height"].append(np.median(scenario_data[key]))
+            bar_kwargs["color"].append(get_color_for_config(scenario_data["config"]))
+            bar_kwargs["label"].append(scenario_name)
+            errors_bars.append(np.std(scenario_data[key]))
+            device_xs.append(current_x)
+            current_x += 1
+
+        x_ticks.append((np.mean(device_xs), device_name))
+        current_x += 1.5
+    return bar_kwargs, errors_bars, x_ticks
+
+def create_matplotlib_bar_plot() -> None:
     """Create side-by-side matplotlib bar charts for TTFT and TPOT data."""
 
     # Create figure with dark theme - maximum size for full screen
     plt.style.use('dark_background')
-    fig, axs = plt.subplots(1, 3, figsize=(30, 16)) 
+    fig, axs = plt.subplots(2, 1, figsize=(30, 16), sharex=True) 
     fig.patch.set_facecolor('#000000')
 
-    # Reorganize data
-    per_scenario_data = reorder_data(per_scenario_data)
-
     # TTFT Plot (left)
-    ttft_bars, ttft_errors = make_bar_kwargs(per_scenario_data, "ttft")
-    draw_bar_plot(axs[0], ttft_bars, ttft_errors, "Time to first token (lower is better)", "TTFT (seconds)")
+    ttft_bars, ttft_errors, x_ticks = make_bar_kwargs("ttft")
+    draw_bar_plot(axs[0], ttft_bars, ttft_errors, "Time to first token and inter-token latency (lower is better)", "TTFT (seconds)", x_ticks)
 
-    # ITL Plot (right)
-    itl_bars, itl_errors = make_bar_kwargs(per_scenario_data, "itl")
-    draw_bar_plot(axs[1], itl_bars, itl_errors, "Inter token latency (lower is better)", "ITL (seconds)")
+    # # ITL Plot (right)
+    itl_bars, itl_errors, x_ticks = make_bar_kwargs("itl")
+    draw_bar_plot(axs[1], itl_bars, itl_errors, None, "ITL (seconds)", x_ticks)
 
-    # E2E Plot (right)
-    e2e_bars, e2e_errors = make_bar_kwargs(per_scenario_data, "e2e")
-    draw_bar_plot(axs[2], e2e_bars, e2e_errors, "End-to-end latency (lower is better)", "E2E (seconds)")
+    # # E2E Plot (right)
+    # e2e_bars, e2e_errors = make_bar_kwargs("e2e")
+    # draw_bar_plot(axs, e2e_bars, e2e_errors, "End-to-end latency (lower is better)", "E2E (seconds)")
+    plt.tight_layout()
 
     # Add common legend with full text
     legend_labels = ttft_bars["label"]  # Use full labels without truncation
     legend_handles = [plt.Rectangle((0,0),1,1, color=color) for color in ttft_bars["color"]]
+
+    # Put a legend to the right of the current axis
     fig.legend(legend_handles, legend_labels, loc='lower center', ncol=4,
-               bbox_to_anchor=(0.5, -0.05), facecolor='black', edgecolor='white',
+               bbox_to_anchor=(0.515, -0.15), facecolor='black', edgecolor='white',
                labelcolor='white', fontsize=14)
 
     # Save plot to bytes with high DPI for crisp text
@@ -161,3 +93,29 @@ def create_matplotlib_bar_plot(per_scenario_data: dict):
     </div>
     """
     return html
+
+
+def draw_bar_plot(ax: plt.Axes, bar_kwargs: dict, errors: list, title: str, ylabel: str, xticks: list[tuple[float, str]]):
+    ax.set_facecolor('#000000')
+    ax.grid(True, alpha=0.2, color='white', zorder=0)
+    # Draw bars
+    _ = ax.bar(**bar_kwargs, width=1.0, edgecolor='white', linewidth=1, zorder=3)
+    # Add error bars
+    ax.errorbar(
+        bar_kwargs["x"], bar_kwargs["height"], yerr=errors, 
+        fmt='none', ecolor='white', alpha=0.8, elinewidth=1.5, capthick=1.5, capsize=4,
+    )
+    # Set labels and title
+    ax.set_ylabel(ylabel, color='white', fontsize=16)
+    ax.set_title(title, color='white', fontsize=18, pad=20)
+    # Set ticks and grid
+    ax.set_xticks([])
+    ax.tick_params(colors='white', labelsize=13)
+    ax.set_xticks([xt[0] for xt in xticks], [xt[1] for xt in xticks], fontsize=16)
+    # Truncate axis to better fit the bars
+    new_ymin, new_ymax = 1e9, -1e9
+    for h, e in zip(bar_kwargs["height"], errors):
+        new_ymin = min(new_ymin, 0.98 * (h - e))
+        new_ymax = max(new_ymax, 1.02 * (h + e))
+    ymin, ymax = ax.get_ylim() 
+    ax.set_ylim(max(ymin, new_ymin), min(ymax, new_ymax))

data.py

@@ -50,3 +50,15 @@ class ModelBenchmarkData:
             per_scenario_data = {k: per_scenario_data[k] for k, _ in collapsed_keys.values()}
 
         return per_scenario_data
+
+
+def load_data(keep_common_scenarios_only: bool = True) -> dict[str, ModelBenchmarkData]:
+    data = {
+        "MI325": ModelBenchmarkData("mi325_data.json"),
+        "H100": ModelBenchmarkData("h100_data.json"),
+    }
+    if keep_common_scenarios_only:
+        common_scenarios = set(data["MI325"].data.keys()) & set(data["H100"].data.keys())
+        for device_name, device_data in data.items():
+            device_data.data = {k: v for k, v in device_data.data.items() if k in common_scenarios}
+    return data

plot_utils.py

@@ -0,0 +1,53 @@
+# Color manipulation functions
+def hex_to_rgb(hex_color):
+    hex_color = hex_color.lstrip('#')
+    r, g, b = int(hex_color[0:2], 16), int(hex_color[2:4], 16), int(hex_color[4:6], 16)
+    return r, g, b
+
+def blend_colors(rgb, hex_color, blend_strength):
+    other_rgb = hex_to_rgb(hex_color)
+    return tuple(map(lambda i: int(rgb[i] * blend_strength + other_rgb[i] * (1 - blend_strength)), range(3)))
+
+def increase_brightness(r, g, b, factor):
+    return tuple(map(lambda x: int(x + (255 - x) * factor), (r, g, b)))
+
+def decrease_brightness(r, g, b, factor):
+    return tuple(map(lambda x: int(x * factor), (r, g, b)))
+
+def increase_saturation(r, g, b, factor) -> tuple[int, int, int]:
+    gray = 0.299 * r + 0.587 * g + 0.114 * b
+    return tuple(map(lambda x: int(gray + (x - gray) * factor), (r, g, b)))
+
+def rgb_to_hex(r, g, b):
+    r, g, b = map(lambda x: min(max(x, 0), 255), (r, g, b))
+    return f"#{r:02x}{g:02x}{b:02x}"
+
+
+# Color assignment function
+def get_color_for_config(config: dict):
+    # Determine the main hue for the attention implementation
+    attn_implementation, sdpa_backend = config["attn_implementation"], config["sdpa_backend"]
+    compilation = config["compilation"]
+    if attn_implementation == "eager":
+        main_hue = "#FF4B4BFF" if compilation else "#FF4141FF"
+    elif attn_implementation == "sdpa":
+        main_hue = {
+            None:                  "#4A90E2" if compilation else "#2E82E1FF",
+            "math":                "#408DDB" if compilation else "#227BD3FF",
+            "flash_attention":     "#35A34D" if compilation else "#219F3CFF",
+            "efficient_attention": "#605895" if compilation else "#423691FF",
+            "cudnn_attention":     "#774AE2" if compilation else "#5D27DCFF",
+        }[sdpa_backend]  # fmt: off
+    elif attn_implementation == "flash_attention_2":
+        main_hue = "#FFD700" if compilation else "#FFBF00FF"
+    else:
+        raise ValueError(f"Unknown attention implementation: {attn_implementation}")
+    # Apply color modifications for compilation and kernelization
+    r, g, b = hex_to_rgb(main_hue)
+    if config["compilation"]:
+        delta = 0.2 + 0.2 * (len(config["compile_mode"]) - 7) / 8
+        r, g, b = increase_brightness(r, g, b, delta)
+    if config["kernelize"]:
+        r, g, b = decrease_brightness(r, g, b, 0.8)    
+    # Return the color as a hex string
+    return rgb_to_hex(r, g, b)