Skip to content
Permalink
Browse files

NSFWJS ready to roll

  • Loading branch information...
GantMan committed Feb 16, 2019
1 parent 8fa24b1 commit 22ff130b25356ae47fb58834b0ac043552a39335
Showing with 72 additions and 42 deletions.
  1. +38 −2 README.md
  2. +34 −40 example/nsfw_demo/src/App.js
@@ -1,3 +1,39 @@
<h2>Coming Soon!</h2>

<img src="https://github.com/infinitered/nsfwjs/raw/master/_art/nsfwjs_logo.jpg" alt="NSFWJS Logo" width="500" />
## Client-side indecent content checking
NSFWJS isn't perfect, but it's pretty accurate. And it's getting more accurate all the time.
Give it a go: http://nsfwjs.com/
## How to use
```js
import * as nsfwjs from 'nsfwjs'
const img = document.getElementById('img')
// Load the model. This pulls from my S3
// please only use this for testing
// See the section on setting up your own model for details
const model = await nsfwjs.load()
// Classify the image
const predictions = await model.classify(img)
console.log('Predictions: ', predictions)
```
### Run the Demo
The demo that powers http://nsfwjs.com/ is available here.
To run the demo, pull the project down, and then run the following commands.
```
cd nsfwjs
yarn
yarn build
cd example/nsfw_demo
yarn
yarn start
```
@@ -16,20 +16,27 @@ class App extends Component {
}
componentDidMount() {
// Load model!
nsfwjs.load('/model/').then((model) => {
nsfwjs.load('/model/').then(model => {
this.setState({
model,
titleMessage: "Please drag and drop an image to check!"
titleMessage: 'Please drag and drop an image to check!'
})
})
}

sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms))
}

checkContent = async () => {
// Strange race condition grabbing image before it's rendered
// Not really a problem of this library, more so react silliness
await this.sleep(100)
const img = this.refs.dropped
const predictions = await this.state.model.classify(img)
this.setState({
topMessage: `This is ${predictions[0].className}`,
bottomMessage: `NSFWJS is ${(predictions[0].probability * 100).toFixed(2)}% sure`
bottomMessage: `${(predictions[0].probability * 100).toFixed(2)}% sure`
})
console.log(predictions)
}
@@ -42,10 +49,7 @@ class App extends Component {
// drag and dropped
const reader = new FileReader()
reader.onload = e => {
this.setState(
{ graphic: e.target.result },
this.checkContent
)
this.setState({ graphic: e.target.result }, this.checkContent)
}

reader.readAsDataURL(file)
@@ -69,24 +73,20 @@ class App extends Component {
<div className="App">
<div className="menu">
<img src={logo} className="App-logo" alt="logo" />
<h1>
Client-side indecent content checking
</h1>
<h1>Client-side indecent content checking</h1>
<div className="snippet">
<p>Powered by</p>
<p>Powered by</p>
<a href="https://js.tensorflow.org/" targe="_blank">
<img src={tflogo} id="tflogo" alt="TensorflowJS Logo" />
</a>
</div>
</div>
<header className="App-header">
<p>
{ this.state.titleMessage }
</p>
<p>{this.state.titleMessage}</p>
<Dropzone
accept="image/jpeg, image/png, image/gif"
className="photo-box"
onDrop={this.onDrop.bind(this)}
accept="image/jpeg, image/png, image/gif"
className="photo-box"
onDrop={this.onDrop.bind(this)}
>
<img
src={this.state.graphic}
@@ -95,34 +95,28 @@ class App extends Component {
ref="dropped"
/>
</Dropzone>
<p>
{this.state.topMessage}
</p>
<p>
{this.state.bottomMessage}
</p>
<p>{this.state.topMessage}</p>
<p>{this.state.bottomMessage}</p>
</header>
<footer>
<ul>
<li>Copyright Now(ish)</li>
<li>
<a href="https://github.com/infinitered/nsfwjs">
GitHub
</a>
</li>
<li>
<a href="https://github.com/gantman/nsfw_model">Model Repo</a>
</li>
<li>
<a href="https://infinite.red">
<img src={ir} />
</a>
</li>
</ul>
<li>Copyright Now(ish)</li>
<li>
<a href="https://github.com/infinitered/nsfwjs">GitHub</a>
</li>
<li>
<a href="https://github.com/gantman/nsfw_model">Model Repo</a>
</li>
<li>
<a href="https://infinite.red">
<img src={ir} alt="infinite red logo" />
</a>
</li>
</ul>
</footer>
</div>
);
)
}
}

export default App;
export default App

0 comments on commit 22ff130

Please sign in to comment.
You can’t perform that action at this time.