Update frontend/src/App.js

frontend/src/App.js

@@ -2,46 +2,90 @@ import React, { useState, useEffect } from 'react';
 import { chain } from 'lodash';
 import './App.css';
 
-const ScoreBar = ({ score }) => {
+const ScoreBar = ({ score, vanillaScore, showVanilla = true }) => {
   if (score === undefined || score === null) return null;
   
   const percentage = score <= 1 ? score * 100 : score;
   const hue = Math.min(percentage * 1.2, 120); // Maps 0-100% to 0-120 (red to green)
   const backgroundColor = `hsl(${hue}, 80%, 50%)`;
   
+  const vanillaPercentage = vanillaScore <= 1 ? vanillaScore * 100 : vanillaScore;
+  const vanillaHue = Math.min(vanillaPercentage * 1.2, 120);
+  const vanillaBackgroundColor = `hsl(${vanillaHue}, 80%, 50%)`;
+  
   return (
-    <div className="score-bar">
-      <div 
-        className="score-fill" 
-        style={{ 
-          width: `${percentage}%`,
-          backgroundColor 
-        }} 
-      />
-      <span className="score-text">
-        {percentage.toFixed(1)}%
-      </span>
+    <div className="score-container">
+      <div className="score-bar">
+        <div 
+          className="score-fill" 
+          style={{ 
+            width: `${percentage}%`,
+            backgroundColor 
+          }} 
+        />
+        <span className="score-text">
+          {percentage.toFixed(1)}%
+        </span>
+      </div>
+      
+      {showVanilla && vanillaScore !== undefined && vanillaScore !== null && (
+        <div className="score-bar vanilla-bar">
+          <div 
+            className="score-fill" 
+            style={{ 
+              width: `${vanillaPercentage}%`,
+              backgroundColor: vanillaBackgroundColor
+            }} 
+          />
+          <span className="score-text vanilla-text">
+            {vanillaPercentage.toFixed(1)}% <small>vanilla</small>
+          </span>
+        </div>
+      )}
     </div>
   );
 };
 
 const App = () => {
   const [data, setData] = useState([]);
+  const [vanillaData, setVanillaData] = useState([]);
+  const [toolCallingData, setToolCallingData] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [sortConfig, setSortConfig] = useState({ key: 'Average', direction: 'desc' });
   const [searchQuery, setSearchQuery] = useState('');
+  const [showVanilla, setShowVanilla] = useState(true);
+  const [showToolCalling, setShowToolCalling] = useState(false);
 
   useEffect(() => {
     const fetchData = async () => {
       try {
         setLoading(true);
-        const response = await fetch('https://smolagents-smolagents-llm-leaderboard.hf.space/api/results');
-        if (!response.ok) {
-          throw new Error(`HTTP error! status: ${response.status}`);
+        
+        // Fetch code agent data (default)
+        const codeResponse = await fetch('https://smolagents-smolagents-llm-leaderboard.hf.space/api/results');
+        if (!codeResponse.ok) {
+          throw new Error(`HTTP error! status: ${codeResponse.status}`);
+        }
+        const codeData = await codeResponse.json();
+        setData(codeData);
+        
+        // Fetch vanilla data
+        const vanillaResponse = await fetch('https://smolagents-smolagents-llm-leaderboard.hf.space/api/results?agent_action_type=vanilla');
+        if (!vanillaResponse.ok) {
+          throw new Error(`HTTP error! status: ${vanillaResponse.status}`);
         }
-        const jsonData = await response.json();
-        setData(jsonData);
+        const vanillaJsonData = await vanillaResponse.json();
+        setVanillaData(vanillaJsonData);
+        
+        // Fetch tool-calling data
+        const toolCallingResponse = await fetch('https://smolagents-smolagents-llm-leaderboard.hf.space/api/results?agent_action_type=tool-calling');
+        if (!toolCallingResponse.ok) {
+          throw new Error(`HTTP error! status: ${toolCallingResponse.status}`);
+        }
+        const toolCallingJsonData = await toolCallingResponse.json();
+        setToolCallingData(toolCallingJsonData);
+        
       } catch (err) {
         console.error('Error fetching data:', err);
         setError(err.message);
@@ -57,7 +101,21 @@ const App = () => {
     setSortConfig({ key, direction });
   };
 
-  const filteredAndSortedData = chain(data)
+  // Get active dataset based on user selection
+  const getActiveData = () => {
+    if (showToolCalling) {
+      return toolCallingData;
+    }
+    return data; // Default to code agent data
+  };
+
+  // Find vanilla score for a model
+  const getVanillaScore = (modelId, metric) => {
+    const vanillaModel = vanillaData.find(item => item.model_id === modelId);
+    return vanillaModel?.scores[metric];
+  };
+
+  const filteredAndSortedData = chain(getActiveData())
     .filter(item => item.model_id.toLowerCase().includes(searchQuery.toLowerCase()))
     .orderBy(
       [item => {
@@ -80,17 +138,39 @@ const App = () => {
         <p className="subtitle">How do different LLMs compare for powering agents?</p>
         <p className="subtitle">Uses <a target="_blank" href="https://github.com/huggingface/smolagents">smolagents</a> with <a target="_blank" href="https://huggingface.co/datasets/smolagents/benchmark-v1">smolagents benchmark</a>.</p>
       </div>
-
-      <div className="search-container">
-        <input
-          type="text"
-          className="search-input"
-          placeholder="Search models..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-        />
+      
+      <div className="filters-container">
+        <div className="search-container">
+          <input
+            type="text"
+            className="search-input"
+            placeholder="Search models..."
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </div>
+        
+        <div className="options-container">
+          <label className="option-label">
+            <input
+              type="checkbox"
+              checked={showVanilla}
+              onChange={() => setShowVanilla(!showVanilla)}
+            />
+            Show Vanilla Scores
+          </label>
+          
+          <label className="option-label">
+            <input
+              type="checkbox"
+              checked={showToolCalling}
+              onChange={() => setShowToolCalling(!showToolCalling)}
+            />
+            Show Tool-Calling Scores
+          </label>
+        </div>
       </div>
-
+      
       <div className="table-container">
         <table>
           <thead>
@@ -115,7 +195,11 @@ const App = () => {
                 <td className="model-name">{item.model_id}</td>
                 {["Average", "GAIA", "MATH", "SimpleQA"].map(metric => (
                   <td key={metric}>
-                    <ScoreBar score={item.scores[metric]} />
+                    <ScoreBar 
+                      score={item.scores[metric]} 
+                      vanillaScore={getVanillaScore(item.model_id, metric)}
+                      showVanilla={showVanilla}
+                    />
                   </td>
                 ))}
               </tr>
@@ -123,6 +207,10 @@ const App = () => {
           </tbody>
         </table>
       </div>
+      
+      <div className="legend">
+        <p><strong>Agent types:</strong> {showToolCalling ? 'Tool-Calling' : 'Code'}{showVanilla ? ' (with Vanilla comparison)' : ''}</p>
+      </div>
     </div>
   );
 };