vis update

app.py

@@ -18,6 +18,7 @@ import asyncio
 from apscheduler.schedulers.asyncio import AsyncIOScheduler
 import weave
 from utils.db import TracePreprocessor
+from gradio.themes.soft import Soft
 
 preprocessor = TracePreprocessor()
 
@@ -86,7 +87,7 @@ def update_task_details(benchmark_name, agent_name, task_id):
 
     summary = analysis.get('task_analysis', {})
     
-    overview = f"## Task Overview\n\n{summary.get('overview', 'No overview available.')}\n\n"
+    overview = f"### Task Overview\n\n{summary.get('overview', 'No overview available.')}\n\n"
     # overview += f"### Successes\n{summary.get('key_successes', 'No successes listed.')}\n\n"
     # overview += f"### Challenges\n{summary.get('main_challenges', 'No challenges listed.')}\n\n"
     # overview += f"### Overall Assessment\n{summary.get('overall_assessment', 'No assessment available.')}\n\n"
@@ -157,9 +158,9 @@ def format_call_info(step, step_index):
         }}
     </style>
 
-    <h2>Step {step_index + 1}: {analysis.get('headline', '')}</h2>
+    <h3>Step {step_index + 1}: {analysis.get('headline', '')}</h3>
 
-    <h3>Call Metadata</h3>
+    <h4>Call Metadata</h4>
     <ul>
         <li><strong>Weave Task ID:</strong> {call_data['weave_task_id']}</li>
         <li><strong>Trace ID:</strong> {call_data['trace_id']}</li>
@@ -168,16 +169,16 @@ def format_call_info(step, step_index):
         <li><strong>Model:</strong> {call_data['inputs']['model']}</li>
     </ul>
 
-    <h3>Inputs</h3>
+    <h4>Inputs</h4>
     {format_json(call_data['inputs'])}
 
-    <h3>Outputs</h3>
+    <h4>Outputs</h4>
     {format_json(call_data['outputs'])}
 
-    <h3>Usage</h3>
+    <h4>Usage</h4>
     {format_json(call_data['summary'])}
 
-    <h3>Analysis</h3>
+    <h4>Analysis</h4>
     <ul>
         <li><strong>Description:</strong> {analysis['description']}</li>
         <li><strong>Assessment:</strong> {analysis['assessment']}</li>
@@ -194,9 +195,9 @@ def update_failure_report(agent_name, benchmark_name):
         return "No failure report available for this agent.", None
 
     # Create overview of failure categories
-    categories_overview = "## Failure Categories Overview\n\n"
+    categories_overview = "### Failure Categories:\n\n"
     for category in failure_report['failure_categories']:
-        categories_overview += f"### {category['category_name']}\n"
+        categories_overview += f"#### {category['category_name']}\n"
         categories_overview += f"{category['description']}\n\n"
 
     # Count tasks affected by each category
@@ -214,14 +215,171 @@ def update_failure_report(agent_name, benchmark_name):
 
     return categories_overview, chart
 
-
-with gr.Blocks() as demo:
-    gr.Markdown("""
-    # 🥇 Agent Leaderboard
-    """)
+from gradio.themes.utils import colors, fonts, sizes
+from typing import Iterable
+class MyTheme(Soft):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.blue,
+        text_size: sizes.Size | str = sizes.text_lg,
+        font: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Lato"),
+            "ui-sans-serif",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Mono"),
+            "ui-monospace",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+
+my_theme = MyTheme()
+
+with gr.Blocks(theme=my_theme, css='css.css') as demo:
+    gr.Markdown((Path(__file__).parent / "header.md").read_text(), elem_classes=["text-large"])
+    gr.HTML("""
+<style>
+    .feature-row {
+        display: flex;
+        justify-content: space-between;
+        margin-top: 20px;
+        margin-bottom: 20px;
+    }
+    .feature-column {
+        flex: 1;
+        padding: 25px;
+        background-color: #ffffff;
+        border-radius: 10px;
+        margin: 0 15px;
+        text-align: left;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        border-top: 5px solid #3498db;
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+    }
+    .feature-column:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
+    }
+    .feature-keyword {
+        font-size: 1.2em;
+        font-weight: bold;
+        color: #1b9e77;
+        margin-bottom: 10px;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+    }
+    .feature-content {
+        flex-grow: 1;
+    }
+    .feature-description {
+        font-size: 0.95em;
+        line-height: 1.6;
+        color: #333;
+    }
+</style>
+
+<div class="feature-row">
+    <div class="feature-column">
+        <div class="feature-keyword">Centralized</div>
+        <div class="feature-content">
+            <p class="feature-description">Evaluations across agent benchmarks are all recorded to a single leaderboard that evaluates every listed agent in the same way.</p>
+        </div>
+    </div>
+    <div class="feature-column">
+        <div class="feature-keyword">Third-party</div>
+        <div class="feature-content">
+            <p class="feature-description">Agent developers clearly have competing objectives in reporting accuracy: they want to achieve state-of-the-art performance.</p>
+        </div>
+    </div>
+    <div class="feature-column">
+        <div class="feature-keyword">Cost-controlled</div>
+        <div class="feature-content">
+            <p class="feature-description">For downstream users, understanding the cost of running agents is a significant need for adoption. For agent developers, cost-controlled evaluations help develop accurate baselines.</p>
+        </div>
+    </div>
+</div>
+<style>
+    .section-heading {
+        font-size: 1.8em;
+        font-weight: bold;
+        color: #2c3e50;
+        margin-top: 40px;
+        margin-bottom: 20px;
+        text-align: left;
+    }
+    .user-types-container {
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        gap: 20px;
+        margin-top: 20px;
+    }
+    .user-type {
+        background-color: #ffffff;
+        border-radius: 10px;
+        padding: 25px;
+        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s ease, box-shadow 0.3s ease;
+        border-left: 5px solid #3498db;
+    }
+    .user-type:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
+    }
+    .user-type-title {
+        font-size: 1.2em;
+        font-weight: bold;
+        color: #3498db;
+        margin-bottom: 10px;
+    }
+    .user-type-description {
+        font-size: 0.95em;
+        line-height: 1.6;
+        color: #333;
+    }
+</style>
+<br/>
+<h2 class="section-heading">Who is it for?</h2>
+<p>We see HAL being useful for four types of users:</p>
+
+<div class="user-types-container">
+    <div class="user-type">
+        <h3 class="user-type-title">Downstream Users & Procurers</h3>
+        <p class="user-type-description">Customers looking to deploy agents can get visibility into existing benchmarks, know developers building useful agents, and identify the state of the art for both cost and accuracy for their tasks of interest.</p>
+    </div>
+    <div class="user-type">
+        <h3 class="user-type-title">Agent Benchmark Developers</h3>
+        <p class="user-type-description">Reporting results on a centralized leaderboard could allow improved visibility into agent benchmarks that measure real-world utility.</p>
+    </div>
+    <div class="user-type">
+        <h3 class="user-type-title">Agent Developers</h3>
+        <p class="user-type-description">HAL allows for easy reproduction of past agents, clear comparison with past baselines, and a straightforward way to compete on a leaderboard.</p>
+    </div>
+    <div class="user-type">
+        <h3 class="user-type-title">Safety Researchers</h3>
+        <p class="user-type-description">Understanding agent capabilities on real-world safety threats and their associated costs is crucial. For example, Cybench evaluations could provide insights into agent performance and affordability for potential adversaries.</p>
+    </div>
+</div>
+<br/>
+""")
     
     with gr.Tabs():
         with gr.Tab("USACO"):
+            gr.Markdown("""The USA Computing Olympiad (USACO) is a computer programming competition for pre-college students. This benchmark evaluates the performance of AI agents on a set of 307 USACO tasks. The agents are evaluated based on the number of tasks correctly solved.""")
             with gr.Row():
                 with gr.Column(scale=2):
                     Leaderboard(
@@ -234,10 +392,15 @@ with gr.Blocks() as demo:
                         hide_columns=config.USACO_HIDE_COLUMNS,
                         search_columns=config.USACO_SEARCH_COLUMNS,
                     )
+            with gr.Row():
+                gr.Markdown("### Accuracy vs. Cost for USACO agents")
             with gr.Row():
                 scatter_plot = gr.Plot(create_scatter_plot(parse_json_files(os.path.join(abs_path, "evals_live"), 'usaco'), "Total Cost", "Accuracy", "Total Cost (in USD)", "Accuracy", ["Agent Name"]))
             
-            gr.Markdown("# Task Success Heatmap")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Task success heatmap")
+            gr.Markdown("The task success heatmap shows which agent can solve which tasks. Agents are sorted by total accuracy (higher is better); tasks in USACO are sorted by decreasing order of difficulty (tasks on the left are solved by the most agents; tasks on the right are solved by the least")
             with gr.Row():
                 task_success_heatmap = gr.Plot()
             demo.load(
@@ -247,8 +410,10 @@ with gr.Blocks() as demo:
             ),
             outputs=[task_success_heatmap]
             )
-
-            gr.Markdown("# Failure Report")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Failure report for each agent")
+            gr.Markdown('Select an agent to see why the agent fails to solve tasks correctly. Note that these descriptions (and the failure categories) are generated by LLM-based evaluations of the agent logs and may contain inaccuracies.')
             with gr.Row():
                 with gr.Column(scale=1):
                     failure_report_agent_dropdown = gr.Dropdown(label="Select Agent for Failure Report")
@@ -269,7 +434,9 @@ with gr.Blocks() as demo:
                                                 inputs=[failure_report_agent_dropdown, gr.Textbox(value="usaco", visible=False)],
                                                 outputs=[failure_categories_overview, failure_categories_chart])
             
-            gr.Markdown("# Agent Monitor")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Agent monitor")
             with gr.Row():
                 with gr.Column(scale=1):
                     agent_dropdown = gr.Dropdown(label="Select Agent")
@@ -291,7 +458,9 @@ with gr.Blocks() as demo:
                                  inputs=[gr.Textbox(value="usaco", visible=False), agent_dropdown, task_dropdown],
                                  outputs=[task_overview, flow_chart, gr.Textbox(visible=False)])
             
-            gr.Markdown("# Raw Predictions")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Raw predictions")
             with gr.Row():
                 with gr.Column(scale=1):
                     raw_agent_dropdown = gr.Dropdown(label="Select Agent")
@@ -366,7 +535,9 @@ with gr.Blocks() as demo:
             with gr.Row():
                 scatter_plot = gr.Plot(create_scatter_plot(parse_json_files(os.path.join(abs_path, "evals_live"), 'swebench_verified'), "Total Cost", "Accuracy", "Total Cost (in USD)", "Accuracy", ["Agent Name"]))
             
-            gr.Markdown("# Task Success Heatmap")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Task success heatmap")
             with gr.Row():
                 task_success_heatmap = gr.Plot()
             demo.load(
@@ -377,7 +548,9 @@ with gr.Blocks() as demo:
             outputs=[task_success_heatmap]
             )
             
-            gr.Markdown("# Failure Report")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Failure report for each agent")
             with gr.Row():
                 with gr.Column(scale=1):
                     failure_report_agent_dropdown = gr.Dropdown(label="Select Agent for Failure Report")
@@ -398,7 +571,9 @@ with gr.Blocks() as demo:
                                                 inputs=[failure_report_agent_dropdown, gr.Textbox(value="swebench_verified", visible=False)],
                                                 outputs=[failure_categories_overview, failure_categories_chart])
             
-            gr.Markdown("# Agent Monitor")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Agent monitor")
             with gr.Row():
                 with gr.Column(scale=1):
                     agent_dropdown = gr.Dropdown(label="Select Agent")
@@ -419,8 +594,9 @@ with gr.Blocks() as demo:
             task_dropdown.change(update_task_details,
                                  inputs=[gr.Textbox(value="swebench_verified", visible=False), agent_dropdown, task_dropdown],
                                  outputs=[task_overview, flow_chart, gr.Textbox(visible=False)])
-            
-            gr.Markdown("# Raw Predictions")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Raw predictions")
             with gr.Row():
                 with gr.Column(scale=1):
                     raw_agent_dropdown = gr.Dropdown(label="Select Agent")
@@ -494,7 +670,9 @@ with gr.Blocks() as demo:
             with gr.Row():
                 scatter_plot = gr.Plot(create_scatter_plot(parse_json_files(os.path.join(abs_path, "evals_live"), 'swebench_lite'), "Total Cost", "Accuracy", "Total Cost (in USD)", "Accuracy", ["Agent Name"]))
 
-            gr.Markdown("# Task Success Heatmap")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Task success heatmap")
             with gr.Row():
                 task_success_heatmap = gr.Plot()
             demo.load(
@@ -505,7 +683,9 @@ with gr.Blocks() as demo:
             outputs=[task_success_heatmap]
             )
             
-            gr.Markdown("# Failure Report")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Failure report for each agent")
             with gr.Row():
                 with gr.Column(scale=1):
                     failure_report_agent_dropdown = gr.Dropdown(label="Select Agent for Failure Report")
@@ -526,7 +706,9 @@ with gr.Blocks() as demo:
                                                 inputs=[failure_report_agent_dropdown, gr.Textbox(value="swebench_lite", visible=False)],
                                                 outputs=[failure_categories_overview, failure_categories_chart])
             
-            gr.Markdown("# Agent Monitor")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Agent monitor")
             with gr.Row():
                 with gr.Column(scale=1):
                     agent_dropdown = gr.Dropdown(label="Select Agent")
@@ -548,7 +730,9 @@ with gr.Blocks() as demo:
                                  inputs=[gr.Textbox(value="swebench_lite", visible=False), agent_dropdown, task_dropdown],
                                  outputs=[task_overview, flow_chart, gr.Textbox(visible=False)])
 
-            gr.Markdown("# Raw Predictions")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Raw predictions")
             with gr.Row():
                 with gr.Column(scale=1):
                     raw_agent_dropdown = gr.Dropdown(label="Select Agent")
@@ -622,7 +806,9 @@ with gr.Blocks() as demo:
             with gr.Row():
                 scatter_plot = gr.Plot(create_scatter_plot(parse_json_files(os.path.join(abs_path, "evals_live"), 'mlagentbench'), "Total Cost", "Overall Score", "Total Cost (in USD)", "Overall Score", ["Agent Name"]))
 
-            gr.Markdown("# Failure Report")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Failure report for each agent")
             with gr.Row():
                 with gr.Column(scale=1):
                     failure_report_agent_dropdown = gr.Dropdown(label="Select Agent for Failure Report")
@@ -643,7 +829,9 @@ with gr.Blocks() as demo:
                                                 inputs=[failure_report_agent_dropdown, gr.Textbox(value="mlagentbench", visible=False)],
                                                 outputs=[failure_categories_overview, failure_categories_chart])
             
-            gr.Markdown("# Agent Monitor")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Agent monitor")
             with gr.Row():
                 with gr.Column(scale=1):
                     agent_dropdown = gr.Dropdown(label="Select Agent")
@@ -665,7 +853,9 @@ with gr.Blocks() as demo:
                                  inputs=[gr.Textbox(value="mlagentbench", visible=False), agent_dropdown, task_dropdown],
                                  outputs=[task_overview, flow_chart, gr.Textbox(visible=False)])
 
-            gr.Markdown("# Raw Predictions")
+            gr.Markdown("")
+            gr.Markdown("")
+            gr.Markdown("## Raw predictions")
             with gr.Row():
                 with gr.Column(scale=1):
                     raw_agent_dropdown = gr.Dropdown(label="Select Agent")

css.css

@@ -1,157 +1,50 @@
-html {
-	font-family: Inter;
-	font-size: 16px;
-	font-weight: 400;
-	line-height: 1.5;
-	-webkit-text-size-adjust: 100%;
-	background: #fff;
-	color: #323232;
-	-webkit-font-smoothing: antialiased;
-	-moz-osx-font-smoothing: grayscale;
-	text-rendering: optimizeLegibility;
-}
-
+/* Base styles and variables */
 :root {
-	--space: 1;
-	--vspace: calc(var(--space) * 1rem);
-	--vspace-0: calc(3 * var(--space) * 1rem);
-	--vspace-1: calc(2 * var(--space) * 1rem);
-	--vspace-2: calc(1.5 * var(--space) * 1rem);
-	--vspace-3: calc(0.5 * var(--space) * 1rem);
-}
-
-.app {
-	max-width: 748px !important;
-}
-
-.prose p {
-	margin: var(--vspace) 0;
-	line-height: var(--vspace * 2);
-	font-size: 1rem;
-}
-
-code {
-	font-family: "Inconsolata", sans-serif;
-	font-size: 16px;
-}
-
-h1,
-h1 code {
-	font-weight: 400;
-	line-height: calc(2.5 / var(--space) * var(--vspace));
-}
-
-h1 code {
-	background: none;
+	--primary-color: #3498db;
+	--secondary-color: #2c3e50;
+	--background-color: #f8f9fa;
+	--text-color: #333;
+	--accent-color: #e74c3c;
+	--space: 1rem;
+  }
+    
+  /* Tabs */
+  .tab-nav {
+	display: flex;
+	background-color: var(--secondary-color);
+	border-radius: 8px 8px 0 0;
+	overflow: hidden;
+  }
+  
+  .tab-nav button {
+	padding: 1rem 1.5rem;
+	background-color: transparent;
+	color: #fff;
 	border: none;
-	letter-spacing: 0.05em;
-	padding-bottom: 5px;
-	position: relative;
-	padding: 0;
-}
-
-h2 {
-	margin: var(--vspace-1) 0 var(--vspace-2) 0;
-	line-height: 1em;
-}
-
-h3,
-h3 code {
-	margin: var(--vspace-1) 0 var(--vspace-2) 0;
-	line-height: 1em;
-}
-
-h4,
-h5,
-h6 {
-	margin: var(--vspace-3) 0 var(--vspace-3) 0;
-	line-height: var(--vspace);
-}
-
-.bigtitle,
-h1,
-h1 code {
-	font-size: calc(8px * 4.5);
-	word-break: break-word;
-}
-
-.title,
-h2,
-h2 code {
-	font-size: calc(8px * 3.375);
-	font-weight: lighter;
-	word-break: break-word;
-	border: none;
-	background: none;
-}
-
-.subheading1,
-h3,
-h3 code {
-	font-size: calc(8px * 1.8);
-	font-weight: 600;
-	border: none;
-	background: none;
-	letter-spacing: 0.1em;
-	text-transform: uppercase;
-}
-
-h2 code {
-	padding: 0;
-	position: relative;
-	letter-spacing: 0.05em;
-}
-
-blockquote {
-	font-size: calc(8px * 1.1667);
-	font-style: italic;
-	line-height: calc(1.1667 * var(--vspace));
-	margin: var(--vspace-2) var(--vspace-2);
-}
-
-.subheading2,
-h4 {
-	font-size: calc(8px * 1.4292);
-	text-transform: uppercase;
-	font-weight: 600;
-}
-
-.subheading3,
-h5 {
-	font-size: calc(8px * 1.2917);
-	line-height: calc(1.2917 * var(--vspace));
-
-	font-weight: lighter;
-	text-transform: uppercase;
-	letter-spacing: 0.15em;
-}
-
-h6 {
-	font-size: calc(8px * 1.1667);
-	font-size: 1.1667em;
-	font-weight: normal;
-	font-style: italic;
-	font-family: "le-monde-livre-classic-byol", serif !important;
-	letter-spacing: 0px !important;
-}
-
-#start .md > *:first-child {
-	margin-top: 0;
-}
-
-h2 + h3 {
-	margin-top: 0;
-}
-
-.md hr {
-	border: none;
-	border-top: 1px solid var(--block-border-color);
-	margin: var(--vspace-2) 0 var(--vspace-2) 0;
-}
-.prose ul {
-	margin: var(--vspace-2) 0 var(--vspace-1) 0;
-}
-
-.gap {
-	gap: 0;
-}
+	cursor: pointer;
+	transition: background-color 0.3s;
+  }
+  
+  .tab-nav button:hover,
+  .tab-nav button.selected {
+	background-color: var(--primary-color);
+  }
+  
+
+  .svelte-iibkxk .stretch {
+	display: none;
+  }
+
+  /* Utility classes */
+  .text-center { text-align: center; }
+  .text-right { text-align: right; }
+  .font-bold { font-weight: 700; }
+  .text-small { font-size: 0.875rem; }
+  .text-large { font-size: 1.25rem; }
+  .mt-1 { margin-top: 1rem; }
+  .mb-1 { margin-bottom: 1rem; }
+  .ml-1 { margin-left: 1rem; }
+  .mr-1 { margin-right: 1rem; }
+
+
+  

header.md

@@ -0,0 +1,3 @@
+# Holistic Agent Leaderboard (HAL)
+    
+**A centralized, standardized, cost-aware leaderboard for evaluating agents.**

scratch.py

@@ -0,0 +1,38 @@
+import json
+import os
+from pathlib import Path
+
+def process_json_files(directory, suffix="_updated"):
+    # Iterate through all JSON files in the directory
+    for filename in os.listdir(directory):
+        if filename.endswith(".json") and "USACO" in filename:
+            file_path = os.path.join(directory, filename)
+            
+            # Read the JSON file
+            with open(file_path, 'r') as f:
+                data = json.load(f)
+            
+            # Extract sdict from raw_eval_results
+            sdict = data['raw_eval_results']['sdict']
+            
+            # Calculate successful_tasks and failed_tasks
+            successful_tasks = [key for key in sdict if float(sdict[key][0]['result']['fraction_passed']) == 1]
+            failed_tasks = [key for key in sdict if float(sdict[key][0]['result']['fraction_passed']) < 1]
+            
+            # Add new key-value pairs to the results
+            data['results']['successful_tasks'] = successful_tasks
+            data['results']['failed_tasks'] = failed_tasks
+            
+            # Create new filename with suffix
+            new_filename = f"{Path(filename).stem}{suffix}{Path(filename).suffix}"
+            new_file_path = os.path.join(directory, new_filename)
+            
+            # Write updated data to new file
+            with open(new_file_path, 'w') as f:
+                json.dump(data, f, indent=4)
+            
+            print(f"Processed {filename} and saved as {new_filename}")
+
+# Usage
+directory_path = "/Users/benediktstroebl/Documents/GitHub/leaderboard/evals_live"
+process_json_files(directory_path)

utils/viz.py

@@ -26,7 +26,7 @@ def create_task_success_heatmap(df, benchmark_name):
         z=pivot_df.values,
         y=pivot_df.index,
         x=pivot_df.columns,
-        colorscale=[[0, 'white'], [1, '#1b9e77']],  # White for failed, green for success
+        colorscale=[[0, 'white'], [1, '#3498db']],  # White for failed, green for success
         showscale=False,
         hovertemplate='<b>Agent:</b> %{y}<br>' +
                       '<b>Task:</b> %{x}<br>' +
@@ -37,7 +37,7 @@ def create_task_success_heatmap(df, benchmark_name):
     fig.update_layout(
         xaxis_title='Task ID',
         height=total_height,
-        width=1300,
+        width=1150,
         yaxis=dict(
             autorange='reversed',
             showticklabels=True,  # Show y-axis tick labels (agent names)
@@ -81,16 +81,23 @@ def create_bar_chart(categories, values, x_label, y_label, title):
     sorted_data = sorted(zip(categories, values), key=lambda x: x[1], reverse=True)
     categories, values = zip(*sorted_data)
 
+    # get total number of tasks
+    total_tasks = sum(values)
+
+    text_labels = [f"({value/total_tasks:.1%} of failures)" for value in values]
+
+
     fig = go.Figure(data=[go.Bar(
         y=categories,
         x=values,
         orientation='h',
-        marker_color='#1b9e77',  # Same color as the scatter plot
-        text=values,
+        marker_color='#3498db',  # Same color as the scatter plot
+        text=text_labels,
         textposition='auto',
+        customdata=[f'{value} tasks ({value/total_tasks:.1%} of failures)' for value in values],
         textfont=dict(color='black', size=14, family='Arial', weight=2),
         hovertemplate='<b>%{y}</b><br>' +
-                      'Affected Tasks: %{x}<br>'
+                      'Affected Tasks: %{customdata}<extra></extra>'
     )])
 
     fig.update_layout(
@@ -144,7 +151,7 @@ def create_scatter_plot(df, x: str, y: str, x_label: str = None, y_label: str =
             ])
         )
     
-    fig.update_traces(marker=dict(size=10, color='#1b9e77'),
+    fig.update_traces(marker=dict(size=10, color='#3498db'),
                       hoverlabel=dict(bgcolor="white", font_size=12, font_family="Arial"),)
     
 
@@ -164,7 +171,7 @@ def create_scatter_plot(df, x: str, y: str, x_label: str = None, y_label: str =
     fig.update_xaxes(rangemode="tozero")
 
     fig.update_layout(
-    width = 1300,
+    width = 1150,
     height = 600,
     xaxis_title = x_label,
     yaxis_title = y_label,
@@ -287,7 +294,7 @@ def create_flow_chart(steps):
         hoverlabel=dict(bgcolor="white", font_size=12, font_family="Arial"),
         marker=dict(
             # color=node_colors,
-            color='#1b9e77',
+            color='#3498db',
             size=30,
             line_width=2,
             # symbol=node_shapes