feat: playground embedding
This commit is contained in:
jialin
@@ -0,0 +1,442 @@
|
||||
import ScatterChart from '@/components/echarts/scatter';
|
||||
import useOverlayScroller from '@/hooks/use-overlay-scroller';
|
||||
import useRequestToken from '@/hooks/use-request-token';
|
||||
import {
|
||||
ClearOutlined,
|
||||
LoadingOutlined,
|
||||
PlusOutlined,
|
||||
ThunderboltOutlined,
|
||||
UploadOutlined
|
||||
} from '@ant-design/icons';
|
||||
import { useIntl, useSearchParams } from '@umijs/max';
|
||||
import { Button, Tooltip } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import 'overlayscrollbars/overlayscrollbars.css';
|
||||
import {
|
||||
forwardRef,
|
||||
memo,
|
||||
useEffect,
|
||||
useImperativeHandle,
|
||||
useMemo,
|
||||
useRef,
|
||||
useState
|
||||
} from 'react';
|
||||
import { UMAP } from 'umap-js';
|
||||
import { handleEmbedding } from '../apis';
|
||||
import { MessageItem, ParamsSchema } from '../config/types';
|
||||
import '../style/ground-left.less';
|
||||
import '../style/rerank.less';
|
||||
import '../style/system-message-wrap.less';
|
||||
import FileList from './file-list';
|
||||
import InputList from './input-list';
|
||||
import RerankerParams from './reranker-params';
|
||||
import UploadFile from './upload-file';
|
||||
import ViewCodeModal from './view-code-modal';
|
||||
|
||||
interface MessageProps {
|
||||
modelList: Global.BaseOption<string>[];
|
||||
loaded?: boolean;
|
||||
ref?: any;
|
||||
}
|
||||
|
||||
const paramsConfig: ParamsSchema[] = [
|
||||
{
|
||||
type: 'Select',
|
||||
name: 'truncate',
|
||||
label: {
|
||||
text: 'Truncate',
|
||||
isLocalized: false
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: 'None',
|
||||
value: 'none'
|
||||
},
|
||||
{
|
||||
label: 'Start',
|
||||
value: 'start'
|
||||
},
|
||||
{
|
||||
label: 'End',
|
||||
value: 'end'
|
||||
}
|
||||
],
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Please select truncate'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const initialValues = {
|
||||
truncate: 'none'
|
||||
};
|
||||
|
||||
const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
|
||||
const { modelList } = props;
|
||||
const acceptType =
|
||||
'.txt, .doc, .docx, .xls, .xlsx, .csv, .md, .pdf, .eml, .msg, .ppt, .pptx, .xml, .epub, .html';
|
||||
const messageId = useRef<number>(0);
|
||||
const [messageList, setMessageList] = useState<MessageItem[]>([]);
|
||||
|
||||
const intl = useIntl();
|
||||
const requestSource = useRequestToken();
|
||||
const [searchParams] = useSearchParams();
|
||||
const selectModel = searchParams.get('model') || '';
|
||||
const [parameters, setParams] = useState<any>({});
|
||||
const [show, setShow] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [tokenResult, setTokenResult] = useState<any>(null);
|
||||
const [collapse, setCollapse] = useState(false);
|
||||
const contentRef = useRef<any>('');
|
||||
const scroller = useRef<any>(null);
|
||||
const inputListRef = useRef<any>(null);
|
||||
const paramsRef = useRef<any>(null);
|
||||
const messageListLengthCache = useRef<number>(0);
|
||||
const requestToken = useRef<any>(null);
|
||||
const [fileList, setFileList] = useState<
|
||||
{ text: string; name: string; uid: number | string }[]
|
||||
>([]);
|
||||
|
||||
const [textList, setTextList] = useState<
|
||||
{ text: string; uid: number | string; name: string }[]
|
||||
>([
|
||||
{
|
||||
text: '',
|
||||
uid: -1,
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '',
|
||||
uid: -2,
|
||||
name: ''
|
||||
}
|
||||
]);
|
||||
|
||||
const [scatterData, setScatterData] = useState<any[]>([]);
|
||||
|
||||
const { initialize, updateScrollerPosition } = useOverlayScroller();
|
||||
const {
|
||||
initialize: innitializeParams,
|
||||
updateScrollerPosition: updateDocumentScrollerPosition
|
||||
} = useOverlayScroller();
|
||||
|
||||
useImperativeHandle(ref, () => {
|
||||
return {
|
||||
viewCode() {
|
||||
setShow(true);
|
||||
},
|
||||
setCollapse() {
|
||||
setCollapse(!collapse);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const inputEmpty = useMemo(() => {
|
||||
const list = [...textList, ...fileList].filter((item) => item.text);
|
||||
return list.length < 2;
|
||||
}, [textList, fileList]);
|
||||
|
||||
const generateEmbedding = (embeddings: any[]) => {
|
||||
try {
|
||||
const umap = new UMAP({
|
||||
// random() {
|
||||
// return 0.1;
|
||||
// },
|
||||
// minDist: 0.1,
|
||||
nComponents: 2,
|
||||
nNeighbors: 1
|
||||
});
|
||||
|
||||
const dataList = embeddings.map((item) => {
|
||||
return item.embedding;
|
||||
});
|
||||
|
||||
const embedding = umap.fit([...dataList, ...dataList]);
|
||||
|
||||
const list = embedding.map((item: number[], index: number) => {
|
||||
return {
|
||||
value: item,
|
||||
name: index + 1,
|
||||
text: `test test test test test`
|
||||
};
|
||||
});
|
||||
setScatterData(list);
|
||||
} catch (e) {
|
||||
// console.log('error:', e);
|
||||
}
|
||||
};
|
||||
|
||||
const setMessageId = () => {
|
||||
messageId.current = messageId.current + 1;
|
||||
};
|
||||
|
||||
const handleStopConversation = () => {
|
||||
requestToken.current?.cancel?.();
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const submitMessage = async (current?: { role: string; content: string }) => {
|
||||
if (!parameters.model) return;
|
||||
try {
|
||||
setLoading(true);
|
||||
setMessageId();
|
||||
setTokenResult(null);
|
||||
|
||||
requestToken.current?.cancel?.();
|
||||
requestToken.current = requestSource();
|
||||
|
||||
contentRef.current = current?.content || '';
|
||||
|
||||
const result: any = await handleEmbedding(
|
||||
{
|
||||
model: parameters.model,
|
||||
input: [
|
||||
...textList.map((item) => item.text),
|
||||
...fileList.map((item) => item.text)
|
||||
]
|
||||
},
|
||||
{
|
||||
token: requestToken.current.token
|
||||
}
|
||||
);
|
||||
console.log('result:', result);
|
||||
|
||||
setTokenResult(result.usage);
|
||||
|
||||
const embeddingsList = result.data || [];
|
||||
|
||||
console.log('embeddings:', embeddingsList);
|
||||
|
||||
generateEmbedding(embeddingsList);
|
||||
} catch (error: any) {
|
||||
console.log('error========', error);
|
||||
setTokenResult({
|
||||
error: true,
|
||||
errorMessage: error.response?.data?.error?.message
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
const handleClear = () => {
|
||||
if (!messageList.length) {
|
||||
return;
|
||||
}
|
||||
setMessageId();
|
||||
setScatterData([]);
|
||||
setTokenResult(null);
|
||||
};
|
||||
|
||||
const handleSendMessage = () => {
|
||||
submitMessage();
|
||||
};
|
||||
|
||||
const handleCloseViewCode = () => {
|
||||
setShow(false);
|
||||
};
|
||||
|
||||
const handleUpdateFileList = (
|
||||
files: { text: string; name: string; uid: number | string }[]
|
||||
) => {
|
||||
console.log('files:', files);
|
||||
setFileList((preList) => {
|
||||
return [...preList, ...files];
|
||||
});
|
||||
};
|
||||
|
||||
const handleDeleteFile = (uid: number | string) => {
|
||||
setFileList((preList) => {
|
||||
return preList.filter((item) => item.uid !== uid);
|
||||
});
|
||||
};
|
||||
const handleAddText = () => {
|
||||
inputListRef.current?.handleAdd();
|
||||
};
|
||||
|
||||
const handleTextListChange = (
|
||||
list: { text: string; uid: number | string; name: string }[]
|
||||
) => {
|
||||
setTextList(list);
|
||||
};
|
||||
|
||||
const handleClearDocuments = () => {
|
||||
setTextList([
|
||||
{
|
||||
text: '',
|
||||
uid: -1,
|
||||
name: ''
|
||||
},
|
||||
{
|
||||
text: '',
|
||||
uid: -2,
|
||||
name: ''
|
||||
}
|
||||
]);
|
||||
setFileList([]);
|
||||
setScatterData([]);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setMessageId();
|
||||
setScatterData([]);
|
||||
setTokenResult(null);
|
||||
}, [parameters.model]);
|
||||
|
||||
useEffect(() => {
|
||||
if (scroller.current) {
|
||||
initialize(scroller.current);
|
||||
}
|
||||
}, [scroller.current, initialize]);
|
||||
|
||||
useEffect(() => {
|
||||
if (paramsRef.current) {
|
||||
innitializeParams(paramsRef.current);
|
||||
}
|
||||
}, [paramsRef.current, innitializeParams]);
|
||||
|
||||
useEffect(() => {
|
||||
updateScrollerPosition();
|
||||
}, [messageList]);
|
||||
|
||||
useEffect(() => {
|
||||
if (textList.length + fileList.length > messageListLengthCache.current) {
|
||||
updateDocumentScrollerPosition();
|
||||
}
|
||||
messageListLengthCache.current = textList.length + fileList.length;
|
||||
}, [textList.length, fileList.length]);
|
||||
|
||||
return (
|
||||
<div className="ground-left-wrapper rerank">
|
||||
<div className="ground-left" style={{ justifyContent: 'flex-start' }}>
|
||||
<div
|
||||
className="center"
|
||||
ref={scroller}
|
||||
style={{ height: 'auto', maxHeight: '100%' }}
|
||||
>
|
||||
<div className="documents">
|
||||
<div className="flex-between m-b-8 doc-header">
|
||||
<h3 className="m-l-10 flex-between flex-center font-size-14 line-24 m-b-0">
|
||||
<span>Documents</span>
|
||||
</h3>
|
||||
<div className="flex gap-10">
|
||||
<UploadFile
|
||||
handleUpdateFileList={handleUpdateFileList}
|
||||
accept={acceptType}
|
||||
>
|
||||
<Tooltip title={<span>Support: {acceptType}</span>}>
|
||||
<Button
|
||||
size="middle"
|
||||
icon={<UploadOutlined></UploadOutlined>}
|
||||
>
|
||||
Upload File
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</UploadFile>
|
||||
<Button size="middle" onClick={handleAddText}>
|
||||
<PlusOutlined />
|
||||
Add Text
|
||||
</Button>
|
||||
<Button
|
||||
icon={<ClearOutlined />}
|
||||
size="middle"
|
||||
onClick={handleClearDocuments}
|
||||
>
|
||||
{intl.formatMessage({ id: 'common.button.clear' })}
|
||||
</Button>
|
||||
<Button
|
||||
size="middle"
|
||||
type="primary"
|
||||
disabled={inputEmpty}
|
||||
onClick={handleSendMessage}
|
||||
>
|
||||
{loading ? <LoadingOutlined /> : <ThunderboltOutlined />}
|
||||
{intl.formatMessage({ id: 'common.button.run' })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="docs-wrapper">
|
||||
<InputList
|
||||
ref={inputListRef}
|
||||
textList={textList}
|
||||
onChange={handleTextListChange}
|
||||
></InputList>
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<FileList
|
||||
fileList={fileList}
|
||||
textListCount={textList.length || 0}
|
||||
onDelete={handleDeleteFile}
|
||||
></FileList>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className="ground-left-footer"
|
||||
style={{
|
||||
width: '100%',
|
||||
padding: '0 32px 16px'
|
||||
}}
|
||||
>
|
||||
<h3 className="m-l-10 flex-between flex-center font-size-14 line-24 m-b-16">
|
||||
<span>Output</span>
|
||||
</h3>
|
||||
<div
|
||||
style={{
|
||||
border: '1px solid var(--ant-color-border)',
|
||||
borderRadius: 'var(--border-radius-base)',
|
||||
overflow: 'hidden',
|
||||
width: '100%'
|
||||
}}
|
||||
className="scatter"
|
||||
>
|
||||
<ScatterChart
|
||||
seriesData={scatterData}
|
||||
height={160}
|
||||
width="100%"
|
||||
xAxisData={[]}
|
||||
></ScatterChart>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className={classNames('params-wrapper', {
|
||||
collapsed: collapse
|
||||
})}
|
||||
ref={paramsRef}
|
||||
>
|
||||
<div className="box">
|
||||
<RerankerParams
|
||||
setParams={setParams}
|
||||
paramsConfig={paramsConfig}
|
||||
initialValues={initialValues}
|
||||
params={parameters}
|
||||
selectedModel={selectModel}
|
||||
modelList={modelList}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ViewCodeModal
|
||||
open={show}
|
||||
apiType="embedding"
|
||||
payLoad={{
|
||||
input: [
|
||||
...textList.map((item) => item.text),
|
||||
...fileList.map((item) => item.text)
|
||||
].filter((text) => text)
|
||||
}}
|
||||
parameters={{
|
||||
...parameters
|
||||
}}
|
||||
onCancel={handleCloseViewCode}
|
||||
title={intl.formatMessage({ id: 'playground.viewcode' })}
|
||||
></ViewCodeModal>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export default memo(GroundReranker);
|
||||
Reference in New Issue
Block a user