diff --git a/tools/server/public_simplechat/index.html b/tools/server/public_simplechat/index.html
index b8bb1076fc..dc2e66135b 100644
--- a/tools/server/public_simplechat/index.html
+++ b/tools/server/public_simplechat/index.html
@@ -61,6 +61,10 @@
diff --git a/tools/server/public_simplechat/readme.md b/tools/server/public_simplechat/readme.md
index e48a032b29..6d4f169c5c 100644
--- a/tools/server/public_simplechat/readme.md
+++ b/tools/server/public_simplechat/readme.md
@@ -835,6 +835,9 @@ Cleanup in general
* Chat button to toggle sessions buttons and system prompt.
* Use unix date format markers wrt sys_date_time toolcall, also add w (day of week).
* Free up the useful vertical space by merging chat sessions buttons/tabs into heading
+* Allow user to load multiple images and submit to ai as part of a single user message.
+* Use popover ui to allow user to view larger versions of loaded images as well as remove before submitting
+ to ai, if and when needed.
#### ToDo
diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index 4a720057bc..65b06fb6c6 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/tools/server/public_simplechat/simplechat.css
@@ -189,6 +189,10 @@ body {
max-width: 12vmin;
max-height: 12vmin;
}
+#poimage-img {
+ max-width: 60vmin;
+ max-height: 60vmin;
+}
#user-in {
background-color: #ffffff;
padding: 1.6vmin 2vmin;
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index dda546cb13..231e60fe0b 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/tools/server/public_simplechat/simplechat.js
@@ -87,6 +87,11 @@ class NSChatMessage {
this.tool_calls = structuredClone(tool_calls)
this.tool_call_id = tool_call_id
this.name = name
+ if (image_urls) {
+ if (image_urls.length <= 0) {
+ image_urls = undefined
+ }
+ }
this.image_urls = structuredClone(image_urls)
}
@@ -625,7 +630,7 @@ class SimpleChat {
}
// @ts-ignore
tmsg.ns.content = tMixed
- tmsg.ns_delete("image_url")
+ tmsg.ns_delete("image_urls")
}
chat.push(tmsg.ns);
}
@@ -1085,6 +1090,20 @@ class MultiChatUI {
this.elPopoverChatMsgDelBtn = /** @type{HTMLElement} */(document.getElementById("popover-chatmsg-del"));
this.uniqIdChatMsgPO = -1;
+ // image popover menu
+ this.elPOImage = /** @type{HTMLElement} */(document.getElementById("popover-image"));
+ this.elPOImageImg = /** @type{HTMLImageElement} */(document.getElementById("poimage-img"));
+ this.elPOImageDel = /** @type{HTMLButtonElement} */(document.getElementById("poimage-del"));
+ this.elPOImageDel.addEventListener('click', (ev)=>{
+ if (this.uniqIdImagePO < 0) {
+ return
+ }
+ this.dataurl_plus_del(this.uniqIdImagePO)
+ this.uniqIdImagePO = -1;
+ this.elPOImage.hidePopover()
+ })
+ this.uniqIdImagePO = -1;
+
// Save any placeholder set by default like through html, to restore where needed
this.elInUser.dataset.placeholder = this.elInUser.placeholder
// Setup Image loading button and flow
@@ -1179,11 +1198,29 @@ class MultiChatUI {
if (typeof(dataUrl) == 'string') {
this.me.dataURLs.push(dataUrl)
let elImg = document.createElement('img')
+ let imgIndex = this.me.dataURLs.length-1
+ elImg.id = `uiimg-${imgIndex}`
elImg.src = dataUrl
+ elImg.addEventListener('click', (ev)=>{
+ this.uniqIdImagePO = imgIndex;
+ this.elPOImageImg.src = /** @type{string} */(this.me.dataURLs[this.uniqIdImagePO]);
+ this.elPOImage.showPopover()
+ })
this.elDivUserInImgs.appendChild(elImg)
}
}
+ /**
+ * Remove the dataurl, as well as shown image.
+ * @param {number} imgIndex
+ */
+ dataurl_plus_del(imgIndex) {
+ let id = `uiimg-${imgIndex}`
+ this.me.dataURLs[imgIndex] = null
+ let elImg = document.querySelector(`[id="${id}"]`)
+ elImg?.remove()
+ }
+
/**
* Get the stored dataUrl
* @param {number} index
@@ -1675,9 +1712,14 @@ class MultiChatUI {
return;
}
try {
- let images = undefined
+ let images = []
if (this.me.dataURLs.length > 0) {
- images = /** @type{Array} */(this.me.dataURLs)
+ for (const img of this.me.dataURLs) {
+ if (img == null) {
+ continue
+ }
+ images.push(/** @type{string} */(img))
+ }
}
this.chatmsg_addsmart_uishow(chat.chatId, new ChatMessageEx(new NSChatMessage(Roles.User, content, undefined, undefined, undefined, undefined, images)))
} catch (err) {