UPSTREAM PR #17506: server/publc_simplechat tiny (50KB compressed) web ui++ updated with reasoning, vision, builtin clientside tool calls (and markdown wip)

tools/server/public_simplechat/datautils.mjs

@@ -125,6 +125,9 @@ export function trim_hist_garbage_at_end(sIn, maxType, maxUniq, maxMatchLenThres
     let iNum = 0;
     let iOth = 0;
     // Learn
+    /**
+     * @type {Object<string, number>}
+     */
     let hist = {};
     let iUniq = 0;
     for(let i=0; i<maxMatchLenThreshold; i++) {

tools/server/public_simplechat/idb.mjs

@@ -0,0 +1,133 @@
+//@ts-check
+// Helpers to handle indexedDB provided by browsers
+// by Humans for All
+//
+
+
+/**
+ * Allows the db connection to be openned.
+ * @param {string} dbName
+ * @param {string} storeName
+ * @param {string} callerTag
+ */
+export function db_open(dbName, storeName, callerTag="") {
+    let tag = `iDB:${callerTag}`
+    return new Promise((resolve, reject) => {
+        const dbConn = indexedDB.open(dbName, 1);
+        dbConn.onupgradeneeded = (ev) => {
+            console.debug(`DBUG:${tag}:Conn:Upgrade needed...`)
+            dbConn.result.createObjectStore(storeName);
+            dbConn.result.onerror = (ev) => {
+                console.info(`ERRR:${tag}:Db:Op failed [${ev}]...`)
+            }
+        };
+        dbConn.onsuccess = (ev) => {
+            console.debug(`INFO:${tag}:Conn:Opened...`)
+            resolve(dbConn.result);
+        }
+        dbConn.onerror = (ev) => {
+            console.info(`ERRR:${tag}:Conn:Failed [${ev}]...`)
+            reject(ev);
+        }
+    });
+}
+
+
+/**
+ * Get hold of a transaction wrt a specified store in the db
+ * @param {IDBDatabase} db
+ * @param {string} storeName
+ * @param {IDBTransactionMode} opMode
+ */
+export function db_trans_store(db, storeName, opMode) {
+    let dbTrans = db.transaction(storeName, opMode);
+    let dbOS = dbTrans.objectStore(storeName);
+    return dbOS
+}
+
+
+/**
+ * Put a given key-value pair into a store in a db.
+ * Return success or failure through callback.
+ *
+ * @param {string} dbName
+ * @param {string} storeName
+ * @param {IDBValidKey} key
+ * @param {any} value
+ * @param {string | undefined} callerTag
+ * @param {(status: boolean, related: IDBValidKey | DOMException | null) => void} cb
+ */
+export function db_put(dbName, storeName, key, value, callerTag, cb) {
+    let tag = `iDB:Put:${callerTag}`;
+    db_open(dbName, storeName, tag).then((/** @type {IDBDatabase} */db)=>{
+        let reqPut = db_trans_store(db, storeName, 'readwrite').put(value, key)
+        reqPut.onerror = (evPut) => {
+            console.info(`ERRR:${tag}:OnError:transact failed:${reqPut.error}`)
+            cb(false, reqPut.error)
+        }
+        reqPut.onsuccess = (evPut) => {
+            console.info(`DBUG:${tag}:transact success`)
+            cb(true, reqPut.result)
+        }
+    }).catch((errReason)=>{
+        console.info(`ERRR:${tag}:Caught:transact failed:${errReason}`)
+        cb(false, errReason)
+    })
+}
+
+
+/**
+ * Return value of specified key from a store in a db,
+ * through the provided callback.
+ *
+ * @param {string} dbName
+ * @param {string} storeName
+ * @param {IDBValidKey} key
+ * @param {string | undefined} callerTag
+ * @param {(status: boolean, related: IDBValidKey | DOMException | null) => void} cb
+ */
+export function db_get(dbName, storeName, key, callerTag, cb) {
+    let tag = `iDB:Get:${callerTag}`;
+    db_open(dbName, storeName, tag).then((/** @type {IDBDatabase} */db)=>{
+        let reqGet = db_trans_store(db, storeName, 'readonly').get(key);
+        reqGet.onsuccess = (evGet) => {
+            console.info(`DBUG:${tag}:transact success`)
+            cb(true, reqGet.result)
+        }
+        reqGet.onerror = (evGet) => {
+            console.info(`ERRR:${tag}:OnError:transact failed:${reqGet.error}`)
+            cb(false, reqGet.error)
+        }
+    }).catch((errReason)=>{
+        console.info(`ERRR:${tag}:Caught:transact failed:${errReason}`)
+        cb(false, errReason)
+    })
+}
+
+
+/**
+ * Return all keys from a store in a db,
+ * through the provided callback.
+ *
+ * @param {string} dbName
+ * @param {string} storeName
+ * @param {string | undefined} callerTag
+ * @param {(status: boolean, related: IDBValidKey[] | DOMException | null) => void} cb
+ */
+export function db_getkeys(dbName, storeName, callerTag, cb) {
+    let tag = `iDB:GetKeys:${callerTag}`;
+    db_open(dbName, storeName, tag).then((/** @type {IDBDatabase} */db)=>{
+        let reqGet = db_trans_store(db, storeName, 'readonly').getAllKeys();
+        reqGet.onsuccess = (evGet) => {
+            console.info(`DBUG:${tag}:transact success`)
+            cb(true, reqGet.result)
+        }
+        reqGet.onerror = (evGet) => {
+            console.info(`ERRR:${tag}:OnError:transact failed:${reqGet.error}`)
+            cb(false, reqGet.error)
+        }
+    }).catch((errReason)=>{
+        console.info(`ERRR:${tag}:Caught:transact failed:${errReason}`)
+        cb(false, errReason)
+    })
+}

tools/server/public_simplechat/index.html

@@ -1,49 +1,77 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
-        <title>SimpleChat LlamaCppEtal </title>
+        <title>SimpleChat/AnveshikaSallap LlamaCppEtal </title>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <meta name="message" content="Save Nature Save Earth" />
-        <meta name="description" content="SimpleChat: trigger LLM web service endpoints /chat/completions and /completions, single/multi chat sessions" />
+        <meta name="description" content="SimpleChat/AnveshikaSallap: trigger LLM web service endpoints /chat/completions and /completions, multiple chat sessions with own settings, tool calling with builtin tool calls, reasoning, vision" />
         <meta name="author" content="by Humans for All" />
         <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
         <script type="importmap">
             {
                 "imports": {
+                    "simplechat": "./simplechat.js",
                     "datautils": "./datautils.mjs",
-                    "ui": "./ui.mjs"
+                    "ui": "./ui.mjs",
+                    "toolsmanager": "./tools.mjs"
                 }
             }
         </script>
-        <script src="simplechat.js" type="module" defer></script>
+        <script src="main.js" type="module" defer></script>
         <link rel="stylesheet" href="simplechat.css" />
     </head>
     <body>
         <div class="samecolumn" id="fullbody">
 
             <div class="sameline" id="heading">
-                <p class="heading flex-grow" > <b> SimpleChat </b> </p>
-                <button id="settings">Settings</button>
+                <div id="sessions-div" class="flex-grow"></div>
+                <div id="icons-div" class="flex-nogrow">
+                    <button id="sessionsprompts" title="system prompts">&#x1F916;prompt</button>
+                    <button id="clearchat" title="clear current chat">&#x1F300;clear</button>
+                    <button id="settings" title="change settings">&#x2699;</button>
+                </div>
             </div>
 
-            <div id="sessions-div" class="sameline"></div>
-
-            <hr>
-            <div class="sameline">
-                <label for="system-in">System</label>
-                <textarea name="system" id="system-in" rows="2" placeholder="e.g. you are a helpful ai assistant, who provides concise answers" class="flex-grow"></textarea>
+            <div id="sessionsprompts-div" class="visibility-visible">
+                <hr>
+                <div class="sameline role-system">
+                    <label for="system-in">System</label>
+                    <textarea name="system" id="system-in" rows="2" placeholder="e.g. you are a helpful ai assistant, who provides concise answers" class="flex-grow"></textarea>
+                </div>
             </div>
 
             <hr>
             <div id="chat-div">
                 <p> You need to have javascript enabled.</p>
             </div>
 
+            <div id="popover-chatmsg" popover="auto">
+                <button id="popover-chatmsg-del" title="delete message"> &#x274C; </button>
+                <button id="popover-chatmsg-copy" title="copy message text"> &#x1F4CB; </button>
+            </div>
+
+            <div id="tool-div">
+                <div class="sameline">
+                    <textarea id="toolname-in" class="flex-grow" rows="1" placeholder="name of tool to run"></textarea>
+                    <button id="tool-btn">run tool</button>
+                </div>
+                <div class="sameline">
+                    <textarea id="toolargs-in" class="flex-grow" rows="2" placeholder="arguments to pass to the specified tool"></textarea>
+                </div>
+            </div>
+
             <hr>
-            <div class="sameline">
+            <div id="popover-image" popover="auto">
+                <img id="poimage-img"></img>
+                <button id="poimage-del" title="delete"> &#x274C; </button>
+            </div>
+            <div id="user-in-div" class="role-user">
+                <div id="user-in-imgs"></div>
+                <div class="sameline">
                 <textarea id="user-in" class="flex-grow" rows="2" placeholder="enter your query to the ai model here" ></textarea>
-                <button id="user-btn">submit</button>
+                <button id="user-btn" title="submit">&#x1F4AC;</button>
+                </div>
             </div>
 
         </div>

tools/server/public_simplechat/local.tools/debug.py

@@ -0,0 +1,24 @@
+# Helpers for debugging
+# by Humans for All
+
+
+import time
+
+gMe = { '--debug' : False }
+
+
+def setup(bEnable):
+    global gMe
+    gMe['--debug'] = bEnable
+
+
+def dump(meta: dict, data: dict):
+    if not gMe['--debug']:
+        return
+    timeTag = f"{time.time():0.12f}"
+    with open(f"/tmp/simpleproxy.{timeTag}.meta", '+w') as f:
+        for k in meta:
+            f.write(f"\n\n\n\n{k}:{meta[k]}\n\n\n\n")
+    with open(f"/tmp/simpleproxy.{timeTag}.data", '+w') as f:
+        for k in data:
+            f.write(f"\n\n\n\n{k}:{data[k]}\n\n\n\n")

tools/server/public_simplechat/local.tools/filemagic.py

@@ -0,0 +1,81 @@
+# Handle file related helpers, be it a local file or one on the internet
+# by Humans for All
+
+import urllib.request
+import urllib.parse
+import debug
+from dataclasses import dataclass
+
+
+@dataclass(frozen=True)
+class Response:
+    """
+    Used to return result wrt urlreq helper below.
+    """
+    callOk: bool
+    statusCode: int
+    statusMsg: str = ""
+    contentType: str = ""
+    contentData: bytes = b""
+
+
+
+def get_from_web(url: str, tag: str, inContentType: str, inHeaders: dict[str, str|None]):
+    """
+    Get the url specified from web.
+
+    If passed header doesnt contain certain useful http header entries,
+    some predefined defaults will be used in place.
+    """
+    try:
+        hUA = inHeaders.get('User-Agent', None)
+        if not hUA:
+            hUA = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:132.0) Gecko/20100101 Firefox/132.0'
+        hAL = inHeaders.get('Accept-Language', None)
+        if not hAL:
+            hAL = "en-US,en;q=0.9"
+        hA = inHeaders.get('Accept', None)
+        if not hA:
+            hA = "text/html,*/*"
+        headers = {
+            'User-Agent': hUA,
+            'Accept': hA,
+            'Accept-Language': hAL
+        }
+        req = urllib.request.Request(url, headers=headers)
+        # Get requested url
+        print(f"DBUG:{tag}:Req:{req.full_url}:{req.headers}")
+        with urllib.request.urlopen(req, timeout=10) as response:
+            contentData = response.read()
+            statusCode = response.status or 200
+            statusMsg = response.msg or ""
+            contentType = response.getheader('Content-Type') or inContentType
+            print(f"DBUG:FM:GFW:Resp:{response.status}:{response.msg}")
+            debug.dump({ 'op': 'FileMagic.GetFromWeb', 'url': req.full_url, 'req.headers': req.headers, 'resp.headers': response.headers, 'ctype': contentType }, { 'cdata': contentData })
+        return Response(True, statusCode, statusMsg, contentType, contentData)
+    except Exception as exc:
+        return Response(False, 502, f"WARN:{tag}:Failed:{exc}")
+
+
+def get_from_local(urlParts: urllib.parse.ParseResult, tag: str, inContentType: str):
+    """
+    Get the requested file from the local filesystem
+    """
+    try:
+        fPdf = open(urlParts.path, 'rb')
+        dPdf = fPdf.read()
+        return Response(True, 200, "", inContentType, dPdf)
+    except Exception as exc:
+        return Response(False, 502, f"WARN:{tag}:Failed:{exc}")
+
+
+def get_file(url: str, tag: str, inContentType: str, inHeaders: dict[str, str|None]={}):
+    """
+    Based on the scheme specified in the passed url,
+    either get from local file system or from the web.
+    """
+    urlParts = urllib.parse.urlparse(url)
+    if urlParts.scheme == "file":
+        return get_from_local(urlParts, tag, inContentType)
+    else:
+        return get_from_web(url, tag, inContentType, inHeaders)