fix: init envs

src/pages/backends/community/backend-detail.tsx

@@ -91,13 +91,6 @@ const BackendDetail: React.FC<{
             return (
               <li key={key}>
                 <div className="label">{_.upperCase(key)}</div>
-                {/* <Flex gap={8} wrap="wrap" style={{ marginBlock: 8 }}>
-                  {value?.map?.((v: string, index: number) => (
-                    <Tag key={index} style={{ margin: 0 }}>
-                      {v}
-                    </Tag>
-                  ))}
-                </Flex> */}
               </li>
             );
           }
@@ -141,21 +134,6 @@ const BackendDetail: React.FC<{
           <Content>{renderSupportedFrameworks()}</Content>
         </Section>
       )}
-      {/* <Section>
-        <Subtitle>
-          <BulbOutlined className="icon" />
-          <span>
-            {intl.formatMessage({
-              id: 'backend.form.defaultExecuteCommand'
-            })}
-          </span>
-        </Subtitle>
-        <Content style={{ padding: 0, border: 'none' }}>
-          <HighlightCode
-            code={currentData?.default_run_command}
-          ></HighlightCode>
-        </Content>
-      </Section> */}
       {currentData?.description && (
         <Section>
           <Subtitle>

src/pages/backends/components/backend-card.tsx

@@ -5,7 +5,7 @@ import TagWrapper from '@/components/tags-wrapper';
 import ThemeTag from '@/components/tags-wrapper/theme-tag';
 import Card from '@/components/templates/card';
 import { useIntl } from '@umijs/max';
-import { Button, Flex, Tag, Tooltip } from 'antd';
+import { Button, Tag } from 'antd';
 import _ from 'lodash';
 import { useMemo } from 'react';
 import semverCoerce from 'semver/functions/coerce';
@@ -32,23 +32,6 @@ const StyledCard = styled(Card)`
   }
 `;
 
-const SourceWrapper = styled.div`
-  display: grid;
-  width: 100%;
-  grid-template-columns: max-content 1fr;
-  align-items: center;
-
-  gap: 0px;
-  .dot {
-    display: flex;
-    height: 4px;
-    width: 4px;
-    background-color: var(--ant-color-text-quaternary);
-    border-radius: 50%;
-    margin-inline: 8px;
-  }
-`;
-
 // add height props
 const TagInner = styled(Tag)<{ height?: number }>`
   display: flex;
@@ -237,16 +220,6 @@ const BackendCard: React.FC<BackendCardProps> = ({
     );
   };
 
-  const renderModel = (item: any) => {
-    return (
-      <AutoTooltip ghost minWidth={20} showTitle title={item}>
-        <ThemeTag key={item} style={{ marginRight: 0 }}>
-          {item}
-        </ThemeTag>
-      </AutoTooltip>
-    );
-  };
-
   const renderFrameworks = () => {
     const frameworks = _.keys(data.framework_index_map || {});
 
@@ -267,35 +240,6 @@ const BackendCard: React.FC<BackendCardProps> = ({
     );
   };
 
-  const renderRecommendModels = () => {
-    const recommendedModels = data.recommend_models || [];
-    if (recommendedModels.length === 0) {
-      return null;
-    }
-    return (
-      <div className="flex-center">
-        <span className="dot"></span>
-        <Tooltip
-          title={
-            <Flex gap={4} wrap="wrap">
-              {recommendedModels.map((item) => (
-                <Tag style={{ margin: 0 }} key={item}>
-                  {item}
-                </Tag>
-              ))}
-            </Flex>
-          }
-        >
-          <span>
-            <ThemeTag color="default">
-              {intl.formatMessage({ id: 'backend.recommendModels' })}
-            </ThemeTag>
-          </span>
-        </Tooltip>
-      </div>
-    );
-  };
-
   const renderSource = () => {
     if (layout === 'community') {
       return null;
@@ -330,28 +274,6 @@ const BackendCard: React.FC<BackendCardProps> = ({
     );
   };
 
-  const renderEnabledTag = () => {
-    if (data.backend_source !== BackendSourceValueMap.COMMUNITY) {
-      return null;
-    }
-    return (
-      <ThemeTag
-        className="font-400"
-        variant="outlined"
-        color={data.enabled ? 'green' : 'default'}
-        style={{
-          borderRadius: 'var(--ant-border-radius)',
-          margin: 0,
-          width: 'max-content'
-        }}
-      >
-        {data.enabled
-          ? `${intl.formatMessage({ id: 'common.status.enabled' })}`
-          : `${intl.formatMessage({ id: 'common.status.disabled' })}`}
-      </ThemeTag>
-    );
-  };
-
   const renderActions = () => {
     return actionsRenderer ? (
       actionsRenderer(data)
@@ -398,16 +320,6 @@ const BackendCard: React.FC<BackendCardProps> = ({
           </span>
           {renderSource()}
         </CardName>
-        {/* <SourceWrapper>
-          <InfoItem>
-            <span className="label">
-              <IconFont type="icon-source" className="icon" />
-              <span>{intl.formatMessage({ id: 'models.form.source' })}:</span>
-            </span>
-            {renderEnabledTag()}
-          </InfoItem>
-          {renderRecommendModels()}
-        </SourceWrapper> */}
         {renderFrameworks()}
       </Content>
     </StyledCard>

src/pages/backends/config/index.ts

@@ -31,7 +31,7 @@ export const builtInBackendLogos: Record<string, string> = {
 
 export const BackendSourceValueMap = {
   CUSTOM: 'custom',
-  BUILTIN: 'built-in',
+  BUILTIN: 'built_in',
   COMMUNITY: 'community',
   USER_DEFINED: 'user_defined'
 };

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

@@ -135,6 +135,7 @@ const AddModal: FC<AddModalProps> = (props) => {
   });
   const requestModelIdRef = useRef<number>(0);
   const currentSelectedModel = useRef<any>({});
+  const flatBackendOptionsRef = useRef<any[]>([]);
 
   const { run: fetchModelFiles } = useDeferredRequest(
     () => modelFileRef.current?.fetchModelFiles?.(),
@@ -259,7 +260,8 @@ const AddModal: FC<AddModalProps> = (props) => {
 
     const modelInfo = onSelectModel(selectedModel, {
       source: props.source,
-      defaultBackend: form.current?.getFieldValue?.('backend')
+      defaultBackend: form.current?.getFieldValue?.('backend'),
+      flatBackendOptions: flatBackendOptionsRef.current
     });
 
     form.current?.setFieldsValue?.({
@@ -269,7 +271,9 @@ const AddModal: FC<AddModalProps> = (props) => {
       backend_parameters: [],
       backend_version: '',
       backend: modelInfo.backend,
-      env: {},
+      env: {
+        ...modelInfo.env
+      },
       categories: getCategory(item)
     });
 
@@ -326,11 +330,16 @@ const AddModal: FC<AddModalProps> = (props) => {
     // TODO
     form.current?.resetFields(resetFields);
     const modelInfo = onSelectModel(item, {
-      source: props.source
+      source: props.source,
+      flatBackendOptions: flatBackendOptionsRef.current
     });
     form.current?.setFieldsValue?.({
       ...defaultFormValues,
       ...modelInfo,
+      env: {
+        ...modelInfo.env
+      },
+      name: generateNameValue(item, modelInfo.name, manual),
       categories: getCategory(item)
     });
 
@@ -366,21 +375,27 @@ const AddModal: FC<AddModalProps> = (props) => {
     });
     handleCancelFiles();
     const modelInfo = onSelectModel(item, {
-      source: props.source
+      source: props.source,
+      flatBackendOptions: flatBackendOptionsRef.current
     });
 
     if (
       evaluateStateRef.current.state === EvaluateProccess.model &&
       item.evaluated
     ) {
+      const defaultSpec = getDefaultSpec(item);
       const newFormValues = {
         ...(manual
           ? { ...defaultFormValues }
           : _.omit(form.current?.form?.getFieldsValue?.(), [
               ...dropFieldsFromForm
             ])),
-        ...getDefaultSpec(item),
+        ...defaultSpec,
         ...modelInfo,
+        env: {
+          ...modelInfo.env,
+          ...defaultSpec.env
+        },
         name: generateNameValue(item, modelInfo.name, manual),
         categories: getCategory(item)
       };
@@ -464,6 +479,8 @@ const AddModal: FC<AddModalProps> = (props) => {
       })
     ]);
 
+    flatBackendOptionsRef.current = backendOptions;
+
     if (props.deploymentType === 'modelFiles') {
       form.current?.form?.setFieldsValue({
         ...props.initialValues
@@ -487,8 +504,12 @@ const AddModal: FC<AddModalProps> = (props) => {
           versions: { label: string; value: string }[];
         }) => item.value === backend
       );
+
       form.current?.setFieldsValue?.({
         backend,
+        env: {
+          ...currentDefaultBackend?.default_env
+        },
         default_version: currentDefaultBackend?.default_version,
         backend_parameters: currentDefaultBackend?.default_backend_param || [],
         cluster_id: initClusterId()

src/pages/llmodels/components/separator.tsx

@@ -4,7 +4,7 @@ import '../style/separator.less';
 
 const Separator: React.FC<{
   showArrow?: boolean;
-  styles: {
+  styles?: {
     arrow?: React.CSSProperties;
   };
 }> = ({ showArrow = true, styles }) => {
@@ -14,7 +14,9 @@ const Separator: React.FC<{
         orientation="vertical"
         style={{ height: 'calc(100vh - 89px)', marginInline: '0px' }}
       ></Divider>
-      {showArrow && <span className="shape" style={styles.arrow}></span>}
+      {showArrow && (
+        <span className="shape" style={{ ...styles?.arrow }}></span>
+      )}
     </div>
   );
 };

src/pages/llmodels/config/types.ts

@@ -316,7 +316,7 @@ export interface BackendGroupItem {
     label: string;
     value: string;
     title?: string;
-    environment?: Record<string, any>;
+    env?: Record<string, any>;
     is_deprecated: boolean;
   }[];
 }
@@ -329,12 +329,13 @@ export interface BackendOption {
   default_version: string;
   isBuiltIn: boolean;
   backend_source: string;
+  default_env?: Record<string, any>;
   enabled: boolean;
   versions: {
     label: string;
     value: string;
     title?: string;
-    environment?: Record<string, any>;
+    env?: Record<string, any>;
     is_deprecated: boolean;
   }[];
 }
@@ -354,7 +355,7 @@ export interface BackendItem {
   enabled: boolean;
   versions: {
     version: string;
-    environment?: Record<string, any>;
+    env?: Record<string, any>;
     is_deprecated: boolean;
   }[];
 }

src/pages/llmodels/forms/backend.tsx

@@ -44,12 +44,8 @@ const BackendFields: React.FC = () => {
     React.useState<BackendOption | null>(null);
 
   const handleBackendVersionOnChange = (value: any, option: any) => {
-    if (Object.keys(option.data.environment || {}).length > 0) {
-      form.setFieldsValue({
-        env: {
-          ...(option?.data?.environment || {})
-        }
-      });
+    if (Object.keys(option.data.env || {}).length > 0) {
+      form.setFieldValue('env', { ...(option?.data?.env || {}) });
     }
 
     onValuesChange?.({}, form.getFieldsValue());
@@ -141,17 +137,15 @@ const BackendFields: React.FC = () => {
     );
   };
 
-  const handleOnBackendChange = (value: any[], option: any) => {
+  const handleOnBackendChange = (value: any[], option: any[]) => {
     const selectedBackend = value?.[1];
     const selectedOption = option?.[1] || {};
 
-    console.log('handleOnBackendChange selectedOption:', selectedOption);
-
     form.setFieldsValue({
-      backend: selectedBackend,
-      env: {
-        ...(selectedOption.environment || {})
-      }
+      backend: selectedBackend
+    });
+    form.setFieldValue('env', {
+      ...(selectedOption.default_env || {})
     });
     onBackendChange?.(selectedBackend, selectedOption);
     setSelectedBackend(selectedOption);

src/pages/llmodels/hooks/index.ts

@@ -511,9 +511,13 @@ export const useSelectModel = (data: { gpuOptions: any[] }) => {
 
   const onSelectModel = (
     selectModel: any,
-    options: { source: string; defaultBackend?: string }
+    options: {
+      source: string;
+      defaultBackend?: string;
+      flatBackendOptions?: any[];
+    }
   ) => {
-    const { source, defaultBackend } = options;
+    const { source, defaultBackend, flatBackendOptions } = options;
     let name = _.split(selectModel.name, '/').slice(-1)[0];
     const reg = /(-gguf)$/i;
     name = _.toLower(name).replace(reg, '');
@@ -527,6 +531,10 @@ export const useSelectModel = (data: { gpuOptions: any[] }) => {
       gpuOptions: gpuOptions
     });
 
+    const selectedBackend = flatBackendOptions?.find(
+      (item) => item.value === backend
+    );
+
     return {
       ...(source === modelSourceMap.huggingface_value
         ? { huggingface_repo_id: selectModel.name }
@@ -535,6 +543,9 @@ export const useSelectModel = (data: { gpuOptions: any[] }) => {
         ? { model_scope_model_id: selectModel.name }
         : {}),
       ...modelTaskData,
+      env: {
+        ...(selectedBackend?.default_env || {})
+      },
       name: name,
       source: source,
       backend: backend

src/pages/llmodels/hooks/use-query-backends.ts

@@ -61,7 +61,7 @@ export default function useQueryBackends() {
             'backend_source',
             'is_built_in',
             'default_backend_param',
-            'environment'
+            'default_env'
           ]),
           backend_source: item.backend_source || BackendSourceValueMap.CUSTOM,
           value: item.backend_name,
@@ -79,7 +79,7 @@ export default function useQueryBackends() {
             label: vItem.version,
             value: vItem.version,
             is_deprecated: vItem.is_deprecated,
-            environment: vItem.environment || {},
+            env: vItem.env || {},
             title: vItem.version.replace(/-custom$/, '')
           }))
         };
@@ -91,7 +91,7 @@ export default function useQueryBackends() {
 
       console.log('Fetched backend options:', list, groupList);
 
-      return groupList || [];
+      return list || [];
     } catch (error) {
       // ignore
       setBackendOptions([]);