✨ add image EXIF information extraction function

components.d.ts

@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AAvatar: typeof import('ant-design-vue/es')['Avatar']
+    AAvatarGroup: typeof import('ant-design-vue/es')['AvatarGroup']
     ABadge: typeof import('ant-design-vue/es')['Badge']
     AButton: typeof import('ant-design-vue/es')['Button']
     ACard: typeof import('ant-design-vue/es')['Card']

package.json

@@ -31,7 +31,7 @@
     "@types/animejs": "^3.1.12",
     "@types/crypto-js": "^4.2.2",
     "@types/json-stringify-safe": "^5.0.3",
-    "@types/node": "^22.10.6",
+    "@types/node": "^22.10.7",
     "@types/nprogress": "^0.2.3",
     "@vladmandic/face-api": "^1.7.14",
     "@vuepic/vue-datepicker": "^11.0.1",
@@ -46,15 +46,16 @@
     "crypto-js": "^4.2.0",
     "echarts": "^5.6.0",
     "eslint": "9.18.0",
+    "exifr": "^7.1.3",
     "go-captcha-vue": "^2.0.5",
-    "gsap": "^3.12.5",
+    "gsap": "^3.12.7",
     "jsencrypt": "^3.3.2",
     "json-stringify-safe": "^5.0.1",
-    "less": "^4.2.1",
+    "less": "^4.2.2",
     "localforage": "^1.10.0",
     "nprogress": "^0.2.0",
     "nsfwjs": "^4.2.1",
-    "pinia": "^2.3.0",
+    "pinia": "^2.3.1",
     "pinia-plugin-persistedstate-2": "^2.0.28",
     "qrcode": "^1",
     "seedrandom": "^3.0.5",
@@ -62,7 +63,7 @@
     "unplugin-auto-import": "^19.0.0",
     "vite-plugin-compression": "^0.5.1",
     "vite-plugin-html": "^3.2.2",
-    "vite-plugin-node-polyfills": "^0.22.0",
+    "vite-plugin-node-polyfills": "^0.23.0",
     "vue": "^3.5.13",
     "vue-dompurify-html": "^5.2.0",
     "vue-i18n": "^11.0.1",
@@ -75,21 +76,18 @@
     "@vitejs/plugin-vue": "^5.2.1",
     "eslint-plugin-vue": "^9.32.0",
     "globals": "^15.14.0",
-    "sass": "^1.83.3",
+    "sass": "^1.83.4",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.20.0",
     "unplugin-vue-components": "^28.0.0",
-    "vite": "^6.0.7",
+    "vite": "^6.0.9",
     "vite-plugin-bundle-obfuscator": "1.4.0",
     "vite-plugin-chunk-split": "^0.5.0",
     "vue-tsc": "2.2.0"
   },
   "overrides": {
-    "vite-plugin-node-polyfills": {
-      "vite": "^6.0.7"
-    },
     "vite-plugin-chunk-split": {
-      "vite": "^6.0.7"
+      "vite": "^6.0.9"
     }
   }
 }

src/api/storage/index.ts

@@ -1,7 +1,7 @@
 import {service} from "@/utils/alova/service.ts";
 
 export const uploadFile = (formData) => {
-    return service.Post('/api/auth/file/uploads', formData, {
+    return service.Post('/api/auth/storage/uploads', formData, {
         meta: {
             ignoreToken: false,
             signature: false,

src/store/modules/commentStore.ts

@@ -5,7 +5,7 @@ import {cancelCommentLikeApi, commentLikeApi, commentListApi, replyListApi} from
 import {message} from "ant-design-vue";
 import {getSlideCaptchaDataApi} from "@/api/captcha";
 import QQ_EMOJI from "@/constant/qq_emoji.ts";
-import {initNSFWJs, predictNSFW} from "@/utils/nsfw/nsfw.ts";
+import {initNSFWJs, predictNSFW} from "@/utils/tfjs/nsfw.ts";
 import {NSFWJS} from "nsfwjs";
 import i18n from "@/locales";
 import localForage from "localforage";

src/store/modules/uploadStore.ts

@@ -1,8 +1,12 @@
+import localforage from 'localforage';
+
 interface UploadPredictResult {
     isAnime: boolean;
     hasFace: boolean;
     objectArray: string[] | unknown[];
-    landscape: 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | 'none' | undefined;
+    landscape: 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | 'none';
+    isScreenshot: boolean;
+    topCategory: string | undefined;
 }
 
 
@@ -11,11 +15,14 @@ export const useUploadStore = defineStore(
     () => {
         const openUploadDrawer = ref<boolean>(false);
 
+        const exifData = ref<any>();
         const predictResult = reactive<UploadPredictResult>({
             isAnime: false,
             hasFace: false,
             objectArray: [],
-            landscape: undefined as 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | 'none' | undefined,
+            landscape: 'none',
+            isScreenshot: false,
+            topCategory: ''
         });
 
         /**
@@ -32,21 +39,25 @@ export const useUploadStore = defineStore(
             predictResult.isAnime = false;
             predictResult.hasFace = false;
             predictResult.objectArray = [];
-            predictResult.landscape = undefined;
+            predictResult.landscape = 'none';
+            predictResult.isScreenshot = false;
+            predictResult.topCategory = '';
         }
 
+
         return {
             openUploadDrawer,
             predictResult,
+            exifData,
             openUploadDrawerFn,
-            clearPredictResult
+            clearPredictResult,
         };
     },
     {
         // 开启数据持久化
         persistedState: {
             persist: false,
-            storage: localStorage,
+            storage: localforage,
             key: 'upload',
             includePaths: []
         }

src/store/modules/upscaleStore.ts

@@ -1,5 +1,5 @@
 import {defineStore} from 'pinia';
-import {initNSFWJs, predictNSFW} from "@/utils/nsfw/nsfw.ts";
+import {initNSFWJs, predictNSFW} from "@/utils/tfjs/nsfw.ts";
 import i18n from "@/locales";
 
 import {NSFWJS} from "nsfwjs";

src/utils/imageUtils/isScreenshot.ts

@@ -0,0 +1,88 @@
+import exifr from 'exifr';
+
+/**
+ * 判断图片是否是截图
+ * @param {File} file - 要判断的图片文件
+ * @returns {Promise<boolean>} - 返回是否是截图
+ */
+async function isScreenshot(file) {
+    // 常见屏幕宽高比
+    const commonAspectRatios = [16 / 9, 16 / 10, 4 / 3, 3 / 2, 1];
+    const aspectRatioTolerance = 0.02; // 容差，用于宽高比校验
+    const maxScreenshotSizeMB = 2; // 截图通常较小，限制最大 2MB
+
+    // 文件名关键词（大小写不敏感）
+    const screenshotFilenameKeywords = [
+        'screenshot', '屏幕截图', '截屏', 'Snip', 'Capture', 'Snapshot', '截图'
+    ];
+
+    try {
+        // 文件名匹配
+        const fileName = file.name.toLowerCase();
+        const matchesFilename = screenshotFilenameKeywords.some(keyword =>
+            fileName.includes(keyword.toLowerCase())
+        );
+        if (matchesFilename) {
+            return true; // 如果文件名包含截图相关关键词，直接判断为截图
+        }
+
+        // 提取 EXIF 数据
+        const exifData = await exifr.parse(file, ['ImageWidth', 'ImageHeight', 'Software', 'XResolution', 'YResolution']);
+        const {ImageWidth, ImageHeight, Software} = exifData || {};
+
+        // 如果图片没有宽高信息，直接返回 false
+        if (!ImageWidth || !ImageHeight) {
+            return false;
+        }
+
+        // 校验宽高比是否接近常见屏幕比例
+        const aspectRatio = Math.max(ImageWidth, ImageHeight) / Math.min(ImageWidth, ImageHeight);
+        const matchesAspectRatio = commonAspectRatios.some(
+            (ratio) => Math.abs(ratio - aspectRatio) <= aspectRatioTolerance
+        );
+
+        // 如果宽高比匹配，进一步检查
+        if (matchesAspectRatio) {
+            // 检查软件标记是否与截图工具相关
+            const screenshotSoftwareKeywords = ['Screenshot', 'Snipping Tool', 'Screen Capture', 'Grab', 'Sketch'];
+            if (Software && screenshotSoftwareKeywords.some((keyword) => Software.includes(keyword))) {
+                return true;
+            }
+
+            // 检查文件大小（截图通常较小）
+            const fileSizeMB = file.size / (1024 * 1024);
+            if (fileSizeMB <= maxScreenshotSizeMB) {
+                return true;
+            }
+        }
+
+        // 无 EXIF 数据或不匹配时，通过宽高比的容差检测
+        const img: any = await getImageDimensions(file);
+        const imgAspectRatio = img.width / img.height;
+        const imgMatchesAspectRatio = commonAspectRatios.some(
+            (ratio) => Math.abs(ratio - imgAspectRatio) <= aspectRatioTolerance
+        );
+
+        return imgMatchesAspectRatio;
+
+    } catch (error) {
+        console.error('判断截图时发生错误:', error);
+        return false;
+    }
+}
+
+/**
+ * 获取图片的宽高信息（无 EXIF 时使用）
+ * @param {File} file
+ * @returns {Promise<{width: number, height: number}>}
+ */
+function getImageDimensions(file) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve({width: img.width, height: img.height});
+        img.onerror = reject;
+        img.src = URL.createObjectURL(file);
+    });
+}
+
+export default isScreenshot;

src/utils/tfjs/nsfw.ts

@@ -29,9 +29,9 @@ const predictNSFW = async (model: NSFWJS, image: tf.Tensor3D | ImageData | HTMLI
     const predictions = await model.classify(image, 5);
     // 定义阈值与对应的类别
     const thresholds = {
-        'Porn': 0.5,
+        'Porn': 0.6,
         'Hentai': 0.3,
-        'Sexy': 0.5
+        'Sexy': 0.6
     };
 
     // 使用一个变量来确定是否为色情内容

src/views/Photograph/ImageUpload/ImageUpload.vue

@@ -36,7 +36,8 @@
         <p v-show="predicting" class="ant-upload-hint">
           AI 正在识别图片，请稍候...
         </p>
-        <AProgress :stroke-color="{'0%': '#108ee9','100%': '#87d068',}" :percent="progressPercent" status="active"
+        <AProgress :stroke-color="{'0%': '#108ee9','100%': '#87d068',}" :percent="progressPercent"
+                   :status="progressStatus"
                    :show-info="true" size="small" type="line" v-show="predicting" style="width: 80%"/>
       </AUploadDragger>
     </div>
@@ -46,20 +47,32 @@
 import useStore from "@/store";
 import type {UploadProps} from 'ant-design-vue';
 import {message} from "ant-design-vue";
-import {initNSFWJs, predictNSFW} from "@/utils/nsfw/nsfw.ts";
+import {initNSFWJs, predictNSFW} from "@/utils/tfjs/nsfw.ts";
 import i18n from "@/locales";
 
 import {NSFWJS} from "nsfwjs";
-import {animePredictImage} from "@/utils/tfjs/anime_classifier.ts";
 import {animePredictImagePro} from "@/utils/tfjs/anime_classifier_pro.ts";
 import {fnDetectFace} from "@/utils/tfjs/face_extraction.ts";
 import {cocoSsdPredict} from "@/utils/tfjs/mobilenet.ts";
 import {predictLandscape} from "@/utils/tfjs/landscape_recognition.ts";
 import {useRequest} from 'alova/client';
-import {uploadFile} from "@/api/file";
+import {uploadFile} from "@/api/storage";
+import imageCompression from "browser-image-compression";
+import exifr from 'exifr';
+import isScreenshot from "@/utils/imageUtils/isScreenshot.ts";
+import {getCategoryByLabel} from "@/constant/coco_ssd_label_category.ts";
 
 const predicting = ref<boolean>(false);
 const progressPercent = ref<number>(0);
+const progressStatus = ref<string>('active');
+
+// 压缩图片配置
+const options = {
+  maxSizeMB: 0.4,
+  maxWidthOrHeight: 750,
+  maxIteration: 2,
+  useWebWorker: true,
+};
 
 const upload = useStore().upload;
 const image: HTMLImageElement = document.createElement('img');
@@ -84,9 +97,11 @@ async function beforeUpload(file: File) {
   predicting.value = true;
   upload.clearPredictResult();
   progressPercent.value = 0; // 初始化进度条
-
+  progressStatus.value = 'active'; // 开始状态
+  // 压缩图片
+  const compressedFile = await imageCompression(file, options);
   // 创建图片对象
-  image.src = URL.createObjectURL(file);
+  image.src = URL.createObjectURL(compressedFile);
 
   image.addEventListener('webglcontextlost', (_event) => {
     window.location.reload();
@@ -107,54 +122,86 @@ async function beforeUpload(file: File) {
     });
   };
 
-  // 图片 NSFW 检测
+  try {
-  const nsfw: NSFWJS = await initNSFWJs();
+    // NSFW 检测
-  await smoothUpdateProgress(10, 500); // 平滑更新进度条
+    const nsfw: NSFWJS = await initNSFWJs();
+    await smoothUpdateProgress(30, 500); // 平滑更新进度条
 
-  const isNSFW: boolean = await predictNSFW(nsfw, image);
+    const isNSFW: boolean = await predictNSFW(nsfw, image);
-  await smoothUpdateProgress(20, 500); // 平滑更新进度条
+    await smoothUpdateProgress(50, 500); // 平滑更新进度条
 
-  if (isNSFW) {
+    if (isNSFW) {
-    message.error(i18n.global.t('comment.illegalImage'));
+      message.error(i18n.global.t('comment.illegalImage'));
+      predicting.value = false;
+      progressPercent.value = 100; // 重置进度条
+      progressStatus.value = 'exception'; // 异常状态
+      return false;
+    }
+
+    // 提取 EXIF 数据
+    const exifData = await extractAllExifData(file);
+    if (exifData) {
+      upload.exifData = exifData;
+    }
+
+    // 判断是否为截图
+    upload.predictResult.isScreenshot = await isScreenshot(file);
+
+    // 动漫类型识别
+    const prediction: string = await animePredictImagePro(image);
+    await smoothUpdateProgress(70, 500); // 平滑更新进度条
+
+    // 如果是动漫类型，直接返回
+    if ((prediction === 'Furry' || prediction === 'Anime')) {
+      upload.predictResult.isAnime = true;
+      predicting.value = false;
+      progressPercent.value = 100; // 直接完成
+      return true;
+    }
+    // 人脸检测
+    const faceImageData = await fnDetectFace(image);
+    if (faceImageData) {
+      upload.predictResult.hasFace = true;
+      predicting.value = false;
+      progressPercent.value = 100; // 直接完成
+      return true;
+    }
+    //目标检测和风景检测并行处理
+    const [cocoResults, landscape] = await Promise.all([
+      cocoSsdPredict(image), // 目标检测
+      predictLandscape(image), // 风景检测
+    ]);
+    await smoothUpdateProgress(100, 500); // 平滑更新进度条
+
+    if (cocoResults.length > 0) {
+      // 取置信度最高的结果
+      // 如果只有一个结果，直接取第一个
+      if (cocoResults.length === 1) {
+        upload.predictResult.topCategory = getCategoryByLabel(cocoResults[0].class);
+      } else {
+        // 多个结果时，按 score 排序，取置信度最高的结果
+        const sortedResults = cocoResults.sort((a, b) => b.score - a.score);
+        upload.predictResult.topCategory = getCategoryByLabel(sortedResults[0].class);
+      }
+      const classSet = new Set(cocoResults.map(result => result.class));
+      upload.predictResult.objectArray = Array.from(classSet);
+    }
+    upload.predictResult.landscape = landscape as 'building' | 'forest' | 'glacier' | 'mountain' | 'sea' | 'street' | 'none';
+
+    predicting.value = false;
+    return true;
+
+  } catch (error) {
+    console.error('识别过程中发生错误:', error);
     predicting.value = false;
     progressPercent.value = 0; // 重置进度条
     return false;
+  } finally {
+    image.removeEventListener('webglcontextlost', () => void 0);
   }
-
-  // Step 1: 动漫预测
-  const prediction1 = await animePredictImage(image);
-  await smoothUpdateProgress(40, 500); // 平滑更新进度条
-
-  const prediction2 = await animePredictImagePro(image);
-  await smoothUpdateProgress(60, 500); // 平滑更新进度条
-
-  upload.predictResult.isAnime = prediction1 === 'Anime' && (prediction2 === 'Furry' || prediction2 === 'Anime');
-
-  // Step 2: 人脸检测
-  const faceImageData = await fnDetectFace(image);
-  await smoothUpdateProgress(80, 500); // 平滑更新进度条
-
-  upload.predictResult.hasFace = !!faceImageData;
-
-  // Step 3: 目标识别
-  const cocoResults = await cocoSsdPredict(image);
-  await smoothUpdateProgress(90, 500); // 平滑更新进度条
-
-  if (cocoResults.length > 0) {
-    const classSet = new Set(cocoResults.map(result => result.class));
-    upload.predictResult.objectArray = Array.from(classSet);
-  }
-
-  // Step 4: 风景识别
-  upload.predictResult.landscape = await predictLandscape(image);
-  await smoothUpdateProgress(100, 500); // 平滑更新进度条
-
-  // 完成
-  predicting.value = false;
-  image.removeEventListener('webglcontextlost', () => void 0);
-  return true;
 }
 
+
 const {uploading, send: submitFile, abort} = useRequest(uploadFile, {
   immediate: false,
   debounce: 500,
@@ -168,11 +215,10 @@ async function customUploadRequest(file: any) {
 
   const formData = new FormData();
   formData.append("file", file.file);
-  formData.append("result", JSON.stringify({
+  formData.append("data", JSON.stringify({
-    uid: file.file.uid,
+    fileType: file.file.type,
-    fileName: file.file.name, // 添加文件名
+    ...upload.predictResult,
-    fileType: file.file.type, // 添加文件类型
+    exif: JSON.stringify(upload.exifData) || '',
-    detectionResult: upload.predictResult,
   }));
   watch(
       () => uploading.value,
@@ -183,7 +229,11 @@ async function customUploadRequest(file: any) {
       },
   );
   submitFile(formData).then((response: any) => {
-    file.onSuccess(response.data, file);
+    if (response && response.code === 200) {
+      file.onSuccess(response.data, file);
+    } else {
+      file.onError(response.data, file);
+    }
   }).catch(file.onError);
 }
 
@@ -206,6 +256,29 @@ function removeFile(file: any) {
   fileList.value = fileList.value.filter((item: any) => item.uid !== file.uid);
 }
 
+
+/**
+ * 提取 EXIF 数据
+ * @param {File} file - 图片文件
+ * @returns {Promise<Object|null>} - 返回所有 EXIF 数据或 null（如果格式不支持或提取失败）
+ */
+async function extractAllExifData(file) {
+  const supportedFormats = ['image/jpeg', 'image/tiff', 'image/iiq', 'image/heif', 'image/heic', 'image/avif', 'image/png'];
+
+  // 判断文件格式是否支持
+  if (!supportedFormats.includes(file.type)) {
+    return null;
+  }
+
+  try {
+    // 提取所有 EXIF 数据
+    return await exifr.parse(file, {ifd0: false, exif: true} as any);
+  } catch (error) {
+    console.error("提取 EXIF 数据失败:", error);
+    return null;
+  }
+}
+
 </script>
 <style lang="less" scoped>