From 6f121d8a8dea4d0fa4e556eae56c17b992261bfd Mon Sep 17 00:00:00 2001
From: jukezispilled2 <145381787+jukezispilled2@users.noreply.github.com>
Date: Thu, 12 Oct 2023 22:10:59 -0400
Subject: [PATCH 1/3] Update TrainModelZone.tsx

Image compression onDrop with browser-image-compression
---
 components/TrainModelZone.tsx | 60 +++++++++++++++++++++++++++--------
 1 file changed, 46 insertions(+), 14 deletions(-)

diff --git a/components/TrainModelZone.tsx b/components/TrainModelZone.tsx
index 58d0070..a1230b0 100644
--- a/components/TrainModelZone.tsx
+++ b/components/TrainModelZone.tsx
@@ -22,6 +22,7 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import { FaFemale, FaImages, FaMale, FaRainbow } from "react-icons/fa";
 import * as z from "zod";
 import { fileUploadFormSchema } from "@/types/zod";
+import imageCompression from 'browser-image-compression';
 
 type FormInput = z.infer<typeof fileUploadFormSchema>;
 
@@ -47,13 +48,17 @@ export default function TrainModelZone() {
 
   const onDrop = useCallback(
     async (acceptedFiles: File[]) => {
-      const newFiles: File[] =
-        acceptedFiles.filter(
-          (file: File) => !files.some((f) => f.name === file.name)
-        ) || [];
-
+      // Check for duplicate files and compress each file asynchronously
+      const uniqueCompressedFiles: File[] = [];
+      for (const file of acceptedFiles) {
+        const compressedFile = await compressImage(file);
+        if (!files.some((f) => f.name === file.name)) {
+          uniqueCompressedFiles.push(compressedFile);
+        }
+      }
+  
       // if user tries to upload more than 10 files, display a toast
-      if (newFiles.length + files.length > 10) {
+      if (uniqueCompressedFiles.length + files.length > 10) {
         toast({
           title: "Too many images",
           description:
@@ -62,9 +67,9 @@ export default function TrainModelZone() {
         });
         return;
       }
-
+  
       // display a toast if any duplicate files were found
-      if (newFiles.length !== acceptedFiles.length) {
+      if (uniqueCompressedFiles.length !== acceptedFiles.length) {
         toast({
           title: "Duplicate file names",
           description:
@@ -72,11 +77,11 @@ export default function TrainModelZone() {
           duration: 5000,
         });
       }
-
+  
       // check that in total images do not exceed a combined 4.5MB
       const totalSize = files.reduce((acc, file) => acc + file.size, 0);
-      const newSize = newFiles.reduce((acc, file) => acc + file.size, 0);
-
+      const newSize = uniqueCompressedFiles.reduce((acc, file) => acc + file.size, 0);
+  
       if (totalSize + newSize > 4.5 * 1024 * 1024) {
         toast({
           title: "Images exceed size limit",
@@ -86,9 +91,10 @@ export default function TrainModelZone() {
         });
         return;
       }
-
-      setFiles([...files, ...newFiles]);
-
+  
+      // Append the compressed files to the state
+      setFiles([...files, ...uniqueCompressedFiles]);
+  
       toast({
         title: "Images selected",
         description: "The images were successfully selected.",
@@ -105,6 +111,32 @@ export default function TrainModelZone() {
     [files]
   );
 
+    const compressImage = async (file: File) => {
+    try {
+      const maxSizeMB = 1;
+      const maxWidthOrHeight = 1920;
+  
+      const originalSizeMB = file.size / (1024 * 1024);
+  
+      const compressedFile = await imageCompression(file, {
+        maxSizeMB: maxSizeMB,
+        maxWidthOrHeight: maxWidthOrHeight,
+      });
+  
+      const compressedSizeMB = compressedFile.size / (1024 * 1024);
+      const reductionPercentage = ((originalSizeMB - compressedSizeMB) / originalSizeMB) * 100;
+  
+      console.log(
+        `Original size: ${originalSizeMB.toFixed(2)} MB, Compressed size: ${compressedSizeMB.toFixed(2)} MB, Reduction: ${reductionPercentage.toFixed(2)}%`
+      );
+  
+      return compressedFile;
+    } catch (error) {
+      console.error('Error compressing image:', error);
+      return file;
+    }
+  };
+
   const trainModel = useCallback(async () => {
     setIsLoading(true);
     const formData = new FormData();

From 9a429c6b430b5e513d2d41dc19b97d7da7434516 Mon Sep 17 00:00:00 2001
From: jukezispilled2 <145381787+jukezispilled2@users.noreply.github.com>
Date: Thu, 12 Oct 2023 22:13:17 -0400
Subject: [PATCH 2/3] Update TrainModelZone.tsx

---
 components/TrainModelZone.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/TrainModelZone.tsx b/components/TrainModelZone.tsx
index a1230b0..8359244 100644
--- a/components/TrainModelZone.tsx
+++ b/components/TrainModelZone.tsx
@@ -111,7 +111,7 @@ export default function TrainModelZone() {
     [files]
   );
 
-    const compressImage = async (file: File) => {
+  const compressImage = async (file: File) => {
     try {
       const maxSizeMB = 1;
       const maxWidthOrHeight = 1920;

From ee354d01f18dd4e4c1fa12ed12a5f4006a3c9e3b Mon Sep 17 00:00:00 2001
From: jukezispilled2 <145381787+jukezispilled2@users.noreply.github.com>
Date: Thu, 12 Oct 2023 22:20:32 -0400
Subject: [PATCH 3/3] Update package.json

---
 package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/package.json b/package.json
index 2c0b3ff..6b73537 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@types/formidable": "^3.4.2",
     "@types/node-fetch": "^2.6.4",
     "autoprefixer": "10.4.14",
+    "browser-image-compression": "^2.0.2",
     "busboy": "^1.6.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",