一个简单的javascript库，帮助您快速识别不合适的图像。所有的这些都是在客户端上进行。本秘籍将以 react 为框架来搭建使用。如果你还不熟悉 react，请自行学习，本秘籍不再讲述 react，或者您也可以直接看代码进行学习并在自己的框架上进行尝试。

图像等级

  • Drawing - 安全的
  • Hentai - 变态色情的
  • Neutral - 中性的
  • Porn - 色情的
  • Sexy - 性感的

demo 搭建

  1. create-react-app
    • 确保本机全局已安装了 react-app
    • create-react-app myApp
  2. 将 github 项目上的 example/public/model 目录复制到本地 react 项目的 public 文件夹下。
    • model：这些文件是客户端图片鉴黄的基础文件和配置
  3. npm install —save @tensorflow/tfjs nsfwjs
  4. 修改 App.js 和 App.css

App.js

  1. /*
  2. * 图片鉴黄
  3. * 逻辑：
  4. *   0. 初始化时读取 public/model 中的 AI 数据
  5. *   1. 先将图片转化为 base64 码，在渲染出来之后，再进行下一步
  6. *   2. 将 img 节点导入到 nsfw model 中进行检测
  7. * */
  9. import React from 'react';
  10. import * as nsfwjs from 'nsfwjs';
  11. import './index.css';
  13. class App extends React.PureComponent {
  14.   state = {
  15.     nsfwModel: null,
  16.     base64: null,
  17.     predictions: null,
  18.     message: 'Ready to Classify',
  19.   };
  21.   componentDidMount() {
  22.     nsfwjs.load('/model/').then((model) => {
  23.       this.setState({
  24.         nsfwModel: model,
  25.       });
  26.     });
  27.   }
  29.   getPredictions = () => {
  30.     // 使用定时器获取 img DOM，此时获取到的 dom 为拥有 base64 的图片节点
  31.     setTimeout(() => {
  32.       const { nsfwModel } = this.state;
  33.       const img = document.getElementById('img');
  35.       nsfwModel.classify(img).then((predictions) => {
  36.         this.setState({
  37.           predictions,
  38.           message: `Identified as ${predictions[0].className}`,
  39.         });
  40.       });
  41.     }, 60);
  42.   };
  44.   onChange = (e) => {
  45.     this.reset();
  46.     const that = this;
  47.     const file = e.currentTarget.files[0];
  48.     const reader = new FileReader();
  50.     // eslint-disable-next-line
  51.     reader.onload = (file) => {
  52.       that.setState({
  53.         base64: file.target.result,
  54.       }, this.getPredictions);
  55.     };
  56.     reader.readAsDataURL(file);
  57.   };
  59.   reset = () => {
  60.     this.setState({
  61.       base64: null,
  62.       predictions: null,
  63.     });
  64.   };
  66.   render() {
  67.     const { base64, predictions, message } = this.state;
  69.     return (
  70.       <React.Fragment>
  71.         <div className="fileBox">
  72.           <img id="img" className="img" src={base64} alt="" />
  73.           <label className="fileBtn" htmlFor="file" />
  74.         </div>
  75.         <input
  76.           id="file"
  77.           type="file"
  78.           className="hidden"
  79.           onChange={this.onChange}
  80.           accept="image/gif, image/jpeg, image/png,"
  81.         />
  82.         <div className="content">
  83.           <div className="content_title">{message}</div>
  84.           {predictions && predictions.map(item => (
  85.             <div className="item" key={item.className}>
  86.               {`${item.className} - ${(item.probability * 100).toFixed(2)}%`}
  87.             </div>
  88.           ))}
  89.         </div>
  90.       </React.Fragment>
  91.     );
  92.   }
  93. }
  95. export default App;

App.css 添加样式

  1. .hidden {
  2.   display: none;
  3. }
  5. .fileBox {
  6.   position: relative;
  7.   margin: 0 auto;
  8.   width: 400px;
  9.   min-height: 400px;
  10.   border: 5px dashed #000;
  11. }
  13. .fileBtn {
  14.   top: 0;
  15.   left: 0;
  16.   position: absolute;
  17.   width: 100%;
  18.   height: 100%;
  19.   cursor: pointer;
  20.   z-index: 9;
  21. }
  23. .img {
  24.   width: 100%;
  25. }
  27. .content {
  28.   width: 350px;
  29.   margin: 0 auto;
  30.   padding-top: 30px;
  31.   text-align: center;
  32. }
  34. .content_title {
  35.   border-bottom: 2px solid #000;
  36.   font-size: 30px;
  37.   font-weight: bold;
  38. }
  40. .item {
  41.   color: #e79f23;
  42.   font-size: 25px;
  43. }
  1. npm start
    • 此时如果浏览器报错：tf.loadModel is not function 时，请将依赖 @tensorflow/tfjs 的版本调整至 0.15.1。

注意

请在 nsfwjs.load(‘/model/‘) 完全读取完成后才能进行图片分析，否则将会报错。所以建议在加载期间进行 loading 处理。本秘籍并没有做此功能，请自行添加。