8 | {'This Magic brain will detect faces in your pictures.'}
9 |
10 |
11 |
12 |
13 |
17 |
18 |
19 |
20 | );
21 | };
22 |
23 |
24 | export default ImageLinkForm;
--------------------------------------------------------------------------------
/src/components/Navigation/Navigation.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Navigation = ({onRouteChange, isSignedIn}) =>{
4 |
5 | return isSignedIn ?
6 | (
7 |
13 | )
14 | : (
15 |
25 | );
26 | };
27 |
28 |
29 | export default Navigation;
--------------------------------------------------------------------------------
/src/components/Logo/Background-of-success-ideas/License premium.txt:
--------------------------------------------------------------------------------
1 | IMPORTANT NOTICE: This license only applies if you downloaded this content as
2 | a subscribed (or "premium") user. If you are an unsubscribed user (or "free"
3 | user) you are bound to the license terms described in the accompanying file
4 | "License free.txt".
5 |
6 | ---------------------
7 |
8 | You can download from your profile in Freepik a personalized license stating
9 | your right to use this content as a "premium" user:
10 |
11 | https://profile.freepik.com/my_downloads
12 |
13 | You are free to use this image:
14 |
15 | - For both personal and commercial projects and to modify it.
16 | - In a website or presentation template or application or as part of your design.
17 |
18 | You are not allowed to:
19 |
20 | - Sub-license, resell or rent it.
21 | - Include it in any online or offline archive or database.
22 |
23 | The full terms of the license are described in sections 7 and 8 of the Freepik
24 | terms of use, available online in the following link:
25 |
26 | http://www.freepik.com/terms_of_use
27 |
28 | The terms described in the above link have precedence over the terms described
29 | in the present document. In case of disagreement, the Freepik Terms of Use
30 | will prevail.
31 |
--------------------------------------------------------------------------------
/src/components/Signin/Signin.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const SignIn = ({onRouteChange}) =>{
4 | return (
5 |
6 |
7 |
31 |
32 |
33 | );
34 | };
35 |
36 |
37 | export default SignIn;
--------------------------------------------------------------------------------
/src/components/Register/Register.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 |
3 | const Register = ({onRouteChange}) =>{
4 | return (
5 |
6 |
7 |
32 |
33 |
34 | );
35 | };
36 |
37 |
38 | export default Register;
--------------------------------------------------------------------------------
/src/components/Logo/Background-of-success-ideas/License free.txt:
--------------------------------------------------------------------------------
1 | IMPORTANT NOTICE: This license only applies if you downloaded this content as
2 | an unsubscribed user. If you are a premium user (ie, you pay a subscription)
3 | you are bound to the license terms described in the accompanying file
4 | "License premium.txt".
5 |
6 | ---------------------
7 |
8 | You must attribute the image to its author:
9 |
10 | In order to use a content or a part of it, you must attribute it to Macrovector / Freepik,
11 | so we will be able to continue creating new graphic resources every day.
12 |
13 |
14 | How to attribute it?
15 |
16 | For websites:
17 |
18 | Please, copy this code on your website to accredit the author:
19 | Designed by Macrovector / Freepik
20 |
21 | For printing:
22 |
23 | Paste this text on the final work so the authorship is known.
24 | - For example, in the acknowledgements chapter of a book:
25 | "Designed by Macrovector / Freepik"
26 |
27 |
28 | You are free to use this image:
29 |
30 | - For both personal and commercial projects and to modify it.
31 | - In a website or presentation template or application or as part of your design.
32 |
33 | You are not allowed to:
34 |
35 | - Sub-license, resell or rent it.
36 | - Include it in any online or offline archive or database.
37 |
38 | The full terms of the license are described in section 7 of the Freepik
39 | terms of use, available online in the following link:
40 |
41 | http://www.freepik.com/terms_of_use
42 |
43 | The terms described in the above link have precedence over the terms described
44 | in the present document. In case of disagreement, the Freepik Terms of Use
45 | will prevail.
46 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
11 |
12 |
13 |
22 | React App
23 |
24 |
25 |
28 |
29 |
39 |
40 |
41 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import './App.css';
3 | import Particles from 'react-particles-js';
4 |
5 | import Navigation from './components/Navigation/Navigation';
6 | import Logo from './components/Logo/Logo';
7 | import ImageLinkForm from './components/ImageLinkForm/ImageLinkForm';
8 | import Rank from './components/Rank/Rank';
9 | import FaceRecognition from './components/FaceRecognition/FaceRecognition';
10 | import SignIn from './components/SignIn/SignIn';
11 | import Register from './components/Register/Register';
12 |
13 | // Require the client
14 |
15 | import Clarifai from 'clarifai';
16 |
17 | // initialize with your api key. This will also work in your browser via http://browserify.org/
18 |
19 | const app = new Clarifai.App({
20 | apiKey: 'a6ce27301ad64150926093861f9c9fe7'
21 | });
22 |
23 |
24 | const particlesParams = {
25 | particles:{
26 | number:{
27 | value: 30,
28 | density:{
29 | enable: true,
30 | value_area: 600
31 | }
32 | }
33 | }
34 | };
35 |
36 | class App extends Component {
37 | constructor(){
38 | super();
39 | this.state = {
40 | input:'',
41 | imageUrl: '',
42 | box: {},
43 | route: 'signin',
44 | isSignedIn: false
45 | }
46 | }
47 |
48 | onRouteChange = (route) => {
49 | if( route === 'signout' ){
50 | this.setState({isSignedIn: false});
51 | } else if( route === 'home' ){
52 | this.setState({isSignedIn: true});
53 | }
54 | this.setState({route: route})
55 | }
56 |
57 | calculateFaceLocation = (response) => {
58 | const clarifaiFaces = response.outputs[0].data.regions[0].region_info.bounding_box;
59 | console.log('calculateFaceLocation', clarifaiFaces);
60 | const image = document.getElementById('inputImage');
61 | const width = Number(image.width);
62 | const height = Number(image.height);
63 |
64 | console.log('image', image);
65 |
66 | console.log('left_col', clarifaiFaces.left_col * width);
67 | const boxLocation = {
68 | leftCol : clarifaiFaces.left_col * width,
69 | topRow : clarifaiFaces.top_row * height,
70 | rightCol : width - clarifaiFaces.right_col * width,
71 | bottomRow : height - clarifaiFaces.bottom_row * height
72 | };
73 |
74 | console.log('boxLocation', boxLocation);
75 | return boxLocation;
76 | }
77 |
78 | displayFaceBox = (box) => {
79 | // console.log('displayFaceBox', box);
80 | this.setState({box: box})
81 | }
82 |
83 | onInputChange = (event) => {
84 | // console.log(event.target.value);
85 | this.setState({input: event.target.value});
86 | }
87 |
88 | onButtonSubmit = () => {
89 | this.setState({imageUrl:this.state.input});
90 | // console.log('button', this.state.input);
91 | app.models.predict(
92 | Clarifai.FACE_DETECT_MODEL,
93 | this.state.input)
94 | .then( response => {
95 | // do something with response
96 | // console.log(response);
97 | this.displayFaceBox(this.calculateFaceLocation(response));
98 | })
99 | .catch( err => {
100 | // there was an error
101 | console.log(err);
102 | });
103 | };
104 |
105 | render() {
106 | return (
107 |
130 | );
131 | }
132 | }
133 |
134 | export default App;
135 |
--------------------------------------------------------------------------------
/src/registerServiceWorker.js:
--------------------------------------------------------------------------------
1 | // In production, we register a service worker to serve assets from local cache.
2 |
3 | // This lets the app load faster on subsequent visits in production, and gives
4 | // it offline capabilities. However, it also means that developers (and users)
5 | // will only see deployed updates on the "N+1" visit to a page, since previously
6 | // cached resources are updated in the background.
7 |
8 | // To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
9 | // This link also includes instructions on opting out of this behavior.
10 |
11 | const isLocalhost = Boolean(
12 | window.location.hostname === 'localhost' ||
13 | // [::1] is the IPv6 localhost address.
14 | window.location.hostname === '[::1]' ||
15 | // 127.0.0.1/8 is considered localhost for IPv4.
16 | window.location.hostname.match(
17 | /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
18 | )
19 | );
20 |
21 | export default function register() {
22 | if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
23 | // The URL constructor is available in all browsers that support SW.
24 | const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
25 | if (publicUrl.origin !== window.location.origin) {
26 | // Our service worker won't work if PUBLIC_URL is on a different origin
27 | // from what our page is served on. This might happen if a CDN is used to
28 | // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
29 | return;
30 | }
31 |
32 | window.addEventListener('load', () => {
33 | const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
34 |
35 | if (isLocalhost) {
36 | // This is running on localhost. Lets check if a service worker still exists or not.
37 | checkValidServiceWorker(swUrl);
38 |
39 | // Add some additional logging to localhost, pointing developers to the
40 | // service worker/PWA documentation.
41 | navigator.serviceWorker.ready.then(() => {
42 | console.log(
43 | 'This web app is being served cache-first by a service ' +
44 | 'worker. To learn more, visit https://goo.gl/SC7cgQ'
45 | );
46 | });
47 | } else {
48 | // Is not local host. Just register service worker
49 | registerValidSW(swUrl);
50 | }
51 | });
52 | }
53 | }
54 |
55 | function registerValidSW(swUrl) {
56 | navigator.serviceWorker
57 | .register(swUrl)
58 | .then(registration => {
59 | registration.onupdatefound = () => {
60 | const installingWorker = registration.installing;
61 | installingWorker.onstatechange = () => {
62 | if (installingWorker.state === 'installed') {
63 | if (navigator.serviceWorker.controller) {
64 | // At this point, the old content will have been purged and
65 | // the fresh content will have been added to the cache.
66 | // It's the perfect time to display a "New content is
67 | // available; please refresh." message in your web app.
68 | console.log('New content is available; please refresh.');
69 | } else {
70 | // At this point, everything has been precached.
71 | // It's the perfect time to display a
72 | // "Content is cached for offline use." message.
73 | console.log('Content is cached for offline use.');
74 | }
75 | }
76 | };
77 | };
78 | })
79 | .catch(error => {
80 | console.error('Error during service worker registration:', error);
81 | });
82 | }
83 |
84 | function checkValidServiceWorker(swUrl) {
85 | // Check if the service worker can be found. If it can't reload the page.
86 | fetch(swUrl)
87 | .then(response => {
88 | // Ensure service worker exists, and that we really are getting a JS file.
89 | if (
90 | response.status === 404 ||
91 | response.headers.get('content-type').indexOf('javascript') === -1
92 | ) {
93 | // No service worker found. Probably a different app. Reload the page.
94 | navigator.serviceWorker.ready.then(registration => {
95 | registration.unregister().then(() => {
96 | window.location.reload();
97 | });
98 | });
99 | } else {
100 | // Service worker found. Proceed as normal.
101 | registerValidSW(swUrl);
102 | }
103 | })
104 | .catch(() => {
105 | console.log(
106 | 'No internet connection found. App is running in offline mode.'
107 | );
108 | });
109 | }
110 |
111 | export function unregister() {
112 | if ('serviceWorker' in navigator) {
113 | navigator.serviceWorker.ready.then(registration => {
114 | registration.unregister();
115 | });
116 | }
117 | }
118 |
--------------------------------------------------------------------------------
10 |