Add support for external TAI API calls

config.conf

@@ -3,7 +3,8 @@ const port = 8000;
 const whitelist = ['127.0.0.1']; //Example for add several IP in whitelist: ['127.0.0.1', '192.168.0.10']
 const whitelistMode = false; //Disabling enabling the ip whitelist mode. true/false
 const autorun = true; //Autorun in the browser. true/false
+const enableExtensions = true; //Enables support for TavernAI-extras project
 
 module.exports = {
-  port, whitelist, whitelistMode, autorun
+  port, whitelist, whitelistMode, autorun, enableExtensions,
 };

public/index.html

@@ -33,7 +33,9 @@
 
 
     <script type=module>
-			
+        // API OBJECT FOR EXTERNAL WIRING
+        window['TavernAI'] = {};
+
         import {encode, decode} from "../scripts/gpt-2-3-tokenizer/mod.js";
         $(document).ready(function(){
             const VERSION = '1.2.8';
@@ -765,6 +767,14 @@
                 const newMessage = $(`#chat [mesid="${count_view_mes}"]`);
                 newMessage.data('isSystem', isSystem);
 
+                if (mes.extra?.image) {
+                    const image = document.createElement('img');
+                    image.src = mes.extra?.image;
+                    image.classList.add('img_extra');
+                    newMessage.find('.mes_text').css('font-size', '0px');
+                    newMessage.find('.mes_text').append(image);
+                }
+
                 if (isSystem) {
                     newMessage.find('.mes_edit').hide();
                 }
@@ -3371,6 +3381,16 @@
                                 }
                             });
                             // end world info settings
+
+                            if (data.enable_extensions) {
+                                const src = 'scripts/extensions.js';
+                                if ($(`script[src="${src}"]`).length === 0) {
+                                    const script = document.createElement('script');
+                                    script.type = 'text/javascript';
+                                    script.src = src;
+                                    $('body').append(script);
+                                }
+                            }
                         }
                         if(!is_checked_colab) isColab();
                         
@@ -4326,6 +4346,19 @@
                 }
                 return array;
             }
+
+            window['TavernAI'].getContext = function() {
+                return {
+                    chat: chat,
+                    characters: characters,
+                    name1: name1,
+                    name2: name2,
+                    characterId: this_chid,
+                    onlineStatus: online_status,
+                    addOneMessage: addOneMessage,
+                    generate: Generate,
+                };
+            };
         });
     </script>
 <title>Tavern.AI</title>
@@ -4921,6 +4954,5 @@
             </form>
         </div>
     </div>
-<script src="scripts/extensions.js" type="module"></script>
 </body>
 </html>

public/scripts/extensions.js

@@ -1,190 +1,205 @@
 
-const settings_html = `
+const extensions_urlKey = 'extensions_url';
-<div class="extensions_block">
+const extensions_autoConnectKey = 'extensions_autoconnect';
-    <hr>
-    <h3>Extensions</h3>
-    <input id="extensions_url" type="text" class="text_pole" />
-    <div class="extensions_url_block">
-        <input id="extensions_connect" type="submit" value="Connect" />
-        <input id="extensions_autoconnect" type="checkbox"/><h4>Auto-connect</h4>
-    </div>
-    <div id="extensions_status">Not connected</div>
-    <div id="extensions_loaded">
-        <h4>Active extensions</h4>
-        <ul id="extensions_list">
-        </ul>
-    </div>
-</div>
-`;
-
-const settings_style = `
-<style>
-#extensions_url {
-    display: block;
-}
-
-#extensions_loaded {
-    display: none;
-}
-
-.extensions_block h3 {
-    margin-bottom: 10px;
-}
-
-#extensions_status {
-    margin: 10px;
-    opacity: 0.85;
-    font-weight: 700;
-}
-
-.extensions_block input[type="submit"]:hover{
-    background-color: green;
-}
-
-.extensions_block input[type="submit"] {
-    cursor: pointer;
-    color: #fff;
-    opacity: 0.7;
-    padding: 10px;
-    font-size: 1rem;
-    height: 2.5rem;
-    transition: 0.3s;
-}
-
-.extensions_block input[type="checkbox"] {
-    margin-left: 10px;
-}
-
-.extensions_url_block {
-    display: flex;
-    align-items: center;
-    margin: 10px;
-}
-
-.extensions_url_block- h4 {
-    display: inline;
-}
-
-.extensions_block {
-    clear: both;
-    padding: 0.05px; /* clear fix */
-}
-
-.success {
-    color: green;
-}
-
-.failure {
-    color: red;
-}
-</style>
-`;
-
-const urlKey = 'extensions_url';
-const autoConnectKey = 'extensions_autoconnect';
-const defaultUrl = "http://localhost:5100";
-let connectedToApi = false;
 let extensions = [];
 
-async function connectClickHandler() {
+(function () {
-    const baseUrl = $("#extensions_url").val();
+    const settings_html = `
-    localStorage.setItem(urlKey, baseUrl);
+    <div class="extensions_block">
-    await connectToApi(baseUrl);
+        <hr>
-}
+        <h3>Extensions</h3>
+        <input id="extensions_url" type="text" class="text_pole" />
+        <div class="extensions_url_block">
+            <input id="extensions_connect" type="submit" value="Connect" />
+            <span class="expander"></span>
+            <input id="extensions_autoconnect" type="checkbox"/><h4>Auto-connect</h4>
+        </div>
+        <div id="extensions_status">Not connected</div>
+        <div id="extensions_loaded">
+            <h4>Active extensions</h4>
+            <ul id="extensions_list">
+            </ul>
+        </div>
+    </div>
+    `;
 
-function autoConnectInputHandler() {
+    const settings_style = `
-    const value = $(this).prop('checked');
+    <style>
-    localStorage.setItem(autoConnectKey, value.toString());
+    #extensions_url {
-
+        display: block;
-    if (value && !connectedToApi) {
-        $("#extensions_connect").trigger('click');
     }
-}
+    
+    #extensions_loaded {
+        display: none;
+    }
+    
+    .extensions_block h3 {
+        margin-bottom: 10px;
+    }
+    
+    #extensions_status {
+        margin: 10px;
+        opacity: 0.85;
+        font-weight: 700;
+    }
+    
+    .extensions_block input[type="submit"]:hover{
+        background-color: green;
+    }
+    
+    .extensions_block input[type="submit"] {
+        cursor: pointer;
+        color: #fff;
+        opacity: 0.7;
+        padding: 10px;
+        font-size: 1rem;
+        height: 2.5rem;
+        transition: 0.3s;
+    }
+    
+    .extensions_block input[type="checkbox"] {
+        margin-left: 10px;
+    }
+    
+    .extensions_url_block {
+        display: flex;
+        align-items: center;
+        margin: 10px;
+        width: 90%
+    }
+    
+    .extensions_url_block- h4 {
+        display: inline;
+    }
+    
+    .extensions_block {
+        clear: both;
+        padding: 0.05px; /* clear fix */
+    }
+    
+    .success {
+        color: green;
+    }
+    
+    .failure {
+        color: red;
+    }
+    
+    .expander {
+        flex-grow: 1;
+    }
+    </style>
+    `;
 
-async function connectToApi(baseUrl) {
+    const defaultUrl = "http://localhost:5100";
-    const url = new URL(baseUrl);
+    let connectedToApi = false;
-    url.pathname = '/api/extensions';
 
-    try {
+    async function connectClickHandler() {
-        const getExtensionsResult = await fetch(url, { method: 'GET' });
+        const baseUrl = $("#extensions_url").val();
+        localStorage.setItem(extensions_urlKey, baseUrl);
+        await connectToApi(baseUrl);
+    }
 
-        if (getExtensionsResult.ok) {
+    function autoConnectInputHandler() {
-            const data = await getExtensionsResult.json();
+        const value = $(this).prop('checked');
-            extensions = data.extensions;
+        localStorage.setItem(extensions_autoConnectKey, value.toString());
-            applyExtensions(baseUrl);
+
+        if (value && !connectedToApi) {
+            $("#extensions_connect").trigger('click');
         }
-
-        updateStatus(getExtensionsResult.ok);
     }
-    catch {
+
-        updateStatus(false);
+    async function connectToApi(baseUrl) {
+        const url = new URL(baseUrl);
+        url.pathname = '/api/extensions';
+
+        try {
+            const getExtensionsResult = await fetch(url, { method: 'GET' });
+
+            if (getExtensionsResult.ok) {
+                const data = await getExtensionsResult.json();
+                extensions = data.extensions;
+                applyExtensions(baseUrl);
+            }
+
+            updateStatus(getExtensionsResult.ok);
+        }
+        catch {
+            updateStatus(false);
+        }
     }
-}
 
-function updateStatus(success) {
+    function updateStatus(success) {
-    connectedToApi = success;
+        connectedToApi = success;
-    const _text = success ? 'Connected to API' : 'Could not connect to API';
+        const _text = success ? 'Connected to API' : 'Could not connect to API';
-    const _class = success ? 'success' : 'failure';
+        const _class = success ? 'success' : 'failure';
-    $('#extensions_status').text(_text);
+        $('#extensions_status').text(_text);
-    $('#extensions_status').attr('class', _class);
+        $('#extensions_status').attr('class', _class);
 
-    if (success && extensions.length) {
+        if (success && extensions.length) {
-        $('#extensions_loaded').show(200);
+            $('#extensions_loaded').show(200);
-        $('#extensions_list').empty();
+            $('#extensions_list').empty();
+
+            for (let extension of extensions) {
+                $('#extensions_list').append(`<li id="${extension.name}">${extension.metadata.display_name}</li>`);
+            }
+        }
+        else {
+            $('#extensions_loaded').hide(200);
+            $('#extensions_list').empty();
+        }
+    }
+
+    function applyExtensions(baseUrl) {
+        const url = new URL(baseUrl);
+
+        if (!Array.isArray(extensions) || extensions.length === 0) {
+            return;
+        }
 
         for (let extension of extensions) {
-            $('#extensions_list').append(`<li id="${extension.name}">${extension.metadata.display_name}</li>`);
+            addExtensionStyle(extension);
+            addExtensionScript(extension);
         }
-    }
-    else {
-        $('#extensions_loaded').hide(200);
-        $('#extensions_list').empty();
-    }
-}
 
-function applyExtensions(baseUrl) {
+        function addExtensionStyle(extension) {
-    const url = new URL(baseUrl);
+            if (extension.metadata.css) {
+                url.pathname = `/api/style/${extension.name}`;
+                const href = url.toString();
 
-    if (!Array.isArray(extensions) || extensions.length === 0) {
+                if ($(`link[href="${href}"]`).length === 0) {
-        return;
+                    const link = document.createElement('link');
-    }
+                    link.rel = 'stylesheet';
-
+                    link.type = 'text/css';
-    for (let extension of extensions) {
+                    link.href = href;
-        if (extension.metadata.js) {
+                    $('head').append(link);
-            url.pathname = `/api/script/${extension.name}`;
+                }
-            const src = url.toString();
-
-            if ($(`script[src="${src}"]`).length === 0) {
-                const script = document.createElement('script');
-                script.type = 'module';
-                script.src = src;
-                $('body').append(script);
             }
-
         }
 
-        if (extension.metadata.css) {
+        function addExtensionScript(extension) {
-            url.pathname = `/api/style/${extension.name}`;
+            if (extension.metadata.js) {
-            const href = url.toString();
+                url.pathname = `/api/script/${extension.name}`;
+                const src = url.toString();
 
-            if ($(`link[href="${href}"]`).length === 0) {
+                if ($(`script[src="${src}"]`).length === 0) {
-                const link = document.createElement('link');
+                    const script = document.createElement('script');
-                link.rel = 'stylesheet';
+                    script.type = 'module';
-                link.type = 'text/css';
+                    script.src = src;
-                link.href = href;
+                    $('body').append(script);
-                $('head').append(link);
+                }
             }
         }
     }
-}
 
-$(document).ready(async function () {
+    $(document).ready(async function () {
-    const url = localStorage.getItem(urlKey) ?? defaultUrl;
+        const url = localStorage.getItem(extensions_urlKey) ?? defaultUrl;
-    const autoConnect = Boolean(localStorage.getItem(autoConnectKey)) ?? false;
+        const autoConnect = Boolean(localStorage.getItem(extensions_autoConnectKey)) ?? false;
-    $('#rm_api_block').append(settings_html);
+        $('#rm_api_block').append(settings_html);
-    $('head').append(settings_style);
+        $('head').append(settings_style);
-    $("#extensions_url").val(url);
+        $("#extensions_url").val(url);
-    $("#extensions_connect").on('click', connectClickHandler);
+        $("#extensions_connect").on('click', connectClickHandler);
-    $("#extensions_autoconnect").on('input', autoConnectInputHandler);
+        $("#extensions_autoconnect").on('input', autoConnectInputHandler);
-    $("#extensions_autoconnect").prop('checked', autoConnect).trigger('input');
+        $("#extensions_autoconnect").prop('checked', autoConnect).trigger('input');
-});
+    });
+})();

server.js

@@ -25,7 +25,7 @@ const server_port = config.port;
 const whitelist = config.whitelist;
 const whitelistMode = config.whitelistMode;
 const autorun = config.autorun;
-
+const enableExtensions = config.enableExtensions;
 
 
 var Client = require('node-rest-client').Client;
@@ -804,7 +804,8 @@ app.post('/getsettings', jsonParser, (request, response) => { //Wintermute's cod
         koboldai_setting_names,
         world_names,
         novelai_settings,
-        novelai_setting_names
+        novelai_setting_names,
+        enable_extensions: enableExtensions,
     });
 });