From 604930db64e1187ec8c3822b3fd4b235b7b1a41c Mon Sep 17 00:00:00 2001
From: Joel <iamjoel007@gmail.com>
Date: Fri, 1 Mar 2024 16:43:56 +0800
Subject: [PATCH] feat: support detect when to show vision config

---
 .../components/workflow/nodes/llm/panel.tsx   | 28 ++++++++++---------
 .../workflow/nodes/llm/use-config.ts          | 14 ++++++++++
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/web/app/components/workflow/nodes/llm/panel.tsx b/web/app/components/workflow/nodes/llm/panel.tsx
index fd08cbc52a..38155f2b56 100644
--- a/web/app/components/workflow/nodes/llm/panel.tsx
+++ b/web/app/components/workflow/nodes/llm/panel.tsx
@@ -20,6 +20,7 @@ const Panel: FC = () => {
 
   const {
     inputs,
+    isShowVisionConfig,
     handleModelChanged,
     handleCompletionParamsChange,
     handleVarListChange,
@@ -88,8 +89,8 @@ const Panel: FC = () => {
           Prompt
         </Field>
 
-        {/*  */}
-        {isChatApp && isChatApp && (
+        {/* Memory examples */}
+        {isChatApp && isChatModel && (
           <div className='text-xs text-gray-300'>Memory examples(Designing)</div>
         )}
         {/* Memory */}
@@ -106,18 +107,19 @@ const Panel: FC = () => {
         )}
 
         {/* Vision: GPT4-vision and so on */}
-        <Field
-          title={t(`${i18nPrefix}.vision`)}
-          tooltip={t('appDebug.vision.description')!}
-          operations={
-            <ResolutionPicker
-              value={inputs.vision.configs.detail}
-              onChange={handleVisionResolutionChange}
-            />
-          }
-        />
+        {isShowVisionConfig && (
+          <Field
+            title={t(`${i18nPrefix}.vision`)}
+            tooltip={t('appDebug.vision.description')!}
+            operations={
+              <ResolutionPicker
+                value={inputs.vision.configs.detail}
+                onChange={handleVisionResolutionChange}
+              />
+            }
+          />
+        )}
       </div>
-      <Split />
       <div className='px-4 pt-4 pb-2'>
         <OutputVars>
           <>
diff --git a/web/app/components/workflow/nodes/llm/use-config.ts b/web/app/components/workflow/nodes/llm/use-config.ts
index d2a9ace7c7..169baec22b 100644
--- a/web/app/components/workflow/nodes/llm/use-config.ts
+++ b/web/app/components/workflow/nodes/llm/use-config.ts
@@ -4,11 +4,14 @@ import useVarList from '../_base/hooks/use-var-list'
 import type { Memory, ValueSelector } from '../../types'
 import type { LLMNodeType } from './types'
 import type { Resolution } from '@/types/app'
+import { useTextGenerationCurrentProviderAndModelAndModelList } from '@/app/components/header/account-setting/model-provider-page/hooks'
+import { ModelFeatureEnum } from '@/app/components/header/account-setting/model-provider-page/declarations'
 
 const useConfig = (initInputs: LLMNodeType) => {
   const [inputs, setInputs] = useState<LLMNodeType>(initInputs)
 
   // model
+  const model = inputs.model
   const handleModelChanged = useCallback((model: { provider: string; modelId: string; mode?: string }) => {
     const newInputs = produce(inputs, (draft) => {
       draft.model.provider = model.provider
@@ -25,6 +28,16 @@ const useConfig = (initInputs: LLMNodeType) => {
     setInputs(newInputs)
   }, [inputs, setInputs])
 
+  const {
+    currentModel: currModel,
+  } = useTextGenerationCurrentProviderAndModelAndModelList(
+    {
+      provider: model.provider,
+      model: model.name,
+    },
+  )
+  const isShowVisionConfig = !!currModel?.features?.includes(ModelFeatureEnum.vision)
+
   // variables
   const { handleVarListChange, handleAddVariable } = useVarList<LLMNodeType>({
     inputs,
@@ -55,6 +68,7 @@ const useConfig = (initInputs: LLMNodeType) => {
 
   return {
     inputs,
+    isShowVisionConfig,
     handleModelChanged,
     handleCompletionParamsChange,
     handleVarListChange,