arrangements added for beckend

berenvrl · Jan 5, 2024 · 3c510f6 · 3c510f6
1 parent 544b555
commit 3c510f6
Show file tree

Hide file tree

Showing 17 changed files with 419 additions and 980 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,19 +3,15 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
-    "@testing-library/user-event": "^13.5.0",
-    "clarifai": "^2.9.1",
+    "clarifai": "2.7.0",
     "particles-bg": "^2.5.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-parallax-tilt": "^1.7.140",
     "react-particles": "^2.9.3",
     "react-scripts": "^5.0.1",
     "react-tsparticles": "^2.9.3",
-    "tachyons": "^4.12.0",
-    "web-vitals": "^2.1.4"
+    "tachyons": "^4.12.0"
   },
   "scripts": {
     "start": "react-scripts start",

diff --git a/public/index.html b/public/index.html
@@ -26,9 +26,6 @@
     -->
     <title>Smart Brain</title>
   </head>
-  <script>
-    process = 'test';
-  </script>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -7,11 +7,11 @@
   justify-content: center;
 }
 
-.particles {
+.particles-bg-canvas-self {
   position: fixed;
+  z-index: -1;
   top: 0;
+  left: 0;
   right: 0;
   bottom: 0;
-  left: 0;
-  z-index: -1;
 }
diff --git a/src/App.js b/src/App.js
@@ -1,155 +1,139 @@
-import React, { Component } from 'react';
-import './App.css';
-import Navigation from './components/Navigation/Navigation';
-import Logo from './components/Logo/Logo';
-import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
-import Rank from './components/Rank/Rank';
-import ParticlesBg from 'particles-bg';
-//import Clarifai from 'clarifai';
-import FaceRecognition from './components/FaceRecognition/FaceRecognition';
-import SignIn from './components/SignIn/SignIn';
-import Register from './components/Register/Register';
+import React, { Component } from "react";
+import ParticlesBg from "particles-bg";
+//import Clarifai from "clarifai";
+import FaceRecognition from "./components/FaceRecognition/FaceRecognition";
+import Navigation from "./components/Navigation/Navigation";
+import SignIn from "./components/SignIn/SignIn";
+import Register from "./components/Register/Register";
+import Logo from "./components/Logo/Logo";
+import ImageLinkForm from "./components/ImageLinkForm/ImageLinkForm";
+import Rank from "./components/Rank/Rank";
+import "./App.css";
 
-//import ParticlesBg from 'particles-bg';
-//import Tilt from 'react-parallax-tilt';
-
-// Your PAT (Personal Access Token) can be found in the portal under Authentification
-//const PAT = 'c746177b394f4fd4b144c6611118d6ee';
-// Specify the correct user_id/app_id pairings
-// Since you're making inferences outside your app's scope
-//const USER_ID = 'berenvrl';
-//const APP_ID = 'my-first-application';
-// Change these to whatever model and image URL you want to use
-//const MODEL_ID = 'face-detection';
-//const MODEL_VERSION_ID = '6dc7e46bc9124c5c8824be4822abe105';
-
-const clarifaiSetup = imageUrl => {
-  const IMAGE_URL = imageUrl;
-  const PAT = 'c746177b394f4fd4b144c6611118d6ee';
-
-  const raw = JSON.stringify({
-    user_app_id: {
-      user_id: 'berenvrl',
-      app_id: 'my-first-application'
-    },
-    inputs: [
-      {
-        data: {
-          image: {
-            url: IMAGE_URL
-          }
-        }
-      }
-    ]
-  });
-
-  const requestOptions = {
-    method: 'POST',
-    headers: {
-      Accept: 'application/json',
-      Authorization: `Key ${PAT}`
-    },
-    body: raw
-  };
-
-  return requestOptions;
+const initialState = {
+  input: "",
+  imageUrl: "",
+  box: {},
+  route: "signin",
+  isSignedIn: false,
+  user: {
+    id: "",
+    name: "",
+    email: "",
+    entries: 0,
+    joined: "",
+  },
 };
 
 class App extends Component {
   constructor() {
     super();
-    this.state = {
-      input: '',
-      imageUrl: '',
-      box: {},
-      route: 'signin',
-      isSignedIn: false
-    };
+    this.state = initialState;
   }
-  calculateFaceLocation = data => {
+
+  loadUser = (data) => {
+    this.setState({
+      user: {
+        id: data.id,
+        name: data.name,
+        email: data.email,
+        entries: data.entries,
+        joined: data.joined,
+      },
+    });
+  };
+
+  calculateFaceLocation = (data) => {
     const clarifaiFace =
       data.outputs[0].data.regions[0].region_info.bounding_box;
-    //console.log('clarifaiFace', clarifaiFace);
-
-    const image = document.getElementById('recognizedFace');
+    const image = document.getElementById("inputimage");
     const width = Number(image.width);
     const height = Number(image.height);
-    //console.log('width, height', 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
+      bottomRow: height - clarifaiFace.bottom_row * height,
     };
   };
 
-  displayFaceBox = box => {
+  displayFaceBox = (box) => {
     this.setState({ box: box });
-    //console.log('box', box);
   };
 
-  onInputChange = event => {
+  onInputChange = (event) => {
     this.setState({ input: event.target.value });
   };
 
   onButtonSubmit = () => {
     this.setState({ imageUrl: this.state.input });
 
-    fetch(
-      `https://api.clarifai.com/v2/models/face-detection/versions/6dc7e46bc9124c5c8824be4822abe105/outputs`,
-      clarifaiSetup(this.state.input)
-    )
-      .then(response => response.json())
-      .then(result => {
-        //console.log(result.outputs[0].data.regions[0].region_info.bounding_box)
-        this.displayFaceBox(this.calculateFaceLocation(result));
+    fetch("http://localhost:3000/imageurl", {
+      method: "post",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        input: this.state.input,
+      }),
+    })
+      .then((response) => response.json())
+      .then((response) => {
+        if (response) {
+          fetch("http://localhost:3000/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) => console.log);
+        }
+        this.displayFaceBox(this.calculateFaceLocation(response));
       })
-      .catch(error => console.log('error', error));
-
-    // const imgFace = document.querySelector('.recognizedFace');
-    // const coord = imgFace.getBoundingClientRect();
-    // console.log(coord);
+      .catch((err) => console.log(err));
   };
-  onRouteChange = route => {
-    if (route === 'signout') {
-      this.setState({ isSignedIn: false });
-    } else if (route === 'home') {
+
+  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">
-        <ParticlesBg
-          className="particles"
-          color="#00ffff"
-          num={200}
-          type="cobweb"
-          bg={true}
-        />
+        <ParticlesBg type="cobweb" color="#CAE4DB" num={150} />
         <Navigation
-          isSignedIn={this.state.isSignedIn}
+          isSignedIn={isSignedIn}
           onRouteChange={this.onRouteChange}
-        ></Navigation>
-        {this.state.route === 'home' ? (
+        />
+        {route === "home" ? (
           <div>
-            <Logo></Logo>
-            <Rank></Rank>
+            <Logo />
+            <Rank
+              name={this.state.user.name}
+              entries={this.state.user.entries}
+            />
             <ImageLinkForm
               onInputChange={this.onInputChange}
               onButtonSubmit={this.onButtonSubmit}
-            ></ImageLinkForm>
-            <FaceRecognition
-              box={this.state.box}
-              imageUrl={this.state.imageUrl}
-            ></FaceRecognition>
+            />
+            <FaceRecognition box={box} imageUrl={imageUrl} />
           </div>
-        ) : this.state.route === 'signin' ? (
-          <SignIn onRouteChange={this.onRouteChange}></SignIn>
+        ) : route === "signin" ? (
+          <SignIn loadUser={this.loadUser} onRouteChange={this.onRouteChange} />
         ) : (
-          <Register onRouteChange={this.onRouteChange}></Register>
+          <Register
+            loadUser={this.loadUser}
+            onRouteChange={this.onRouteChange}
+          />
         )}
       </div>
     );

diff --git a/src/App.test.js b/src/App.test.js
diff --git a/src/components/FaceRecognition/FaceRecognition.js b/src/components/FaceRecognition/FaceRecognition.js
@@ -1,17 +1,11 @@
-import React from 'react';
-import './FaceRecognition.css';
+import React from "react";
+import "./FaceRecognition.css";
 
 const FaceRecognition = ({ imageUrl, box }) => {
   return (
     <div className="center ma">
       <div className="absolute mt2">
-        <img
-          id="recognizedFace"
-          alt=""
-          src={imageUrl}
-          width={'500px'}
-          height={'auto'}
-        />
+        <img id="inputimage" alt="" src={imageUrl} width="500px" heigh="auto" />
         <div
           className="bounding-box"
           style={{

diff --git a/src/components/ImageLinkForm/ImageLinkForm.js b/src/components/ImageLinkForm/ImageLinkForm.js
@@ -1,22 +1,23 @@
-import React, { Component } from 'react';
-import './ImageLinkForm.css';
+import React from "react";
+import "./ImageLinkForm.css";
 
 const ImageLinkForm = ({ onInputChange, onButtonSubmit }) => {
   return (
     <div>
       <p className="f3">
-        {'This Magic Brain wil detect faces in your pictures. Give it a try.'}
+        {"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
-            className="f4 pa2 w-70 center"
+            className="f4 pa2 w-70 center link-text"
             type="text"
             onChange={onInputChange}
-          ></input>
+          />
           <button
-            className="w-30 grow f4 link ph3 pv2 dib white bg-light-purple"
+            className="w-30 grow f4 link ph3 pv2 dib white"
             onClick={onButtonSubmit}
+            style={{ backgroundColor: "#628078" }}
           >
             Detect
           </button>

diff --git a/src/components/Logo/Logo.css b/src/components/Logo/Logo.css
@@ -1,3 +1,3 @@
 .Tilt {
-  background: linear-gradient(89deg, #ff5edf 0%, #04c8de 100%);
+  background: linear-gradient(89deg, #7da7ba 0%, #a97e70 100%);
 }
diff --git a/src/components/Logo/Logo.js b/src/components/Logo/Logo.js
@@ -1,17 +1,18 @@
-import React, { Component } from 'react';
-import Tilt from 'react-parallax-tilt';
-import './Logo.css';
-import brain from './brain.png';
+import React from "react";
+import Tilt from "react-parallax-tilt";
+import "./Logo.css";
+import brain from "./brain.png";
 
 const Logo = () => {
   return (
     <div className="ma4 mt0">
       <Tilt
         className="Tilt br2 shadow-2"
-        style={{ height: '150px', width: '150px' }}
+        options={{ max: 55 }}
+        style={{ height: 150, width: 150 }}
       >
         <div className="Tilt-inner pa3">
-          <img style={{ paddingTop: '5px' }} alt="logo" src={brain} />
+          <img style={{ paddingTop: "5px" }} alt="logo" src={brain} />
         </div>
       </Tilt>
     </div>

diff --git a/src/components/Rank/Rank.js b/src/components/Rank/Rank.js
@@ -1,10 +1,10 @@
-import React, { Component } from 'react';
+import React from "react";
 
-const Rank = () => {
+const Rank = ({ name, entries }) => {
   return (
     <div>
-      <div className="white f3">{'Beren, your current rank is...'}</div>
-      <div className="white f1">{'#5'}</div>
+      <div className="white f3">{`${name}, your entry count is ...`}</div>
+      <div className="white f1">{entries}</div>
     </div>
   );
 };