diff --git a/web/app/components/app/configuration/config-vision/index.tsx b/web/app/components/app/configuration/config-vision/index.tsx
index f0904b3fd8..8d97097fba 100644
--- a/web/app/components/app/configuration/config-vision/index.tsx
+++ b/web/app/components/app/configuration/config-vision/index.tsx
@@ -13,10 +13,14 @@ import ConfigContext from '@/context/debug-configuration'
 import { useFeatures, useFeaturesStore } from '@/app/components/base/features/hooks'
 import Switch from '@/app/components/base/switch'
 import { SupportUploadFileTypes } from '@/app/components/workflow/types'
+import OptionCard from '@/app/components/workflow/nodes/_base/components/option-card'
+import { Resolution } from '@/types/app'
+import { noop } from 'lodash'
+import cn from '@/utils/classnames'
 
 const ConfigVision: FC = () => {
   const { t } = useTranslation()
-  const { isShowVisionConfig, isAllowVideoUpload } = useContext(ConfigContext)
+  const { isShowVisionConfig, isAllowVideoUpload, readonly } = useContext(ConfigContext)
   const file = useFeatures(s => s.features.file)
   const featuresStore = useFeaturesStore()
 
@@ -53,7 +57,7 @@ const ConfigVision: FC = () => {
     setFeatures(newFeatures)
   }, [featuresStore, isAllowVideoUpload])
 
-  if (!isShowVisionConfig)
+  if (!isShowVisionConfig || (readonly && !isImageEnabled))
     return null
 
   return (
@@ -74,37 +78,49 @@ const ConfigVision: FC = () => {
         />
       </div>
       <div className='flex shrink-0 items-center'>
-        {/* <div className='mr-2 flex items-center gap-0.5'>
-          <div className='text-text-tertiary system-xs-medium-uppercase'>{t('appDebug.vision.visionSettings.resolution')}</div>
-          <Tooltip
-            popupContent={
-              <div className='w-[180px]' >
-                {t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
-                  <div key={item}>{item}</div>
-                ))}
-              </div>
-            }
+        {readonly ? (<>
+          <div className='mr-2 flex items-center gap-0.5'>
+            <div className='system-xs-medium-uppercase text-text-tertiary'>{t('appDebug.vision.visionSettings.resolution')}</div>
+            <Tooltip
+              popupContent={
+                <div className='w-[180px]' >
+                  {t('appDebug.vision.visionSettings.resolutionTooltip').split('\n').map(item => (
+                    <div key={item}>{item}</div>
+                  ))}
+                </div>
+              }
+            />
+          </div>
+          <div className='flex items-center gap-1'>
+            <OptionCard
+              title={t('appDebug.vision.visionSettings.high')}
+              selected={file?.image?.detail === Resolution.high}
+              onSelect={noop}
+              className={cn(
+                'cursor-not-allowed rounded-lg px-3  hover:shadow-none',
+                file?.image?.detail !== Resolution.high && 'hover:border-components-option-card-option-border',
+              )}
+            />
+            <OptionCard
+              title={t('appDebug.vision.visionSettings.low')}
+              selected={file?.image?.detail === Resolution.low}
+              onSelect={noop}
+              className={cn(
+                'cursor-not-allowed rounded-lg px-3  hover:shadow-none',
+                file?.image?.detail !== Resolution.low && 'hover:border-components-option-card-option-border',
+              )}
+            />
+          </div>
+        </>) : <>
+          <ParamConfig />
+          <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-regular'></div>
+          <Switch
+            defaultValue={isImageEnabled}
+            onChange={handleChange}
+            size='md'
           />
-        </div> */}
-        {/* <div className='flex items-center gap-1'>
-          <OptionCard
-            title={t('appDebug.vision.visionSettings.high')}
-            selected={file?.image?.detail === Resolution.high}
-            onSelect={() => handleChange(Resolution.high)}
-          />
-          <OptionCard
-            title={t('appDebug.vision.visionSettings.low')}
-            selected={file?.image?.detail === Resolution.low}
-            onSelect={() => handleChange(Resolution.low)}
-          />
-        </div> */}
-        <ParamConfig />
-        <div className='ml-1 mr-3 h-3.5 w-[1px] bg-divider-regular'></div>
-        <Switch
-          defaultValue={isImageEnabled}
-          onChange={handleChange}
-          size='md'
-        />
+        </>}
+
       </div>
     </div>
   )
diff --git a/web/app/components/app/configuration/preview.tsx b/web/app/components/app/configuration/preview.tsx
index 7679ee13b6..92212ee515 100644
--- a/web/app/components/app/configuration/preview.tsx
+++ b/web/app/components/app/configuration/preview.tsx
@@ -25,6 +25,7 @@ import { useGetTryAppDataSets, useGetTryAppInfo } from '@/service/use-try-app'
 import { noop } from 'lodash'
 import { correctModelProvider } from '@/utils'
 import { userInputsFormToPromptVariables } from '@/utils/model-config'
+import { useTextGenerationCurrentProviderAndModelAndModelList } from '../../header/account-setting/model-provider-page/hooks'
 
 type Props = {
   appId: string
@@ -172,12 +173,14 @@ const Configuration: FC<Props> = ({
   const query = ''
   const completionParams = useState<FormValue>({})
 
-  // todo
-  const currModel: {
-    features: ModelFeatureEnum[]
-  } = {
-    features: [],
-  }
+  const {
+    currentModel: currModel,
+  } = useTextGenerationCurrentProviderAndModelAndModelList(
+    {
+      provider: modelConfig.provider,
+      model: modelConfig.model_id,
+    },
+  )
 
   const isShowVisionConfig = !!currModel?.features?.includes(ModelFeatureEnum.vision)
   const isShowDocumentConfig = !!currModel?.features?.includes(ModelFeatureEnum.document)
diff --git a/web/i18n/ja-JP/common.ts b/web/i18n/ja-JP/common.ts
index 52545c460b..45dbb2bd8d 100644
--- a/web/i18n/ja-JP/common.ts
+++ b/web/i18n/ja-JP/common.ts
@@ -654,6 +654,7 @@ const translation = {
       hitScore: '検索スコア：',
     },
     inputPlaceholder: '{{botName}} と話す',
+    inputDisabledPlaceholder: 'プレビューのみ',
     thought: '思考',
     thinking: '考え中...',
     resend: '再送信してください',