Initial commit

Prerna-0202 · Mar 19, 2022 · e2adb0b · e2adb0b
commit e2adb0b
Show file tree

Hide file tree

Showing 22 changed files with 17,059 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -0,0 +1,30 @@
+{
+  "name": "face-recognition-brain",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "clarifai": "^2.9.0",
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-particles-js": "^2.4.2",
+    "react-scripts": "2.1.1",
+    "react-tilt": "^0.1.4",
+    "tachyons": "^4.11.1",
+    "tilt": "^0.2.0"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <meta name="theme-color" content="#000000">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
+    <title>Face Recognition Brain</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,15 @@
+{
+  "short_name": "Face Recognition Brain",
+  "name": "Face Recognition Brain",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/src/App.css b/src/App.css
@@ -0,0 +1,15 @@
+.App {
+  text-align: center;
+}
+.center {
+  display: flex;
+  justify-content: center;
+}
+.particles {
+  position: fixed;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  z-index: -1;
+}
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,154 @@
+import React, { Component } from 'react';
+import Particles from 'react-particles-js';
+import './App.css';
+import Navigation from './components/navigation/Navigation.js';
+import FaceRecognition from './components/facerecognition/FaceRecognition.js'
+import Logo from './components/logo/Logo.js';
+import ImageLinkForm from './components/imagelinkform/ImageLinkForm.js';
+import Rank from './components/rank/Rank.js';
+import Signin from './components/signin/Signin.js';
+import Register from './components/register/Register.js';
+
+
+const particlesOptions={
+  particles: {
+     number: {
+       value: 45,
+       density: {
+          enable: true,
+          value_area: 200
+         }
+
+    }
+  }
+}
+
+const initialState = {
+      input: '',
+      imageUrl: '',
+      box: {},
+      route: 'signin',
+      isSignedIn: false,
+      user: {
+        id: '',
+        name: '',
+        email: '',
+        entries: 0,
+        joined: ''
+      }
+}
+
+class App extends Component {
+  constructor() {
+    super();
+    this.state = initialState;
+
+    }
+
+   loadUser = (data) => {
+      this.setState({user: { 
+          id: data.id,
+          name: data.name,
+          email: data.email,
+          entries: data.entries,
+          joined: data.joined
+      }})
+    }
+
+// componentDidMount() {
+//     fetch('http://localhost:3001').then(response =>  response.json()).then(console.log)
+//   }
+
+    onInputChange = (event) => {
+      this.setState({input: event.target.value});
+    }
+
+    calculateFaceLocation = (data) => {
+      const clarifaiFace = data.outputs[0].data.regions[0].region_info.bounding_box
+      const image = document.getElementById('inputImage');
+      const width = Number(image.width);
+      const height = Number(image.height);
+      console.log(width,height);
+      return {
+        leftCol: clarifaiFace.left_col * width,
+        topRow: clarifaiFace.top_row * height,
+        rightCol: width - (clarifaiFace.right_col * width),
+        bottomRow: height - (clarifaiFace.bottom_row * height)
+
+      }
+    }
+
+    displayFaceBox = box => {
+      this.setState({box: box})
+    }
+
+    onButtonSubmit = () => {
+      this.setState({imageUrl: this.state.input})
+      fetch('https://infinite-dusk-81618.herokuapp.com/imageurl', {
+            method: 'post',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+              input: this.state.input
+         })
+      }) 
+      .then(response => response.json())
+      .then( (response) => {
+        if (response) {
+          fetch('https://infinite-dusk-81618.herokuapp.com/image', {
+            method: 'put',
+            headers: {'Content-Type': 'application/json'},
+            body: JSON.stringify({
+              id: this.state.user.id,
+            })
+          })
+            .then(response => response.json())
+            .then(count => {
+              this.setState(Object.assign(this.state.user, {entries: count}))
+            })
+            .catch(console.log);
+         }
+          this.displayFaceBox(this.calculateFaceLocation(response));
+        })
+      .catch(err => console.log(err));
+    }
+
+    onRouteChange = (route) => {
+      if(route === 'signout') {
+        this.setState(initialState)
+      } else if (route === 'home') {
+        this.setState({isSignedIn: true})
+      } 
+      this.setState({route: route});
+    }
+
+    render() {
+    const { isSignedIn, imageUrl, route, box } = this.state;
+      return (
+        <div className="App">
+        <Particles className='particles'
+                  params={particlesOptions} />
+          <Navigation isSignedIn={isSignedIn} onRouteChange={this.onRouteChange}/>
+          {
+            route === 'home'
+            ? 
+             <div>
+                <Logo/>
+                <Rank name={this.state.user.name} entries={this.state.user.entries}/> 
+                <ImageLinkForm onInputChange={this.onInputChange} onButtonSubmit={this.onButtonSubmit}/>
+                <FaceRecognition box={box} imageUrl={imageUrl}/>
+              </div>
+              : (
+                route === 'signin' 
+                ? 
+                 <Signin loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
+                : 
+                 <Register loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
+                )
+
+          }
+        </div>
+      );
+    }
+}
+
+export default App;
diff --git a/src/App.test.js b/src/App.test.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<App />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/components/facerecognition/FaceRecognition.js b/src/components/facerecognition/FaceRecognition.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import './facerecognition.css'
+
+const FaceRecognition = ({ imageUrl, box }) => {
+	return (
+			<div className='center ma'>
+				<div className='absolute ma2'>
+					<img id="inputImage" src={imageUrl} alt="pic" width='500px' height='auto'/>
+					<div className='bounding-box' style={{top: box.topRow, right: box.rightCol, bottom: box.bottomRow, left: box.leftCol}}></div>
+				</div>
+			</div>
+		)
+}
+
+export default FaceRecognition;
diff --git a/src/components/facerecognition/facerecognition.css b/src/components/facerecognition/facerecognition.css
@@ -0,0 +1,12 @@
+
+.bounding-box {
+    position: absolute;
+    box-shadow: inset 0 0 0 3px #149df2;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-wrap: wrap;
+    flex-wrap: wrap;
+    -ms-flex-pack: center;
+    justify-content: center;
+    cursor: pointer;
+}
diff --git a/src/components/imagelinkform/ImageLinkForm.js b/src/components/imagelinkform/ImageLinkForm.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import './imagelinkform.css';
+
+
+const ImageLinkForm = ({ onInputChange, onButtonSubmit }) => {
+	return (
+			<div>
+				<p className="f3">
+                 {'This Magic Brain will detect faces in your pictures, give it a try.'}
+                </p>
+                <div className="center">
+                	<div className="form center pa4 br3 shadow-5">
+	                	<input type="text" className="f4 pa2 w-70 center" onChange={onInputChange}/>
+	                	<button className="w-30 grow f4 link ph3 pv2 dib white bg-light-purple"
+	                	onClick={onButtonSubmit}>Detect</button>
+                    </div>
+                </div>
+			</div>
+		)
+}
+
+export default ImageLinkForm;
diff --git a/src/components/imagelinkform/imagelinkform.css b/src/components/imagelinkform/imagelinkform.css
@@ -0,0 +1,8 @@
+.form {
+	width: 700px;
+	background:
+	linear-gradient(135deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px),
+	linear-gradient(225deg, #708090 21px, #d9ecff 22px, #d9ecff 24px, transparent 24px, transparent 67px, #d9ecff 67px, #d9ecff 69px, transparent 69px)0 64px;
+	background-color:#708090;
+	background-size: 64px 128px;
+}
diff --git a/src/components/logo/Logo.js b/src/components/logo/Logo.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Tilt from 'react-tilt';
+import './logo.css';
+import brain from './brain.png';
+
+
+const Logo = () => {
+	return (
+			<div className='ma4 mt0'>
+				<Tilt className="Tilt br2 shadow-2" options={{ max : 45 }} style={{ height: 150, width: 150 }} >
+				 <div className="Tilt-inner"><img style={{paddingTop: '40px'}} src={brain} alt="logo" /> </div>
+				</Tilt>
+			</div>
+		)
+}
+
+export default Logo;
diff --git a/src/components/logo/brain.png b/src/components/logo/brain.png
diff --git a/src/components/logo/logo.css b/src/components/logo/logo.css
@@ -0,0 +1,3 @@
+.Tilt {
+	background: linear-gradient(89deg, #ff5edf 0%, #04c8de 100%);
+}
diff --git a/src/components/navigation/Navigation.js b/src/components/navigation/Navigation.js
@@ -0,0 +1,24 @@
+import React from 'react';
+
+const Navigation = ({ onRouteChange, isSignedIn }) => {
+
+
+			if(isSignedIn) {
+				return (
+				<nav style={{display: 'flex', justifyContent: 'flex-end'}}>
+					<p onClick={() => onRouteChange("signout")}className='f3 link dim black underline pa3 pointer'>Sign Out</p>
+				</nav>
+				);
+			} else {
+				return (
+						<nav style={{display: 'flex', justifyContent: 'flex-end'}}>
+							<p onClick={() => onRouteChange("signin")}className='f3 link dim black underline pa3 pointer'>Sign In</p>
+							<p onClick={() => onRouteChange("register")}className='f3 link dim black underline pa3 pointer'>Register</p>
+						</nav>
+				)
+			}
+
+
+}
+
+export default Navigation
diff --git a/src/components/rank/Rank.js b/src/components/rank/Rank.js
@@ -0,0 +1,18 @@
+import React from 'react';
+
+
+
+const Rank = ({ name, entries}) => {
+	return (
+			<div>
+				<div className='white f3'>
+					{`${name}, your current entry count is ...`}
+				</div>
+				<div className="white f1">
+					{entries}
+				</div>
+			</div>
+		)
+}
+
+export default Rank;