fix(style): add backend

src/components/seal-form/seal-textarea.tsx

@@ -24,7 +24,7 @@ const LabelWrapper = styled.div.attrs({
 
 interface InputTextareaProps extends TextAreaProps {
   scaleSize?: boolean;
-  alwaysFocus?: boolean;
+  alwaysFocus?: boolean; // it's order to display the placeholder
 }
 
 const SealTextArea: React.FC<InputTextareaProps & SealFormItemProps> = (

src/locales/en-US/common.ts

@@ -147,7 +147,7 @@ export default {
   'common.copy.notSupport': 'Your browser does not support Clipboard API',
   'common.title.basicInfo': 'Basic',
   'common.help.need': 'Need help?',
-  'common.help.eg': 'e.g.,',
+  'common.help.eg': 'e.g., {content}',
   'common.filter.label': 'Filters',
   'common.filter.isrequired.holder': 'Optional',
   'common.filter.isrequired.true': 'Required',
@@ -260,5 +260,6 @@ export default {
     'Single sign-on is not enabled on this system. Please contact your administrator.',
   'common.button.edit.item': 'Edit {name}',
   'common.button.terminal': 'Terminal',
-  'common.button.addItem': 'Add Item'
+  'common.button.addItem': 'Add Item',
+  'common.help.default': 'Default: {content}'
 };

src/locales/ja-JP/common.ts

@@ -148,7 +148,7 @@ export default {
     'お使いのブラウザはクリップボードAPIをサポートしていません',
   'common.title.basicInfo': '基本情報',
   'common.help.need': 'ヘルプが必要ですか？',
-  'common.help.eg': '例:',
+  'common.help.eg': '例: {content}',
   'common.filter.label': 'フィルタ',
   'common.filter.isrequired.holder': '任意',
   'common.filter.isrequired.true': '必須',
@@ -260,7 +260,8 @@ export default {
     'Single sign-on is not enabled on this system. Please contact your administrator.',
   'common.button.edit.item': 'Edit {name}',
   'common.button.terminal': 'Terminal',
-  'common.button.addItem': 'Add Item'
+  'common.button.addItem': 'Add Item',
+  'common.help.default': 'Default: {content}'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -286,5 +287,6 @@ export default {
 // 20. 'common.sso.noConfig': 'Single sign-on is not enabled on this system. Please contact your administrator.'
 // 21.  'common.button.edit.item': 'Edit {name}',
 // 22. 'common.button.terminal': 'Terminal',
-// 23. 'common.button.addItem': 'Add Item'
+// 23. 'common.button.addItem': 'Add Item',
+// 24. 'common.help.default': 'Default: {content}'
 // ========== End of To-Do List ==========

src/locales/ru-RU/common.ts

@@ -145,7 +145,7 @@ export default {
   'common.copy.notSupport': 'Ваш браузер не поддерживает буфер обмена',
   'common.title.basicInfo': 'Основная информация',
   'common.help.need': 'Нужна помощь?',
-  'common.help.eg': 'Например:',
+  'common.help.eg': 'Например: {content}',
   'common.filter.label': 'Фильтры',
   'common.filter.isrequired.holder': 'Необязательно',
   'common.filter.isrequired.true': 'Обязательно',
@@ -255,10 +255,12 @@ export default {
   'common.login.auth.failed': 'Ошибка аутентификации',
   'common.login.password': 'Войти с паролем',
   'common.external.login': 'Войти через {type}',
-  'common.sso.noConfig': 'Единый вход не настроен в этой системе. Пожалуйста, обратитесь к администратору.',
+  'common.sso.noConfig':
+    'Единый вход не настроен в этой системе. Пожалуйста, обратитесь к администратору.',
   'common.button.edit.item': 'Редактировать {name}',
   'common.button.terminal': 'Терминал',
-  'common.button.addItem': 'Добавить элемент'
+  'common.button.addItem': 'Добавить элемент',
+  'common.help.default': 'По умолчанию: {content}'
 };
 
 // ========== To-Do: Translate Keys (Remove After Translation) ==========

src/locales/zh-CN/common.ts

@@ -141,7 +141,7 @@ export default {
   'common.copy.notSupport': '您的浏览器不支持剪贴板 API',
   'common.title.basicInfo': '基本信息',
   'common.help.need': '需要帮助？',
-  'common.help.eg': '例如:',
+  'common.help.eg': '例如: {content}',
   'common.filter.label': '筛选',
   'common.filter.isrequired.holder': '是否必填',
   'common.filter.isrequired.true': '必填',
@@ -252,5 +252,6 @@ export default {
   'common.sso.noConfig': '该系统未启用单点登录，请联系管理员。',
   'common.button.edit.item': '编辑 {name}',
   'common.button.terminal': '终端',
-  'common.button.addItem': '添加项'
+  'common.button.addItem': '添加项',
+  'common.help.default': '默认: {content}'
 };

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

@@ -196,7 +196,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
         />
       </SegmentedHeader>
       <ColumnWrapper
-        maxHeight={'calc(100vh - 123px)'}
+        maxHeight={'calc(100vh - 140px)'}
         styles={{
           container: {
             paddingTop: 0

src/pages/backends/components/import-yaml.tsx

@@ -137,7 +137,7 @@ const ImportYAML: React.FC<ImportYAMLProps> = forwardRef(
           actionStatus={actionStatus}
           theme={userSettings?.isDarkTheme ? 'vs-dark' : 'vs-light'}
           value={fileContent}
-          height={'calc(100vh - 255px)'}
+          height={'calc(100vh - 260px)'}
           header={renderHeader()}
         ></YamlEditor>
         {error && <ErrorText type="danger">{error}</ErrorText>}

src/pages/backends/config/index.ts

@@ -153,14 +153,14 @@ export const yamlTemplate = `# backend configuration template
 backend_name: my-backend
 description: this is my-backend
 default_version: v0.5.1
-health_check_path: /health
+health_check_path: /v1/models
 default_backend_param:
   - --host
-default_run_command: myBackend serve {model} --port {port}
+default_run_command: myBackend serve {{model}} --port {{port}}
 version_configs:
   v0.0.1:
     image_name: lm/mybackend:latest
-    run_command: myBackend serve {model} --port {port}
+    run_command: myBackend serve {{model}} --port {{port}}
     custom_framework: cuda
   v0.0.2:
     image_name: lm/mybackend:test

src/pages/backends/forms/basic.tsx

@@ -1,5 +1,6 @@
 import ListInput from '@/components/list-input';
 import SealInput from '@/components/seal-form/seal-input';
+import SealTextArea from '@/components/seal-form/seal-textarea';
 import { PageAction } from '@/config';
 import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
@@ -40,16 +41,27 @@ const BasicForm: React.FC<AddModalProps> = ({ action }) => {
       >
         <SealInput.Input
           trim
+          placeholder={intl.formatMessage(
+            { id: 'common.help.default' },
+            { content: '/v1/models' }
+          )}
           label={intl.formatMessage({ id: 'backend.form.healthCheckPath' })}
         ></SealInput.Input>
       </Form.Item>
 
       <Form.Item name="default_run_command">
-        <SealInput.TextArea
+        <SealTextArea
+          scaleSize={true}
+          alwaysFocus={true}
+          placeholder={intl.formatMessage(
+            { id: 'common.help.eg' },
+            { content: 'vllm serve {{model}} --port {{port}}' }
+          )}
+          autoSize={{ minRows: 2, maxRows: 4 }}
           label={intl.formatMessage({
             id: 'backend.form.defaultExecuteCommand'
           })}
-        ></SealInput.TextArea>
+        ></SealTextArea>
       </Form.Item>
 
       <Form.Item<FormData>

src/pages/backends/forms/versions-config.tsx

@@ -6,7 +6,7 @@ import { PageActionType } from '@/config/types';
 import useAppUtils from '@/hooks/use-app-utils';
 import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
-import { Button, Empty, Form, Tag } from 'antd';
+import { Button, Form, Tag } from 'antd';
 import React, { useEffect, useMemo } from 'react';
 import styled from 'styled-components';
 import { frameworks } from '../config';
@@ -172,13 +172,14 @@ const VersionsForm: React.FC<AddModalProps> = ({
             }
             value={defaultVersion}
             notFoundContent={
-              <Empty
+              <div
-                style={{ marginBlock: 8 }}
+                className="justify-center"
-                image={Empty.PRESENTED_IMAGE_SIMPLE}
+                style={{ paddingBlock: '8px 7px' }}
-                description={intl.formatMessage({
+              >
+                {intl.formatMessage({
                   id: 'backend.form.noVersion'
                 })}
-              />
+              </div>
             }
             placeholder={intl.formatMessage({ id: 'backend.version' })}
             options={validVersions}

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

@@ -148,7 +148,7 @@ const ModelItem: React.FC<{
       max_tokens = max_total_tokens;
     }
 
-    return max_tokens / 1024;
+    return _.round(max_tokens / 1024);
   }, [model]);
 
   const status = useMemo(() => {