From 163da834ea39c9a86a45554913854a45d7a1ffcc Mon Sep 17 00:00:00 2001
From: Alisson <alissonsleal@hotmail.com>
Date: Sun, 13 Dec 2020 19:12:20 -0300
Subject: [PATCH 1/5] Initial testing

---
 src/pages/Home/index.tsx | 24 +++++++++++++++++++++++-
 src/pages/Home/styles.ts | 10 ++++++++++
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index e01ce8d..ebce268 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import ReactGA from 'react-ga';
-import { FiSearch } from 'react-icons/fi';
+import { FiSearch, FiCamera } from 'react-icons/fi';
 
 import api from '../../services/api';
 import CarInfo from '../../components/CarInfo';
@@ -26,6 +26,7 @@ const Home: React.FC = () => {
 
   const [carPlate, setCarPlate] = useState('');
   const [carInfo, setCarInfo] = useState<CarProps>();
+  const [source, setSource] = useState('');
 
   const handleSubmit = async () => {
     try {
@@ -41,6 +42,16 @@ const Home: React.FC = () => {
     }
   };
 
+  const handleCapture = (target: any) => {
+    if (target.files) {
+      if (target.files.length !== 0) {
+        const file = target.files[0];
+        const newUrl = URL.createObjectURL(file);
+        setSource(newUrl);
+      }
+    }
+  };
+
   return (
     <Container>
       <h1>Consulta-Placa</h1>
@@ -74,6 +85,17 @@ const Home: React.FC = () => {
           Mercosul.
         </p>
       )}
+      <input
+        accept="image/*"
+        id="icon-button-file"
+        type="file"
+        capture="environment"
+        onChange={(e) => handleCapture(e.target)}
+      />
+      <label htmlFor="icon-button-file">
+        <FiCamera fontSize="large" color="primary" />
+      </label>
+      {source && <img src={source} />}
     </Container>
   );
 };
diff --git a/src/pages/Home/styles.ts b/src/pages/Home/styles.ts
index 5aed675..fce2225 100644
--- a/src/pages/Home/styles.ts
+++ b/src/pages/Home/styles.ts
@@ -54,4 +54,14 @@ export const Container = styled.div`
       }
     }
   }
+  input[type='file'] {
+    display: none;
+  }
+
+  label {
+    svg {
+      height: 30px;
+      width: 30px;
+    }
+  }
 `;

From d97dc63dd4d951958cd904c0c4a00365d17a7388 Mon Sep 17 00:00:00 2001
From: Alisson Leal <alissonsleal@hotmail.com>
Date: Sun, 13 Dec 2020 19:43:09 -0300
Subject: [PATCH 2/5] added alt to img

---
 src/pages/Home/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index ebce268..9b920bc 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -95,7 +95,7 @@ const Home: React.FC = () => {
       <label htmlFor="icon-button-file">
         <FiCamera fontSize="large" color="primary" />
       </label>
-      {source && <img src={source} />}
+      {source && <img src={source} alt="Uploaded Source" />}
     </Container>
   );
 };

From 56dc89ad8ea90db7934ad536b0b6558fa2b6b41c Mon Sep 17 00:00:00 2001
From: Alisson Leal <alissonsleal@hotmail.com>
Date: Mon, 14 Dec 2020 17:42:17 -0300
Subject: [PATCH 3/5] It works if the image only has the license plate

---
 package.json                           |   1 +
 src/components/SearchByImage/index.tsx |  44 +++++++++++
 src/components/SearchByImage/styles.ts |  14 ++++
 src/pages/Home/index.tsx               |   2 +
 yarn.lock                              | 100 +++++++++++++++++++++++++
 5 files changed, 161 insertions(+)
 create mode 100644 src/components/SearchByImage/index.tsx
 create mode 100644 src/components/SearchByImage/styles.ts

diff --git a/package.json b/package.json
index 14de539..f72679d 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "react-scripts": "3.4.3",
     "react-spring": "^8.0.27",
     "styled-components": "^5.2.0",
+    "tesseract.js": "^2.1.4",
     "typescript": "~3.7.2",
     "workbox-background-sync": "^5.1.3",
     "workbox-broadcast-update": "^5.1.3",
diff --git a/src/components/SearchByImage/index.tsx b/src/components/SearchByImage/index.tsx
new file mode 100644
index 0000000..9bce7b0
--- /dev/null
+++ b/src/components/SearchByImage/index.tsx
@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import { VscLoading } from 'react-icons/vsc';
+import { createWorker } from 'tesseract.js';
+
+import { Container } from './styles';
+
+const SearchByImage = ({ dataSource: source }: any) => {
+  let searchDone = false;
+  const [carPlateImage, setCarPlateImage] = useState('');
+
+  const worker = createWorker({
+    logger: (m) => console.log(m), // dev mode
+  });
+
+  async function getTextFromImage(img: string) {
+    if (searchDone === false) {
+      await worker.load();
+      await worker.loadLanguage('eng');
+      await worker.initialize('eng');
+      await worker.setParameters({
+        tessedit_char_whitelist: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+      });
+      const {
+        data: { text },
+      } = await worker.recognize(img);
+
+      await worker.terminate();
+      setCarPlateImage(text);
+      console.log(text);
+      searchDone = true;
+      return text;
+    }
+  }
+  getTextFromImage(source);
+  return (
+    <Container>
+      {source && !carPlateImage && <VscLoading size={32} />}
+      {carPlateImage && <p>{carPlateImage}</p>}
+    </Container>
+  );
+};
+
+export default SearchByImage;
+//ocr.space api key = ab2e0ca8f188957
diff --git a/src/components/SearchByImage/styles.ts b/src/components/SearchByImage/styles.ts
new file mode 100644
index 0000000..8e5d539
--- /dev/null
+++ b/src/components/SearchByImage/styles.ts
@@ -0,0 +1,14 @@
+import styled, { keyframes } from 'styled-components';
+
+const spin = keyframes`
+{ 100% {
+        -webkit-transform: rotate(360deg);
+        transform:rotate(360deg);
+      }
+}`;
+
+export const Container = styled.div`
+  svg {
+    animation: ${spin} 2s linear infinite;
+  }
+`;
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 9b920bc..fd16df0 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -6,6 +6,7 @@ import api from '../../services/api';
 import CarInfo from '../../components/CarInfo';
 
 import { Container } from './styles';
+import SearchByImage from '../../components/SearchByImage';
 
 interface CarProps {
   ano: string;
@@ -95,6 +96,7 @@ const Home: React.FC = () => {
       <label htmlFor="icon-button-file">
         <FiCamera fontSize="large" color="primary" />
       </label>
+      {source && <SearchByImage dataSource={source} />}
       {source && <img src={source} alt="Uploaded Source" />}
     </Container>
   );
diff --git a/yarn.lock b/yarn.lock
index 004d3c2..bb9dcb5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2848,6 +2848,16 @@ bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
+blueimp-load-image@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/blueimp-load-image/-/blueimp-load-image-3.0.0.tgz#d71c39440a7d2f1a83e3e86a625e329116a51705"
+  integrity sha512-Q9rFbd4ZUNvzSFmRXx9MoG0RwWwJeMjjEUbG7WIOJgUg22Jgkow0wL5b35B6qwiBscxACW9OHdrP5s2vQ3x8DQ==
+
+bmp-js@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/bmp-js/-/bmp-js-0.1.0.tgz#e05a63f796a6c1ff25f4771ec7adadc148c07233"
+  integrity sha1-4Fpj95amwf8l9Hcex62twUjAcjM=
+
 bn.js@^4.0.0, bn.js@^4.1.0, bn.js@^4.4.0:
   version "4.11.9"
   resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-4.11.9.tgz#26d556829458f9d1e81fc48952493d0ba3507828"
@@ -3469,6 +3479,11 @@ colorette@^1.2.1:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.1.tgz#4d0b921325c14faf92633086a536db6e89564b1b"
   integrity sha512-puCDz0CzydiSYOrnXpz/PKd69zRrribezjtE9yd4zvytoRc8+RY/KJPvtPFKZS3E3wP6neGyMe0vOTlHO5L3Pw==
 
+colors@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
+  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
+
 combined-stream@^1.0.6, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -5085,6 +5100,11 @@ file-loader@4.3.0:
     loader-utils "^1.2.3"
     schema-utils "^2.5.0"
 
+file-type@^12.4.1:
+  version "12.4.2"
+  resolved "https://registry.yarnpkg.com/file-type/-/file-type-12.4.2.tgz#a344ea5664a1d01447ee7fb1b635f72feb6169d9"
+  integrity sha512-UssQP5ZgIOKelfsaB5CuGAL+Y+q7EmONuiwF3N5HAH0t27rvrttgi6Ra9k/+DVaY9UF6+ybxu5pOXLUdA8N7Vg==
+
 file-uri-to-path@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
@@ -5834,6 +5854,11 @@ icss-utils@^4.0.0, icss-utils@^4.1.1:
   dependencies:
     postcss "^7.0.14"
 
+idb-keyval@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/idb-keyval/-/idb-keyval-3.2.0.tgz#cbbf354deb5684b6cdc84376294fc05932845bd6"
+  integrity sha512-slx8Q6oywCCSfKgPgL0sEsXtPVnSbTLWpyiDcu6msHOyKOLari1TD1qocXVCft80umnkk3/Qqh3lwoFt8T/BPQ==
+
 identity-obj-proxy@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
@@ -6177,6 +6202,11 @@ is-docker@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.1.1.tgz#4125a88e44e450d384e09047ede71adc2d144156"
   integrity sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==
 
+is-electron@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/is-electron/-/is-electron-2.2.0.tgz#8943084f09e8b731b3a7a0298a7b5d56f6b7eef0"
+  integrity sha512-SpMppC2XR3YdxSzczXReBjqs2zGscWQpBIKqwXYBFic0ERaxNVgwLCHwOLZeESfdJQjX0RDvrJ1lBXX2ij+G1Q==
+
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -6332,6 +6362,11 @@ is-typedarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a"
   integrity sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=
 
+is-url@^1.2.4:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/is-url/-/is-url-1.2.4.tgz#04a4df46d28c4cff3d73d01ff06abeb318a1aa52"
+  integrity sha512-ITvGim8FhRiYe4IQ5uHSkj7pVaPDrCTkNd3yq3cV7iZAcJdHTUMPMEHcqSOy9xZ9qFenQCvi+2wjH9a1nXqHww==
+
 is-windows@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-windows/-/is-windows-1.0.2.tgz#d1850eb9791ecd18e6182ce12a30f396634bb19d"
@@ -6813,6 +6848,22 @@ jest@24.9.0:
     import-local "^2.0.0"
     jest-cli "^24.9.0"
 
+jpeg-autorotate@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/jpeg-autorotate/-/jpeg-autorotate-7.1.1.tgz#c57905c6afd3b54373a6a1d0249ed6e07f7b043b"
+  integrity sha512-ewTZTG/QWOM0D5h/yKcQ3QgyrnQYsr3qmcS+bqoAwgQAY1KBa31aJ+q+FlElaxo/rSYqfF1ixf+8EIgluBkgTg==
+  dependencies:
+    colors "^1.4.0"
+    glob "^7.1.6"
+    jpeg-js "^0.4.2"
+    piexifjs "^1.0.6"
+    yargs-parser "^20.2.1"
+
+jpeg-js@^0.4.2:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/jpeg-js/-/jpeg-js-0.4.2.tgz#8b345b1ae4abde64c2da2fe67ea216a114ac279d"
+  integrity sha512-+az2gi/hvex7eLTMTlbRLOhH6P6WFdk2ITI8HJsaH2VqYO0I594zXSYEP+tf4FW+8Cy68ScDXoAsQdyQanv3sw==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -7622,6 +7673,11 @@ no-case@^3.0.3:
     lower-case "^2.0.1"
     tslib "^1.10.0"
 
+node-fetch@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
+  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
+
 node-forge@^0.10.0:
   version "0.10.0"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.10.0.tgz#32dea2afb3e9926f02ee5ce8794902691a676bf3"
@@ -7910,6 +7966,11 @@ open@^7.0.2:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
+opencollective-postinstall@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
+  integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==
+
 opn@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
@@ -8232,6 +8293,11 @@ picomatch@^2.0.4, picomatch@^2.0.5, picomatch@^2.2.1:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
 
+piexifjs@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/piexifjs/-/piexifjs-1.0.6.tgz#883811d73f447218d0d06e9ed7866d04533e59e0"
+  integrity sha512-0wVyH0cKohzBQ5Gi2V1BuxYpxWfxF3cSqfFXfPIpl5tl9XLS5z4ogqhUCD20AbHi0h9aJkqXNJnkVev6gwh2ag==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -10724,6 +10790,30 @@ terser@^4.1.2, terser@^4.6.12, terser@^4.6.3:
     source-map "~0.6.1"
     source-map-support "~0.5.12"
 
+tesseract.js-core@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/tesseract.js-core/-/tesseract.js-core-2.2.0.tgz#6ef78051272a381969fac3e45a226e85022cffef"
+  integrity sha512-a8L+OJTbUipBsEDsJhDPlnLB0TY1MkTZqw5dqUwmiDSjUzwvU7HWLg/2+WDRulKUi4LE+7PnHlaBlW0k+V0U0w==
+
+tesseract.js@^2.1.4:
+  version "2.1.4"
+  resolved "https://registry.yarnpkg.com/tesseract.js/-/tesseract.js-2.1.4.tgz#24ef4af99982e34720f254e8286b6812634ad267"
+  integrity sha512-r1nPDjkaD7QdlGfgn/q0BIKBnnCSXcM9PTrgp6rP2aWutwuf1BrQX564rSd1uQFJYk6GQYU6U6fm3bTQ/XMBZw==
+  dependencies:
+    blueimp-load-image "^3.0.0"
+    bmp-js "^0.1.0"
+    file-type "^12.4.1"
+    idb-keyval "^3.2.0"
+    is-electron "^2.2.0"
+    is-url "^1.2.4"
+    jpeg-autorotate "^7.1.1"
+    node-fetch "^2.6.0"
+    opencollective-postinstall "^2.0.2"
+    regenerator-runtime "^0.13.3"
+    resolve-url "^0.2.1"
+    tesseract.js-core "^2.2.0"
+    zlibjs "^0.3.1"
+
 test-exclude@^5.2.3:
   version "5.2.3"
   resolved "https://registry.yarnpkg.com/test-exclude/-/test-exclude-5.2.3.tgz#c3d3e1e311eb7ee405e092dac10aefd09091eac0"
@@ -11746,6 +11836,11 @@ yargs-parser@^13.1.2:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^20.2.1:
+  version "20.2.4"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-20.2.4.tgz#b42890f14566796f85ae8e3a25290d205f154a54"
+  integrity sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==
+
 yargs@^13.3.0, yargs@^13.3.2:
   version "13.3.2"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-13.3.2.tgz#ad7ffefec1aa59565ac915f82dccb38a9c31a2dd"
@@ -11761,3 +11856,8 @@ yargs@^13.3.0, yargs@^13.3.2:
     which-module "^2.0.0"
     y18n "^4.0.0"
     yargs-parser "^13.1.2"
+
+zlibjs@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/zlibjs/-/zlibjs-0.3.1.tgz#50197edb28a1c42ca659cc8b4e6a9ddd6d444554"
+  integrity sha1-UBl+2yihxCymWcyLTmqd3W1ERVQ=

From ac18dd45d51f6fe368df4aa2358cd469070b3092 Mon Sep 17 00:00:00 2001
From: Alisson Leal <alissonsleal@hotmail.com>
Date: Mon, 14 Dec 2020 18:34:19 -0300
Subject: [PATCH 4/5] styled image size

---
 src/components/SearchByImage/index.tsx | 37 +++++++++++++-------------
 src/pages/Home/styles.ts               |  5 ++++
 2 files changed, 23 insertions(+), 19 deletions(-)

diff --git a/src/components/SearchByImage/index.tsx b/src/components/SearchByImage/index.tsx
index 9bce7b0..9ed9248 100644
--- a/src/components/SearchByImage/index.tsx
+++ b/src/components/SearchByImage/index.tsx
@@ -5,37 +5,36 @@ import { createWorker } from 'tesseract.js';
 import { Container } from './styles';
 
 const SearchByImage = ({ dataSource: source }: any) => {
-  let searchDone = false;
   const [carPlateImage, setCarPlateImage] = useState('');
+  const [oldSource, setOldSource] = useState('');
 
   const worker = createWorker({
     logger: (m) => console.log(m), // dev mode
   });
 
   async function getTextFromImage(img: string) {
-    if (searchDone === false) {
-      await worker.load();
-      await worker.loadLanguage('eng');
-      await worker.initialize('eng');
-      await worker.setParameters({
-        tessedit_char_whitelist: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ',
-      });
-      const {
-        data: { text },
-      } = await worker.recognize(img);
+    await worker.load();
+    await worker.loadLanguage('por');
+    await worker.initialize('por');
+    // await worker.setParameters({
+    //   tessedit_char_whitelist: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+    // });
+    const {
+      data: { text },
+    } = await worker.recognize(img);
 
-      await worker.terminate();
-      setCarPlateImage(text);
-      console.log(text);
-      searchDone = true;
-      return text;
-    }
+    await worker.terminate();
+    setCarPlateImage(text);
+    setOldSource(source);
+    console.log(text);
+    return text;
   }
+
   getTextFromImage(source);
   return (
     <Container>
-      {source && !carPlateImage && <VscLoading size={32} />}
-      {carPlateImage && <p>{carPlateImage}</p>}
+      {source !== oldSource && <VscLoading size={32} />}
+      {source === oldSource && carPlateImage && <p>{carPlateImage}</p>}
     </Container>
   );
 };
diff --git a/src/pages/Home/styles.ts b/src/pages/Home/styles.ts
index a21b797..e3cf1ed 100644
--- a/src/pages/Home/styles.ts
+++ b/src/pages/Home/styles.ts
@@ -74,4 +74,9 @@ export const Container = styled.div`
       width: 30px;
     }
   }
+
+  img {
+    max-width: 15rem;
+    border-radius: 1rem;
+  }
 `;

From 90aab3cf73d1f2ca9d0c7cc79d2bd774b7d551b4 Mon Sep 17 00:00:00 2001
From: Alisson Leal <alissonsleal@hotmail.com>
Date: Tue, 15 Dec 2020 19:54:50 -0300
Subject: [PATCH 5/5] Function is only called once now

---
 src/components/SearchByImage/index.tsx | 14 ++++++++------
 src/pages/Home/index.tsx               | 24 ++++++++++++++----------
 src/pages/Home/styles.ts               |  1 +
 3 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/components/SearchByImage/index.tsx b/src/components/SearchByImage/index.tsx
index 9ed9248..b6af6e3 100644
--- a/src/components/SearchByImage/index.tsx
+++ b/src/components/SearchByImage/index.tsx
@@ -7,18 +7,20 @@ import { Container } from './styles';
 const SearchByImage = ({ dataSource: source }: any) => {
   const [carPlateImage, setCarPlateImage] = useState('');
   const [oldSource, setOldSource] = useState('');
+  const [functionRan, setFunctionRan] = useState(false);
 
   const worker = createWorker({
     logger: (m) => console.log(m), // dev mode
   });
 
   async function getTextFromImage(img: string) {
+    setFunctionRan(true);
     await worker.load();
-    await worker.loadLanguage('por');
-    await worker.initialize('por');
-    // await worker.setParameters({
-    //   tessedit_char_whitelist: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ',
-    // });
+    await worker.loadLanguage('eng');
+    await worker.initialize('eng');
+    await worker.setParameters({
+      tessedit_char_whitelist: '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+    });
     const {
       data: { text },
     } = await worker.recognize(img);
@@ -30,7 +32,7 @@ const SearchByImage = ({ dataSource: source }: any) => {
     return text;
   }
 
-  getTextFromImage(source);
+  !functionRan && getTextFromImage(source);
   return (
     <Container>
       {source !== oldSource && <VscLoading size={32} />}
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 61e1724..f0a142d 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -88,16 +88,20 @@ const Home: React.FC = () => {
           Mercosul.
         </p>
       )}
-      <input
-        accept="image/*"
-        id="icon-button-file"
-        type="file"
-        capture="environment"
-        onChange={(e) => handleCapture(e.target)}
-      />
-      <label htmlFor="icon-button-file">
-        <FiCamera fontSize="large" color="primary" />
-      </label>
+      {!source && (
+        <>
+          <input
+            accept="image/*"
+            id="icon-button-file"
+            type="file"
+            capture="environment"
+            onChange={(e) => handleCapture(e.target)}
+          />
+          <label htmlFor="icon-button-file">
+            <FiCamera fontSize="large" color="primary" />
+          </label>
+        </>
+      )}
       {source && <SearchByImage dataSource={source} />}
       {source && <img src={source} alt="Uploaded Source" />}
     </Container>
diff --git a/src/pages/Home/styles.ts b/src/pages/Home/styles.ts
index e3cf1ed..0331374 100644
--- a/src/pages/Home/styles.ts
+++ b/src/pages/Home/styles.ts
@@ -72,6 +72,7 @@ export const Container = styled.div`
     svg {
       height: 30px;
       width: 30px;
+      cursor: pointer;
     }
   }