From fa54fdf2bf9bf8523da393a81ec1ac1cd4fa0f4c Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Sun, 6 Oct 2024 15:11:20 -0400
Subject: comments

---
 src/client/views/nodes/ImageBox.tsx | 57 +++++++++++++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 2 deletions(-)

(limited to 'src/client/views/nodes/ImageBox.tsx')

diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 91e51d24e..32d1e471e 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -316,6 +316,14 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return cropping;
     };
 
+    /**
+     * Draw image to a canvas so it can be converted to base64 and be passed into
+     * GPT to be analyzed.
+     * @param downX
+     * @param downY
+     * @param cb
+     * @returns
+     */
     createCanvas = async (downX?: number, downY?: number, cb?: (filename: string, x: number | undefined, y: number | undefined) => void) => {
         const canvas = document.createElement('canvas');
         const scaling = 1 / (this._props.NativeDimScaling?.() || 1);
@@ -366,6 +374,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     };
 
+    /**
+     * Calls backend to find any text on an image. Gets the text and the
+     * coordinates of the text and creates label boxes at those locations.
+     * @param quiz
+     * @param i
+     */
     pushInfo = async (quiz: quizMode, i?: string) => {
         this._quizMode = quiz;
         this._loading = true;
@@ -437,6 +451,11 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         this._loading = false;
     };
 
+    /**
+     * Calls the createCanvas and pushInfo methods to convert the
+     * image to a form that can be passed to GPT and find the locations
+     * of the text.
+     */
     makeLabels = async () => {
         try {
             const hrefBase64 = await this.createCanvas();
@@ -446,6 +465,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         }
     };
 
+    /**
+     * Determines whether two words should be considered
+     * the same, allowing minor typos.
+     * @param str1
+     * @param str2
+     * @returns
+     */
     levenshteinDistance = (str1: string, str2: string) => {
         const len1 = str1.length;
         const len2 = str2.length;
@@ -471,6 +497,12 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return dp[len1][len2];
     };
 
+    /**
+     * Different algorithm for determining string similarity.
+     * @param str1
+     * @param str2
+     * @returns
+     */
     jaccardSimilarity = (str1: string, str2: string) => {
         const set1 = new Set(str1.split(' '));
         const set2 = new Set(str2.split(' '));
@@ -481,6 +513,14 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         return intersection.size / union.size;
     };
 
+    /**
+     * Averages the jaccardSimilarity and levenshteinDistance scores
+     * to determine string similarity for the labelboxes answers and
+     * the users response.
+     * @param str1
+     * @param str2
+     * @returns
+     */
     stringSimilarity(str1: string, str2: string) {
         const levenshteinDist = this.levenshteinDistance(str1, str2);
         const levenshteinScore = 1 - levenshteinDist / Math.max(str1.length, str2.length);
@@ -511,12 +551,23 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         );
     }
 
+    /**
+     * Returns whether two strings are similar
+     * @param input
+     * @param target
+     * @returns
+     */
     compareWords = (input: string, target: string) => {
         const distance = this.stringSimilarity(input.toLowerCase(), target.toLowerCase());
-        // const threshold = Math.max(input.length, target.length) * 0.2; // Allow up to 20% of the length as difference
         return distance >= 0.7;
     };
 
+    /**
+     * GPT returns a hex color for what color the label box should be based on
+     * the correctness of the users answer.
+     * @param inputString
+     * @returns
+     */
     extractHexAndSentences = (inputString: string) => {
         // Regular expression to match a hexadecimal number at the beginning followed by a period and sentences
         const regex = /^#([0-9A-Fa-f]+)\.\s*(.+)$/s;
@@ -569,13 +620,15 @@ export class ImageBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         });
     };
 
+    /**
+     * Get rid of all the label boxes on the images.
+     */
     exitQuizMode = () => {
         this._quizMode = quizMode.NONE;
         this._quizBoxes.forEach(doc => {
             this.removeDocument?.(doc);
         });
         this._quizBoxes = [];
-        console.log('remove');
     };
 
     @action
-- 
cgit v1.2.3-70-g09d2