<repo_name>AkilakumariA/React-17-project<file_sep>/src/page/Tensorflow.js
import React, { useRef } from 'react';
import useTFClassify from '../utils/hooks/useTFClassify';

export default function Tensorflow() {
    const imageRef = useRef();
    const { predict, predictions, isLoading } = useTFClassify();



    return (
        <div className='flex justify-center'>
            <div className='w-1/3'>
                <h1 className='text-center'>TensorFlow Example</h1>
                <img src='https://images.unsplash.com/photo-1587300003388-59208cc962cb?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwyNDI1MTZ8MHwxfHNlYXJjaHw0fHxkb2d8ZW58MHx8fHwxNjI1NTgzNDYy&ixlib=rb-1.2.1&q=80&w=1080' alt='' width='400' crossOrigin='anonymous' ref={imageRef} />
                <div className="text-center my-5">
                    {predictions.length > 0 &&
                        predictions.map((prediction) => (
                            <div className='flex justify-between text-sm'>
                                <p>{prediction.className}</p>
                                <p>{Math.floor(prediction.probability * 100)}%</p>
                            </div>
                        ))}
                    <button className="p-2 rounded bg-gray-900 text-white w-64" onClick={() => predict(imageRef.current)}>
                        {isLoading && '⏳'}
                        {!isLoading && 'Predict Result'}
                    </button>
                </div>
            </div>
        </div>
    )
}
<file_sep>/src/components/Header.js
import React, { useContext } from 'react';
import { NavLink, useHistory } from 'react-router-dom';
import firebase from '../congif/firebase';
import AppContext from '../store/AppContext';

export default function Header() {
    // const [isLoggedIn, setisLoggedIn] = useState(false);
    const [isLoggedIn] = useContext(AppContext);
    const history = useHistory();
    // console.log(user);


    function logout() {
        firebase.auth().signOut().then(res => {
            // setisLoggedIn(false);
            history.replace('/login');
        }).catch(e => {
            console.log(e.response.data);
        })
    }

    return (
        <nav className='py-5 bg-gray-900 text-white flex justify-between'>
            <ul className='flex justify-between px-10'>
                <li className='mr-5'>
                    <NavLink to="/" exact className='hover:underline hover:text-blue-200' activeClassName='underline text-blue-200'>Home</NavLink>
                </li>
                <li className='mr-5'>
                    <NavLink to="/gallery" className='hover:underline hover:text-blue-200' activeClassName='underline text-blue-200'>Gallery</NavLink>
                </li>
                <li className='mr-5'>
                    <NavLink to="/tensorflow" className='hover:underline hover:text-blue-200' activeClassName='underline text-blue-200'>Tensorflow</NavLink>
                </li>
            </ul>
            <ul className='flex justify-between px-10'>
                <li>
                    {isLoggedIn ? (<button className='hover:underline hover:text-blue-200' onClick={logout}>Logout</button>) : (<NavLink to="/login" className='hover:underline hover:text-blue-200'>Login</NavLink>)}
                </li>
                {!isLoggedIn &&
                    <li className='ml-5'>
                        <NavLink to="/signup" className='hover:underline hover:text-blue-200'>Sign Up</NavLink>
                    </li>}
            </ul>
        </nav >
    )
}
<file_sep>/src/page/Gallery.js
import React from 'react'
import Images from '../components/Images'

export default function Gallery() {
    return (
        <section className='flex justify-center text-center'>
            {/* {console.log('re-render')} */}
            <div className='w-10/12'>
                <div className='text-center'>
                    {/* <div className='my-4'>{title}</div> */}
                    <Images />
                </div>
                {/* <div>
            <button onClick={handleClick} className='my-2 p-1 bg-blue-700 text-white'>Toggle image</button>
        </div>
        {isShowing ? <Images /> : null} */}
            </div>
        </section>
    )
}
<file_sep>/src/page/Login.js
import React, { useState } from 'react'
import firebase from '../congif/firebase';
import "firebase/auth";
import { useHistory } from 'react-router-dom';

export default function Login() {
    const [isLoading, setisLoading] = useState(false);
    const [error, seterror] = useState('');
    const [form, setform] = useState({ email: "", password: "" });
    // const [isLoggedIn, setisLoggedIn] = useState(false);
    const history = useHistory();

    function handleForm(e) {
        if (isLoading) return;
        setisLoading(true);
        e.preventDefault();
        firebase.auth().signInWithEmailAndPassword(form.email, form.password).then(res => {
            setisLoading(false);
            seterror('');
            history.replace('/');
            // setisLoggedIn(true)
        }).catch((error) => {
            setisLoading(false)
            seterror(error.message);
        });
    }
    function handleInput(e) {
        setform({ ...form, [e.target.name]: e.target.value })
    }
    // if (isLoggedIn) return <Redirect to='/' />;

    return (
        <div className='flex h-screen bg-gray-200'>
            <div className='bg-white flex flex-wrap justify-center m-auto rounded-lg shadow-lg w-1/3'>
                <form className='m-5 w-10/12' onSubmit={handleForm}>
                    {error !== '' && <p>{error}</p>}
                    <h1 className='w-full text-4xl tracking-widest text-center my-6'>Login</h1>
                    <div className='w-full my-6'>
                        <input type='email' className='border-b-2 border-dashed border-gray-300 py-1.5 text-black w-full' placeholder='Email or Username' name='email' value={form.email} onChange={handleInput} />
                    </div>
                    <div className='w-full my-6'>
                        <input type='password' className='border-b-2 border-dashed border-gray-300 py-1.5 text-black w-full' placeholder='<PASSWORD>' name='password' value={form.password} onChange={handleInput} />
                    </div>
                    <div className='w-full my-10'>
                        <button type='submit' className='bg-red-300 p-2 rounded shadow text-white w-full'>
                            {isLoading ? (<i className='fas fa-circle-notch fa-spin '></i>) : ('Login')}
                        </button>
                    </div>
                </form>
            </div>
        </div>
    )
}
<file_sep>/src/components/Image.js
import React, { useRef, useState } from 'react';
import PropTypes from 'prop-types';
import useTFClassify from '../utils/hooks/useTFClassify';

function Image({ image, index, handleRemove, show }) {
    const [isHovering, setIsHovering] = useState(false);
    const { predict, predictions, setPredictions, isLoading } = useTFClassify();
    const imageRef = useRef();


    return (
        <div className='relative' onMouseEnter={() => setIsHovering(true)} onMouseLeave={() => setIsHovering(false)}>

            {(predictions.length > 0 || isLoading) &&
                (<span class="absolute bg-gray-800 text-white rounded-lg shadow px-2 left-0 ml-5" onClick={() => setPredictions([])}>
                    {isLoading && <p>Fetching results...</p>}
                    {predictions.map((prediction) => (
                        <div class="flex justify-between text-sm">
                            <p>{prediction.className}</p>
                            <p>{Math.floor(prediction.probability * 100)}%</p>
                        </div>
                    ))}
                </span>)
            }

            <i className={`fas fa-times absolute right-0 cursor-pointer opacity-25 hover:opacity-100 ${isHovering ? '' : 'hidden'}`} onClick={() => handleRemove(index)}></i>
            <i className={`fas fa-search absolute left-0 cursor-pointer opacity-25 hover:opacity-100 ${isHovering ? '' : 'hidden'}`} onClick={() => predict(imageRef.current)}></i>
            <img ref={imageRef} onClick={show} src={image} alt='nature' width='100%' height='auto' crossOrigin='anonymous' />
        </div>
    );
}
// const types = {
//     function(props, propName) {
//         if (typeof props[propName] !== 'function') {
//             return new Error(`'${propName}' must be a function but you have provided ${typeof props[propName]}`);
//         }
//     }, number(props, propName) {
//         if (typeof props[propName] !== 'number') {
//             return new Error(`'${propName}' must be a number but you have provided ${typeof props[propName]}`);
//         }
//     }

// }
Image.propTypes = {
    // show: types.function,
    // index: types.number,
    show: PropTypes.func,
    index: PropTypes.number,
    image: PropTypes.string,
    handleRemove: PropTypes.func
}
export default Image;
<file_sep>/src/page/SignUp.js
import React from 'react'
import firebase from '../congif/firebase';
import "firebase/auth";
import { useHistory } from 'react-router-dom';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

export default function SignUp() {

    // const formik = useFormik({
    //     initialValues: {
    //         email: '',
    //         password: ''
    //     },
    //     // validate: value => {
    //     //     const errors = {};
    //     //     if (!value.email) {
    //     //         errors.email = "Email field is Required.";
    //     //     } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value.email)) {
    //     //         errors.email = 'Email is Invalid ';
    //     //     }

    //     //     if (!value.password) {
    //     //         errors.password = "Password field is Required.";
    //     //     } else if (value.password.length <= 8) {
    //     //         errors.password = "<PASSWORD>.";
    //     //     } else if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,32}$/i.test(value.password)) {
    //     //         errors.password = '<PASSWORD>';
    //     //     }

    //     //     return errors;
    //     // },
    //     validationSchema: Yup.object({
    //         email: Yup.string().required('Email field is Required').email(),
    //         password: Yup.string().required('Password field is Required.').min(8),
    //     }),
    //     onSubmit: value => {
    //         console.log(value);
    //     }
    // });
    const history = useHistory();

    return (
        <Formik
            initialValues={{
                email: '',
                password: ''
            }}
            validationSchema={Yup.object({
                email: Yup.string().required('Email field is Required').email(),
                password: Yup.string().required('Password field is Required.').min(8),
            })}
            onSubmit={(value, formikBag) => {
                firebase.auth().createUserWithEmailAndPassword(value.email, value.password).then(
                    res => {
                        history.replace('/');

                    }).catch(e => {
                        formikBag.setFieldError('email', e.message);
                    });
            }}
        >
            {formik => (
                <div className='flex h-screen bg-gray-200'>
                    <div className='bg-white flex flex-wrap justify-center m-auto rounded-lg shadow-lg w-1/3'>
                        <Form className='m-5 w-10/12'>
                            <h1 className='w-full text-4xl tracking-widest text-center my-6'>Sign Up Here</h1>
                            <div className='w-full my-6'>
                                <Field name="email" type="email" className='border-b-2 border-dashed border-gray-300 py-1.5 text-black w-full' placeholder='Email or Username' />
                                <ErrorMessage name="email" />
                            </div>
                            <div className='w-full my-6'>
                                <Field name="password" type="<PASSWORD>" className='border-b-2 border-dashed border-gray-300 py-1.5 text-black w-full' placeholder='<PASSWORD>' />
                                <ErrorMessage name="password" />
                            </div>
                            <div className='w-full my-10'>
                                <button type='submit' className='bg-red-300 p-2 rounded shadow text-white w-full'>Sign Up
                                    {/* {isLoading ? (<i className='fas fa-circle-notch fa-spin '></i>) : ('Sign Up')} */}
                                </button>
                            </div>
                        </Form>
                    </div>
                </div>
            )}
        </Formik >
    )
}
<file_sep>/src/congif/firebase.js
import firebase from "firebase/app";


// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "<KEY>",
    authDomain: "in-depth-react-1-45e3e.firebaseapp.com",
    projectId: "in-depth-react-1-45e3e",
    storageBucket: "in-depth-react-1-45e3e.appspot.com",
    messagingSenderId: "857943629592",
    appId: "1:857943629592:web:9e6f20f148cb840b47886d"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);

export default firebase;