Update src/App.js

src/App.js

@@ -1,93 +1,93 @@
 import React, { useState, useEffect } from 'react';
 
 const BenchmarkChart = () => {
-  // Real data from your ASR calculations - sorted by highest achievable ASR
+  // Real data sorted by Human Baseline (ascending)
   const benchmarkData = [
     {
-      model: "Grok 4",
-      baseline: 68.67,
+      model: "GPT 5 mini",
+      baseline: 7.67,
       methods: {
-        keyword_objective_combined: 85.15
+        keyword_objective_combined: 11.28,
+        root_problem: 10.44
       }
     },
     {
-      model: "Deepseek R1-0528",
-      baseline: 68.67,
+      model: "GPT 5",
+      baseline: 8.33,
       methods: {
-        keyword_objective_combined: 83.76
+        keyword_objective_combined: 11.68,
+        root_problem: 12.46
       }
     },
     {
-      model: "Llama 3.1 405B",
-      baseline: 67.00,
+      model: "Claude Opus 4.1", 
+      baseline: 20.67,
       methods: {
-        keyword_objective_combined: 80.75
+        keyword_objective_combined: 23.56
       }
     },
     {
-      model: "Gemini 2.5 Pro",
-      baseline: 55.67,
+      model: "GPT o3",
+      baseline: 22.00,
       methods: {
-        keyword_objective_combined: 74.14,
-        root_problem: 67.19
+        keyword_objective_combined: 30.53
       }
     },
     {
-      model: "Llama 3 8B Instruct Reference",
-      baseline: 58.33,
+      model: "Claude 4 Sonnet",
+      baseline: 26.33,
       methods: {
-        keyword_objective_combined: 68.86
+        keyword_objective_combined: 28.64
       }
     },
     {
-      model: "Mixtral 8x22B",
-      baseline: 48.00,
+      model: "Llama 4 Maverick Instruct",
+      baseline: 45.00,
       methods: {
-        keyword_objective_combined: 66.82
+        keyword_objective_combined: 56.46
       }
     },
     {
-      model: "Llama 4 Maverick Instruct",
-      baseline: 45.00,
+      model: "Mixtral 8x22B",
+      baseline: 48.00,
       methods: {
-        keyword_objective_combined: 56.46
+        keyword_objective_combined: 66.82
       }
     },
     {
-      model: "GPT o3",
-      baseline: 22.00,
+      model: "Gemini 2.5 Pro",
+      baseline: 55.67,
       methods: {
-        keyword_objective_combined: 30.53
+        keyword_objective_combined: 74.14,
+        root_problem: 67.19
       }
     },
     {
-      model: "Claude 4 Sonnet",
-      baseline: 26.33,
+      model: "Llama 3 8B Instruct Reference",
+      baseline: 58.33,
       methods: {
-        keyword_objective_combined: 28.64
+        keyword_objective_combined: 68.86
       }
     },
     {
-      model: "Claude Opus 4.1", 
-      baseline: 20.67,
+      model: "Llama 3.1 405B",
+      baseline: 67.00,
       methods: {
-        keyword_objective_combined: 23.56
+        keyword_objective_combined: 80.75
       }
     },
     {
-      model: "GPT 5",
-      baseline: 8.33,
+      model: "Deepseek R1-0528",
+      baseline: 68.67,
       methods: {
-        keyword_objective_combined: 11.68,
-        root_problem: 12.46
+        keyword_objective_combined: 83.76
       }
     },
     {
-      model: "GPT 5 mini",
-      baseline: 7.67,
+      model: "Grok 4",
+      baseline: 68.67,
       methods: {
-        keyword_objective_combined: 11.28,
-        root_problem: 10.44
+        keyword_objective_combined: 85.15
       }
     }
   ];
@@ -96,41 +96,11 @@ const BenchmarkChart = () => {
   const [currentMethodIndex, setCurrentMethodIndex] = useState(0);
   
   const synthesisMethodsOrder = ['keyword_objective_combined', 'root_problem'];
-  
-  const phases = [
-    { key: 'baseline', label: 'Human Baseline ASR' },
-    { key: 'additive_synthesis', label: 'Human + Transformation Methods ASR' }
-  ];
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setCurrentPhase(prev => prev === 'baseline' ? 'additive_synthesis' : 'baseline');
-      setCurrentMethodIndex(0);
-    }, 8000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  useEffect(() => {
-    if (currentPhase === 'additive_synthesis') {
-      const methodInterval = setInterval(() => {
-        setCurrentMethodIndex(prev => {
-          const nextIndex = prev + 1;
-          if (nextIndex > synthesisMethodsOrder.length) {
-            return synthesisMethodsOrder.length;
-          }
-          return nextIndex;
-        });
-      }, 2000);
-      return () => clearInterval(methodInterval);
-    }
-  }, [currentPhase]);
 
   const getCurrentValue = (modelData, phase) => {
     if (phase === 'baseline') {
       return modelData.baseline;
     } else if (phase === 'additive_synthesis') {
-      // Show the highest ASR achieved by any transformation method tried so far
       let maxASR = modelData.baseline;
       
       for (let i = 0; i < currentMethodIndex; i++) {
@@ -160,19 +130,25 @@ const BenchmarkChart = () => {
     if (availableMethods.length === 0) return 'Human Baseline';
     
     const lastMethod = availableMethods[availableMethods.length - 1];
-    if (lastMethod === 'keyword_objective_combined') return 'Keyword/Objective Transformation';
-    if (lastMethod === 'root_problem') return 'Root Problem Transformation';
+    let transformationName;
+    if (lastMethod === 'keyword_objective_combined') transformationName = 'Keyword/Objective Transformation';
+    else if (lastMethod === 'root_problem') transformationName = 'Root Problem Transformation';
+    else transformationName = lastMethod.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
     
-    return lastMethod.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
+    return `Human Baseline + ${transformationName}`;
   };
 
-  const getBarColor = (modelData, phase) => {
-    if (phase === 'baseline') {
-      return 'from-blue-500 to-blue-600';
-    } else if (phase === 'additive_synthesis' && currentMethodIndex > 0) {
-      return 'from-green-500 to-green-600';
+  const handleManualAnimate = () => {
+    if (currentPhase === 'baseline') {
+      setCurrentPhase('additive_synthesis');
+      setCurrentMethodIndex(0);
+      
+      // Manually step through methods
+      setTimeout(() => setCurrentMethodIndex(1), 500);
+      setTimeout(() => setCurrentMethodIndex(2), 2500);
     } else {
-      return 'from-blue-500 to-blue-600';
+      setCurrentPhase('baseline');
+      setCurrentMethodIndex(0);
     }
   };
 
@@ -182,43 +158,40 @@ const BenchmarkChart = () => {
         {/* Header */}
         <div className="text-center mb-6">
           <h1 className="text-3xl font-bold text-white mb-3">
-            LLM Attack Success Rate with Transformation Methods
+            JulyAI Safety Benchmark For Frontier Models
           </h1>
           <p className="text-slate-300">
-            SafetyBench Aug 2025 - Real ASR Calculations
+            Attack Success Rate Analysis with Transformation Methods
           </p>
-          
-          {/* Methodology Note */}
-          <div className="mt-4 p-3 bg-yellow-900/30 border border-yellow-500/30 rounded-lg max-w-4xl mx-auto">
-            <div className="flex items-start space-x-3">
-              <div className="text-yellow-400 mt-1">⚠️</div>
-              <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 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>
-            </div>
+
+          {/* Control Button */}
+          <div className="mt-4 flex justify-center">
+            <button 
+              onClick={handleManualAnimate}
+              className="px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg font-semibold transition-colors"
+            >
+              {currentPhase === 'baseline' ? 'Show Transformation Impact' : 'Reset to Baseline'}
+            </button>
           </div>
         </div>
 
-        {/* Chart Container - Scrollable Box */}
+        {/* Chart Container - Taller */}
         <div className="bg-white rounded-xl shadow-2xl p-4">
-          <div className="h-96 overflow-y-auto pr-2">
+          <div className="h-[600px] overflow-y-auto pr-2">
             <div className="space-y-2">
               {benchmarkData.map((modelData, index) => {
                 const currentValue = getCurrentValue(modelData, currentPhase);
                 const baselineValue = modelData.baseline;
                 const maxValue = 90;
-                const barWidth = (currentValue / maxValue) * 100;
+                const baselineWidth = (baselineValue / maxValue) * 100;
+                const totalWidth = (currentValue / maxValue) * 100;
+                const extensionWidth = totalWidth - baselineWidth;
                 const currentMethod = getCurrentMethod(modelData, currentPhase);
                 const gain = currentValue - baselineValue;
                 
                 return (
                   <div key={modelData.model} className="relative">
-                    {/* Model Name and Value */}
+                    {/* Model Name and Value - Fixed Height Layout */}
                     <div className="flex items-center justify-between mb-1">
                       <div>
                         <h3 className="font-semibold text-gray-800 text-sm">
@@ -228,24 +201,37 @@ const BenchmarkChart = () => {
                           {currentMethod}
                         </p>
                       </div>
-                      <div className="text-right">
+                      <div className="text-right flex items-center space-x-2">
+                        {gain > 0 && (
+                          <span className="text-xs font-semibold text-green-600">
+                            +{gain.toFixed(1)}
+                          </span>
+                        )}
                         <span className="text-lg font-bold text-gray-700">
                           {currentValue.toFixed(1)}%
                         </span>
-                        {gain > 0 && (
-                          <div className="text-xs font-semibold text-green-600">
-                            +{gain.toFixed(1)} points
-                          </div>
-                        )}
                       </div>
                     </div>
                     
-                    {/* Progress Bar */}
+                    {/* Progress Bar - Shows Growth from Baseline */}
                     <div className="relative h-6 bg-gray-200 rounded-full overflow-hidden">
+                      {/* Baseline Bar (Blue) - Flat, no rounding for seamless extension */}
+                      <div 
+                        className="absolute left-0 top-0 h-full bg-gradient-to-r from-blue-500 to-blue-600"
+                        style={{ width: `${Math.max(baselineWidth, 5)}%` }}
+                      />
+                      
+                      {/* Extension Bar (Green) - Only rounded at the end */}
                       <div 
-                        className={`h-full bg-gradient-to-r ${getBarColor(modelData, currentPhase)} rounded-full transition-all duration-2000 ease-out flex items-center justify-end pr-2`}
-                        style={{ width: `${Math.max(barWidth, 5)}%` }}
-                      >
+                        className="absolute top-0 h-full bg-gradient-to-r from-green-500 to-green-600 rounded-r-full transition-all duration-2000 ease-out"
+                        style={{ 
+                          left: `${baselineWidth}%`,
+                          width: currentPhase === 'additive_synthesis' && currentMethodIndex > 0 ? `${extensionWidth}%` : '0%'
+                        }}
+                      />
+                      
+                      {/* Percentage Label */}
+                      <div className="absolute right-2 top-0 h-full flex items-center">
                         <div className="text-white font-semibold text-xs">
                           {currentValue > 8 ? `${currentValue.toFixed(1)}%` : ''}
                         </div>
@@ -265,7 +251,22 @@ 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 Transformation Methods</span>
+              <span className="text-gray-700">Transformation Extension</span>
+            </div>
+          </div>
+        </div>
+        
+        {/* Methodology Note - Moved Below Chart */}
+        <div className="mt-6 p-3 bg-yellow-900/30 border border-yellow-500/30 rounded-lg max-w-4xl mx-auto">
+          <div className="flex items-start space-x-3">
+            <div className="text-yellow-400 mt-1">⚠️</div>
+            <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 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>
           </div>
         </div>
@@ -273,10 +274,10 @@ const BenchmarkChart = () => {
         {/* Footer */}
         <div className="mt-4 text-center text-slate-400 space-y-1">
           <p className="text-sm">
-            Top performers: Grok 4 (85.15%), Deepseek R1-0528 (83.76%), Llama 3.1 405B (80.75%)
+            Sorted by Human Baseline ASR • Click button above for manual control
           </p>
           <p className="text-xs">
-            Shows highest ASR achieved when combining human attempts with transformation methods
+            Bars extend from baseline to show transformation method impact
           </p>
         </div>
       </div>