feat: [frontend] support vision (#1518)

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

web/app/components/share/text-generation/run-once/index.tsx

@@ -9,6 +9,8 @@ import type { SiteInfo } from '@/models/share'
 import type { PromptConfig } from '@/models/debug'
 import Button from '@/app/components/base/button'
 import { DEFAULT_VALUE_MAX_LEN } from '@/config'
+import TextGenerationImageUploader from '@/app/components/base/image-uploader/text-generation-image-uploader'
+import type { VisionFile, VisionSettings } from '@/types/app'
 
 export type IRunOnceProps = {
   siteInfo: SiteInfo
@@ -16,12 +18,16 @@ export type IRunOnceProps = {
   inputs: Record<string, any>
   onInputsChange: (inputs: Record<string, any>) => void
   onSend: () => void
+  visionConfig: VisionSettings
+  onVisionFilesChange: (files: VisionFile[]) => void
 }
 const RunOnce: FC<IRunOnceProps> = ({
   promptConfig,
   inputs,
   onInputsChange,
   onSend,
+  visionConfig,
+  onVisionFilesChange,
 }) => {
   const { t } = useTranslation()
 
@@ -73,6 +79,24 @@ const RunOnce: FC<IRunOnceProps> = ({
               </div>
             </div>
           ))}
+          {
+            visionConfig?.enabled && (
+              <div className="w-full mt-4">
+                <div className="text-gray-900 text-sm font-medium">Image Upload</div>
+                <div className='mt-2'>
+                  <TextGenerationImageUploader
+                    settings={visionConfig}
+                    onFilesChange={files => onVisionFilesChange(files.filter(file => file.progress !== -1).map(fileItem => ({
+                      type: 'image',
+                      transfer_method: fileItem.type,
+                      url: fileItem.url,
+                      upload_file_id: fileItem.fileId,
+                    })))}
+                  />
+                </div>
+              </div>
+            )
+          }
           {promptConfig.prompt_variables.length > 0 && (
             <div className='mt-4 h-[1px] bg-gray-100'></div>
           )}