Update frontend/src/App.tsx

frontend/src/App.tsx

@@ -7,7 +7,9 @@ import RadarView from './components/RadarView';
 import LineTrendView from './components/LineTrendView';
 import ComparisonTable from './components/ComparisonTable';
 import AddModelForm from './components/AddModelForm';
+import LanguageLevelTable from './components/LanguageLevelTable';
 import { ChartRow, ModelMetrics } from './types';
+import axios from 'axios';
 
 const colors = ['#4F46E5', '#059669', '#DC2626', '#7C3AED', '#EA580C', '#0891B2'];
 const metrics = ['bleu','chrf','cer','wer','rouge1','rouge2','rougeL','quality_score'];
@@ -22,6 +24,32 @@ function App() {
   const [activeTab, setActiveTab] = useState<'dashboard' | 'addModel' | 'comparison'>('dashboard');
   const [newModelName, setNewModelName] = useState('');
   const [isEvaluating, setIsEvaluating] = useState(false);
+  const [evaluationError, setEvaluationError] = useState<string | null>(null);
+
+  const handleEvaluate = async () => {
+    if (!newModelName.trim()) {
+      setEvaluationError('Model name cannot be empty.');
+      return;
+    }
+
+    setIsEvaluating(true);
+    setEvaluationError(null);
+
+    try {
+      const response = await axios.post('http://localhost:8000/evaluate', {
+        model_name: newModelName,
+      });
+
+      // Handle success
+      alert(`Evaluation successful! Metrics: ${JSON.stringify(response.data.metrics)}`);
+      setNewModelName(''); // Clear the input field
+    } catch (error: any) {
+      // Handle error
+      setEvaluationError(error.response?.data?.detail || 'An error occurred during evaluation.');
+    } finally {
+      setIsEvaluating(false);
+    }
+  };
 
   const modelNames = data ? Object.keys(data) : [];
   const languagePairs = data && selectedModel && data[selectedModel] 
@@ -186,10 +214,9 @@ function App() {
               newModelName={newModelName}
               isEvaluating={isEvaluating}
               onNameChange={setNewModelName}
-              onEvaluate={() => {
-                // Add evaluation logic here
-              }}
+              onEvaluate={handleEvaluate}
             />
+            {evaluationError && <p className="text-red-600 mt-4">{evaluationError}</p>}
           </div>
         )}
         {activeTab === 'comparison' && (
@@ -212,6 +239,28 @@ function App() {
             <LineTrendView data={barChartData} selectedModels={selectedModels} comparisonMode={comparisonMode} colors={colors} />
           </div>
         )}
+        {activeTab === 'dashboard' && (
+          <div>
+            <h2 className="text-2xl font-bold mb-4">Dashboard</h2>
+            <LanguageLevelTable
+              data={data}
+              selectedModels={selectedModels}
+              metrics={metrics}
+              colors={colors}
+            />
+          </div>
+        )}
+        {activeTab === 'comparison' && (
+          <div>
+            <h2 className="text-2xl font-bold mb-4">Comparison</h2>
+            <LanguageLevelTable
+              data={data}
+              selectedModels={selectedModels}
+              metrics={metrics}
+              colors={colors}
+            />
+          </div>
+        )}
       </div>
     </div>
   );