From 42cc66f06e40c5304ab85a6b3fc36b25c01df6ac Mon Sep 17 00:00:00 2001
From: 50h100a <all_awful@proton.me>
Date: Wed, 2 Aug 2023 03:30:57 -0400
Subject: [PATCH 1/6] First pass UI for extending webui

---
 public/index.html | 69 ++++++++++++++++++++++++++++++++---------------
 1 file changed, 47 insertions(+), 22 deletions(-)

diff --git a/public/index.html b/public/index.html
index 668685345..b82cd4413 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1501,30 +1501,55 @@
                         </div>
                     </div>
                     <div id="textgenerationwebui_api" style="display: none;position: relative;">
-                        <div class="flex-container">
-                            <a href="https://github.com/oobabooga/text-generation-webui" target="_blank">
-                                oobabooga/text-generation-webui
-                            </a>
-                            <span data-i18n="Make sure you run it with">
-                                Make sure you run it with <tt>--api</tt> flag
-                            </span>
-                        </div>
-                        <div>
-                            <div class="flex-container flexFlowColumn">
-                                <div class="flex1">
-                                    <h4 data-i18n="Blocking API url">Blocking API url</h4>
-                                    <small>Example: http://127.0.0.1:5000/</small>
-                                    <input id="textgenerationwebui_api_url_text" name="textgenerationwebui_api_url" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
-                                </div>
-                                <div class="flex1">
-                                    <h4 data-i18n="Streaming API url">Streaming API url</h4>
-                                    <small>Example: ws://127.0.0.1:5005/api/v1/stream</small>
-                                    <input id="streaming_url_textgenerationwebui" type="text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
+                        <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
+                            If you are using: 
+                            <div class="flex-container" style="margin-left:20px;">
+                                <a href="https://github.com/oobabooga/text-generation-webui" target="_blank">
+                                    oobabooga/text-generation-webui
+                                </a>, 
+                                <span data-i18n="Make sure you run it with">
+                                    Make sure you run it with <tt>--api</tt> flag
+                                </span>
+                            </div>
+                            <div class="flex-container" style="margin-left:20px;">
+                                <a href="https://mancer.tech/" target="_blank">
+                                    Mancer AI
+                                </a>, 
+                                <label class="checkbox_label" for="use-mancer-api-checkbox">
+                                    <span data-i18n="Use API key (Only required for Mancer)">
+                                        Click this box (and add your API key!):
+                                    </span>
+                                    <input id="use-mancer-api-checkbox" type="checkbox" />
+                                </label>
+                            </div>
+                            <div id="mancer-api-ui" style="display:none;">
+                                <h4 data-i18n="Mancer API key">Mancer API key</h4>
+                                <div class="flex-container">
+                                    <input id="api_key_mancer" name="api_key_mancer" class="text_pole flex1 wide100p" maxlength="500" size="35" type="text" autocomplete="off">
+                                    <div title="Clear your API key" data-i18n="[title]Clear your API key" class="menu_button fa-solid fa-circle-xmark clear-api-key" data-key="api_key_mancer">
+                                    </div>
                                 </div>
                             </div>
-                            <input id="api_button_textgenerationwebui" class="menu_button" type="submit" value="Connect">
-                            <div id="api_loading_textgenerationwebui" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
-                        </div>
+                            <div>
+                                <div class="flex-container flexFlowColumn">
+                                    <div data-for="api_key_mancer" class="neutral_warning" data-i18n="For privacy reasons, your API key will be hidden after you reload the page.">
+                                        For privacy reasons, your API key will be hidden after you reload the page.
+                                    </div>
+                                    <div class="flex1">
+                                        <h4 data-i18n="Blocking API url">Blocking API url</h4>
+                                        <small>Example: http://127.0.0.1:5000/</small>
+                                        <input id="textgenerationwebui_api_url_text" name="textgenerationwebui_api_url" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
+                                    </div>
+                                    <div class="flex1">
+                                        <h4 data-i18n="Streaming API url">Streaming API url</h4>
+                                        <small>Example: ws://127.0.0.1:5005/api/v1/stream</small>
+                                        <input id="streaming_url_textgenerationwebui" type="text" class="text_pole wide100p" maxlength="500" value="" autocomplete="off">
+                                    </div>
+                                </div>
+                                <input id="api_button_textgenerationwebui" class="menu_button" type="submit" value="Connect">
+                                <div id="api_loading_textgenerationwebui" class="api-load-icon fa-solid fa-hourglass fa-spin"></div>
+                            </div>
+                        </form>
                         <div class="online_status4">
                             <div class="online_status_indicator4"></div>
                             <div class="online_status_text4" data-i18n="Not connected">Not connected</div>

From aac752520447531d0b02835061a79467baa6406e Mon Sep 17 00:00:00 2001
From: 50h100a <all_awful@proton.me>
Date: Wed, 2 Aug 2023 03:31:17 -0400
Subject: [PATCH 2/6] Add secret key storage

---
 public/scripts/secrets.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/scripts/secrets.js b/public/scripts/secrets.js
index 90edb72f0..00203a106 100644
--- a/public/scripts/secrets.js
+++ b/public/scripts/secrets.js
@@ -2,6 +2,7 @@ import { callPopup, getRequestHeaders } from "../script.js";
 
 export const SECRET_KEYS = {
     HORDE: 'api_key_horde',
+    MANCER: 'api_key_mancer',
     OPENAI: 'api_key_openai',
     NOVEL: 'api_key_novel',
     CLAUDE: 'api_key_claude',
@@ -11,6 +12,7 @@ export const SECRET_KEYS = {
 
 const INPUT_MAP = {
     [SECRET_KEYS.HORDE]: '#horde_api_key',
+    [SECRET_KEYS.MANCER]: '#api_key_mancer',
     [SECRET_KEYS.OPENAI]: '#api_key_openai',
     [SECRET_KEYS.NOVEL]: '#api_key_novel',
     [SECRET_KEYS.CLAUDE]: '#api_key_claude',

From 2fdec7eb03d1ea9240b63cd437f40a8e41cb7e46 Mon Sep 17 00:00:00 2001
From: 50h100a <all_awful@proton.me>
Date: Wed, 2 Aug 2023 23:25:24 -0400
Subject: [PATCH 3/6] Added authentication variant to WebUI API.

---
 public/script.js | 41 +++++++++++++++++++++++++++++++++--------
 server.js        | 29 ++++++++++++++++++++++++++---
 2 files changed, 59 insertions(+), 11 deletions(-)

diff --git a/public/script.js b/public/script.js
index 157d79a99..09c090477 100644
--- a/public/script.js
+++ b/public/script.js
@@ -688,6 +688,7 @@ let is_get_status = false;
 let is_get_status_novel = false;
 let is_api_button_press = false;
 let is_api_button_press_novel = false;
+let api_use_mancer_webui = false;
 
 let is_send_press = false; //Send generation
 let add_mes_without_animation = false;
@@ -810,9 +811,9 @@ async function getStatus() {
             type: "POST", //
             url: "/getstatus", //
             data: JSON.stringify({
-                api_server:
-                    main_api == "kobold" ? api_server : api_server_textgenerationwebui,
+                api_server: main_api == "kobold" ? api_server : api_server_textgenerationwebui,
                 main_api: main_api,
+                use_mancer: main_api == "textgenerationwebui" ? api_use_mancer_webui : false,
             }),
             beforeSend: function () { },
             cache: false,
@@ -2672,6 +2673,7 @@ async function Generate(type, { automatic_trigger, force_name2, resolve, reject,
             }
             else if (main_api == 'textgenerationwebui') {
                 generate_data = getTextGenGenerationData(finalPromt, this_amount_gen, isImpersonate);
+                generate_data.use_mancer = api_use_mancer_webui;
             }
             else if (main_api == 'novel') {
                 const this_settings = novelai_settings[novelai_setting_names[nai_settings.preset_settings_novel]];
@@ -2933,6 +2935,14 @@ async function Generate(type, { automatic_trigger, force_name2, resolve, reject,
                     activateSendButtons();
                     //console.log('runGenerate calling showSwipeBtns');
                     showSwipeButtons();
+
+                    if (main_api == 'textgenerationwebui' && api_use_mancer_webui) {
+                        const errorText = `<h3>Inferencer endpoint is unhappy!</h3>
+                        Check you have credits available on your
+                        <a href="https://mancer.tech/dashboard.html" target="_blank">Mancer account</a>.<br>
+                        If you have sufficient credits, please try again later.`;
+                        callPopup(errorText, 'text');
+                    }
                 }
                 console.debug('/savechat called by /Generate');
 
@@ -5015,11 +5025,13 @@ async function getSettings(type) {
 
         setWorldInfoSettings(settings, data);
 
-        api_server_textgenerationwebui =
-            settings.api_server_textgenerationwebui;
+        api_server_textgenerationwebui = settings.api_server_textgenerationwebui;
         $("#textgenerationwebui_api_url_text").val(
             api_server_textgenerationwebui
         );
+        api_use_mancer_webui = settings.api_use_mancer_webui
+        $('#use-mancer-api-checkbox').prop("checked", api_use_mancer_webui);
+        $('#use-mancer-api-checkbox').trigger("change");
 
         selected_button = settings.selected_button;
 
@@ -5051,6 +5063,7 @@ async function saveSettings(type) {
             username: name1,
             api_server: api_server,
             api_server_textgenerationwebui: api_server_textgenerationwebui,
+            api_use_mancer_webui: api_use_mancer_webui,
             preset_settings: preset_settings,
             user_avatar: user_avatar,
             amount_gen: amount_gen,
@@ -7611,16 +7624,28 @@ $(document).ready(function () {
         }
     });
 
+    $("#use-mancer-api-checkbox").on("change", function (e) {
+        const enabled = $("#use-mancer-api-checkbox").prop("checked");
+        $("#mancer-api-ui").css("display", enabled?"block":"none");
+        api_use_mancer_webui = enabled;
+        saveSettingsDebounced(); 
+        getStatus();
+    });
+
     $("#api_button_textgenerationwebui").click(function (e) {
         e.stopPropagation();
         if ($("#textgenerationwebui_api_url_text").val() != "") {
-            let value = formatKoboldUrl($("#textgenerationwebui_api_url_text").val().trim());
-
-            if (!value) {
-                callPopup('Please enter a valid URL.', 'text');
+            let value = $("#textgenerationwebui_api_url_text").val().trim();
+            if (!value || !value.endsWith('/api')) {
+                callPopup('Please enter a valid URL.<br/>WebUI URLs should end with <tt>/api</tt>', 'text');
                 return;
             }
 
+            const mancer_key = $("#api_key_mancer").val().trim();
+            if (mancer_key.length) {
+                writeSecret(SECRET_KEYS.MANCER, mancer_key);
+            }
+
             $("#textgenerationwebui_api_url_text").val(value);
             $("#api_loading_textgenerationwebui").css("display", "inline-block");
             $("#api_button_textgenerationwebui").css("display", "none");
diff --git a/server.js b/server.js
index 5497e3a5d..fc1913e26 100644
--- a/server.js
+++ b/server.js
@@ -146,6 +146,14 @@ let response_getstatus;
 let first_run = true;
 
 
+
+function get_mancer_headers() {
+    const api_key_mancer = readSecret(SECRET_KEYS.MANCER);
+    return api_key_mancer ? { "X-API-KEY": api_key_mancer} : {};
+}
+
+
+
 //RossAscends: Added function to format dates used in files and chat timestamps to a humanized format.
 //Mostly I wanted this to be for file names, but couldn't figure out exactly where the filename save code was as everything seemed to be connected.
 //During testing, this performs the same as previous date.now() structure.
@@ -621,17 +629,21 @@ app.post("/generate_textgenerationwebui", jsonParser, async function (request, r
     else {
         const args = {
             body: JSON.stringify(request.body),
-            headers: { "Content-Type": "application/json" },
+            headers: { "Content-Type": "application/json"},
             signal: controller.signal,
         };
 
+        if (request.body.use_mancer) {
+            args.headers = Object.assign(args.headers, get_mancer_headers());
+        }
+
         try {
             const data = await postAsync(api_server + "/v1/generate", args);
             console.log(data);
             return response_generate.send(data);
         } catch (error) {
-            console.log(error);
-            return response_generate.send({ error: true });
+            console.log("Error: %o", error);
+            return response_generate.send({ error: true});
         }
     }
 });
@@ -685,6 +697,7 @@ app.post("/getchat", jsonParser, function (request, response) {
     }
 });
 
+
 app.post("/getstatus", jsonParser, async function (request, response_getstatus = response) {
     if (!request.body) return response_getstatus.sendStatus(400);
     api_server = request.body.api_server;
@@ -695,6 +708,11 @@ app.post("/getstatus", jsonParser, async function (request, response_getstatus =
     var args = {
         headers: { "Content-Type": "application/json" }
     };
+
+    if (main_api == 'textgenerationwebui' && request.body.use_mancer) {
+        args.headers = Object.assign(args.headers, get_mancer_headers());
+    }
+
     var url = api_server + "/v1/model";
     let version = '';
     let koboldVersion = {};
@@ -3403,6 +3421,10 @@ app.post("/tokenize_via_api", jsonParser, async function (request, response) {
             body: JSON.stringify({ "prompt": text }),
             headers: { "Content-Type": "application/json" }
         };
+        
+        if (main_api == 'textgenerationwebui' && request.body.use_mancer) {
+            args.headers = Object.assign(args.headers, get_mancer_headers());
+        }
 
         const data = await postAsync(api_server + "/v1/token-count", args);
         console.log(data);
@@ -3609,6 +3631,7 @@ const SECRETS_FILE = './secrets.json';
 const SETTINGS_FILE = './public/settings.json';
 const SECRET_KEYS = {
     HORDE: 'api_key_horde',
+    MANCER: 'api_key_mancer',
     OPENAI: 'api_key_openai',
     NOVEL: 'api_key_novel',
     CLAUDE: 'api_key_claude',

From d4278388f786201b1b52aac40f94c13071b4ead8 Mon Sep 17 00:00:00 2001
From: 50h100a <all_awful@proton.me>
Date: Wed, 2 Aug 2023 23:38:50 -0400
Subject: [PATCH 4/6] remove non-changes

---
 server.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/server.js b/server.js
index fc1913e26..465069fa7 100644
--- a/server.js
+++ b/server.js
@@ -629,7 +629,7 @@ app.post("/generate_textgenerationwebui", jsonParser, async function (request, r
     else {
         const args = {
             body: JSON.stringify(request.body),
-            headers: { "Content-Type": "application/json"},
+            headers: { "Content-Type": "application/json" },
             signal: controller.signal,
         };
 
@@ -642,8 +642,8 @@ app.post("/generate_textgenerationwebui", jsonParser, async function (request, r
             console.log(data);
             return response_generate.send(data);
         } catch (error) {
-            console.log("Error: %o", error);
-            return response_generate.send({ error: true});
+            console.log(error);
+            return response_generate.send({ error: true });
         }
     }
 });
@@ -697,7 +697,6 @@ app.post("/getchat", jsonParser, function (request, response) {
     }
 });
 
-
 app.post("/getstatus", jsonParser, async function (request, response_getstatus = response) {
     if (!request.body) return response_getstatus.sendStatus(400);
     api_server = request.body.api_server;

From 2fc6813e66d18789c4f708857542fe8976bf0cab Mon Sep 17 00:00:00 2001
From: 50h100a <all_awful@proton.me>
Date: Thu, 3 Aug 2023 06:07:54 -0400
Subject: [PATCH 5/6] code review adjustments part 1

---
 public/index.html                  |  4 ++--
 public/script.js                   | 11 ++++++-----
 public/scripts/textgen-settings.js | 11 +++++++++++
 public/style.css                   |  4 ++++
 4 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/public/index.html b/public/index.html
index 459a884cf..7d02740ad 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1541,7 +1541,7 @@
                     <div id="textgenerationwebui_api" style="display: none;position: relative;">
                         <form action="javascript:void(null);" method="post" enctype="multipart/form-data">
                             If you are using: 
-                            <div class="flex-container" style="margin-left:20px;">
+                            <div class="flex-container indent20p">
                                 <a href="https://github.com/oobabooga/text-generation-webui" target="_blank">
                                     oobabooga/text-generation-webui
                                 </a>, 
@@ -1549,7 +1549,7 @@
                                     Make sure you run it with <tt>--api</tt> flag
                                 </span>
                             </div>
-                            <div class="flex-container" style="margin-left:20px;">
+                            <div class="flex-container indent20p">
                                 <a href="https://mancer.tech/" target="_blank">
                                     Mancer AI
                                 </a>, 
diff --git a/public/script.js b/public/script.js
index f067f7474..1be052902 100644
--- a/public/script.js
+++ b/public/script.js
@@ -17,6 +17,7 @@ import {
     loadTextGenSettings,
     generateTextGenWithStreaming,
     getTextGenGenerationData,
+    formatTextGenURL,
 } from "./scripts/textgen-settings.js";
 
 import {
@@ -7687,24 +7688,24 @@ $(document).ready(function () {
 
     $("#use-mancer-api-checkbox").on("change", function (e) {
         const enabled = $("#use-mancer-api-checkbox").prop("checked");
-        $("#mancer-api-ui").css("display", enabled?"block":"none");
+        $("#mancer-api-ui").toggle(enabled);
         api_use_mancer_webui = enabled;
         saveSettingsDebounced(); 
         getStatus();
     });
 
-    $("#api_button_textgenerationwebui").click(function (e) {
+    $("#api_button_textgenerationwebui").click(async function (e) {
         e.stopPropagation();
         if ($("#textgenerationwebui_api_url_text").val() != "") {
-            let value = $("#textgenerationwebui_api_url_text").val().trim();
-            if (!value || !value.endsWith('/api')) {
+            let value = formatTextGenURL($("#textgenerationwebui_api_url_text").val().trim())
+            if (!value) {
                 callPopup('Please enter a valid URL.<br/>WebUI URLs should end with <tt>/api</tt>', 'text');
                 return;
             }
 
             const mancer_key = $("#api_key_mancer").val().trim();
             if (mancer_key.length) {
-                writeSecret(SECRET_KEYS.MANCER, mancer_key);
+                await writeSecret(SECRET_KEYS.MANCER, mancer_key);
             }
 
             $("#textgenerationwebui_api_url_text").val(value);
diff --git a/public/scripts/textgen-settings.js b/public/scripts/textgen-settings.js
index 7bdab35e4..cc984e361 100644
--- a/public/scripts/textgen-settings.js
+++ b/public/scripts/textgen-settings.js
@@ -10,6 +10,7 @@ export {
     textgenerationwebui_settings,
     loadTextGenSettings,
     generateTextGenWithStreaming,
+    formatTextGenURL,
 }
 
 const textgenerationwebui_settings = {
@@ -94,6 +95,16 @@ function selectPreset(name) {
     saveSettingsDebounced();
 }
 
+function formatTextGenURL(value) {
+    try {
+        const url = new URL(value);
+        if (url.pathname.endsWith('/api')) {
+            return url.toString();
+        }
+    } catch { } // Try and Catch both fall through to the same return.
+    return null;
+}
+
 function convertPresets(presets) {
     return Array.isArray(presets) ? presets.map(JSON.parse) : [];
 }
diff --git a/public/style.css b/public/style.css
index fda0ee5e3..96233f3d1 100644
--- a/public/style.css
+++ b/public/style.css
@@ -4409,6 +4409,10 @@ toolcool-color-picker {
     width: 50px;
 }
 
+.indent20p {
+    margin-left: 20px;
+}
+
 .wi-enter-footer-text {
     font-size: calc(var(--mainFontSize) * 0.8);
     color: var(--SmartThemeBodyColor);

From 9cf4056b2811c832f5378ad76db5da834e665182 Mon Sep 17 00:00:00 2001
From: 50h100a <all_awful@proton.me>
Date: Thu, 3 Aug 2023 07:32:53 -0400
Subject: [PATCH 6/6] Do backflips trying to get error information from
 endpoints. Then present it nicely.

---
 public/script.js | 10 +++++++---
 server.js        | 13 +++++++++----
 2 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/public/script.js b/public/script.js
index 1be052902..866973d2d 100644
--- a/public/script.js
+++ b/public/script.js
@@ -885,6 +885,11 @@ async function getStatus() {
                     kai_settings.can_use_streaming = canUseKoboldStreaming(data.koboldVersion);
                 }
 
+                // We didn't get a 200 status code, but the endpoint has an explanation. Which means it DID connect, but I digress.
+                if (online_status == "no_connection" && data.response) {
+                    toastr.error(data.response, "API Error", {timeOut: 5000, preventDuplicates:true})
+                }
+
                 //console.log(online_status);
                 resultCheckStatus();
                 if (online_status !== "no_connection") {
@@ -2984,9 +2989,8 @@ async function Generate(type, { automatic_trigger, force_name2, resolve, reject,
 
                     if (main_api == 'textgenerationwebui' && api_use_mancer_webui) {
                         const errorText = `<h3>Inferencer endpoint is unhappy!</h3>
-                        Check you have credits available on your
-                        <a href="https://mancer.tech/dashboard.html" target="_blank">Mancer account</a>.<br>
-                        If you have sufficient credits, please try again later.`;
+                        Returned status <tt>${data.status}</tt> with the reason:<br/>
+                        ${data.response}`;
                         callPopup(errorText, 'text');
                     }
                 }
diff --git a/server.js b/server.js
index 6966274c0..11146e29b 100644
--- a/server.js
+++ b/server.js
@@ -657,8 +657,13 @@ app.post("/generate_textgenerationwebui", jsonParser, async function (request, r
             console.log(data);
             return response_generate.send(data);
         } catch (error) {
+            retval = { error: true, status: error.status, response: error.statusText };
             console.log(error);
-            return response_generate.send({ error: true });
+            try {
+                retval.response = await error.json();
+                retval.response = retval.response.result;
+            } catch {}
+            return response_generate.send(retval);
         }
     }
 });
@@ -747,18 +752,18 @@ app.post("/getstatus", jsonParser, async function (request, response_getstatus =
             };
         }
     }
-    client.get(url, args, function (data, response) {
+    client.get(url, args, async function (data, response) {
         if (typeof data !== 'object') {
             data = {};
         }
         if (response.statusCode == 200) {
             data.version = version;
             data.koboldVersion = koboldVersion;
-            if (data.result != "ReadOnly") {
-            } else {
+            if (data.result == "ReadOnly") {
                 data.result = "no_connection";
             }
         } else {
+            data.response = data.result;
             data.result = "no_connection";
         }
         response_getstatus.send(data);