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

fix: jump to playground from model list

Browse Source
This commit is contained in:
jialin
2024-11-28 21:48:14 +08:00
parent bd418b23dc
commit 51ae3a16bd
16 changed files with 760 additions and 366 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/ground-embedding.tsx
+19 -13
View File
@@ -12,7 +12,7 @@ import {
SendOutlined
} from '@ant-design/icons';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Segmented, Tabs, Tooltip } from 'antd';
import { Button, Checkbox, Segmented, Tabs, Tooltip } from 'antd';
import classNames from 'classnames';
import { PCA } from 'ml-pca';
import 'overlayscrollbars/overlayscrollbars.css';
@@ -81,7 +81,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
copyValue: ''
});
const [lessTwoInput, setLessTwoInput] = useState<boolean>(false);
const [multiplePasteEnable, setMultiplePasteEnable] = useState<boolean>(true);
const multiplePasteEnable = useRef<boolean>(true);
const [textList, setTextList] = useState<
{ text: string; uid: number | string; name: string }[]
@@ -279,21 +279,30 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
const handleOnPaste = useCallback(
(e: any, index: number) => {
if (!multiplePasteEnable) return;
if (!multiplePasteEnable.current) return;
const text = e.clipboardData.getData('text');
if (text) {
const currentContent = textList[index].text;
const dataLlist = text.split('\n').map((item: string) => {
return {
text: item?.trim(),
uid: inputListRef.current?.setMessageId(),
uid: setMessageId(),
name: ''
};
});
dataLlist[0].text = currentContent + dataLlist[0].text;
const result = [
...textList.slice(0, index),
...dataLlist,
...textList.slice(index + 1)
].filter((item) => item.text);
]
.filter((item) => item.text)
.map((item, index) => {
return {
...item,
uid: setMessageId()
};
});
setTextList(result);
}
},
@@ -407,19 +416,16 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
id: 'playground.input.multiplePaste.tips'
})}
>
<Button
className="flex-center"
variant="filled"
size="middle"
color={multiplePasteEnable ? 'primary' : 'default'}
onClick={() => {
setMultiplePasteEnable(!multiplePasteEnable);
<Checkbox
defaultChecked={multiplePasteEnable.current}
onChange={(e: any) => {
multiplePasteEnable.current = e.target.checked;
}}
>
{intl.formatMessage({
id: 'playground.input.multiplePaste'
})}
</Button>
</Checkbox>
</Tooltip>
<Button size="middle" onClick={handleAddText}>
src/pages/playground/components/ground-images.tsx
+4 -3
View File
@@ -78,9 +78,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
// width: 'auto',
// uid: 0,
// span: 12,
// loading: true,
// loading: false,
// progress: 60
// }
// },
// {
// dataUrl:
// 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
@@ -466,12 +466,13 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
flexWrap: 'unset',
alignItems: 'center'
}}
autoBgColor={true}
editable={false}
dataList={imageList}
loading={loading}
responseable={true}
gutter={[8, 16]}
autoSize={true}
autoSize={false}
></ThumbImg>
{!imageList.length && (
<div className="flex-column font-size-14 flex-center gap-20 justify-center hold-wrapper">
src/pages/playground/components/ground-reranker.tsx
+19 -14
View File
@@ -2,7 +2,7 @@ import useOverlayScroller from '@/hooks/use-overlay-scroller';
import useRequestToken from '@/hooks/use-request-token';
import { ClearOutlined, PlusOutlined, SendOutlined } from '@ant-design/icons';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Input, Spin, Tag, Tooltip } from 'antd';
import { Button, Checkbox, Input, Spin, Tag, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
@@ -77,7 +77,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
const messageListLengthCache = useRef<number>(0);
const requestToken = useRef<any>(null);
const formRef = useRef<any>(null);
const [multiplePasteEnable, setMultiplePasteEnable] = useState<boolean>(true);
const multiplePasteEnable = useRef<boolean>(true);
const [fileList, setFileList] = useState<
{
text: string;
@@ -346,22 +346,30 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
const handleOnPaste = useCallback(
(e: any, index: number) => {
if (!multiplePasteEnable) return;
if (!multiplePasteEnable.current) return;
const text = e.clipboardData.getData('text');
if (text) {
console.log('text:', text);
const currentContent = textList[index]?.text;
const dataLlist = text.split('\n').map((item: string) => {
return {
text: item?.trim(),
uid: inputListRef.current?.setMessageId(),
uid: setMessageId(),
name: ''
};
});
dataLlist[0].text = currentContent + dataLlist[0].text;
const result = [
...textList.slice(0, index),
...dataLlist,
...textList.slice(index + 1)
].filter((item) => item.text);
]
.filter((item) => item.text)
.map((item, index) => {
return {
...item,
uid: setMessageId()
};
});
setTextList(result);
}
},
@@ -470,19 +478,16 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
id: 'playground.input.multiplePaste.tips'
})}
>
<Button
className="flex-center"
variant="filled"
size="middle"
color={multiplePasteEnable ? 'primary' : 'default'}
onClick={() => {
setMultiplePasteEnable(!multiplePasteEnable);
<Checkbox
defaultChecked={multiplePasteEnable.current}
onChange={(e: any) => {
multiplePasteEnable.current = e.target.checked;
}}
>
{intl.formatMessage({
id: 'playground.input.multiplePaste'
})}
</Button>
</Checkbox>
</Tooltip>
<Button size="middle" onClick={handleAddText}>
<PlusOutlined />
src/pages/playground/components/thumb-img.tsx
+26 -4
View File
@@ -1,4 +1,5 @@
import AutoImage from '@/components/auto-image';
import SingleImage from '@/components/auto-image/single-image';
import { CloseCircleOutlined } from '@ant-design/icons';
import { Col, Progress, Row } from 'antd';
import _ from 'lodash';
@@ -15,13 +16,14 @@ const ThumbImg: React.FC<{
gutter?: number | number[] | object;
justify?: any;
autoSize?: boolean;
autoBgColor?: boolean;
}> = ({
dataList,
editable,
responseable,
gutter,
onDelete,
loading,
autoBgColor,
autoSize,
style
}) => {
@@ -112,7 +114,13 @@ const ThumbImg: React.FC<{
className="flex-center justify-center"
style={{ height: '100%', width: '100%' }}
>
{renderImageItem(item)}
<SingleImage
{...item}
autoSize={autoSize}
editable={editable}
autoBgColor={autoBgColor}
onDelete={handleOnDelete}
></SingleImage>
</Col>
);
})}
@@ -137,7 +145,13 @@ const ThumbImg: React.FC<{
className="flex-center justify-center"
style={{ height: '100%', width: '100%' }}
>
{renderImageItem(item)}
<SingleImage
{...item}
autoSize={autoSize}
editable={editable}
autoBgColor={autoBgColor}
onDelete={handleOnDelete}
></SingleImage>
</Col>
);
})}
@@ -147,7 +161,15 @@ const ThumbImg: React.FC<{
) : (
<>
{_.map(dataList, (item: any) => {
return renderImageItem(item);
return (
<SingleImage
{...item}
autoSize={autoSize}
editable={editable}
autoBgColor={autoBgColor}
onDelete={handleOnDelete}
></SingleImage>
);
})}
</>
)}
src/pages/playground/config/params-config.ts
+3 -5
View File
@@ -241,7 +241,7 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
{ label: 'dpm++2m', value: 'dpm++2m' },
{ label: 'dpm++2mv2', value: 'dpm++2mv2' },
{ label: 'ipndm', value: 'ipndm' },
{ label: 'pndm_v', value: 'pndm_v' },
{ label: 'ipndm_v', value: 'ipndm_v' },
{ label: 'lcm', value: 'lcm' }
],
label: {
@@ -263,8 +263,7 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
},
attrs: {
min: 1,
max: 100,
defaultValue: 10
max: 100
},
rules: [
{
@@ -282,8 +281,7 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
attrs: {
min: 1.0,
max: 10,
step: 0.1,
defaulValue: 4.5
step: 0.1
},
rules: [
{
src/pages/playground/index.tsx
+5 -1
View File
@@ -79,7 +79,11 @@ const Playground: React.FC = () => {
const getModelList = async () => {
try {
const params = {
embedding_only: false
embedding_only: false,
image_only: false,
reranker: false,
text_to_speech: false,
speech_to_text: false
};
const res = await queryModelsList(params);
const list = _.map(res.data || [], (item: any) => {
src/pages/playground/speech.tsx
+49 -13
View File
@@ -4,7 +4,7 @@ import HotKeys from '@/config/hotkeys';
import useWindowResize from '@/hooks/use-window-resize';
import { AudioOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Segmented, Space, Tabs, TabsProps } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
@@ -17,16 +17,25 @@ import './style/play-ground.less';
const TabsValueMap = {
Tab1: 'tts',
Tab2: 'stt'
Tab2: 'stt',
tts: 'tts',
stt: 'stt'
};
const Playground: React.FC = () => {
const intl = useIntl();
const [searchParams] = useSearchParams();
const modelType = searchParams.get('type') || '';
const { size } = useWindowResize();
const [activeKey, setActiveKey] = useState(TabsValueMap.Tab1);
const [activeKey, setActiveKey] = useState(modelType || TabsValueMap.Tab1);
const groundTabRef1 = useRef<any>(null);
const groundTabRef2 = useRef<any>(null);
const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
const [textToSpeechModels, setTextToSpeechModels] = useState<
Global.BaseOption<string>[]
>([]);
const [speechModelList, setSpeechModelList] = useState<
Global.BaseOption<string>[]
>([]);
const [loaded, setLoaded] = useState(false);
const optionsList = [
{
@@ -62,14 +71,21 @@ const Playground: React.FC = () => {
key: 'tts',
label: 'TTS',
children: (
<GroundTTS ref={groundTabRef1} modelList={modelList}></GroundTTS>
<GroundTTS
ref={groundTabRef1}
modelList={textToSpeechModels}
></GroundTTS>
)
},
{
key: 'stt',
label: 'Realtime',
children: (
<GroundSTT modelList={modelList} loaded={loaded} ref={groundTabRef2} />
<GroundSTT
modelList={speechModelList}
loaded={loaded}
ref={groundTabRef2}
/>
)
}
];
@@ -83,10 +99,28 @@ const Playground: React.FC = () => {
}, [size.width]);
useEffect(() => {
const getModelList = async () => {
const getTextToSpeechModels = async () => {
try {
const params = {
embedding_only: false
text_to_speech: true
};
const res = await queryModelsList(params);
const list = _.map(res.data || [], (item: any) => {
return {
value: item.id,
label: item.id
};
}) as Global.BaseOption<string>[];
return list;
} catch (error) {
console.error(error);
return [];
}
};
const getSpeechToText = async () => {
try {
const params = {
speech_to_text: true
};
const res = await queryModelsList(params);
const list = _.map(res.data || [], (item: any) => {
@@ -104,9 +138,13 @@ const Playground: React.FC = () => {
const fetchData = async () => {
try {
const modelist = await getModelList();
const [textToSpeechModels, speechToTextModels] = await Promise.all([
getTextToSpeechModels(),
getSpeechToText()
]);
setModelList(modelist);
setTextToSpeechModels(textToSpeechModels);
setSpeechModelList(speechToTextModels);
} catch (error) {
setLoaded(true);
}
@@ -115,9 +153,6 @@ const Playground: React.FC = () => {
}, []);
const renderExtra = () => {
if (activeKey === 'compare') {
return false;
}
return (
<Space key="buttons">
<Button
@@ -165,6 +200,7 @@ const Playground: React.FC = () => {
options={optionsList}
size="middle"
className="m-l-40"
value={activeKey}
onChange={(key) => setActiveKey(key)}
></Segmented>
}