kling upload check

Kadxy · Kadxy · commit beae74b8aaa7 · 2024-09-26T22:43:06.000+08:00
diff --git a/app/pages/Kling.tsx b/app/pages/Kling.tsx
@@ -12,9 +12,10 @@ import {
 } from "@ant-design/pro-components";
 import { COL_SCROLL_STYLE, PRO_FORM_PROPS, SEGMENTED_PROPS } from "@/constant";
 import { useAppConfig } from "@/app/store";
-import { Alert, Col, Divider, message, Segmented, SegmentedProps } from "antd";
+import { Alert, Col, Divider, App, Segmented } from "antd";
 import { Kling, KlingApiTypes } from "@/app/providers/kling";
 import { RenderSubmitter } from "../render";
+import { beforeUpload } from "../utils";
 
 const MODE_OPTIONS = [
   { label: "Std-标准模式（高性能）", value: "std" },
@@ -36,6 +37,7 @@ const TASK_TYPE_OPTIONS = [
 const MODEL_OPTIONS = [{ label: "kling-v1", value: "kling-v1" }];
 
 const KlingPage = () => {
+  const { message } = App.useApp();
   const appConfig = useAppConfig();
   const api = new Kling("sk-sFplfAcnWY3sFCCs02Ac93Ce9cEf4984A7EdF93e70969c18");
 
@@ -291,30 +293,10 @@ const KlingPage = () => {
     updateTask: (data: any[]) => void;
     updateError: (error: any) => void;
   }) => {
+    const [uploadType, setUploadType] = useState<"base64" | "url">("base64");
     const [abortController, setAbortController] = useState<AbortController | null>(null);
     const [submitting, setSubmitting] = useState(false);
 
-    const handleImageUpload = async (file: File, fieldName: string) => {
-      const isJpgOrPng = file.type === "image/jpeg" || file.type === "image/png";
-      if (!isJpgOrPng) {
-        message.error("只能上传 JPG/PNG 文件!");
-        return false;
-      }
-      const isLt10M = file.size / 1024 / 1024 < 10;
-      if (!isLt10M) {
-        message.error("图片大小不能超过 10MB!");
-        return false;
-      }
-
-      const reader = new FileReader();
-      reader.readAsDataURL(file);
-      reader.onload = () => {
-        const base64 = (reader.result as string).split(",")[1];
-        props.form.setFieldsValue({ [fieldName]: base64 });
-      };
-      return false;
-    };
-
     return (
       <ProForm<KlingApiTypes["generateImage2VideoTask"]["req"]>
         {...PRO_FORM_PROPS}
@@ -352,19 +334,117 @@ const KlingPage = () => {
         <ProFormSelect name="mode" label="Mode" options={MODE_OPTIONS} />
         <ProFormRadio.Group name="duration" label="Duration" options={DURATION_OPTIONS} />
 
+        <ProFormRadio.Group
+          label="Upload Type"
+          options={[
+            { label: "Base64", value: "base64" },
+            { label: "URL", value: "url" },
+          ]}
+          fieldProps={{
+            value: uploadType,
+            onChange: (e) => setUploadType(e.target.value),
+          }}
+          tooltip={"上传图片的方式，支持base64和url两种方式"}
+        />
+
         <ProFormUploadButton
+          name="image"
+          label="Image"
           accept=".jpg,.jpeg,.png"
+          max={1}
+          tooltip={
+            <>
+              <p>支持传入图片Base64编码或图片URL（确保可访问）</p>
+              <p>图片格式支持.jpg / .jpeg / .png</p>
+              <p>图片文件大小不能超过10MB，图片分辨率不小于300*300px</p>
+            </>
+          }
+          action={uploadType === "url" ? appConfig.getUploadConfig().action : undefined}
           fieldProps={{
-            maxCount: 1,
+            listType: "picture-card",
+            beforeUpload: async (file) =>
+              await beforeUpload(
+                file,
+                [-1, 10],
+                [
+                  [300, 300],
+                  [-1, -1],
+                ],
+                (msg) => message.error(msg),
+              ),
+            ...(uploadType === "url" && {
+              headers: {
+                Authorization: appConfig.getUploadConfig().auth,
+              },
+              onChange: (info) => {
+                const getValueByPosition = (obj: any, position: readonly any[]) => {
+                  return position.reduce((acc, key) => acc && acc[key], obj);
+                };
+
+                if (info.file.status === "done") {
+                  try {
+                    const response = info.file.response;
+                    if (response) {
+                      info.file.url = getValueByPosition(response, appConfig.getUploadConfig().position);
+                    }
+                  } catch (e) {
+                    console.error(e);
+                  }
+                }
+              },
+            }),
           }}
         />
 
         <ProFormUploadButton
+          name="image_tail"
+          label="Image Tail"
           accept=".jpg,.jpeg,.png"
+          max={1}
+          tooltip={
+            <>
+              <p>支持传入图片Base64编码或图片URL（确保可访问）</p>
+              <p>图片格式支持.jpg / .jpeg / .png</p>
+              <p>图片文件大小不能超过10MB，图片分辨率不小于300*300px</p>
+            </>
+          }
+          action={uploadType === "url" ? appConfig.getUploadConfig().action : undefined}
           fieldProps={{
-            maxCount: 1,
+            listType: "picture-card",
+            beforeUpload: async (file) =>
+              await beforeUpload(
+                file,
+                [-1, 10],
+                [
+                  [300, 300],
+                  [-1, -1],
+                ],
+                (msg) => message.error(msg),
+              ),
+            ...(uploadType === "url" && {
+              headers: {
+                Authorization: appConfig.getUploadConfig().auth,
+              },
+              onChange: (info) => {
+                const getValueByPosition = (obj: any, position: readonly any[]) => {
+                  return position.reduce((acc, key) => acc && acc[key], obj);
+                };
+
+                if (info.file.status === "done") {
+                  try {
+                    const response = info.file.response;
+                    if (response) {
+                      info.file.url = getValueByPosition(response, appConfig.getUploadConfig().position);
+                    }
+                  } catch (e) {
+                    console.error(e);
+                  }
+                }
+              },
+            }),
           }}
         />
+
         <ProFormTextArea
           name="prompt"
           label="Prompt"
diff --git a/app/utils.ts b/app/utils.ts
@@ -1,4 +1,5 @@
 import Ajv from "ajv";
+import { Upload } from "antd";
 
 export function safeJsonParse(jsonString: any, defaultValue: object): object {
   if (typeof jsonString !== "string") return defaultValue;
@@ -188,3 +189,70 @@ export function CloseAllSound(audio?: any): void {
 export function noApiKeys(key: string): boolean {
   return key === "" || key === undefined || key === null;
 }
+
+/**
+ * @description 检查图片是否符合上传要求
+ * @param file 图片文件
+ * @param fileSizeLimit 图片大小限制，单位为MB，[最小值, 最大值]，-1表示不限制
+ * @param pxLimit 图片分辨率限制，单位为px，[[最小宽度, 最小高度], [最大宽度, 最大高度]], -1表示不限制
+ * @param onErrorMsg 错误信息回调函数
+ * @returns Promise<Upload.LIST_IGNORE | true>
+ */
+export const beforeUpload = async (
+  file: File,
+  fileSizeLimit: number[],
+  pxLimit: number[][],
+  onErrorMsg: (msg: string) => void,
+): Promise<true | any> => {
+  // 检查是否矛盾
+  if (fileSizeLimit[0] !== -1 && fileSizeLimit[1] !== -1 && fileSizeLimit[0] > fileSizeLimit[1]) {
+    onErrorMsg(`图片大小限制矛盾!`);
+    return Upload.LIST_IGNORE;
+  }
+  if (pxLimit[0][0] !== -1 && pxLimit[1][0] !== -1 && pxLimit[0][0] > pxLimit[1][0]) {
+    onErrorMsg(`图片分辨率(宽)限制矛盾!`);
+    return Upload.LIST_IGNORE;
+  }
+  if (pxLimit[0][1] !== -1 && pxLimit[1][1] !== -1 && pxLimit[0][1] > pxLimit[1][1]) {
+    onErrorMsg(`图片分辨率(高)限制矛盾!`);
+    return Upload.LIST_IGNORE;
+  }
+  // 检查图片大小是否在限制范围内
+  const fileSizeMb = file.size / 1024 / 1024;
+  if (fileSizeLimit[0] !== 0 && fileSizeMb < fileSizeLimit[0]) {
+    onErrorMsg(`图片大小不能小于 ${fileSizeLimit[0]}MB!`);
+    return Upload.LIST_IGNORE;
+  } else if (fileSizeMb > fileSizeLimit[1]) {
+    onErrorMsg(`图片大小不能大于 ${fileSizeLimit[1]}MB!`);
+    return Upload.LIST_IGNORE;
+  }
+
+  const getImageSize = (file: File): Promise<number[]> => {
+    return new Promise((resolve, reject) => {
+      const img = new Image();
+      img.src = URL.createObjectURL(file);
+      img.onload = () => {
+        const { width, height } = img;
+        console.log("image size", width, height);
+        URL.revokeObjectURL(img.src);
+        resolve([width, height]);
+      };
+      img.onerror = () => {
+        console.log("image error");
+        URL.revokeObjectURL(img.src);
+        reject(new Error("Failed to load image"));
+      };
+    });
+  };
+
+  // 检查图片尺寸是否在限制范围内
+  const [width, height] = await getImageSize(file);
+  if ((pxLimit[0][0] !== -1 && width < pxLimit[0][0]) || (pxLimit[0][1] !== -1 && height < pxLimit[0][1])) {
+    onErrorMsg(`图片分辨率不能小于 ${pxLimit[0][0]}px*${pxLimit[0][1]}px (当前: ${width}px*${height}px)`);
+    return Upload.LIST_IGNORE;
+  } else if ((pxLimit[1][0] !== -1 && width > pxLimit[1][0]) || (pxLimit[1][1] !== -1 && height > pxLimit[1][1])) {
+    onErrorMsg(`图片分辨率不能大于 ${pxLimit[1][0]}px*${pxLimit[1][1]}px (当前: ${width}px*${height}px)`);
+    return Upload.LIST_IGNORE;
+  }
+  return true;
+};
