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);
|
||||
@@ -330,7 +330,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
|
||||
|
||||
<ViewCodeModal
|
||||
open={show}
|
||||
messageList={viewCodeMessage}
|
||||
payLoad={{
|
||||
messages: viewCodeMessage
|
||||
}}
|
||||
parameters={parameters}
|
||||
onCancel={handleCloseViewCode}
|
||||
title={intl.formatMessage({ id: 'playground.viewcode' })}
|
||||
|
||||
@@ -15,7 +15,7 @@ import {
|
||||
useState
|
||||
} from 'react';
|
||||
import { rerankerQuery } from '../apis';
|
||||
import { MessageItem } from '../config/types';
|
||||
import { MessageItem, ParamsSchema } from '../config/types';
|
||||
import '../style/ground-left.less';
|
||||
import '../style/rerank.less';
|
||||
import '../style/system-message-wrap.less';
|
||||
@@ -32,6 +32,30 @@ interface MessageProps {
|
||||
ref?: any;
|
||||
}
|
||||
|
||||
const paramsConfig: ParamsSchema[] = [
|
||||
{
|
||||
type: 'InputNumber',
|
||||
name: 'top_n',
|
||||
label: {
|
||||
text: 'Top N',
|
||||
isLocalized: false
|
||||
},
|
||||
attrs: {
|
||||
min: 1
|
||||
},
|
||||
rules: [
|
||||
{
|
||||
required: true,
|
||||
message: 'Top N is required'
|
||||
}
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const initialValues = {
|
||||
top_n: 1
|
||||
};
|
||||
|
||||
const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
|
||||
const { modelList } = props;
|
||||
const acceptType =
|
||||
@@ -145,7 +169,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
|
||||
content: result.results?.map((item: any) => {
|
||||
return {
|
||||
uid: item.index,
|
||||
text: `${item.document?.slice(0, 500) || ''}`,
|
||||
text: `${item.document?.text?.slice(0, 500) || ''}`,
|
||||
docIndex: item.index,
|
||||
title: documentList[item.index]?.name || '',
|
||||
score: item.relevance_score,
|
||||
@@ -287,7 +311,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
|
||||
<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-20">
|
||||
<div className="flex gap-10">
|
||||
{/* <UploadFile
|
||||
handleUpdateFileList={handleUpdateFileList}
|
||||
accept={acceptType}
|
||||
@@ -306,11 +330,12 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
|
||||
Add Text
|
||||
</Button>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ClearOutlined />}
|
||||
size="middle"
|
||||
onClick={handleClearDocuments}
|
||||
></Button>
|
||||
>
|
||||
{intl.formatMessage({ id: 'common.button.clear' })}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="docs-wrapper">
|
||||
@@ -366,6 +391,8 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
|
||||
<RerankerParams
|
||||
setParams={setParams}
|
||||
params={parameters}
|
||||
paramsConfig={paramsConfig}
|
||||
initialValues={initialValues}
|
||||
selectedModel={selectModel}
|
||||
modelList={modelList}
|
||||
/>
|
||||
|
||||
@@ -466,7 +466,9 @@ const ModelItem: React.FC<ModelItemProps> = forwardRef(
|
||||
</div>
|
||||
<ViewCodeModal
|
||||
open={show}
|
||||
messageList={viewCodeMessage}
|
||||
payLoad={{
|
||||
messages: viewCodeMessage
|
||||
}}
|
||||
parameters={params}
|
||||
onCancel={handleCloseViewCode}
|
||||
title={intl.formatMessage({ id: 'playground.viewcode' })}
|
||||
|
||||
@@ -6,6 +6,7 @@ import { useIntl } from '@umijs/max';
|
||||
import { Form, InputNumber, Tooltip } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import { memo, useCallback, useEffect, useId } from 'react';
|
||||
import { ParamsSchema } from '../config/types';
|
||||
import CustomLabelStyles from '../style/custom-label.less';
|
||||
|
||||
type ParamsSettingsFormProps = {
|
||||
@@ -16,26 +17,27 @@ type ParamsSettingsFormProps = {
|
||||
type ParamsSettingsProps = {
|
||||
selectedModel?: string;
|
||||
showModelSelector?: boolean;
|
||||
params?: ParamsSettingsFormProps;
|
||||
params?: Record<string, any>;
|
||||
model?: string;
|
||||
modelList: Global.BaseOption<string>[];
|
||||
onValuesChange?: (changeValues: any, value: Record<string, any>) => void;
|
||||
setParams: (params: any) => void;
|
||||
globalParams?: ParamsSettingsFormProps;
|
||||
globalParams?: Record<string, any>;
|
||||
paramsConfig?: ParamsSchema[];
|
||||
initialValues?: Record<string, any>;
|
||||
};
|
||||
|
||||
const ParamsSettings: React.FC<ParamsSettingsProps> = ({
|
||||
selectedModel,
|
||||
setParams,
|
||||
globalParams,
|
||||
onValuesChange,
|
||||
selectedModel,
|
||||
globalParams,
|
||||
initialValues,
|
||||
paramsConfig,
|
||||
modelList,
|
||||
showModelSelector = true
|
||||
}) => {
|
||||
const intl = useIntl();
|
||||
const initialValues = {
|
||||
top_n: 1
|
||||
};
|
||||
const [form] = Form.useForm();
|
||||
const formId = useId();
|
||||
|
||||
@@ -59,7 +61,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
|
||||
...initialValues
|
||||
});
|
||||
}
|
||||
}, [modelList, showModelSelector, selectedModel]);
|
||||
}, [modelList, showModelSelector, selectedModel, initialValues]);
|
||||
|
||||
const handleOnFinish = (values: any) => {
|
||||
console.log('handleOnFinish', values);
|
||||
@@ -102,6 +104,45 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
|
||||
form.setFieldsValue(globalParams);
|
||||
}, [globalParams]);
|
||||
|
||||
const renderFields = useCallback(() => {
|
||||
console.log('paramsConfig:', paramsConfig);
|
||||
if (!paramsConfig?.length) {
|
||||
return null;
|
||||
}
|
||||
return paramsConfig.map((item: ParamsSchema) => {
|
||||
if (item.type === 'InputNumber') {
|
||||
return (
|
||||
<Form.Item name={item.name} rules={item.rules} key={item.name}>
|
||||
<SealInput.Number
|
||||
{...item.attrs}
|
||||
style={{ width: '100%' }}
|
||||
label={
|
||||
item.label.isLocalized
|
||||
? intl.formatMessage({ id: item.label.text })
|
||||
: item.label.text
|
||||
}
|
||||
></SealInput.Number>
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
if (item.type === 'Select') {
|
||||
return (
|
||||
<Form.Item name={item.name} rules={item.rules} key={item.name}>
|
||||
<SealSelect
|
||||
options={item.options}
|
||||
label={
|
||||
item.label.isLocalized
|
||||
? intl.formatMessage({ id: item.label.text })
|
||||
: item.label.text
|
||||
}
|
||||
></SealSelect>
|
||||
</Form.Item>
|
||||
);
|
||||
}
|
||||
return null;
|
||||
});
|
||||
}, [paramsConfig]);
|
||||
|
||||
const renderLabel = (args: {
|
||||
field: string;
|
||||
label: string;
|
||||
@@ -148,7 +189,9 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
|
||||
<div>
|
||||
{
|
||||
<>
|
||||
<h3 className="m-b-20 m-l-10 font-size-14 line-24">Parameters</h3>
|
||||
<h3 className="m-b-20 m-l-10 font-size-14 line-24">
|
||||
<span>{intl.formatMessage({ id: 'playground.parameters' })}</span>
|
||||
</h3>
|
||||
<Form.Item<ParamsSettingsFormProps>
|
||||
name="model"
|
||||
rules={[
|
||||
@@ -171,16 +214,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = ({
|
||||
</Form.Item>
|
||||
</>
|
||||
}
|
||||
<Form.Item<ParamsSettingsFormProps>
|
||||
name="top_n"
|
||||
rules={[{ required: true }]}
|
||||
>
|
||||
<SealInput.Number
|
||||
style={{ width: '100%' }}
|
||||
label="Top N"
|
||||
min={1}
|
||||
></SealInput.Number>
|
||||
</Form.Item>
|
||||
{renderFields()}
|
||||
</div>
|
||||
</Form>
|
||||
);
|
||||
|
||||
@@ -56,39 +56,19 @@ const UploadImg: React.FC<UploadImgProps> = ({
|
||||
const newFileList = await Promise.all(
|
||||
fileList.map(async (item: UploadFile) => {
|
||||
if (wordReg.test(item.name)) {
|
||||
const context = await readWordContent(
|
||||
item.originFileObj as RcFile
|
||||
);
|
||||
|
||||
item.url = context;
|
||||
item.url = await readWordContent(item.originFileObj as RcFile);
|
||||
} else if (excelReg.test(item.name)) {
|
||||
const context = await readExcelContent(
|
||||
item.originFileObj as RcFile
|
||||
);
|
||||
item.url = context;
|
||||
item.url = await readExcelContent(item.originFileObj as RcFile);
|
||||
} else if (epubReg.test(item.name)) {
|
||||
const context = await readEpubContent(
|
||||
item.originFileObj as RcFile
|
||||
);
|
||||
item.url = context;
|
||||
item.url = await readEpubContent(item.originFileObj as RcFile);
|
||||
} else if (pdfReg.test(item.name)) {
|
||||
const context = await readPDFContent(
|
||||
item.originFileObj as RcFile
|
||||
);
|
||||
item.url = context;
|
||||
item.url = await readPDFContent(item.originFileObj as RcFile);
|
||||
} else if (pptReg.test(item.name)) {
|
||||
const context = await readPptxContent(
|
||||
item.originFileObj as RcFile
|
||||
);
|
||||
item.url = context;
|
||||
item.url = await readPptxContent(item.originFileObj as RcFile);
|
||||
} else if (htmlReg.test(item.name)) {
|
||||
const context = await readHtmlContent(
|
||||
item.originFileObj as RcFile
|
||||
);
|
||||
item.url = context;
|
||||
item.url = await readHtmlContent(item.originFileObj as RcFile);
|
||||
} else {
|
||||
const context = await readBlob(item.originFileObj as RcFile);
|
||||
item.url = context;
|
||||
item.url = await readBlob(item.originFileObj as RcFile);
|
||||
}
|
||||
return item;
|
||||
})
|
||||
|
||||
@@ -8,7 +8,8 @@ import React, { useMemo, useState } from 'react';
|
||||
|
||||
type ViewModalProps = {
|
||||
systemMessage?: string;
|
||||
messageList: any[];
|
||||
messageList?: any[];
|
||||
payLoad: Record<string, any>;
|
||||
parameters: any;
|
||||
title: string;
|
||||
open: boolean;
|
||||
@@ -34,6 +35,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
|
||||
open,
|
||||
onCancel,
|
||||
messageList,
|
||||
payLoad,
|
||||
parameters = {},
|
||||
apiType = 'chat'
|
||||
} = props || {};
|
||||
@@ -47,13 +49,26 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
|
||||
const logcommand =
|
||||
apiType === 'chat' ? 'choices[0].message.content' : 'data[0].embedding';
|
||||
|
||||
const formatPyParams = (params: any) => {
|
||||
return _.keys(params).reduce((acc: string, key: string) => {
|
||||
if (params[key] === null) {
|
||||
return acc;
|
||||
}
|
||||
const value =
|
||||
typeof params[key] === 'object'
|
||||
? JSON.stringify(params[key], null, 2)
|
||||
: `"${params[key]}"`;
|
||||
return acc + ` ${key}=${value},\n`;
|
||||
}, '');
|
||||
};
|
||||
|
||||
const codeValue = useMemo(() => {
|
||||
if (lang === langMap.shell) {
|
||||
const messages = messageList;
|
||||
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,
|
||||
...(messages.length > 0 ? { messages } : {})
|
||||
...payLoad
|
||||
},
|
||||
null,
|
||||
2
|
||||
@@ -65,7 +80,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,
|
||||
...(messages.length > 0 ? { messages } : {})
|
||||
...payLoad
|
||||
},
|
||||
null,
|
||||
4
|
||||
@@ -87,15 +102,12 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
|
||||
},
|
||||
''
|
||||
);
|
||||
const messages =
|
||||
apiType === 'chat'
|
||||
? `messages=${JSON.stringify(messageList, null, 2)}`
|
||||
: '';
|
||||
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}.create(\n${formattedParams} ${messages})\nprint(response.${logcommand})`;
|
||||
const params = apiType === 'chat' ? 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}.create(\n${formattedParams} ${params})\nprint(response.${logcommand})`;
|
||||
return code;
|
||||
}
|
||||
return '';
|
||||
}, [lang, messageList, parameters]);
|
||||
}, [lang, payLoad, parameters]);
|
||||
|
||||
const handleOnChangeLang = (value: string) => {
|
||||
setLang(value);
|
||||
|
||||
Reference in New Issue
Block a user