mirror of
http://112.124.100.131/huang.ze/ebiz-dify-ai.git
synced 2025-12-22 01:06:52 +08:00
Initial commit
This commit is contained in:
John Wang
174
web/app/components/datasets/hit-testing/index.tsx
Normal file
174
web/app/components/datasets/hit-testing/index.tsx
Normal file
@@ -0,0 +1,174 @@
|
||||
'use client'
|
||||
import React, { useState, FC, useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useSWR from 'swr'
|
||||
import { fetchTestingRecords } from '@/service/datasets'
|
||||
import { omit } from 'lodash-es'
|
||||
import Pagination from '@/app/components/base/pagination'
|
||||
import Modal from '@/app/components/base/modal'
|
||||
import Loading from '@/app/components/base/loading'
|
||||
import type { HitTestingResponse, HitTesting } from '@/models/datasets'
|
||||
import cn from 'classnames'
|
||||
import dayjs from 'dayjs'
|
||||
import SegmentCard from '../documents/detail/completed/SegmentCard'
|
||||
import docStyle from '../documents/detail/completed/style.module.css'
|
||||
import Textarea from './textarea'
|
||||
import s from './style.module.css'
|
||||
import HitDetail from './hit-detail'
|
||||
|
||||
const limit = 10;
|
||||
|
||||
type Props = {
|
||||
datasetId: string
|
||||
}
|
||||
|
||||
const RecordsEmpty: FC = () => {
|
||||
const { t } = useTranslation()
|
||||
return <div className='bg-gray-50 rounded-2xl p-5'>
|
||||
<div className={s.clockWrapper}>
|
||||
<div className={cn(s.clockIcon, 'w-5 h-5')}></div>
|
||||
</div>
|
||||
<div className='my-2 text-gray-500 text-sm'>{t('datasetHitTesting.noRecentTip')}</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
const HitTesting: FC<Props> = ({ datasetId }: Props) => {
|
||||
const { t } = useTranslation()
|
||||
const [hitResult, setHitResult] = useState<HitTestingResponse | undefined>(); // 初始化记录为空数组
|
||||
const [submitLoading, setSubmitLoading] = useState(false);
|
||||
const [currParagraph, setCurrParagraph] = useState<{ paraInfo?: HitTesting; showModal: boolean }>({ showModal: false })
|
||||
const [text, setText] = useState('');
|
||||
|
||||
const [currPage, setCurrPage] = React.useState<number>(0)
|
||||
const { data: recordsRes, error, mutate: recordsMutate } = useSWR({
|
||||
action: 'fetchTestingRecords',
|
||||
datasetId,
|
||||
params: { limit, page: currPage + 1, }
|
||||
}, apiParams => fetchTestingRecords(omit(apiParams, 'action')))
|
||||
|
||||
const total = recordsRes?.total || 0
|
||||
|
||||
const points = useMemo(() => (hitResult?.records.map((v) => [v.tsne_position.x, v.tsne_position.y]) || []), [hitResult?.records])
|
||||
|
||||
const onClickCard = (detail: HitTesting) => {
|
||||
setCurrParagraph({ paraInfo: detail, showModal: true })
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={s.container}>
|
||||
<div className={s.leftDiv}>
|
||||
<div className={s.titleWrapper}>
|
||||
<h1 className={s.title}>{t('datasetHitTesting.title')}</h1>
|
||||
<p className={s.desc}>{t('datasetHitTesting.desc')}</p>
|
||||
</div>
|
||||
<Textarea
|
||||
datasetId={datasetId}
|
||||
setHitResult={setHitResult}
|
||||
onUpdateList={recordsMutate}
|
||||
loading={submitLoading}
|
||||
setLoading={setSubmitLoading}
|
||||
setText={setText}
|
||||
text={text}
|
||||
/>
|
||||
<div className={cn(s.title, 'mt-8 mb-2')}>{t('datasetHitTesting.recents')}</div>
|
||||
{!recordsRes && !error ? (
|
||||
<div className='flex-1'><Loading type='app' /></div>
|
||||
) : recordsRes?.data?.length ? (
|
||||
<>
|
||||
<table className={`w-full border-collapse border-0 mt-3 ${s.table}`}>
|
||||
<thead className="h-8 leading-8 border-b border-gray-200 text-gray-500 font-bold">
|
||||
<tr>
|
||||
<td className='w-28'>{t('datasetHitTesting.table.header.source')}</td>
|
||||
<td>{t('datasetHitTesting.table.header.text')}</td>
|
||||
<td className='w-48'>{t('datasetHitTesting.table.header.time')}</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="text-gray-500">
|
||||
{recordsRes?.data?.map((record) => {
|
||||
return <tr
|
||||
key={record.id}
|
||||
className='group border-b border-gray-200 h-8 hover:bg-gray-50 cursor-pointer'
|
||||
onClick={() => setText(record.content)}
|
||||
>
|
||||
<td className='w-24'>
|
||||
<div className='flex items-center'>
|
||||
<div className={cn(s[`${record.source}_icon`], s.commonIcon, 'mr-1')} />
|
||||
<span className='capitalize'>{record.source.replace('_', ' ')}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td className='max-w-xs group-hover:text-primary-600'>{record.content}</td>
|
||||
<td className='w-36'>
|
||||
{dayjs.unix(record.created_at).format(t('datasetHitTesting.dateTimeFormat') as string)}
|
||||
</td>
|
||||
</tr>
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
{(total && total > limit)
|
||||
? <Pagination current={currPage} onChange={setCurrPage} total={total} limit={limit} />
|
||||
: null}
|
||||
</>
|
||||
) : (
|
||||
<RecordsEmpty />
|
||||
)}
|
||||
</div>
|
||||
<div className={s.rightDiv}>
|
||||
{submitLoading ?
|
||||
<div className={s.cardWrapper}>
|
||||
<SegmentCard
|
||||
loading={true}
|
||||
scene='hitTesting'
|
||||
className='h-[216px]'
|
||||
/>
|
||||
<SegmentCard
|
||||
loading={true}
|
||||
scene='hitTesting'
|
||||
className='h-[216px]'
|
||||
/>
|
||||
</div> : !hitResult?.records.length ? (
|
||||
<div className='h-full flex flex-col justify-center items-center'>
|
||||
<div className={cn(docStyle.commonIcon, docStyle.targetIcon, '!bg-gray-200 !h-14 !w-14')} />
|
||||
<div className='text-gray-300 text-[13px] mt-3'>
|
||||
{t('datasetHitTesting.hit.emptyTip')}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className='text-gray-600 font-semibold mb-4'>{t('datasetHitTesting.hit.title')}</div>
|
||||
<div className='overflow-auto flex-1'>
|
||||
<div className={s.cardWrapper}>
|
||||
{hitResult?.records.map((record) => {
|
||||
return <SegmentCard
|
||||
loading={false}
|
||||
detail={record.segment as any}
|
||||
score={record.score}
|
||||
scene='hitTesting'
|
||||
className='h-[216px] mb-4'
|
||||
onClick={() => onClickCard(record as any)}
|
||||
/>
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<Modal
|
||||
className='!max-w-[960px] !p-0'
|
||||
closable
|
||||
onClose={() => setCurrParagraph({ showModal: false })}
|
||||
isShow={currParagraph.showModal}
|
||||
>
|
||||
{currParagraph.showModal && <HitDetail
|
||||
segInfo={currParagraph.paraInfo?.segment}
|
||||
vectorInfo={{
|
||||
curr: [[currParagraph.paraInfo?.tsne_position?.x || 0, currParagraph.paraInfo?.tsne_position.y || 0]],
|
||||
points,
|
||||
}}
|
||||
/>}
|
||||
</Modal>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HitTesting
|
||||
Reference in New Issue
Block a user