docs(ui): add comments to startingframeimage

Author: psychedelicious

invokeai/frontend/web/src/features/settingsAccordions/components/VideoSettingsAccordion/StartingFrameImage.tsx

@@ -48,13 +48,23 @@ export const StartingFrameImage = () => {
     if (!originalImageDTO) {
       return;
     }
+
+    // We will create a new editor instance each time the user wants to edit
     const editor = new Editor();
+
+    // Initialize w/ the existing crop & ratio if there is one
     if (startingFrameImage?.crop) {
       editor.setCropBox(startingFrameImage.crop.box);
+      // Due to floating point precision, we need to record the ratio separately - cannot infer from w/hof box
+      // TODO(psyche): figure out how to not need to save ratio separately, maybe use some "close enough" logic?
       editor.setCropAspectRatio(startingFrameImage.crop.ratio);
     }
+
+    // When the user applies the crop, we will upload the cropped image and store the applied crop box so if the user
+    // re-opens the editor they see the same crop
     editor.onCropApply(async (box) => {
       if (objectEquals(box, startingFrameImage?.crop?.box)) {
+        // If the box hasn't changed, don't do anything
         return;
       }
       const blob = await editor.exportImage('blob');
@@ -76,6 +86,8 @@ export const StartingFrameImage = () => {
         )
       );
     });
+
+    // Load the image into the editor and open the modal once it's ready
     await editor.loadImage(originalImageDTO.image_url);
     openEditImageModal(editor);
   }, [dispatch, originalImageDTO, startingFrameImage?.crop, uploadImage]);