Skip to content
Permalink
Browse files

Merge pull request #1 from infinitered/flesh_out_site

Example site works 
  • Loading branch information...
GantMan committed Feb 15, 2019
2 parents d2f01f3 + 6d77d32 commit e7571bb75e384c738ae781996731915df0cceb8c
@@ -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": {
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -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>
Binary file not shown.
Binary file not shown.
BIN +6.95 KB (280%) example/nsfw_demo/public/favicon.ico 100755 → 100644
Binary file not shown.
@@ -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>
Binary file not shown.
@@ -0,0 +1,27 @@
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
width="290.000000pt" height="290.000000pt" viewBox="0 0 290.000000 290.000000"
preserveAspectRatio="xMidYMid meet">
<metadata>
Created by potrace 1.11, written by Peter Selinger 2001-2013
</metadata>
<g transform="translate(0.000000,290.000000) scale(0.100000,-0.100000)"
fill="#000000" stroke="none">
<path d="M0 1450 l0 -1450 1450 0 1450 0 0 1450 0 1450 -1450 0 -1450 0 0
-1450z m1890 1149 c30 -11 94 -41 141 -66 305 -160 519 -447 595 -798 23 -109
23 -341 0 -450 -97 -449 -408 -779 -848 -901 -73 -20 -125 -27 -242 -31 -147
-6 -310 8 -322 28 -4 7 32 161 62 260 4 14 11 15 47 7 93 -22 397 -6 397 21 0
4 -61 138 -136 297 -75 159 -137 294 -137 301 -1 27 107 413 113 406 4 -5 98
-204 210 -443 112 -239 204 -437 206 -439 8 -9 120 88 169 145 279 329 285
791 17 1125 -108 134 -237 222 -418 283 -17 6 57 276 76 276 8 0 40 -9 70 -21z
m-266 -13 c38 -9 71 -18 75 -21 6 -7 -57 -256 -68 -268 -4 -4 -36 -1 -72 8
-108 25 -371 15 -403 -16 -6 -5 52 -138 144 -335 l154 -327 -28 -106 c-16 -58
-41 -153 -56 -211 l-28 -105 -62 130 c-34 72 -134 285 -222 475 -89 190 -164
348 -168 353 -10 11 -135 -97 -186 -161 -249 -315 -261 -742 -29 -1068 99
-139 270 -264 430 -315 49 -15 74 -28 71 -36 -3 -7 -20 -68 -37 -135 -18 -68
-34 -125 -35 -127 -7 -9 -153 44 -243 90 -304 152 -521 423 -608 758 -34 133
-43 341 -19 470 91 494 466 871 953 956 98 18 341 12 437 -9z"/>
</g>
</svg>
@@ -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"
}
@@ -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;
}
@@ -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>
);
}
@@ -0,0 +1,25 @@
<svg width="93px" height="41px" viewBox="0 0 93 41" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 40.3 (33839) - http://www.bohemiancoding.com/sketch -->
<title>Infinite Red Logo Light</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="IR-Logo">
<g id="Infinite-Red-Logo-Light">
<path d="M36.0800073,25.283593 C42.9412217,25.283593 48.5033343,19.6373262 48.5033343,12.6723024 C48.5033343,5.70727865 42.9412217,0.0610119048 36.0800073,0.0610119048 C29.2187929,0.0610119048 23.6566802,5.70727865 23.6566802,12.6723024 C23.6566802,19.6373262 29.2187929,25.283593 36.0800073,25.283593 Z M36.0800073,19.292022 C39.6814876,19.292022 42.601064,16.3282728 42.601064,12.6723024 C42.601064,9.0163321 39.6814876,6.05258288 36.0800073,6.05258288 C32.4785269,6.05258288 29.5589506,9.0163321 29.5589506,12.6723024 C29.5589506,16.3282728 32.4785269,19.292022 36.0800073,19.292022 Z" id="infinity-left-circle" fill="#E73536"></path>
<path d="M47.683075,3.45935493 C49.9035814,1.35139089 52.8867275,0.0610119048 56.166766,0.0610119048 C63.0279804,0.0610119048 68.590093,5.70727865 68.590093,12.6723024 C68.590093,19.6373262 63.0279804,25.283593 56.166766,25.283593 C52.9185525,25.283593 49.9614982,24.0181327 47.7479242,21.946377 C49.0740895,20.2194928 50.0356285,18.1899151 50.5150958,15.9768664 C51.6418728,17.9584253 53.7509014,19.292022 56.166766,19.292022 C59.7682463,19.292022 62.6878227,16.3282728 62.6878227,12.6723024 C62.6878227,9.0163321 59.7682463,6.05258288 56.166766,6.05258288 C53.7343875,6.05258288 51.6130542,7.4044738 50.4921271,9.40846454 C49.9972814,7.20009321 49.0217225,5.17725533 47.683075,3.45935493 Z" id="infinity-right-circle" fill="#E73536"></path>
<polygon id="Path-Copy-2" fill="#FFFFFF" points="58.9649039 31.2751639 58.9649039 33.1898292 54.2453185 33.1898292 54.2453185 35.1733672 58.4902329 35.1733672 58.4902329 37.005385 54.2453185 37.005385 54.2453185 39.0026977 59.1140862 39.0026977 59.1140862 40.9035883 52.1296423 40.9035883 52.1296423 31.2751639"></polygon>
<polygon id="Path-Copy-3" fill="#FFFFFF" points="47.8422083 33.1347309 47.8422083 40.9035883 45.726532 40.9035883 45.726532 33.1347309 43.0412507 33.1347309 43.0412507 31.2751639 50.5274896 31.2751639 50.5274896 33.1347309"></polygon>
<polygon id="Path-Copy-4" fill="#FFFFFF" points="39.3544503 31.2751639 41.4701265 31.2751639 41.4701265 40.9035883 39.3544503 40.9035883"></polygon>
<polygon id="Path-Copy-5" fill="#FFFFFF" points="34.9258805 31.2751639 37.0415567 31.2751639 37.0415567 40.9035883 34.9258805 40.9035883 30.4097255 34.8703267 30.4097255 40.9035883 28.2940493 40.9035883 28.2940493 31.2751639 30.2741052 31.2751639 34.9258805 37.4737204"></polygon>
<polygon id="Path-Copy-6" fill="#FFFFFF" points="23.835593 31.2751639 25.9512692 31.2751639 25.9512692 40.9035883 23.835593 40.9035883"></polygon>
<polygon id="Path-Copy-7" fill="#FFFFFF" points="22.1143698 31.2751639 22.1143698 33.16228 17.7202731 33.16228 17.7202731 35.2422401 21.8973774 35.2422401 21.8973774 37.1293561 17.7202731 37.1293561 17.7202731 40.9035883 15.6045969 40.9035883 15.6045969 31.2751639"></polygon>
<polygon id="Path-Copy-8" fill="#FFFFFF" points="11.0902875 31.2751639 13.2059637 31.2751639 13.2059637 40.9035883 11.0902875 40.9035883 6.57413246 34.8703267 6.57413246 40.9035883 4.45845625 40.9035883 4.45845625 31.2751639 6.43851219 31.2751639 11.0902875 37.4737204"></polygon>
<polygon id="Path-Copy-9" fill="#FFFFFF" points="0 31.2751639 2.11567622 31.2751639 2.11567622 40.9035883 0 40.9035883"></polygon>
<path d="M72.6800431,34.4708642 C72.6800431,36.0136237 72.0787992,37.0099743 70.8762935,37.4599458 L73.2767722,40.9035883 L70.672863,40.9035883 L68.5707489,37.8318592 L67.1060499,37.8318592 L67.1060499,40.9035883 L64.9903737,40.9035883 L64.9903737,31.2751639 L68.5843109,31.2751639 C70.0580585,31.2751639 71.1091051,31.5276952 71.7374822,32.0327653 C72.3658592,32.5378354 72.6800431,33.3505269 72.6800431,34.4708642 Z M70.0724548,35.5971092 C70.3346553,35.3583488 70.4657536,34.979552 70.4657536,34.4607072 C70.4657536,33.9418625 70.3301347,33.586023 70.0588928,33.3931781 C69.7876509,33.2003331 69.3129847,33.1039121 68.6348799,33.1039121 L67.0481228,33.1039121 L67.0481228,35.9552481 L68.5941938,35.9552481 C69.3175056,35.9552481 69.8102543,35.8358697 70.0724548,35.5971092 Z" id="Path-Copy-11" fill="#FFFFFF"></path>
<polygon id="Path-Copy-12" fill="#FFFFFF" points="81.6856828 31.2751639 81.6856828 33.1898292 76.9660974 33.1898292 76.9660974 35.1733672 81.2110119 35.1733672 81.2110119 37.005385 76.9660974 37.005385 76.9660974 39.0026977 81.8348651 39.0026977 81.8348651 40.9035883 74.8504212 40.9035883 74.8504212 31.2751639"></polygon>
<path d="M90.9237166,32.5355371 C91.8278562,33.37579 92.2799193,34.544321 92.2799193,36.0411651 C92.2799193,37.5380092 91.8391578,38.7226104 90.9576216,39.5950042 C90.0760855,40.4673979 88.7311979,40.9035883 86.9229186,40.9035883 L83.6815941,40.9035883 L83.6815941,31.2751639 L87.0314148,31.2751639 C88.722156,31.2751639 90.0195769,31.6952841 90.9237166,32.5355371 Z M89.3986768,38.2142775 C89.9185571,37.7183905 90.1784934,36.9975286 90.1784934,36.0516701 C90.1784934,35.1058115 89.9185571,34.3780624 89.3986768,33.8684007 C88.8787965,33.3587391 88.0809053,33.1039121 87.0049791,33.1039121 L85.8250827,33.1039121 L85.8250827,38.9581043 L87.1677234,38.9581043 C88.1351528,38.9581043 88.8787965,38.7101645 89.3986768,38.2142775 Z" id="Path-Copy-14" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>
Oops, something went wrong.

0 comments on commit e7571bb

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