nsfwjs

<img src="https://yellow-cdn.veclightyear.com/835a84d5/11f944fa-7aeb-4aed-bdcf-331ca7f68665.jpg" alt="NSFWJS标志" width="400" /> <h2 align="center">客户端不雅内容检查</h2>

这是一个简单的JavaScript库，可以帮助您在客户端浏览器中快速识别不雅图像。NSFWJS并不完美，但它相当准确（小型模型约90%，中型模型约93%的准确率）...而且它正在变得越来越准确。

为什么这会有用？查看公告博文。

注意

如果您尝试访问Cloudfront托管的模型并遇到错误，很可能是因为模型已被移动到新位置。请查看我们的自行托管模型部分。在处理一些热链接问题后，我们将恢复模型的访问。

快速：如何使用该模块

支持async/await：

import * as nsfwjs from "nsfwjs";

const img = document.getElementById("img");

// 如果您想自行托管模型或使用不同于可用模型的模型，请参阅"自行托管模型"部分。
const model = await nsfwjs.load();

// 对图像进行分类
const predictions = await model.classify(img);
console.log("预测结果：", predictions);

不支持async/await：

import * as nsfwjs from "nsfwjs";

const img = document.getElementById("img");

// 如果您想自行托管模型或使用不同于可用模型的模型，请参阅"自行托管模型"部分。
nsfwjs
  .load()
  .then(function (model) {
    // 对图像进行分类
    return model.classify(img);
  })
  .then(function (predictions) {
    console.log("预测结果：", predictions);
  });

库API

`加载`模型

在分类任何图像之前，您需要加载模型。

const model = nsfwjs.load(); // 默认："MobileNetV2"

您可以使用可选的第一个参数来指定要使用的模型，从三个捆绑在一起的模型中选择。默认为："MobileNetV2"。这支持在Webpack等支持的打包工具上进行树摇优化，因此您只会加载您正在使用的模型。

const model = nsfwjs.load("MobileNetV2Mid"); // "MobileNetV2" | "MobileNetV2Mid" | "InceptionV3"

您还可以使用相同的参数从您的网站/服务器加载模型，如自行托管模型部分所解释的那样。这样做可以将加载模型的包大小减少约1.33倍（33%），因为您可以直接使用二进制文件而不是与包一起捆绑的base64。例如，捆绑到包中的"MobileNetV2"模型为3.5MB，而托管的二进制文件为2.6MB。这只会在客户端浏览器上每次加载模型时（不使用缓存）产生差异，因为在服务器端，您只会在服务器启动时加载一次模型。

MobileNetV2模型 - 224x224

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

如果您使用的模型需要224x224以外的图像尺寸，您可以在选项参数中传递大小。

MobileNetV2Mid模型 - 299x299

const model = nsfwjs.load("/path/to/model/", { size: 299 });
/* 您可能需要使用图形类型加载此模型 */
const model = nsfwjs.load("/path/to/model/", { type: 'graph' });

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

InceptionV3模型 - 图形

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

缓存

如果您在浏览器中使用，并希望随后从IndexedDB或本地存储加载（注意：模型大小可能太大，无法存储在本地存储中！），您可以使用适当的方案保存底层模型，并从那里加载。

const initialLoad = await nsfwjs.load(
  "/path/to/different/model/" /*, { ...options }*/
);
await initialLoad.model.save("indexeddb://exampleModel");
const model = await nsfwjs.load("indexeddb://exampleModel" /*, { ...options }*/);

参数

初始加载：

包含model.json的文件夹的URL或路径。
可选对象，包含您的模型期望的大小或类型属性。

后续加载：

IndexedDB路径。
可选对象，包含您的模型期望的大小或类型属性。

返回值

准备使用的NSFWJS模型对象

故障排除

在加载模型的标签页上，检查元素并导航到"应用程序"标签。在左侧窗格的"存储"部分下，有一个名为"IndexedDB"的子部分。在这里您可以查看模型是否正在保存。

`分类`图像

此函数可以接受任何基于浏览器的图像元素（<img>、<video>、<canvas>），并返回最可能的预测及其置信度水平的数组。

// 返回前3个猜测（而不是所有5个）
const predictions = await model.classify(img, 3);

参数

张量、图像数据、图像元素、视频元素或画布元素进行检查
要返回的结果数量（默认为所有5个）

返回值

包含className和probability的对象数组。数组大小由classify函数的第二个参数决定。

生产环境

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}`);

注意： 在转移到生产环境之前，请考虑下载并自行托管模型，如自行托管模型部分所述。这可能会改善模型的初始加载时间。此外，如果您在浏览器中使用，请考虑缓存模型。

安装

NSFWJS以TensorFlow.js作为对等依赖。如果您的项目尚未包含TFJS，您需要添加它。

# 对等依赖
$ yarn add @tensorflow/tfjs
# 安装NSFWJS
$ yarn add nsfwjs

对于脚本标签，请包含所有捆绑包，如此处所示。然后简单地访问nsfwjs全局变量。这要求您已经导入了TensorFlow.js。

自行托管模型

NSFWJS的魔力来自NSFW检测模型。默认情况下，模型已被打包到这个包中。但你可能想在自己的服务器上托管模型，以通过加载原始二进制文件来减少包大小，或者托管你自己的自定义模型。如果你想托管自己版本的模型文件，可以按照以下步骤操作。然后你可以在load函数中传递托管文件的相对URL，必要时还可以传递options。

以下是如何在网站上安装默认模型：

通过下载zip文件或克隆git clone https://github.com/infinitered/nsfwjs.git来下载项目。如果下载zip文件不起作用，请使用克隆。
从项目根目录提取models文件夹，并将其放入网络应用程序的public目录中，以便与你的网站一起作为静态文件提供服务。（你可以将其托管在任何地方，比如S3存储桶，只要你可以通过URL访问它即可）。
获取URL并将其放入nsfwjs.load()中。例如：nsfwjs.load(https://yourwebsite.com/models/mobilenet_v2/model.json)。

运行示例

浏览器中的Tensorflow.js

为https://nsfwjs.com/提供支持的演示可在`examples/nsfw_demo`文件夹中找到。

要运行演示，请执行yarn prep，这将把最新代码复制到演示中。完成后，你可以cd进入演示文件夹并使用yarn start运行。

Browserify

使用纯promises和脚本标签的browserify版本可在minimal_demo文件夹中找到。

<script src="/path/to/model/directory/model.min.js"></script>
<script src="/path/to/model/directory/group1-shard1of2.min.js"></script>
<script src="/path/to/model/directory/group1-shard2of2.min.js"></script>
<script src="/path/to/bundle/nsfwjs.min.js"></script>

你应该将nsfwjs.min.js文件和所有你想使用的模型包托管在你的项目旁边，并在脚本标签中使用src属性引用它们。

React Native

NSFWJS React Native应用 React Native演示

加载模型的本地副本以减少网络负载，并利用TFJS-React-Native。博客文章

Node JS应用

使用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(); // 加载本地模型，nsfw.load('file://./path/to/model/')
  // 图像必须是tf.tensor3d格式
  // 你可以使用tf.node.decodeImage(Uint8Array,channels)将图像转换为tf.tensor3d
  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("缺少图像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进行预处理任务和处理更多文件格式。

NSFW过滤器

NSFW过滤器是一个使用NSFWJS从浏览器中过滤掉NSFW图像的网络扩展。

它目前可用于Chrome和Firefox，完全开源。

在这里查看该项目。

学习TensorFlow.js

通过我的O'Reilly书籍"Learning TensorFlow.js"学习如何编写像NSFWJS这样的库，可在O'Reilly和亚马逊上购买。

贡献者

感谢这些优秀的人（表情符号说明）：

<table> <tbody> <tr> <td align="center" valign="top" width="14.28%"><a href="http://gantlaborde.com/"><img src="https://avatars0.githubusercontent.com/u/997157?v=4?s=100" width="100px;" alt="Gant Laborde"/> Gant Laborde</a> <a href="#question-GantMan" title="回答问题">💬</a> <a href="#blog-GantMan" title="博客文章">📝</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=GantMan" title="代码">💻</a> <a href="#example-GantMan" title="示例">💡</a> <a href="#ideas-GantMan" title="想法、规划与反馈">🤔</a> <a href="#infra-GantMan" title="基础设施（托管、构建工具等）">🚇</a> <a href="https://github.com/infinitered/nsfwjs/pulls?q=is%3Apr+reviewed-by%3AGantMan" title="审核过的拉取请求">👀</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=GantMan" title="测试">⚠️</a></td> <td align="center" valign="top" width="14.28%"><a href="https://jamonholmgren.com"><img src="https://avatars3.githubusercontent.com/u/1479215?v=4?s=100" width="100px;" alt="Jamon Holmgren"/> Jamon Holmgren</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=jamonholmgren" title="文档">📖</a> <a href="#ideas-jamonholmgren" title="想法、规划与反馈">🤔</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=jamonholmgren" title="代码">💻</a> <a href="#content-jamonholmgren" title="内容">🖋</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/mazenchami"><img src="https://avatars.githubusercontent.com/u/9324607?v=4?s=100" width="100px;" alt="Mazen Chami"/> Mazen Chami</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=mazenchami" title="文档">📖</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=mazenchami" title="代码">💻</a> <a href="https://github.com/infinitered/nsfwjs/pulls?q=is%3Apr+reviewed-by%3Amazenchami" title="审核过的拉取请求">👀</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=mazenchami" title="测试">⚠️</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/jstudenski"><img src="https://avatars0.githubusercontent.com/u/7350279?v=4?s=100" width="100px;" alt="Jeff Studenski"/> Jeff Studenski</a> <a href="#design-jstudenski" title="设计">🎨</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/fvonhoven"><img src="https://avatars2.githubusercontent.com/u/10098988?v=4?s=100" width="100px;" alt="Frank von Hoven III"/> Frank von Hoven III</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=fvonhoven" title="文档">📖</a> <a href="#ideas-fvonhoven" title="想法、规划与反馈">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/sandeshsoni"><img src="https://avatars3.githubusercontent.com/u/3761745?v=4?s=100" width="100px;" alt="Sandesh Soni"/> Sandesh Soni</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=sandeshsoni" title="代码">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/seannam1218"><img src="https://avatars1.githubusercontent.com/u/24437898?v=4?s=100" width="100px;" alt="Sean Nam"/> Sean Nam</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=seannam1218" title="文档">📖</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/emer7"><img src="https://avatars1.githubusercontent.com/u/21377166?v=4?s=100" width="100px;" alt="Gilbert Emerson"/> Gilbert Emerson</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=emer7" title="代码">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/xilaraux"><img src="https://avatars2.githubusercontent.com/u/17703730?v=4?s=100" width="100px;" alt="Oleksandr Kozlov"/> Oleksandr Kozlov</a> <a href="#infra-xilaraux" title="基础设施（托管、构建工具等）">🚇</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=xilaraux" title="测试">⚠️</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=xilaraux" title="代码">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="http://morganlaco.com"><img src="https://avatars2.githubusercontent.com/u/4466642?v=4?s=100" width="100px;" alt="Morgan"/> Morgan</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=mlaco" title="代码">💻</a> <a href="#ideas-mlaco" title="想法、规划与反馈">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="http://mycaule.github.io/"><img src="https://avatars2.githubusercontent.com/u/6161385?v=4?s=100" width="100px;" alt="Michel Hua"/> Michel Hua</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=mycaule" title="代码">💻</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=mycaule" title="文档">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://www.infinite.red"><img src="https://avatars2.githubusercontent.com/u/1771152?v=4?s=100" width="100px;" alt="Kevin VanGelder"/> Kevin VanGelder</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=kevinvangelder" title="代码">💻</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=kevinvangelder" title="文档">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="http://technikempire.com"><img src="https://avatars2.githubusercontent.com/u/11234763?v=4?s=100" width="100px;" alt="Jesse Nicholson"/> Jesse Nicholson</a> <a href="#data-TechnikEmpire" title="数据">🔣</a> <a href="#ideas-TechnikEmpire" title="想法、规划与反馈">🤔</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/camhart"><img src="https://avatars0.githubusercontent.com/u/3038809?v=4?s=100" width="100px;" alt="camhart"/> camhart</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=camhart" title="文档">📖</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://github.com/Cameron-Burkholder"><img src="https://avatars2.githubusercontent.com/u/13265710?v=4?s=100" width="100px;" alt="Cameron Burkholder"/> Cameron Burkholder</a> <a href="#design-Cameron-Burkholder" title="设计">🎨</a></td> <td align="center" valign="top" width="14.28%"><a href="https://qwertyforce.ru"><img src="https://avatars0.githubusercontent.com/u/44163887?v=4?s=100" width="100px;" alt="qwertyforce"/> qwertyforce</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=qwertyforce" title="文档">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/YegorZaremba"><img src="https://avatars3.githubusercontent.com/u/31797554?v=4?s=100" width="100px;" alt="Yegor <3"/> Yegor <3</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=YegorZaremba" title="代码">💻</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=YegorZaremba" title="测试">⚠️</a></td> <td align="center" valign="top" width="14.28%"><a href="http://navendu.me"><img src="https://avatars1.githubusercontent.com/u/49474499?v=4?s=100" width="100px;" alt="Navendu Pottekkat"/> Navendu Pottekkat</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=navendu-pottekkat" title="文档">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/VladStepanov"><img src="https://avatars0.githubusercontent.com/u/49880862?v=4?s=100" width="100px;" alt="Vladislav"/> Vladislav</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=VladStepanov" title="代码">💻</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=VladStepanov" title="文档">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/nacht42"><img src="https://avatars1.githubusercontent.com/u/37903575?v=4?s=100" width="100px;" alt="Nacht"/> Nacht</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=nacht42" title="代码">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/kateinkim"><img src="https://avatars.githubusercontent.com/u/53795920?v=4?s=100" width="100px;" alt="kateinkim"/> kateinkim</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=kateinkim" title="代码">💻</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=kateinkim" title="文档">📖</a></td> </tr> <tr> <td align="center" valign="top" width="14.28%"><a href="https://janpoonthong.github.io/portfolio/"><img src="https://avatars.githubusercontent.com/u/56725335?v=4?s=100" width="100px;" alt="jan"/> jan</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=JanPoonthong" title="文档">📖</a></td> <td align="center" valign="top" width="14.28%"><a href="https://github.com/roerohan"><img src="https://avatars.githubusercontent.com/u/42958812?v=4?s=100" width="100px;" alt="Rohan Mukherjee"/> Rohan Mukherjee</a> <a href="#question-roerohan" title="回答问题">💬</a> <a href="#infra-roerohan" title="基础设施（托管、构建工具等）">🚇</a> <a href="#maintenance-roerohan" title="维护">🚧</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=roerohan" title="代码">💻</a></td> <td align="center" valign="top" width="14.28%"><a href="https://hazya.dev"><img src="https://avatars.githubusercontent.com/u/63403456?v=4?s=100" width="100px;" alt="Hasitha Wickramasinghe"/> Hasitha Wickramasinghe</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=haZya" title="代码">💻</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=haZya" title="文档">📖</a> <a href="#example-haZya" title="示例">💡</a> <a href="#ideas-haZya" title="想法、规划与反馈">🤔</a> <a href="#infra-haZya" title="基础设施（托管、构建工具等）">🚇</a> <a href="https://github.com/infinitered/nsfwjs/commits?author=haZya" title="测试">⚠️</a></td> </tr> </tbody> </table>

本项目遵循all-contributors规范。欢迎各种形式的贡献！