Update src/App.js

src/App.js

@@ -1,79 +1,112 @@
 import React, { useState, useEffect } from 'react';
 
 const BenchmarkChart = () => {
-  // Real data from your CSV
+  // Real data from your ASR calculations - sorted by highest achievable ASR
   const benchmarkData = [
     {
-      model: "Claude 4 Sonnet",
-      direct_conversation: 26.33,
-      keyword_objective_combined: 3.13
+      model: "Grok 4",
+      baseline: 68.67,
+      methods: {
+        keyword_objective_combined: 85.15
+      }
     },
     {
-      model: "Claude Opus 4.1",
-      direct_conversation: 20.67,
-      keyword_objective_combined: 3.65
+      model: "Deepseek R1-0528",
+      baseline: 68.67,
+      methods: {
+        keyword_objective_combined: 83.76
+      }
     },
     {
-      model: "Deepseek R1-0528",
-      direct_conversation: 68.67,
-      keyword_objective_combined: 48.18
+      model: "Llama 3.1 405B",
+      baseline: 67.00,
+      methods: {
+        keyword_objective_combined: 80.75
+      }
     },
     {
-      model: "GPT 5",
-      direct_conversation: 8.33,
-      keyword_objective_combined: 3.65,
-      bio_topic_change: 23.5,
-      enhancement: 10,
-      root_problem: 4.5
+      model: "Gemini 2.5 Pro",
+      baseline: 55.67,
+      methods: {
+        keyword_objective_combined: 74.14,
+        root_problem: 67.19
+      }
     },
     {
-      model: "GPT 5 mini",
-      direct_conversation: 7.67,
-      keyword_objective_combined: 3.91,
-      bio_topic_change: 14.5,
-      enhancement: 5.5,
-      root_problem: 3
+      model: "Llama 3 8B Instruct Reference",
+      baseline: 58.33,
+      methods: {
+        keyword_objective_combined: 68.86
+      }
+    },
+    {
+      model: "Mixtral 8x22B",
+      baseline: 48.00,
+      methods: {
+        keyword_objective_combined: 66.82
+      }
+    },
+    {
+      model: "Llama 4 Maverick Instruct",
+      baseline: 45.00,
+      methods: {
+        keyword_objective_combined: 56.46
+      }
     },
     {
       model: "GPT o3",
-      direct_conversation: 22,
-      keyword_objective_combined: 10.94
+      baseline: 22.00,
+      methods: {
+        keyword_objective_combined: 30.53
+      }
     },
     {
-      model: "Gemini 2.5 Pro",
-      direct_conversation: 55.67,
-      keyword_objective_combined: 41.67,
-      bio_topic_change: 53.5,
-      enhancement: 47,
-      root_problem: 26
+      model: "Claude 4 Sonnet",
+      baseline: 26.33,
+      methods: {
+        keyword_objective_combined: 28.64
+      }
     },
     {
-      model: "Grok 4",
-      direct_conversation: 68.67,
-      keyword_objective_combined: 52.6
+      model: "Claude Opus 4.1", 
+      baseline: 20.67,
+      methods: {
+        keyword_objective_combined: 23.56
+      }
     },
     {
-      model: "Llama 3.1 405B",
-      direct_conversation: 67,
-      keyword_objective_combined: 41.67
+      model: "GPT 5",
+      baseline: 8.33,
+      methods: {
+        keyword_objective_combined: 11.68,
+        root_problem: 12.46
+      }
+    },
+    {
+      model: "GPT 5 mini",
+      baseline: 7.67,
+      methods: {
+        keyword_objective_combined: 11.28,
+        root_problem: 10.44
+      }
     }
   ];
 
   const [currentPhase, setCurrentPhase] = useState('baseline');
   const [currentMethodIndex, setCurrentMethodIndex] = useState(0);
   
-  const synthesisMethodsOrder = ['keyword_objective_combined', 'bio_topic_change', 'enhancement', 'root_problem'];
+  const synthesisMethodsOrder = ['keyword_objective_combined', 'root_problem'];
   
   const phases = [
-    { key: 'baseline', label: 'Direct Conversation (Baseline)' },
-    { key: 'additive_synthesis', label: 'Adding Synthesis Methods' }
+    { key: 'baseline', label: 'Human Baseline ASR' },
+    { key: 'additive_synthesis', label: 'Human + Synthesis Methods ASR' }
   ];
 
   useEffect(() => {
     const interval = setInterval(() => {
       setCurrentPhase(prev => prev === 'baseline' ? 'additive_synthesis' : 'baseline');
-      setCurrentMethodIndex(0); // Reset when switching phases
-    }, 10000); // Reduced by 2 seconds: was 12000ms, now 10000ms
+      setCurrentMethodIndex(0);
+    }, 8000);
 
     return () => clearInterval(interval);
   }, []);
@@ -83,199 +116,163 @@ const BenchmarkChart = () => {
       const methodInterval = setInterval(() => {
         setCurrentMethodIndex(prev => {
           const nextIndex = prev + 1;
-          // Stay at final state (all methods added) for longer
           if (nextIndex > synthesisMethodsOrder.length) {
-            return synthesisMethodsOrder.length; // Stay at max for longer
+            return synthesisMethodsOrder.length;
           }
           return nextIndex;
         });
-      }, 2500); // Increased to 2.5 seconds to allow animation to complete
+      }, 2000);
       return () => clearInterval(methodInterval);
     }
   }, [currentPhase]);
 
   const getCurrentValue = (modelData, phase) => {
     if (phase === 'baseline') {
-      return modelData.direct_conversation || 0;
+      return modelData.baseline;
     } else if (phase === 'additive_synthesis') {
-      let cumulativeValue = modelData.direct_conversation || 0;
+      // Show the highest ASR achieved by any method tried so far
+      let maxASR = modelData.baseline;
       
-      // Add each synthesis method's contribution up to currentMethodIndex
       for (let i = 0; i < currentMethodIndex; i++) {
         const method = synthesisMethodsOrder[i];
-        if (modelData[method] !== undefined) {
-          cumulativeValue += modelData[method];
+        if (modelData.methods[method] !== undefined) {
+          maxASR = Math.max(maxASR, modelData.methods[method]);
         }
       }
       
-      return cumulativeValue;
+      return maxASR;
     }
     return 0;
   };
 
-  const getCurrentMethodsAdded = (modelData, phase) => {
-    if (phase === 'baseline') return ['Direct Conversation'];
+  const getCurrentMethod = (modelData, phase) => {
+    if (phase === 'baseline') return 'Human Baseline';
+    if (currentMethodIndex === 0) return 'Human Baseline';
     
-    const methods = ['Direct Conversation'];
+    const availableMethods = [];
     for (let i = 0; i < currentMethodIndex; i++) {
       const method = synthesisMethodsOrder[i];
-      if (modelData[method] !== undefined) {
-        methods.push(method.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase()));
+      if (modelData.methods[method] !== undefined) {
+        availableMethods.push(method);
       }
     }
-    return methods;
+    
+    if (availableMethods.length === 0) return 'Human Baseline';
+    return availableMethods[availableMethods.length - 1].replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase());
   };
 
   const getBarColor = (modelData, phase) => {
     if (phase === 'baseline') {
       return 'from-blue-500 to-blue-600';
     } else if (phase === 'additive_synthesis' && currentMethodIndex > 0) {
-      // Only turn green when we've actually started adding methods
       return 'from-green-500 to-green-600';
     } else {
-      // Stay blue if we're in additive phase but haven't started adding yet
       return 'from-blue-500 to-blue-600';
     }
   };
 
   return (
-    <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 p-8">
+    <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 p-4">
       <div className="max-w-6xl mx-auto">
         {/* Header */}
-        <div className="text-center mb-12">
-          <h1 className="text-4xl font-bold text-white mb-4">
-            LLM Safety Benchmark Results
+        <div className="text-center mb-6">
+          <h1 className="text-3xl font-bold text-white mb-3">
+            LLM Attack Success Rate with Synthesis Methods
           </h1>
-          <p className="text-slate-300 text-lg">
-            SafetyBench Aug 2025 - Success Rate Comparison
+          <p className="text-slate-300">
+            SafetyBench Aug 2025 - Real ASR Calculations
           </p>
           
-          {/* Methodology Disclaimer */}
-          <div className="mt-6 p-4 bg-yellow-900/30 border border-yellow-500/30 rounded-lg max-w-4xl mx-auto">
+          {/* 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 synthesis method's individual attack success rate. 
-                  Values >100% represent sythesis of multiple conversations off one failed, human seed conversation. 
+                  Values >100% represent synthesis 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>
-          
-          <div className="mt-4 p-4 bg-slate-800 rounded-lg inline-block">
-            <p className="text-white font-semibold">
-              Current View: {phases.find(p => p.key === currentPhase)?.label}
-            </p>
-            {currentPhase === 'additive_synthesis' && currentMethodIndex > 0 && (
-              <p className="text-slate-300 text-sm mt-1">
-                Adding Method {currentMethodIndex}: {synthesisMethodsOrder[currentMethodIndex - 1]?.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}
-              </p>
-            )}
-          </div>
         </div>
 
-        {/* Chart Container */}
-        <div className="bg-white rounded-2xl shadow-2xl p-8">
-          <div className="space-y-8">
-            {benchmarkData.map((modelData, index) => {
-              const currentValue = getCurrentValue(modelData, currentPhase);
-              const baselineValue = modelData.direct_conversation;
-              const maxValue = 100; // Increased max scale since we're adding values
-              const barWidth = (currentValue / maxValue) * 100;
-              const methodsAdded = getCurrentMethodsAdded(modelData, currentPhase);
-              const totalGain = currentValue - baselineValue;
-              
-              return (
-                <div key={modelData.model} className="relative">
-                  {/* Model Name and Methods - Fixed Height Container */}
-                  <div className="flex items-start justify-between mb-3 min-h-[60px]">
-                    <div className="flex-1">
-                      <h3 className="font-semibold text-gray-800 text-lg mb-1">
-                        {modelData.model}
-                      </h3>
-                      <div className="text-sm text-gray-600 leading-tight">
-                        <span className="font-medium">Methods: </span>
-                        <span>{methodsAdded.join(' + ')}</span>
+        {/* Chart Container - Scrollable Box */}
+        <div className="bg-white rounded-xl shadow-2xl p-4">
+          <div className="h-96 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 currentMethod = getCurrentMethod(modelData, currentPhase);
+                const gain = currentValue - baselineValue;
+                
+                return (
+                  <div key={modelData.model} className="relative">
+                    {/* Model Name and Value */}
+                    <div className="flex items-center justify-between mb-1">
+                      <div>
+                        <h3 className="font-semibold text-gray-800 text-sm">
+                          {modelData.model}
+                        </h3>
+                        <p className="text-xs text-gray-600">
+                          {currentMethod}
+                        </p>
                       </div>
-                      {/* Method breakdown - Always show, even during baseline */}
-                      <div className="mt-1 min-h-[20px]">
-                        {currentPhase === 'baseline' && (
-                          <div className="text-xs text-gray-500 flex flex-wrap gap-x-4 gap-y-1">
-                            <span className="text-blue-600">Base: {baselineValue.toFixed(1)}%</span>
-                            <span className="text-gray-400">Ready to add synthesis methods...</span>
-                          </div>
-                        )}
-                        {currentPhase === 'additive_synthesis' && (
-                          <div className="text-xs text-gray-500 flex flex-wrap gap-x-4 gap-y-1">
-                            <span className="text-blue-600">Base: {baselineValue.toFixed(1)}%</span>
-                            {currentMethodIndex === 0 && (
-                              <span className="text-gray-400">Starting to add methods...</span>
-                            )}
-                            {synthesisMethodsOrder.slice(0, currentMethodIndex).map(method => {
-                              if (modelData[method] !== undefined) {
-                                return (
-                                  <span key={method} className="text-green-600">
-                                    +{method.replace(/_/g, ' ')}: {modelData[method].toFixed(1)}%
-                                  </span>
-                                );
-                              }
-                              return null;
-                            })}
+                      <div className="text-right">
+                        <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>
-                    <div className="text-right ml-4">
-                      <span className="text-2xl font-bold text-gray-700">
-                        {currentValue.toFixed(1)}%
-                      </span>
-                      {currentPhase === 'additive_synthesis' && totalGain > 0 && (
-                        <div className="text-sm font-semibold text-green-600">
-                          +{totalGain.toFixed(1)}% gain
+                    
+                    {/* Progress Bar */}
+                    <div className="relative h-6 bg-gray-200 rounded-full overflow-hidden">
+                      <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)}%` }}
+                      >
+                        <div className="text-white font-semibold text-xs">
+                          {currentValue > 8 ? `${currentValue.toFixed(1)}%` : ''}
                         </div>
-                      )}
-                    </div>
-                  </div>
-                  
-                  {/* Progress Bar */}
-                  <div className="relative h-12 bg-gray-200 rounded-full overflow-hidden">
-                    <div 
-                      className={`h-full bg-gradient-to-r ${getBarColor(modelData, currentPhase)} rounded-full transition-all duration-[2000ms] ease-out flex items-center justify-end pr-4`}
-                      style={{ width: `${Math.max(barWidth, 5)}%` }}
-                    >
-                      <div className="text-white font-semibold text-sm">
-                        {currentValue > 8 ? `${currentValue.toFixed(1)}%` : ''}
                       </div>
                     </div>
                   </div>
-                </div>
-              );
-            })}
+                );
+              })}
+            </div>
           </div>
           
           {/* Legend */}
-          <div className="mt-8 flex justify-center space-x-6 flex-wrap">
+          <div className="mt-4 pt-4 border-t border-gray-200 flex justify-center space-x-6 text-sm">
             <div className="flex items-center space-x-2">
-              <div className="w-4 h-4 bg-gradient-to-r from-blue-500 to-blue-600 rounded"></div>
-              <span className="text-gray-700">Baseline (Direct Conversation)</span>
+              <div className="w-3 h-3 bg-gradient-to-r from-blue-500 to-blue-600 rounded"></div>
+              <span className="text-gray-700">Human Baseline</span>
             </div>
             <div className="flex items-center space-x-2">
-              <div className="w-4 h-4 bg-gradient-to-r from-green-500 to-green-600 rounded"></div>
-              <span className="text-gray-700">Adding Synthesis Methods</span>
+              <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>
             </div>
           </div>
         </div>
         
-        {/* Footer Info */}
-        <div className="mt-8 text-center text-slate-400 space-y-2">
+        {/* Footer */}
+        <div className="mt-4 text-center text-slate-400 space-y-1">
           <p className="text-sm">
-            Data from SafetyBench Aug 2025 • Synthesis methods test different attack vectors
+            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
           </p>
-          <div className="text-xs mt-4 max-w-4xl mx-auto space-y-1">
-            
-          </div>
         </div>
       </div>
     </div>