feat: add retriever rank fe (#1557)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
2023-11-18 11:53:35 +08:00
parent e017eff5e4
commit 888e8c6dac
80 changed files with 2757 additions and 467 deletions
--- a/web/app/components/datasets/common/check-rerank-model.ts
+++ b/web/app/components/datasets/common/check-rerank-model.ts
@@ -0,0 +1,50 @@
+import type { BackendModel } from '../../header/account-setting/model-page/declarations'
+import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'
+
+export const isReRankModelSelected = ({
+  rerankDefaultModel,
+  isRerankDefaultModelVaild,
+  retrievalConfig,
+  indexMethod,
+}: {
+  rerankDefaultModel?: BackendModel
+  isRerankDefaultModelVaild: boolean
+  retrievalConfig: RetrievalConfig
+  indexMethod?: string
+}) => {
+  const rerankModel = (retrievalConfig.reranking_model?.reranking_model_name ? retrievalConfig.reranking_model : undefined) || (isRerankDefaultModelVaild ? rerankDefaultModel : undefined)
+  if (
+    indexMethod === 'high_quality'
+    && (retrievalConfig.reranking_enable || retrievalConfig.search_method === RETRIEVE_METHOD.fullText)
+    && !rerankModel
+  )
+    return false
+
+  return true
+}
+
+export const ensureRerankModelSelected = ({
+  rerankDefaultModel,
+  indexMethod,
+  retrievalConfig,
+}: {
+  rerankDefaultModel: BackendModel
+  retrievalConfig: RetrievalConfig
+  indexMethod?: string
+}) => {
+  const rerankModel = retrievalConfig.reranking_model?.reranking_model_name ? retrievalConfig.reranking_model : undefined
+  if (
+    indexMethod === 'high_quality'
+    && (retrievalConfig.reranking_enable || retrievalConfig.search_method === RETRIEVE_METHOD.fullText)
+    && !rerankModel
+  ) {
+    return {
+      ...retrievalConfig,
+      reranking_model: {
+        reranking_provider_name: rerankDefaultModel.model_provider.provider_name,
+        reranking_model_name: rerankDefaultModel.model_name,
+      },
+    }
+  }
+  return retrievalConfig
+}
--- a/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/economical-retrieval-method-config/index.tsx
@@ -0,0 +1,40 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import RetrievalParamConfig from '../retrieval-param-config'
+import { RETRIEVE_METHOD } from '@/types/app'
+import RadioCard from '@/app/components/base/radio-card'
+import { HighPriority } from '@/app/components/base/icons/src/vender/solid/arrows'
+import type { RetrievalConfig } from '@/types/app'
+
+type Props = {
+  value: RetrievalConfig
+  onChange: (value: RetrievalConfig) => void
+}
+
+const EconomicalRetrievalMethodConfig: FC<Props> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+
+  return (
+    <div className='space-y-2'>
+      <RadioCard
+        icon={<HighPriority className='w-4 h-4 text-[#7839EE]' />}
+        title={t('dataset.retrieval.invertedIndex.title')}
+        description={t('dataset.retrieval.invertedIndex.description')}
+        noRadio
+        chosenConfig={
+          <RetrievalParamConfig
+            type={RETRIEVE_METHOD.invertedIndex}
+            value={value}
+            onChange={onChange}
+          />
+        }
+      />
+    </div>
+  )
+}
+export default React.memo(EconomicalRetrievalMethodConfig)
--- a/web/app/components/datasets/common/retrieval-method-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-config/index.tsx
@@ -0,0 +1,91 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import RetrievalParamConfig from '../retrieval-param-config'
+import type { RetrievalConfig } from '@/types/app'
+import { RETRIEVE_METHOD } from '@/types/app'
+import RadioCard from '@/app/components/base/radio-card'
+import { PatternRecognition, Semantic } from '@/app/components/base/icons/src/vender/solid/development'
+import { FileSearch02 } from '@/app/components/base/icons/src/vender/solid/files'
+import { useProviderContext } from '@/context/provider-context'
+
+type Props = {
+  value: RetrievalConfig
+  onChange: (value: RetrievalConfig) => void
+}
+
+const RetrievalMethodConfig: FC<Props> = ({
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const { supportRetrievalMethods } = useProviderContext()
+  return (
+    <div className='space-y-2'>
+      {supportRetrievalMethods.includes(RETRIEVE_METHOD.semantic) && (
+        <RadioCard
+          icon={<Semantic className='w-4 h-4 text-[#7839EE]' />}
+          title={t('dataset.retrieval.semantic_search.title')}
+          description={t('dataset.retrieval.semantic_search.description')}
+          isChosen={value.search_method === RETRIEVE_METHOD.semantic}
+          onChosen={() => onChange({
+            ...value,
+            search_method: RETRIEVE_METHOD.semantic,
+          })}
+          chosenConfig={
+            <RetrievalParamConfig
+              type={RETRIEVE_METHOD.semantic}
+              value={value}
+              onChange={onChange}
+            />
+          }
+        />
+      )}
+      {supportRetrievalMethods.includes(RETRIEVE_METHOD.semantic) && (
+        <RadioCard
+          icon={<FileSearch02 className='w-4 h-4 text-[#7839EE]' />}
+          title={t('dataset.retrieval.full_text_search.title')}
+          description={t('dataset.retrieval.full_text_search.description')}
+          isChosen={value.search_method === RETRIEVE_METHOD.fullText}
+          onChosen={() => onChange({
+            ...value,
+            search_method: RETRIEVE_METHOD.fullText,
+          })}
+          chosenConfig={
+            <RetrievalParamConfig
+              type={RETRIEVE_METHOD.fullText}
+              value={value}
+              onChange={onChange}
+            />
+          }
+        />
+      )}
+      {supportRetrievalMethods.includes(RETRIEVE_METHOD.semantic) && (
+        <RadioCard
+          icon={<PatternRecognition className='w-4 h-4 text-[#7839EE]' />}
+          title={
+            <div className='flex items-center space-x-1'>
+              <div>{t('dataset.retrieval.hybrid_search.title')}</div>
+              <div className='flex h-full items-center px-1.5 rounded-md border border-[#E0EAFF] text-xs font-medium text-[#444CE7]'>{t('dataset.retrieval.hybrid_search.recommend')}</div>
+            </div>
+          }
+          description={t('dataset.retrieval.hybrid_search.description')}
+          isChosen={value.search_method === RETRIEVE_METHOD.hybrid}
+          onChosen={() => onChange({
+            ...value,
+            search_method: RETRIEVE_METHOD.hybrid,
+          })}
+          chosenConfig={
+            <RetrievalParamConfig
+              type={RETRIEVE_METHOD.hybrid}
+              value={value}
+              onChange={onChange}
+            />
+          }
+        />
+      )}
+    </div>
+  )
+}
+export default React.memo(RetrievalMethodConfig)
--- a/web/app/components/datasets/common/retrieval-method-info/index.tsx
+++ b/web/app/components/datasets/common/retrieval-method-info/index.tsx
@@ -0,0 +1,64 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import type { RetrievalConfig } from '@/types/app'
+import { RETRIEVE_METHOD } from '@/types/app'
+import RadioCard from '@/app/components/base/radio-card'
+import { HighPriority } from '@/app/components/base/icons/src/vender/solid/arrows'
+import { PatternRecognition, Semantic } from '@/app/components/base/icons/src/vender/solid/development'
+import { FileSearch02 } from '@/app/components/base/icons/src/vender/solid/files'
+
+type Props = {
+  value: RetrievalConfig
+}
+
+export const getIcon = (type: RETRIEVE_METHOD) => {
+  return ({
+    [RETRIEVE_METHOD.semantic]: Semantic,
+    [RETRIEVE_METHOD.fullText]: FileSearch02,
+    [RETRIEVE_METHOD.hybrid]: PatternRecognition,
+    [RETRIEVE_METHOD.invertedIndex]: HighPriority,
+  })[type] || FileSearch02
+}
+
+const EconomicalRetrievalMethodConfig: FC<Props> = ({
+  // type,
+  value,
+}) => {
+  const { t } = useTranslation()
+  const type = value.search_method
+  const Icon = getIcon(type)
+  return (
+    <div className='space-y-2'>
+      <RadioCard
+        icon={<Icon className='w-4 h-4 text-[#7839EE]' />}
+        title={t(`dataset.retrieval.${type}.title`)}
+        description={t(`dataset.retrieval.${type}.description`)}
+        noRadio
+        chosenConfigWrapClassName='!pb-3'
+        chosenConfig={
+          <div className='flex flex-wrap leading-[18px] text-xs font-normal'>
+            {value.reranking_model.reranking_model_name && (
+              <div className='mr-8 flex space-x-1'>
+                <div className='text-gray-500'>{t('common.modelProvider.rerankModel.key')}</div>
+                <div className='font-medium text-gray-800'>{value.reranking_model.reranking_model_name}</div>
+              </div>
+            )}
+
+            <div className='mr-8 flex space-x-1'>
+              <div className='text-gray-500'>{t('appDebug.datasetConfig.top_k')}</div>
+              <div className='font-medium text-gray-800'>{value.top_k}</div>
+            </div>
+
+            <div className='mr-8 flex space-x-1'>
+              <div className='text-gray-500'>{t('appDebug.datasetConfig.score_threshold')}</div>
+              <div className='font-medium text-gray-800'>{value.score_threshold}</div>
+            </div>
+          </div>
+        }
+      />
+    </div>
+  )
+}
+export default React.memo(EconomicalRetrievalMethodConfig)
--- a/web/app/components/datasets/common/retrieval-param-config/index.tsx
+++ b/web/app/components/datasets/common/retrieval-param-config/index.tsx
@@ -0,0 +1,131 @@
+'use client'
+import type { FC } from 'react'
+import React from 'react'
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import TopKItem from '@/app/components/base/param-item/top-k-item'
+import ScoreThresholdItem from '@/app/components/base/param-item/score-threshold-item'
+import { RETRIEVE_METHOD } from '@/types/app'
+import Switch from '@/app/components/base/switch'
+import Tooltip from '@/app/components/base/tooltip-plus'
+import { HelpCircle } from '@/app/components/base/icons/src/vender/line/general'
+import ModelSelector from '@/app/components/header/account-setting/model-page/model-selector'
+import { ModelType } from '@/app/components/header/account-setting/model-page/declarations'
+import type { RetrievalConfig } from '@/types/app'
+import { useProviderContext } from '@/context/provider-context'
+
+type Props = {
+  type: RETRIEVE_METHOD
+  value: RetrievalConfig
+  onChange: (value: RetrievalConfig) => void
+}
+
+const RetrievalParamConfig: FC<Props> = ({
+  type,
+  value,
+  onChange,
+}) => {
+  const { t } = useTranslation()
+  const canToggleRerankModalEnable = type !== RETRIEVE_METHOD.hybrid
+  const isEconomical = type === RETRIEVE_METHOD.invertedIndex
+  const {
+    rerankDefaultModel,
+  } = useProviderContext()
+
+  const rerankModel = (() => {
+    if (value.reranking_model) {
+      return {
+        provider_name: value.reranking_model.reranking_provider_name,
+        model_name: value.reranking_model.reranking_model_name,
+      }
+    }
+    else if (rerankDefaultModel) {
+      return {
+        provider_name: rerankDefaultModel.model_provider.provider_name,
+        model_name: rerankDefaultModel.model_name,
+      }
+    }
+  })()
+
+  return (
+    <div>
+      {!isEconomical && (
+        <div>
+          <div className='flex h-8 items-center text-[13px] font-medium text-gray-900 space-x-2'>
+            {canToggleRerankModalEnable && (
+              <Switch
+                size='md'
+                defaultValue={value.reranking_enable}
+                onChange={(v) => {
+                  onChange({
+                    ...value,
+                    reranking_enable: v,
+                  })
+                }}
+              />
+            )}
+            <div className='flex items-center'>
+              <span className='mr-0.5'>{t('common.modelProvider.rerankModel.key')}</span>
+              <Tooltip popupContent={<div className="w-[200px]">{t('common.modelProvider.rerankModel.tip')}</div>}>
+                <HelpCircle className='w-[14px] h-[14px] text-gray-400' />
+              </Tooltip>
+            </div>
+          </div>
+          <div>
+            <ModelSelector
+              whenEmptyGoToSetting
+              popClassName='!max-w-[100%] !w-full'
+              value={rerankModel && { providerName: rerankModel.provider_name, modelName: rerankModel.model_name } as any}
+              modelType={ModelType.reranking}
+              readonly={!value.reranking_enable && type !== RETRIEVE_METHOD.hybrid}
+              onChange={(v) => {
+                onChange({
+                  ...value,
+                  reranking_model: {
+                    reranking_provider_name: v.model_provider.provider_name,
+                    reranking_model_name: v.model_name,
+                  },
+                })
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      <div className={cn(!isEconomical && 'mt-4', 'flex space-between space-x-6')}>
+        <TopKItem
+          className='grow'
+          value={value.top_k}
+          onChange={(_key, v) => {
+            onChange({
+              ...value,
+              top_k: v,
+            })
+          }}
+          enable={true}
+        />
+        {(!isEconomical && !(value.search_method === RETRIEVE_METHOD.fullText && !value.reranking_enable)) && (
+          <ScoreThresholdItem
+            className='grow'
+            value={value.score_threshold}
+            onChange={(_key, v) => {
+              onChange({
+                ...value,
+                score_threshold: v,
+              })
+            }}
+            enable={value.score_threshold_enable}
+            hasSwitch={true}
+            onSwitchChange={(_key, v) => {
+              onChange({
+                ...value,
+                score_threshold_enable: v,
+              })
+            }}
+          />
+        )}
+      </div>
+    </div>
+  )
+}
+export default React.memo(RetrievalParamConfig)
--- a/web/app/components/datasets/create/step-two/index.tsx
+++ b/web/app/components/datasets/create/step-two/index.tsx
@@ -7,6 +7,7 @@ import { XMarkIcon } from '@heroicons/react/20/solid'
 import cn from 'classnames'
 import Link from 'next/link'
 import { groupBy } from 'lodash-es'
+import RetrievalMethodInfo from '../../common/retrieval-method-info'
 import PreviewItem, { PreviewType } from './preview-item'
 import LanguageSelect from './language-select'
 import s from './index.module.css'
@@ -19,7 +20,10 @@ import {
 } from '@/service/datasets'
 import Button from '@/app/components/base/button'
 import Loading from '@/app/components/base/loading'
-
+import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
+import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
+import { type RetrievalConfig } from '@/types/app'
+import { ensureRerankModelSelected, isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import Toast from '@/app/components/base/toast'
 import { formatNumber } from '@/utils/format'
 import type { NotionPage } from '@/models/common'
@@ -31,6 +35,8 @@ import { XClose } from '@/app/components/base/icons/src/vender/line/general'
 import { useDatasetDetailContext } from '@/context/dataset-detail'
 import I18n from '@/context/i18n'
 import { IS_CE_EDITION } from '@/config'
+import { RETRIEVE_METHOD } from '@/types/app'
+import { useProviderContext } from '@/context/provider-context'

 type ValueOf<T> = T[keyof T]
 type StepTwoProps = {
@@ -78,7 +84,7 @@ const StepTwo = ({
  const { t } = useTranslation()
  const { locale } = useContext(I18n)

-  const { mutateDatasetRes } = useDatasetDetailContext()
+  const { dataset: currentDataset, mutateDatasetRes } = useDatasetDetailContext()
  const scrollRef = useRef<HTMLDivElement>(null)
  const [scrolled, setScrolled] = useState(false)
  const previewScrollRef = useRef<HTMLDivElement>(null)
@@ -254,7 +260,10 @@ const StepTwo = ({
      }
    }
  }
-
+  const {
+    rerankDefaultModel,
+    isRerankDefaultModelVaild,
+  } = useProviderContext()
  const getCreationParams = () => {
    let params
    if (isSetting) {
@@ -263,9 +272,30 @@ const StepTwo = ({
        doc_form: docForm,
        doc_language: docLanguage,
        process_rule: getProcessRule(),
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        retrieval_model: retrievalConfig, // Readonly. If want to changed, just go to settings page.
      } as CreateDocumentReq
    }
-    else {
+    else { // create
+      const indexMethod = getIndexing_technique()
+      if (
+        !isReRankModelSelected({
+          rerankDefaultModel,
+          isRerankDefaultModelVaild,
+          // eslint-disable-next-line @typescript-eslint/no-use-before-define
+          retrievalConfig,
+          indexMethod: indexMethod as string,
+        })
+      ) {
+        Toast.notify({ type: 'error', message: t('appDebug.datasetConfig.rerankModelRequired') })
+        return
+      }
+      const postRetrievalConfig = ensureRerankModelSelected({
+        rerankDefaultModel: rerankDefaultModel!,
+        // eslint-disable-next-line @typescript-eslint/no-use-before-define
+        retrievalConfig,
+        indexMethod: indexMethod as string,
+      })
      params = {
        data_source: {
          type: dataSourceType,
@@ -277,6 +307,8 @@ const StepTwo = ({
        process_rule: getProcessRule(),
        doc_form: docForm,
        doc_language: docLanguage,
+
+        retrieval_model: postRetrievalConfig,
      } as CreateDocumentReq
      if (dataSourceType === DataSourceType.FILE) {
        params.data_source.info_list.file_info_list = {
@@ -330,7 +362,7 @@ const StepTwo = ({
      setIsCreating(true)
      if (!datasetId) {
        res = await createFirstDocument({
-          body: params,
+          body: params as CreateDocumentReq,
        })
        updateIndexingTypeCache && updateIndexingTypeCache(indexType as string)
        updateResultCache && updateResultCache(res)
@@ -338,7 +370,7 @@ const StepTwo = ({
      else {
        res = await createDocument({
          datasetId,
-          body: params,
+          body: params as CreateDocumentReq,
        })
        updateIndexingTypeCache && updateIndexingTypeCache(indexType as string)
        updateResultCache && updateResultCache(res)
@@ -441,6 +473,18 @@ const StepTwo = ({
    }
  }, [segmentationType, indexType])

+  const [retrievalConfig, setRetrievalConfig] = useState(currentDataset?.retrieval_model_dict || {
+    search_method: RETRIEVE_METHOD.semantic,
+    reranking_enable: false,
+    reranking_model: {
+      reranking_provider_name: rerankDefaultModel?.model_provider.provider_name,
+      reranking_model_name: rerankDefaultModel?.model_name,
+    },
+    top_k: 3,
+    score_threshold_enable: false,
+    score_threshold: 0.5,
+  } as RetrievalConfig)
+
  return (
    <div className='flex w-full h-full'>
      <div ref={scrollRef} className='relative h-full w-full overflow-y-scroll'>
@@ -626,6 +670,56 @@ const StepTwo = ({
                )}
              </div>
            )}
+            {/* Retrieval Method Config */}
+            <div>
+              {!datasetId
+                ? (
+                  <div className={s.label}>
+                    {t('datasetSettings.form.retrievalSetting.title')}
+                    <div className='leading-[18px] text-xs font-normal text-gray-500'>
+                      <a target='_blank' href='https://docs.dify.ai/v/zh-hans/advanced/retrieval-augment' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+                      {t('datasetSettings.form.retrievalSetting.longDescription')}
+                    </div>
+                  </div>
+                )
+                : (
+                  <div className={cn(s.label, 'flex justify-between items-center')}>
+                    <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
+                  </div>
+                )}
+
+              <div className='max-w-[640px]'>
+                {!datasetId
+                  ? (<>
+                    {getIndexing_technique() === IndexingType.QUALIFIED
+                      ? (
+                        <RetrievalMethodConfig
+                          value={retrievalConfig}
+                          onChange={setRetrievalConfig}
+                        />
+                      )
+                      : (
+                        <EconomicalRetrievalMethodConfig
+                          value={retrievalConfig}
+                          onChange={setRetrievalConfig}
+                        />
+                      )}
+                  </>)
+                  : (
+                    <div>
+                      <RetrievalMethodInfo
+                        value={retrievalConfig}
+                      />
+                      <div className='mt-2 text-xs text-gray-500 font-medium'>
+                        {t('datasetCreation.stepTwo.retrivalSettedTip')}
+                        <Link className='text-[#155EEF]' href={`/datasets/${datasetId}/settings`}>{t('datasetCreation.stepTwo.datasetSettingLink')}</Link>
+                      </div>
+                    </div>
+                  )}
+
+              </div>
+            </div>
+
            <div className={s.source}>
              <div className={s.sourceContent}>
                {dataSourceType === DataSourceType.FILE && (
--- a/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
+++ b/web/app/components/datasets/documents/detail/completed/SegmentCard.tsx
@@ -141,10 +141,16 @@ const SegmentCard: FC<ISegmentCardProps> = ({
                )}
            </div>
          </>
-          : <div className={s.hitTitleWrapper}>
-            <div className={cn(s.commonIcon, s.targetIcon, loading ? '!bg-gray-300' : '', '!w-3.5 !h-3.5')} />
-            <ProgressBar percent={score ?? 0} loading={loading} />
-          </div>}
+          : (
+            score !== null
+              ? (
+                <div className={s.hitTitleWrapper}>
+                  <div className={cn(s.commonIcon, s.targetIcon, loading ? '!bg-gray-300' : '', '!w-3.5 !h-3.5')} />
+                  <ProgressBar percent={score ?? 0} loading={loading} />
+                </div>
+              )
+              : null
+          )}
      </div>
      {loading
        ? (
--- a/web/app/components/datasets/hit-testing/index.tsx
+++ b/web/app/components/datasets/hit-testing/index.tsx
@@ -6,16 +6,20 @@ import useSWR from 'swr'
 import { omit } from 'lodash-es'
 import cn from 'classnames'
 import dayjs from 'dayjs'
+import { useContext } from 'use-context-selector'
 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'
+import ModifyRetrievalModal from './modify-retrieval-modal'
 import type { HitTestingResponse, HitTesting as HitTestingType } from '@/models/datasets'
 import Loading from '@/app/components/base/loading'
 import Modal from '@/app/components/base/modal'
 import Pagination from '@/app/components/base/pagination'
 import { fetchTestingRecords } from '@/service/datasets'
+import DatasetDetailContext from '@/context/dataset-detail'
+import type { RetrievalConfig } from '@/types/app'

 const limit = 10

@@ -55,6 +59,11 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
    setCurrParagraph({ paraInfo: detail, showModal: true })
  }

+  const { dataset: currentDataset } = useContext(DatasetDetailContext)
+
+  const [retrievalConfig, setRetrievalConfig] = useState(currentDataset?.retrieval_model_dict as RetrievalConfig)
+  const [isShowModifyRetrievalModal, setIsShowModifyRetrievalModal] = useState(false)
+
  return (
    <div className={s.container}>
      <div className={s.leftDiv}>
@@ -70,6 +79,9 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
          setLoading={setSubmitLoading}
          setText={setText}
          text={text}
+          onClickRetrievalMethod={() => setIsShowModifyRetrievalModal(true)}
+          retrievalConfig={retrievalConfig}
+          isEconomy={currentDataset?.indexing_technique === 'economy'}
        />
        <div className={cn(s.title, 'mt-8 mb-2')}>{t('datasetHitTesting.recents')}</div>
        {(!recordsRes && !error)
@@ -178,6 +190,18 @@ const HitTesting: FC<Props> = ({ datasetId }: Props) => {
          }}
        />}
      </Modal>
+      {isShowModifyRetrievalModal && (
+        <ModifyRetrievalModal
+          indexMethod={currentDataset?.indexing_technique || ''}
+          value={retrievalConfig}
+          isShow={isShowModifyRetrievalModal}
+          onHide={() => setIsShowModifyRetrievalModal(false)}
+          onSave={(value) => {
+            setRetrievalConfig(value)
+            setIsShowModifyRetrievalModal(false)
+          }}
+        />
+      )}
    </div>
  )
 }
--- a/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
+++ b/web/app/components/datasets/hit-testing/modify-retrieval-modal.tsx
@@ -0,0 +1,95 @@
+'use client'
+import type { FC } from 'react'
+import React, { useRef, useState } from 'react'
+import { useClickAway } from 'ahooks'
+import { useTranslation } from 'react-i18next'
+import { XClose } from '@/app/components/base/icons/src/vender/line/general'
+import type { RetrievalConfig } from '@/types/app'
+import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
+import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
+import Button from '@/app/components/base/button'
+
+type Props = {
+  indexMethod: string
+  value: RetrievalConfig
+  isShow: boolean
+  onHide: () => void
+  onSave: (value: RetrievalConfig) => void
+}
+
+const ModifyRetrievalModal: FC<Props> = ({
+  indexMethod,
+  value,
+  isShow,
+  onHide,
+  onSave,
+}) => {
+  const ref = useRef(null)
+  const { t } = useTranslation()
+  const [retrievalConfig, setRetrievalConfig] = useState(value)
+
+  useClickAway(() => {
+    if (ref)
+      onHide()
+  }, ref)
+
+  if (!isShow)
+    return null
+
+  return (
+    <div
+      className='fixed top-16 right-2 flex flex-col bg-white border-[0.5px] border-gray-200 rounded-xl shadow-xl z-10'
+      style={{
+        width: 632,
+        height: 'calc(100vh - 72px)',
+      }}
+      ref={ref}
+    >
+      <div className='shrink-0 flex justify-between items-center pl-6 pr-5 h-14 border-b border-b-gray-100'>
+        <div className='text-base font-semibold text-gray-900'>
+          <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
+          <div className='leading-[18px] text-xs font-normal text-gray-500'>
+            <a target='_blank' href='https://docs.dify.ai/v/zh-hans/advanced/retrieval-augment' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+            {t('datasetSettings.form.retrievalSetting.description')}
+          </div>
+        </div>
+        <div className='flex items-center'>
+          <div
+            onClick={onHide}
+            className='flex justify-center items-center w-6 h-6 cursor-pointer'
+          >
+            <XClose className='w-4 h-4 text-gray-500' />
+          </div>
+        </div>
+      </div>
+
+      <div className='p-6 border-b' style={{
+        borderBottom: 'rgba(0, 0, 0, 0.05)',
+      }}>
+        {indexMethod === 'high_quality'
+          ? (
+            <RetrievalMethodConfig
+              value={retrievalConfig}
+              onChange={setRetrievalConfig}
+            />
+          )
+          : (
+            <EconomicalRetrievalMethodConfig
+              value={retrievalConfig}
+              onChange={setRetrievalConfig}
+            />
+          )}
+      </div>
+      <div
+        className='flex justify-end pt-6 px-6 border-t'
+        style={{
+          borderColor: 'rgba(0, 0, 0, 0.05)',
+        }}
+      >
+        <Button className='mr-2 flex-shrink-0' onClick={onHide}>{t('common.operation.cancel')}</Button>
+        <Button type='primary' className='flex-shrink-0' onClick={() => onSave(retrievalConfig)} >{t('common.operation.save')}</Button>
+      </div>
+    </div>
+  )
+}
+export default React.memo(ModifyRetrievalModal)
--- a/web/app/components/datasets/hit-testing/style.module.css
+++ b/web/app/components/datasets/hit-testing/style.module.css
@@ -20,8 +20,8 @@
  @apply text-sm font-normal text-gray-500;
 }
 .textarea {
-  min-height: 96px;
-  @apply border-none resize-none font-normal caret-primary-600 text-gray-700 text-sm w-full bg-gray-25 focus-visible:outline-none placeholder:text-gray-300 placeholder:text-sm placeholder:font-normal !important;
+  height: 220px;
+  @apply border-none resize-none font-normal caret-primary-600 text-gray-700 text-sm w-full  focus-visible:outline-none placeholder:text-gray-300 placeholder:text-sm placeholder:font-normal !important;
 }
 .table {
  @apply text-[13px] text-gray-500;
@@ -46,7 +46,7 @@
 }

 .wrapper {
-  @apply relative border border-primary-600 min-h-[200px] rounded-xl pt-3 pb-14 px-4 bg-gray-25;
+  @apply relative border border-primary-600 rounded-xl;
 }

 .cardWrapper {
--- a/web/app/components/datasets/hit-testing/textarea.tsx
+++ b/web/app/components/datasets/hit-testing/textarea.tsx
@@ -1,26 +1,30 @@
-import type { FC } from "react";
+import type { FC } from 'react'
 import { useContext } from 'use-context-selector'
-import { DocumentTextIcon } from "@heroicons/react/24/solid";
-import { useTranslation } from "react-i18next";
-import { hitTesting } from "@/service/datasets";
+import { useTranslation } from 'react-i18next'
+import cn from 'classnames'
+import Button from '../../base/button'
+import Tag from '../../base/tag'
+import Tooltip from '../../base/tooltip'
+import { getIcon } from '../common/retrieval-method-info'
+import s from './style.module.css'
 import DatasetDetailContext from '@/context/dataset-detail'
-import { HitTestingResponse } from "@/models/datasets";
-import cn from "classnames";
-import Button from "../../base/button";
-import Tag from "../../base/tag";
-import Tooltip from "../../base/tooltip";
-import s from "./style.module.css";
-import { asyncRunSafe } from "@/utils";
+import type { HitTestingResponse } from '@/models/datasets'
+import { hitTesting } from '@/service/datasets'
+import { asyncRunSafe } from '@/utils'
+import { RETRIEVE_METHOD, type RetrievalConfig } from '@/types/app'

 type Props = {
-  datasetId: string;
-  onUpdateList: () => void;
-  setHitResult: (res: HitTestingResponse) => void;
-  loading: boolean;
-  setLoading: (v: boolean) => void;
-  text: string;
-  setText: (v: string) => void;
-};
+  datasetId: string
+  onUpdateList: () => void
+  setHitResult: (res: HitTestingResponse) => void
+  loading: boolean
+  setLoading: (v: boolean) => void
+  text: string
+  setText: (v: string) => void
+  onClickRetrievalMethod: () => void
+  retrievalConfig: RetrievalConfig
+  isEconomy: boolean
+}

 const TextAreaWithButton: FC<Props> = ({
  datasetId,
@@ -30,87 +34,109 @@ const TextAreaWithButton: FC<Props> = ({
  loading,
  text,
  setText,
+  onClickRetrievalMethod,
+  retrievalConfig,
+  isEconomy,
 }) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation()
  const { indexingTechnique } = useContext(DatasetDetailContext)

-  // 处理文本框内容变化的函数
  function handleTextChange(event: any) {
-    setText(event.target.value);
+    setText(event.target.value)
  }

-  // 处理按钮点击的函数
  const onSubmit = async () => {
-    setLoading(true);
+    setLoading(true)
    const [e, res] = await asyncRunSafe<HitTestingResponse>(
-      hitTesting({ datasetId, queryText: text }) as Promise<HitTestingResponse>
-    );
+      hitTesting({ datasetId, queryText: text, retrieval_model: retrievalConfig }) as Promise<HitTestingResponse>,
+    )
    if (!e) {
-      setHitResult(res);
-      onUpdateList?.();
+      setHitResult(res)
+      onUpdateList?.()
    }
-    setLoading(false);
-  };
+    setLoading(false)
+  }

+  const retrievalMethod = isEconomy ? RETRIEVE_METHOD.invertedIndex : retrievalConfig.search_method
+  const Icon = getIcon(retrievalMethod)
  return (
    <>
      <div className={s.wrapper}>
-        <div className="flex items-center mb-3">
-          <DocumentTextIcon className="w-4 h-4 text-primary-600 mr-2" />
-          <span className="text-gray-800 font-semibold text-sm">
-            {t("datasetHitTesting.input.title")}
-          </span>
-        </div>
-        <textarea
-          value={text}
-          onChange={handleTextChange}
-          placeholder={t("datasetHitTesting.input.placeholder") as string}
-          className={s.textarea}
-        />
-        <div className="absolute inset-x-0 bottom-0 flex items-center justify-between mx-4 mt-2 mb-4">
-          {text?.length > 200 ? (
+        <div className='pt-2 rounded-tl-xl rounded-tr-xl bg-[#EEF4FF]'>
+          <div className="px-4 pb-2 flex justify-between h-8 items-center">
+            <span className="text-gray-800 font-semibold text-sm">
+              {t('datasetHitTesting.input.title')}
+            </span>
            <Tooltip
-              content={t("datasetHitTesting.input.countWarning") as string}
-              selector="hit-testing-warning"
+              selector={'change-retrieval-method'}
+              htmlContent={t('dataset.retrieval.changeRetrievalMethod')}
            >
-              <div>
-                <Tag color="red" className="!text-red-600">
-                  {text?.length}
-                  <span className="text-red-300 mx-0.5">/</span>
-                  200
-                </Tag>
+              <div
+                onClick={onClickRetrievalMethod}
+                className='flex px-2 h-7 items-center space-x-1 bg-white hover:bg-[#ECE9FE] rounded-md shadow-sm cursor-pointer text-[#6927DA]'
+              >
+                <Icon className='w-3.5 h-3.5'></Icon>
+                <div className='text-xs font-medium'>{t(`dataset.retrieval.${retrievalMethod}.title`)}</div>
              </div>
            </Tooltip>
-          ) : (
-            <Tag
-              color="gray"
-              className={cn("!text-gray-500", text?.length ? "" : "opacity-50")}
-            >
-              {text?.length}
-              <span className="text-gray-300 mx-0.5">/</span>
-              200
-            </Tag>
-          )}
-          <Tooltip
-            selector="hit-testing-submit"
-            disabled={indexingTechnique === 'high_quality'}
-            content={t("datasetHitTesting.input.indexWarning") as string}
-          >
-            <div>
-              <Button
-                onClick={onSubmit}
-                type="primary"
-                loading={loading}
-                disabled={indexingTechnique !== 'high_quality' ? true : (!text?.length || text?.length > 200)}
-              >
-                {t("datasetHitTesting.input.testing")}
-              </Button>
-            </div>
-          </Tooltip>
+          </div>
+          <div className='h-2 rounded-tl-xl rounded-tr-xl bg-white'></div>
        </div>
+        <div className='px-4 pb-11'>
+          <textarea
+            value={text}
+            onChange={handleTextChange}
+            placeholder={t('datasetHitTesting.input.placeholder') as string}
+            className={s.textarea}
+          />
+          <div className="absolute inset-x-0 bottom-0 flex items-center justify-between mx-4 mt-2 mb-2">
+            {text?.length > 200
+              ? (
+                <Tooltip
+                  content={t('datasetHitTesting.input.countWarning') as string}
+                  selector="hit-testing-warning"
+                >
+                  <div>
+                    <Tag color="red" className="!text-red-600">
+                      {text?.length}
+                      <span className="text-red-300 mx-0.5">/</span>
+                  200
+                    </Tag>
+                  </div>
+                </Tooltip>
+              )
+              : (
+                <Tag
+                  color="gray"
+                  className={cn('!text-gray-500', text?.length ? '' : 'opacity-50')}
+                >
+                  {text?.length}
+                  <span className="text-gray-300 mx-0.5">/</span>
+              200
+                </Tag>
+              )}
+            <Tooltip
+              selector="hit-testing-submit"
+              disabled={indexingTechnique === 'high_quality'}
+              content={t('datasetHitTesting.input.indexWarning') as string}
+            >
+              <div>
+                <Button
+                  onClick={onSubmit}
+                  type="primary"
+                  loading={loading}
+                  disabled={indexingTechnique !== 'high_quality' ? true : (!text?.length || text?.length > 200)}
+                >
+                  {t('datasetHitTesting.input.testing')}
+                </Button>
+              </div>
+            </Tooltip>
+          </div>
+        </div>
+
      </div>
    </>
-  );
-};
+  )
+}

-export default TextAreaWithButton;
+export default TextAreaWithButton
--- a/web/app/components/datasets/settings/form/index.tsx
+++ b/web/app/components/datasets/settings/form/index.tsx
@@ -9,6 +9,8 @@ import { useSWRConfig } from 'swr'
 import { unstable_serialize } from 'swr/infinite'
 import PermissionsRadio from '../permissions-radio'
 import IndexMethodRadio from '../index-method-radio'
+import RetrievalMethodConfig from '@/app/components/datasets/common/retrieval-method-config'
+import EconomicalRetrievalMethodConfig from '@/app/components/datasets/common/economical-retrieval-method-config'
 import { ToastContext } from '@/app/components/base/toast'
 import Button from '@/app/components/base/button'
 import { updateDatasetSetting } from '@/service/datasets'
@@ -17,8 +19,10 @@ import ModelSelector from '@/app/components/header/account-setting/model-page/mo
 import type { ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
 import { ModelType } from '@/app/components/header/account-setting/model-page/declarations'
 import DatasetDetailContext from '@/context/dataset-detail'
+import { type RetrievalConfig } from '@/types/app'
 import { useModalContext } from '@/context/modal-context'
-
+import { useProviderContext } from '@/context/provider-context'
+import { ensureRerankModelSelected, isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 const rowClass = `
  flex justify-between py-4
 `
@@ -51,6 +55,12 @@ const Form = () => {
  const [description, setDescription] = useState(currentDataset?.description ?? '')
  const [permission, setPermission] = useState(currentDataset?.permission)
  const [indexMethod, setIndexMethod] = useState(currentDataset?.indexing_technique)
+  const [retrievalConfig, setRetrievalConfig] = useState(currentDataset?.retrieval_model_dict as RetrievalConfig)
+  const {
+    rerankDefaultModel,
+    isRerankDefaultModelVaild,
+  } = useProviderContext()
+
  const handleSave = async () => {
    if (loading)
      return
@@ -58,6 +68,22 @@ const Form = () => {
      notify({ type: 'error', message: t('datasetSettings.form.nameError') })
      return
    }
+    if (
+      !isReRankModelSelected({
+        rerankDefaultModel,
+        isRerankDefaultModelVaild,
+        retrievalConfig,
+        indexMethod,
+      })
+    ) {
+      notify({ type: 'error', message: t('appDebug.datasetConfig.rerankModelRequired') })
+      return
+    }
+    const postRetrievalConfig = ensureRerankModelSelected({
+      rerankDefaultModel: rerankDefaultModel!,
+      retrievalConfig,
+      indexMethod,
+    })
    try {
      setLoading(true)
      await updateDatasetSetting({
@@ -67,6 +93,7 @@ const Form = () => {
          description,
          permission,
          indexing_technique: indexMethod,
+          retrieval_model: postRetrievalConfig,
        },
      })
      notify({ type: 'success', message: t('common.actionMsg.modifiedSuccessfully') })
@@ -172,6 +199,33 @@ const Form = () => {
          </div>
        </div>
      )}
+      {/* Retrieval Method Config */}
+      <div className={rowClass}>
+        <div className={labelClass}>
+          <div>
+            <div>{t('datasetSettings.form.retrievalSetting.title')}</div>
+            <div className='leading-[18px] text-xs font-normal text-gray-500'>
+              <a target='_blank' href='https://docs.dify.ai/v/zh-hans/advanced/retrieval-augment' className='text-[#155eef]'>{t('datasetSettings.form.retrievalSetting.learnMore')}</a>
+              {t('datasetSettings.form.retrievalSetting.description')}
+            </div>
+          </div>
+        </div>
+        <div className='w-[480px]'>
+          {indexMethod === 'high_quality'
+            ? (
+              <RetrievalMethodConfig
+                value={retrievalConfig}
+                onChange={setRetrievalConfig}
+              />
+            )
+            : (
+              <EconomicalRetrievalMethodConfig
+                value={retrievalConfig}
+                onChange={setRetrievalConfig}
+              />
+            )}
+        </div>
+      </div>
      {currentDataset?.embedding_available && (
        <div className={rowClass}>
          <div className={labelClass} />
--- a/web/app/components/datasets/settings/permissions-radio/index.tsx
+++ b/web/app/components/datasets/settings/permissions-radio/index.tsx
@@ -13,12 +13,14 @@ const radioClass = `
 type IPermissionsRadioProps = {
  value?: DataSet['permission']
  onChange: (v?: DataSet['permission']) => void
+  itemClassName?: string
  disable?: boolean
 }

 const PermissionsRadio = ({
  value,
  onChange,
+  itemClassName,
  disable,
 }: IPermissionsRadioProps) => {
  const { t } = useTranslation()
@@ -41,6 +43,7 @@ const PermissionsRadio = ({
            key={option.key}
            className={classNames(
              itemClass,
+              itemClassName,
              s.item,
              option.key === value && s['item-active'],
              disable && s.disable,