Update src/App.js

src/App.js

@@ -95,11 +95,11 @@ const BenchmarkChart = () => {
   const [currentPhase, setCurrentPhase] = useState('baseline');
   const [currentMethodIndex, setCurrentMethodIndex] = useState(0);
   
-  const synthesisMethodsOrder = ['Keyword/Objective Transformations', 'Root Problem'];
+  const synthesisMethodsOrder = ['keyword_objective_combined', 'root_problem'];
   
   const phases = [
     { key: 'baseline', label: 'Human Baseline ASR' },
-    { key: 'additive_synthesis', label: 'Human + Synthesis Methods ASR' }
+    { key: 'additive_synthesis', label: 'Human + Transformation Methods ASR' }
   ];
 
   useEffect(() => {
@@ -130,7 +130,7 @@ const BenchmarkChart = () => {
     if (phase === 'baseline') {
       return modelData.baseline;
     } else if (phase === 'additive_synthesis') {
-      // Show the highest ASR achieved by any method tried so far
+      // Show the highest ASR achieved by any transformation method tried so far
       let maxASR = modelData.baseline;
       
       for (let i = 0; i < currentMethodIndex; i++) {
@@ -158,7 +158,12 @@ const BenchmarkChart = () => {
     }
     
     if (availableMethods.length === 0) return 'Human Baseline';
-    return availableMethods[availableMethods.length - 1].replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+    
+    const lastMethod = availableMethods[availableMethods.length - 1];
+    if (lastMethod === 'keyword_objective_combined') return 'Keyword/Objective Transformation';
+    if (lastMethod === 'root_problem') return 'Root Problem Transformation';
+    
+    return lastMethod.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
   };
 
   const getBarColor = (modelData, phase) => {
@@ -177,7 +182,7 @@ const BenchmarkChart = () => {
         {/* Header */}
         <div className="text-center mb-6">
           <h1 className="text-3xl font-bold text-white mb-3">
-            LLM Attack Success Rate with Synthesis Methods
+            LLM Attack Success Rate with Transformation Methods
           </h1>
           <p className="text-slate-300">
             SafetyBench Aug 2025 - Real ASR Calculations
@@ -190,8 +195,8 @@ const BenchmarkChart = () => {
               <div className="text-left">
                 <p className="text-yellow-200 font-semibold mb-2">Methodology Note</p>
                 <p className="text-yellow-100 text-sm leading-relaxed">
-                  <strong>Additive Visualization:</strong> This chart shows cumulative impact by progressively adding each synthesis method's individual attack success rate. 
-                  Values >100% represent synthesis of multiple conversations off one failed, human seed conversation. 
+                  <strong>Additive Visualization:</strong> This chart shows cumulative impact by progressively adding each transformation method's individual attack success rate. 
+                  Values >100% represent transformation of multiple conversations off one failed, human seed conversation. 
                   Results are based on HarmBench Grading methodology and should be interpreted as relative performance indicators.
                 </p>
               </div>
@@ -260,7 +265,7 @@ const BenchmarkChart = () => {
             </div>
             <div className="flex items-center space-x-2">
               <div className="w-3 h-3 bg-gradient-to-r from-green-500 to-green-600 rounded"></div>
-              <span className="text-gray-700">With Synthesis Methods</span>
+              <span className="text-gray-700">With Transformation Methods</span>
             </div>
           </div>
         </div>
@@ -271,7 +276,7 @@ const BenchmarkChart = () => {
             Top performers: Grok 4 (85.15%), Deepseek R1-0528 (83.76%), Llama 3.1 405B (80.75%)
           </p>
           <p className="text-xs">
-            Shows highest ASR achieved when combining human attempts with synthesis methods
+            Shows highest ASR achieved when combining human attempts with transformation methods
           </p>
         </div>
       </div>