pdf get

frontend/package-lock.json

@@ -5295,6 +5295,11 @@
         }
       }
     },
+    "dommatrix": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/dommatrix/-/dommatrix-1.0.3.tgz",
+      "integrity": "sha512-l32Xp/TLgWb8ReqbVJAFIvXmY7go4nTxxlWiAFyhoQw9RKEOHBZNnyGvJWqDVSPmq3Y9HlM4npqF/T6VMOXhww=="
+    },
     "domutils": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz",
@@ -8822,6 +8827,11 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "make-cancellable-promise": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/make-cancellable-promise/-/make-cancellable-promise-1.1.0.tgz",
+      "integrity": "sha512-X5Opjm2xcZsOLuJ+Bnhb4t5yfu4ehlA3OKEYLtqUchgVzL/QaqW373ZUVxVHKwvJ38cmYuR4rAHD2yUvAIkTPA=="
+    },
     "make-dir": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
@@ -8837,6 +8847,11 @@
         }
       }
     },
+    "make-event-props": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/make-event-props/-/make-event-props-1.3.0.tgz",
+      "integrity": "sha512-oWiDZMcVB1/A487251hEWza1xzgCzl6MXxe9aF24l5Bt9N9UEbqTqKumEfuuLhmlhRZYnc+suVvW4vUs8bwO7Q=="
+    },
     "makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -8888,6 +8903,11 @@
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
       "integrity": "sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E="
     },
+    "merge-refs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/merge-refs/-/merge-refs-1.0.0.tgz",
+      "integrity": "sha512-WZ4S5wqD9FCR9hxkLgvcHJCBxzXzy3VVE6p8W2OzxRzB+hLRlcadGE2bW9xp2KSzk10rvp4y+pwwKO6JQVguMg=="
+    },
     "merge-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
@@ -9522,6 +9542,15 @@
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
     },
+    "pdfjs-dist": {
+      "version": "2.16.105",
+      "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-2.16.105.tgz",
+      "integrity": "sha512-J4dn41spsAwUxCpEoVf6GVoz908IAA3mYiLmNxg8J9kfRXc2jxpbUepcP0ocp0alVNLFthTAM8DZ1RaHh8sU0A==",
+      "requires": {
+        "dommatrix": "^1.0.3",
+        "web-streams-polyfill": "^3.2.1"
+      }
+    },
     "performance-now": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
@@ -11163,6 +11192,22 @@
       "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
       "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
     },
+    "react-pdf": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-6.0.3.tgz",
+      "integrity": "sha512-unswUWXzuGcPtIFaVCcyDOqukPpjeDQ5Gaxo+/pFPDbOIEGUYAP1t4unUnNY1aNyiTk6utbLE4lwEE7Z5Bn6ZA==",
+      "requires": {
+        "@babel/runtime": "^7.0.0",
+        "clsx": "^1.2.1",
+        "make-cancellable-promise": "^1.0.0",
+        "make-event-props": "^1.1.0",
+        "merge-refs": "^1.0.0",
+        "pdfjs-dist": "2.16.105",
+        "prop-types": "^15.6.2",
+        "tiny-invariant": "^1.0.0",
+        "tiny-warning": "^1.0.0"
+      }
+    },
     "react-redux": {
       "version": "7.2.8",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.8.tgz",
@@ -13169,6 +13214,11 @@
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "web-streams-polyfill": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/web-streams-polyfill/-/web-streams-polyfill-3.2.1.tgz",
+      "integrity": "sha512-e0MO3wdXWKrLbL0DgGnUV7WHVuw9OUvL4hjgnPkIeEvESk74gAITi5G606JtZPp39cd8HA9VQzCIvA49LpPN5Q=="
+    },
     "web-vitals": {
       "version": "2.1.4",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-2.1.4.tgz",

frontend/package.json

@@ -6,6 +6,7 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@mui/icons-material": "^5.10.14",
+    "@mui/lab": "^5.0.0-alpha.50",
     "@mui/material": "^5.10.14",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
@@ -19,6 +20,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^14.2.2",
     "react-icons": "^4.3.1",
+    "react-pdf": "^6.0.3",
     "react-redux": "^7.1.3",
     "react-router-dom": "^5.3.0",
     "react-scripts": "5.0.0",
@@ -29,8 +31,7 @@
     "redux-promise": "^0.6.0",
     "redux-thunk": "^2.3.0",
     "uuid": "^3.3.2",
-    "web-vitals": "^2.1.4",
-    "@mui/lab": "^5.0.0-alpha.50"
+    "web-vitals": "^2.1.4"
   },
   "scripts": {
     "start": "react-scripts start",

frontend/src/classNotes/classNotes.js

@@ -3,38 +3,112 @@ import './style/classNotes.css';
 import DropZone from './DropZone';
 import LoadingButton from '@mui/lab/LoadingButton'
 import Grid from "@mui/material/Grid"
+import axios from 'axios'
 
 const ClassNotes = () => {
     const [file, setFile] = useState([])
-    const [isFilePicked,setIsFilePicked] = useState(false)
+    const [isProcess, setIsProcess] = useState(false)
+    const [isFilePicked, setIsFilePicked] = useState(false)
+    const [pdfData, setPdfData] = useState("")
+    const [pdfDownloadStatus,setPdfDownloadStatus] = useState(false)
 
     const fileSelectedHandler = (file) => {
         // console.log('diff data', diffWordsData);
         setFile(file);
         setIsFilePicked(true)
+        setPdfDownloadStatus(false)
         // dispatch({ type: SET_FILE_PICKED, file });
     };
+
+    const fileUploadHandler = async () => {
+        setIsProcess(true);
+        const fd = new FormData();
+        fd.append('video', file[0], file[0].name);
+        try {
+            const videoUploadResponse = await axios.post('http://127.0.0.1:1100/short_note', fd, {
+                onUploadProgress: (ProgressEvent) => {
+                    console.log('Upload Progress: ', Math.round((ProgressEvent.loaded / ProgressEvent.total) * 100), '%');
+                },
+                responseType: 'blob'
+            });
+
+            //Create a Blob from the PDF Stream
+            const responseFile = new Blob(
+                [videoUploadResponse.data],
+                { type: 'application/pdf' })
+
+
+            //Build a URL from the file
+            const fileURL = URL.createObjectURL(responseFile);
+            setPdfDownloadStatus(true)
+            window.open(fileURL);
+            setIsProcess(false);
+            setPdfData(videoUploadResponse.data)
+
+
+            // axios(`${apiURL}/pdf`, {
+            //     method: 'GET',
+            //     responseType: 'blob' //Force to receive data in a Blob Format
+            // })
+            // .then(response => {
+            // //Create a Blob from the PDF Stream
+            //     const file = new Blob(
+            //       [response.data], 
+            //       {type: 'application/pdf'});
+            // //Build a URL from the file
+            //     const fileURL = URL.createObjectURL(file);
+            // //Open the URL on new Window
+            //     window.open(fileURL);
+            // })
+            // .catch(error => {
+            //     console.log(error);
+            // });
+
+
+
+            console.log(pdfData.length > 0)
+
+
+
+        } catch (error) {
+            // setIsProcess(false);
+        }
+    };
+
     return (
         <div className="background-material">
-            <Grid container direction="column" alignItems="center" spacing={2} style={{marginTop:"1rem"}}>
+            <Grid container direction="column" alignItems="center" spacing={2} style={{ marginTop: "1rem" }}>
                 <Grid item xs={2}>
 
-                    <DropZone fileSelectedHandler={fileSelectedHandler} isFilePicked={isFilePicked} file={file}/>
+                    <DropZone fileSelectedHandler={fileSelectedHandler} isFilePicked={isFilePicked} file={file} />
                 </Grid>
                 <Grid item >
-                    <LoadingButton
-
+                    {!pdfDownloadStatus ? <LoadingButton
+                        // sx={{textTransform:'none'}}
                         size="large"
-                        color="primary"
-                        // onClick={() => fileUploadHandler()}
+                        // color="primary"
+                        onClick={() => fileUploadHandler()}
                         // onClick={handleClick}
-                        // loading={isProcess}
-                        loadingPosition="start"
+                        // loading={true}
+                        // loadingPosition="start"
+                        color="primary"
                         variant="contained"
-                        fullWidth
                     >
                         Process Video
-                    </LoadingButton>
+                    </LoadingButton> :
+                        <LoadingButton
+                            // sx={{textTransform:'none'}}
+                            size="large"
+                            // color="primary"
+                            onClick={() => fileUploadHandler()}
+                            // onClick={handleClick}
+                            // loading={true}
+                            // loadingPosition="start"
+                            color="secondary"
+                            variant="contained"
+                        >
+                            Download PDF
+                        </LoadingButton>}
 
                 </Grid>
             </Grid>