feat: multimodal support (image) (#27793)
Co-authored-by: zxhlyh <jasonapring2015@outlook.com> Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This commit is contained in:
Wu Tianwei
@@ -0,0 +1,64 @@
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useUpload } from '../hooks/use-upload'
|
||||
import { ACCEPT_TYPES } from '../constants'
|
||||
import { useFileStoreWithSelector } from '../store'
|
||||
import { RiImageAddLine } from '@remixicon/react'
|
||||
import Tooltip from '@/app/components/base/tooltip'
|
||||
|
||||
const ImageUploader = () => {
|
||||
const { t } = useTranslation()
|
||||
const files = useFileStoreWithSelector(s => s.files)
|
||||
|
||||
const {
|
||||
fileUploadConfig,
|
||||
uploaderRef,
|
||||
fileChangeHandle,
|
||||
selectHandle,
|
||||
} = useUpload()
|
||||
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
ref={uploaderRef}
|
||||
id='fileUploader'
|
||||
className='hidden'
|
||||
type='file'
|
||||
multiple
|
||||
accept={ACCEPT_TYPES.map(ext => `.${ext}`).join(',')}
|
||||
onChange={fileChangeHandle}
|
||||
/>
|
||||
<div className='flex flex-wrap gap-1'>
|
||||
<Tooltip
|
||||
popupContent={t('datasetHitTesting.imageUploader.tooltip', {
|
||||
size: fileUploadConfig.imageFileSizeLimit,
|
||||
batchCount: fileUploadConfig.imageFileBatchLimit,
|
||||
})}
|
||||
popupClassName='system-xs-medium p-1.5 rounded-lg text-text-secondary'
|
||||
position='top'
|
||||
offset={4}
|
||||
disabled={files.length === 0}
|
||||
>
|
||||
<div
|
||||
className='group flex cursor-pointer items-center gap-x-2'
|
||||
onClick={selectHandle}
|
||||
>
|
||||
<div className='flex size-8 items-center justify-center rounded-lg border-[1px] border-dashed border-components-dropzone-border bg-components-button-tertiary-bg group-hover:bg-components-button-tertiary-bg-hover'>
|
||||
<RiImageAddLine className='size-4 text-text-tertiary' />
|
||||
</div>
|
||||
{files.length === 0 && (
|
||||
<span className='system-sm-regular text-text-quaternary group-hover:text-text-tertiary'>
|
||||
{t('datasetHitTesting.imageUploader.tip', {
|
||||
size: fileUploadConfig.imageFileSizeLimit,
|
||||
batchCount: fileUploadConfig.imageFileBatchLimit,
|
||||
})}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(ImageUploader)
|
||||
@@ -0,0 +1,95 @@
|
||||
import {
|
||||
memo,
|
||||
useCallback,
|
||||
} from 'react'
|
||||
import {
|
||||
RiCloseLine,
|
||||
} from '@remixicon/react'
|
||||
import FileImageRender from '@/app/components/base/file-uploader/file-image-render'
|
||||
import type { FileEntity } from '../types'
|
||||
import ProgressCircle from '@/app/components/base/progress-bar/progress-circle'
|
||||
import { ReplayLine } from '@/app/components/base/icons/src/vender/other'
|
||||
import { fileIsUploaded } from '../utils'
|
||||
import Button from '@/app/components/base/button'
|
||||
|
||||
type ImageItemProps = {
|
||||
file: FileEntity
|
||||
showDeleteAction?: boolean
|
||||
onRemove?: (fileId: string) => void
|
||||
onReUpload?: (fileId: string) => void
|
||||
onPreview?: (fileId: string) => void
|
||||
}
|
||||
const ImageItem = ({
|
||||
file,
|
||||
showDeleteAction,
|
||||
onRemove,
|
||||
onReUpload,
|
||||
onPreview,
|
||||
}: ImageItemProps) => {
|
||||
const { id, progress, base64Url, sourceUrl } = file
|
||||
|
||||
const handlePreview = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
onPreview?.(id)
|
||||
}, [onPreview, id])
|
||||
|
||||
const handleRemove = useCallback((e: React.MouseEvent<HTMLButtonElement>) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
onRemove?.(id)
|
||||
}, [onRemove, id])
|
||||
|
||||
const handleReUpload = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
|
||||
e.stopPropagation()
|
||||
e.preventDefault()
|
||||
onReUpload?.(id)
|
||||
}, [onReUpload, id])
|
||||
|
||||
return (
|
||||
<div
|
||||
className='group/file-image relative cursor-pointer'
|
||||
onClick={handlePreview}
|
||||
>
|
||||
{
|
||||
showDeleteAction && (
|
||||
<Button
|
||||
className='absolute -right-1.5 -top-1.5 z-[11] hidden h-5 w-5 rounded-full p-0 group-hover/file-image:flex'
|
||||
onClick={handleRemove}
|
||||
>
|
||||
<RiCloseLine className='h-4 w-4 text-components-button-secondary-text' />
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
<FileImageRender
|
||||
className='size-20 shadow-md'
|
||||
imageUrl={base64Url || sourceUrl || ''}
|
||||
/>
|
||||
{
|
||||
progress >= 0 && !fileIsUploaded(file) && (
|
||||
<div className='absolute inset-0 z-10 flex items-center justify-center border-[2px] border-effects-image-frame bg-background-overlay-alt'>
|
||||
<ProgressCircle
|
||||
percentage={progress}
|
||||
size={12}
|
||||
circleStrokeColor='stroke-components-progress-white-border'
|
||||
circleFillColor='fill-transparent'
|
||||
sectorFillColor='fill-components-progress-white-progress'
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
{
|
||||
progress === -1 && (
|
||||
<div
|
||||
className='absolute inset-0 z-10 flex items-center justify-center border-[2px] border-state-destructive-border bg-background-overlay-destructive'
|
||||
onClick={handleReUpload}
|
||||
>
|
||||
<ReplayLine className='size-5 text-text-primary-on-surface' />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default memo(ImageItem)
|
||||
@@ -0,0 +1,131 @@
|
||||
import {
|
||||
useCallback,
|
||||
useState,
|
||||
} from 'react'
|
||||
import {
|
||||
FileContextProvider,
|
||||
} from '../store'
|
||||
import type { FileEntity } from '../types'
|
||||
import { useUpload } from '../hooks/use-upload'
|
||||
import ImageInput from './image-input'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { useFileStoreWithSelector } from '../store'
|
||||
import ImageItem from './image-item'
|
||||
import type { ImageInfo } from '@/app/components/datasets/common/image-previewer'
|
||||
import ImagePreviewer from '@/app/components/datasets/common/image-previewer'
|
||||
|
||||
type ImageUploaderInRetrievalTestingProps = {
|
||||
textArea: React.ReactNode
|
||||
actionButton: React.ReactNode
|
||||
showUploader?: boolean
|
||||
className?: string
|
||||
actionAreaClassName?: string
|
||||
}
|
||||
const ImageUploaderInRetrievalTesting = ({
|
||||
textArea,
|
||||
actionButton,
|
||||
showUploader = true,
|
||||
className,
|
||||
actionAreaClassName,
|
||||
}: ImageUploaderInRetrievalTestingProps) => {
|
||||
const { t } = useTranslation()
|
||||
const files = useFileStoreWithSelector(s => s.files)
|
||||
const [previewIndex, setPreviewIndex] = useState(0)
|
||||
const [previewImages, setPreviewImages] = useState<ImageInfo[]>([])
|
||||
const {
|
||||
dragging,
|
||||
dragRef,
|
||||
dropRef,
|
||||
handleRemoveFile,
|
||||
handleReUploadFile,
|
||||
} = useUpload()
|
||||
|
||||
const handleImagePreview = useCallback((fileId: string) => {
|
||||
const index = files.findIndex(item => item.id === fileId)
|
||||
if (index === -1) return
|
||||
setPreviewIndex(index)
|
||||
setPreviewImages(files.map(item => ({
|
||||
url: item.base64Url || item.sourceUrl || '',
|
||||
name: item.name,
|
||||
size: item.size,
|
||||
})))
|
||||
}, [files])
|
||||
|
||||
const handleClosePreview = useCallback(() => {
|
||||
setPreviewImages([])
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={dropRef}
|
||||
className={cn('relative flex w-full flex-col', className)}
|
||||
>
|
||||
{dragging && (
|
||||
<div
|
||||
className='absolute inset-0.5 z-10 flex items-center justify-center rounded-lg border-[1.5px] border-dashed border-components-dropzone-border-accent bg-components-dropzone-bg-accent'
|
||||
>
|
||||
<div>{t('datasetHitTesting.imageUploader.dropZoneTip')}</div>
|
||||
<div ref={dragRef} className='absolute inset-0' />
|
||||
</div>
|
||||
)}
|
||||
{textArea}
|
||||
{
|
||||
showUploader && !!files.length && (
|
||||
<div className='flex flex-wrap gap-1 bg-background-default px-4 py-2'>
|
||||
{
|
||||
files.map(file => (
|
||||
<ImageItem
|
||||
key={file.id}
|
||||
file={file}
|
||||
showDeleteAction
|
||||
onRemove={handleRemoveFile}
|
||||
onReUpload={handleReUploadFile}
|
||||
onPreview={handleImagePreview}
|
||||
/>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
<div
|
||||
className={cn(
|
||||
'flex',
|
||||
showUploader ? 'justify-between' : 'justify-end',
|
||||
actionAreaClassName,
|
||||
)}>
|
||||
{showUploader && <ImageInput />}
|
||||
{actionButton}
|
||||
</div>
|
||||
{previewImages.length > 0 && (
|
||||
<ImagePreviewer
|
||||
images={previewImages}
|
||||
initialIndex={previewIndex}
|
||||
onClose={handleClosePreview}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export type ImageUploaderInRetrievalTestingWrapperProps = {
|
||||
value?: FileEntity[]
|
||||
onChange: (files: FileEntity[]) => void
|
||||
} & ImageUploaderInRetrievalTestingProps
|
||||
|
||||
const ImageUploaderInRetrievalTestingWrapper = ({
|
||||
value,
|
||||
onChange,
|
||||
...props
|
||||
}: ImageUploaderInRetrievalTestingWrapperProps) => {
|
||||
return (
|
||||
<FileContextProvider
|
||||
value={value}
|
||||
onChange={onChange}
|
||||
>
|
||||
<ImageUploaderInRetrievalTesting {...props} />
|
||||
</FileContextProvider>
|
||||
)
|
||||
}
|
||||
|
||||
export default ImageUploaderInRetrievalTestingWrapper
|
||||
Reference in New Issue
Block a user