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

fix: playground view code

Browse Source
This commit is contained in:
jialin
2024-11-29 15:26:39 +08:00
parent 435161854c
commit cd1d3005e9
15 changed files with 243 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/seal-form/components/wrapper.less
+6
View File
@@ -251,6 +251,12 @@
}
}
:global(.ant-input-number.ant-input-number-disabled) {
&:hover {
background-color: inherit;
}
}
:global(.ant-input-outlined) {
display: flex;
align-items: center;
src/components/seal-form/seal-select.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ const SealSelect: React.FC<SelectProps & SealFormItemProps> = (props) => {
<Select
{...rest}
ref={inputRef}
options={_options}
options={children ? null : _options}
onFocus={handleOnFocus}
onBlur={handleOnBlur}
onChange={handleChange}
src/pages/llmodels/components/data-form.tsx
+1
View File
@@ -88,6 +88,7 @@ const DataForm: React.FC<DataFormProps> = forwardRef((props, ref) => {
value: `${item.worker_name}-${item.name}-${item.index}`
};
});
console.log('queryGPUList========', list);
setGpuOptions(list);
};
src/pages/playground/components/ground-embedding.tsx
+46 -10
View File
@@ -2,6 +2,7 @@ import AlertInfo from '@/components/alert-info';
import ScatterChart from '@/components/echarts/scatter';
import HighlightCode from '@/components/highlight-code';
import IconFont from '@/components/icon-font';
import HotKeys, { KeyMap } from '@/config/hotkeys';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import useRequestToken from '@/hooks/use-request-token';
import {
@@ -28,6 +29,7 @@ import {
useRef,
useState
} from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { handleEmbedding } from '../apis';
import { OpenAIViewCode } from '../config';
import { ParamsSchema } from '../config/types';
@@ -100,6 +102,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
]);
const [scatterData, setScatterData] = useState<any[]>([]);
const resizeRef = useRef<any>(null);
const resizeMaxHeight = 400;
const { initialize, updateScrollerPosition: updateDocumentScrollerPosition } =
@@ -264,6 +267,14 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
}
};
const handleScaleResize = () => {
console.log('handleScaleResize', resizeRef.current);
const height = resizeRef.current?.state?.height;
if (height) {
setOutputHeight(height);
}
};
const handleDeleteFile = (uid: number | string) => {
setFileList((preList) => {
return preList.filter((item) => item.uid !== uid);
@@ -374,6 +385,18 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
setTokenResult(null);
}, [parameters.model]);
useHotkeys(
HotKeys.SUBMIT,
(e: any) => {
e.preventDefault();
handleSendMessage();
},
{
enabled: !loading,
preventDefault: true
}
);
useEffect(() => {
if (scroller.current) {
initialize(scroller.current);
@@ -427,6 +450,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
{intl.formatMessage({
id: 'playground.input.multiplePaste'
})}
<InfoCircleOutlined className="m-l-4" />
</Checkbox>
</Tooltip>
@@ -442,14 +466,25 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
{intl.formatMessage({ id: 'common.button.clear' })}
</Button>
{!loading ? (
<Button
size="middle"
type="primary"
disabled={inputEmpty}
onClick={handleSendMessage}
icon={<SendOutlined rotate={0} className="font-size-14" />}
style={{ width: 60 }}
></Button>
<Tooltip
title={
<span>
[{KeyMap.SUBMIT.textKeybinding}]{' '}
{intl.formatMessage({ id: 'common.button.submit' })}
</span>
}
>
<Button
size="middle"
type="primary"
disabled={inputEmpty}
onClick={handleSendMessage}
icon={
<SendOutlined rotate={0} className="font-size-14" />
}
style={{ width: 60 }}
></Button>
</Tooltip>
) : (
<Tooltip
title={intl.formatMessage({ id: 'common.button.stop' })}
@@ -547,6 +582,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
</h3>
<div className="embed-chart">
<Resizable
ref={resizeRef}
enable={{
top: true
}}
@@ -577,13 +613,13 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
}}
maxHeight={resizeMaxHeight}
minHeight={180}
onResize={handleScaleResize}
onResizeStop={handleScaleOutputSize}
>
<div
style={{
border: '1px solid var(--ant-color-border)',
borderRadius: 'var(--border-radius-base)',
overflow: 'hidden',
width: '100%'
}}
className="scatter "
@@ -622,7 +658,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
<ViewCodeModal
{...OpenAIViewCode.embeddings}
open={show}
payLoad={{
payload={{
input: [
...textList.map((item) => item.text).filter((item) => item),
...fileList.map((item) => item.text).filter((item) => item)
src/pages/playground/components/ground-images.tsx
+30 -54
View File
@@ -39,6 +39,7 @@ import '../style/system-message-wrap.less';
import DynamicParams from './dynamic-params';
import MessageInput from './message-input';
import ViewCodeModal from './view-code-modal';
import ViewCommonCode from './view-common-code';
interface MessageProps {
modelList: Global.BaseOption<string>[];
@@ -73,45 +74,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
loading?: boolean;
progress?: number;
}[]
>([
// {
// dataUrl:
// 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
// height: 'auto',
// width: 'auto',
// uid: 0,
// span: 12,
// loading: false,
// progress: 60
// },
// {
// dataUrl:
// 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
// height: 'auto',
// width: 'auto',
// uid: 1,
// span: 12,
// progress: 15
// },
// {
// dataUrl:
// 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
// height: 'auto',
// width: 'auto',
// uid: 3,
// span: 12,
// progress: 10
// },
// {
// dataUrl:
// 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
// height: 'auto',
// width: 'auto',
// uid: 4,
// span: 12,
// progress: 15
// }
]);
>([]);
const intl = useIntl();
const [searchParams] = useSearchParams();
@@ -221,6 +184,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const size: any = setImageSize();
setLoading(true);
setMessageId();
setTokenResult(null);
setCurrentPrompt(current?.content || '');
let newImageList = Array(parameters.n)
@@ -309,9 +273,6 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
}
};
const handleClear = () => {
if (!imageList.length) {
return;
}
setMessageId();
setImageList([]);
setTokenResult(null);
@@ -628,18 +589,33 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
</div>
</div>
<ViewCodeModal
{...OpenAIViewCode.images}
open={show}
payLoad={{
prompt: currentPrompt
}}
parameters={{
...finalParameters
}}
onCancel={handleCloseViewCode}
title={intl.formatMessage({ id: 'playground.viewcode' })}
></ViewCodeModal>
{isOpenaiCompatible ? (
<ViewCodeModal
{...OpenAIViewCode.images}
open={show}
payload={{
prompt: currentPrompt
}}
parameters={{
...finalParameters
}}
onCancel={handleCloseViewCode}
title={intl.formatMessage({ id: 'playground.viewcode' })}
></ViewCodeModal>
) : (
<ViewCommonCode
{...OpenAIViewCode.imageAdvanced}
open={show}
payload={{
prompt: currentPrompt
}}
parameters={{
...finalParameters
}}
onCancel={handleCloseViewCode}
title={intl.formatMessage({ id: 'playground.viewcode' })}
></ViewCommonCode>
)}
</div>
);
});
src/pages/playground/components/ground-left.tsx
+1 -1
View File
@@ -329,7 +329,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
<ViewCodeModal
{...OpenAIViewCode.chat}
open={show}
payLoad={{
payload={{
messages: viewCodeMessage
}}
parameters={parameters}
src/pages/playground/components/ground-reranker.tsx
+48 -6
View File
@@ -1,6 +1,12 @@
import HotKeys, { KeyMap } from '@/config/hotkeys';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import useRequestToken from '@/hooks/use-request-token';
import { ClearOutlined, PlusOutlined, SendOutlined } from '@ant-design/icons';
import {
ClearOutlined,
InfoCircleOutlined,
PlusOutlined,
SendOutlined
} from '@ant-design/icons';
import { useIntl, useSearchParams } from '@umijs/max';
import { Button, Checkbox, Input, Spin, Tag, Tooltip } from 'antd';
import classNames from 'classnames';
@@ -15,14 +21,16 @@ import {
useRef,
useState
} from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
import { rerankerQuery } from '../apis';
import { OpenAIViewCode } from '../config';
import { MessageItem, ParamsSchema } from '../config/types';
import '../style/ground-left.less';
import '../style/rerank.less';
import '../style/system-message-wrap.less';
import DynamicParams from './dynamic-params';
import InputList from './input-list';
import ViewRerankCode from './view-rerank-code';
import ViewCommonCode from './view-common-code';
interface MessageProps {
modelList: Global.BaseOption<string>[];
@@ -113,6 +121,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
}
]);
const [sortIndexMap, setSortIndexMap] = useState<number[]>([]);
const queryValueRef = useRef<string>('');
const { initialize, updateScrollerPosition: updateDocumentScrollerPosition } =
useOverlayScroller();
@@ -305,10 +314,16 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
};
const handleSearch = (val: string) => {
console.log('val:', val);
if (!val) {
return;
}
submitMessage({ content: val });
};
const handleQueryChange = (e: any) => {
queryValueRef.current = e.target.value;
};
const handleCloseViewCode = () => {
setShow(false);
};
@@ -409,6 +424,18 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
setTokenResult(null);
};
useHotkeys(
HotKeys.SUBMIT,
(e: any) => {
e.preventDefault();
handleSearch(queryValueRef.current);
},
{
enabled: !loading,
preventDefault: true
}
);
useEffect(() => {
setMessageId();
setMessageList([]);
@@ -450,8 +477,21 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
</h3>
<div style={{ margin: '16px 32px 10px' }}>
<Input.Search
allowClear
onSearch={handleSearch}
enterButton={<SendOutlined rotate={0} className="font-size-14" />}
onChange={handleQueryChange}
enterButton={
<Tooltip
title={
<span>
[{KeyMap.SUBMIT.textKeybinding}]{' '}
{intl.formatMessage({ id: 'common.button.submit' })}
</span>
}
>
<SendOutlined rotate={0} className="font-size-14" />
</Tooltip>
}
placeholder={intl.formatMessage({
id: 'playground.rerank.query.holder'
})}
@@ -490,6 +530,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
{intl.formatMessage({
id: 'playground.input.multiplePaste'
})}
<InfoCircleOutlined className="m-l-4" />
</Checkbox>
</Tooltip>
<Button size="middle" onClick={handleAddText}>
@@ -557,7 +598,8 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
</div>
</div>
<ViewRerankCode
<ViewCommonCode
{...OpenAIViewCode.rerank}
open={show}
payload={{
documents: [...textList, ...fileList]
@@ -570,7 +612,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
}}
onCancel={handleCloseViewCode}
title={intl.formatMessage({ id: 'playground.viewcode' })}
></ViewRerankCode>
></ViewCommonCode>
</div>
);
});
src/pages/playground/components/ground-stt.tsx
+1 -1
View File
@@ -390,7 +390,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
<ViewCodeModal
open={show}
payLoad={{}}
payload={{}}
api="audio/transcriptions"
clientType="audio.transcriptions"
parameters={parameters}
src/pages/playground/components/ground-tts.tsx
+1 -1
View File
@@ -342,7 +342,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
<ViewCodeModal
open={show}
payLoad={{
payload={{
input: currentPrompt
}}
api="audio/speech"
src/pages/playground/components/multiple-chat/model-item.tsx
+1 -1
View File
@@ -466,7 +466,7 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
<ViewCodeModal
{...OpenAIViewCode.chat}
open={show}
payLoad={{
payload={{
messages: viewCodeMessage
}}
parameters={params}
src/pages/playground/components/test.txt
+32 -1
View File
@@ -12,4 +12,35 @@ Cuidado de la piel orgánico para piel sensible con aloe vera y manzanilla: Desc
新的化妆趋势注重鲜艳的颜色和创新的技巧：进入化妆艺术的新纪元，本季的化妆趋势以大胆的颜色和创新的技巧为主。无论是霓虹眼线还是全息高光，每一款妆容都能让您脱颖而出，展现独特魅力。
新しいメイクのトレンドは鮮やかな色と革新的な技術に焦点を当てています: 今シーズンのメイクアップトレンドは、大胆な色彩と革新的な技術に注目しています。ネオンアイライナーからホログラフィックハイライターまで、クリエイティビティを解き放ち、毎回ユニークなルックを演出しましょう。
新しいメイクのトレンドは鮮やかな色と革新的な技術に焦点を当てています: 今シーズンのメイクアップトレンドは、大胆な色彩と革新的な技術に注目しています。ネオンアイライナーからホログラフィックハイライターまで、クリエイティビティを解き放ち、毎回ユニークなルックを演出しましょう。
asdfas
dfaf
defsdf
aloe
fd
Farbensdf
asdfasdf
asdfasdfas
dfafas
dfafasdf
saludadf
1
2
2
2
2
2
222
2
2
2
2
2
2
2
2
2
src/pages/playground/components/view-code-modal.tsx
+6 -6
View File
@@ -9,7 +9,7 @@ import React, { useMemo, useState } from 'react';
type ViewModalProps = {
systemMessage?: string;
messageList?: any[];
payLoad: Record<string, any>;
payload: Record<string, any>;
parameters: any;
title: string;
api: string;
@@ -39,7 +39,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
clientType,
logcommand,
onCancel,
payLoad,
payload,
parameters = {}
} = props || {};
@@ -72,7 +72,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const code = `curl ${window.location.origin}/v1-openai/${api} \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
{
...parameters,
...payLoad
...payload
},
null,
2
@@ -83,7 +83,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const code = `const OpenAI = require("openai");\n\nconst openai = new OpenAI({\n "apiKey": "YOUR_GPUSTACK_API_KEY",\n "baseURL": "${BaseURL}"\n});\n\nasync function main(){\n const params = ${JSON.stringify(
{
...parameters,
...payLoad
...payload
},
null,
4
@@ -105,12 +105,12 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
},
''
);
const params = formatPyParams(payLoad);
const params = formatPyParams(payload);
const code = `from openai import OpenAI\n\nclient = OpenAI(\n base_url="${BaseURL}", \n api_key="YOUR_GPUSTACK_API_KEY"\n)\n\nresponse = client.${clientType}(\n${formattedParams}${params})\n${printLog}`;
return code;
}
return '';
}, [lang, payLoad, parameters, api, clientType, logcommand]);
}, [lang, payload, parameters, api, clientType, logcommand]);
const handleOnChangeLang = (value: string) => {
setLang(value);
src/pages/playground/components/view-rerank-code.tsx → src/pages/playground/components/view-common-code.tsx
+15 -6
View File
@@ -9,8 +9,9 @@ type ViewModalProps = {
parameters: any;
title: string;
open: boolean;
apiType?: string;
api: string;
payload?: Record<string, any>;
logcommand: Record<string, any>;
onCancel: () => void;
};
@@ -27,17 +28,25 @@ const langOptions = [
];
const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
const { title, open, onCancel, payload, parameters = {} } = props || {};
const {
title,
open,
onCancel,
payload,
parameters = {},
api,
logcommand
} = props || {};
const intl = useIntl();
const [codeValue, setCodeValue] = useState('');
const [lang, setLang] = useState(langMap.shell);
const BaseURL = `${window.location.origin}/v1/rerank`;
const BaseURL = `${window.location.origin}${api}`;
const generateCode = () => {
if (lang === langMap.shell) {
const code = `curl ${window.location.origin}/v1/rerank \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
const code = `curl ${window.location.origin}${api} \\\n-H "Content-Type: application/json" \\\n-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\\n-d '${JSON.stringify(
{
...parameters,
...payload
@@ -55,7 +64,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
'Content-type': 'application/json',
Authorization: `Bearer $\{YOUR_GPUSTACK_API_KEY}`
};
const code = `import axios from 'axios';\n\nconst url = "${BaseURL}";\n\nconst headers = ${JSON.stringify(headers, null, 2)};\n\nconst data = ${JSON.stringify(data, null, 2)};\n\naxios.post(url, data, { headers }).then((response) => {\n console.log(response.data);\n});`;
const code = `import axios from 'axios';\n\nconst url = "${BaseURL}";\n\nconst headers = ${JSON.stringify(headers, null, 2)};\n\nconst data = ${JSON.stringify(data, null, 2)};\n\naxios.post(url, data, { headers }).then((response) => {\n console.log(response.${logcommand.node});\n});`;
setCodeValue(code);
} else if (lang === langMap.python) {
const data = {
@@ -66,7 +75,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
'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.json())`;
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})`;
setCodeValue(code);
}
};
src/pages/playground/config/index.ts
+15
View File
@@ -119,6 +119,21 @@ export const OpenAIViewCode = {
api: 'images/generations',
clientType: 'images.generate',
logcommand: 'data[0].b64_json'
},
imageAdvanced: {
api: '/v1/images/generations',
clientType: 'images.generate',
logcommand: {
python: 'json().data[0].b64_json',
node: 'data[0].b64_json'
}
},
rerank: {
api: '/v1/rerank',
logcommand: {
python: 'json()',
node: 'data'
}
}
};
src/pages/playground/config/test-image.ts
+39
View File
@@ -0,0 +1,39 @@
export default [
{
dataUrl:
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
height: 'auto',
width: 'auto',
uid: 0,
span: 12,
loading: false,
progress: 60
},
{
dataUrl:
'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
height: 'auto',
width: 'auto',
uid: 1,
span: 12,
progress: 15
},
{
dataUrl:
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
height: 'auto',
width: 'auto',
uid: 3,
span: 12,
progress: 10
},
{
dataUrl:
'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
height: 'auto',
width: 'auto',
uid: 4,
span: 12,
progress: 15
}
];