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

style: show voice error message

Browse Source
This commit is contained in:
jialin
2024-11-29 20:02:54 +08:00
parent 2ddeca8f9d
commit e622636686
15 changed files with 278 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/ground-images.tsx
+3 -2
View File
@@ -12,7 +12,7 @@ import {
} from '@/utils/fetch-chunk-data';
import { FileImageOutlined, SwapOutlined } from '@ant-design/icons';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Form, Tooltip } from 'antd';
import { Button, Divider, Form, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
@@ -530,9 +530,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
clearAll={handleClear}
tools={
<>
<span className="p-l-8 font-600">
<span className="font-600">
{intl.formatMessage({ id: 'playground.image.prompt' })}
</span>
<Divider type="vertical" />
<Tooltip
title={intl.formatMessage({
id: 'playground.image.prompt.random'
src/pages/playground/components/ground-reranker.tsx
+11 -2
View File
@@ -177,7 +177,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
<Tag color={'geekblue'} bordered={false}>
{intl.formatMessage({ id: 'playground.rerank.rank' })}: {data.rank}
</Tag>
<Tag color={'cyan'} bordered={false}>
<Tag color={'gold'} bordered={false}>
{intl.formatMessage({ id: 'playground.rerank.score' })}:{' '}
{_.round(data.score, 2)}
</Tag>
@@ -489,7 +489,16 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
</span>
}
>
<SendOutlined rotate={0} className="font-size-14" />
<Button
ghost
variant="filled"
color="default"
style={{
border: 'none'
}}
>
<SendOutlined rotate={0} className="font-size-14" />
</Button>
</Tooltip>
}
placeholder={intl.formatMessage({
src/pages/playground/components/ground-stt.tsx
+4 -1
View File
@@ -47,7 +47,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
{ uid: number; content: string }[]
>([]);
const [searchParams] = useSearchParams();
const selectModel = searchParams.get('model') || '';
const modelType = searchParams.get('type') || '';
const selectModel = searchParams.get('model')
? modelType === 'stt' && searchParams.get('model')
: '';
const [parameters, setParams] = useState<any>({});
const [show, setShow] = useState(false);
const [loading, setLoading] = useState(false);
src/pages/playground/components/ground-tts.tsx
+30 -9
View File
@@ -56,11 +56,15 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
const intl = useIntl();
const [searchParams] = useSearchParams();
const selectModel = searchParams.get('model') || '';
const modelType = searchParams.get('type') || '';
const selectModel = searchParams.get('model')
? modelType === 'tts' && searchParams.get('model')
: '';
const [parameters, setParams] = useState<any>({});
const [show, setShow] = useState(false);
const [loading, setLoading] = useState(false);
const [tokenResult, setTokenResult] = useState<any>();
const [tokenResult, setTokenResult] = useState<any>(null);
const [voiceError, setVoiceError] = useState<any>(null);
const [collapse, setCollapse] = useState(false);
const controllerRef = useRef<any>(null);
const scroller = useRef<any>(null);
@@ -151,9 +155,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
}
};
const handleClear = () => {
if (!messageList.length) {
return;
}
setMessageId();
setMessageList([]);
setTokenResult(null);
@@ -176,7 +177,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
});
console.log('res:', res);
if (res.error) {
setTokenResult({
setVoiceError({
error: true,
errorMessage:
res?.data?.error?.message ||
@@ -205,7 +206,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
} catch (error: any) {
const res = error?.response?.data;
if (res.error) {
setTokenResult({
setVoiceError({
error: true,
errorMessage:
res?.error?.message || res?.data?.error || res.error?.detail || ''
@@ -247,6 +248,26 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
});
}, [paramsConfig, intl, voiceList]);
const renderVoiceError = useMemo(() => {
if (!voiceError) return null;
return (
<>
{voiceError && (
<div style={{ height: 40 }}>
<AlertInfo
type="danger"
ellipsis={false}
style={{ textAlign: 'left' }}
message={intl.formatMessage({
id: 'playgorund.audio.voice.error'
})}
></AlertInfo>
</div>
)}
</>
);
}, [voiceError]);
useEffect(() => {
handleSelectModel(parameters.model);
}, [parameters.model, handleSelectModel]);
@@ -324,7 +345,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
)}
<div className="ground-left-footer">
<MessageInput
actions={['check']}
actions={['check', 'clear']}
checkLabel={intl.formatMessage({
id: 'playground.toolbar.autoplay'
})}
@@ -358,7 +379,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
params={parameters}
selectedModel={selectModel}
modelList={modelList}
extra={renderExtra}
extra={[renderExtra, renderVoiceError]}
/>
</div>
</div>
src/pages/playground/components/view-common-code.tsx
+1 -7
View File
@@ -3,7 +3,6 @@ import HighlightCode from '@/components/highlight-code';
import { BulbOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Modal } from 'antd';
import _ from 'lodash';
import React, { useEffect, useState } from 'react';
type ViewModalProps = {
@@ -72,16 +71,11 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
...parameters,
...payload
};
_.keys(data).forEach((key: string) => {
if (data[key] === null) {
delete data[key];
}
});
const headers = {
'Content-type': 'application/json',
Authorization: `Bearer $\{YOUR_GPUSTACK_API_KEY}`
};
const code = `import requests\n\nurl="${BaseURL}"\n\nheaders = ${JSON.stringify(headers, null, 2)}\n\ndata=${JSON.stringify(data, null, 2)}\n\nresponse = requests.post(url, headers=headers, json=data)\n\nprint(response.${logcommand.python})`;
const code = `import requests\n\nurl="${BaseURL}"\n\nheaders = ${JSON.stringify(headers, null, 2)}\n\ndata=${JSON.stringify(data, null, 2).replace(/null/g, 'None')}\n\nresponse = requests.post(url, headers=headers, json=data)\n\nprint(response.${logcommand.python})`;
setCodeValue(code);
}
};