Github Actions

.github/workflows/github.yml

@@ -0,0 +1,41 @@
+name: Github Pages Deploy
+
+on:
+  push:
+    branches: ["main"]
+  # Allos us to run worflow from UI
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Setup Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "16"
+      - name: Install Dependencies
+        run: npm ci
+      - name: Build Project
+        run: npm run build
+      - name: Upload Artifact
+        uses: actions/upload-pages-artifact@v1
+        with:
+          path: ./out
+  deploy:
+    runs-on: ubuntu-latest
+    needs: build
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to Github pages
+        id: deployment
+        uses: actions/deploy-pages@v1

.github/workflows/vercel.yml

@@ -0,0 +1,21 @@
+name: Vercel Production Deployment
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.vercel

components/ImageToText.tsx

@@ -7,7 +7,6 @@ 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({
@@ -17,9 +16,6 @@ const ImageToText = () => {
     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);
@@ -28,7 +24,6 @@ const ImageToText = () => {
   };
 
   const handleChange = async (e: React.FormEvent) => {
-    setLoading(true);
     try {
       if (inputRef != null) {
         const myUrl = inputRef!.current!.files[0];
@@ -39,8 +34,6 @@ const ImageToText = () => {
           body: formData,
         });
         let data = await res.json();
-        console.log(data);
-        setLoading(false);
         setFileUrl(data.data.display_url);
       }
     } catch (error) {
@@ -74,7 +67,7 @@ const ImageToText = () => {
           <Button colorScheme={"blue"} onClick={() => inputRef?.current?.click()}>
             Select Image
           </Button>
-          <Button disabled={loading} colorScheme={"green"} onClick={handleConvert}>
+          <Button isDisabled={fileUrl ? false : true} colorScheme={"green"} onClick={handleConvert}>
             Convert
           </Button>
         </Flex>

components/ShowOutput.tsx

@@ -1,6 +1,7 @@
-import { Flex, Image, Heading, Text, IconButton, Spinner } from "@chakra-ui/react";
+import { Flex, Image, Heading, Text, IconButton, Spinner, useToast, Box } from "@chakra-ui/react";
 import React from "react";
 import { BiCopy } from "react-icons/bi";
+import copy from "copy-to-clipboard";
 
 type ShowOutputProps = {
   imgSrc: string;
@@ -9,6 +10,18 @@ type ShowOutputProps = {
 };
 
 const ShowOutput = ({ imgSrc, outText, load }: ShowOutputProps) => {
+  const toast = useToast();
+  const handleCopy = () => {
+    copy(outText);
+    toast({
+      position: "top",
+      render: () => (
+        <Box color="white" p={3} bg="green.500">
+          Copied!
+        </Box>
+      ),
+    });
+  };
   return (
     <>
       {imgSrc ? (
@@ -23,7 +36,7 @@ const ShowOutput = ({ imgSrc, outText, load }: ShowOutputProps) => {
               <Flex justifyContent={"space-between"} w={"100%"}>
                 <Heading size={"lg"}>Text Output</Heading>
                 <Flex>
-                  <IconButton colorScheme={"blue"} icon={<BiCopy style={{ fontSize: "20px" }} />} aria-label={"hello"} />
+                  <IconButton isDisabled={outText ? false : true} onClick={handleCopy} colorScheme={"blue"} icon={<BiCopy style={{ fontSize: "20px" }} />} aria-label={"hello"} />
                 </Flex>
               </Flex>
               <Flex w={"100%"} border={"4px double #BBBBBB"} borderRadius={10} p={3}>