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/components/auto-image/index.tsx
+7
View File
@@ -19,6 +19,7 @@ const AutoImage: React.FC<
height: number | string;
width?: number | string;
autoSize?: boolean;
onLoad?: () => void;
}
> = (props) => {
const { height = 100, width: w, autoSize, ...rest } = props;
@@ -62,6 +63,10 @@ const AutoImage: React.FC<
link.remove();
};
const handleImgLoad = useCallback(() => {
props.onLoad?.();
}, [props.onLoad]);
const handleOnError = () => {
setIsError(true);
};
@@ -76,7 +81,9 @@ const AutoImage: React.FC<
height={isError ? 'auto' : height}
width={isError ? '100%' : width}
onError={handleOnError}
onLoad={handleImgLoad}
fallback={fallbackImg}
crossOrigin="anonymous"
preview={{
mask: <EyeOutlined />,
toolbarRender: (
src/components/auto-image/single-image.less
+103
View File
@@ -0,0 +1,103 @@
.thumb-img {
position: relative;
display: flex;
max-width: 100%;
max-height: 100%;
justify-content: center;
align-items: center;
border-radius: var(--border-radius-base);
overflow: hidden;
.img {
display: flex;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
overflow: hidden;
border-radius: var(--border-radius-base);
cursor: pointer;
justify-content: center;
align-items: center;
}
.del {
position: absolute;
top: -4px;
right: -2px;
font-size: var(--font-size-middle);
cursor: pointer;
background-color: var(--color-white-1);
display: none;
border-radius: 50%;
height: 16px;
width: 16px;
overflow: hidden;
pointer-events: all;
}
&:hover {
.ant-image .ant-image-mask {
opacity: 1;
transition: opacity var(--ant-motion-duration-slow);
}
.del {
display: flex;
justify-content: center;
align-items: center;
}
}
}
.single-image {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: var(--border-radius-base);
&.auto-bg-color {
position: relative;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
backdrop-filter: blur(100px);
backdrop-filter: blur(100px);
z-index: 5;
}
.thumb-img {
position: relative;
z-index: 10;
border-radius: 0;
.img {
border-radius: 0;
}
}
.ant-image {
border-radius: 0;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
bottom: 0;
right: 0;
z-index: 1;
}
}
}
src/components/auto-image/single-image.tsx
+136
View File
@@ -0,0 +1,136 @@
import { CloseCircleOutlined } from '@ant-design/icons';
import { Progress } from 'antd';
import classNames from 'classnames';
import * as Vibrant from 'node-vibrant';
import React from 'react';
import AutoImage from './index';
import './single-image.less';
interface SingleImageProps {
loading?: boolean;
width?: number;
height?: number;
progress?: number;
maxHeight?: number;
maxWidth?: number;
dataUrl: string;
uid: number;
autoSize?: boolean;
onDelete: (uid: number) => void;
autoBgColor?: boolean;
editable?: boolean;
}
const SingleImage: React.FC<SingleImageProps> = (props) => {
const {
editable,
onDelete: handleOnDelete,
autoSize,
uid,
loading,
width,
height,
progress,
maxHeight,
maxWidth,
dataUrl,
autoBgColor
} = props;
const [color, setColor] = React.useState<string>('');
const imgWrapper = React.useRef<HTMLSpanElement>(null);
const thumImgWrapStyle = React.useMemo(() => {
return loading ? { width: width, height: height } : {};
}, [loading, width, height]);
const handleOnLoad = React.useCallback(async () => {
if (!autoBgColor) {
return;
}
const img = imgWrapper.current?.querySelector('img');
if (!img) {
return;
}
Vibrant.from(img.src).getPalette((err: any, palette: any) => {
if (err) {
console.error(err);
return;
}
const color = palette?.Vibrant?.rgb;
const rgba = color
? `rgba(${color[0]}, ${color[1]}, ${color[2]},0.7)`
: '';
setColor(rgba);
});
}, []);
return (
<div
key={uid}
className={classNames('single-image', { 'auto-bg-color': autoBgColor })}
>
{autoBgColor && (
<div
className="mask"
style={{
background: `url(${dataUrl}) center center / cover no-repeat`
}}
></div>
)}
<span
className="thumb-img"
style={{
...thumImgWrapStyle
}}
ref={imgWrapper}
>
<>
{loading ? (
<span
className="progress-wrap"
style={{
width: '100%',
height: '100%',
display: 'flex',
border: '1px solid var(--ant-color-split)',
borderRadius: 'var(--border-radius-base)',
justifyContent: 'center',
alignItems: 'center',
padding: '10px',
overflow: 'hidden'
}}
>
<Progress percent={progress} type="circle" />
</span>
) : (
<span
className="img"
style={{
maxHeight: `min(${maxHeight}, 100%)`,
maxWidth: `min(${maxWidth}, 100%)`
}}
>
<AutoImage
autoSize={autoSize}
src={dataUrl}
width={width || 100}
height={height || 100}
onLoad={handleOnLoad}
/>
</span>
)}
</>
{editable && (
<span className="del" onClick={() => handleOnDelete(uid)}>
<CloseCircleOutlined />
</span>
)}
</span>
</div>
);
};
export default React.memo(SingleImage);
src/pages/llmodels/components/table-list.tsx
+21 -1
View File
@@ -347,7 +347,27 @@ const Models: React.FC<ModelsProps> = ({
};
const handleOpenPlayGround = (row: any) => {
navigate(`/playground?model=${row.name}`);
if (row.image_only) {
navigate(`/playground/text-to-image?model=${row.name}`);
return;
}
if (row.text_to_speech) {
navigate(`/playground/speech?model=${row.name}&type=tts`);
return;
}
if (row.speech_to_text) {
navigate(`/playground/speech?model=${row.name}&type=stt`);
return;
}
if (row.reranker) {
navigate(`/playground/rerank?model=${row.name}`);
return;
}
if (row.embedding_only) {
navigate(`/playground/embedding?model=${row.name}`);
return;
}
navigate(`/playground/chat?model=${row.name}`);
};
const handleViewLogs = async (row: any) => {
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>
}
src/utils/fetch-chunk-data.ts
+3
View File
@@ -131,6 +131,9 @@ export const readLargeStreamData = async (
buffer = lines.pop() || ''; // Keep last line (may be incomplete)
for (const line of lines) {
if (line === '[DONE]') {
continue;
}
if (line.startsWith('data: ')) {
const jsonStr = line.slice(6).trim();
try {