feat: add supports for testing llm models (#1454)

* feat: add supports for testing llm models

* fix: linter error

web/src/app/home/models/component/llm-form/LLMForm.tsx

@@ -130,6 +130,7 @@ export default function LLMForm({
   const [requesterDefaultURLList, setRequesterDefaultURLList] = useState<
     string[]
   >([]);
+  const [modelTesting, setModelTesting] = useState(false);
 
   useEffect(() => {
     initLLMModelFormComponent().then(() => {
@@ -308,6 +309,34 @@ export default function LLMForm({
     }
   }
 
+  function testLLMModelInForm() {
+    setModelTesting(true);
+    httpClient
+      .testLLMModel('_', {
+        uuid: '',
+        name: form.getValues('name'),
+        description: '',
+        requester: form.getValues('model_provider'),
+        requester_config: {
+          base_url: form.getValues('url'),
+          timeout: 120,
+        },
+        api_keys: [form.getValues('api_key')],
+        abilities: form.getValues('abilities'),
+        extra_args: form.getValues('extra_args'),
+      })
+      .then((res) => {
+        console.log(res);
+        toast.success(t('models.testSuccess'));
+      })
+      .catch(() => {
+        toast.error(t('models.testError'));
+      })
+      .finally(() => {
+        setModelTesting(false);
+      });
+  }
+
   return (
     <div>
       <Dialog
@@ -579,6 +608,15 @@ export default function LLMForm({
               {editMode ? t('common.save') : t('common.submit')}
             </Button>
 
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => testLLMModelInForm()}
+              disabled={modelTesting}
+            >
+              {t('common.test')}
+            </Button>
+
             <Button
               type="button"
               variant="outline"

web/src/app/infra/http/HttpClient.ts

@@ -271,6 +271,10 @@ class HttpClient {
     return this.put(`/api/v1/provider/models/llm/${uuid}`, model);
   }
 
+  public testLLMModel(uuid: string, model: LLMModel): Promise<object> {
+    return this.post(`/api/v1/provider/models/llm/${uuid}/test`, model);
+  }
+
   // ============ Pipeline API ============
   public getGeneralPipelineMetadata(): Promise<GetPipelineMetadataResponseData> {
     // as designed, this method will be deprecated, and only for developer to check the prefered config schema

web/src/i18n/locales/en-US.ts

@@ -37,6 +37,7 @@ const enUS = {
     deleteSuccess: 'Deleted successfully',
     deleteError: 'Delete failed: ',
     addRound: 'Add Round',
+    test: 'Test',
   },
   notFound: {
     title: 'Page not found',
@@ -89,6 +90,8 @@ const enUS = {
     modelProviderDescription:
       'Please fill in the model name provided by the supplier',
     selectModel: 'Select Model',
+    testSuccess: 'Test successful',
+    testError: 'Test failed, please check your model configuration',
   },
   bots: {
     title: 'Bots',

web/src/i18n/locales/zh-Hans.ts

@@ -37,6 +37,7 @@ const zhHans = {
     deleteSuccess: '删除成功',
     deleteError: '删除失败：',
     addRound: '添加回合',
+    test: '测试',
   },
   notFound: {
     title: '页面不存在',
@@ -89,6 +90,8 @@ const zhHans = {
     selectModelProvider: '选择模型供应商',
     modelProviderDescription: '请填写供应商向您提供的模型名称',
     selectModel: '请选择模型',
+    testSuccess: '测试成功',
+    testError: '测试失败，请检查模型配置',
   },
   bots: {
     title: '机器人',