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

refactor: embeddding input list

Browse Source
This commit is contained in:
jialin
2026-03-17 16:35:55 +08:00
committed by jialin
parent 6e98fb4274
commit e241c6cb6f
11 changed files with 404 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/ground-embedding.tsx
+52 -7
View File
@@ -80,17 +80,19 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
const selectionTextRef = useRef<any>(null);
const [textList, setTextList] = useState<
{ text: string; uid: number | string; name: string }[]
{ text: string; dataUrl?: string; uid: number | string; name: string }[]
>([
{
text: '',
uid: -1,
name: ''
name: '',
dataUrl: ''
},
{
text: '',
uid: -2,
name: ''
name: '',
dataUrl: ''
}
]);
@@ -169,12 +171,14 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
try {
await formRef.current?.form.validateFields();
if (!parameters.model) return;
const validTextList = textList.filter((item) => item.text);
const validTextList = textList.filter(
(item) => item.text || item.dataUrl
);
const validFileList = fileList.filter((item) => item.text);
const inputList = [
...validTextList.map((item) => item.text),
...validFileList.map((item) => item.text)
...validTextList.map((item) => item.text || item.dataUrl || ''),
...validFileList.map((item) => item.text || '')
];
if (inputList.length < 2) {
@@ -280,6 +284,44 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
setTextList(list);
};
const handleOnUploadImage = (
list: { uid: number | string; dataUrl: string }[],
index: number
) => {
// replace the text with dataUrl in the textList
setTextList((preList) => {
const newList = [...preList];
const current = newList[index];
if (current) {
newList[index] = {
...current,
text: '',
uid: list[0].uid,
dataUrl: list[0].dataUrl
};
}
return newList;
});
};
const handleOnDeleteImage = (item: {
text: string;
uid: number | string;
name: string;
dataUrl?: string;
}) => {
// replace the dataUrl with empty text in the textList
setTextList((preList) => {
const newList = [...preList];
const current = newList.find((i) => i.uid === item.uid);
if (current) {
current.text = '';
current.dataUrl = '';
}
return newList;
});
};
const handleonSelect = useCallback(
(data: {
start: number;
@@ -540,6 +582,8 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
onChange={handleTextListChange}
onSelect={handleonSelect}
onPaste={handleOnPaste}
onUploadImage={handleOnUploadImage}
onDeleteImage={handleOnDeleteImage}
></InputList>
{fileList.length > 0 && (
<div style={{ marginTop: 8 }}>
@@ -576,7 +620,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
}}
>
<h3 className="m-l-10 flex-between flex-center font-size-14 line-24 m-b-16">
<div className="flex gap-20">
<div className="flex gap-16">
<span className="flex-center">
{intl.formatMessage({ id: 'playground.embedding.output' })}
<Tooltip
@@ -602,6 +646,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
</span>
<AlertInfo
type="danger"
style={{ marginRight: 16 }}
message={tokenResult?.errorMessage}
></AlertInfo>
</div>
src/pages/playground/components/ground-reranker.tsx
+45 -2
View File
@@ -122,6 +122,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
name: string;
score?: number;
showExtra?: boolean;
dataUrl?: string;
percent?: number;
rank?: number;
}[]
@@ -129,12 +130,14 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
{
text: '',
uid: -1,
name: ''
name: '',
dataUrl: ''
},
{
text: '',
uid: -2,
name: ''
name: '',
dataUrl: ''
}
]);
const [queryValue, setQueryValue] = useState<string>('');
@@ -388,6 +391,44 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
selectionTextRef.current = data;
};
const handleOnUploadImage = (
list: { uid: number | string; dataUrl: string }[],
index: number
) => {
// replace the text with dataUrl in the textList
setTextList((preList) => {
const newList = [...preList];
const current = newList[index];
if (current) {
newList[index] = {
...current,
text: '',
uid: list[0].uid,
dataUrl: list[0].dataUrl
};
}
return newList;
});
};
const handleOnDeleteImage = (item: {
text: string;
uid: number | string;
name: string;
dataUrl?: string;
}) => {
// replace the dataUrl with empty text in the textList
setTextList((preList) => {
const newList = [...preList];
const current = newList.find((i) => i.uid === item.uid);
if (current) {
current.text = '';
current.dataUrl = '';
}
return newList;
});
};
const handleOnPaste = (e: any, index: number) => {
if (!multiplePasteEnable.current) return;
const text = e.clipboardData.getData('text');
@@ -559,7 +600,9 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
onChange={handleTextListChange}
extra={renderPercent}
onSelect={handleonSelect}
onUploadImage={handleOnUploadImage}
onPaste={handleOnPaste}
onDeleteImage={handleOnDeleteImage}
></InputList>
{isEmptyText && (
<div className="m-t-16">
src/pages/playground/components/input-list.tsx
+39 -26
View File
@@ -1,7 +1,5 @@
import RowTextarea from '@/components/seal-form/row-textarea';
import { DeleteOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Tooltip } from 'antd';
import React, { forwardRef, useImperativeHandle, useRef } from 'react';
import '../style/input-list.less';
@@ -14,11 +12,26 @@ interface InputListProps {
text: string;
uid: number | string;
name: string;
dataUrl?: string;
}[];
onChange?: (
textList: { text: string; uid: number | string; name: string }[]
textList: {
text: string;
uid: number | string;
name: string;
dataUrl?: string;
}[]
) => void;
onPaste?: (e: any, index: number) => void;
onDeleteImage?: (dataItem: {
text: string;
uid: number | string;
name: string;
}) => void;
onUploadImage?: (
list: { uid: number | string; dataUrl: string }[],
index: number
) => void;
onSelect?: (data: {
start: number;
end: number;
@@ -30,7 +43,17 @@ interface InputListProps {
const InputList: React.FC<InputListProps> = forwardRef(
(
{ textList, showLabel = true, height, onChange, extra, onPaste, onSelect },
{
textList,
showLabel = true,
height,
onUploadImage,
onDeleteImage,
onChange,
extra,
onPaste,
onSelect
},
ref
) => {
const intl = useIntl();
@@ -53,19 +76,19 @@ const InputList: React.FC<InputListProps> = forwardRef(
onChange?.(dataList);
};
const handleDelete = (text: { text: string; uid: number | string }) => {
const handleDelete = (dataItem: { text: string; uid: number | string }) => {
const dataList = [...textList];
const index = dataList.findIndex((item) => item.uid === text.uid);
const index = dataList.findIndex((item) => item.uid === dataItem.uid);
dataList.splice(index, 1);
onChange?.(dataList);
};
const handleTextChange = (
value: string,
text: { text: string; uid: number | string }
dataItem: { text: string; uid: number | string }
) => {
const dataList = [...textList];
const index = dataList.findIndex((item) => item.uid === text.uid);
const index = dataList.findIndex((item) => item.uid === dataItem.uid);
dataList[index].text = value;
onChange?.(dataList);
};
@@ -79,36 +102,26 @@ const InputList: React.FC<InputListProps> = forwardRef(
return (
<div className="input-list" ref={containerRef}>
{textList.map((text, index) => {
{textList.map((item, index) => {
return (
<div key={text.uid} className="input-item" data-uid={text.uid}>
<div key={item.uid} className="input-item" data-uid={item.uid}>
<div className="input-wrap">
<RowTextarea
height={height}
label={showLabel ? `${index + 1}` : null}
value={text.text}
data={item}
placeholder={intl.formatMessage({
id: 'playground.embedding.inputyourtext'
})}
onChange={(e) => handleTextChange(e.target.value, text)}
onChange={(e) => handleTextChange(e.target.value, item)}
onPaste={(e) => onPaste?.(e, index)}
onSelect={(data) => onSelect?.({ ...data, index })}
onUploadImage={(list) => onUploadImage?.(list, index)}
onDeleteImage={() => onDeleteImage?.(item)}
onDelete={() => handleDelete(item)}
></RowTextarea>
</div>
<span className="btn-group">
<Tooltip
title={intl.formatMessage({ id: 'common.button.delete' })}
>
<Button
danger
size="small"
type="text"
icon={<DeleteOutlined></DeleteOutlined>}
onClick={() => handleDelete(text)}
></Button>
</Tooltip>
</span>
{extra?.(text)}
{extra?.(item)}
</div>
);
})}