Update src/App.js

src/App.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 
 const BenchmarkChart = () => {
-  // Real data sorted by highest achievable ASR (largest bars at top)
+  // Real data sorted by Human Baseline ASR (highest to lowest)
   const benchmarkData = [
     {
       model: "Grok 4",
@@ -25,18 +25,18 @@ const BenchmarkChart = () => {
       }
     },
     {
-      model: "Gemini 2.5 Pro",
-      baseline: 55.67,
+      model: "Llama 3 8B Instruct Reference",
+      baseline: 58.33,
       methods: {
-        keyword_objective_combined: 74.14,
-        root_problem: 67.19
+        keyword_objective_combined: 68.86
       }
     },
     {
-      model: "Llama 3 8B Instruct Reference",
-      baseline: 58.33,
+      model: "Gemini 2.5 Pro",
+      baseline: 55.67,
       methods: {
-        keyword_objective_combined: 68.86
+        keyword_objective_combined: 74.14,
+        root_problem: 67.19
       }
     },
     {
@@ -54,17 +54,17 @@ const BenchmarkChart = () => {
       }
     },
     {
-      model: "GPT o3",
-      baseline: 22.00,
+      model: "Claude 4 Sonnet",
+      baseline: 26.33,
       methods: {
-        keyword_objective_combined: 30.53
+        keyword_objective_combined: 28.64
       }
     },
     {
-      model: "Claude 4 Sonnet",
-      baseline: 26.33,
+      model: "GPT o3",
+      baseline: 22.00,
       methods: {
-        keyword_objective_combined: 28.64
+        keyword_objective_combined: 30.53
       }
     },
     {
@@ -274,7 +274,7 @@ const BenchmarkChart = () => {
         {/* Footer */}
         <div className="mt-4 text-center text-slate-400 space-y-1">
           <p className="text-sm">
-            Sorted by Maximum ASR (largest bars at top) • Click button above for manual control
+            Sorted by Human Baseline ASR (highest to lowest) • Click button above for manual control
           </p>
           <p className="text-xs">
             Bars extend from baseline to show transformation method impact