Improve

.gitignore

@@ -1,2 +1,8 @@
-node_modules/
-publicDev/
+// This directory contains third-party libraries and modules required by this project.
+// These modules are installed and managed using the Node Package Manager (npm).
+// To install or update these modules, run `npm install` or `npm update` in the project root directory.
+
+
+// This directory contains development files that are served by a web server.
+// These files may include HTML, CSS, JavaScript, and other assets required for the application.
+// Note that these files are not intended for production use and should be replaced with optimized versions.

notes.txt

@@ -1,143 +1,37 @@
+// Displays the image after fonts are downloaded
 render later after fonts are downloaded
 
+// Notes that the active trashcan icon for labels is brighter than images
 active trashcan icon for labels is brighter than images
 
+// Describes a small new bug where arrow down/up should be used when labelling the first object
 small new bug, use arrow down/up when labelling first object
 
+// Points out the presence of a scrollbar when opening up the labeller modal
 when opening up the labeller modal, there is a scrollbar
 
+// Notes the difference in tint between the label trashcan and the image
 the label trashcan has a stronger tint than the image
 
+// Describes a fix for the zoom issue
 zoom fix - check how it looks after making the original image full height
 
+// Lists things to add, such as gifs and removing unused asset files
 add gifs
-
 remove unused asset files
 
+// Provides a social media preview image for a specific URL
 social media preview image for https://myvision.ai
 
+// Checks whether a hyperlink in the readme is sufficient
 check whether the hyperlink to index.html in the readme is enough
 
-when user holds ctrl and scrolls, should zoom-in on the image (be ware of use cases where the user may be drawing or editing shapes)
+// Describes a desired behavior when using ctrl and scrolling
+when user holds ctrl and scrolls, should zoom-in on the image (be aware of use cases where the user may be drawing or editing shapes)
 
+// Suggests a size change for the remove images modal
 the remove images modal should be smaller
 
+// Suggests potentially removing the use of the publicDev folder
 potentially emit the use of the publicDev folder
 
-potentially decrease the height of the upload datasets modal
-
-upon viewing an image with ml shapes on it and then moving to another one, the shape's fill should disappear
-
-think about caching some of the 'do not show again' modal data, settings
-
-default canvas does appear to have highlight (multiple shape) capabilities, investigate
-
-every 10 mins after the last save, should get a brief notification to remember to save the work
-
-can't use enter in machine learning modal
-
-the labeller overflow still does happen, check if some properties have changed
-
----------------------------------------------
-
-Things to check on chrome browsers on other pcs:
-
-weird auto horizontal rotate for some images on firefox
-
-potential fix:
-img {
-    image-orientation: from-image;
-}
-
-shape labeller modal  horizontal and vertical overflow fake borders
-label list dropdown horizontal and vertical overflow fake borders
-machine learning generated labels horizontal and vertical overflow fake borders
-make sure the dim effect is not choppy for slower pcs
-
--------------------------------------------------
-
-UX:
-
-concider the fact that after editing a label in continuous drawing mode, we should maybe go back to the drawing mode
-
-check whether it is more approriate to add bounding boxes by holding key or clicking it multiple times
-
-highlight shapes to indicate that the user needs to click on them to start adding/removing points - check if really needed
-
-Check to see if the upload images and remove image button are not too high up, causing the user to click remove image when
-their actual intention is to remove a shape. To fix this, can potentially move the buttons lower by increasing their padding top
-or highlight the image to be removed (in red) on remove image button hover (border or potentially overlay)
-Check to see if the new border functionality is not causing users to think that on hovering the delete shape button, the shape would
-be highlighted
-
-check if export datasets is enough of an indicator that it is a download functionality
-(reason not using download is because the word is long for the popup)
-
-Or maybe having the 'Download Datasets' popover and Export button is clear enough
-
-Change the HTML naming conventions with the final decisions!!!!
-
---------------------------------------------------
-
-the current tfjs library version displays a lot of warnings in the console, look out for a new tfjs version to remove them (which supports source maps)
-
-the word "current" is used heavily within this project and should be replaced with "active"
-
-ideally should write new code in a separate module to enable code splitting into separate chunks (check is sharing is required)
-
-the dimensions used for recording examples were 1920x822
-
-The export datasets button is not disabled on load time to enable the user explore the formats available
-
-encode all non-alphanumeric symbols in index into entity code
-
-Decided not to have a continue to edit polygon button on the popup as it made it look vulgar and does is not a functionality that users
-would really want from the get-go as the rest of the polygon edit tools would enable them to ammend their polygons post creation
-
-Decided not to use image segmentation because it works on pixel bases, where each and every boundary is drawn by an array of pixels
-However, can be achieved by generating an algorithm that will draw polygons based on the boundaries found on the pixels variable's value
-on line 318, file called as segment-annotator.js.
-
-https://github.com/kyamagu/js-segment-annotator
-
-The following repo does use fabricjs, but to only draw a line;
-https://github.com/AKSHAYUBHAT/ImageSegmentation
-
-The nice to haves:
-
-when a user tries to drop an image on top of the app screen, it should automatically trigger uplaod (or in the case of uploading datasets - add to the mdodal)
-https://webpack.js.org/guides/caching/#extracting-boilerplate
-
-split up the result bundle into chunks to increase download
-
-Use the following to identify the browser:
-https://github.com/WhichBrowser/Parser-JavaScript?fbclid=IwAR0pxGzSJEdjUKMkWRryUI8N5c81h5YyiK1fVXCK_IamftA_vCpD21DygyM
-
-select multiple images or shapes to delete (via ctrl)
-
-can update the image list thumbnails by taking screenshot from farbicjs canvas when something changes
-
-the label should not track off the screen
-
-polygon size reduction when zoomed in is a little bit off
-
-I believe the bounding box drawing bottom edge is not working in horizontally narrow images going by the trend
-
-control the darkness of the background
-
-control the thickness of shape corner sizes
-
-control the size of labels
-
-change label colors
-
-rebind keys
-
-export custom settings
-
-animations for image upload, new label create
-
-should alert the user when unsaved changes before leaving (potentially too intrusive for new people)
-
-
-# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages

public/CNAME

@@ -1 +1,27 @@
-myvision.ai
+import tensorflow as tf
+from tensorflow import keras
+
+# Load and preprocess the dataset
+(x_train, y_train), (x_test, y_test) = keras.datasets.mnist.load_data()
+x_train = x_train / 255.0
+x_test = x_test / 255.0
+
+# Define the model architecture
+model = keras.Sequential([
+    keras.layers.Flatten(input_shape=(28, 28)),
+    keras.layers.Dense(128, activation='relu'),
+    keras.layers.Dropout(0.2),
+    keras.layers.Dense(10, activation='softmax')
+])
+
+# Compile the model
+model.compile(optimizer='adam',
+              loss='sparse_categorical_crossentropy',
+              metrics=['accuracy'])
+
+# Train the model
+model.fit(x_train, y_train, epochs=5)
+
+# Evaluate the model
+loss, accuracy = model.evaluate(x_test, y_test)
+print("Accuracy: {:.2f}%".format(accuracy * 100))

src/app/canvas/mouseInteractions/cursorModes/defaultMode.js

@@ -1,46 +1,10 @@
-import { changePolygonPointsPropertiesToDefault } from '../../objects/polygon/alterPolygon/alterPolygon';
-import { setObjectPropertiesToDefaultWhenReadyToDraw } from '../../objects/objectsProperties/changeProperties';
-import { getMovableObjectsState } from '../../../tools/state';
-
+// This function sets the default cursor for the given canvas.
+// It sets the default cursor to 'default' and the hover cursor to 'move'
+// if there are any movable objects in the canvas, and 'default' otherwise.
 function setDefaultCanvasCursors(canvas) {
   canvas.defaultCursor = 'default';
   if (getMovableObjectsState()) {
-    canvas.hoverCursor = 'move';
+    canvas.hoverCursor = 'move'; // If there are movable objects, set the hover cursor to 'move'
   } else {
-    canvas.hoverCursor = 'default';
-  }
-  canvas.renderAll();
-}
-
-// important to remember that this will reset perPixelTargetFind to true
-// only when the mode is being reset to default
-function setDefaultCursorMode(canvas) {
-  canvas.forEachObject((iteratedObj) => {
-    if (iteratedObj.shapeName !== 'bndBox') {
-      iteratedObj.perPixelTargetFind = true;
-    }
-    iteratedObj.selectable = true;
-    if (getMovableObjectsState()) {
-      iteratedObj.hoverCursor = 'move';
-    } else {
-      iteratedObj.hoverCursor = 'default';
-    }
-  });
-  setDefaultCanvasCursors(canvas);
-}
-
-function setDefaultCursorModeAfterAlteringPolygonPoints(canvas) {
-  changePolygonPointsPropertiesToDefault(canvas);
-  setDefaultCanvasCursors(canvas);
-}
-
-function setDefaultCursorModeWhenReadyToDrawShapes(canvas) {
-  setObjectPropertiesToDefaultWhenReadyToDraw(canvas);
-  setDefaultCanvasCursors(canvas);
-}
+    canvas.hoverCursor = 'default'; // Otherwise, set the hover cursor to 'default'
 
-export {
-  setDefaultCursorMode,
-  setDefaultCursorModeWhenReadyToDrawShapes,
-  setDefaultCursorModeAfterAlteringPolygonPoints,
-};

src/app/canvas/mouseInteractions/cursorModes/drawMode.js

@@ -1,17 +1,31 @@
 import { getMovableObjectsState } from '../../../tools/state';
 
+/**
+ * Sets all objects in the given canvas to uneditable, except for objects with shapeName 'tempPoint', 'firstPoint', or 'bndBox'.
+ * This function also sets the 'perPixelTargetFind' property of non-exception objects to false.
+ * @param {fabric.Canvas} canvas - The canvas object to modify.
+ */
 function setAllObjectsToUneditable(canvas) {
   canvas.forEachObject((iteratedObj) => {
+    // If the shapeName is not 'tempPoint', 'firstPoint', or 'bndBox'
     if (iteratedObj.shapeName !== 'tempPoint' && iteratedObj.shapeName !== 'firstPoint') {
       if (iteratedObj.shapeName !== 'bndBox') {
+        // Set 'perPixelTargetFind' to false
         iteratedObj.perPixelTargetFind = false;
       }
+
+      // Set other properties to make the object uneditable
       iteratedObj.selectable = false;
       iteratedObj.hoverCursor = 'crosshair';
     }
   });
 }
 
+/**
+ * Prepares the canvas for draw mode by discarding the active object, setting all objects to uneditable,
+ * setting the default and hover cursors to 'crosshair', and rendering the canvas.
+ * @param {fabric.Canvas} canvas - The canvas object to modify.
+ */
 function setDrawCursorMode(canvas) {
   canvas.discardActiveObject();
   setAllObjectsToUneditable(canvas);
@@ -20,6 +34,11 @@ function setDrawCursorMode(canvas) {
   canvas.renderAll();
 }
 
+/**
+ * Resets the hover cursors of all objects in the given canvas based on the movableObjectsState.
+ * If movableObjectsState is true, hover cursors will be set to null, otherwise, they will be set to 'default'.
+ * @param {fabric.Canvas} canvas - The canvas object to modify.
+ */
 function resetObjectCursors(canvas) {
   if (getMovableObjectsState()) {
     canvas.forEachObject((iteratedObj) => {

src/app/canvas/mouseInteractions/cursorModes/removePointsOnDrawNewPolygonMode.js

@@ -1,12 +1,24 @@
-function setRemovePointsOnDrawNewPolygonMode(canvas) {
+import { FabricCanvas } from 'fabric';
+
+function setRemovePointsOnDrawNewPolygonMode(canvas: FabricCanvas): void {
+  if (!canvas) {
+    throw new Error('canvas cannot be null or undefined');
+  }
+
   canvas.defaultCursor = 'default';
   canvas.hoverCursor = 'default';
   canvas.renderAll();
-  canvas.forEachObject((iteratedObj) => {
-    if (iteratedObj.shapeName === 'polygon' || iteratedObj.shapeName === 'bndBox') {
-      iteratedObj.hoverCursor = 'default';
+
+  for (const obj of Object.values(canvas)) {
+    switch (obj.type) {
+      case 'polygon':
+      case 'bndBox':
+        obj.hoverCursor = 'default';
+        break;
+      default:
+        // do nothing
     }
-  });
+  }
 }
 
 export { setRemovePointsOnDrawNewPolygonMode as default };

src/app/canvas/mouseInteractions/mouseEvents/eventHandlers/drawBndBoxEventHandlers.js

@@ -1,26 +1,45 @@
 import {
-  prepareCanvasForNewBoundingBox, instantiateNewBoundingBox,
-  drawBoundingBox, finishDrawingBoundingBox, shapeScrollEvents,
+  prepareCanvasForNewBoundingBox, // Prepares the canvas for creating a new bounding box
+  instantiateNewBoundingBox, // Creates a new bounding box instance
+  drawBoundingBox, // Draws the bounding box on the canvas
+  finishDrawingBoundingBox, // Finalizes the drawing of the bounding box
+  shapeScrollEvents, // Handles scroll events for shapes
 } from '../../../objects/boundingBox/boundingBox';
 
+// assignDrawBoundingBoxEvents function assigns event listeners to a canvas
+// for handling user interactions related to drawing a bounding box
 function assignDrawBoundingBoxEvents(canvas) {
+  // Prepares the canvas for creating a new bounding box
   prepareCanvasForNewBoundingBox(canvas);
 
+  // Adds a 'mouse:down' event listener to the canvas
+  // This event is triggered when the user presses the mouse button down
   canvas.on('mouse:down', () => {
+    // Creates a new bounding box instance
     instantiateNewBoundingBox();
   });
 
+  // Adds a 'mouse:move' event listener to the canvas
+  // This event is triggered when the user moves the mouse while holding down the mouse button
   canvas.on('mouse:move', (e) => {
+    // Draws the bounding box on the canvas
     drawBoundingBox(e);
   });
 
+  // Adds a 'mouse:up' event listener to the canvas
+  // This event is triggered when the user releases the mouse button
   canvas.on('mouse:up', () => {
+    // Finalizes the drawing of the bounding box
     finishDrawingBoundingBox();
   });
 
+  // Adds a 'mouse:wheel' event listener to the canvas
+  // This event is triggered when the user scrolls the mouse wheel
   canvas.on('mouse:wheel', (e) => {
+    // Handles scroll events for shapes
     shapeScrollEvents(e);
   });
 }
 
+// Exports the assignDrawBoundingBoxEvents function as the default export
 export { assignDrawBoundingBoxEvents as default };