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

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;
                 }