style: border radius 8px

src/pages/llmodels/components/add-modal.tsx

@@ -13,6 +13,7 @@ import {
   callHuggingfaceQuickSearch,
   queryHuggingfaceModelFiles
 } from '../apis';
+import { ollamaModelOptions } from '../config';
 import { FormData, ListItem } from '../config/types';
 
 type AddModalProps = {
@@ -99,7 +100,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
   const handleOnSearchRepo = async (text: string) => {
     try {
       const params = {
-        q: text,
+        q: `${text} gguf`,
         type: 'model'
       };
       const res = await callHuggingfaceQuickSearch(params);
@@ -164,7 +165,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
           ]}
         >
           <SealAutoComplete
-            showSearch
+            filterOption
             label={intl.formatMessage({ id: 'models.form.filename' })}
             required
             options={fileOptions}
@@ -220,10 +221,12 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             }
           ]}
         >
-          <SealInput.Input
-            label={intl.formatMessage({ id: 'models.table.name' })}
+          <SealAutoComplete
+            filterOption
+            label="Ollama Model"
             required
-          ></SealInput.Input>
+            options={ollamaModelOptions}
+          ></SealAutoComplete>
         </Form.Item>
       </>
     );

src/pages/llmodels/config/index.ts

@@ -1,35 +1,14 @@
 import { StatusMaps } from '@/config';
 
-export const modelInstanceCols = [
-  {
-    title: 'Name',
-    dataIndex: 'name',
-    key: 'name'
-  },
-  {
-    title: 'Create Time',
-    dataIndex: 'createTime',
-    key: 'createTime'
-  },
-  {
-    title: 'Status',
-    dataIndex: 'status',
-    key: 'status'
-  },
-  {
-    title: 'Utilization',
-    dataIndex: 'utilization',
-    key: 'utilization'
-  },
-  {
-    title: 'Host Name',
-    dataIndex: 'hostName',
-    key: 'hostName'
-  },
-  {
-    title: 'Operation',
-    key: 'Operation'
-  }
+export const ollamaModelOptions = [
+  { label: 'llama3', value: 'llama3' },
+  { label: 'gemma', value: 'gemma' },
+  { label: 'mistral', value: 'mistral' },
+  { label: 'qwen', value: 'qwen' },
+  { label: 'llama2', value: 'llama2' },
+  { label: 'phi3', value: 'phi3' },
+  { label: 'codellama', value: 'codellama' },
+  { label: 'deepseek-coder', value: 'deepseek-coder' }
 ];
 
 export const status: any = {