Merge branch 'SL-TAI-RA-Mods' into dev

public/index.html

@@ -22,6 +22,7 @@
     <script src="scripts/showdown.min.js"></script>
     <script src="scripts/popper.js"></script>
     <script type="module" src="scripts/RossAscends-mods.js"></script>
+    <script type="module" src="scripts/swiped-events.js"></script>
     <link rel="stylesheet" type="text/css" href="style.css">
     <link rel="stylesheet" href="css/bg_load.css">
     <link rel="icon" type="image/x-icon" href="favicon.ico">
@@ -106,7 +107,7 @@
 
         <div id="talkativeness_div">
             <h4>Talkativeness</h4>
-            <h5>How often does the character speak randomly.&nbsp;<span class="warning">Affects group chats only!</span>
+            <h5>How often the chracter speaks in &nbsp;<span class="warning">group chats!</span>
             </h5>
             <input id="talkativeness_slider" name="talkativeness" type="range" min="0" max="1" step="0.05" value="0.5"
                 form="form_create">

public/script.js

@@ -64,7 +64,7 @@ export {
     default_avatar,
     system_message_types,
     talkativeness_default,
-};
+}
 
 // API OBJECT FOR EXTERNAL WIRING
 window["TavernAI"] = {};
@@ -817,22 +817,22 @@ function addOneMessage(mes) {
         );
     }
     count_view_mes++;
+    //console.log('add mes without animation = '+add_mes_without_animation);
+    //console.log(!add_mes_without_animation);
     if (!add_mes_without_animation) {
-        $("#chat").children().last().css("opacity", 1.0);
-        $("#chat")
-            .children()
-            .last()
-            .transition({
-                opacity: 1.0,
-                duration: 700,
-                easing: "",
-                complete: function () { },
-            });
-    } else {
+        console.log('adding mes with animation')
+        //$('#chat').children().last().css('transition','all 2s ease-in-out');
+        $('#chat').children().last().css("opacity", "1");
+        //$('#chat').children().last().css('transition','all 2s ease-in-out');
+
+
+    }else {
+        console.log('add mes with animation was false, and is set to false again')
         add_mes_without_animation = false;
     }
     var $textchat = $("#chat");
-    $textchat.scrollTop($textchat[0].scrollHeight);
+    //$('#chat').children().last().css("opacity", "1");
+    $textchat.scrollTop(($textchat[0].scrollHeight));
 }
 
 function typeWriter(target, text, speed, i) {
@@ -936,8 +936,12 @@ async function Generate(type, automatic_trigger) {
                 //console.log('about to remove last msg')
                 chat.length = chat.length - 1;
                 count_view_mes -= 1;
-                //console.log('removing last msg')
-                $("#chat").children().last().remove();
+                //$('#chat').children().last().css({'transition':'all 0.5s ease-in-out'});
+                //$('#chat').children().last().css({'transform':'translateX(100vh) scale(0.1,0.1)'});
+                //$('#chat').children().last().css({'opacity':'0'});
+                setTimeout(function(){
+                    $('#chat').children().last().remove();
+               },1000);
             }
         }
 

public/scripts/RossAscends-mods.js

@@ -2,22 +2,25 @@ import { encode } from "../scripts/gpt-2-3-tokenizer/mod.js";
 
 import {
   Generate,
-  getSettings,
+/*   getSettings,
   saveSettings,
   printMessages,
   clearChat,
   getChat,
-  this_chid,
-  settings,
+  chat
+  settings, */
+  this_chid,  
   characters,
   online_status,
   main_api,
   api_server,
   api_key_novel,
-  getCharacters,
-  is_send_press
+  is_send_press,
+  
 } from "../script.js";
 
+import { LoadLocal, SaveLocal, ClearLocal, CheckLocal, LoadLocalBool } from "./f-localStorage.js";
+
 var NavToggle = document.getElementById("nav-toggle");
 var PanelPin = document.getElementById("rm_button_panel_pin");
 var SelectedCharacterTab = document.getElementById("rm_button_selected_ch");
@@ -38,30 +41,6 @@ var count_tokens;
 var perm_tokens;
 var ALC_Done;
 
-////////////////// LOCAL STORAGE HANDLING /////////////////////
-
-function SaveLocal(target, val) {
-	localStorage.setItem(target, val);
-	console.log('SaveLocal -- '+target+' : '+val);
-  }
-  function LoadLocal(target) {
-	return localStorage.getItem(target);
-  }
-  function LoadLocalBool(target){
-	  let result = localStorage.getItem(target) === 'true';
-	  return result;
-  }
-  function CheckLocal() {
-	console.log("----------local storage---------");
-	var i;
-	for (i = 0; i < localStorage.length; i++) {
-	  console.log(localStorage.key(i) +" : " +localStorage.getItem(localStorage.key(i)));
-	}
-	console.log("------------------------------");
-  }
-  function ClearLocal() {localStorage.clear();console.log('Removed All Local Storage');}
-
-/////////////////////////////////////////////////////////////////////////
 //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.
 //Does not break old characters/chats, as the code just uses whatever timestamp exists in the chat.
@@ -271,18 +250,14 @@ $("document").ready(function () {
 	$(AutoConnectCheckbox).prop("checked",LoadLocalBool("AutoConnectEnabled"));
 	$(AutoLoadChatCheckbox).prop("checked",LoadLocalBool("AutoLoadChatEnabled"));
 	
-	
 
-	//AutoLoadChat and AutoConnect must be loaded on a small delay after page load to allow getSettings to fill out what they need
 	if (LoadLocalBool('AutoLoadChatEnabled') == true) {
 			console.log('calling RA_ALC');
 			RA_autoloadchat();
 	}
-
+	//Autoconnect on page load if enabled, or when api type is changed
 	if (LoadLocalBool("AutoConnectEnabled") == true) {RA_autoconnect()}
-
 	$("#main_api").change(function () {RA_autoconnect();});
-
 	$("#api_button").click(function () {setTimeout(RA_checkOnlineStatus, 100);});
 
 	//close the RightNav panel when user clicks outside of it or related panels (adv editing popup, or dialog popups)
@@ -343,6 +318,37 @@ $("document").ready(function () {
 			(this.scrollHeight) + 'px';
 	});
 
+	//Regenerate if user swipes on the last mesage in chat
+	//TODO: 
+	//1. Make it detect if the last message is from user, and ignore swipes then...
+	//2. find a way to make the chat slide down smoothly when the last mes div gets .remove()-d
+
+	document.addEventListener('swiped-left', function(e) {
+		var SwipeTargetMesClassParent = e.target.closest('.mes');
+		if (is_send_press == false){
+		if (SwipeTargetMesClassParent !== null && SwipeTargetMesClassParent.nextSibling == null ){
+				$('#chat').children().last().css({'transition':'all 0.5s ease-in-out'});
+				$('#chat').children().last().css({'transform':'translateX(-100vw) scale(0,0)','overflow':'hidden'});
+				$('#chat').children().last().css({'opacity':'0'});
+				
+				Generate('regenerate');
+			}
+		}
+	});
+	document.addEventListener('swiped-right', function(e) {
+		var SwipeTargetMesClassParent = e.target.closest('.mes');
+		console.log(is_send_press);
+		if (is_send_press === false){
+			if (SwipeTargetMesClassParent !== null && SwipeTargetMesClassParent.nextSibling == null){
+				$('#chat').children().last().css({'transition':'all 0.5s ease-in-out'});
+				$('#chat').children().last().css({'transform':'translateX(100vh) scale(0,0)','overflow':'hidden'});
+				$('#chat').children().last().css({'opacity':'0'});
+				Generate('regenerate');
+				console.log(is_send_press);
+			}
+		}	
+	});
+
 	//Additional hotkeys CTRL+ENTER and CTRL+UPARROW
 	document.addEventListener("keydown", (event) => {
 		if (event.ctrlKey && event.key == "Enter") {

public/scripts/f-localStorage.js

@@ -0,0 +1,25 @@
+////////////////// LOCAL STORAGE HANDLING /////////////////////
+
+export function SaveLocal(target, val) {
+	localStorage.setItem(target, val);
+	console.log('SaveLocal -- '+target+' : '+val);
+  }
+export function LoadLocal(target) {
+	return localStorage.getItem(target);
+  }
+export function LoadLocalBool(target){
+	  let result = localStorage.getItem(target) === 'true';
+	  return result;
+  }
+export function CheckLocal() {
+	console.log("----------local storage---------");
+	var i;
+	for (i = 0; i < localStorage.length; i++) {
+	  console.log(localStorage.key(i) +" : " +localStorage.getItem(localStorage.key(i)));
+	}
+	console.log("------------------------------");
+  }
+
+export function ClearLocal() {localStorage.clear();console.log('Removed All Local Storage');}
+
+/////////////////////////////////////////////////////////////////////////

public/scripts/swiped-events.js

@@ -0,0 +1,165 @@
+/*!
+ * swiped-events.js - v@version@
+ * Pure JavaScript swipe events
+ * https://github.com/john-doherty/swiped-events
+ * @inspiration https://stackoverflow.com/questions/16348031/disable-scrolling-when-touch-moving-certain-element
+ * @author John Doherty <www.johndoherty.info>
+ * @license MIT
+ */
+(function (window, document) {
+
+    'use strict';
+
+    // patch CustomEvent to allow constructor creation (IE/Chrome)
+    if (typeof window.CustomEvent !== 'function') {
+
+        window.CustomEvent = function (event, params) {
+
+            params = params || { bubbles: false, cancelable: false, detail: undefined };
+
+            var evt = document.createEvent('CustomEvent');
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        };
+
+        window.CustomEvent.prototype = window.Event.prototype;
+    }
+
+    document.addEventListener('touchstart', handleTouchStart, false);
+    document.addEventListener('touchmove', handleTouchMove, false);
+    document.addEventListener('touchend', handleTouchEnd, false);
+
+    var xDown = null;
+    var yDown = null;
+    var xDiff = null;
+    var yDiff = null;
+    var timeDown = null;
+    var startEl = null;
+
+    /**
+     * Fires swiped event if swipe detected on touchend
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function handleTouchEnd(e) {
+
+        // if the user released on a different target, cancel!
+        if (startEl !== e.target) return;
+
+        var swipeThreshold = parseInt(getNearestAttribute(startEl, 'data-swipe-threshold', '20'), 10); // default 20 units
+        var swipeUnit = getNearestAttribute(startEl, 'data-swipe-unit', 'px'); // default px
+        var swipeTimeout = parseInt(getNearestAttribute(startEl, 'data-swipe-timeout', '500'), 10);    // default 500ms
+        var timeDiff = Date.now() - timeDown;
+        var eventType = '';
+        var changedTouches = e.changedTouches || e.touches || [];
+
+        if (swipeUnit === 'vh') {
+            swipeThreshold = Math.round((swipeThreshold / 100) * document.documentElement.clientHeight); // get percentage of viewport height in pixels
+        }
+        if (swipeUnit === 'vw') {
+            swipeThreshold = Math.round((swipeThreshold / 100) * document.documentElement.clientWidth); // get percentage of viewport height in pixels
+        }
+
+        if (Math.abs(xDiff) > Math.abs(yDiff)) { // most significant
+            if (Math.abs(xDiff) > swipeThreshold && timeDiff < swipeTimeout) {
+                if (xDiff > 0) {
+                    eventType = 'swiped-left';
+                }
+                else {
+                    eventType = 'swiped-right';
+                }
+            }
+        }
+        else if (Math.abs(yDiff) > swipeThreshold && timeDiff < swipeTimeout) {
+            if (yDiff > 0) {
+                eventType = 'swiped-up';
+            }
+            else {
+                eventType = 'swiped-down';
+            }
+        }
+
+        if (eventType !== '') {
+
+            var eventData = {
+                dir: eventType.replace(/swiped-/, ''),
+                touchType: (changedTouches[0] || {}).touchType || 'direct',
+                xStart: parseInt(xDown, 10),
+                xEnd: parseInt((changedTouches[0] || {}).clientX || -1, 10),
+                yStart: parseInt(yDown, 10),
+                yEnd: parseInt((changedTouches[0] || {}).clientY || -1, 10)
+            };
+
+            // fire `swiped` event event on the element that started the swipe
+            startEl.dispatchEvent(new CustomEvent('swiped', { bubbles: true, cancelable: true, detail: eventData }));
+
+            // fire `swiped-dir` event on the element that started the swipe
+            startEl.dispatchEvent(new CustomEvent(eventType, { bubbles: true, cancelable: true, detail: eventData }));
+        }
+
+        // reset values
+        xDown = null;
+        yDown = null;
+        timeDown = null;
+    }
+
+    /**
+     * Records current location on touchstart event
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function handleTouchStart(e) {
+
+        // if the element has data-swipe-ignore="true" we stop listening for swipe events
+        if (e.target.getAttribute('data-swipe-ignore') === 'true') return;
+
+        startEl = e.target;
+
+        timeDown = Date.now();
+        xDown = e.touches[0].clientX;
+        yDown = e.touches[0].clientY;
+        xDiff = 0;
+        yDiff = 0;
+    }
+
+    /**
+     * Records location diff in px on touchmove event
+     * @param {object} e - browser event object
+     * @returns {void}
+     */
+    function handleTouchMove(e) {
+
+        if (!xDown || !yDown) return;
+
+        var xUp = e.touches[0].clientX;
+        var yUp = e.touches[0].clientY;
+
+        xDiff = xDown - xUp;
+        yDiff = yDown - yUp;
+    }
+
+    /**
+     * Gets attribute off HTML element or nearest parent
+     * @param {object} el - HTML element to retrieve attribute from
+     * @param {string} attributeName - name of the attribute
+     * @param {any} defaultValue - default value to return if no match found
+     * @returns {any} attribute value or defaultValue
+     */
+    function getNearestAttribute(el, attributeName, defaultValue) {
+
+        // walk up the dom tree looking for attributeName
+        while (el && el !== document.documentElement) {
+
+            var attributeValue = el.getAttribute(attributeName);
+
+            if (attributeValue) {
+                return attributeValue;
+            }
+
+            el = el.parentNode;
+        }
+
+        return defaultValue;
+    }
+
+}(window, document));

public/settings.json

@@ -1 +1 @@
-{"username":"You","api_server":"","api_server_textgenerationwebui":"","preset_settings":"gui","preset_settings_novel":"Classic-Euterpe","user_avatar":"you.png","temp":0.43,"amount_gen":90,"max_context":2048,"anchor_order":0,"style_anchor":false,"character_anchor":true,"auto_connect":true,"auto_load_chat":true,"main_api":"kobold","api_key_novel":"","rep_pen":1.17,"rep_pen_size":1024,"model_novel":"euterpe-v2","temp_novel":1.11,"rep_pen_novel":1.11,"rep_pen_size_novel":320,"world_info":null,"world_info_depth":2,"world_info_budget":200,"textgenerationwebui_settings":{"temp":0.5,"top_p":0.9,"top_k":0,"typical_p":1,"rep_pen":1.1,"rep_pen_size":0,"penalty_alpha":0}}
+{"username":"You","api_server":"http://localhost:5000/api","api_server_textgenerationwebui":"","preset_settings":"gui","preset_settings_novel":"Classic-Euterpe","user_avatar":"legat.png","temp":0.43,"amount_gen":180,"max_context":2048,"anchor_order":0,"style_anchor":false,"character_anchor":false,"auto_connect":true,"auto_load_chat":true,"main_api":"kobold","api_key_novel":"","rep_pen":1.17,"rep_pen_size":1024,"model_novel":"euterpe-v2","temp_novel":1.11,"rep_pen_novel":1.11,"rep_pen_size_novel":320,"world_info":null,"world_info_depth":2,"world_info_budget":200,"active_character":"0","textgenerationwebui_settings":{"temp":0.5,"top_p":0.9,"top_k":0,"typical_p":1,"rep_pen":1.1,"rep_pen_size":0,"penalty_alpha":0}}

public/style.css

@@ -32,8 +32,11 @@
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -moz-appearance: initial;
+    scrolling-behaviour: smooth;
 }
 
+html { scroll-behaviour: smooth;}
+
 body {
     margin: 0;
     padding: 0;
@@ -45,18 +48,11 @@ body {
     background-size: cover;
     font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
     font-size: 15px;
-    /*1rem*/
     color: var(--ivory);
 
 }
 
-@media screen and (max-width: 450px) {
-    body {
-        margin-left: auto;
-        margin-right: auto;
-        overflow-x: hidden;
-    }
-}
+
 
 ::-webkit-scrollbar {
     width: 0.6em;
@@ -191,6 +187,7 @@ code {
     -webkit-backdrop-filter: blur(20px);
     text-shadow: #000 0 0 3px;
     scrollbar-width: thin;
+    transition: all 1s ease-in-out;
 
 }
 
@@ -811,7 +808,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     margin-top: 0;
     margin-left: 2px;
     cursor: pointer;
-    position: absolute;
+    position: fixed;
     z-index: 2050;
     -webkit-user-select: none;
     -webkit-touch-callout: none;
@@ -1055,7 +1052,7 @@ input[type=search]:focus::-webkit-search-cancel-button {
     margin-top: 36vh;
     box-shadow: 0 0 5px 5px var(--fullred);
     padding: 4px;
-    background-color: var(--black30a);
+    background-color: var(--black70a);
     border-radius: 10px;
 }
 
@@ -1788,6 +1785,7 @@ input[type="range"] {
 
 #character_popup {
     display: none;
+    position:fixed;
     background-color: var(--black30a);
     backdrop-filter: blur(50px);
     -webkit-backdrop-filter: blur(30px);
@@ -1796,7 +1794,7 @@ input[type="range"] {
     max-width: 800px;
     height: calc(100vh - 50px);
     position: absolute;
-    z-index: 2065;
+    z-index: 3002;
     margin-left: auto;
     margin-right: auto;
     left: 0;
@@ -2429,14 +2427,11 @@ a {
 }
 
 @media screen and (max-width: 450px) {
-    #right-nav-panel {
-        width: 100%;
-        box-shadow: none;
-    }
+
 }
 
 #nav-toggle {
-    position: absolute;
+    position: fixed;
     right: 13px;
     top: 12px;
     padding: 0;
@@ -2497,8 +2492,70 @@ a {
     display: none;
 }
 
+@media screen and (max-width: 450px) {      /*styles for mobile phones (tested on iPhone 13 Pro)*/
+    body {
+        font-size: 18px;
+    }
+
+    #bg1, #bg2 {position:fixed;}
+
+    #sheld {    /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/
+        height: calc(100svh - 15px);
+        margin-left: 5px;
+        margin-right: 5px;
+        position: fixed;
+    }
+    #send_textarea {    /*larger input bar for mobile screens, easier to tap*/
+        font-size: 1.25rem;
+        line-height: 1.5rem;
+        min-height: calc(2rem + 0.75rem + 2px);
+        max-height: 35vh;
+        word-wrap: break-word;
+        height: 40px;
+        resize: vertical;
+        display: block;
+        background-color: rgba(255, 0, 0, 0);
+        border: 0;
+        box-shadow: none;
+        padding: 6px 0 6px 0;
+        font-family: "Noto Sans", "Noto Color Emoji", sans-serif;
+        margin: 0;
+        text-shadow: #000 0 0 3px;
+    }
+    #rm_ch_create_block textarea {  /*without this the text areas display far too large*/
+        max-height: 300px;
+    }
+
+    #right-nav-panel, #character_popup {        /* character_popup display needs work, "width:100%" items push outside the box */
+        width: 100%;
+        box-shadow: none;
+    }
+
+    #character_popup {
+        margin-top:0;
+        height:100dvh;
+        padding-left:15px;
+        padding-right: 15px;
+        width: 100vw;
+        position: fixed;
+    }
+
+    #talkativeness_hint span {
+        min-width: 33%;
+    }
+    /*for debug purposes*/
+    /** {border: 1px solid purple;}*/ 
+}
+
 @media (max-width: 768px) {
     .mes img.img_extra {
         max-width: 100%;
     }
+}
+
+@media all and (display-mode: browser) {        /*Even in iOS WebApp mode the window detects as this; unhelpful.*/
+    * { 
+
+    }
+
 }

readme.md

@@ -1,16 +1,19 @@
-## RossAscends 1.2.8 mods ported into Silly TavernAI 1.2.8
+## RossAscends mods ported into SillyLossy's TavernAI 1.2.8
 
 
 <img width="400" alt="image" src="https://user-images.githubusercontent.com/18619528/224549531-ab30db22-fe33-49c5-81a8-945c543a1e05.png">
 
 ## This branch includes: 
 * Base TavernAI 1.2.8
-* SillyLossy's extensive 1.2.8 modifications and functions (
+* SillyLossy's extensive 1.2.8 modifications and functions
    * World Info
    * OobaBooga's TextGen WebUI API connection
    * Soft prompts
-   * Character emotional expressions
-   * Auto-Summary of the chat history
+   * installing [SillyLossy's TAI-extras](https://github.com/SillyLossy/TavernAI-extras) will give support for
+     * Character emotional expressions
+     * Auto-Summary of the chat history
+     * sending images to chat, and the AI interpreting the content.
+   
 
 ...and...
 
@@ -21,12 +24,11 @@
 * Mobile-friendly page design
 * HotKeys
   * Ctrl+Up = Connect to API 
-  * Ctrl+Left = view localled stored variables (in the browser console window)
+  * Ctrl+Left = view locally stored variables (in the browser console window)
   * Ctrl+Right = clear locally stored variables.
   * Ctrl+enter = Regenerate last AI response.
 
-* No more page refresh on character deletion
-* No more page refresh on user name change
+* User Name Changes and Character Deletion no longer force the page to refresh.
 
 * Toggle option to automatically connect to API on page load (currently only for Kobold)
 * Toggle option to automatically load the most recently viewed character on page load
@@ -40,14 +42,16 @@
 * Clicking the Lock on the nav panel will hold the panel open, and this setting be remembered across sessions.
 * Nav panel status of open or closed will also be saved across sessions.
 
+* Supports saving a shortcut to iOS homescreens and opening in fullscreen mode from that bookmark.
+
 ## Installation
 
 *NOTE: This branch is intended for local install purposes, and has not been tested on a colab or other cloud notebook service.*
 
   1. install [NodeJS](nodejs.org)
-  2. download the zip from this github
+  2. download the zip from this github repo
   3. unzip it into a folder of your choice
-  4. run start.bat with aby double clicking or in a command line.
+  4. run start.bat via double clicking or in a command line.
   5. Once the server has prepared everything for you, it will open a tab in your browser.
 
 ## Remote connections
@@ -56,21 +60,22 @@ Most often this is for people who want use TAI on their mobile phones while at h
 If you want to enable other devices to connect to your TAI server, open 'config.conf' in a text editor, and change: 
 
 ```
-const whitelistMode = false;
+const whitelistMode = true;
 ```
 to 
 ```
-const whitelistMode = true;
+const whitelistMode = false;
 ```
 Save the file. 
-Close, then restart your TAI server. 
+Restart your TAI server. 
 
 You will now be able to connect from other devices. 
+
 ***Disclaimer: Anyone else who knows your IP address and TAI port number will be able to as well***
 
 To connect over wifi you'll need your PC's local wifi IP address 
-  - (For Windows: windows button > type 'cmd.exe' in the search bar> type 'ipconfig' in the consol, hit Enter > "IPv4" listing)
-if you want other people around the internet to connect, check [here](https://whatismyipaddress.com/) for 'IPv4'
+  - (For Windows: windows button > type 'cmd.exe' in the search bar> type 'ipconfig' in the console, hit Enter > "IPv4" listing)
+if you want other people on the internet to connect, and check [here](https://whatismyipaddress.com/) for 'IPv4'
 
 ## Questions or suggestions?
 Contact me on Discord: RossAscends#1779