diff --git a/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx b/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx index 7b1526ffdd..2d0a39ba69 100644 --- a/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx +++ b/web/app/components/workflow/nodes/llm/components/resolution-picker.tsx @@ -23,7 +23,7 @@ const Item: FC = ({ title, value, onSelect, isSelected }) => { return (
{title} @@ -43,7 +43,7 @@ const ResolutionPicker: FC = ({ const { t } = useTranslation() return ( -
+
{t(`${i18nPrefix}.resolution.name`)}
> = ({ @@ -51,6 +52,7 @@ const Panel: FC> = ({ filterVar, handlePromptChange, handleMemoryChange, + handleVisionResolutionEnabledChange, handleVisionResolutionChange, isShowSingleRun, hideSingleRun, @@ -240,12 +242,19 @@ const Panel: FC> = ({ title={t(`${i18nPrefix}.vision`)} tooltip={t('appDebug.vision.description')!} operations={ - + } - /> + > + {inputs.vision.enabled + ? ( + + ) + : null} + + )}
diff --git a/web/app/components/workflow/nodes/llm/use-config.ts b/web/app/components/workflow/nodes/llm/use-config.ts index 5a3ebf7c54..5efb49aa9d 100644 --- a/web/app/components/workflow/nodes/llm/use-config.ts +++ b/web/app/components/workflow/nodes/llm/use-config.ts @@ -103,6 +103,7 @@ const useConfig = (id: string, payload: LLMNodeType) => { // eslint-disable-next-line react-hooks/exhaustive-deps }, [defaultConfig, isChatModel]) + const [modelChanged, setModelChanged] = useState(false) const { currentProvider, currentModel, @@ -118,6 +119,7 @@ const useConfig = (id: string, payload: LLMNodeType) => { appendDefaultPromptConfig(draft, defaultConfig, model.mode === 'chat') }) setInputs(newInputs) + setModelChanged(true) }, [setInputs, defaultConfig, appendDefaultPromptConfig]) useEffect(() => { @@ -146,7 +148,35 @@ const useConfig = (id: string, payload: LLMNodeType) => { }, ) const isShowVisionConfig = !!currModel?.features?.includes(ModelFeatureEnum.vision) - + // change to vision model to set vision enabled, else disabled + useEffect(() => { + if (!modelChanged) + return + setModelChanged(false) + if (!isShowVisionConfig) { + const newInputs = produce(inputs, (draft) => { + draft.vision = { + enabled: false, + } + }) + setInputs(newInputs) + return + } + if (!inputs.vision?.enabled) { + const newInputs = produce(inputs, (draft) => { + if (!draft.vision?.enabled) { + draft.vision = { + enabled: true, + configs: { + detail: Resolution.high, + }, + } + } + }) + setInputs(newInputs) + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [isShowVisionConfig, modelChanged]) // variables const { handleVarListChange, handleAddVariable } = useVarList({ inputs, @@ -176,6 +206,28 @@ const useConfig = (id: string, payload: LLMNodeType) => { setInputs(newInputs) }, [inputs, setInputs]) + const handleVisionResolutionEnabledChange = useCallback((enabled: boolean) => { + const newInputs = produce(inputs, (draft) => { + if (!draft.vision) { + draft.vision = { + enabled, + configs: { + detail: Resolution.high, + }, + } + } + else { + draft.vision.enabled = enabled + if (!draft.vision.configs) { + draft.vision.configs = { + detail: Resolution.high, + } + } + } + }) + setInputs(newInputs) + }, [inputs, setInputs]) + const handleVisionResolutionChange = useCallback((newResolution: Resolution) => { const newInputs = produce(inputs, (draft) => { if (!draft.vision.configs) { @@ -296,6 +348,7 @@ const useConfig = (id: string, payload: LLMNodeType) => { filterVar, handlePromptChange, handleMemoryChange, + handleVisionResolutionEnabledChange, handleVisionResolutionChange, isShowSingleRun, hideSingleRun,