Update frontend/src/components/AddModelForm.tsx

frontend/src/components/AddModelForm.tsx

@@ -3,31 +3,29 @@ import React, { FC } from 'react';
 interface Props {
   newModelName: string;
   isEvaluating: boolean;
-  onNameChange: (value: string) => void;
+  onNameChange: (name: string) => void;
   onEvaluate: () => void;
 }
 
 const AddModelForm: FC<Props> = ({ newModelName, isEvaluating, onNameChange, onEvaluate }) => (
   <div className="bg-white rounded-xl shadow-lg p-6">
-    <h2 className="text-2xl font-bold text-gray-800 mb-6">Add a New Model</h2>
-    <div className="space-y-4">
-      <input
-        type="text"
-        value={newModelName}
-        onChange={e => onNameChange(e.target.value)}
-        placeholder="Enter model name (e.g., facebook/wmt19-en-de)"
-        className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500"
-      />
-      <button
-        onClick={onEvaluate}
-        disabled={isEvaluating}
-        className={`px-4 py-2 rounded-lg font-medium text-white ${
-          isEvaluating ? 'bg-gray-400' : 'bg-indigo-600 hover:bg-indigo-700'
-        }`}
-      >
-        {isEvaluating ? 'Evaluating...' : 'Evaluate Model'}
-      </button>
-    </div>
+    <h3 className="text-xl font-bold mb-4">Evaluate a New Model</h3>
+    <input
+      type="text"
+      value={newModelName}
+      onChange={e => onNameChange(e.target.value)}
+      placeholder="Enter model name (e.g., bert-base-uncased)"
+      className="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-4"
+    />
+    <button
+      onClick={onEvaluate}
+      disabled={isEvaluating}
+      className={`px-4 py-2 rounded-lg font-medium text-white ${
+        isEvaluating ? 'bg-gray-400 cursor-not-allowed' : 'bg-indigo-600 hover:bg-indigo-700'
+      }`}
+    >
+      {isEvaluating ? 'Evaluating...' : 'Evaluate Model'}
+    </button>
   </div>
 );