ad button

Author: ThorPham

package-lock.json

@@ -4,6 +4,7 @@
   "homepage": "https://thorpham.github.io/simple-ocr-website",
   "private": true,
   "dependencies": {
+    "@dropzone-ui/react": "^6.7.1",
     "@floating-ui/react-dom": "^0.6.1",
     "@floating-ui/react-dom-interactions": "^0.0.15",
     "@rpldy/upload-button": "^0.18.1",
@@ -13,6 +14,7 @@
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
     "@tippyjs/react": "^4.2.6",
+    "axios": "^0.24.0",
     "buffer": "^6.0.3",
     "gh-pages": "^3.2.3",
     "point-in-polygon": "^1.1.0",

package.json

@@ -25,4 +25,11 @@ body{
 }
 .active{
   display : inline-block !important;
+}
+.dz-ui-header{
+  font-size :1.2rem !important;
+  margin-top : 5px !important;
+}
+.dz-ui-header span svg{
+  fill : rgba(32, 191, 107,1.0) !important;
 }

src/App.css

@@ -10,6 +10,7 @@ import "tippy.js/dist/tippy.css"; //
 import Upload from "./Upload";
 import Loading from "./Loading";
 import { v4 as uuid } from "uuid";
+import LoadImg from "./LoadImg"
 export default function Card() {
   // const [drawCanvas,setDrawCanvas] = useState(false)
 
@@ -29,7 +30,6 @@ export default function Card() {
   const hide = () => setVisible(false);
   const [demo, setDemo] = useState(dataDemo[0]);
   const dataCanvas= convert2Polygon(demo["data"])
- 
 
 
   useEffect(() => {
@@ -38,7 +38,6 @@ export default function Card() {
   },[demo]);
 
   const getCanvas = async () => {
-    console.log("run again")
     const { metaData, polygonPoints } = dataCanvas
     const { width, height } = metaData;  
     canvas.current.width = width;
@@ -111,6 +110,7 @@ export default function Card() {
   };
   return (
     <div className="card-container">
+    
       {loading && <Loading />}
       <div style={{ margin: "2rem auto" }}>
         <p>Basic model that can recognize Vietnamese and English.</p>
@@ -119,7 +119,8 @@ export default function Card() {
           complexity, and has excellent printing recognition.
         </p>
       </div>
-      <div className="card-ocr">
+      <LoadImg setDemo={setDemo} setImgCanvas={setImgCanvas}/>
+      <div className="card-ocr" style={{marginTop:"1rem"}}>
         <div className="card-ocr-left" style={{ position: "relative" }}>
           <canvas
             id="canvas"
@@ -223,7 +224,7 @@ export default function Card() {
                 height: "100%",
                 border: "1px solid #ddd",
                 display: "flex",
-                justifyContent: "center",
+                // justifyContent: "center",
                 alignContent: "center",
                 backgroundColor: "#2ed573",
               }}
@@ -248,14 +249,14 @@ export default function Card() {
                 ></i>
               </Tippy>
             </div>
-            <div style={{ width: "20%", textAlign: "center", height: "100%" }}>
+            {/* <div style={{ width: "20%", textAlign: "center", height: "100%" }}>
               <Upload
                 loading={loading}
                 setLoading={setLoading}
                 setDemo={setDemo}
                 setImgCanvas={setImgCanvas}
               />
-            </div>
+            </div> */}
           </div>
         </div>
       </div>

src/Card.js

@@ -0,0 +1,90 @@
+import * as React from "react";
+import ReactDOM from "react-dom";
+import { useState } from "react";
+import {
+  Dropzone,
+  FileItem,
+  FullScreenPreview,
+  InputButton,
+} from "@dropzone-ui/react";
+
+export default function LoadImg({ setDemo, setImgCanvas }) {
+  const [files, setFiles] = useState([]);
+  console.log(JSON.stringify(files)[0].file);
+  const [imageSrc, setImageSrc] = useState(undefined);
+
+  const handleImageSee = (src) => {
+    setImageSrc(src);
+    // setImgCanvas(src)
+  };
+  const updateFiles = (incommingFiles) => {
+    console.log("incomming files", incommingFiles);
+    setFiles(incommingFiles);
+  };
+  const onDelete = (id) => {
+    setFiles(files.filter((x) => x.id !== id));
+  };
+  const handleSee = (imageSource) => {
+    setImageSrc(imageSource);
+  };
+  const handleClean = (files) => {
+    console.log("list cleaned", files);
+  };
+
+  const handleUpload = (responses) => {
+    //check the responses here
+    console.log(responses);
+
+    setDemo({ data: responses[0].serverResponse.payload });
+  };
+  const handleStartUpload = (item) => {
+    console.log("start upload", item);
+    let dataUrl = URL.createObjectURL(item[0].file);
+    setImgCanvas(dataUrl);
+  };
+  return (
+    <Dropzone
+      // clickable ={false}
+      color={"rgba(38, 222, 129,1.0)"}
+      behaviour={"replace"}
+      onChange={updateFiles}
+      value={files}
+      accept={".png,image/*"}
+      maxFileSize={2998000}
+      onUploadStart={handleStartUpload}
+      maxFiles={1}
+      url={"http://127.0.0.1:8000/ocr"}
+      config={{
+        headers: {
+          "Access-Control-Allow-Origin": "*",
+          "Access-Control-Allow-Headers": "X-Requested-With",
+          "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS",
+        },
+      }}
+      onUploadFinish={handleUpload}
+      disabled={true}
+      label={"Upload or Drop your files here"}
+      
+    >
+      {files.map((file) => (
+        <FileItem
+          {...file}
+          onSee={(src) => {
+            handleImageSee(src);
+          }}
+          hd={true}
+          preview
+          id={file.id}
+          info={true}
+          resultOnTooltip
+          onDelete={onDelete}
+        />
+      ))}
+      <FullScreenPreview
+        imgSource={imageSrc}
+        openImage={imageSrc}
+        onClose={(e) => handleSee(undefined)}
+      />
+    </Dropzone>
+  );
+}