root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: add form validation

Browse Source
This commit is contained in:
jialin
2026-05-25 13:56:44 +08:00
committed by jialin
parent d99c25dd03
commit acef2ef89a
9 changed files with 167 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/locales/en-US/models.ts
+7 -1
View File
@@ -290,5 +290,11 @@ export default {
'models.instance.previousRun': 'Previous Run',
'models.instance.startHistory': 'Run History',
'models.instance.startHistory.tips':
'Shows logs from the run before the last error-triggered restart.'
'Shows logs from the run before the last error-triggered restart.',
'models.form.lora.label': 'LoRA Adapter',
'models.form.lora.add': 'Add LoRA Adapter',
'models.form.lora.select': 'Select LoRA',
'models.form.lora.name': 'LoRA name',
'models.form.lora.rule.empty': 'Input cannot be empty',
'models.form.lora.rule.duplicate': 'LoRA name cannot be duplicated'
};
src/locales/ja-JP/models.ts
+14 -2
View File
@@ -290,7 +290,13 @@ export default {
'models.instance.previousRun': 'Previous Run',
'models.instance.startHistory': 'Run History',
'models.instance.startHistory.tips':
'Shows logs from the run before the last error-triggered restart.'
'Shows logs from the run before the last error-triggered restart.',
'models.form.lora.label': 'LoRA Adapter',
'models.form.lora.add': 'Add LoRA Adapter',
'models.form.lora.select': 'Select LoRA',
'models.form.lora.name': 'LoRA name',
'models.form.lora.rule.empty': 'Input cannot be empty',
'models.form.lora.rule.duplicate': 'LoRA name cannot be duplicated'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -393,5 +399,11 @@ export default {
// 78. 'models.form.enableModelRoute.tips': 'Enable Model Route',
// 79. 'models.table.modelView': 'Model View',
// 80. 'models.table.instanceView': 'Instance View',
// 81. 'models.table.category': 'Category'
// 81. 'models.table.category': 'Category',
// 82. 'models.form.lora.label': 'LoRA Adapter',
// 83. 'models.form.lora.add': 'Add LoRA Adapter',
// 84. 'models.form.lora.select': 'Select LoRA',
// 85. 'models.form.lora.name': 'LoRA name',
// 86. 'models.form.lora.rule.empty': 'Input cannot be empty',
// 87. 'models.form.lora.rule.duplicate': 'LoRA name cannot be duplicated'
// ========== End of To-Do List ==========
src/locales/ru-RU/models.ts
+14 -2
View File
@@ -294,7 +294,13 @@ export default {
'models.instance.previousRun': 'Previous Run',
'models.instance.startHistory': 'Run History',
'models.instance.startHistory.tips':
'Shows logs from the run before the last error-triggered restart.'
'Shows logs from the run before the last error-triggered restart.',
'models.form.lora.label': 'LoRA Adapter',
'models.form.lora.add': 'Add LoRA Adapter',
'models.form.lora.select': 'Select LoRA',
'models.form.lora.name': 'LoRA name',
'models.form.lora.rule.empty': 'Input cannot be empty',
'models.form.lora.rule.duplicate': 'LoRA name cannot be duplicated'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -307,5 +313,11 @@ export default {
// 5. 'models.form.backend.sglang': 'Built-in support for NVIDIA, AMD, Ascend, Moore Threads, MetaX, T-Head PPU devices.',
// 6. 'models.table.modelView': 'Model List',
// 7. 'models.table.instanceView': 'Instance List',
// 8. 'models.table.category': 'Category'
// 8. 'models.table.category': 'Category',
// 9. 'models.form.lora.label': 'LoRA Adapter',
// 10. 'models.form.lora.add': 'Add LoRA Adapter',
// 11. 'models.form.lora.select': 'Select LoRA',
// 12. 'models.form.lora.name': 'LoRA name',
// 13. 'models.form.lora.rule.empty': 'Input cannot be empty',
// 14. 'models.form.lora.rule.duplicate': 'LoRA name cannot be duplicated'
// ========== End of To-Do List ==========
src/locales/tr-TR/models.ts
+14 -2
View File
@@ -290,11 +290,23 @@ export default {
'models.instance.previousRun': 'Previous Run',
'models.instance.startHistory': 'Run History',
'models.instance.startHistory.tips':
'Shows logs from the run before the last error-triggered restart.'
'Shows logs from the run before the last error-triggered restart.',
'models.form.lora.label': 'LoRA Adapter',
'models.form.lora.add': 'Add LoRA Adapter',
'models.form.lora.select': 'Select LoRA',
'models.form.lora.name': 'LoRA name',
'models.form.lora.rule.empty': 'Input cannot be empty',
'models.form.lora.rule.duplicate': 'LoRA name cannot be duplicated'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'models.table.modelView': 'Model List',
// 2. 'models.table.instanceView': 'Instance List',
// 3. 'models.table.category': 'Category'
// 3. 'models.table.category': 'Category',
// 4. 'models.form.lora.label': 'LoRA Adapter',
// 5. 'models.form.lora.add': 'Add LoRA Adapter',
// 6. 'models.form.lora.select': 'Select LoRA',
// 7. 'models.form.lora.name': 'LoRA name',
// 8. 'models.form.lora.rule.empty': 'Input cannot be empty',
// 9. 'models.form.lora.rule.duplicate': 'LoRA name cannot be duplicated'
// ========== End of To-Do List ==========
src/locales/zh-CN/models.ts
+7 -1
View File
@@ -274,5 +274,11 @@ export default {
'models.instance.previousRun': '上一次运行',
'models.instance.startHistory': '运行记录',
'models.instance.startHistory.tips':
'显示上一次因错误自动重启之前的那次运行的日志。'
'显示上一次因错误自动重启之前的那次运行的日志。',
'models.form.lora.label': 'LoRA 适配器',
'models.form.lora.add': '添加 LoRA 适配器',
'models.form.lora.select': '选择 LoRA',
'models.form.lora.name': 'LoRA 名称',
'models.form.lora.rule.empty': '输入不能为空',
'models.form.lora.rule.duplicate': 'LoRA name 不能重复'
};
src/pages/llmodels/forms/lora-list-item.tsx
+22 -26
View File
@@ -3,17 +3,21 @@ import {
Input as CInput,
Cascader as SealCascader
} from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import _ from 'lodash';
import { useEffect, useMemo, useState } from 'react';
import useQueryModelLoraList, {
LoraOptionGroup
} from '../services/use-query-lora-list';
import loraSelectionStyles from '../style/lora-selection.less';
interface LoraListItemProps {
item: { value: any[]; lora_name: string };
base: string;
defaultDataList: LoraOptionGroup[];
selectedRepoNames: Set<string>;
duplicateNames: Set<string>;
validated: boolean;
onChange: (partial: { value?: any[]; lora_name?: string }) => void;
}
@@ -22,8 +26,11 @@ const LoraListItem: React.FC<LoraListItemProps> = ({
base,
defaultDataList,
selectedRepoNames,
duplicateNames,
validated,
onChange
}) => {
const intl = useIntl();
const { dataList: ownSearchList, fetchData } = useQueryModelLoraList();
const [hasSearched, setHasSearched] = useState(false);
@@ -79,11 +86,15 @@ const LoraListItem: React.FC<LoraListItemProps> = ({
};
const cascaderEmpty = !item.value || item.value.length === 0;
const nameEmpty = !item.lora_name;
const nameEmpty = !item.lora_name?.trim();
const isDuplicate =
!!item.lora_name?.trim() && duplicateNames.has(item.lora_name.trim());
const cascaderStatus =
cascaderEmpty && !nameEmpty ? ('error' as const) : undefined;
validated && cascaderEmpty ? ('error' as const) : 'success';
const inputStatus =
nameEmpty && !cascaderEmpty ? ('error' as const) : undefined;
validated && (nameEmpty || isDuplicate) ? ('error' as const) : 'success';
const displayRender = (labels: any[]) => {
return (
@@ -105,41 +116,27 @@ const LoraListItem: React.FC<LoraListItemProps> = ({
const optionNode = (option: any) => {
const { data } = option;
if (data.isParent) {
return (
<AutoTooltip ghost maxWidth={100}>
{data.label}
</AutoTooltip>
);
}
return (
<AutoTooltip ghost maxWidth={180}>
<AutoTooltip ghost maxWidth={'100%'}>
{data.label}
</AutoTooltip>
);
};
return (
<div
style={{
display: 'grid',
gridTemplateColumns: '1fr 120px',
gap: 8,
alignItems: 'center',
flex: 1
}}
>
<div className={loraSelectionStyles.item}>
<SealCascader
showSearch
expandTrigger="hover"
expandTrigger="click"
multiple={false}
alwaysFocus={true}
status={cascaderStatus}
value={item.value}
options={groupedOptions}
onChange={handleCascaderChange}
onSearch={handleSearch}
placeholder="Select LoRA"
showSearch={{
onSearch: handleSearch
}}
placeholder={intl.formatMessage({ id: 'models.form.lora.select' })}
showCheckedStrategy="SHOW_CHILD"
displayRender={displayRender}
optionNode={optionNode}
@@ -158,11 +155,10 @@ const LoraListItem: React.FC<LoraListItemProps> = ({
getPopupContainer={(triggerNode) => triggerNode.parentNode}
></SealCascader>
<CInput.Input
style={{ flex: 1 }}
status={inputStatus}
value={item.lora_name}
onChange={handleNameChange}
placeholder="LoRA name"
placeholder={intl.formatMessage({ id: 'models.form.lora.name' })}
/>
</div>
);
src/pages/llmodels/forms/model-lora-list.tsx
+59 -4
View File
@@ -1,4 +1,5 @@
import { MetadataList } from '@gpustack/core-ui';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import { useEffect, useMemo, useRef, useState } from 'react';
import { FormData, LoraListItem } from '../config/types';
@@ -8,6 +9,7 @@ import LoraItem from './lora-list-item';
type ItemValue = { value: any[]; lora_name: string };
const ModelLoraList = () => {
const intl = useIntl();
const form = Form.useFormInstance<FormData>();
const huggingfaceRepoId = Form.useWatch('huggingface_repo_id', form);
const modelScopeModelId = Form.useWatch('model_scope_model_id', form);
@@ -18,6 +20,7 @@ const ModelLoraList = () => {
const { dataList: defaultDataList, fetchData } = useQueryModelLoraList();
const [itemList, setItemList] = useState<ItemValue[]>([]);
const [validated, setValidated] = useState(false);
const initializedRef = useRef(false);
const prevBaseRef = useRef<string>('');
@@ -59,6 +62,19 @@ const ModelLoraList = () => {
);
}, [itemList]);
const duplicateNames = useMemo(() => {
const counts = new Map<string, number>();
itemList.forEach((it) => {
const n = it.lora_name?.trim();
if (n) counts.set(n, (counts.get(n) ?? 0) + 1);
});
return new Set(
Array.from(counts.entries())
.filter(([, c]) => c > 1)
.map(([n]) => n)
);
}, [itemList]);
const syncFormField = (newItemList: ItemValue[]) => {
const newFormList = newItemList
.map((it) => ({
@@ -66,10 +82,16 @@ const ModelLoraList = () => {
lora_repo_name: it.value?.[1] || '',
lora_name: it.lora_name || ''
}))
.filter((it) => it.lora_repo_name?.trim() && it.lora_name?.trim());
.filter((it) => it.lora_repo_name?.trim() || it.lora_name?.trim());
form.setFieldValue('lora_list', newFormList);
};
useEffect(() => {
if (validated) {
form.validateFields(['lora_list']).catch(() => {});
}
}, [itemList, validated]);
const handleItemChange = (
index: number,
partial: { value?: any[]; lora_name?: string }
@@ -93,11 +115,42 @@ const ModelLoraList = () => {
};
return (
<Form.Item<FormData> name="lora_list">
<Form.Item<FormData>
name="lora_list"
rules={[
{
validator: async (_, value: LoraListItem[]) => {
if (!validated) {
setValidated(true);
}
if (!value || value.length === 0) return;
for (const it of value) {
const hasRepo = !!it.lora_repo_name?.trim();
const hasName = !!it.lora_name?.trim();
if (hasRepo !== hasName) {
throw new Error(
intl.formatMessage({ id: 'models.form.lora.rule.empty' })
);
}
}
const names = value
.map((it) => it.lora_name?.trim())
.filter(Boolean) as string[];
if (names.length !== new Set(names).size) {
throw new Error(
intl.formatMessage({ id: 'models.form.lora.rule.duplicate' })
);
}
}
}
]}
>
<MetadataList
label="LoRA Adapter"
label={intl.formatMessage({ id: 'models.form.lora.label' })}
dataList={itemList}
btnText="Add LoRA Adapter"
btnText={intl.formatMessage({ id: 'models.form.lora.add' })}
onAdd={handleAdd}
onDelete={handleDelete}
>
@@ -107,6 +160,8 @@ const ModelLoraList = () => {
base={base}
defaultDataList={defaultDataList}
selectedRepoNames={selectedRepoNames}
duplicateNames={duplicateNames}
validated={validated}
onChange={(partial) => handleItemChange(index, partial)}
/>
)}
src/pages/llmodels/services/use-query-lora-list.ts
+4 -1
View File
@@ -46,7 +46,10 @@ export const useQueryModelLoraList = () => {
const [dataList, setDataList] = useState<LoraOptionGroup[]>([]);
const getData = (params: Parameters) => {
fetchData(params).then((result) => {
fetchData({
...params,
limit: params.limit || 40
}).then((result) => {
if (result) {
const groups: Record<string, LoraOptionGroup> = {};
result.lora_list.forEach((item) => {
src/pages/llmodels/style/lora-selection.less
+26
View File
@@ -0,0 +1,26 @@
.item {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
flex: 1;
:global {
.ant-select-dropdown {
> div {
.ant-cascader-menus {
display: grid;
grid-template-columns: 140px 1fr;
}
}
}
}
> *:nth-child(1) {
flex: 1 1 320px;
min-width: 0;
}
> *:nth-child(2) {
flex: 1 1 120px;
min-width: 0;
}
}