From 8d762fcf3fbaa1c3f1a59fc8dbe4acedd1694325 Mon Sep 17 00:00:00 2001
From: hanishkvc <hanishkvc@gmail.com>
Date: Mon, 10 Nov 2025 18:09:05 +0530
Subject: [PATCH] SimpleChatTCRV:Vision:Show images as part of the message

---
 tools/server/public_simplechat/readme.md      | 2 ++
 tools/server/public_simplechat/simplechat.css | 4 ++++
 tools/server/public_simplechat/simplechat.js  | 7 +++++++
 3 files changed, 13 insertions(+)

diff --git a/tools/server/public_simplechat/readme.md b/tools/server/public_simplechat/readme.md
index 094a84d2ee..d87f8ab45a 100644
--- a/tools/server/public_simplechat/readme.md
+++ b/tools/server/public_simplechat/readme.md
@@ -725,6 +725,8 @@ sliding window based drop off or even before they kick in, this can help in many
     * follow the openai format/template wrt these mixed content messages.
   * Usage: specify a mmproj file directly or through -hf, additionally had to set --batch-size to 8k
     and ubatch-size to 2k wrt gemma3-4b-it
+  * when showing chat instantiate img elements to show image_urls.
+    * limit horizontally to max width and vertically to 20% of the height
 
 * SimpleChat class now allows extra fields to be specified while adding, in a generic way using a
   object/literal object or equivalent.
diff --git a/tools/server/public_simplechat/simplechat.css b/tools/server/public_simplechat/simplechat.css
index b6054e678c..38e4866236 100644
--- a/tools/server/public_simplechat/simplechat.css
+++ b/tools/server/public_simplechat/simplechat.css
@@ -75,6 +75,10 @@
     word-break: break-word;
     hyphens: auto;
 }
+.chat-message-img {
+    max-width: fit-content;
+    max-height: 20vh;
+}
 
 
 .gridx2 {
diff --git a/tools/server/public_simplechat/simplechat.js b/tools/server/public_simplechat/simplechat.js
index 9341296d13..895ddd1ad0 100644
--- a/tools/server/public_simplechat/simplechat.js
+++ b/tools/server/public_simplechat/simplechat.js
@@ -1130,6 +1130,13 @@ class MultiChatUI {
                 entry.classList.add(`chat-message-${name}`)
             }
         }
+        // Handle Image
+        if (msg.ns.image_url) {
+            let img = document.createElement('img')
+            img.classList.add('chat-message-img')
+            img.src = msg.ns.image_url
+            secContents?.append(img)
+        }
         // Handle tool call ui, if reqd
         let bTC = false
         let bAuto = false