diff --git a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx index d1439cd739..14ae8a4f6e 100644 --- a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx +++ b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx @@ -2,11 +2,12 @@ import type { FC } from 'react' import React from 'react' import { useTranslation } from 'react-i18next' +import Image from 'next/image' import RetrievalParamConfig from '../retrieval-param-config' import { OptionCard } from '../../create/step-two/option-card' +import Selection from '../../create/assets/selection-mod.svg' import { RETRIEVE_METHOD } from '@/types/app' import type { RetrievalConfig } from '@/types/app' -import { HighPriority } from '@/app/components/base/icons/src/vender/solid/arrows' type Props = { value: RetrievalConfig @@ -21,7 +22,7 @@ const EconomicalRetrievalMethodConfig: FC = ({ return (
- } + } title={t('dataset.retrieval.invertedIndex.title')} description={t('dataset.retrieval.invertedIndex.description')} isActive> = ({ return (
{supportRetrievalMethods.includes(RETRIEVE_METHOD.semantic) && ( - } + } title={t('dataset.retrieval.semantic_search.title')} description={t('dataset.retrieval.semantic_search.description')} isActive={ @@ -66,6 +69,8 @@ const RetrievalMethodConfig: FC = ({ ...value, search_method: RETRIEVE_METHOD.semantic, })} + effectImg={Effect.src} + activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]' > = ({ )} {supportRetrievalMethods.includes(RETRIEVE_METHOD.semantic) && ( - } + } title={t('dataset.retrieval.full_text_search.title')} description={t('dataset.retrieval.full_text_search.description')} isActive={ @@ -85,6 +90,8 @@ const RetrievalMethodConfig: FC = ({ ...value, search_method: RETRIEVE_METHOD.fullText, })} + effectImg={Effect.src} + activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]' > = ({ )} {supportRetrievalMethods.includes(RETRIEVE_METHOD.semantic) && ( - } + } title={
{t('dataset.retrieval.hybrid_search.title')}
@@ -109,6 +116,8 @@ const RetrievalMethodConfig: FC = ({ search_method: RETRIEVE_METHOD.hybrid, reranking_enable: true, })} + effectImg={Effect.src} + activeHeaderClassName='bg-gradient-to-r from-[#F0EEFA] to-[#F9FAFB]' > = ({ key={option.value} isChosen={value.reranking_mode === option.value} onChosen={() => handleChangeRerankMode(option.value)} - icon={
} + icon={} title={option.label} description={option.tips} className='flex-1' diff --git a/web/app/components/datasets/create/assets/file-list-3-fill.svg b/web/app/components/datasets/create/assets/file-list-3-fill.svg new file mode 100644 index 0000000000..a4e6c4da97 --- /dev/null +++ b/web/app/components/datasets/create/assets/file-list-3-fill.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/app/components/datasets/create/assets/note-mod.svg b/web/app/components/datasets/create/assets/note-mod.svg new file mode 100644 index 0000000000..b9e81f6bd5 --- /dev/null +++ b/web/app/components/datasets/create/assets/note-mod.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/web/app/components/datasets/create/assets/option-card-effect-blue.svg b/web/app/components/datasets/create/assets/option-card-effect-blue.svg new file mode 100644 index 0000000000..00a8afad8b --- /dev/null +++ b/web/app/components/datasets/create/assets/option-card-effect-blue.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/app/components/datasets/create/assets/option-card-effect-orange.svg b/web/app/components/datasets/create/assets/option-card-effect-orange.svg new file mode 100644 index 0000000000..d833764f0c --- /dev/null +++ b/web/app/components/datasets/create/assets/option-card-effect-orange.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/app/components/datasets/create/assets/option-card-effect-purple.svg b/web/app/components/datasets/create/assets/option-card-effect-purple.svg new file mode 100644 index 0000000000..a7857f8e57 --- /dev/null +++ b/web/app/components/datasets/create/assets/option-card-effect-purple.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/app/components/datasets/create/assets/progress-indicator.svg b/web/app/components/datasets/create/assets/progress-indicator.svg new file mode 100644 index 0000000000..3c99713636 --- /dev/null +++ b/web/app/components/datasets/create/assets/progress-indicator.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/web/app/components/datasets/create/assets/rerank.svg b/web/app/components/datasets/create/assets/rerank.svg new file mode 100644 index 0000000000..409b52e6e2 --- /dev/null +++ b/web/app/components/datasets/create/assets/rerank.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/web/app/components/datasets/create/index.tsx b/web/app/components/datasets/create/index.tsx index e742abb1a7..943e32deb1 100644 --- a/web/app/components/datasets/create/index.tsx +++ b/web/app/components/datasets/create/index.tsx @@ -117,7 +117,7 @@ const DatasetUpdateForm = ({ datasetId }: DatasetUpdateFormProps) => { return return ( -
+
= (props) => { + return +} + +const FormField: FC> = (props) => { + return
+ {props.label} + {props.children} +
+} type ValueOf = T[keyof T] type StepTwoProps = { @@ -579,26 +593,6 @@ const StepTwo = ({ } }, [segmentationType, indexType]) - const Label: FC = (props) => { - return - } - - const FormItem: FC> = (props) => { - return
- - {props.children} -
- } - - const CheckboxWithLabel: FC & { - label: string - }>> = (props) => { - return
- - -
- } - const [retrievalConfig, setRetrievalConfig] = useState(currentDataset?.retrieval_model_dict || { search_method: RETRIEVE_METHOD.semantic, reranking_enable: false, @@ -637,14 +631,14 @@ const StepTwo = ({ } - activeHeaderClassName='bg-gradient-to-r from-blue-50/40 to-[#ffffff]' + activeHeaderClassName='bg-gradient-to-r from-[#EFF0F9] to-[#F9FAFB]' description={'General text chunking mode, the chunks retrieved and recalled are the same.'} isActive={SegmentType.AUTO === segmentationType} onClick={() => setSegmentationType(SegmentType.AUTO)} actions={ <> @@ -653,7 +647,7 @@ const StepTwo = ({ >
- + {t('datasetCreation.stepTwo.separator')} setSegmentIdentifier(e.target.value)} /> - - + + {t('datasetCreation.stepTwo.maxLength')}
}> setMax(parseInt(e.target.value.replace(/^0+/, ''), 10))} /> - - + + {t('datasetCreation.stepTwo.overlap')} setOverlap(parseInt(e.target.value.replace(/^0+/, ''), 10))} /> - +
- + {t('datasetCreation.stepTwo.rules')}
{rules.map(rule => (
{ @@ -723,16 +717,76 @@ const StepTwo = ({ } + effectImg={OrangeEffect.src} + activeHeaderClassName='bg-gradient-to-r from-[#F9F1EE] to-[#F9FAFB]' description={'When using the parent-child mode, the child-chunk is used for retrieval and the parent-chunk is used for recall as context.'} isActive={SegmentType.CUSTOM === segmentationType} onClick={() => setSegmentationType(SegmentType.CUSTOM)} + actions={ + <> + + + + } >
- + + Parent-chunk for Context + + } + title={'Paragraph'} + description={'This mode splits the text in to paragraphs based on delimiters and the maximum chunk length, using the split text as the parent chunk for retrieval.'} + isChosen={true} + chosenConfig={ +
+ + setSegmentIdentifier(e.target.value)} /> + + + setSegmentIdentifier(e.target.value)} /> + +
+ } + /> + } + title={'Full Doc'} + description={'The entire document is used as the parent chunk and retrieved directly. Please note that for performance reasons, text exceeding 10000 tokens will be automatically truncated.'} + isChosen={true} + /> + + + Child-chunk for Retrieval + +
+ + setSegmentIdentifier(e.target.value)} /> + + + setSegmentIdentifier(e.target.value)} /> + +
+ + + Text Pre-processing Rules + +
+ {rules.map(rule => ( +
{ + ruleChangeHandle(rule.id) + }}> + + +
+ ))} +
@@ -755,7 +809,9 @@ const StepTwo = ({ setIndexType(IndexingType.QUALIFIED) }} > - +
+ Gold Icon +
{!hasSetIndexType && }
@@ -784,7 +840,9 @@ const StepTwo = ({ )} onClick={changeToEconomicalType} > - +
+ Economical Icon +
{!hasSetIndexType && }
{t('datasetCreation.stepTwo.economical')}
@@ -799,35 +857,6 @@ const StepTwo = ({ {t('datasetCreation.stepTwo.datasetSettingLink')}
)} - {IS_CE_EDITION && indexType === IndexingType.QUALIFIED && ( -
-
-
- -
-
-
{t('datasetCreation.stepTwo.QATitle')}
-
- {t('datasetCreation.stepTwo.QALanguage')} - -
-
-
- -
-
- {docForm === DocForm.QA && !QATipHide && ( -
- {t('datasetCreation.stepTwo.QATip')} - setQATipHide(true)} /> -
- )} -
- )} {/* Embedding model */} {indexType === IndexingType.QUALIFIED && (
diff --git a/web/app/components/datasets/create/step-two/option-card.tsx b/web/app/components/datasets/create/step-two/option-card.tsx index 7c822fdfc1..cd0129e9f0 100644 --- a/web/app/components/datasets/create/step-two/option-card.tsx +++ b/web/app/components/datasets/create/step-two/option-card.tsx @@ -1,10 +1,11 @@ import { type ComponentProps, type FC, type ReactNode } from 'react' import Image from 'next/image' import piggyBank from '../assets/piggy-bank-01.svg' +import Effect from '../assets/option-card-effect-blue.svg' import classNames from '@/utils/classnames' -const TriangleArrow = () => ( - +const TriangleArrow: FC> = props => ( + ) @@ -15,18 +16,25 @@ type OptionCardHeaderProps = { description: string isActive?: boolean activeClassName?: string + effectImg?: string } export const OptionCardHeader: FC = (props) => { - const { icon, title, description, isActive, activeClassName } = props + const { icon, title, description, isActive, activeClassName, effectImg } = props return
-
- {icon || {description}} +
+ {isActive && } +
+ {icon || {description}} +
-
+ +
{title}
{description}
@@ -41,10 +49,11 @@ type OptionCardProps = { description: string isActive?: boolean actions?: ReactNode + effectImg?: string } & Omit, 'title'> export const OptionCard: FC = (props) => { - const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, ...rest } = props + const { icon, className, title, description, isActive, children, actions, activeHeaderClassName, style, effectImg, ...rest } = props return
= (props) => { description={description} isActive={isActive} activeClassName={activeHeaderClassName} + effectImg={effectImg} /> {/** Body */} {isActive &&
{children} diff --git a/web/app/dev-preview/page.tsx b/web/app/dev-preview/page.tsx new file mode 100644 index 0000000000..e5529fcc25 --- /dev/null +++ b/web/app/dev-preview/page.tsx @@ -0,0 +1,25 @@ +'use client' + +import Input from '../components/base/input' +import { OptionCard } from '../components/datasets/create/step-two/option-card' + +export default function Page() { + return
+ +

+ Lorem ipsum +

+ + +
+}