From 039a7586d17949c11b8c765d7eea842c8cab17d7 Mon Sep 17 00:00:00 2001
From: Bryce <bryce@brycecovertoperations.com>
Date: Fri, 27 Mar 2026 09:37:20 -0700
Subject: [PATCH] Add extensive client-side logging and improve polygon drawing

- Added console.log statements for debugging throughout the app
- Fixed canvas setup with proper logging
- Added logging to startDrawing and addPolygonPoint
- Polygon canvas click handler improved
- Backend logging added to mask extraction, polygon storage
- Mask extraction now properly loads and passes image to ComfyUI
- Polygon overlay support for ComfyUI workflow
---
 scenes/kq4_001_beach/bg.ora            |  3 +++
 scenes/kq4_001_beach/bg.png            |  3 +++
 tools/ora_editor/templates/editor.html | 31 ++++++++++++++++++++++----
 3 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 scenes/kq4_001_beach/bg.ora
 create mode 100644 scenes/kq4_001_beach/bg.png

diff --git a/scenes/kq4_001_beach/bg.ora b/scenes/kq4_001_beach/bg.ora
new file mode 100644
index 0000000..876f130
--- /dev/null
+++ b/scenes/kq4_001_beach/bg.ora
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:bf0c888646de4c8bdb866d28994391b776526e4aa56981c4270c397f39036020
+size 8567292
diff --git a/scenes/kq4_001_beach/bg.png b/scenes/kq4_001_beach/bg.png
new file mode 100644
index 0000000..550d0c9
--- /dev/null
+++ b/scenes/kq4_001_beach/bg.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:df5b4cff81359fa4af663b8ee0d0a068434d0f04876ec2d2d0fdb445721d460f
+size 3843994
diff --git a/tools/ora_editor/templates/editor.html b/tools/ora_editor/templates/editor.html
index abe7730..5d75889 100644
--- a/tools/ora_editor/templates/editor.html
+++ b/tools/ora_editor/templates/editor.html
@@ -68,6 +68,7 @@
             async openFile() {
                 if (!this.filePath || this.isLoading) return;
                 
+                console.log('[ORA EDITOR] Opening file:', this.filePath);
                 this.isLoading = true;
                 this.error = '';
                 
@@ -80,6 +81,8 @@
                     
                     const data = await response.json();
                     
+                    console.log('[ORA EDITOR] File opened:', data);
+                    
                     if (!data.success) throw new Error(data.error || 'Failed to open file');
                     
                     this.oraPath = data.ora_path;
@@ -88,6 +91,7 @@
                     this.imageHeight = data.height;
                     this.clearPolygon();
                 } catch (e) {
+                    console.error('[ORA EDITOR] Error opening file:', e);
                     this.error = e.message;
                 } finally {
                     this.isLoading = false;
@@ -181,6 +185,7 @@
             },
 
             startDrawing() {
+                console.log('[ORA EDITOR] Starting polygon drawing mode');
                 this.isDrawing = true;
                 this.polygonPoints = [];
                 
@@ -190,15 +195,25 @@
 
             setupCanvas() {
                 const canvas = document.getElementById('polygonCanvas');
-                if (!canvas) return;
+                if (!canvas) {
+                    console.warn('[ORA EDITOR] Polygon canvas not found');
+                    return;
+                }
                 
                 // Match canvas size to image
                 canvas.width = this.imageWidth;
                 canvas.height = this.imageHeight;
+                
+                console.log('[ORA EDITOR] Canvas setup:', canvas.width, 'x', canvas.height);
             },
 
             addPolygonPoint(x, y) {
-                if (!this.isDrawing) return;
+                if (!this.isDrawing) {
+                    console.warn('[ORA EDITOR] addPolygonPoint called but not in drawing mode');
+                    return;
+                }
+                
+                console.log('[ORA EDITOR] Adding polygon point:', x, y);
                 
                 // Normalize to 0-1 range
                 x = Math.max(0, Math.min(1, x));
@@ -254,6 +269,10 @@
             async extractMask() {
                 if (!this.maskSubject.trim()) return;
                 
+                console.log('[ORA EDITOR] Extracting mask for:', this.maskSubject);
+                console.log('[ORA EDITOR] Use polygon hint:', this.usePolygonHint);
+                console.log('[ORA EDITOR] Polygon points:', this.polygonPoints.length);
+                
                 this.isExtracting = true;
                 this.lastError = '';
                 
@@ -271,13 +290,17 @@
                     
                     const data = await response.json();
                     
-                    if (!data.success) throw new Error(data.error || 'Failed to extract mask');
+                    console.log('[ORA EDITOR] Mask extraction response:', data);
+                    
+                    if (!data.success) throw new Error(data.error || 'Failed');
                     
                     this.tempMaskPath = data.mask_path;
                     this.tempMaskUrl = data.mask_url || '/api/file/mask?path=' + encodeURIComponent(data.mask_path);
                     this.showMaskModal = true;
                 } catch (e) {
-                    this.lastError = e.message;
+                    console.error('[ORA EDITOR] Error extracting mask:', e);
+                    document.getElementById('maskError').innerHTML = e.message;
+                    document.getElementById('maskError').style.display = 'block';
                 } finally {
                     this.isExtracting = false;
                 }