chore: model list ux

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

@@ -1,10 +1,13 @@
 import ModalFooter from '@/components/modal-footer';
+import SealAutoComplete from '@/components/seal-form/auto-complete';
 import SealInput from '@/components/seal-form/seal-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import { Form, Modal } from 'antd';
-import { useEffect } from 'react';
+import _ from 'lodash';
+import { useEffect, useState } from 'react';
+import { callHuggingfaceQuickSearch } from '../apis';
 import { FormData } from '../config/types';
 
 type AddModalProps = {
@@ -17,16 +20,20 @@ type AddModalProps = {
 
 const sourceOptions = [
   { label: 'Huggingface', value: 'huggingface', key: 'huggingface' },
+  { label: 'Ollama', value: 'ollama_library', key: 'ollama_library' },
   { label: 'S3', value: 's3', key: 's3' }
 ];
 
 const AddModal: React.FC<AddModalProps> = (props) => {
   const { title, action, open, onOk, onCancel } = props || {};
-  if (!open) {
-    return null;
-  }
   const [form] = Form.useForm();
   const modelSource = Form.useWatch('source', form);
+  const [repoOptions, setRepoOptions] = useState<
+    { label: string; value: string }[]
+  >([]);
+  const [fileOptions, setFileOptions] = useState<
+    { label: string; value: string }[]
+  >([]);
 
   const initFormValue = () => {
     if (action === PageAction.CREATE && open) {
@@ -40,6 +47,33 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     initFormValue();
   }, [open]);
 
+  const handleInputRepoChange = (value: string) => {
+    console.log('repo change', value);
+  };
+
+  const debounceSearch = _.debounce((text: string) => {
+    handleOnSearchRepo(text);
+  }, 300);
+
+  const handleOnSearchRepo = async (text: string) => {
+    try {
+      const params = {
+        q: text,
+        type: 'model'
+      };
+      const res = await callHuggingfaceQuickSearch(params);
+      const list = _.map(res.models || [], (item: any) => {
+        return {
+          value: item.id,
+          label: item.id
+        };
+      });
+      setRepoOptions(list);
+    } catch (error) {
+      setRepoOptions([]);
+    }
+  };
+
   const renderHuggingfaceFields = () => {
     return (
       <>
@@ -47,11 +81,18 @@ const AddModal: React.FC<AddModalProps> = (props) => {
           name="huggingface_repo_id"
           rules={[{ required: true }]}
         >
-          <SealInput.Input label="Repo ID" required></SealInput.Input>
+          <SealAutoComplete
+            label="Repo ID"
+            required
+            showSearch
+            onChange={handleInputRepoChange}
+            onSearch={debounceSearch}
+            options={repoOptions}
+          ></SealAutoComplete>
         </Form.Item>
         <Form.Item<FormData>
           name="huggingface_filename"
-          rules={[{ required: false }]}
+          rules={[{ required: true }]}
         >
           <SealInput.Input label="File Name" required></SealInput.Input>
         </Form.Item>
@@ -69,6 +110,32 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     );
   };
 
+  const renderOllamaModelFields = () => {
+    return (
+      <>
+        <Form.Item<FormData>
+          name="ollama_library_model_name"
+          rules={[{ required: true }]}
+        >
+          <SealInput.Input label="Model Name" required></SealInput.Input>
+        </Form.Item>
+      </>
+    );
+  };
+
+  const renderFieldsBySource = () => {
+    switch (modelSource) {
+      case 'huggingface':
+        return renderHuggingfaceFields();
+      case 'ollama_library':
+        return renderOllamaModelFields();
+      case 's3':
+        return renderS3Fields();
+      default:
+        return null;
+    }
+  };
+
   const handleSourceChange = (value: string) => {
     console.log('source change', value);
   };
@@ -111,7 +178,15 @@ const AddModal: React.FC<AddModalProps> = (props) => {
             onChange={handleSourceChange}
           ></SealSelect>
         </Form.Item>
-        {modelSource === 's3' ? renderS3Fields() : renderHuggingfaceFields()}
+        {renderFieldsBySource()}
+        <Form.Item<FormData> name="replicas" rules={[{ required: true }]}>
+          <SealInput.Number
+            style={{ width: '100%' }}
+            label="Replicas"
+            required
+            min={1}
+          ></SealInput.Number>
+        </Form.Item>
         <Form.Item<FormData> name="description">
           <SealInput.TextArea label="Description"></SealInput.TextArea>
         </Form.Item>

src/pages/llmodels/components/view-logs-modal.tsx

@@ -0,0 +1,35 @@
+import { Modal } from 'antd';
+import React from 'react';
+
+type ViewModalProps = {
+  content?: string;
+  title: string;
+  open: boolean;
+  onCancel: () => void;
+};
+
+const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
+  const { title, open, onCancel, content } = props || {};
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <Modal
+      title={title}
+      open={open}
+      onCancel={onCancel}
+      destroyOnClose={true}
+      closeIcon={true}
+      maskClosable={false}
+      keyboard={false}
+      width={600}
+      style={{ top: '80px' }}
+      footer={null}
+    >
+      <div>{content}</div>
+    </Modal>
+  );
+};
+
+export default ViewCodeModal;