diff --git a/web/app/components/app/configuration/config-model/index.tsx b/web/app/components/app/configuration/config-model/index.tsx index 61f716992..5b33000d6 100644 --- a/web/app/components/app/configuration/config-model/index.tsx +++ b/web/app/components/app/configuration/config-model/index.tsx @@ -224,6 +224,8 @@ const ConfigModel: FC = ({ const handleParamChange = (key: string, value: number | string[]) => { if (value === undefined) return + if ((completionParams as any)[key] === value) + return if (key === 'stop') { onCompletionParamsChange({ diff --git a/web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts b/web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts index ea7a49fec..faf929697 100644 --- a/web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts +++ b/web/app/components/app/configuration/hooks/use-advanced-prompt-config.ts @@ -1,7 +1,7 @@ import { useState } from 'react' import { clone } from 'lodash-es' import produce from 'immer' -import type { ChatPromptConfig, CompletionPromptConfig, ConversationHistoriesRole, PromptItem } from '@/models/debug' +import type { ChatPromptConfig, CompletionParams, CompletionPromptConfig, ConversationHistoriesRole, PromptItem } from '@/models/debug' import { PromptMode } from '@/models/debug' import { AppType, ModelModeType } from '@/types/app' import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config' @@ -16,6 +16,9 @@ type Param = { prePrompt: string onUserChangedPrompt: () => void hasSetDataSet: boolean + completionParams: CompletionParams + setCompletionParams: (params: CompletionParams) => void + setStop: (stop: string[]) => void } const useAdvancedPromptConfig = ({ @@ -26,6 +29,9 @@ const useAdvancedPromptConfig = ({ prePrompt, onUserChangedPrompt, hasSetDataSet, + completionParams, + setCompletionParams, + setStop, }: Param) => { const isAdvancedPrompt = promptMode === PromptMode.advanced const [chatPromptConfig, setChatPromptConfig] = useState(clone(DEFAULT_CHAT_PROMPT_CONFIG)) @@ -98,7 +104,7 @@ const useAdvancedPromptConfig = ({ const mode = modelModeType const toReplacePrePrompt = prePrompt || '' if (!isAdvancedPrompt) { - const { chat_prompt_config, completion_prompt_config } = await fetchPromptTemplate({ + const { chat_prompt_config, completion_prompt_config, stop } = await fetchPromptTemplate({ appMode, mode, modelName, @@ -121,12 +127,16 @@ const useAdvancedPromptConfig = ({ draft.prompt.text = draft.prompt.text.replace(PRE_PROMPT_PLACEHOLDER_TEXT, toReplacePrePrompt) }) setCompletionPromptConfig(newPromptConfig) + setCompletionParams({ + ...completionParams, + stop, + }) } return } if (isMigrateToCompetition) { - const { completion_prompt_config, chat_prompt_config } = await fetchPromptTemplate({ + const { completion_prompt_config, chat_prompt_config, stop } = await fetchPromptTemplate({ appMode, mode: toModelModeType as ModelModeType, modelName, @@ -145,6 +155,13 @@ const useAdvancedPromptConfig = ({ draft.conversation_histories_role = completionPromptConfig.conversation_histories_role }) setCompletionPromptConfig(newPromptConfig) + if (!completionParams.stop || completionParams.stop.length === 0) { + setCompletionParams({ + ...completionParams, + stop, + }) + } + setStop(stop) // switch mode's params is async. It may override the stop value. } else { const newPromptConfig = produce(chat_prompt_config, (draft) => { diff --git a/web/app/components/app/configuration/images/prompt.svg b/web/app/components/app/configuration/images/prompt.svg new file mode 100644 index 000000000..88453d277 --- /dev/null +++ b/web/app/components/app/configuration/images/prompt.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/web/app/components/app/configuration/index.tsx b/web/app/components/app/configuration/index.tsx index 94f7b758e..619a7e260 100644 --- a/web/app/components/app/configuration/index.tsx +++ b/web/app/components/app/configuration/index.tsx @@ -1,11 +1,11 @@ 'use client' import type { FC } from 'react' -import React, { useEffect, useState } from 'react' +import React, { useEffect, useRef, useState } from 'react' import { useTranslation } from 'react-i18next' import { useContext } from 'use-context-selector' import { usePathname } from 'next/navigation' import produce from 'immer' -import { useBoolean } from 'ahooks' +import { useBoolean, useGetState } from 'ahooks' import cn from 'classnames' import { clone, isEqual } from 'lodash-es' import Button from '../../base/button' @@ -33,6 +33,7 @@ import { FlipBackward } from '@/app/components/base/icons/src/vender/line/arrows import { PromptMode } from '@/models/debug' import { DEFAULT_CHAT_PROMPT_CONFIG, DEFAULT_COMPLETION_PROMPT_CONFIG } from '@/config' import SelectDataSet from '@/app/components/app/configuration/dataset-config/select-dataset' +import I18n from '@/context/i18n' type PublichConfig = { modelConfig: ModelConfig @@ -74,13 +75,26 @@ const Configuration: FC = () => { const [formattingChanged, setFormattingChanged] = useState(false) const [inputs, setInputs] = useState({}) const [query, setQuery] = useState('') - const [completionParams, setCompletionParams] = useState({ + const [completionParams, doSetCompletionParams] = useState({ max_tokens: 16, temperature: 1, // 0-2 top_p: 1, presence_penalty: 1, // -2-2 frequency_penalty: 1, // -2-2 + stop: [], }) + const [tempStop, setTempStop, getTempStop] = useGetState([]) + const setCompletionParams = (value: CompletionParams) => { + const params = { ...value } + + // eslint-disable-next-line @typescript-eslint/no-use-before-define + if ((!params.stop || params.stop.length === 0) && (modeModeTypeRef.current === ModelModeType.completion)) { + params.stop = getTempStop() + setTempStop([]) + } + doSetCompletionParams(params) + } + const [modelConfig, doSetModelConfig] = useState({ provider: ProviderEnum.openai, model_id: 'gpt-3.5-turbo', @@ -110,6 +124,10 @@ const Configuration: FC = () => { } const modelModeType = modelConfig.mode + const modeModeTypeRef = useRef(modelModeType) + useEffect(() => { + modeModeTypeRef.current = modelModeType + }, [modelModeType]) const [dataSets, setDataSets] = useState([]) const contextVar = modelConfig.configs.prompt_variables.find(item => item.is_context_var)?.key @@ -197,7 +215,7 @@ const Configuration: FC = () => { const hasSetAPIKEY = hasSetCustomAPIKEY || !isTrailFinished const [isShowSetAPIKey, { setTrue: showSetAPIKey, setFalse: hideSetAPIkey }] = useBoolean() - const [promptMode, doSetPromptMode] = useState(PromptMode.advanced) + const [promptMode, doSetPromptMode] = useState(PromptMode.simple) const isAdvancedMode = promptMode === PromptMode.advanced const [canReturnToSimpleMode, setCanReturnToSimpleMode] = useState(true) const setPromptMode = async (mode: PromptMode) => { @@ -230,6 +248,9 @@ const Configuration: FC = () => { onUserChangedPrompt: () => { setCanReturnToSimpleMode(false) }, + completionParams, + setCompletionParams, + setStop: setTempStop, }) const setModel = async ({ @@ -449,6 +470,7 @@ const Configuration: FC = () => { const [showUseGPT4Confirm, setShowUseGPT4Confirm] = useState(false) const [showSetAPIKeyModal, setShowSetAPIKeyModal] = useState(false) + const { locale } = useContext(I18n) if (isLoading) { return
@@ -513,10 +535,9 @@ const Configuration: FC = () => { <>
-
-
{t('appDebug.pageTitle.line1')}
-
-
{t('appDebug.pageTitle.line2')}
+
+
+
{/* modelModeType missing can not load template */} {(!isAdvancedMode && modelModeType) && (
{ )} {isAdvancedMode && (
-
{t('appDebug.promptMode.advanced')}
+
{t('appDebug.promptMode.advanced')}
{canReturnToSimpleMode && (
setPromptMode(PromptMode.simple)} diff --git a/web/app/components/app/configuration/style.module.css b/web/app/components/app/configuration/style.module.css index 01f2c9316..d9605ea39 100644 --- a/web/app/components/app/configuration/style.module.css +++ b/web/app/components/app/configuration/style.module.css @@ -1,3 +1,10 @@ +.promptTitle { + width: 72px; + height: 31px; + background: url(./images/prompt.svg) no-repeat 0 0; + background-size: contain; +} + .advancedPromptMode { position: relative; } diff --git a/web/i18n/lang/app-debug.en.ts b/web/i18n/lang/app-debug.en.ts index 886ccfd18..32de6dac3 100644 --- a/web/i18n/lang/app-debug.en.ts +++ b/web/i18n/lang/app-debug.en.ts @@ -4,12 +4,12 @@ const translation = { line2: 'Engineering', }, promptMode: { - simple: 'Switch to Advanced Mode to edit the built-in PROMPT', + simple: 'Switch to Advanced Mode to edit the whole PROMPT', advanced: 'Advanced Mode', switchBack: 'Switch back', advancedWarning: { title: 'You have switched to Advanced Mode, and once you modify the PROMPT, you CANNOT return to the simple mode.', - description: 'In Advanced Mode, you can edit built-in PROMPT.', + description: 'In Advanced Mode, you can edit whole PROMPT.', learnMore: 'Learn more', ok: 'OK', }, diff --git a/web/i18n/lang/app-debug.zh.ts b/web/i18n/lang/app-debug.zh.ts index cfde532f3..f6b3ceae6 100644 --- a/web/i18n/lang/app-debug.zh.ts +++ b/web/i18n/lang/app-debug.zh.ts @@ -4,12 +4,12 @@ const translation = { line2: '编排', }, promptMode: { - simple: '切换到高级模式以编辑内置的提示词', + simple: '切换到高级模式以编辑完整的提示词', advanced: '高级模式', switchBack: '返回简单模式', advancedWarning: { title: '您已切换到高级模式，一旦修改提示词，将无法返回简单模式。', - description: '在高级模式下，您可以编辑内置的提示词。', + description: '在高级模式下，您可以编辑完整的提示词。', learnMore: '了解更多', ok: '确定', }, diff --git a/web/service/debug.ts b/web/service/debug.ts index 83d0a96a2..81bfbc5b1 100644 --- a/web/service/debug.ts +++ b/web/service/debug.ts @@ -73,7 +73,7 @@ export const fetchPromptTemplate = ({ modelName, hasSetDataSet, }: { appMode: string; mode: ModelModeType; modelName: string; hasSetDataSet: boolean }) => { - return get>('/app/prompt-templates', { + return get>('/app/prompt-templates', { params: { app_mode: appMode, model_mode: mode,