lgope · lgope · Oct 11, 2020
diff --git a/client b/client
diff --git a/front-end/.gitignore b/front-end/.gitignore
@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# others
+yarn.lock*
+package-lock.json*
diff --git a/front-end/README.md b/front-end/README.md
@@ -0,0 +1,17 @@
+# face-detection-brain (Frot End)
+
+## Technologies
+1. React.js (Front-end)
+2. React-dom
+3. React-title
+4. Reactstrap
+5. Tachyons-css (Styling)
+
+## To run this project :
+1. Clone this repo
+2. Change your directory : `cd face-detection-brain/Front-End`
+3. Run `npm install`
+5. Run `npm start`
+
+## Deployed Version (Feel free to visit) 👇
+http://smart-face-detect-brain.herokuapp.com/
diff --git a/front-end/package.json b/front-end/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "face-detection-brain",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^4.2.4",
+    "@testing-library/react": "^9.3.2",
+    "@testing-library/user-event": "^7.1.2",
+    "bootstrap": "^4.4.1",
+    "clarifai": "^2.9.1",
+    "react": "^16.12.0",
+    "react-dev-utils": "^10.0.0",
+    "react-dom": "^16.12.0",
+    "react-particles-js": "^2.7.0",
+    "react-scripts": "3.3.0",
+    "react-tilt": "^0.1.4",
+    "reactstrap": "^8.2.0",
+    "serialize-javascript": "^2.1.2",
+    "tachyons": "^4.11.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "proxy": "http://localhost:5000",
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/front-end/public/favicon.ico b/front-end/public/favicon.ico
diff --git a/front-end/public/index.html b/front-end/public/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="theme-color" content="#000000" />
+  <meta name="author" content="Lakshman Gope" />
+  <meta name="keywords" content="reactjs, tachyons, nodejs, expressjs, PostgreSQL" />
+  <meta name="description" content="This is a Web application for detecting faces in images." />
+
+  <!-- Favicon -->
+  <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+
+  <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+  <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+  <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+  <title>Face-Detection-Brain</title>
+
+</head>
+
+<body>
+  <noscript>You need to enable JavaScript to run this app.</noscript>
+  <div id="Im-IronMan"></div>
+
+</body>
+
+</html>
diff --git a/front-end/public/logo192.png b/front-end/public/logo192.png
diff --git a/front-end/public/logo512.png b/front-end/public/logo512.png
diff --git a/front-end/public/manifest.json b/front-end/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/front-end/public/robots.txt b/front-end/public/robots.txt
@@ -0,0 +1,2 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
diff --git a/front-end/src/App.css b/front-end/src/App.css
@@ -0,0 +1,29 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Courier New', Courier, monospace;
+  background: linear-gradient(89deg, #17a2b8 0%, #28a745cc 100%); /* w3c */
+  /* background: linear-gradient(89deg, #ff5edf 0%, #04c8de 100%); */
+}
+
+button {
+  cursor: pointer;
+}
+
+.App {
+  text-align: center;
+}
+
+.center {
+  display: flex;
+  justify-content: center;
+}
+
+.particles {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: -1;
+}
diff --git a/front-end/src/App.js b/front-end/src/App.js
@@ -0,0 +1,188 @@
+import React, { Component } from 'react';
+import Particles from 'react-particles-js';
+
+import Account from './Components/Account/Account.component';
+import Navigation from './Components/Navigation/Navigation.component';
+import Logo from './Components/Logo/Logo.component';
+import ImageLinkForm from './Components/ImageLinkForm/ImageLinkForm.component';
+import Rank from './Components/Rank/Rank.component';
+import FaceDetection from './Components/FaceDetection/FaceDetection.component';
+
+import Signin from './Components/Signin/Signin.component';
+import Register from './Components/Register/Register.component';
+
+import './App.css';
+const particlesOptions = {
+  particles: {
+    number: {
+      value: 120,
+      density: {
+        enable: true,
+        value_area: 800,
+      },
+    },
+  },
+};
+
+const initialState = {
+  input: '',
+  imageUrl: '',
+  boxes: [],
+  route: 'signin',
+  isProfileOpen: false,
+  isSignedIn: false,
+  user: {
+    id: '',
+    name: '',
+    email: '',
+    entries: 0,
+    joined: '',
+    age: 0,
+    pet: '',
+  },
+};
+
+class App extends Component {
+  state = initialState;
+
+  loadUser = data => {
+    this.setState({
+      user: {
+        id: data.id,
+        name: data.name,
+        email: data.email,
+        entries: data.entries,
+        joined: data.joined,
+      },
+    });
+  };
+
+  calculateFaceLocation = data => {
+    const image = document.getElementById('inputimage');
+    const width = Number(image.width);
+    const height = Number(image.height);
+    return data.outputs[0].data.regions.map(face => {
+      const clarifaiFace = face.region_info.bounding_box;
+      return {
+        leftCol: clarifaiFace.left_col * width,
+        topRow: clarifaiFace.top_row * height,
+        rightCol: width - clarifaiFace.right_col * width,
+        bottomRow: height - clarifaiFace.bottom_row * height,
+      };
+    });
+  };
+
+  displayFaceBox = boxes => {
+    this.setState({ boxes: boxes });
+  };
+
+  onInputChange = event => {
+    this.setState({ input: event.target.value });
+  };
+
+  // onPictureSubmit()
+  onButtonSubmit = () => {
+    if (!this.state.input.length) {
+      return alert('Please enter an image address!');
+    }
+    this.setState({ imageUrl: this.state.input });
+    fetch('/api/imageUrl', {
+      method: 'post',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        input: this.state.input,
+      }),
+    })
+      .then(response => response.json())
+      .then(response => {
+        if (response) {
+          fetch('/api/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(err => alert('Something Wrong!'));
+        }
+        this.displayFaceBox(this.calculateFaceLocation(response));
+      })
+      .catch(err => console.error(err));
+  };
+
+  onRouteChange = route => {
+    if (route === 'signout') {
+      return this.setState(initialState);
+    } else if (route === 'home') {
+      this.setState({ isSignedIn: true });
+    }
+    this.setState({ route: route });
+  };
+
+  toggleModal = () => {
+    this.setState(state => ({
+      ...state,
+      isProfileOpen: !state.isProfileOpen,
+    }));
+  };
+
+  render() {
+    const { isSignedIn, imageUrl, route, boxes } = this.state;
+    return (
+      <div className='App'>
+        <Particles className='particles' params={particlesOptions} />
+        {
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: isSignedIn ? 'space-between' : 'flex-end',
+            }}
+          >
+            {isSignedIn && <Logo />}
+            <Navigation
+              isSignedIn={isSignedIn}
+              onRouteChange={this.onRouteChange}
+              toggleModal={this.toggleModal}
+            />
+          </div>
+        }
+        {route === 'home' && (
+          <div>
+            <Rank
+              name={this.state.user.name}
+              entries={this.state.user.entries}
+            />
+            <ImageLinkForm
+              onInputChange={this.onInputChange}
+              onButtonSubmit={this.onButtonSubmit}
+            />
+            <FaceDetection boxes={boxes} imageUrl={imageUrl} />
+          </div>
+        )}
+
+        {route === 'account' && (
+          <Account
+            name={this.state.user.name}
+            email={this.state.user.email}
+            onRouteChange={this.onRouteChange}
+          />
+        )}
+        {route === 'signin' && (
+          <Signin loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
+        )}
+        {route === 'register' && (
+          <Register
+            loadUser={this.loadUser}
+            onRouteChange={this.onRouteChange}
+          />
+        )}
+      </div>
+    );
+  }
+}
+
+export default App;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		# https://www.robotstxt.org/robotstxt.html
		User-agent: *