basically working

js/filter.css

@@ -2,42 +2,50 @@
     position: absolute;
     width:100%;
     height:100%;
-    background-color: #004111;
+    background-color: rgba(0, 0, 0, 0.95);
     z-index: 123456;
 }
 
 .cg_popup .grid {
     position: absolute;
     width:80%;
-    left:10%;
+    left:5%;
     height:90%;
     top:5%;
 }
 
 .cg_popup .buttons {
     position: absolute;
-    width:6%;
-    left:92%;
+    width:15%;
+    left:85%;
     height:90%;
     top:5%;
+    padding: 20px;
 }
 
 .cg_popup .grid img {
-    padding:4px;
+    margin: 2px;
     border: 1px solid white;
+    padding: 4px;
     max-width: 100%;
     max-height: 100%;
 }
 
 .cg_popup .grid img.selected {
-    border: 1px solid green;
+    border: 3px solid green;
+    padding: 2px;
 }
 
 .cg_popup .buttons button {
-    margin:10px;
+    margin-top: 10px;
     padding: 4px;
     display: block;
-    width:100%
+    width: 100px;
+}
+
+.cg_popup .buttons input {
+    padding: 4px;
+    display: inline;
 }
 
 .cg_popup.hidden {

js/image_filter.js

@@ -16,12 +16,38 @@ function send_response(msg) {
     popup?.classList.add('hidden')
 }
 
+function send_picks() {
+    send_response(Array.from(picked).join())
+}
+
+function send_cancel() {
+    send_response('')
+}
+
 function executionInterrupted() {
     send_response('')
 }
 
 const picked = new Set()
 var popup = null
+var click_sends = null
+var send_button = null
+var cancel_button = null
+
+function create_popup() {
+    popup = create('span', 'cg_popup hidden', document.body)
+    const grid = create('span', 'grid', popup)
+    const buttons = create('span', 'buttons', popup)
+    click_sends = create('input', 'control', buttons, {type:"checkbox", id:"click_sends"})
+    create('label', 'control_text', buttons, {for:"click_sends", innerText:"click to send"})
+    send_button = create('button', 'control', buttons, {innerText:"Send (S)"} )
+    cancel_button = create('button', 'control', buttons, {innerText:"Cancel (X)"} )
+
+    send_button.addEventListener('click', (e)=>{ send_picks() })
+    cancel_button.addEventListener('click', (e)=>{ send_cancel() })
+
+    document.addEventListener('keydown', (e)=>{ on_keydown(e) })
+}
 
 function layout() {
     const n = popup.firstChild.children.length
@@ -54,28 +80,31 @@ function layout() {
         c.style.maxHeight = `${h}px`
         c.style.maxWidth = `${w}px`
     })
-    redraw_from_click()
+    redraw()
 }
 
-function redraw_from_click() {
+function redraw() {
     Array.from(popup.firstChild.children).forEach((c,i)=>{
         if (picked.has(`${i}`)) c.classList.add('selected')
         else c.classList.remove('selected')
     }) 
+    if (click_sends.checked || picked.size==0) send_button.disabled = true
+    else send_button.disabled = false
 }
 
-function create_popup() {
-    popup = create('span', 'cg_popup hidden', document.body)
-    const grid = create('span', 'grid', popup)
-    const buttons = create('span', 'buttons', popup)
-    const send = create('button', null, buttons, {innerText:"Send"} )
-    const cancel = create('button', null, buttons, {innerText:"Cancel"} )
-
-    send.addEventListener('click', (e)=>{ send_response(Array.from(picked).join()) })
-    cancel.addEventListener('click', (e)=>{ send_response('') })
+function on_keydown(e) {
+    if (e.key=='x') {
+        e.stopPropagation()
+        e.preventDefault()
+        send_cancel()
+    } else if (e.key=='s' && picked.size>0) {
+        e.stopPropagation()
+        e.preventDefault()
+        send_picks()
+    }
 }
 
-function imageFilterImages(details) {
+function receive_images(details) {
     const detail = details.detail
     if (app.graph._nodes_by_id[detail.uid].type=="Image Filter") {
         if (!popup) create_popup()
@@ -92,9 +121,13 @@ function imageFilterImages(details) {
             if (detail.urls.length>1) {
                 img.addEventListener('click', (e)=>{
                     const s = `${i}`
-                    if (picked.has(s)) picked.delete(s)
-                    else picked.add(s)
-                    redraw_from_click()
+                    if (click_sends.checked) {
+                        send_response(s)
+                    } else {
+                        if (picked.has(s)) picked.delete(s)
+                        else picked.add(s)
+                        redraw()
+                    }
                 })
             } 
         })
@@ -108,6 +141,6 @@ app.registerExtension({
         create('link', null, document.getElementsByTagName('HEAD')[0], 
             {'rel':'stylesheet', 'type':'text/css', 'href': new URL("./filter.css", import.meta.url).href } )
         api.addEventListener("execution_interrupted", executionInterrupted);
-        api.addEventListener("cg-image-filter-images",imageFilterImages);
+        api.addEventListener("cg-image-filter-images",receive_images);
     }
 })