fix review

Author: vraja-nayaka

digit-recognition/frontend/src/features/digit-recognizer/DigitCanvas.tsx

@@ -43,7 +43,8 @@ export const DigitCanvas = ({
         ctx.imageSmoothingEnabled = true;
       }
     }
-  }, [canvasRef]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const startDrawing = (e: React.MouseEvent) => {
     const canvas = canvasRef.current;

digit-recognition/frontend/src/features/digit-recognizer/DigitRecognizer.tsx

@@ -1,6 +1,6 @@
 import { Button, Card } from "@/components";
 import { DigitCanvas } from "./DigitCanvas";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { findMaxIndex, getFlattenedPixelArray } from "./utils";
 import { useDigitRecognitionPredict } from "./api/useDigitRecognitionPredict";
 import { useReadRpcState } from "./api/readRpcState";
@@ -52,16 +52,21 @@ export const DigitRecognizer = () => {
       : findMaxIndex(rpcState.map(getFloatingPoint));
 
   const predictedDigit = isSubmited ? currentState : null;
-  console.log(
-    "current state:",
-    currentState,
-    rpcState?.map(getFloatingPoint),
-    rpcState
-  );
+
+  useEffect(() => {
+    console.log(
+      "current state:",
+      currentState,
+      rpcState?.map(getFloatingPoint),
+      rpcState
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const onSubmit = () => {
     setIsSubmiting(true);
     const flattenedPixelArray = getFlattenedPixelArray(canvasRef);
+    console.log("flattenedPixelArray:", flattenedPixelArray.join(", "));
     digitRecognitionPredict(flattenedPixelArray);
   };
 

digit-recognition/frontend/src/features/digit-recognizer/utils.ts

@@ -28,17 +28,19 @@ export const getFlattenedPixelArray = (
       continue;
     }
 
-    const getRandomDeviation = () => Math.round(Math.random() * 10 - 5);
     const isUseDeviation = Math.random() > 0.5;
     const middleBrightness = 250;
+    const deviationRange = 5;
+    const deviationSpread = deviationRange * 2;
+    const getRandomDeviation = () =>
+      Math.round(Math.random() * deviationSpread - deviationRange);
     const noisedBrightness = isUseDeviation
       ? middleBrightness + getRandomDeviation()
       : middleBrightness;
 
     grayscaleArray.push(Math.min(noisedBrightness, 255));
   }
 
-  console.log("grayscaleArray:", grayscaleArray.join(", "));
   return grayscaleArray; // Array of 784 elements
 };