youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-03 00:48:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update dataset creation UI

Browse Source
This commit is contained in:
nite-knite
2024-12-13 14:37:22 +08:00
parent 2fb71dce50
commit 8de12ef1d7
17 changed files with 170 additions and 241 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
web/app/components/datasets/create/embedding-process/index.module.css
View File

@ -14,24 +14,7 @@
border-radius: 6px;
overflow: hidden;
}
.sourceItem.error {
background: #FEE4E2;
}
.sourceItem.success {
background: #D1FADF;
}
.progressbar {
position: absolute;
top: 0;
left: 0;
height: 100%;
background-color: #B2CCFF;
}
.sourceItem .info {
display: flex;
align-items: center;
z-index: 1;
}
.sourceItem .info .name {
font-weight: 500;
font-size: 12px;
@ -55,13 +38,6 @@
color: #05603A;
}
.cost {
@apply flex justify-between items-center text-xs text-gray-700;
}
.embeddingStatus {
@apply flex items-center justify-between text-gray-900 font-medium text-sm mr-2;
}
.commonIcon {
@apply w-3 h-3 mr-1 inline-block align-middle;
}
@ -81,35 +57,33 @@
@apply text-xs font-medium;
}
.fileIcon {
@apply w-4 h-4 mr-1 bg-center bg-no-repeat;
.unknownFileIcon {
background-image: url(../assets/unknown.svg);
background-size: 16px;
}
.fileIcon.csv {
.csv {
background-image: url(../assets/csv.svg);
}
.fileIcon.docx {
.docx {
background-image: url(../assets/docx.svg);
}
.fileIcon.xlsx,
.fileIcon.xls {
.xlsx,
.xls {
background-image: url(../assets/xlsx.svg);
}
.fileIcon.pdf {
.pdf {
background-image: url(../assets/pdf.svg);
}
.fileIcon.html,
.fileIcon.htm {
.html,
.htm {
background-image: url(../assets/html.svg);
}
.fileIcon.md,
.fileIcon.markdown {
.md,
.markdown {
background-image: url(../assets/md.svg);
}
.fileIcon.txt {
.txt {
background-image: url(../assets/txt.svg);
}
.fileIcon.json {
.json {
background-image: url(../assets/json.svg);
}

109
web/app/components/datasets/create/embedding-process/index.tsx
View File

@ -6,13 +6,15 @@ import { useTranslation } from 'react-i18next'
import { omit } from 'lodash-es'
import { ArrowRightIcon } from '@heroicons/react/24/solid'
import {
RiCheckboxCircleFill,
RiErrorWarningFill,
RiLoader2Fill,
RiTerminalBoxLine,
} from '@remixicon/react'
import Image from 'next/image'
import { indexMethodIcon, retrievalIcon } from '../icons'
import s from './index.module.css'
import { IndexingType } from '../step-two'
import DocumentFileIcon from '../../common/document-file-icon'
import cn from '@/utils/classnames'
import { FieldInfo } from '@/app/components/datasets/documents/detail/metadata'
import Button from '@/app/components/base/button'
@ -25,7 +27,6 @@ import { Plan } from '@/app/components/billing/type'
import { ZapFast } from '@/app/components/base/icons/src/vender/solid/general'
import UpgradeBtn from '@/app/components/billing/upgrade-btn'
import { useProviderContext } from '@/context/provider-context'
import Tooltip from '@/app/components/base/tooltip'
import { sleep } from '@/utils'
import { RETRIEVE_METHOD } from '@/types/app'
@ -83,7 +84,7 @@ const RuleDetail: FC<{
return value
}, [sourceData])
return <div className='flex flex-col pt-8 pb-10 first:mt-0'>
return <div className='flex flex-col gap-1'>
{Object.keys(segmentationRuleMap).map((field) => {
return <FieldInfo
key={field}
@ -93,11 +94,12 @@ const RuleDetail: FC<{
})}
<FieldInfo
label={t('datasetCreation.stepTwo.indexMode')}
displayedValue={t(`datasetCreation.stepTwo.${indexingType}`) as string}
displayedValue={t(`datasetCreation.stepTwo.${indexingType === IndexingType.ECONOMICAL ? 'economical' : 'qualified'}`) as string}
valueIcon={
<Image
className='size-4'
src={
indexingType === 'economy'
indexingType === IndexingType.ECONOMICAL
? indexMethodIcon.economical
: indexMethodIcon.high_quality
}
@ -107,15 +109,17 @@ const RuleDetail: FC<{
/>
<FieldInfo
label={t('datasetSettings.form.retrievalSetting.title')}
displayedValue={t(`datasetSettings.form.retrievalSetting.${retrievalMethod}`) as string}
// displayedValue={t(`datasetSettings.form.retrievalSetting.${retrievalMethod}`) as string}
displayedValue={t(`dataset.retrieval.${indexingType === IndexingType.ECONOMICAL ? 'invertedIndex' : retrievalMethod}.title`) as string}
valueIcon={
<Image
className='size-4'
src={
retrievalMethod === RETRIEVE_METHOD.fullText
? retrievalIcon.fullText
: RETRIEVE_METHOD.semantic
? retrievalIcon.vector
: retrievalIcon.hybrid
: retrievalMethod === RETRIEVE_METHOD.hybrid
? retrievalIcon.hybrid
: retrievalIcon.vector
}
alt=''
/>
@ -167,6 +171,7 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
}
useEffect(() => {
setIsStopQuery(false)
startQueryStatus()
return () => {
stopQueryStatus()
@ -225,8 +230,8 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
return (
<>
<div className='h-5 flex items-center mb-5'>
<div className={s.embeddingStatus}>
<div className="h-5 flex items-center mb-3">
<div className="flex items-center justify-between text-gray-900 font-medium text-sm mr-2">
{isEmbedding && <div className='flex items-center'>
<RiLoader2Fill className='size-4 mr-1 animate-spin' />
{t('datasetDocuments.embedding.processing')}
@ -247,68 +252,68 @@ const EmbeddingProcess: FC<Props> = ({ datasetId, batchId, documents = [], index
</div>
)
}
<div className={s.progressContainer}>
<div className="flex flex-col gap-0.5 pb-2">
{indexingStatusBatchDetail.map(indexingStatusDetail => (
<div key={indexingStatusDetail.id} className={cn(
s.sourceItem,
indexingStatusDetail.indexing_status === 'error' && s.error,
indexingStatusDetail.indexing_status === 'completed' && s.success,
'relative h-[26px] bg-components-progress-bar-bg rounded-md overflow-hidden',
indexingStatusDetail.indexing_status === 'error' && 'bg-state-destructive-hover-alt',
// indexingStatusDetail.indexing_status === 'completed' && 's.success',
)}>
{isSourceEmbedding(indexingStatusDetail) && (
<div className={s.progressbar} style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }} />
<div className="absolute top-0 left-0 h-full min-w-0.5 bg-components-progress-bar-progress border-r-[2px] border-r-components-progress-bar-progress-highlight" style={{ width: `${getSourcePercent(indexingStatusDetail)}%` }} />
)}
<div className={`${s.info} grow`}>
<div className="flex gap-1 pl-[6px] pr-2 h-full items-center z-[1]">
{getSourceType(indexingStatusDetail.id) === DataSourceType.FILE && (
<div className={cn(s.fileIcon, s[getFileType(getSourceName(indexingStatusDetail.id))])} />
// <div className={cn(
// 'shrink-0 marker:size-4 bg-center bg-no-repeat bg-contain',
// s[getFileType(getSourceName(indexingStatusDetail.id))] || s.unknownFileIcon,
// )} />
<DocumentFileIcon
className="shrink-0 size-4"
name={getSourceName(indexingStatusDetail.id)}
extension={getFileType(getSourceName(indexingStatusDetail.id))}
/>
)}
{getSourceType(indexingStatusDetail.id) === DataSourceType.NOTION && (
<NotionIcon
className='shrink-0 mr-1'
className='shrink-0'
type='page'
src={getIcon(indexingStatusDetail.id)}
/>
)}
<div className={`${s.name} truncate`} title={getSourceName(indexingStatusDetail.id)}>{getSourceName(indexingStatusDetail.id)}</div>
{
enableBilling && (
<PriorityLabel />
)
}
</div>
<div className='shrink-0'>
{isSourceEmbedding(indexingStatusDetail) && (
<div className={s.percent}>{`${getSourcePercent(indexingStatusDetail)}%`}</div>
)}
{indexingStatusDetail.indexing_status === 'error' && indexingStatusDetail.error && (
<Tooltip
popupContent={(
<div className='max-w-[400px]'>
{indexingStatusDetail.error}
</div>
)}
>
<div className={cn(s.percent, s.error, 'flex items-center')}>
Error
<RiErrorWarningFill className='ml-1 w-4 h-4' />
</div>
</Tooltip>
)}
{indexingStatusDetail.indexing_status === 'error' && !indexingStatusDetail.error && (
<div className={cn(s.percent, s.error, 'flex items-center')}>
Error
<div className="grow flex items-center gap-1" title={getSourceName(indexingStatusDetail.id)}>
<div className="text-xs truncate">
{getSourceName(indexingStatusDetail.id)}
</div>
{
enableBilling && (
<PriorityLabel />
)
}
</div>
{isSourceEmbedding(indexingStatusDetail) && (
<div className="shrink-0 text-xs">{`${getSourcePercent(indexingStatusDetail)}%`}</div>
)}
{indexingStatusDetail.indexing_status === 'error' && (
<>
<span className="flex items-center max-w-[200px] text-xs text-text-destructive truncate" title={indexingStatusDetail.error || ''}>
{indexingStatusDetail.error || 'Error'}
</span>
<RiErrorWarningFill className='shrink-0 size-4 text-text-destructive' />
</>
)}
{indexingStatusDetail.indexing_status === 'completed' && (
<div className={cn(s.percent, s.success)}>100%</div>
<RiCheckboxCircleFill className='shrink-0 size-4' />
)}
</div>
</div>
))}
</div>
<RuleDetail sourceData={ruleDetail} indexingType={
indexingType
}
retrievalMethod={retrievalMethod}
<hr className="my-3 h-[1px] bg-divider-subtle border-0" />
<RuleDetail
sourceData={ruleDetail}
indexingType={indexingType}
retrievalMethod={retrievalMethod}
/>
<div className='flex items-center gap-2 my-10'>
<Button className='w-fit' onClick={navToApiDocs}>