feat: [frontend] support vision (#1518)

Co-authored-by: Joel <iamjoel007@gmail.com>

web/i18n/lang/app-debug.en.ts

@@ -202,6 +202,7 @@ const translation = {
     waitForBatchResponse:
       'Please wait for the response to the batch task to complete.',
     notSelectModel: 'Please choose a model',
+    waitForImgUpload: 'Please wait for the image to upload',
   },
   chatSubTitle: 'Pre Prompt',
   completionSubTitle: 'Prefix Prompt',
@@ -249,6 +250,25 @@ const translation = {
     options: 'Options',
     addOption: 'Add option',
   },
+  vision: {
+    name: 'Vision',
+    description: 'Enable Vision will allows the model to take in images and answer questions about them. ',
+    settings: 'Settings',
+    visionSettings: {
+      title: 'Vision Settings',
+      resolution: 'Resolution',
+      resolutionTooltip: `low res will allow model receive a low-res 512 x 512 version of the image, and represent the image with a budget of 65 tokens. This allows the API to return faster responses and consume fewer input tokens for use cases that do not require high detail.
+      \n
+      high res will first allows the model to see the low res image and then creates detailed crops of input images as 512px squares based on the input image size. Each of the detailed crops uses twice the token budget for a total of 129 tokens.`,
+      high: 'High',
+      low: 'Low',
+      uploadMethod: 'Upload Method',
+      both: 'Both',
+      localUpload: 'Local Upload',
+      url: 'URL',
+      uploadLimit: 'Upload Limit',
+    },
+  },
   openingStatement: {
     title: 'Opening remarks',
     add: 'Add',

web/i18n/lang/app-debug.zh.ts

@@ -199,6 +199,7 @@ const translation = {
     waitForResponse: '请等待上条信息响应完成',
     waitForBatchResponse: '请等待批量任务完成',
     notSelectModel: '请选择模型',
+    waitForImgUpload: '请等待图片上传完成',
   },
   chatSubTitle: '对话前提示词',
   completionSubTitle: '前缀提示词',
@@ -245,6 +246,25 @@ const translation = {
     options: '选项',
     addOption: '添加选项',
   },
+  vision: {
+    name: '视觉',
+    description: '开启视觉功能将允许模型输入图片，并根据图像内容的理解回答用户问题',
+    settings: '设置',
+    visionSettings: {
+      title: '视觉设置',
+      resolution: '分辨率',
+      resolutionTooltip: `低分辨率模式将使模型接收图像的低分辨率版本，尺寸为512 x 512，并使用65 Tokens 来表示图像。这样可以使API更快地返回响应，并在不需要高细节的用例中消耗更少的输入。
+      \n
+      高分辨率模式将首先允许模型查看低分辨率图像，然后根据输入图像的大小创建512像素的详细裁剪图像。每个详细裁剪图像使用两倍的预算总共为129 Tokens。`,
+      high: '高',
+      low: '低',
+      uploadMethod: '上传方式',
+      both: '两者',
+      localUpload: '本地上传',
+      url: 'URL',
+      uploadLimit: '上传数量限制',
+    },
+  },
   openingStatement: {
     title: '对话开场白',
     add: '添加开场白',

web/i18n/lang/app-log.en.ts

@@ -44,6 +44,7 @@ const translation = {
       annotationPlaceholder: 'Enter the expected answer that you want AI to reply, which can be used for model fine-tuning and continuous improvement of text generation quality in the future.',
     },
     variables: 'Variables',
+    uploadImages: 'Uploaded Images',
   },
   filter: {
     period: {

web/i18n/lang/app-log.zh.ts

@@ -44,6 +44,7 @@ const translation = {
       annotationPlaceholder: '输入你希望 AI 回复的预期答案，这在今后可用于模型微调，持续改进文本生成质量。',
     },
     variables: '变量',
+    uploadImages: '上传的图片',
   },
   filter: {
     period: {

web/i18n/lang/common.en.ts

@@ -328,9 +328,6 @@ const translation = {
         lengthError: 'API-key length cannot be less than 5 characters',
       },
     },
-    confirm: {
-      desc: 'Deleting the WebHook might cause the extension points configured for this API Extension to fail and produce errors. Please proceed with caution.',
-    },
   },
   about: {
     changeLog: 'Changlog',
@@ -433,6 +430,15 @@ const translation = {
     },
     existed: 'Already exists in the prompt',
   },
+  imageUploader: {
+    uploadFromComputer: 'Upload from Computer',
+    uploadFromComputerReadError: 'Image reading failed, please try again.',
+    uploadFromComputerUploadError: 'Image upload failed, please upload again.',
+    uploadFromComputerLimit: 'Upload images cannot exceed {{size}} MB',
+    pasteImageLink: 'Paste image link',
+    pasteImageLinkInputPlaceholder: 'Paste image link here',
+    pasteImageLinkInvalid: 'Invalid image link',
+  },
 }
 
 export default translation

web/i18n/lang/common.zh.ts

@@ -109,7 +109,7 @@ const translation = {
     provider: '模型供应商',
     dataSource: '数据来源',
     plugin: '插件',
-    apiBasedExtension: 'API 的扩展',
+    apiBasedExtension: 'API 扩展',
   },
   account: {
     avatar: '头像',
@@ -302,18 +302,18 @@ const translation = {
     },
   },
   apiBasedExtension: {
-    title: 'API 的扩展提供了一个集中式的 API 管理，在此统一添加 API 配置后，方便在 Dify 上的各类应用中直接使用。',
-    link: '了解如何开发您自己的 API 的扩展。',
+    title: 'API 扩展提供了一个集中式的 API 管理，在此统一添加 API 配置后，方便在 Dify 上的各类应用中直接使用。',
+    link: '了解如何开发您自己的 API 扩展。',
     linkUrl: 'https://docs.dify.ai/v/zh-hans/advanced/api_based_extension',
-    add: '新增 API 的扩展',
+    add: '新增 API 扩展',
     selector: {
-      title: 'API 的扩展',
-      placeholder: '请选择 API 的扩展',
-      manage: '管理 API 的扩展',
+      title: 'API 扩展',
+      placeholder: '请选择 API 扩展',
+      manage: '管理 API 扩展',
     },
     modal: {
-      title: '新增 API 的扩展',
-      editTitle: '编辑 API 的扩展',
+      title: '新增 API 扩展',
+      editTitle: '编辑 API 扩展',
       name: {
         title: '名称',
         placeholder: '请输入名称',
@@ -328,9 +328,6 @@ const translation = {
         lengthError: 'API-key 不能少于 5 位',
       },
     },
-    confirm: {
-      desc: '删除 WebHook 可能会导致这个 API 的扩展配置的扩展失败并产生错误。请谨慎删除。',
-    },
   },
   about: {
     changeLog: '更新日志',
@@ -433,6 +430,15 @@ const translation = {
     },
     existed: 'Prompt 中已存在',
   },
+  imageUploader: {
+    uploadFromComputer: '从本地上传',
+    uploadFromComputerReadError: '图片读取失败，请重新选择。',
+    uploadFromComputerUploadError: '图片上传失败，请重新上传。',
+    uploadFromComputerLimit: '上传图片不能超过 {{size}} MB',
+    pasteImageLink: '粘贴图片链接',
+    pasteImageLinkInputPlaceholder: '将图像链接粘贴到此处',
+    pasteImageLinkInvalid: '图片链接无效',
+  },
 }
 
 export default translation