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

fix: update model backend not show

Browse Source
This commit is contained in:
jialin
2024-09-26 14:04:19 +08:00
parent f813f56c1f
commit cc7d2ded6c
14 changed files with 103 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/index.tsx
-2
View File
@@ -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
+17 -22
View File
@@ -1,23 +1,18 @@
import apikeys from './en-US/apikeys';
import common from './en-US/common';
import dashboard from './en-US/dashboard';
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';
/**
* @description The directory name used in require.context must match the language configuration names defined in lang-config-map.ts.
* @example Directories like 'en-US' or 'zh-CN' should correspond exactly to the configuration names in lang-config-map.ts.
*/
export default {
...common,
...menu,
...models,
...playground,
...resources,
...apikeys,
...users,
...dashboard,
...usage,
...shortcuts
};
const requireContext = require.context(`./en-US`, false, /\.ts$/);
let languageConfig: Record<string, string> = {};
requireContext.keys().forEach((fileName: any) => {
const moduleConfig = requireContext(fileName).default;
languageConfig = {
...languageConfig,
...moduleConfig
};
});
export default languageConfig;
src/locales/lang-config-map.tsx
+6
View File
@@ -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
+14 -27
View File
@@ -1,31 +1,18 @@
import apikeys from './zh-CN/apikeys';
import common from './zh-CN/common';
import dashboard from './zh-CN/dashboard';
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';
/**
* @description The directory name used in require.context must match the language configuration names defined in lang-config-map.ts.
* @example Directories like 'en-US' or 'zh-CN' should correspond exactly to the configuration names in lang-config-map.ts.
*/
// 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 {
...common,
...menu,
...models,
...playground,
...resources,
...apikeys,
...users,
...dashboard,
...usage,
...shortcuts
};
export default languageConfig;
src/pages/llmodels/components/advance-config.tsx
+2 -1
View File
@@ -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
+6
View File
@@ -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
-1
View File
@@ -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
+9 -46
View File
@@ -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) => {
return (
<span>
{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);
};
useEffect(() => {
setIsGGUF(props.data?.backend === backendOptionsMap.llamaBox);
}, [props.data?.backend]);
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
View File
@@ -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
+5 -1
View File
@@ -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
+3 -1
View File
@@ -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
+24 -38
View File
@@ -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 () => {
try {
const params = {
embedding_only: false
};
const res = await queryModelsList(params);
const list = _.map(res.data || [], (item: any) => {
return {
value: item.id,
label: item.id
};
});
setModelList(list);
form.setFieldsValue({
model: selectedModel || _.get(list, '[0].value'),
...initialValues
});
setParams({
model: selectedModel || _.get(list, '[0].value'),
...initialValues
});
} catch (error) {
setModelList([]);
form.setFieldsValue({
model: selectedModel || '',
...initialValues
});
setParams({
model: selectedModel || '',
...initialValues
});
}
};
getModelList();
}, []);
if (showModelSelector) {
form.setFieldsValue({
model: selectedModel || _.get(modelList, '[0].value'),
...initialValues
});
setParams({
model: selectedModel || _.get(modelList, '[0].value'),
...initialValues
});
} else {
form.setFieldsValue({
model: selectedModel || '',
...initialValues
});
setParams({
model: selectedModel || '',
...initialValues
});
}
}, [modelList, showModelSelector, selectedModel]);
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
-20
View File
@@ -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
+16
View File
@@ -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;
}