add more css and use pure css loader

package.json

@@ -10,12 +10,11 @@
 	"dependencies": {
 		"@teachablemachine/image": "^0.8.4",
 		"@tensorflow/tfjs": "^3.2.0",
-		"blueimp-load-image": "^5.14.0",
 		"bootstrap": "^4.6.0",
 		"react": "16.13.1",
 		"react-bootstrap": "^1.5.1",
 		"react-dom": "16.13.1",
-		"react-epic-spinners": "^0.5.0",
+		"react-images-upload": "^1.2.8",
 		"react-scripts": "3.4.3"
 	},
 	"devDependencies": {

src/App.css

@@ -17,10 +17,10 @@ body {
 .loading {
 	margin: 0;
 	position: absolute;
-	top: 25%;
+	top: 30%;
 	-ms-transform: translateY(-50%);
 	transform: translateY(-50%);
-	left: 35%;
+	left: 40%;
 }
 .loading-msg {
 	width: 20rem;
@@ -31,3 +31,29 @@ body {
 	left: 15%;
 	top: 40%;
 }
+
+/*pure css loader*/
+.lds-dual-ring {
+	display: inline-block;
+	width: 80px;
+	height: 80px;
+}
+.lds-dual-ring:after {
+	content: ' ';
+	display: block;
+	width: 64px;
+	height: 64px;
+	margin: 8px;
+	border-radius: 50%;
+	border: 6px solid #ff3864;
+	border-color: #ff3864 transparent #ff3864 transparent;
+	animation: lds-dual-ring 1.2s linear infinite;
+}
+@keyframes lds-dual-ring {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}

src/App.js

@@ -2,26 +2,26 @@ import React from 'react'
 import './App.css'
 import Upload from './components/upload'
 import { messages } from './components/message'
-import { SelfBuildingSquareSpinner } from 'react-epic-spinners'
 import Results from './components/results'
 import ClientTopNav from './components/ClientTopNav'
 import { predict } from './helpers/helpers'
 
-var loadImage = require('blueimp-load-image')
-
 export default class App extends React.Component {
 	state = {
 		results: [],
 		loc: 'home',
 	}
 
-	handleFiles = (e) => {
-		this.setState({ results: [] })
+	handleFiles = async (file, url) => {
 		this.setState({ loc: 'results' })
-		loadImage(e.target.files[0], async (img) => {
-			this.setState({ results: await predict(img) })
+		const img = new Image()
+		img.src = url
+		this.setState({
+			results: await predict(img),
+			imgurl: url[0],
 		})
 	}
+
 	handleback = () => {
 		this.setState({ results: [], loc: 'home' })
 	}
@@ -42,6 +42,7 @@ export default class App extends React.Component {
 						<Results
 							handleback={this.handleback}
 							results={this.state.results}
+							img={this.state.imgurl}
 						/>
 					</div>
 				)
@@ -51,10 +52,7 @@ export default class App extends React.Component {
 					<div>
 						<ClientTopNav />
 						<div className="loading">
-							<SelfBuildingSquareSpinner
-								color="#EE964B"
-								size="140"
-							/>
+							<div class="lds-dual-ring"></div>
 						</div>
 						<h3 className="loading-msg">{messages[random]}</h3>
 					</div>

src/components/ClientTopNav.js

@@ -15,7 +15,6 @@ export default class ClientTopNav extends React.Component {
 					</a>
 					<h3 className="name">Not A Dog</h3>
 				</div>
-				{}
 			</nav>
 		)
 	}

src/components/results.css

@@ -0,0 +1,9 @@
+.btn-back {
+	margin-left: 2rem;
+	margin-top: 5rem;
+	background-color: #e07a5f;
+}
+
+.btn-back:hover {
+	background-color: #392f5a;
+}

src/components/results.js

@@ -1,5 +1,6 @@
 import React from 'react'
 import Button from 'react-bootstrap/Button'
+import './results.css'
 
 export default class Results extends React.Component {
 	render() {
@@ -15,8 +16,20 @@ export default class Results extends React.Component {
 		})
 		return (
 			<div>
+				<div>
+					<img
+						src={this.props.img}
+						alt="test"
+						width="200"
+						height="300"
+					/>
+				</div>
 				<h2>{JSON.stringify(obj.className).replace(/['"]+/g, '')}</h2>
-				<Button variant="primary" onClick={this.props.handleback}>
+				<Button
+					variant="primary"
+					onClick={this.props.handleback}
+					className="btn-back"
+				>
 					Back
 				</Button>
 			</div>

src/components/upload.js

@@ -1,15 +1,17 @@
 import React from 'react'
 import './upload.css'
+import ImageUploader from 'react-images-upload'
 
 export default class Upload extends React.Component {
 	render() {
 		return (
 			<div className="btn-upload">
-				<input
-					type="file"
-					className="upload"
-					accept="image/*"
+				<ImageUploader
+					withIcon={true}
+					buttonText="Choose image"
 					onChange={this.props.handleFiles}
+					imgExtension={['.jpg', '.png', '.jpeg']}
+					maxFileSize={5242880}
 				/>
 			</div>
 		)