diff --git a/components.d.ts b/components.d.ts index 4148205..16e712a 100644 --- a/components.d.ts +++ b/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'] diff --git a/package.json b/package.json index 8f33633..1785a06 100644 --- a/package.json +++ b/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" } } } diff --git a/src/api/file/index.ts b/src/api/storage/index.ts similarity index 74% rename from src/api/file/index.ts rename to src/api/storage/index.ts index 772544b..15ff93c 100644 --- a/src/api/file/index.ts +++ b/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, diff --git a/src/store/modules/commentStore.ts b/src/store/modules/commentStore.ts index d5c7854..1a8c344 100644 --- a/src/store/modules/commentStore.ts +++ b/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"; diff --git a/src/store/modules/uploadStore.ts b/src/store/modules/uploadStore.ts index 2e69ed2..0b5bc84 100644 --- a/src/store/modules/uploadStore.ts +++ b/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(false); + const exifData = ref(); const predictResult = reactive({ 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: [] } diff --git a/src/store/modules/upscaleStore.ts b/src/store/modules/upscaleStore.ts index b65613c..fe90b06 100644 --- a/src/store/modules/upscaleStore.ts +++ b/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"; diff --git a/src/utils/imageUtils/isScreenshot.ts b/src/utils/imageUtils/isScreenshot.ts new file mode 100644 index 0000000..6375f2f --- /dev/null +++ b/src/utils/imageUtils/isScreenshot.ts @@ -0,0 +1,88 @@ +import exifr from 'exifr'; + +/** + * 判断图片是否是截图 + * @param {File} file - 要判断的图片文件 + * @returns {Promise} - 返回是否是截图 + */ +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; diff --git a/src/utils/nsfw/nsfw.ts b/src/utils/tfjs/nsfw.ts similarity index 98% rename from src/utils/nsfw/nsfw.ts rename to src/utils/tfjs/nsfw.ts index e0383a3..9f3d568 100644 --- a/src/utils/nsfw/nsfw.ts +++ b/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 }; // 使用一个变量来确定是否为色情内容 diff --git a/src/views/Photograph/ImageUpload/ImageUpload.vue b/src/views/Photograph/ImageUpload/ImageUpload.vue index 227e0ab..aa29f3c 100644 --- a/src/views/Photograph/ImageUpload/ImageUpload.vue +++ b/src/views/Photograph/ImageUpload/ImageUpload.vue @@ -36,7 +36,8 @@

AI 正在识别图片，请稍候...

- @@ -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(false); const progressPercent = ref(0); +const progressStatus = ref('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 检测 - const nsfw: NSFWJS = await initNSFWJs(); - await smoothUpdateProgress(10, 500); // 平滑更新进度条 + try { + // NSFW 检测 + const nsfw: NSFWJS = await initNSFWJs(); + await smoothUpdateProgress(30, 500); // 平滑更新进度条 - const isNSFW: boolean = await predictNSFW(nsfw, image); - await smoothUpdateProgress(20, 500); // 平滑更新进度条 + const isNSFW: boolean = await predictNSFW(nsfw, image); + await smoothUpdateProgress(50, 500); // 平滑更新进度条 - if (isNSFW) { - message.error(i18n.global.t('comment.illegalImage')); + if (isNSFW) { + 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({ - uid: file.file.uid, - fileName: file.file.name, // 添加文件名 - fileType: file.file.type, // 添加文件类型 - detectionResult: upload.predictResult, + formData.append("data", JSON.stringify({ + fileType: file.file.type, + ...upload.predictResult, + exif: JSON.stringify(upload.exifData) || '', })); 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} - 返回所有 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; + } +} +