Model Runtime (#1858)

Co-authored-by: StyleZhang <jasonapring2015@outlook.com>
Co-authored-by: Garfield Dai <dai.hai@foxmail.com>
Co-authored-by: chenhe <guchenhe@gmail.com>
Co-authored-by: jyong <jyong@dify.ai>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Yeuoly <admin@srmxy.cn>

web/app/components/app/configuration/dataset-config/params-config/index.tsx

@@ -12,15 +12,14 @@ import Modal from '@/app/components/base/modal'
 import Button from '@/app/components/base/button'
 import RadioCard from '@/app/components/base/radio-card/simple'
 import { RETRIEVE_TYPE } from '@/types/app'
-import ModelSelector from '@/app/components/header/account-setting/model-page/model-selector'
-import { useProviderContext } from '@/context/provider-context'
-import { ModelType } from '@/app/components/header/account-setting/model-page/declarations'
 import Toast from '@/app/components/base/toast'
 import { DATASET_DEFAULT } from '@/config'
 import {
   MultiPathRetrieval,
   NTo1Retrieval,
 } from '@/app/components/base/icons/src/public/common'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 
 const ParamsConfig: FC = () => {
   const { t } = useTranslation()
@@ -38,11 +37,11 @@ const ParamsConfig: FC = () => {
       retrieval_model: value,
     })
   }
-
   const {
-    rerankDefaultModel,
-    isRerankDefaultModelVaild,
-  } = useProviderContext()
+    modelList: rerankModelList,
+    defaultModel: rerankDefaultModel,
+    currentModel: isRerankDefaultModelVaild,
+  } = useModelListAndDefaultModelAndCurrentProviderAndModel(3)
 
   const rerankModel = (() => {
     if (tempDataSetConfigs.reranking_model) {
@@ -53,8 +52,8 @@ const ParamsConfig: FC = () => {
     }
     else if (rerankDefaultModel) {
       return {
-        provider_name: rerankDefaultModel.model_provider.provider_name,
-        model_name: rerankDefaultModel.model_name,
+        provider_name: rerankDefaultModel.provider.provider,
+        model_name: rerankDefaultModel.model,
       }
     }
   })()
@@ -104,8 +103,8 @@ const ParamsConfig: FC = () => {
     const config = { ...tempDataSetConfigs }
     if (config.retrieval_model === RETRIEVE_TYPE.multiWay && !config.reranking_model) {
       config.reranking_model = {
-        reranking_provider_name: rerankDefaultModel?.model_provider.provider_name,
-        reranking_model_name: rerankDefaultModel?.model_name,
+        reranking_provider_name: rerankDefaultModel?.provider,
+        reranking_model_name: rerankDefaultModel?.model,
       } as any
     }
     setDatasetConfigs(config)
@@ -163,18 +162,17 @@ const ParamsConfig: FC = () => {
                   <div className='leading-[32px] text-[13px] font-medium text-gray-900'>{t('common.modelProvider.rerankModel.key')}</div>
                   <div>
                     <ModelSelector
-                      popClassName='!max-w-[100%] !w-full'
-                      value={rerankModel && { providerName: rerankModel.provider_name, modelName: rerankModel.model_name } as any}
-                      modelType={ModelType.reranking}
-                      onChange={(v) => {
+                      defaultModel={rerankModel && { provider: rerankModel?.provider_name, model: rerankModel?.model_name }}
+                      onSelect={(v) => {
                         setTempDataSetConfigs({
                           ...tempDataSetConfigs,
                           reranking_model: {
-                            reranking_provider_name: v.model_provider.provider_name,
-                            reranking_model_name: v.model_name,
+                            reranking_provider_name: v.provider,
+                            reranking_model_name: v.model,
                           },
                         })
                       }}
+                      modelList={rerankModelList}
                     />
                   </div>
                 </div>

web/app/components/app/configuration/dataset-config/settings-modal/index.tsx

@@ -6,9 +6,6 @@ import cn from 'classnames'
 import { BookOpenIcon } from '@heroicons/react/24/outline'
 import IndexMethodRadio from '@/app/components/datasets/settings/index-method-radio'
 import Button from '@/app/components/base/button'
-import ModelSelector from '@/app/components/header/account-setting/model-page/model-selector'
-import type { ProviderEnum } from '@/app/components/header/account-setting/model-page/declarations'
-import { ModelType } from '@/app/components/header/account-setting/model-page/declarations'
 import type { DataSet } from '@/models/datasets'
 import { useToastContext } from '@/app/components/base/toast'
 import { updateDatasetSetting } from '@/service/datasets'
@@ -17,10 +14,14 @@ 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 { useProviderContext } from '@/context/provider-context'
 import { ensureRerankModelSelected, isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
 import { AlertTriangle } from '@/app/components/base/icons/src/vender/solid/alertsAndFeedback'
 import PermissionsRadio from '@/app/components/datasets/settings/permissions-radio'
+import ModelSelector from '@/app/components/header/account-setting/model-provider-page/model-selector'
+import {
+  useModelList,
+  useModelListAndDefaultModelAndCurrentProviderAndModel,
+} from '@/app/components/header/account-setting/model-provider-page/hooks'
 
 type SettingsModalProps = {
   currentDataset: DataSet
@@ -41,6 +42,12 @@ const SettingsModal: FC<SettingsModalProps> = ({
   onCancel,
   onSave,
 }) => {
+  const { data: embeddingsModelList } = useModelList(2)
+  const {
+    modelList: rerankModelList,
+    defaultModel: rerankDefaultModel,
+    currentModel: isRerankDefaultModelVaild,
+  } = useModelListAndDefaultModelAndCurrentProviderAndModel(3)
   const { t } = useTranslation()
   const { notify } = useToastContext()
   const ref = useRef(null)
@@ -51,12 +58,6 @@ const SettingsModal: FC<SettingsModalProps> = ({
   const [indexMethod, setIndexMethod] = useState(currentDataset.indexing_technique)
   const [retrievalConfig, setRetrievalConfig] = useState(localeCurrentDataset?.retrieval_model_dict as RetrievalConfig)
 
-  const {
-    rerankDefaultModel,
-    isRerankDefaultModelVaild,
-    rerankModelList,
-  } = useProviderContext()
-
   const handleValueChange = (type: string, value: string) => {
     setLocaleCurrentDataset({ ...localeCurrentDataset, [type]: value })
   }
@@ -73,7 +74,7 @@ const SettingsModal: FC<SettingsModalProps> = ({
     if (
       !isReRankModelSelected({
         rerankDefaultModel,
-        isRerankDefaultModelVaild,
+        isRerankDefaultModelVaild: !!isRerankDefaultModelVaild,
         rerankModelList,
         retrievalConfig,
         indexMethod,
@@ -204,12 +205,11 @@ const SettingsModal: FC<SettingsModalProps> = ({
               <div className='w-full h-9 rounded-lg bg-gray-100 opacity-60'>
                 <ModelSelector
                   readonly
-                  value={{
-                    providerName: localeCurrentDataset.embedding_model_provider as ProviderEnum,
-                    modelName: localeCurrentDataset.embedding_model,
+                  defaultModel={{
+                    provider: localeCurrentDataset.embedding_model_provider,
+                    model: localeCurrentDataset.embedding_model,
                   }}
-                  modelType={ModelType.embeddings}
-                  onChange={() => {}}
+                  modelList={embeddingsModelList}
                 />
               </div>
               <div className='mt-2 w-full text-xs leading-6 text-gray-500'>