Merge pull request #1 from infinitered/flesh_out_site

Example site works ✨
infinitered · Feb 15, 2019 · e7571bb · e7571bb
2 parents d2f01f3 + 6d77d32
commit e7571bb
Show file tree

Hide file tree

Showing 18 changed files with 1,619 additions and 32 deletions.
diff --git a/example/nsfw_demo/package.json b/example/nsfw_demo/package.json
@@ -7,6 +7,7 @@
     "nsfwjs": "../../",
     "react": "^16.8.1",
     "react-dom": "^16.8.1",
+    "react-dropzone": "^7.0.1",
     "react-scripts": "2.1.5"
   },
   "scripts": {

diff --git a/example/nsfw_demo/public/android-chrome-192x192.png b/example/nsfw_demo/public/android-chrome-192x192.png
diff --git a/example/nsfw_demo/public/android-chrome-256x256.png b/example/nsfw_demo/public/android-chrome-256x256.png
diff --git a/example/nsfw_demo/public/apple-touch-icon.png b/example/nsfw_demo/public/apple-touch-icon.png
diff --git a/example/nsfw_demo/public/browserconfig.xml b/example/nsfw_demo/public/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#ffc40d</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/example/nsfw_demo/public/favicon-16x16.png b/example/nsfw_demo/public/favicon-16x16.png
diff --git a/example/nsfw_demo/public/favicon-32x32.png b/example/nsfw_demo/public/favicon-32x32.png
diff --git a/example/nsfw_demo/public/favicon.ico b/example/nsfw_demo/public/favicon.ico
diff --git a/example/nsfw_demo/public/index.html b/example/nsfw_demo/public/index.html
@@ -3,6 +3,13 @@
   <head>
     <meta charset="utf-8" />
     <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
+    <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
+    <link rel="mask-icon" href="%PUBLIC_URL%/safari-pinned-tab.svg" color="#5bbad5">
+    <meta name="msapplication-TileColor" content="#ffc40d">
+    <meta name="theme-color" content="#ffffff">
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
@@ -22,7 +29,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>NSFW JS</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/example/nsfw_demo/public/mstile-150x150.png b/example/nsfw_demo/public/mstile-150x150.png
diff --git a/example/nsfw_demo/public/safari-pinned-tab.svg b/example/nsfw_demo/public/safari-pinned-tab.svg
diff --git a/example/nsfw_demo/public/site.webmanifest b/example/nsfw_demo/public/site.webmanifest
@@ -0,0 +1,19 @@
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-256x256.png",
+            "sizes": "256x256",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
diff --git a/example/nsfw_demo/src/App.css b/example/nsfw_demo/src/App.css
@@ -1,17 +1,37 @@
+body {
+  background: #000;
+}
+
 .App {
   text-align: center;
+  background-color: #282c34;
+  height: 100vmin;
+  font-family: Arial, Helvetica, sans-serif;
+}
+
+.menu {
+  display: flex;
+  background-color: #000;
+  color: #fff;
+  align-items: center;
+}
+
+.menu h1 {
+  margin-left: 3%;
+  font-style: italic;
+  font-size: 2em;
+  justify-self: flex-end;
 }
 
 .App-logo {
-  animation: App-logo-spin infinite 20s linear;
   height: 40vmin;
-  max-height: 120px;
+  max-height: 150px;
   pointer-events: none;
+  padding-left: 3%;
 }
 
 .App-header {
   background-color: #282c34;
-  min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -20,15 +40,65 @@
   color: white;
 }
 
+.snippet {
+  display: flex;
+  flex-direction: column;
+  margin-right: 2%;
+  flex: 1;
+  justify-content: flex-end;
+  color: #e79f23;
+  text-align: right;
+  font-weight: bold;
+}
+
+.snippet p {
+  margin-right: 30px;
+}
+
+.snippet a {
+  display: flex;
+  justify-content: flex-end;
+}
+
+#tflogo {
+  width: auto;
+  height: 80px;
+}
+
 .App-link {
-  color: #61dafb;
+  color: #e79f23;
+}
+
+.photo-box {
+  padding: 20px;
+  border-width: 5px;
+  border-color: #02bbd7;
+  border-style: dashed;
+}
+
+.dropped-photo {
+  height: 400px;
+}
+
+footer {
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  height: 60px;
+  background: #000;
+  color: #FFF;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: bold;
+}
+
+footer ul li {
+  display: inline;
+  padding: 0 40px;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+footer a {
+  color: #FFF;
+  text-decoration: none;
 }
diff --git a/example/nsfw_demo/src/App.js b/example/nsfw_demo/src/App.js
@@ -1,37 +1,125 @@
-import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { Component } from 'react'
+import logo from './logo.svg'
+import ir from './ir.svg'
+import tflogo from './tflogo.jpg'
+import './App.css'
 import * as nsfwjs from 'nsfwjs'
+import Dropzone from 'react-dropzone'
 
 class App extends Component {
   state = {
-    topMessage: 'Open Dev/Inspect Menu to Assure Success',
-    bottomMessage: 'Loading model and checking image!'
+    model: null,
+    graphic: logo,
+    titleMessage: 'Please hold, the model is loading...',
+    topMessage: '',
+    bottomMessage: ''
   }
-  async componentDidMount() {
-    const img = document.getElementById('img')
-    const model = await nsfwjs.load('/model/')
-    const predictions = await model.classify(img)
+  componentDidMount() {
+    // Load model!
+    nsfwjs.load('/model/').then((model) => {
+      this.setState({
+        model,
+        titleMessage: "Please drag and drop an image to check!"
+      })
+    })
+  }
+
+  checkContent = async () => {
+    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`
     })
     console.log(predictions)
   }
 
+  setFile = file => {
+    if (typeof file === 'string') {
+      // using a sample
+      this.setState({ graphic: file }, this.checkContent)
+    } else {
+      // drag and dropped
+      const reader = new FileReader()
+      reader.onload = e => {
+        this.setState(
+          { graphic: e.target.result },
+          this.checkContent
+        )
+      }
+
+      reader.readAsDataURL(file)
+    }
+  }
+
+  onDrop = (accepted, rejected) => {
+    if (rejected.length > 0) {
+      window.alert('JPG, PNG, GIF only plz')
+    } else {
+      this.setState({
+        topMessage: 'Processing',
+        bottomMessage: ''
+      })
+      this.setFile(accepted[0])
+    }
+  }
+
   render() {
     return (
       <div className="App">
+        <div className="menu">
+          <img src={logo} className="App-logo" alt="logo" />
+          <h1>
+            Client-side indecent content checking
+          </h1>
+          <div className="snippet">
+              <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>
+          <Dropzone
+              accept="image/jpeg, image/png, image/gif"
+              className="photo-box"
+              onDrop={this.onDrop.bind(this)}
+          >
+            <img
+              src={this.state.graphic}
+              alt="drop your file here"
+              className="dropped-photo"
+              ref="dropped"
+            />
+          </Dropzone>
           <p>
             {this.state.topMessage}
           </p>
-          <img src={logo} className="App-logo" alt="logo" />
-          <img src="https://i.imgur.com/6ixnTIj.gif" id="img" crossOrigin="anonymous" alt="thing to check"/>
+          <p>
+            {this.state.bottomMessage}
+          </p>
         </header>
-        <p>
-          {this.state.bottomMessage}
-        </p>
+        <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>
+        </footer>
       </div>
     );
   }

diff --git a/example/nsfw_demo/src/ir.svg b/example/nsfw_demo/src/ir.svg