files added

src/App.css

@@ -0,0 +1,43 @@
+.App {
+  text-align: center;
+}
+
+.center{
+  display:flex;
+  justify-content:center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/App.js

@@ -0,0 +1,100 @@
+import React, {Component} from 'react';
+import ParticlesBg from 'particles-bg';
+import './App.css';
+import Logo from './components/Logo/Logo';
+import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
+import FaceRecognition from './components/FaceRecognition/FaceRecognition';
+
+const returnClarifaiRequestOptions = (imageUrl) => {
+  const PAT = '9a79ac5267f54073853713833271f89d';
+    const USER_ID = 'tanmaymachkar';       
+    const APP_ID = 'test';
+    const MODEL_ID = 'face-detection';
+    const MODEL_VERSION_ID = 'aa7f35c01e0642fda5cf400f543e7c40';    
+    const IMAGE_URL = imageUrl;
+
+    const raw = JSON.stringify({
+        "user_app_id": {
+            "user_id": USER_ID,
+            "app_id": APP_ID
+        },
+        "inputs": [
+            {
+                "data": {
+                    "image": {
+                        "url": IMAGE_URL
+                    }
+                }
+            }
+        ]
+    });
+
+    const requestOptions = {
+        method: 'POST',
+        headers: {
+            'Accept': 'application/json',
+            'Authorization': 'Key ' + PAT
+        },
+        body: raw
+    };
+    return requestOptions;
+}
+
+class App extends Component{
+  constructor()
+  {
+    super();
+    this.state = {
+      input: '',
+      imageUrl: '',
+      box: {}
+    }
+  }
+
+  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);
+    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) => {
+    console.log(box);
+    this.setState({box: box})
+  }
+
+  onInputChange = (event) => {
+    this.setState({input: event.target.value});
+  }
+
+  onButtonSubmit = () => {
+    this.setState({imageUrl: this.state.input});
+    fetch("https://api.clarifai.com/v2/models/" + 'face-detection'  + "/outputs", returnClarifaiRequestOptions(this.state.input))
+        .then(response => response.json())
+        .then(response => this.displayFaceBox(this.calculateFaceLocation(response)))
+        .catch(err => console.log(err))
+  }
+
+  render()
+  {
+    return (
+    <div className="App">
+      <Logo />
+      <ImageLinkForm 
+        onInputChange = {this.onInputChange} 
+        onButtonSubmit = {this.onButtonSubmit} 
+      />
+      <FaceRecognition box = {this.state.box} imageUrl = {this.state.imageUrl}/>
+      <ParticlesBg type="circle" bg={true}/>
+    </div>
+    );
+  }
+}
+
+export default App;

src/App.test.js

@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

src/components/FaceRecognition/FaceRecognition.css

@@ -0,0 +1,9 @@
+.bounding-box
+{
+	position: absolute;
+	box-shadow: 0 0 0 3px black inset;
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: center;
+	cursor: pointer;
+}

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 mt2'>
+				<img id = 'inputimage' alt = '' src = {imageUrl} width = '500px' height = 'auto'/>
+				<div className = 'bounding-box' style = {{top: box.topRow, bottom: box.bottomRow, left: box.leftCol, right: box.rightCol}}></div>
+			</div>
+		</div>
+	);
+}
+
+export default FaceRecognition;

src/components/ImageLinkForm/ImageLinkForm.css

@@ -0,0 +1,92 @@
+.form{
+	width: 700px;
+}
+html, body {
+  height: 100%;
+}
+
+.wrap {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button {
+  min-width: 300px;
+  min-height: 60px;
+  font-size: 22px;
+  text-transform: uppercase;
+  letter-spacing: 1.3px;
+  font-weight: 700;
+  color: darkgoldenrod;
+  background: #4FD1C5;
+background: linear-gradient(90deg, rgba(129,230,217,1) 0%, rgba(79,209,197,1) 100%);
+  border: none;
+  border-radius: 1000px;
+  box-shadow: 12px 12px 24px rgba(79,209,197,.64);
+  transition: all 0.3s ease-in-out 0s;
+  cursor: pointer;
+  outline: none;
+  position: relative;
+  padding: 10px;
+  }
+
+button::before {
+content: '';
+  border-radius: 1000px;
+  min-width: calc(300px + 12px);
+  min-height: calc(60px + 12px);
+  border: 6px solid darkgreen;
+  box-shadow: 0 0 60px rgba(0,255,203,.64);
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  transition: all .3s ease-in-out 0s;
+}
+
+.button:hover, .button:focus {
+  color: #313133;
+  transform: translateY(-6px);
+}
+
+button:hover::before, button:focus::before {
+  opacity: 1;
+}
+
+button::after {
+  content: '';
+  width: 30px; height: 30px;
+  border-radius: 100%;
+  border: 6px solid darkcyan;
+  position: absolute;
+  z-index: -1;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: ring 1.5s infinite;
+}
+
+button:hover::after, button:focus::after {
+  animation: none;
+  display: none;
+}
+
+@keyframes ring {
+  0% {
+    width: 30px;
+    height: 30px;
+    opacity: 1;
+  }
+  100% {
+    width: 300px;
+    height: 300px;
+    opacity: 0;
+  }
+}
+
+.meh{
+  display: flex;
+}

src/components/ImageLinkForm/ImageLinkForm.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import './ImageLinkForm.css';
+
+const ImageLinkForm = ({onInputChange, onButtonSubmit}) => {
+	return(
+		<div>
+			<p className = 'f3'>
+				{'Faces Will be Detected Here'}
+			</p>
+			<div className = 'center'>
+				<div className = 'pa4 br3 shadow-5'>
+					<input className = 'f4 pa2 w-70 center' type = 'text' onChange = {onInputChange}/>
+					<button 
+						className = 'ma4 pointer button'
+						onClick = {onButtonSubmit}	
+						>Detect</button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default ImageLinkForm;

src/components/Logo/Logo.css

@@ -0,0 +1,3 @@
+.Tilt{
+	background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
+}

src/components/Logo/Logo.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Tilt } from 'react-tilt';
+import img from './img.png';
+import './Logo.css';
+
+const Logo = () => {
+	return(
+		<div className = 'pa2 ma4 mt0'>
+			<Tilt className = 'br2 shadow-2' style={{ height: 80, width: 80 }}>
+		      <div className = ''>
+		      	<img alt = 'img' src = {img} />
+		      </div>
+		    </Tilt>
+		</div>	
+	);
+}
+
+export default Logo;

src/index.css

@@ -0,0 +1,12 @@
+body {
+  margin: 0;
+  font-family: 'cursive',monospace;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  background: linear-gradient(0.25turn, #3f87a6, #ebf8e1, #f69d3c);
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import 'tachyons';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

src/reportWebVitals.js

@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';