feat: add SystemModelSettingModal (#127)

* feat: add the model

* feat: add SystemModelSettingModal

web/src/assets/svg/more-model.svg

+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+        d="M17.6667 18.3337C17.9 18.3337 18.0167 18.3337 18.1059 18.2882C18.1843 18.2483 18.248 18.1846 18.2879 18.1062C18.3334 18.017 18.3334 17.9003 18.3334 17.667V9.00033C18.3334 8.76697 18.3334 8.65029 18.2879 8.56116C18.248 8.48276 18.1843 8.41902 18.1059 8.37907C18.0167 8.33366 17.9 8.33366 17.6667 8.33366L15.6667 8.33366C15.4333 8.33366 15.3167 8.33366 15.2275 8.37907C15.1491 8.41902 15.0854 8.48276 15.0454 8.56116C15 8.65029 15 8.76697 15 9.00033V11.0003C15 11.2337 15 11.3504 14.9546 11.4395C14.9147 11.5179 14.8509 11.5816 14.7725 11.6216C14.6834 11.667 14.5667 11.667 14.3334 11.667H12.3334C12.1 11.667 11.9833 11.667 11.8942 11.7124C11.8158 11.7524 11.752 11.8161 11.7121 11.8945C11.6667 11.9836 11.6667 12.1003 11.6667 12.3337V14.3337C11.6667 14.567 11.6667 14.6837 11.6213 14.7728C11.5813 14.8512 11.5176 14.915 11.4392 14.9549C11.3501 15.0003 11.2334 15.0003 11 15.0003H9.00002C8.76667 15.0003 8.64999 15.0003 8.56086 15.0457C8.48246 15.0857 8.41872 15.1494 8.37877 15.2278C8.33335 15.317 8.33335 15.4336 8.33335 15.667V17.667C8.33335 17.9003 8.33335 18.017 8.37877 18.1062C8.41872 18.1846 8.48246 18.2483 8.56086 18.2882C8.64999 18.3337 8.76667 18.3337 9.00002 18.3337L17.6667 18.3337Z"
+        stroke="#98A2B3" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+        d="M8.33335 5.66699C8.33335 5.43364 8.33335 5.31696 8.37877 5.22783C8.41872 5.14943 8.48246 5.08569 8.56086 5.04574C8.64999 5.00033 8.76667 5.00033 9.00002 5.00033H11C11.2334 5.00033 11.3501 5.00033 11.4392 5.04574C11.5176 5.08569 11.5813 5.14943 11.6213 5.22783C11.6667 5.31696 11.6667 5.43364 11.6667 5.66699V7.66699C11.6667 7.90035 11.6667 8.01703 11.6213 8.10616C11.5813 8.18456 11.5176 8.2483 11.4392 8.28825C11.3501 8.33366 11.2334 8.33366 11 8.33366H9.00002C8.76667 8.33366 8.64999 8.33366 8.56086 8.28825C8.48246 8.2483 8.41872 8.18456 8.37877 8.10616C8.33335 8.01703 8.33335 7.90035 8.33335 7.66699V5.66699Z"
+        stroke="#98A2B3" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+        d="M2.50002 10.667C2.50002 10.4336 2.50002 10.317 2.54543 10.2278C2.58538 10.1494 2.64912 10.0857 2.72752 10.0457C2.81665 10.0003 2.93333 10.0003 3.16669 10.0003H5.16669C5.40004 10.0003 5.51672 10.0003 5.60585 10.0457C5.68425 10.0857 5.74799 10.1494 5.78794 10.2278C5.83335 10.317 5.83335 10.4336 5.83335 10.667V12.667C5.83335 12.9003 5.83335 13.017 5.78794 13.1062C5.74799 13.1846 5.68425 13.2483 5.60585 13.2882C5.51672 13.3337 5.40004 13.3337 5.16669 13.3337H3.16669C2.93333 13.3337 2.81665 13.3337 2.72752 13.2882C2.64912 13.2483 2.58538 13.1846 2.54543 13.1062C2.50002 13.017 2.50002 12.9003 2.50002 12.667V10.667Z"
+        stroke="#98A2B3" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+    <path
+        d="M1.66669 2.33366C1.66669 2.1003 1.66669 1.98363 1.7121 1.8945C1.75205 1.8161 1.81579 1.75235 1.89419 1.71241C1.98332 1.66699 2.1 1.66699 2.33335 1.66699H4.33335C4.56671 1.66699 4.68339 1.66699 4.77252 1.71241C4.85092 1.75235 4.91466 1.8161 4.95461 1.8945C5.00002 1.98363 5.00002 2.1003 5.00002 2.33366V4.33366C5.00002 4.56701 5.00002 4.68369 4.95461 4.77282C4.91466 4.85122 4.85092 4.91496 4.77252 4.95491C4.68339 5.00033 4.56671 5.00033 4.33335 5.00033H2.33335C2.1 5.00033 1.98332 5.00033 1.89419 4.95491C1.81579 4.91496 1.75205 4.85122 1.7121 4.77282C1.66669 4.68369 1.66669 4.56701 1.66669 4.33366V2.33366Z"
+        stroke="#98A2B3" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
+</svg>
\ No newline at end of file

web/src/hooks/commonHooks.ts

@@ -11,7 +11,11 @@ export const useSetModalState = () => {
     setVisible(false);
   };
 
-  return { visible, showModal, hideModal };
+  const switchVisible = () => {
+    setVisible(!visible);
+  };
+
+  return { visible, showModal, hideModal, switchVisible };
 };
 
 export const useDeepCompareEffect = (

web/src/hooks/llmHooks.ts

@@ -7,7 +7,7 @@ import {
 import { useCallback, useEffect, useMemo } from 'react';
 import { useDispatch, useSelector } from 'umi';
 
-export const useFetchLlmList = (modelType: LlmModelType) => {
+export const useFetchLlmList = (modelType?: LlmModelType) => {
   const dispatch = useDispatch();
 
   const fetchLlmList = useCallback(() => {
@@ -85,19 +85,20 @@ export const useFetchLlmFactoryListOnMount = () => {
   return list;
 };
 
+export type LlmItem = { name: string; logo: string } & IMyLlmValue;
+
 export const useFetchMyLlmListOnMount = () => {
   const dispatch = useDispatch();
   const llmList = useSelectMyLlmList();
   const factoryList = useSelectLlmFactoryList();
 
-  const list: Array<{ name: string; logo: string } & IMyLlmValue> =
-    useMemo(() => {
-      return Object.entries(llmList).map(([key, value]) => ({
-        name: key,
-        logo: factoryList.find((x) => x.name === key)?.logo ?? '',
-        ...value,
-      }));
-    }, [llmList, factoryList]);
+  const list: Array<LlmItem> = useMemo(() => {
+    return Object.entries(llmList).map(([key, value]) => ({
+      name: key,
+      logo: factoryList.find((x) => x.name === key)?.logo ?? '',
+      ...value,
+    }));
+  }, [llmList, factoryList]);
 
   const fetchMyLlmList = useCallback(() => {
     dispatch({
@@ -135,3 +136,28 @@ export const useSaveApiKey = () => {
 
   return saveApiKey;
 };
+
+export interface ISystemModelSettingSavingParams {
+  tenant_id: string;
+  name?: string;
+  asr_id: string;
+  embd_id: string;
+  img2txt_id: string;
+  llm_id: string;
+}
+
+export const useSaveTenantInfo = () => {
+  const dispatch = useDispatch();
+
+  const saveTenantInfo = useCallback(
+    (savingParams: ISystemModelSettingSavingParams) => {
+      return dispatch<any>({
+        type: 'settingModel/set_tenant_info',
+        payload: savingParams,
+      });
+    },
+    [dispatch],
+  );
+
+  return saveTenantInfo;
+};

web/src/pages/setting/model.ts

@@ -142,7 +142,7 @@ const model: DvaModel<SettingModelState> = {
       }
     },
     *my_llm({ payload = {} }, { call, put }) {
-      const { data } = yield call(userService.my_llm, payload);
+      const { data } = yield call(userService.my_llm);
       const { retcode, data: res } = data;
       if (retcode === 0) {
         yield put({
@@ -158,6 +158,8 @@ const model: DvaModel<SettingModelState> = {
       const { retcode } = data;
       if (retcode === 0) {
         message.success('Modified!');
+        yield put({ type: 'my_llm' });
+        yield put({ type: 'factories_list' });
         yield put({
           type: 'updateState',
         });

web/src/pages/user-setting/components/setting-title/index.tsx

-import { Typography } from 'antd';
+import { SettingOutlined } from '@ant-design/icons';
+import { Button, Flex, Typography } from 'antd';
 
 const { Title, Paragraph } = Typography;
 
 interface IProps {
   title: string;
   description: string;
+  showRightButton?: boolean;
+  clickButton?: () => void;
 }
 
-const SettingTitle = ({ title, description }: IProps) => {
+const SettingTitle = ({
+  title,
+  description,
+  clickButton,
+  showRightButton = false,
+}: IProps) => {
   return (
-    <div>
-      <Title level={5}>{title}</Title>
-      <Paragraph>{description}</Paragraph>
-    </div>
+    <Flex align="center" justify={'space-between'}>
+      <div>
+        <Title level={5}>{title}</Title>
+        <Paragraph>{description}</Paragraph>
+      </div>
+      {showRightButton && (
+        <Button type={'primary'} onClick={clickButton}>
+          <SettingOutlined></SettingOutlined> System Model Settings
+        </Button>
+      )}
+    </Flex>
   );
 };
 

web/src/pages/user-setting/setting-model/api-key-modal/index.tsx

@@ -64,7 +64,7 @@ const ApiKeyModal = ({
         form={form}
       >
         <Form.Item<FieldType>
-          label="Api key"
+          label="Api-Key"
           name="api_key"
           rules={[{ required: true, message: 'Please input api key!' }]}
         >

web/src/pages/user-setting/setting-model/hooks.ts

 import { useSetModalState } from '@/hooks/commonHooks';
-import { IApiKeySavingParams, useSaveApiKey } from '@/hooks/llmHooks';
+import {
+  IApiKeySavingParams,
+  ISystemModelSettingSavingParams,
+  useFetchLlmList,
+  useSaveApiKey,
+  useSaveTenantInfo,
+} from '@/hooks/llmHooks';
 import { useOneNamespaceEffectsLoading } from '@/hooks/storeHooks';
+import {
+  useFetchTenantInfo,
+  useSelectTenantInfo,
+} from '@/hooks/userSettingHook';
 import { useCallback, useState } from 'react';
 
 type SavingParamsState = Omit<IApiKeySavingParams, 'api_key'>;
@@ -20,7 +30,7 @@ export const useSubmitApiKey = () => {
     async (apiKey: string) => {
       const ret = await saveApiKey({ ...savingParams, api_key: apiKey });
 
-      if (ret.retcode === 0) {
+      if (ret === 0) {
         hideApiKeyModal();
       }
     },
@@ -48,3 +58,49 @@ export const useSubmitApiKey = () => {
     showApiKeyModal: onShowApiKeyModal,
   };
 };
+
+export const useSubmitSystemModelSetting = () => {
+  const systemSetting = useSelectTenantInfo();
+  const loading = useOneNamespaceEffectsLoading('settingModel', [
+    'set_tenant_info',
+  ]);
+  const saveSystemModelSetting = useSaveTenantInfo();
+  const {
+    visible: systemSettingVisible,
+    hideModal: hideSystemSettingModal,
+    showModal: showSystemSettingModal,
+  } = useSetModalState();
+
+  const onSystemSettingSavingOk = useCallback(
+    async (
+      payload: Omit<ISystemModelSettingSavingParams, 'tenant_id' | 'name'>,
+    ) => {
+      const ret = await saveSystemModelSetting({
+        tenant_id: systemSetting.tenant_id,
+        name: systemSetting.name,
+        ...payload,
+      });
+
+      if (ret === 0) {
+        hideSystemSettingModal();
+      }
+    },
+    [hideSystemSettingModal, saveSystemModelSetting, systemSetting],
+  );
+
+  return {
+    saveSystemModelSettingLoading: loading,
+    onSystemSettingSavingOk,
+    systemSettingVisible,
+    hideSystemSettingModal,
+    showSystemSettingModal,
+  };
+};
+
+export const useFetchSystemModelSettingOnMount = () => {
+  const systemSetting = useSelectTenantInfo();
+  useFetchLlmList();
+  useFetchTenantInfo();
+
+  return systemSetting;
+};

web/src/pages/user-setting/setting-model/index.less

@@ -3,4 +3,21 @@
   .factoryOperationWrapper {
     text-align: right;
   }
+  .modelItem {
+  }
+  .llmList {
+    padding-top: 10px;
+  }
+  .toBeAddedCard {
+    border-radius: 24px;
+    border: 1px solid #eaecf0;
+    background: #e3f0ff;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
+  .addedCard {
+    border-radius: 18px;
+    border: 1px solid #eaecf0;
+    background: #e6e7eb;
+    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
+  }
 }

web/src/pages/user-setting/setting-model/index.tsx

+import { ReactComponent as MoreModelIcon } from '@/assets/svg/more-model.svg';
+import { useSetModalState } from '@/hooks/commonHooks';
 import {
+  LlmItem,
   useFetchLlmFactoryListOnMount,
   useFetchMyLlmListOnMount,
 } from '@/hooks/llmHooks';
@@ -13,14 +16,74 @@ import {
   List,
   Row,
   Space,
-  Tag,
+  Typography,
 } from 'antd';
+import { useCallback } from 'react';
 import SettingTitle from '../components/setting-title';
 import ApiKeyModal from './api-key-modal';
-import { useSubmitApiKey } from './hooks';
+import { useSubmitApiKey, useSubmitSystemModelSetting } from './hooks';
+import SystemModelSettingModal from './system-model-setting-modal';
 
 import styles from './index.less';
 
+const { Text } = Typography;
+interface IModelCardProps {
+  item: LlmItem;
+  clickApiKey: (llmFactory: string) => void;
+}
+
+const ModelCard = ({ item, clickApiKey }: IModelCardProps) => {
+  const { visible, switchVisible } = useSetModalState();
+
+  const handleApiKeyClick = () => {
+    clickApiKey(item.name);
+  };
+
+  const handleShowMoreClick = () => {
+    switchVisible();
+  };
+
+  return (
+    <List.Item>
+      <Card className={styles.addedCard}>
+        <Row align={'middle'}>
+          <Col span={12}>
+            <Flex gap={'middle'} align="center">
+              <Avatar shape="square" size="large" src={item.logo} />
+              <Flex vertical gap={'small'}>
+                <b>{item.name}</b>
+                <Text>{item.tags}</Text>
+              </Flex>
+            </Flex>
+          </Col>
+          <Col span={12} className={styles.factoryOperationWrapper}>
+            <Space size={'middle'}>
+              <Button onClick={handleApiKeyClick}>
+                API-Key
+                <SettingOutlined />
+              </Button>
+              <Button onClick={handleShowMoreClick}>
+                <Flex gap={'small'}>
+                  Show more models
+                  <MoreModelIcon />
+                </Flex>
+              </Button>
+            </Space>
+          </Col>
+        </Row>
+        {visible && (
+          <List
+            size="small"
+            dataSource={item.llm}
+            className={styles.llmList}
+            renderItem={(item) => <List.Item>{item.name}</List.Item>}
+          />
+        )}
+      </Card>
+    </List.Item>
+  );
+};
+
 const UserSettingModel = () => {
   const factoryList = useFetchLlmFactoryListOnMount();
   const llmList = useFetchMyLlmListOnMount();
@@ -32,9 +95,23 @@ const UserSettingModel = () => {
     hideApiKeyModal,
     showApiKeyModal,
   } = useSubmitApiKey();
+  const {
+    saveSystemModelSettingLoading,
+    onSystemSettingSavingOk,
+    systemSettingVisible,
+    hideSystemSettingModal,
+    showSystemSettingModal,
+  } = useSubmitSystemModelSetting();
+
+  const handleApiKeyClick = useCallback(
+    (llmFactory: string) => {
+      showApiKeyModal({ llm_factory: llmFactory });
+    },
+    [showApiKeyModal],
+  );
 
-  const handleApiKeyClick = (llmFactory: string) => () => {
-    showApiKeyModal({ llm_factory: llmFactory });
+  const handleAddModel = (llmFactory: string) => () => {
+    handleApiKeyClick(llmFactory);
   };
 
   return (
@@ -43,48 +120,15 @@ const UserSettingModel = () => {
         <SettingTitle
           title="Model Setting"
           description="Manage your account settings and preferences here."
+          showRightButton
+          clickButton={showSystemSettingModal}
         ></SettingTitle>
         <Divider></Divider>
         <List
           grid={{ gutter: 16, column: 1 }}
           dataSource={llmList}
           renderItem={(item) => (
-            <List.Item>
-              <Card>
-                <Row align={'middle'}>
-                  <Col span={12}>
-                    <Flex gap={'middle'} align="center">
-                      <Avatar shape="square" size="large" src={item.logo} />
-                      <Flex vertical gap={'small'}>
-                        <b>{item.name}</b>
-                        <div>
-                          {item.tags.split(',').map((x) => (
-                            <Tag key={x}>{x}</Tag>
-                          ))}
-                        </div>
-                      </Flex>
-                    </Flex>
-                  </Col>
-                  <Col span={12} className={styles.factoryOperationWrapper}>
-                    <Space size={'middle'}>
-                      <Button onClick={handleApiKeyClick(item.name)}>
-                        API-Key
-                        <SettingOutlined />
-                      </Button>
-                      <Button>
-                        Show more models
-                        <SettingOutlined />
-                      </Button>
-                    </Space>
-                  </Col>
-                </Row>
-                <List
-                  size="small"
-                  dataSource={item.llm}
-                  renderItem={(item) => <List.Item>{item.name}</List.Item>}
-                />
-              </Card>
-            </List.Item>
+            <ModelCard item={item} clickApiKey={handleApiKeyClick}></ModelCard>
           )}
         />
         <p>Models to be added</p>
@@ -101,18 +145,18 @@ const UserSettingModel = () => {
           dataSource={factoryList}
           renderItem={(item) => (
             <List.Item>
-              <Card>
+              <Card className={styles.toBeAddedCard}>
                 <Flex vertical gap={'large'}>
                   <Avatar shape="square" size="large" src={item.logo} />
                   <Flex vertical gap={'middle'}>
                     <b>{item.name}</b>
-                    <Space wrap>
-                      {item.tags.split(',').map((x) => (
-                        <Tag key={x}>{x}</Tag>
-                      ))}
-                    </Space>
+                    <Text>{item.tags}</Text>
                   </Flex>
                 </Flex>
+                <Divider></Divider>
+                <Button type="link" onClick={handleAddModel(item.name)}>
+                  Add the model
+                </Button>
               </Card>
             </List.Item>
           )}
@@ -125,6 +169,12 @@ const UserSettingModel = () => {
         initialValue={initialApiKey}
         onOk={onApiKeySavingOk}
       ></ApiKeyModal>
+      <SystemModelSettingModal
+        visible={systemSettingVisible}
+        onOk={onSystemSettingSavingOk}
+        hideModal={hideSystemSettingModal}
+        loading={saveSystemModelSettingLoading}
+      ></SystemModelSettingModal>
     </>
   );
 };

web/src/pages/user-setting/setting-model/system-model-setting-modal/index.tsx

+import { IModalManagerChildrenProps } from '@/components/modal-manager';
+import { ISystemModelSettingSavingParams } from '@/hooks/llmHooks';
+import { Form, Modal, Select } from 'antd';
+import { useEffect } from 'react';
+import { useFetchSystemModelSettingOnMount } from '../hooks';
+
+interface IProps extends Omit<IModalManagerChildrenProps, 'showModal'> {
+  loading: boolean;
+  onOk: (
+    payload: Omit<ISystemModelSettingSavingParams, 'tenant_id' | 'name'>,
+  ) => void;
+}
+
+const SystemModelSettingModal = ({
+  visible,
+  hideModal,
+  onOk,
+  loading,
+}: IProps) => {
+  const [form] = Form.useForm();
+  const initialValues = useFetchSystemModelSettingOnMount();
+
+  const handleOk = async () => {
+    const values = await form.validateFields();
+    onOk(values);
+  };
+
+  useEffect(() => {
+    form.setFieldsValue(initialValues);
+  }, [form, initialValues]);
+
+  const onFormLayoutChange = () => {};
+
+  return (
+    <Modal
+      title="Basic Modal"
+      open={visible}
+      onOk={handleOk}
+      onCancel={hideModal}
+      okButtonProps={{ loading }}
+      confirmLoading={loading}
+    >
+      <Form form={form} onValuesChange={onFormLayoutChange} layout={'vertical'}>
+        <Form.Item label="sequence2txt model" name="asr_id">
+          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+        </Form.Item>
+        <Form.Item label="Embedding model" name="embd_id">
+          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+        </Form.Item>
+        <Form.Item label="img2txt_id model" name="img2txt_id">
+          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+        </Form.Item>
+        <Form.Item label="Chat model" name="llm_id">
+          <Select options={[{ value: 'sample', label: <span>sample</span> }]} />
+        </Form.Item>
+      </Form>
+    </Modal>
+  );
+};
+
+export default SystemModelSettingModal;