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);
}
};
src/pages/playground/config/index.ts
+7 -1
View File
@@ -146,5 +146,11 @@ export const promptList = [
'A cinematic shot of a baby racoon wearing an intricate italian priest robe.',
'Create portraits of characters in the style of classical oil painting, Capturing the essence of Chinese aristocracy in the Han Dynasty period. This portrait should feature a Chinese male character dressed in exquisite and gorgeous Chinese Han style clothing, with a dignified demeanor. The background should be a simple and elegant wallpaper pattern, with the face and upper body of the character as the focus. The lighting should be soft and diffuse, highlighting the characteristics of the character and the complex details of the clothing. The color palette should be rich and warm, with red, gold, and dark green.',
'photo of a young woman with long, wavy brown hair tied in a bun and glasses. She has a fair complexion and is wearing subtle makeup, emphasizing her eyes and lips. She is dressed in a black top. The background appears to be an urban setting with a building facade, and the sunlight casts a warm glow on her face.',
'A portrait of women with blue eyes.'
'A portrait of women with blue eyes.',
"A close-up image of a light brown and cream-colored Bengal kitten, lying on a cream-colored surface, with a person's hand gently touching the kitten's head, capturing the soft textures of the fur and the subtle patterns, emphasizing the natural light and shadow play on the animal's body.",
'A German Shepherd dog playfully carrying a stick, with a smaller German Shepherd puppy running alongside in a grassy field, showcasing a rich, natural color palette of greens, browns, and tans, and a dynamic action shot with a focus on vibrant texture and depth of field.',
"A young woman with long, dark, wavy hair, wearing a light olive green flowing dress, looks directly at the camera, standing near a window with a soft out-of-focus background of dark green curtains and light green. The image should be sharp, focused on the woman's face, and evoke a natural, soft beauty aesthetic with a slightly muted color palette.",
'A sleepy panda cub rests comfortably on a large, ornate tree branch, its black and white fur contrasting against the reddish-brown bark of the textured, sculpted tree trunk, surrounded by lush green foliage and branches. ',
'A full shot of two people jogging at sunset, featuring a vibrant, warm color palette shifting from twilight blues to peachy-orange tones, with visible sun rays and lens flares, conveying a sense of leisure and athleticism.',
'A close-up portrait of a golden retriever wearing black-framed glasses, exhibiting a rich golden-brown coat with a fluffy texture, and a neutral, light gray background.'
];