src/App.js

import React, { useState, useEffect } from 'react';

const BenchmarkChart = () => {
  // Real data from your CSV
  const benchmarkData = [
    {
      model: "Claude 4 Sonnet",
      direct_conversation: 26.33,
      keyword_objective_combined: 3.13
    },
    {
      model: "Claude Opus 4.1",
      direct_conversation: 20.67,
      keyword_objective_combined: 3.65
    },
    {
      model: "Deepseek R1-0528",
      direct_conversation: 68.67,
      keyword_objective_combined: 48.18
    },
    {
      model: "GPT 5",
      direct_conversation: 8.33,
      keyword_objective_combined: 3.65,
      bio_topic_change: 23.5,
      enhancement: 10,
      root_problem: 4.5
    },
    {
      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: "GPT o3",
      direct_conversation: 22,
      keyword_objective_combined: 10.94
    },
    {
      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: "Grok 4",
      direct_conversation: 68.67,
      keyword_objective_combined: 52.6
    },
    {
      model: "Llama 3.1 405B",
      direct_conversation: 67,
      keyword_objective_combined: 41.67
    }
  ];

  const [currentPhase, setCurrentPhase] = useState('baseline');
  const [currentMethodIndex, setCurrentMethodIndex] = useState(0);
  
  const synthesisMethodsOrder = ['keyword_objective_combined', 'bio_topic_change', 'enhancement', 'root_problem'];
  
  const phases = [
    { key: 'baseline', label: 'Direct Conversation (Baseline)' },
    { key: 'additive_synthesis', label: 'Adding Synthesis Methods' }
  ];

  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

    return () => clearInterval(interval);
  }, []);

  useEffect(() => {
    if (currentPhase === 'additive_synthesis') {
      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 nextIndex;
        });
      }, 2500); // Increased to 2.5 seconds to allow animation to complete
      return () => clearInterval(methodInterval);
    }
  }, [currentPhase]);

  const getCurrentValue = (modelData, phase) => {
    if (phase === 'baseline') {
      return modelData.direct_conversation || 0;
    } else if (phase === 'additive_synthesis') {
      let cumulativeValue = modelData.direct_conversation || 0;
      
      // 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];
        }
      }
      
      return cumulativeValue;
    }
    return 0;
  };

  const getCurrentMethodsAdded = (modelData, phase) => {
    if (phase === 'baseline') return ['Direct Conversation'];
    
    const methods = ['Direct Conversation'];
    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()));
      }
    }
    return methods;
  };

  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="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
          </h1>
          <p className="text-slate-300 text-lg">
            SafetyBench Aug 2025 - Success Rate Comparison
          </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">
            <div className="flex items-start space-x-3">
              <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. 
                  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>
                      </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 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
                        </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>
          
          {/* Legend */}
          <div className="mt-8 flex justify-center space-x-6 flex-wrap">
            <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>
            <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>
          </div>
        </div>
        
        {/* Footer Info */}
        <div className="mt-8 text-center text-slate-400 space-y-2">
          <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>
          <div className="text-xs mt-4 max-w-4xl mx-auto space-y-1">
            <p><strong>Interpretation:</strong> Each synthesis method represents a different approach to testing model vulnerabilities</p>
            <p><strong>Additive Display:</strong> Shows theoretical maximum impact when combining all available synthesis techniques</p>
            <p><strong>Baseline:</strong> Direct conversation represents standard prompting without augmentation techniques</p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default BenchmarkChart;