Feat/load numpy coordinates

index.html

@@ -47,6 +47,10 @@ <h2>How to use</h2>
                             <li>Click to draw polygon points. Press enter to finish the polygon.</li>
                         </ol>
                         <h2>Coordinates</h2>
+                        <p> Load existing Polygon coordinates</p>
+                        <textarea name="load-coordinates" id="load-coordinates"></textarea>
+                        <a href="" id="loadCoordinates" class="widgetButton">Load Polygon</a>
+
                         <p>Copy the points below, formatted as NumPy arrays, into your Python code.</p>
                         <a href="" id="copyPythonButton" class="widgetButton left">Copy Python to Clipboard</a>
                         <label for="normalize-checkbox">Show Normalized Points from 0-1</label>

script.js

@@ -712,4 +712,89 @@ window.addEventListener('keydown', function(e) {
     if (e.key === 'f' || e.key === 'F') {
         toggleFullscreen();
     }
-})
+})
+
+document.querySelector('#loadCoordinates').addEventListener('click',function(e) {
+    e.preventDefault();
+
+    if(!img || !img.complete || img.naturalWidth === 0){
+        alert("Please upload an image before loading points");
+    }
+
+    var inputVal = document.querySelector('#load-coordinates').value.trim();
+    if(!inputVal) return;
+
+    try{
+        // Sanitize input 
+        var sanitized = inputVal;
+        sanitized = sanitized.replace(/np\.array\(/g,'').replace(/\)/g,'');
+
+        if(sanitized.startsWith('{') && sanitized.endsWith('}')){
+            sanitized = '[' + sanitized.substring(1,sanitized.length-1)+']';
+        }
+        sanitized = sanitized.replace(/,\s*([\]}])/g,'$1');
+        var parsed = JSON.parse(sanitized);
+
+        // convert object based points into array pairs
+        const objectToArray=(arr) => {
+            if(Array.isArray(arr)){
+                if(arr.length >0 && typeof arr[0] === 'object' && arr[0] !== null && 'x' in arr[0]) {
+                    return arr.map(point => [point.x,point.y]);
+                }
+                return arr.map(objectToArray);
+            }
+            return arr;
+        };
+        parsed = objectToArray(parsed);
+
+        if(parsed.length > 0 && Array.isArray(parsed[0]) && !Array.isArray(parsed[0][0])){
+            parsed = [parsed];
+        }
+
+        if(!Array.isArray(parsed) || !Array.isArray(parsed[0]) ||!Array.isArray(parsed[0][0])){
+            throw new Error("Invalid coordinate structure. Needs to be a list of polygons or single polygon.");
+        }
+
+        //  Detect and convert normalized points (0-1) to absolute pixels
+        var isNormalized = true;
+        for (var i=0;i<parsed.length;i++){
+            for (var j=0;j<parsed[i].length;j++){
+                if(parsed[i][j][0] > 1 || parsed[i][j][1]>1){
+                    isNormalized = false;
+                    break;
+                }
+            }
+            if(!isNormalized) break;
+        }
+
+        if(isNormalized){
+            for(var i=0; i<parsed.length;i++){
+                for (var j=0;j<parsed[i].length;j++){
+                    parsed[i][j][0] = parsed[i][j][0] * img.naturalWidth;
+                    parsed[i][j][1] = parsed[i][j][1] * img.naturalHeight;
+                }
+            }
+        }
+
+        // Push points and color
+        for(var i = 0; i< parsed.length;i++){
+            masterPoints.push(parsed[i]);
+
+            masterColors.push(rgb_color);
+            rgb_color = color_choices[(masterColors.length) % color_choices.length];
+        } 
+
+        drawAllPolygons(offScreenCtx); // Redraw
+
+        blitCachedCanvas();
+
+        // Update output Python/JSON output boxes
+        writePoints(masterPoints);
+
+        document.querySelector('#load-coordinates').value='';
+    }
+    catch(err){
+        console.error(err);
+        alert("Failed to parse coordinates",err.message);
+    }
+});

styles.css

@@ -309,4 +309,29 @@ li {
 
 .mt-3 {
     margin-top: 24px;
+}
+
+#load-coordinates{
+    width: 100%;
+    height: 120px;
+    background-color: rgba(17,24,39,0.1);
+    border: 2px solid transparent;
+    border-radius: 4px;
+    padding:10px;
+    box-sizing: border-box;
+    font-family: monospace;
+    font-size: 14px;
+    resize: vertical;
+    margin-bottom: 12px;
+    color: #1f2937;
+    transition: outline 0.15s ease-in-out;
+}
+
+#load-coordinates:focus{
+    outline: 2px solid #7733f4;
+}
+
+#loadCoordinates{
+    display: table;
+    margin-bottom: 30px;
 }