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

chore: support editing the model repoID, filename, model path

Browse Source
This commit is contained in:
jialin
2024-12-10 15:43:29 +08:00
parent acf99a6a9e
commit f64e696f7a
12 changed files with 122 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/audio-player/raw-audio-player.tsx
+11 -10
View File
@@ -66,8 +66,10 @@ const RawAudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
audioRef.current.addEventListener('loadeddata', () => {
initEnvents();
initAudioContext();
generateVisualData();
if (!audioContext.current) {
initAudioContext();
generateVisualData();
}
props.onLoadedData?.();
});
@@ -107,12 +109,6 @@ const RawAudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
});
};
const handleAudioOnPlay = () => {
audioRef.current?.play();
};
const handleLoadedMetadata = () => {};
useImperativeHandle(ref, () => ({
play: () => {
audioRef.current?.play();
@@ -124,6 +120,8 @@ const RawAudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
useEffect(() => {
if (audioRef.current) {
console.log('audioRef.current', audioRef.current, props.url);
initEnvents();
}
return () => {
if (audioContext.current) {
@@ -150,12 +148,15 @@ const RawAudioPlayer: React.FC<AudioPlayerProps> = forwardRef((props, ref) => {
return (
<audio
width={props.width || 300}
height={props.height || 40}
controls
autoPlay={autoplay}
src={props.url}
ref={audioRef}
style={{
position: 'absolute',
left: '-9999px',
opacity: 0
}}
preload="metadata"
></audio>
);
src/components/drop-down-buttons/index.less
+4
View File
@@ -0,0 +1,4 @@
.dropdown-button.middle {
height: 28px;
width: 28px;
}
src/components/drop-down-buttons/index.tsx
+10 -2
View File
@@ -1,8 +1,10 @@
import { MoreOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Dropdown, Tooltip, type MenuProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import { memo } from 'react';
import './index.less';
interface DropdownButtonsProps {
items: MenuProps['items'];
@@ -12,7 +14,7 @@ interface DropdownButtonsProps {
const DropdownButtons: React.FC<DropdownButtonsProps> = ({
items,
size = 'small',
size = 'middle',
onSelect
}) => {
const intl = useIntl();
@@ -81,12 +83,18 @@ const DropdownButtons: React.FC<DropdownButtonsProps> = ({
key="leftButton"
>
<Button
className={classNames('dropdown-button', size)}
onClick={handleButtonClick}
size={size}
icon={_.head(items)?.icon}
></Button>
</Tooltip>,
<Button icon={<MoreOutlined />} size={size} key="menu"></Button>
<Button
icon={<MoreOutlined />}
size={size}
key="menu"
className={classNames('dropdown-button', size)}
></Button>
]}
></Dropdown.Button>
)}
src/components/seal-table/components/table-row.tsx
+14 -10
View File
@@ -62,14 +62,6 @@ const TableRow: React.FC<
}
}, [rowSelection]);
// useEffect(() => {
// if (expandedRowKeys?.includes(record[rowKey])) {
// setExpanded(true);
// } else {
// setExpanded(false);
// }
// }, [expandedRowKeys]);
useEffect(() => {
return () => {
if (pollTimer.current) {
@@ -160,8 +152,6 @@ const TableRow: React.FC<
pollTimer.current = setInterval(() => {
handlePolling();
}, 1000);
} else {
handleLoadChildren();
}
};
@@ -179,6 +169,20 @@ const TableRow: React.FC<
}
};
useEffect(() => {
if (expandedRowKeys?.includes(record[rowKey])) {
setExpanded(true);
} else {
setExpanded(false);
}
}, [expandedRowKeys]);
useEffect(() => {
if (expanded) {
handleLoadChildren();
}
}, [expanded]);
useEffect(() => {
if (!firstLoad && expanded) {
cacheDataListRef.current = childrenData;
src/components/speech-content/speech-item.tsx
+14 -1
View File
@@ -64,6 +64,7 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
}, [ref.current]);
const handleOnAnalyse = useCallback((data: any, analyser: any) => {
console.log('data+++++++++++++++++=:', data);
setAudioChunks((pre: any) => {
return {
data: data,
@@ -88,6 +89,7 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
const handleOnAudioprocess = useCallback(
(current: number) => {
console.log('current:', current);
throttleUpdateCurrentTime(current);
},
[throttleUpdateCurrentTime]
@@ -119,7 +121,7 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
};
const handleReady = useCallback((duration: number) => {
console.log('duration:', duration);
console.log('ready+++++++++++++++', duration);
setDuration(duration);
}, []);
@@ -159,6 +161,17 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
onAudioprocess={handleOnAudioprocess}
ref={ref}
></AudioPlayer>
{/* <RawAudioPlayer
{...props}
url={props.audioUrl}
onReady={handleReady}
onEnded={handleOnFinish}
onPlay={handleOnPlay}
onPause={handleOnPause}
onAnalyse={handleOnAnalyse}
onAudioProcess={handleOnAudioprocess}
ref={ref}
></RawAudioPlayer> */}
{isPlay && (
<AudioAnimation
maxBarCount={100}
src/config/hotkeys.ts
+1
View File
@@ -20,6 +20,7 @@ const KeybindingsMap = {
NEW1: ['Ctrl+1', 'Meta+1'],
NEW2: ['Ctrl+2', 'Meta+2'],
NEW3: ['Ctrl+3', 'Meta+3'],
NEW4: ['Ctrl+4', 'Meta+4'],
FOCUS: ['/', '/'],
ADD: ['Alt+Ctrl+Enter', 'Alt+Meta+Enter']
};
src/global.less
+4
View File
@@ -629,6 +629,10 @@ body {
.ant-image {
border-radius: var(--border-radius-base);
overflow: hidden;
.ant-image-mask {
background: rgba(0, 0, 0, 25%);
}
}
.ant-message-notice-wrapper {
src/hooks/use-expanded-row-keys.ts
+5
View File
@@ -15,6 +15,10 @@ export default function useExpandedRowKeys() {
);
const updateExpandedRowKeys = (keys: React.Key[]) => {
setExpandedRowKeys(keys);
};
const removeExpandedRowKey = (keys: React.Key[]) => {
// remove expanded row keys that are in the deleted keys
const newExpandedRowKeys = expandedRowKeys.filter(
(key) => !keys.includes(key)
@@ -30,6 +34,7 @@ export default function useExpandedRowKeys() {
expandedRowKeys,
clearExpandedRowKeys,
updateExpandedRowKeys,
removeExpandedRowKey,
handleExpandChange
};
}
src/pages/llmodels/components/advance-config.tsx
-1
View File
@@ -36,7 +36,6 @@ interface AdvanceConfigProps {
gpuOptions: Array<any>;
action: PageActionType;
source: string;
modelTask: Record<string, any>;
}
const AdvanceConfig: React.FC<AdvanceConfigProps> = (props) => {
src/pages/llmodels/components/data-form.tsx
+1 -2
View File
@@ -291,7 +291,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
<SealAutoComplete
filterOption
defaultActiveFirstOption
disabled={action === PageAction.EDIT}
disabled={false}
options={ollamaModelOptions}
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
@@ -503,7 +503,6 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
form={form}
gpuOptions={gpuOptions}
isGGUF={isGGUF}
modelTask={modelTask}
action={action}
source={props.source}
></AdvanceConfig>
src/pages/llmodels/components/table-list.tsx
+28 -6
View File
@@ -82,8 +82,12 @@ const Models: React.FC<ModelsProps> = ({
const intl = useIntl();
const navigate = useNavigate();
const rowSelection = useTableRowSelection();
const { handleExpandChange, updateExpandedRowKeys, expandedRowKeys } =
useExpandedRowKeys();
const {
handleExpandChange,
updateExpandedRowKeys,
removeExpandedRowKey,
expandedRowKeys
} = useExpandedRowKeys();
const { sortOrder, setSortOrder } = useTableSort({
defaultSortOrder: 'descend'
});
@@ -152,6 +156,20 @@ const Models: React.FC<ModelsProps> = ({
enabled: !openAddModal && !openDeployModal.show && !openLogModal
}
);
useHotkeys(
HotKeys.NEW4.join(','),
() => {
setOpenDeployModal({
show: true,
width: 600,
source: modelSourceMap.local_path_value
});
},
{
preventDefault: true,
enabled: !openAddModal && !openDeployModal.show && !openLogModal
}
);
const sourceOptions = [
{
@@ -299,16 +317,20 @@ const Models: React.FC<ModelsProps> = ({
const result = getSourceRepoConfigValue(openDeployModal.source, data);
await createModel({
const modelData = await createModel({
data: {
...result.values,
..._.omit(data, result.omits)
}
});
console.log('modelData:', modelData);
setOpenDeployModal({
...openDeployModal,
show: false
});
setTimeout(() => {
updateExpandedRowKeys([modelData.id]);
}, 300);
message.success(intl.formatMessage({ id: 'common.message.success' }));
} catch (error) {}
},
@@ -324,7 +346,7 @@ const Models: React.FC<ModelsProps> = ({
name: row.name,
async onOk() {
await deleteModel(row.id);
updateExpandedRowKeys([row.id]);
removeExpandedRowKey([row.id]);
rowSelection.removeSelectedKey(row.id);
}
});
@@ -336,7 +358,7 @@ const Models: React.FC<ModelsProps> = ({
async onOk() {
await handleBatchRequest(rowSelection.selectedRowKeys, deleteModel);
rowSelection.clearSelections();
updateExpandedRowKeys(rowSelection.selectedRowKeys);
removeExpandedRowKey(rowSelection.selectedRowKeys);
}
});
};
@@ -386,7 +408,7 @@ const Models: React.FC<ModelsProps> = ({
async onOk() {
await deleteModelInstance(row.id);
if (list.length === 1) {
updateExpandedRowKeys([row.model_id]);
removeExpandedRowKey([row.model_id]);
}
}
});
src/pages/llmodels/components/update-modal.tsx
+30 -11
View File
@@ -1,3 +1,4 @@
import IconFont from '@/components/icon-font';
import ModalFooter from '@/components/modal-footer';
import SealAutoComplete from '@/components/seal-form/auto-complete';
import SealInput from '@/components/seal-form/seal-input';
@@ -5,7 +6,7 @@ import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { Form, Modal } from 'antd';
import { Form, Modal, Tooltip, Typography } from 'antd';
import _ from 'lodash';
import React, { memo, useEffect, useMemo, useState } from 'react';
import SimpleBar from 'simplebar-react';
@@ -14,6 +15,7 @@ import { queryGPUList } from '../apis';
import {
backendOptionsMap,
modelSourceMap,
ollamaModelOptions,
setSourceRepoConfigValue
} from '../config';
import { FormData, GPUListItem, ListItem } from '../config/types';
@@ -119,7 +121,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
<SealInput.Input
label={intl.formatMessage({ id: 'models.form.repoid' })}
required
disabled={true}
disabled={false}
></SealInput.Input>
</Form.Item>
{isGGUF && (
@@ -137,14 +139,12 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
}
]}
>
<SealAutoComplete
filterOption
<SealInput.Input
label={intl.formatMessage({ id: 'models.form.filename' })}
required
options={[]}
loading={loading}
disabled={action === PageAction.EDIT}
></SealAutoComplete>
disabled={false}
></SealInput.Input>
</Form.Item>
)}
</>
@@ -196,12 +196,31 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
}
]}
>
<SealInput.Input
disabled={action === PageAction.EDIT}
<SealAutoComplete
filterOption
defaultActiveFirstOption
disabled={false}
options={ollamaModelOptions}
label={intl.formatMessage({ id: 'model.form.ollama.model' })}
placeholder={intl.formatMessage({ id: 'model.form.ollamaholder' })}
addAfter={
<Typography.Link
href="https://www.ollama.com/library"
target="_blank"
>
<Tooltip
title={intl.formatMessage({ id: 'models.form.ollamalink' })}
placement="topRight"
>
<IconFont
type="icon-external-link"
className="font-size-14"
></IconFont>
</Tooltip>
</Typography.Link>
}
required
></SealInput.Input>
></SealAutoComplete>
</Form.Item>
</>
);
@@ -226,7 +245,7 @@ const UpdateModal: React.FC<AddModalProps> = (props) => {
]}
>
<SealInput.Input
disabled={action === PageAction.EDIT}
disabled={false}
label={intl.formatMessage({ id: 'models.form.filePath' })}
required
></SealInput.Input>