大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

1.什么是 nsfwjs

nsfwjs 是一个简单的 JavaScript 库，帮助用户快速识别不合时宜的图像。而且一切都在客户端的浏览器中完成。 NSFWJS 虽然并不完美，但它相当准确（小型模型约为 90%，中型模型约为 93%），并且也一直在变得越来越准确。

NSFW detection on the client-side via TensorFlow.js

nsfwjs 库将图像概率分为以下 5 类：

• 绘图 - 工作绘图安全，包括：动漫
• Hentai - 无尽和色情图画
• 中性 - 工作安全中性图像
• 色情 - 色情图片、性行为
• 性感 - 露骨的色情图片，而不是色情内容

NSFWJS 将 TensorFlow.js 作为对等依赖项（peer dependency）提供支持。如果项目未安装 TFJS 则需要手动添加。

//  peer dependency
yarn add @tensorflow/tfjs
//  install NSFWJS
yarn add nsfwjs

对于脚本标签，添加 <script type="text/javascript" src="https://unpkg.com/nsfwjs">。然后只需访问 nsfwjs 全局变量即可，当然前提是已经导入 TensorFlow.js。

目前 nsfwjs 在 Github 通过 MIT 协议开源，有超过 7.3k 的 star、1.9k 的项目依赖量，是一个值得关注的前端开源项目。

2.如何使用 nsfwjs

2.1 基础用法

nsfwjs 支持 async/await 语法，使用起来非常方便：

import * as nsfwjs from 'nsfwjs'

const img = document.getElementById('img')

// 从 S3 加载模型。
// 请参阅在您的站点上托管模型文件的部分
const model = await nsfwjs.load()

// 图片分类
const predictions = await model.classify(img)
console.log('Predictions:', predictions)

2.2 加载内容 load

nsfwjs 还支持丰富的 API，比如 load。在对任何图像进行分类之前，需要加载模型。可以使用可选的第一个参数并从网站加载模型。

const model = nsfwjs.load('/path/to/model/directory/')

如果使用的模型需要尺寸不是 224x224 的图像，则可以在 options 参数中传递尺寸：

const model = nsfwjs.load('/path/to/different/model/', { size: 299})

如果使用的是图模型，则无法使用 infer 方法，并且需要告诉模型加载正在选项中处理图模型：

const model = nsfwjs.load('/path/to/different/model/', { type: 'graph'})

如果在浏览器中使用并且希望随后从索引数据库或本地存储加载，可以使用适当的方案保存底层模型并从那里加载。

const initialLoad = await nsfwjs.load('/path/to/different/model')
await initialLoad.model.save('indexeddb://model')
const model = await nsfwjs.load('indexeddb://model')

2.3 classify 分类

classify 函数可以采用任何基于浏览器的图像元素，例如：<img>、<video>、<canvas > 并返回最可能的预测及其置信度的数组。

// Return top 3 guesses (instead of all 5)
const predictions = await model.classify(img, 3)

2.4 生产环境部署

Tensorflow.js 提供两个标志：enableProdMode 和 enableDebugMode。如果要在生产中使用 NSFWJS，请务必在加载 NSFWJS 模型之前启用生产模式。

import * as tf from '@tensorflow/tfjs'
import * as nsfwjs from 'nsfwjs'
tf.enableProdMode()
// 其他代码
let model = await nsfwjs.load(`${urlToNSFWJSModel}`)

3.在 Node.js 中使用 nsfwjs

借助于 NPM，开发者还可以在服务器端使用该模型：

$ npm install nsfwjs
$ npm install @tensorflow/tfjs-node

const axios = require('axios')
// 可以使用任何 HTTP 客户端
const tf = require('@tensorflow/tfjs-node')
const nsfw = require('nsfwjs')
async function fn() {
  const pic = await axios.get(`link-to-picture`, {
    responseType: 'arraybuffer',
  })
  const model = await nsfw.load()
  // 加载本地模型
  const image = await tf.node.decodeImage(pic.data,3)
  const predictions = await model.classify(image)
  image.dispose()
   // Tensor 内存必须显式管理（让 tf.Tensor 超出其内存释放范围是不够的）
  console.log(predictions)
}
fn()

下面是使用 Express 的 multipart/form-data POST 的另一个完整示例，假设使用的是 JPG 格式。

const express = require('express')
const multer = require('multer')
const jpeg = require('jpeg-js')

const tf = require('@tensorflow/tfjs-node')
const nsfw = require('nsfwjs')

const app = express()
const upload = multer()

let _model
const convert = async (img) => {
  // UInt8 字节数组中的解码图像
  const image = await jpeg.decode(img, { useTArray: true})
  const numChannels = 3
  const numPixels = image.width * image.height
  const values = new Int32Array(numPixels * numChannels)
  for (let i = 0; i < numPixels; i++)
    for (let c = 0; c < numChannels; ++c)
      values[i * numChannels + c] = image.data[i * 4 + c]
  return tf.tensor3d(values, [image.height, image.width, numChannels], 'int32')
}

app.post('/nsfw', upload.single('image'), async (req, res) => {
  if (!req.file) res.status(400).send('Missing image multipart/form-data')
  else {
    const image = await convert(req.file.buffer)
    const predictions = await _model.classify(image)
    image.dispose()
    res.json(predictions)
  }
})

const load_model = async () => {
  _model = await nsfw.load()
}
// 将模型保留在内存中，确保仅加载一次
load_model().then(() => app.listen(8080))
// 调用模型 curl --request POST localhost:8080/nsfw --header 'Content-Type: multipart/form-data' --data-binary 'image=@/full/path/to/picture.jpg'

开发者还可以使用 lovell/sharp 进行预处理任务和更多文件格式。

lovell/sharp 高速 Node-API 模块的典型用例是将常见格式的大图像转换为较小的、网络友好的不同尺寸的 JPEG、PNG、WebP、GIF 和 AVIF 图像。可与所有支持 Node-API v9 的 JavaScript 运行时一起使用，包括 Node.js（^18.17.0 或 >= 20.3.0）、Deno 和 Bun。

• 由于使用了 libvips，调整图像大小通常比使用最快的 ImageMagick 和 GraphicsMagick 设置快 4 倍到 5 倍。
• 色彩空间、嵌入式 ICC 配置文件和 Alpha 透明度通道均已正确处理。 Lanczos 重采样确保不会为了速度而牺牲质量。
• 除了图像大小调整之外，还可以进行旋转、提取、合成和伽玛校正等操作。
• 大多数现代 macOS、Windows 和 Linux 系统不需要任何额外的安装或运行时依赖项。

4.本文总结

本文主要和大家介绍 nsfwjs ，其是一个简单的 JavaScript 库，帮助用户快速识别不合时宜的图像，而且一切都在客户端的浏览器中完成。因为篇幅问题，关于 nsfwjs 只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/infinitered/nsfwjs

https://www.edenai.co/post/how-to-use-explicit-content-detection-api-with-javascript-in-5-minutes

https://github.com/lovell/sharp

https://nsfwjs.com/