fix: cpu_offload is not shown when editting model

src/components/list-input/index.tsx

@@ -9,7 +9,7 @@ import ListItem from './list-item';
 interface ListInputProps {
   dataList: string[];
   label: string;
-  description?: string;
+  description?: React.ReactNode;
   btnText?: string;
   options?: Global.HintOptions[];
   placeholder?: string;

src/components/markdown-viewer/index.less

@@ -46,6 +46,7 @@
 
   table {
     width: 100%;
+    margin-bottom: 1.2em;
 
     th {
       font-weight: var(--font-weight-bold);

src/locales/en-US/common.ts

@@ -206,5 +206,6 @@ export default {
   'common.title.delete.confirm': 'Confirm delete',
   'common.button.addLabel': 'Add Labels',
   'common.button.addSelector': 'Add Selectors',
-  'common.button.addParams': 'Add Parameter'
+  'common.button.addParams': 'Add Parameter',
+  'common.text.here': 'here'
 };

src/locales/en-US/models.ts

@@ -64,5 +64,6 @@ export default {
   'models.form.backend_parameters.llamabox.placeholder':
     'e.g., --ctx-size=8192',
   'models.form.backend_parameters.vllm.placeholder':
-    'e.g., --max-model-len=8192'
+    'e.g., --max-model-len=8192',
+  'models.form.backend_parameters.vllm.tips': 'More {backend} parameter details'
 };

src/locales/zh-CN/common.ts

@@ -199,5 +199,6 @@ export default {
   'common.title.delete.confirm': '确认删除',
   'common.button.addLabel': '添加标签',
   'common.button.addSelector': '添加选择器',
-  'common.button.addParams': '添加参数'
+  'common.button.addParams': '添加参数',
+  'common.text.here': '这里'
 };

src/locales/zh-CN/models.ts

@@ -63,5 +63,6 @@ export default {
   'models.form.backend_parameters.llamabox.placeholder':
     '例如，--ctx-size=8192',
   'models.form.backend_parameters.vllm.placeholder':
-    '例如，--max-model-len=8192'
+    '例如，--max-model-len=8192',
+  'models.form.backend_parameters.vllm.tips': '更多 {backend} 参数说明查看'
 };

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

@@ -1,5 +1,4 @@
 import LabelSelector from '@/components/label-selector';
-import FieldWrapper from '@/components/label-selector/wrapper';
 import ListInput from '@/components/list-input';
 import SealSelect from '@/components/seal-form/seal-select';
 import { PageAction } from '@/config';
@@ -12,14 +11,13 @@ import {
   Collapse,
   Form,
   FormInstance,
-  Radio,
   Select,
   Tooltip,
   Typography
 } from 'antd';
 import _ from 'lodash';
 import React, { useCallback, useMemo } from 'react';
-import { backendOptionsMap } from '../config';
+import { backendOptionsMap, placementStrategyOptions } from '../config';
 import llamaConfig from '../config/llama-config';
 import { FormData } from '../config/types';
 import vllmConfig from '../config/vllm-config';
@@ -79,6 +77,19 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
     return backend === backendOptionsMap.llamaBox ? llamaConfig : vllmConfig;
   }, [backend]);
 
+  const backendParamsTips = useMemo(() => {
+    if (backend === backendOptionsMap.llamaBox) {
+      return {
+        backend: 'llama-box',
+        link: 'https://github.com/gpustack/llama-box?tab=readme-ov-file#usage'
+      };
+    }
+    return {
+      backend: 'vLLM',
+      link: 'https://docs.vllm.ai/en/stable/serving/openai_compatible_server.html#command-line-arguments-for-the-server'
+    };
+  }, [backend]);
+
   const renderSelectTips = (list: Array<{ title: string; tips: string }>) => {
     return (
       <div>
@@ -119,7 +130,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
     const children = (
       <>
         <Form.Item name="scheduleType">
-          {/* <SealSelect
+          <SealSelect
             label={intl.formatMessage({ id: 'models.form.scheduletype' })}
             description={renderSelectTips(scheduleTypeTips)}
             options={[
@@ -136,46 +147,18 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
                 value: 'manual'
               }
             ]}
-          ></SealSelect> */}
-          <FieldWrapper
-            label={intl.formatMessage({ id: 'models.form.scheduletype' })}
-            description={renderSelectTips(scheduleTypeTips)}
-          >
-            <Radio.Group style={{ marginTop: 5 }}>
-              <Radio value="auto">
-                {intl.formatMessage({
-                  id: 'models.form.scheduletype.auto'
-                })}
-              </Radio>
-              <Radio value="manual">
-                {intl.formatMessage({
-                  id: 'models.form.scheduletype.manual'
-                })}
-              </Radio>
-            </Radio.Group>
-          </FieldWrapper>
+          ></SealSelect>
         </Form.Item>
         {scheduleType === 'auto' && (
           <>
             <Form.Item<FormData> name="placement_strategy">
-              {/* <SealSelect
+              <SealSelect
                 label={intl.formatMessage({
                   id: 'resources.form.placementStrategy'
                 })}
                 options={placementStrategyOptions}
                 description={renderSelectTips(placementStrategyTips)}
-              ></SealSelect> */}
-              <FieldWrapper
-                label={intl.formatMessage({
-                  id: 'resources.form.placementStrategy'
-                })}
-                description={renderSelectTips(placementStrategyTips)}
-              >
-                <Radio.Group style={{ marginTop: 5 }}>
-                  <Radio value="spread">Spread</Radio>
-                  <Radio value="binpack">Binpack</Radio>
-                </Radio.Group>
-              </FieldWrapper>
+              ></SealSelect>
             </Form.Item>
             <Form.Item<FormData>
               name="worker_selector"
@@ -250,7 +233,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
           </Form.Item>
         )}
         <Form.Item name="backend">
-          {/* <SealSelect
+          <SealSelect
             label={intl.formatMessage({ id: 'models.form.backend' })}
             options={[
               {
@@ -265,25 +248,7 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
               }
             ]}
             disabled={action === PageAction.EDIT}
-          ></SealSelect> */}
-          <FieldWrapper
-            label={intl.formatMessage({ id: 'models.form.backend' })}
-          >
-            <Radio.Group>
-              <Radio
-                value={backendOptionsMap.llamaBox}
-                disabled={!isGGUF || action === PageAction.EDIT}
-              >
-                llama-box(llama.cpp)
-              </Radio>
-              <Radio
-                value={backendOptionsMap.vllm}
-                disabled={isGGUF || action === PageAction.EDIT}
-              >
-                vLLM
-              </Radio>
-            </Radio.Group>
-          </FieldWrapper>
+          ></SealSelect>
         </Form.Item>
         <Form.Item<FormData> name="backend_parameters">
           <ListInput
@@ -301,6 +266,21 @@ const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
             dataList={form.getFieldValue('backend_parameters') || []}
             onChange={handleBackendParametersChange}
             options={paramsConfig}
+            description={
+              <span>
+                {intl.formatMessage(
+                  { id: 'models.form.backend_parameters.vllm.tips' },
+                  { backend: backendParamsTips.backend }
+                )}{' '}
+                <Typography.Link
+                  style={{ color: 'var(--ant-blue-4)' }}
+                  href={backendParamsTips.link}
+                  target="_blank"
+                >
+                  {intl.formatMessage({ id: 'common.text.here' })}
+                </Typography.Link>
+              </span>
+            }
           ></ListInput>
         </Form.Item>
         {isGGUF && (

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

@@ -382,9 +382,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
             form={form}
             gpuOptions={gpuOptions}
             action={PageAction.EDIT}
-            isGGUF={
-              form.getFieldValue('backend') === backendOptionsMap.llamaBox
-            }
+            isGGUF={props.data?.backend === backendOptionsMap.llamaBox}
           ></AdvanceConfig>
         </Form>
       </SimpleBar>