Update src/App.js

src/App.js

@@ -73,7 +73,7 @@ const BenchmarkChart = () => {
     const interval = setInterval(() => {
       setCurrentPhase(prev => prev === 'baseline' ? 'additive_synthesis' : 'baseline');
       setCurrentMethodIndex(0); // Reset when switching phases
-    }, 12000); // Increased total cycle time to 12 seconds
+    }, 10000); // Reduced by 2 seconds: was 12000ms, now 10000ms
 
     return () => clearInterval(interval);
   }, []);
@@ -89,7 +89,7 @@ const BenchmarkChart = () => {
           }
           return nextIndex;
         });
-      }, 2000); // Slower progression - 2 seconds per method
+      }, 2500); // Increased to 2.5 seconds to allow animation to complete
       return () => clearInterval(methodInterval);
     }
   }, [currentPhase]);
@@ -129,9 +129,12 @@ const BenchmarkChart = () => {
   const getBarColor = (modelData, phase) => {
     if (phase === 'baseline') {
       return 'from-blue-500 to-blue-600';
-    } else {
-      // Green gradient for additive synthesis
+    } 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';
     }
   };
 
@@ -150,13 +153,12 @@ const BenchmarkChart = () => {
           {/* Methodology Disclaimer */}
           <div className="mt-6 p-4 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 success rate. 
-                  Values >100% represent theoretical maximum vulnerability discovery when combining multiple attack vectors. 
-                  Results are based on SafetyBench Aug 2025 testing methodology and should be interpreted as relative performance indicators.
+                  <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. 
+                  Results are based on HarmBench Grading methodology and should be interpreted as relative performance indicators.
                 </p>
               </div>
             </div>
@@ -176,7 +178,7 @@ const BenchmarkChart = () => {
 
         {/* Chart Container */}
         <div className="bg-white rounded-2xl shadow-2xl p-8">
-          <div className="space-y-6">
+          <div className="space-y-8">
             {benchmarkData.map((modelData, index) => {
               const currentValue = getCurrentValue(modelData, currentPhase);
               const baselineValue = modelData.direct_conversation;
@@ -187,23 +189,51 @@ const BenchmarkChart = () => {
               
               return (
                 <div key={modelData.model} className="relative">
-                  {/* Model Name and Methods */}
-                  <div className="flex items-center justify-between mb-2">
-                    <div>
-                      <h3 className="font-semibold text-gray-800 text-lg">
+                  {/* 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>
-                      <p className="text-sm text-gray-600">
-                        {methodsAdded.join(' + ')}
-                      </p>
+                      <div className="text-sm text-gray-600 leading-tight">
+                        <span className="font-medium">Methods: </span>
+                        <span>{methodsAdded.join(' + ')}</span>
+                      </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>
+                        )}
+                      </div>
                     </div>
-                    <div className="text-right">
+                    <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)}% total gain
+                          +{totalGain.toFixed(1)}% gain
                         </div>
                       )}
                     </div>
@@ -212,7 +242,7 @@ const BenchmarkChart = () => {
                   {/* 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-[1800ms] ease-in-out flex items-center justify-end pr-4`}
+                      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">
@@ -220,23 +250,6 @@ const BenchmarkChart = () => {
                       </div>
                     </div>
                   </div>
-                  
-                  {/* Method Breakdown */}
-                  {currentPhase === 'additive_synthesis' && currentMethodIndex > 0 && (
-                    <div className="mt-2 text-xs text-gray-500 space-y-1">
-                      <div>Baseline: {baselineValue.toFixed(1)}%</div>
-                      {synthesisMethodsOrder.slice(0, currentMethodIndex).map(method => {
-                        if (modelData[method] !== undefined) {
-                          return (
-                            <div key={method}>
-                              + {method.replace(/_/g, ' ')}: {modelData[method].toFixed(1)}%
-                            </div>
-                          );
-                        }
-                        return null;
-                      })}
-                    </div>
-                  )}
                 </div>
               );
             })}
@@ -250,14 +263,14 @@ const BenchmarkChart = () => {
             </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">Additive Synthesis Methods</span>
+              <span className="text-gray-700">Adding Synthesis Methods</span>
             </div>
           </div>
         </div>
         
         {/* Footer Info */}
         <div className="mt-8 text-center text-slate-400 space-y-2">
-          <p>Animation cycles every 12 seconds: baseline (6s) → progressive method addition (2s each) → final results (4s)</p>
+          <p>Animation cycles every 10 seconds: baseline (4s) → progressive method addition (2.5s each) → smooth 2s bar growth</p>
           <p className="text-sm">
             Data from SafetyBench Aug 2025 • Synthesis methods test different attack vectors
           </p>