Image to Text Converter using OCR

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": []
+}

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/babel", "next/core-web-vitals"]
 }

README.md

@@ -31,8 +31,20 @@ To learn more about Next.js, take a look at the following resources:
 
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-## Deploy on Vercel
+## Tesseract OCR Api
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+# Used to Convert Image to Text using Optical Character Recognition
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+## Building Ajenda ?
+
+# To Create a Sudoku Solver using Image Optical CHaracter recognition
+
+- Important Things to remember
+
+```bash
+await worker.setParameters({
+    tessedit_char_whitelist: "0123456789",
+  });
+```
+
+# Helps to Find Only Numbers

components/ImageToText.tsx

@@ -0,0 +1,87 @@
+import React, { useRef, useState } from "react";
+import { Flex, Heading, Input, Button, Box, useToast } from "@chakra-ui/react";
+import ShowOutput from "./ShowOutput";
+import { createWorker } from "tesseract.js";
+
+const ImageToText = () => {
+  const [outText, setOutText] = useState("");
+  const [fileUrl, setFileUrl] = useState("");
+  const [ocrLoad, setOcrLoad] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const toast = useToast();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const worker = createWorker({
+    logger: (m) => console.log(m),
+  });
+  const doOCR = async () => {
+    await worker.load();
+    await worker.loadLanguage("eng");
+    await worker.initialize("eng");
+    await worker.setParameters({
+      tessedit_char_whitelist: "0123456789",
+    });
+    const {
+      data: { text },
+    } = await worker.recognize(fileUrl);
+    setOutText(text);
+    setOcrLoad(false);
+  };
+
+  const handleChange = async (e: React.FormEvent) => {
+    setLoading(true);
+    try {
+      if (inputRef != null) {
+        const myUrl = inputRef!.current!.files[0];
+        let formData = new FormData();
+        formData.append("image", myUrl);
+        let res = await fetch("https://api.imgbb.com/1/upload?expiration=600&key=c17fb71a1a4eb8f95032fe46cee4de81", {
+          method: "POST",
+          body: formData,
+        });
+        let data = await res.json();
+        console.log(data);
+        setLoading(false);
+        setFileUrl(data.data.display_url);
+      }
+    } catch (error) {
+      setOutText("Network : : " + error);
+    }
+  };
+  const handleConvert = () => {
+    if (fileUrl) {
+      setOcrLoad(true);
+      doOCR();
+    } else {
+      toast({
+        position: "bottom-left",
+        render: () => (
+          <Box color="white" p={3} bg="green.500">
+            File_Url is Invalid
+          </Box>
+        ),
+      });
+    }
+  };
+
+  return (
+    <Flex direction={"column"} justifyContent={"flex-start"} w={"100%"} h={"100vh"} alignItems={"center"}>
+      <Heading size={"lg"} my={8} color={"blue.500"}>
+        Image To Text Converter
+      </Heading>
+      <Flex p={5} gap={5} w={"380px"} justifyContent={"center"} alignItems={"center"} direction={"column"} boxShadow="dark-lg" borderRadius={8}>
+        <Input ref={inputRef} onChange={handleChange} accept="image/png, image/jpg, image/jpeg" display={"none"} type={"file"} />
+        <Flex gap={2}>
+          <Button colorScheme={"blue"} onClick={() => inputRef?.current?.click()}>
+            Select Image
+          </Button>
+          <Button disabled={loading} colorScheme={"green"} onClick={handleConvert}>
+            Convert
+          </Button>
+        </Flex>
+        <ShowOutput imgSrc={fileUrl} outText={outText} load={ocrLoad} />
+      </Flex>
+    </Flex>
+  );
+};
+
+export default ImageToText;

components/ShowOutput.tsx

@@ -0,0 +1,44 @@
+import { Flex, Image, Heading, Text, IconButton, Spinner } from "@chakra-ui/react";
+import React from "react";
+import { BiCopy } from "react-icons/bi";
+
+type ShowOutputProps = {
+  imgSrc: string;
+  outText: string;
+  load: boolean;
+};
+
+const ShowOutput = ({ imgSrc, outText, load }: ShowOutputProps) => {
+  return (
+    <>
+      {imgSrc ? (
+        <Flex gap={2} justifyContent={"center"} alignItems={"center"} direction={"column"}>
+          <Flex>
+            <Image w={"280px"} src={imgSrc} alt={"ImageCatched"} />
+          </Flex>
+          {load ? (
+            <Spinner thickness="4px" speed="0.65s" emptyColor="gray.200" color="blue.500" size="xl" />
+          ) : (
+            <>
+              <Flex justifyContent={"space-between"} w={"100%"}>
+                <Heading size={"lg"}>Text Output</Heading>
+                <Flex>
+                  <IconButton colorScheme={"blue"} icon={<BiCopy style={{ fontSize: "20px" }} />} aria-label={"hello"} />
+                </Flex>
+              </Flex>
+              <Flex w={"100%"} border={"4px double #BBBBBB"} borderRadius={10} p={3}>
+                <Text>{outText ? outText : "Select Image & Convert"}</Text>
+              </Flex>
+            </>
+          )}
+        </Flex>
+      ) : (
+        <Text as={"b"} fontSize={"lg"}>
+          Please Select an Image
+        </Text>
+      )}
+    </>
+  );
+};
+
+export default ShowOutput;