fix: update model backend not show

src/layouts/index.tsx

@@ -235,8 +235,6 @@ export default (props: any) => {
         onPageChange={(route) => {
           const { location } = history;
 
-          console.log('onPageChange', userInfo, initialState);
-
           // if user is not change password, redirect to change password page
           if (
             location.pathname !== loginPath &&

src/locales/en-US.ts

@@ -1,23 +1,18 @@
-import apikeys from './en-US/apikeys';
+/**
-import common from './en-US/common';
+ * @description The directory name used in require.context must match the language configuration names defined in lang-config-map.ts.
-import dashboard from './en-US/dashboard';
+ * @example Directories like 'en-US' or 'zh-CN' should correspond exactly to the configuration names in lang-config-map.ts.
-import menu from './en-US/menu';
+ */
-import models from './en-US/models';
-import playground from './en-US/playground';
-import resources from './en-US/resources';
-import shortcuts from './en-US/shortcuts';
-import usage from './en-US/usage';
-import users from './en-US/users';
 
-export default {
+const requireContext = require.context(`./en-US`, false, /\.ts$/);
-  ...common,
+
-  ...menu,
+let languageConfig: Record<string, string> = {};
-  ...models,
+
-  ...playground,
+requireContext.keys().forEach((fileName: any) => {
-  ...resources,
+  const moduleConfig = requireContext(fileName).default;
-  ...apikeys,
+  languageConfig = {
-  ...users,
+    ...languageConfig,
-  ...dashboard,
+    ...moduleConfig
-  ...usage,
+  };
-  ...shortcuts
+});
-};
+
+export default languageConfig;

src/locales/lang-config-map.tsx

@@ -1,5 +1,11 @@
 import IconFont from '@/components/icon-font';
 
+/**
+ * Language configuration map
+ * Warning: The key of the map must be the same as the directory name in the locales directory
+ * Do not modify the key of the map
+ *
+ */
 const langConfigMap = {
   'ar-EG': {
     lang: 'ar-EG',

src/locales/zh-CN.ts

@@ -1,31 +1,18 @@
-import apikeys from './zh-CN/apikeys';
+/**
-import common from './zh-CN/common';
+ * @description The directory name used in require.context must match the language configuration names defined in lang-config-map.ts.
-import dashboard from './zh-CN/dashboard';
+ * @example Directories like 'en-US' or 'zh-CN' should correspond exactly to the configuration names in lang-config-map.ts.
-import menu from './zh-CN/menu';
+ */
-import models from './zh-CN/models';
-import playground from './zh-CN/playground';
-import resources from './zh-CN/resources';
-import shortcuts from './zh-CN/shortcuts';
-import usage from './zh-CN/usage';
-import users from './zh-CN/users';
 
-// import { LangConfigType } from './lang-config-map';
+const requireContext = require.context(`./zh-CN`, false, /\.ts$/);
 
-// const DIR: LangConfigType = 'zh-CN';
+let languageConfig: Record<string, string> = {};
 
-// const langConfig = require.context(`./`, true, /\.ts$/);
+requireContext.keys().forEach((fileName: any) => {
+  const moduleConfig = requireContext(fileName).default;
+  languageConfig = {
+    ...languageConfig,
+    ...moduleConfig
+  };
+});
 
-// console.log('langConfig====', langConfig);
+export default languageConfig;
-
-export default {
-  ...common,
-  ...menu,
-  ...models,
-  ...playground,
-  ...resources,
-  ...apikeys,
-  ...users,
-  ...dashboard,
-  ...usage,
-  ...shortcuts
-};

src/pages/llmodels/components/advance-config.tsx

@@ -37,7 +37,6 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
   const wokerSelector = Form.useWatch('worker_selector', form);
   const scheduleType = Form.useWatch('scheduleType', form);
   const backend = Form.useWatch('backend', form);
-  const [params, setParams] = React.useState<string[]>([]);
 
   const placementStrategyTips = [
     {
@@ -313,6 +312,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
             {intl.formatMessage({ id: 'resources.form.advanced' })}
           </span>
         ),
+        forceRender: true,
         children
       }
     ];
@@ -331,6 +331,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
       expandIconPosition="start"
       bordered={false}
       ghost
+      destroyInactivePanel={false}
       className={dataformStyles['advanced-collapse']}
       expandIcon={({ isActive }) => (
         <RightOutlined

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

@@ -75,6 +75,12 @@ const AddModal: React.FC<AddModalProps> = (props) => {
     };
   }, [open]);
 
+  useEffect(() => {
+    if (source === modelSourceMap.ollama_library_value) {
+      setIsGGUF(true);
+    }
+  }, [source]);
+
   return (
     <Drawer
       title={

src/pages/llmodels/components/instance-item.tsx

@@ -210,7 +210,6 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                     )}
                     {item?.distributed_servers?.rpc_servers?.length && (
                       <Tooltip
-                        trigger={['click']}
                         overlayInnerStyle={{
                           width: '400px'
                         }}

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

@@ -4,14 +4,13 @@ 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 { convertFileSize } from '@/utils';
 import { useIntl } from '@umijs/max';
 import { Form, Modal } from 'antd';
 import _ from 'lodash';
 import { memo, useEffect, useMemo, useState } from 'react';
 import SimpleBar from 'simplebar-react';
 import 'simplebar-react/dist/simplebar.min.css';
-import { queryGPUList, queryHuggingfaceModelFiles } from '../apis';
+import { queryGPUList } from '../apis';
 import {
   backendOptionsMap,
   modelSourceMap,
@@ -58,11 +57,8 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
   const [form] = Form.useForm();
   const intl = useIntl();
   const [gpuOptions, setGpuOptions] = useState<any[]>([]);
+  const [isGGUF, setIsGGUF] = useState<boolean>(false);
   const [loading, setLoading] = useState(false);
-  const modelSource = Form.useWatch('source', form);
-  const [fileOptions, setFileOptions] = useState<
-    { label: string; value: string }[]
-  >([]);
 
   const getGPUList = async () => {
     const data = await queryGPUList();
@@ -88,6 +84,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
         props.data?.source || '',
         props.data
       );
+
       form.setFieldsValue({
         ...result.values,
         ..._.omit(props.data, result.omits),
@@ -103,43 +100,9 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     initFormValue();
   }, [open]);
 
-  const fileNamLabel = (item: any) => {
+  useEffect(() => {
-    return (
+    setIsGGUF(props.data?.backend === backendOptionsMap.llamaBox);
-      <span>
+  }, [props.data?.backend]);
-        {item.path}
-        <span
-          style={{ color: 'var(--ant-color-text-tertiary)', marginLeft: '4px' }}
-        >
-          ({convertFileSize(item.size)})
-        </span>
-      </span>
-    );
-  };
-  const handleFetchModelFiles = async (repo: string) => {
-    try {
-      setLoading(true);
-      const res = await queryHuggingfaceModelFiles({ repo });
-      const list = _.filter(res, (file: any) => {
-        return _.endsWith(file.path, '.gguf');
-      }).map((item: any) => {
-        return {
-          label: fileNamLabel(item),
-          value: item.path,
-          size: item.size
-        };
-      });
-      setFileOptions(list);
-      setLoading(false);
-    } catch (error) {
-      setFileOptions([]);
-      setLoading(false);
-    }
-  };
-
-  const handleRepoOnBlur = (e: any) => {
-    const repo = form.getFieldValue('repo_id');
-    handleFetchModelFiles(repo);
-  };
 
   const renderHuggingfaceFields = () => {
     return (
@@ -164,7 +127,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
             disabled={true}
           ></SealInput.Input>
         </Form.Item>
-        {form.getFieldValue('file_name') && (
+        {isGGUF && (
           <Form.Item<FormData>
             name="file_name"
             rules={[
@@ -183,7 +146,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
               filterOption
               label={intl.formatMessage({ id: 'models.form.filename' })}
               required
-              options={fileOptions}
+              options={[]}
               loading={loading}
               disabled={action === PageAction.EDIT}
             ></SealAutoComplete>
@@ -263,7 +226,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
     }
 
     return null;
-  }, [props.data?.source]);
+  }, [props.data?.source, isGGUF]);
 
   const handleSumit = () => {
     form.submit();

src/pages/llmodels/config/types.ts

@@ -1,5 +1,6 @@
 export interface ListItem {
   source: string;
+  backend: string;
   huggingface_repo_id: string;
   huggingface_file_name: string;
   huggingface_filename: string;

src/pages/playground/components/ground-left.tsx

@@ -314,7 +314,11 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         })}
       >
         <div className="box">
-          <ParamsSettings setParams={setParams} selectedModel={selectModel} />
+          <ParamsSettings
+            setParams={setParams}
+            selectedModel={selectModel}
+            modelList={modelList}
+          />
         </div>
       </div>
 

src/pages/playground/components/multiple-chat/model-item.tsx

@@ -68,7 +68,6 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
       messageId.current = messageId.current + 1;
     };
     const maxHeight = useMemo(() => {
-      console.log('spans==========', spans);
       const total = 72 + 110 + 46 + 16 + 32;
       if (spans.count < 4) {
         return `calc(100vh - ${total}px)`;
@@ -367,11 +366,14 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
               ></Button>
             </Dropdown>
             <Popover
+              placement="bottomRight"
               content={
                 <ParamsSettings
                   showModelSelector={false}
                   setParams={setParams}
+                  modelList={modelList}
                   globalParams={globalParams}
+                  selectedModel={params.model}
                   onValuesChange={handleOnValuesChange}
                 />
               }

src/pages/playground/components/params-settings.tsx

@@ -7,7 +7,6 @@ import { useIntl } from '@umijs/max';
 import { Form, InputNumber, Slider, Tooltip } from 'antd';
 import _ from 'lodash';
 import { useEffect, useId, useState } from 'react';
-import { queryModelsList } from '../apis';
 import CustomLabelStyles from '../style/custom-label.less';
 
 type ParamsSettingsFormProps = {
@@ -24,6 +23,7 @@ type ParamsSettingsProps = {
   showModelSelector?: boolean;
   params?: ParamsSettingsFormProps;
   model?: string;
+  modelList: Global.BaseOption<string>[];
   onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
   setParams: (params: any) => void;
   globalParams?: ParamsSettingsFormProps;
@@ -35,6 +35,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
   globalParams,
   onValuesChange,
   model,
+  modelList,
   showModelSelector = true
 }) => {
   const intl = useIntl();
@@ -51,41 +52,26 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
   const formId = useId();
 
   useEffect(() => {
-    const getModelList = async () => {
+    if (showModelSelector) {
-      try {
+      form.setFieldsValue({
-        const params = {
+        model: selectedModel || _.get(modelList, '[0].value'),
-          embedding_only: false
+        ...initialValues
-        };
+      });
-        const res = await queryModelsList(params);
+      setParams({
-        const list = _.map(res.data || [], (item: any) => {
+        model: selectedModel || _.get(modelList, '[0].value'),
-          return {
+        ...initialValues
-            value: item.id,
+      });
-            label: item.id
+    } else {
-          };
+      form.setFieldsValue({
-        });
+        model: selectedModel || '',
-        setModelList(list);
+        ...initialValues
-        form.setFieldsValue({
+      });
-          model: selectedModel || _.get(list, '[0].value'),
+      setParams({
-          ...initialValues
+        model: selectedModel || '',
-        });
+        ...initialValues
-        setParams({
+      });
-          model: selectedModel || _.get(list, '[0].value'),
+    }
-          ...initialValues
+  }, [modelList, showModelSelector, selectedModel]);
-        });
-      } catch (error) {
-        setModelList([]);
-        form.setFieldsValue({
-          model: selectedModel || '',
-          ...initialValues
-        });
-        setParams({
-          model: selectedModel || '',
-          ...initialValues
-        });
-      }
-    };
-    getModelList();
-  }, []);
 
   const handleOnFinish = (values: any) => {
     console.log('handleOnFinish', values);
@@ -126,8 +112,8 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
 
   useEffect(() => {
     form.setFieldsValue(globalParams);
-    console.log('globalParams=========11111', model, globalParams);
   }, [globalParams]);
+
   const renderLabel = (args: {
     field: string;
     label: string;
@@ -193,7 +179,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
             >
               <SealSelect
                 showSearch
-                options={ModelList}
+                options={modelList}
                 label={intl.formatMessage({ id: 'playground.model' })}
               ></SealSelect>
             </Form.Item>

src/pages/playground/index.tsx

@@ -142,26 +142,6 @@ const Playground: React.FC = () => {
         <div className="chat">
           <Tabs items={items} activeKey={activeKey}></Tabs>
         </div>
-        {/* {activeKey === 'chat' && (
-          <div
-            className={classNames('left', {
-              collapse: collapse
-            })}
-          >
-            <div className={classNames('params')}>
-              <div
-                className={classNames('params-box', {
-                  collapse: collapse
-                })}
-              >
-                <ParamsSettings
-                  setParams={setParams}
-                  selectedModel={selectModel}
-                />
-              </div>
-            </div>
-          </div>
-        )} */}
       </div>
     </PageContainer>
   );

src/utils/index.ts

@@ -167,3 +167,19 @@ export const formatNumber = (num: number) => {
     return num.toString();
   }
 };
+
+export function loadLanguageConfig(language: string) {
+  const requireContext = require.context(`./${language}`, false, /\.ts$/);
+
+  const languageConfig: Record<string, string> = {};
+
+  requireContext.keys().forEach((fileName: any) => {
+    const moduleConfig = requireContext(fileName).default;
+
+    const moduleName = fileName.replace(/(\.\/|\.ts)/g, '');
+
+    languageConfig[moduleName] = moduleConfig;
+  });
+
+  return languageConfig;
+}