Feat: support selecting model in auto generator (#21208)

10 months ago · 223448af18
parent d34795fc08
commit 223448af18
5 changed files with 198 additions and 102 deletions
--- a/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
+++ b/web/app/components/app/configuration/config-prompt/simple-prompt-input.tsx
@ -10,7 +10,6 @@ import PromptEditorHeightResizeWrap from './prompt-editor-height-resize-wrap'
 import cn from '@/utils/classnames'
 import type { PromptVariable } from '@/models/debug'
 import Tooltip from '@/app/components/base/tooltip'
-import type { CompletionParams } from '@/types/app'
 import { AppType } from '@/types/app'
 import { getNewVar, getVars } from '@/utils/var'
 import AutomaticBtn from '@/app/components/app/configuration/config/automatic/automatic-btn'
@ -63,7 +62,6 @@ const Prompt: FC<ISimplePromptInput> = ({
  const { eventEmitter } = useEventEmitterContextContext()
  const {
    modelConfig,
-    completionParams,
    dataSets,
    setModelConfig,
    setPrevPromptConfig,
@ -264,14 +262,6 @@ const Prompt: FC<ISimplePromptInput> = ({
      {showAutomatic && (
        <GetAutomaticResModal
          mode={mode as AppType}
-          model={
-            {
-              provider: modelConfig.provider,
-              name: modelConfig.model_id,
-              mode: modelConfig.mode,
-              completion_params: completionParams as CompletionParams,
-            }
-          }
          isShow={showAutomatic}
          onClose={showAutomaticFalse}
          onFinished={handleAutomaticRes}
--- a/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
+++ b/web/app/components/app/configuration/config/automatic/get-automatic-res.tsx
@ -1,6 +1,6 @@
 'use client'
 import type { FC } from 'react'
-import React, { useCallback } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useBoolean } from 'ahooks'
 import {
@ -22,7 +22,7 @@ import Textarea from '@/app/components/base/textarea'
 import Toast from '@/app/components/base/toast'
 import { generateRule } from '@/service/debug'
 import ConfigPrompt from '@/app/components/app/configuration/config-prompt'
-import type { Model } from '@/types/app'
+import type { CompletionParams, Model } from '@/types/app'
 import { AppType } from '@/types/app'
 import ConfigVar from '@/app/components/app/configuration/config-var'
 import GroupName from '@/app/components/app/configuration/base/group-name'
@ -33,14 +33,15 @@ import { LoveMessage } from '@/app/components/base/icons/src/vender/features'
 // type
 import type { AutomaticRes } from '@/service/debug'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
-import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
-import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
+import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
+
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import type { ModelModeType } from '@/types/app'
+import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'

 export type IGetAutomaticResProps = {
  mode: AppType
-  model: Model
  isShow: boolean
  onClose: () => void
  onFinished: (res: AutomaticRes) => void
@ -65,16 +66,23 @@ const TryLabel: FC<{

 const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
  mode,
-  model,
  isShow,
  onClose,
  isInLLMNode,
  onFinished,
 }) => {
  const { t } = useTranslation()
+  const localModel = localStorage.getItem('auto-gen-model')
+    ? JSON.parse(localStorage.getItem('auto-gen-model') as string) as Model
+    : null
+  const [model, setModel] = React.useState<Model>(localModel || {
+    name: '',
+    provider: '',
+    mode: mode as unknown as ModelModeType.chat,
+    completion_params: {} as CompletionParams,
+  })
  const {
-    currentProvider,
-    currentModel,
+    defaultModel,
  } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textGeneration)
  const tryList = [
    {
@ -115,7 +123,7 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
    },
  ]

-  const [instruction, setInstruction] = React.useState<string>('')
+  const [instruction, setInstruction] = useState<string>('')
  const handleChooseTemplate = useCallback((key: string) => {
    return () => {
      const template = t(`appDebug.generate.template.${key}.instruction`)
@ -135,7 +143,25 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
    return true
  }
  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false)
-  const [res, setRes] = React.useState<AutomaticRes | null>(null)
+  const [res, setRes] = useState<AutomaticRes | null>(null)
+
+  useEffect(() => {
+    if (defaultModel) {
+      const localModel = localStorage.getItem('auto-gen-model')
+        ? JSON.parse(localStorage.getItem('auto-gen-model') || '')
+        : null
+      if (localModel) {
+        setModel(localModel)
+      }
+      else {
+        setModel(prev => ({
+          ...prev,
+          name: defaultModel.model,
+          provider: defaultModel.provider.provider,
+        }))
+      }
+    }
+  }, [defaultModel])

  const renderLoading = (
    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3'>
@ -154,6 +180,26 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
    </div>
  )

+  const handleModelChange = useCallback((newValue: { modelId: string; provider: string; mode?: string; features?: string[] }) => {
+    const newModel = {
+      ...model,
+      provider: newValue.provider,
+      name: newValue.modelId,
+      mode: newValue.mode as ModelModeType,
+    }
+    setModel(newModel)
+    localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
+  }, [model, setModel])
+
+  const handleCompletionParamsChange = useCallback((newParams: FormValue) => {
+    const newModel = {
+      ...model,
+      completion_params: newParams as CompletionParams,
+    }
+    setModel(newModel)
+    localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
+  }, [model, setModel])
+
  const onGenerate = async () => {
    if (!isValid())
      return
@ -198,17 +244,18 @@ const GetAutomaticRes: FC<IGetAutomaticResProps> = ({
            <div className={`text-lg font-bold leading-[28px] ${s.textGradient}`}>{t('appDebug.generate.title')}</div>
            <div className='mt-1 text-[13px] font-normal text-text-tertiary'>{t('appDebug.generate.description')}</div>
          </div>
-          <div className='mb-8 flex items-center'>
-            <ModelIcon
-              className='mr-1.5 shrink-0 '
-              provider={currentProvider}
-              modelName={currentModel?.model}
-            />
-            <ModelName
-              className='grow'
-              modelItem={currentModel!}
-              showMode
-              showFeatures
+          <div className='mb-8'>
+            <ModelParameterModal
+              popupClassName='!w-[520px]'
+              portalToFollowElemContentClassName='z-[1000]'
+              isAdvancedMode={true}
+              provider={model.provider}
+              mode={model.mode}
+              completionParams={model.completion_params}
+              modelId={model.name}
+              setModel={handleModelChange}
+              onCompletionParamsChange={handleCompletionParamsChange}
+              hideDebugWithMultipleModel
            />
          </div>
          <div >
--- a/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
+++ b/web/app/components/app/configuration/config/code-generator/get-code-generator-res.tsx
@ -1,5 +1,5 @@
 import type { FC } from 'react'
-import React from 'react'
+import React, { useCallback, useEffect } from 'react'
 import cn from 'classnames'
 import useBoolean from 'ahooks/lib/useBoolean'
 import { useTranslation } from 'react-i18next'
@ -7,8 +7,10 @@ import ConfigPrompt from '../../config-prompt'
 import { languageMap } from '../../../../workflow/nodes/_base/components/editor/code-editor/index'
 import { generateRuleCode } from '@/service/debug'
 import type { CodeGenRes } from '@/service/debug'
-import { type AppType, type Model, ModelModeType } from '@/types/app'
+import type { ModelModeType } from '@/types/app'
+import type { AppType, CompletionParams, Model } from '@/types/app'
 import Modal from '@/app/components/base/modal'
+import Textarea from '@/app/components/base/textarea'
 import Button from '@/app/components/base/button'
 import { Generator } from '@/app/components/base/icons/src/vender/other'
 import Toast from '@/app/components/base/toast'
@ -17,8 +19,9 @@ import Confirm from '@/app/components/base/confirm'
 import type { CodeLanguage } from '@/app/components/workflow/nodes/code/types'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
-import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
-import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
+import ModelParameterModal from '@/app/components/header/account-setting/model-provider-page/model-parameter-modal'
+import type { FormValue } from '@/app/components/header/account-setting/model-provider-page/declarations'
+
 export type IGetCodeGeneratorResProps = {
  mode: AppType
  isShow: boolean
@ -36,11 +39,28 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
    onFinished,
  },
 ) => {
+  const { t } = useTranslation()
+  const defaultCompletionParams = {
+    temperature: 0.7,
+    max_tokens: 0,
+    top_p: 0,
+    echo: false,
+    stop: [],
+    presence_penalty: 0,
+    frequency_penalty: 0,
+  }
+  const localModel = localStorage.getItem('auto-gen-model')
+    ? JSON.parse(localStorage.getItem('auto-gen-model') as string) as Model
+    : null
+  const [model, setModel] = React.useState<Model>(localModel || {
+    name: '',
+    provider: '',
+    mode: mode as unknown as ModelModeType.chat,
+    completion_params: defaultCompletionParams,
+  })
  const {
-    currentProvider,
-    currentModel,
+    defaultModel,
  } = useModelListAndDefaultModelAndCurrentProviderAndModel(ModelTypeEnum.textGeneration)
-  const { t } = useTranslation()
  const [instruction, setInstruction] = React.useState<string>('')
  const [isLoading, { setTrue: setLoadingTrue, setFalse: setLoadingFalse }] = useBoolean(false)
  const [res, setRes] = React.useState<CodeGenRes | null>(null)
@ -56,21 +76,27 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
    }
    return true
  }
-  const model: Model = {
-    provider: currentProvider?.provider || '',
-    name: currentModel?.model || '',
-    mode: ModelModeType.chat,
-    // This is a fixed parameter
-    completion_params: {
-      temperature: 0.7,
-      max_tokens: 0,
-      top_p: 0,
-      echo: false,
-      stop: [],
-      presence_penalty: 0,
-      frequency_penalty: 0,
-    },
-  }
+
+  const handleModelChange = useCallback((newValue: { modelId: string; provider: string; mode?: string; features?: string[] }) => {
+    const newModel = {
+      ...model,
+      provider: newValue.provider,
+      name: newValue.modelId,
+      mode: newValue.mode as ModelModeType,
+    }
+    setModel(newModel)
+    localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
+  }, [model, setModel])
+
+  const handleCompletionParamsChange = useCallback((newParams: FormValue) => {
+    const newModel = {
+      ...model,
+      completion_params: newParams as CompletionParams,
+    }
+    setModel(newModel)
+    localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
+  }, [model, setModel])
+
  const isInLLMNode = true
  const onGenerate = async () => {
    if (!isValid())
@ -99,16 +125,40 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
  }
  const [showConfirmOverwrite, setShowConfirmOverwrite] = React.useState(false)

+  useEffect(() => {
+    if (defaultModel) {
+      const localModel = localStorage.getItem('auto-gen-model')
+        ? JSON.parse(localStorage.getItem('auto-gen-model') || '')
+        : null
+      if (localModel) {
+        setModel({
+          ...localModel,
+          completion_params: {
+            ...defaultCompletionParams,
+            ...localModel.completion_params,
+          },
+        })
+      }
+      else {
+        setModel(prev => ({
+          ...prev,
+          name: defaultModel.model,
+          provider: defaultModel.provider.provider,
+        }))
+      }
+    }
+  }, [defaultModel])
+
  const renderLoading = (
    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3'>
      <Loading />
-      <div className='text-[13px] text-gray-400'>{t('appDebug.codegen.loading')}</div>
+      <div className='text-[13px] text-text-tertiary'>{t('appDebug.codegen.loading')}</div>
    </div>
  )
  const renderNoData = (
    <div className='flex h-full w-0 grow flex-col items-center justify-center space-y-3 px-8'>
-      <Generator className='h-14 w-14 text-gray-300' />
-      <div className='text-center text-[13px] font-normal leading-5 text-gray-400'>
+      <Generator className='h-14 w-14 text-text-tertiary' />
+      <div className='text-center text-[13px] font-normal leading-5 text-text-tertiary'>
        <div>{t('appDebug.codegen.noDataLine1')}</div>
        <div>{t('appDebug.codegen.noDataLine2')}</div>
      </div>
@ -123,29 +173,30 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
      closable
    >
      <div className='relative flex h-[680px] flex-wrap'>
-        <div className='h-full w-[570px] shrink-0 overflow-y-auto border-r border-gray-100 p-8'>
+        <div className='h-full w-[570px] shrink-0 overflow-y-auto border-r border-divider-regular p-8'>
          <div className='mb-8'>
-            <div className={'text-lg font-bold leading-[28px]'}>{t('appDebug.codegen.title')}</div>
-            <div className='mt-1 text-[13px] font-normal text-gray-500'>{t('appDebug.codegen.description')}</div>
+            <div className={'text-lg font-bold leading-[28px] text-text-primary'}>{t('appDebug.codegen.title')}</div>
+            <div className='mt-1 text-[13px] font-normal text-text-tertiary'>{t('appDebug.codegen.description')}</div>
          </div>
-          <div className='flex items-center'>
-            <ModelIcon
-              className='mr-1.5 shrink-0'
-              provider={currentProvider}
-              modelName={currentModel?.model}
-            />
-            <ModelName
-              className='grow'
-              modelItem={currentModel!}
-              showMode
-              showFeatures
+          <div className='mb-8'>
+            <ModelParameterModal
+              popupClassName='!w-[520px]'
+              portalToFollowElemContentClassName='z-[1000]'
+              isAdvancedMode={true}
+              provider={model.provider}
+              mode={model.mode}
+              completionParams={model.completion_params}
+              modelId={model.name}
+              setModel={handleModelChange}
+              onCompletionParamsChange={handleCompletionParamsChange}
+              hideDebugWithMultipleModel
            />
          </div>
-          <div className='mt-6'>
+          <div>
            <div className='text-[0px]'>
-              <div className='mb-2 text-sm font-medium leading-5 text-gray-900'>{t('appDebug.codegen.instruction')}</div>
-              <textarea
-                className="h-[200px] w-full overflow-y-auto rounded-lg bg-gray-50 px-3 py-2 text-sm"
+              <div className='mb-2 text-sm font-medium leading-5 text-text-primary'>{t('appDebug.codegen.instruction')}</div>
+              <Textarea
+                className="h-[200px] resize-none"
                placeholder={t('appDebug.codegen.instructionPlaceholder') || ''}
                value={instruction}
                onChange={e => setInstruction(e.target.value)}
@ -169,7 +220,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
        {!isLoading && !res && renderNoData}
        {(!isLoading && res) && (
          <div className='h-full w-0 grow p-6 pb-0'>
-            <div className='mb-3 shrink-0 text-base font-semibold leading-[160%] text-gray-800'>{t('appDebug.codegen.resTitle')}</div>
+            <div className='mb-3 shrink-0 text-base font-semibold leading-[160%] text-text-secondary'>{t('appDebug.codegen.resTitle')}</div>
            <div className={cn('max-h-[555px] overflow-y-auto', !isInLLMNode && 'pb-2')}>
              <ConfigPrompt
                mode={mode}
@ -185,7 +236,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
                <>
                  {res?.code && (
                    <div className='mt-4'>
-                      <h3 className='mb-2 text-sm font-medium text-gray-900'>{t('appDebug.codegen.generatedCode')}</h3>
+                      <h3 className='mb-2 text-sm font-medium text-text-primary'>{t('appDebug.codegen.generatedCode')}</h3>
                      <pre className='overflow-x-auto rounded-lg bg-gray-50 p-4'>
                        <code className={`language-${res.language}`}>
                          {res.code}
@ -202,7 +253,7 @@ export const GetCodeGeneratorResModal: FC<IGetCodeGeneratorResProps> = (
              )}
            </div>

-            <div className='flex justify-end bg-white py-4'>
+            <div className='flex justify-end bg-background-default py-4'>
              <Button onClick={onClose}>{t('common.operation.cancel')}</Button>
              <Button variant='primary' className='ml-2' onClick={() => {
                setShowConfirmOverwrite(true)
--- a/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
+++ b/web/app/components/workflow/nodes/llm/components/json-schema-config-modal/json-schema-generator/index.tsx
@ -11,7 +11,6 @@ import { ModelModeType } from '@/types/app'
 import { Theme } from '@/types/app'
 import { SchemaGeneratorDark, SchemaGeneratorLight } from './assets'
 import cn from '@/utils/classnames'
-import type { ModelInfo } from './prompt-editor'
 import PromptEditor from './prompt-editor'
 import GeneratedResult from './generated-result'
 import { useGenerateStructuredOutputRules } from '@/service/use-common'
@ -19,7 +18,6 @@ import Toast from '@/app/components/base/toast'
 import { type FormValue, ModelTypeEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 import { useModelListAndDefaultModelAndCurrentProviderAndModel } from '@/app/components/header/account-setting/model-provider-page/hooks'
 import { useVisualEditorStore } from '../visual-editor/store'
-import { useTranslation } from 'react-i18next'
 import { useMittContext } from '../visual-editor/context'

 type JsonSchemaGeneratorProps = {
@ -36,10 +34,12 @@ export const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
  onApply,
  crossAxisOffset,
 }) => {
-  const { t } = useTranslation()
+  const localModel = localStorage.getItem('auto-gen-model')
+    ? JSON.parse(localStorage.getItem('auto-gen-model') as string) as Model
+    : null
  const [open, setOpen] = useState(false)
  const [view, setView] = useState(GeneratorView.promptEditor)
-  const [model, setModel] = useState<Model>({
+  const [model, setModel] = useState<Model>(localModel || {
    name: '',
    provider: '',
    mode: ModelModeType.completion,
@ -58,11 +58,19 @@ export const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({

  useEffect(() => {
    if (defaultModel) {
-      setModel(prev => ({
-        ...prev,
-        name: defaultModel.model,
-        provider: defaultModel.provider.provider,
-      }))
+      const localModel = localStorage.getItem('auto-gen-model')
+        ? JSON.parse(localStorage.getItem('auto-gen-model') || '')
+        : null
+      if (localModel) {
+        setModel(localModel)
+      }
+      else {
+        setModel(prev => ({
+          ...prev,
+          name: defaultModel.model,
+          provider: defaultModel.provider.provider,
+        }))
+      }
    }
  }, [defaultModel])

@ -77,22 +85,25 @@ export const JsonSchemaGenerator: FC<JsonSchemaGeneratorProps> = ({
    setOpen(false)
  }, [])

-  const handleModelChange = useCallback((model: ModelInfo) => {
-    setModel(prev => ({
-      ...prev,
-      provider: model.provider,
-      name: model.modelId,
-      mode: model.mode as ModelModeType,
-    }))
-  }, [])
+  const handleModelChange = useCallback((newValue: { modelId: string; provider: string; mode?: string; features?: string[] }) => {
+    const newModel = {
+      ...model,
+      provider: newValue.provider,
+      name: newValue.modelId,
+      mode: newValue.mode as ModelModeType,
+    }
+    setModel(newModel)
+    localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
+  }, [model, setModel])

  const handleCompletionParamsChange = useCallback((newParams: FormValue) => {
-    setModel(prev => ({
-      ...prev,
+    const newModel = {
+      ...model,
      completion_params: newParams as CompletionParams,
-    }),
-    )
-  }, [])
+    }
+    setModel(newModel)
+    localStorage.setItem('auto-gen-model', JSON.stringify(newModel))
+  }, [model, setModel])

  const { mutateAsync: generateStructuredOutputRules, isPending: isGenerating } = useGenerateStructuredOutputRules()

--- a/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
+++ b/web/app/components/workflow/nodes/llm/components/prompt-generator-btn.tsx
@ -9,7 +9,6 @@ import GetAutomaticResModal from '@/app/components/app/configuration/config/auto
 import { AppType } from '@/types/app'
 import type { AutomaticRes } from '@/service/debug'
 import type { ModelConfig } from '@/app/components/workflow/types'
-import type { Model } from '@/types/app'

 type Props = {
  className?: string
@ -20,7 +19,6 @@ type Props = {
 const PromptGeneratorBtn: FC<Props> = ({
  className,
  onGenerated,
-  modelConfig,
 }) => {
  const [showAutomatic, { setTrue: showAutomaticTrue, setFalse: showAutomaticFalse }] = useBoolean(false)
  const handleAutomaticRes = useCallback((res: AutomaticRes) => {
@ -40,7 +38,6 @@ const PromptGeneratorBtn: FC<Props> = ({
          isShow={showAutomatic}
          onClose={showAutomaticFalse}
          onFinished={handleAutomaticRes}
-          model={modelConfig as Model}
          isInLLMNode
        />
      )}