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

fix: do not init audio model

Browse Source
This commit is contained in:
jialin
2025-02-28 12:23:02 +08:00
parent 295b4b3b72
commit 9927da5088
14 changed files with 134 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/logs-viewer/parse-worker.ts
+36 -5
View File
@@ -8,6 +8,15 @@ const removeBracketsFromLine = (row: string) => {
return row.startsWith('(…)') ? row.slice(3) : row;
};
interface MessageProps {
inputStr: string;
reset?: boolean;
page?: number;
isComplete?: boolean;
chunked?: boolean;
progress?: number;
percent?: number;
}
class AnsiParser {
private cursorRow: number = 0;
private cursorCol: number = 0;
@@ -17,6 +26,8 @@ class AnsiParser {
private isProcessing: boolean = false;
private taskQueue: string[] = [];
private page: number = 1;
private progress: number = 0;
private percent: number = 0;
private isComplete: boolean = false;
private chunked: boolean = true; // true: send data in chunks, false: send all data at once
private pageSize: number = 500;
@@ -44,8 +55,16 @@ class AnsiParser {
this.page = 1;
}
public setPage(page: number) {
this.page = page;
public setPage(page: number | undefined) {
this.page = page ?? 1;
}
public setPercent(percent: number | undefined) {
this.percent = percent ?? 0;
}
public setProgress(progress: number | undefined) {
this.progress = progress ?? 0;
}
public setIsCompelete(isComplete: boolean) {
@@ -179,6 +198,12 @@ class AnsiParser {
const result = this.processInput(input);
if (this.chunked) {
self.postMessage({ result: result.data, lines: result.lines });
} else if (!this.isComplete) {
self.postMessage({
result: '',
percent: this.percent,
isComplete: false
});
}
} catch (error) {
console.error('Error processing input:', error);
@@ -194,7 +219,11 @@ class AnsiParser {
if (this.taskQueue.length > 0) {
this.processQueue();
} else if (this.isComplete && !this.chunked) {
self.postMessage({ result: this.getScreenText() });
self.postMessage({
result: this.getScreenText(),
percent: this.percent,
isComplete: true
});
this.reset();
}
}
@@ -208,18 +237,20 @@ class AnsiParser {
}
const parser = new AnsiParser();
self.onmessage = function (event) {
self.onmessage = function (event: MessageEvent<MessageProps>) {
const {
inputStr,
reset,
page,
isComplete = false,
chunked = true
chunked = true,
percent = 0
} = event.data;
parser.setPage(page);
parser.setIsCompelete(isComplete);
parser.setChunked(chunked);
parser.setPercent(percent);
if (reset) {
parser.reset();
src/components/markdown-viewer/index.less
+1
View File
@@ -5,6 +5,7 @@
border: none;
height: 1px;
background-color: var(--ant-color-split);
border-color: var(--ant-color-split);
}
p {
src/global.less
+4
View File
@@ -907,3 +907,7 @@ body {
width: 0;
}
}
.ant-notification .ant-notification-notice-close {
width: fit-content !important;
}
src/hooks/use-chunk-fetch.ts
+1 -1
View File
@@ -89,7 +89,7 @@ const useSetChunkFetch = () => {
let isReading = true;
while (true) {
while (isReading) {
const { done, value } = await reader.read();
if (done) {
src/hooks/use-download-stream.ts
+28 -17
View File
@@ -3,7 +3,7 @@ import { message } from 'antd';
import { useEffect, useRef } from 'react';
export default function useDownloadStream() {
const chunkRequedtRef = useRef<any>(null);
const chunkRequestRef = useRef<any>(null);
const logParseWorker = useRef<any>(null);
const clearScreen = useRef(false);
const filename = useRef('log');
@@ -26,19 +26,13 @@ export default function useDownloadStream() {
};
const updateContent = (data: string, options?: HandlerOptions) => {
const { isComplete } = options || {};
downloadNotificationRef.current?.({
...options,
duration: isComplete ? 1 : null,
filename: filename.current
});
const { isComplete, percent } = options || {};
logParseWorker.current?.postMessage({
inputStr: data,
page: 1,
reset: clearScreen.current,
isComplete: isComplete,
percent: percent,
chunked: false
});
clearScreen.current = false;
@@ -72,13 +66,9 @@ export default function useDownloadStream() {
downloadNotificationRef.current = props.downloadNotification;
const { params, url } = props;
downloadNotificationRef.current?.({
filename: filename.current
});
chunkRequestRef.current?.current?.abort?.();
chunkRequedtRef.current?.current?.abort?.();
chunkRequedtRef.current = setChunkFetch({
chunkRequestRef.current = setChunkFetch({
url,
params,
watch: false,
@@ -86,6 +76,11 @@ export default function useDownloadStream() {
errorHandler: handleError,
handler: updateContent
});
downloadNotificationRef.current?.({
filename: filename.current,
duration: null,
chunkRequestRef: chunkRequestRef.current
});
} catch (error) {
//
downloadNotificationRef.current?.({
@@ -108,8 +103,24 @@ export default function useDownloadStream() {
);
logParseWorker.current.onmessage = (event: any) => {
const { result } = event.data;
downloadFile(result);
const { result, isComplete, percent } = event.data;
const isAborted = chunkRequestRef.current?.current?.signal?.aborted;
if (!isComplete && !isAborted) {
downloadNotificationRef.current?.({
percent: percent,
duration: null,
filename: filename.current,
chunkRequestRef: chunkRequestRef.current
});
} else if (isComplete && !isAborted) {
downloadNotificationRef.current?.({
duration: 1,
percent: 100,
filename: filename.current
});
downloadFile(result);
}
};
return () => {
src/pages/llmodels/components/instance-item.tsx
+18 -4
View File
@@ -115,10 +115,11 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
modelData,
handleChildSelect
}) => {
const [api, contextHolder] = notification.useNotification();
const [api, contextHolder] = notification.useNotification({
stack: { threshold: 1 }
});
const { downloadStream } = useDownloadStream();
const intl = useIntl();
const actionItems = useMemo(() => {
return _.filter(childActionList, (action: any) => {
if (action.key === 'viewlog' || action.key === 'download') {
@@ -135,12 +136,25 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
};
const downloadNotification = useCallback(
(data: HandlerOptions & { filename: string; duration?: number }) => {
(
data: HandlerOptions & {
filename: string;
duration?: number;
chunkRequestRef: any;
}
) => {
api.open({
duration: data.duration,
message: renderMessage(data.filename),
key: data.filename,
description: <Progress percent={data.percent} size="small"></Progress>
closeIcon: (
<span>{intl.formatMessage({ id: 'common.button.cancel' })}</span>
),
description: <Progress percent={data.percent} size="small"></Progress>,
onClose() {
data.chunkRequestRef?.current?.abort();
notification.destroy?.(data.filename);
}
});
},
[]
src/pages/playground/components/ground-embedding.tsx
+2 -3
View File
@@ -198,10 +198,9 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
};
const submitMessage = async (current?: { role: string; content: string }) => {
await formRef.current?.form.validateFields();
if (!parameters.model) return;
try {
await formRef.current?.form.validateFields();
if (!parameters.model) return;
const validTextList = textList.filter((item) => item.text);
const validFileList = fileList.filter((item) => item.text);
src/pages/playground/components/ground-images.tsx
+4 -2
View File
@@ -229,7 +229,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
<FileImageOutlined className="font-size-32 text-secondary" />
</span>
<span>
{intl.formatMessage({ id: 'playground.params.empty.tips' })}
{intl.formatMessage({
id: 'playground.params.empty.tips'
})}
</span>
</div>
)}
@@ -308,7 +310,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
})}
>
<Button
size="middle"
size="small"
type="text"
icon={<SwapOutlined />}
onClick={handleToggleParamsStyle}
src/pages/playground/components/ground-reranker.tsx
+2 -2
View File
@@ -218,9 +218,9 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
};
const submitMessage = async () => {
await formRef.current?.form.validateFields();
if (!parameters.model) return;
try {
await formRef.current?.form.validateFields();
if (!parameters.model) return;
const documentList: any[] = [...textList, ...fileList];
const validDocus = documentList.filter((item) => item.text);
src/pages/playground/components/ground-stt.tsx
+19 -13
View File
@@ -41,10 +41,6 @@ interface MessageProps {
ref?: any;
}
const initialValues = {
language: 'auto'
};
const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
const intl = useIntl();
const { modelList } = props;
@@ -57,8 +53,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
const selectModel = searchParams.get('model')
? modelType === 'stt' && searchParams.get('model')
: '';
const defaultModel = selectModel || modelList[0]?.value || '';
const [parameters, setParams] = useState<any>({
model: selectModel,
model: defaultModel,
language: 'auto'
});
const [show, setShow] = useState(false);
@@ -112,9 +109,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
};
const submitMessage = async () => {
await formRef.current?.form.validateFields();
if (!parameters.model) return;
try {
await formRef.current?.form.validateFields();
if (!parameters.model) return;
setLoading(true);
setMessageId();
setTokenResult(null);
@@ -181,9 +178,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
}
};
const handleClear = () => {
if (!messageList.length) {
return;
}
setMessageId();
setMessageList([]);
setTokenResult(null);
@@ -243,6 +237,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
}, []);
const handleOnGenerate = async () => {
if (loading) {
handleStopConversation();
return;
}
submitMessage();
};
@@ -340,7 +338,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
title={
loading
? intl.formatMessage({
id: 'playground.audio.generating'
id: 'common.button.stop'
})
: intl.formatMessage({
id: 'playground.audio.button.generate'
@@ -350,12 +348,20 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
{
<Button
disabled={!audioData}
loading={loading}
type="primary"
size="middle"
shape="circle"
onClick={handleOnGenerate}
icon={<SendOutlined></SendOutlined>}
icon={
loading ? (
<IconFont
type="icon-stop1"
className="font-size-14"
></IconFont>
) : (
<SendOutlined></SendOutlined>
)
}
></Button>
}
</Tooltip>
src/pages/playground/components/ground-tts.tsx
+10 -15
View File
@@ -92,6 +92,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
};
});
const defaultModel = useMemo(() => {
return selectModel || modelList[0]?.value || '';
}, [modelList]);
const viewCodeContent = useMemo(() => {
return TextToSpeechCode({
api: AUDIO_TEXT_TO_SPEECH_API,
@@ -147,9 +151,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
};
const submitMessage = async (current?: { role: string; content: string }) => {
await formRef.current?.form.validateFields();
if (!parameters.model) return;
try {
await formRef.current?.form.validateFields();
if (!parameters.model) return;
setLoading(true);
setMessageId();
setTokenResult(null);
@@ -235,14 +239,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
const handleSelectModel = useCallback(
async (value: string) => {
if (!value) {
setVoiceList([]);
setParams((pre: any) => {
return {
...pre,
voice: ''
};
});
formRef.current?.form.setFieldValue('voice', '');
return;
}
const model = modelList.find((item) => item.value === value);
@@ -259,10 +255,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
setParams((pre: any) => {
return {
...pre,
model: value,
voice: newList[0]?.value
};
});
formRef.current?.form.setFieldValue('voice', newList[0]?.value);
},
[modelList]
);
@@ -307,11 +303,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
}, [paramsConfig, intl, voiceList]);
useEffect(() => {
if (!parameters.model && modelList.length) {
const model = modelList[0]?.value;
handleSelectModel(model);
if (defaultModel) {
handleSelectModel(defaultModel);
}
}, [modelList, parameters.model, handleSelectModel]);
}, [defaultModel]);
useEffect(() => {
if (scroller.current) {
src/pages/playground/components/image-edit.tsx
+1 -1
View File
@@ -506,7 +506,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
})}
>
<Button
size="middle"
size="small"
type="text"
icon={<SwapOutlined />}
onClick={handleToggleParamsStyle}
src/pages/playground/hooks/use-init-meta.ts
+6 -7
View File
@@ -162,7 +162,7 @@ export const useInitImageMeta = (props: MessageProps) => {
const { modelList } = props;
const form = useRef<any>(null);
const [searchParams] = useSearchParams();
const selectModel = searchParams.get('model') || '';
const defaultModel = searchParams.get('model') || modelList?.[0]?.value || '';
const [modelMeta, setModelMeta] = useState<any>({});
const [isOpenaiCompatible, setIsOpenaiCompatible] = useState<boolean>(false);
const [imageSizeOptions, setImageSizeOptions] = React.useState<
@@ -175,7 +175,7 @@ export const useInitImageMeta = (props: MessageProps) => {
const [initialValues, setInitialValues] = useState<any>({
...imgInitialValues,
...advancedFieldsDefaultValus,
model: selectModel
model: defaultModel
});
const [paramsConfig, setParamsConfig] = useState<ParamsSchema[]>([
...ImageCountConfig,
@@ -186,7 +186,7 @@ export const useInitImageMeta = (props: MessageProps) => {
const [parameters, setParams] = useState<any>({
...imgInitialValues,
...advancedFieldsDefaultValus,
model: selectModel
model: defaultModel
});
const cacheFormData = React.useRef<Record<string, any>>({
@@ -410,11 +410,10 @@ export const useInitImageMeta = (props: MessageProps) => {
);
useEffect(() => {
if (!parameters.model && modelList.length) {
const model = modelList[0]?.value;
handleOnModelChange(model);
if (defaultModel) {
handleOnModelChange(defaultModel);
}
}, [modelList, parameters.model, handleOnModelChange]);
}, [defaultModel, handleOnModelChange]);
return {
extractIMGMeta,
src/pages/playground/speech.tsx
+2
View File
@@ -107,6 +107,7 @@ const Playground: React.FC = () => {
with_meta: true
};
const res = await queryModelsList(params);
const list = _.map(res.data || [], (item: any) => {
return {
value: item.id,
@@ -127,6 +128,7 @@ const Playground: React.FC = () => {
with_meta: true
};
const res = await queryModelsList(params);
const list = _.map(res.data || [], (item: any) => {
return {
value: item.id,