diff --git a/.gitignore b/.gitignore index 0a122424c..20c14813f 100644 --- a/.gitignore +++ b/.gitignore @@ -3,9 +3,10 @@ public/chats/ public/characters/ public/User Avatars/ public/backgrounds/ +public/css/bg_load.css /uploads/ *.jsonl public/settings.json config.conf .DS_Store -public/settings.json +public/settings.json \ No newline at end of file diff --git a/public/img/book-atlas-solid.svg b/public/img/book-atlas-solid.svg new file mode 100644 index 000000000..3b955b9aa --- /dev/null +++ b/public/img/book-atlas-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/face-smile-regular.svg b/public/img/face-smile-regular.svg new file mode 100644 index 000000000..54cbe7127 --- /dev/null +++ b/public/img/face-smile-regular.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/font-solid.svg b/public/img/font-solid.svg new file mode 100644 index 000000000..0b0908b1f --- /dev/null +++ b/public/img/font-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/panorama-solid.svg b/public/img/panorama-solid.svg new file mode 100644 index 000000000..f6df27506 --- /dev/null +++ b/public/img/panorama-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/sliders-solid.svg b/public/img/sliders-solid.svg new file mode 100644 index 000000000..403c19e06 --- /dev/null +++ b/public/img/sliders-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/img/wifi-solid.svg b/public/img/wifi-solid.svg new file mode 100644 index 000000000..ae7f9db25 --- /dev/null +++ b/public/img/wifi-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/public/index.html b/public/index.html index cac0945a4..061c8430d 100644 --- a/public/index.html +++ b/public/index.html @@ -53,10 +53,483 @@ +
-
+ +
+
+
+ +
+ +
+
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+

API

+ +
+
+
+

API url

+
Example: http://127.0.0.1:5000/api
+ + + +
+
+
Not connected
+
+
+
+

Kobold Presets + + ? + +

+ +
+
+ + +
+
+ +
+
+
+
+
+

User Settings

+

Your Avatar

+
+
+
+
+
+ +
+
+
+

Name

+
+ +
+
+

Power User Options

+
+ + + + + + +
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ Amount generation +
+ select + +
+
+
+ Context Size +
+ select + +
+
+
+
+
+ +
+
+ Temperature +
+
+ select +
+
+ +
+
+
+
+ Repetition Penalty +
+
+ select +
+
+ +
+
+
+
+ Repetition Penalty Range +
+
+ select +
+
+ +
+
+
+
+ Temperature + select + + Repetition Penalty + select + + Repetition Penalty Range + select + +
+
+ Temperature + select + + Repetition Penalty + select + + Repetition Penalty Range + select + +
+
+
+ Anchors Order + ? +
+ +
+ + +
+
+
+
+
+
+
+ +
+
+ Top P Sampling +
+
+ select +
+
+ +
+
+
+
+ Top A Sampling +
+
+ select +
+
+ +
+
+
+
+ Top K Sampling +
+
+ select +
+
+ +
+
+
+
+ Typical Sampling +
+
+ select +
+
+ +
+
+
+
+ Tail Free Sampling +
+
+ select +
+
+ +
+
+
+
+ Repetition Penalty Slope +
+
+ select +
+
+ +
+
+
+
+
+ + + +
+
+ + +
+

Advanced Settings

+ Top K + select + + Top P + select + + Typical P + select + +

Penalty Alpha + select + +

+
+
+
+
+
+
+ +
+
+
+
+
+
+
+

World Info

+
+
+

+Create

+
+
+

+Import

+
+
+
+

How to use ?

+ + + +
+

+ Scan Depth ? +

+ depth + +
+
+

+ Token Budget ? +

+ budget + +
+
+
+

Soft Prompt

+
About soft prompts ?
+ +
+
+
+ +
+
+
+
+
+

Advanced Formatting + + ? + +

+ + + +
+
+ +
+
+
+
+
+
+

Extensions API: TavernAI-extras

+ +
+ + + +
+
Not connected
+
+

Active extensions

+
    +
+

Missing something? Press here for more details!

+
+
+

Extension settings

+
+
+
+
+
+
@@ -131,7 +604,6 @@
-
@@ -242,7 +714,6 @@
-
@@ -297,41 +768,20 @@
-
-
-
-
- -
- -
-
-
-
- -
- -
-
+ - -
-
CHAR is typing
-
- +
@@ -978,7 +982,6 @@
-
img1 @@ -1000,6 +1003,10 @@
+ +
+
CHAR is typing
+
@@ -1041,6 +1048,7 @@
+ \ No newline at end of file diff --git a/public/script.js b/public/script.js index 58aa93c17..705d48c06 100644 --- a/public/script.js +++ b/public/script.js @@ -87,7 +87,7 @@ window["TavernAI"] = {}; const VERSION = "1.1.0"; let converter = new showdown.Converter({ emoji: "true" }); -let bg_menu_toggle = false; +/* let bg_menu_toggle = false; */ const systemUserName = "TavernAI"; let default_user_name = "You"; let name1 = default_user_name; @@ -397,13 +397,7 @@ async function getStatus() { main_api == "kobold" ? api_server : api_server_textgenerationwebui, main_api: main_api, }), - beforeSend: function () { - if (is_api_button_press) { - //$("#api_loading").css("display", 'inline-block'); - //$("#api_button").css("display", 'none'); - } - //$('#create_button').attr('value','Creating...'); // - }, + beforeSend: function () { }, cache: false, dataType: "json", crossDomain: true, @@ -535,11 +529,7 @@ function printCharacters() { async function getCharacters() { await getGroups(); - - //console.log('getCharacters() -- entered'); - //console.log(characters); var response = await fetch("/getcharacters", { - //RossAscends: changed from const method: "POST", headers: { "Content-Type": "application/json", @@ -551,45 +541,17 @@ async function getCharacters() { }); if (response.ok === true) { var getData = ""; //RossAscends: reset to force array to update to account for deleted character. - var getData = await response.json(); //RossAscends: changed from const - //console.log(getData); - - //var aa = JSON.parse(getData[0]); - - var load_ch_count = Object.getOwnPropertyNames(getData); //RossAscends: change from const to create dynamic character load amounts. - var charCount = load_ch_count.length; - //console.log('/getcharacters -- expecting to load '+charCount+' characters.') + getData = await response.json(); + const load_ch_count = Object.getOwnPropertyNames(getData); for (var i = 0; i < load_ch_count.length; i++) { characters[i] = []; characters[i] = getData[i]; characters[i]['name'] = DOMPurify.sanitize(characters[i]['name']); - //console.log('/getcharacters -- loaded character #'+(i+1)+' ('+characters[i].name+')'); } - //RossAscends: updated character sorting to be alphabetical - characters.sort(function (a, b) { - //console.log('sorting characters: '+a.name+' vs '+b.name); - if (a.name < b.name) { - return -1; - } - if (a.name > b.name) { - return 1; - } - return 0; - }); - //console.log(characters); - - //characters.reverse(); - //console.log('/getcharacters -- this_chid -- '+this_chid); if (this_chid != undefined && this_chid != "invalid-safety-id") { $("#avatar_url_pole").val(characters[this_chid].avatar); } - - //console.log('/getcharacters -- sending '+i+' characters to /printcharacters'); printCharacters(); - //console.log(propOwn.length); - //return JSON.parse(getData[0]); - //const getData = await response.json(); - //var getMessage = getData.results[0].text; } } @@ -611,13 +573,9 @@ async function getBackgrounds() { for (var i = 0; i < getData.length; i++) { //console.log(1); $("#bg_menu_content").append( - "
" + `
+
+
` ); } //var aa = JSON.parse(getData[0]); @@ -652,23 +610,7 @@ async function isColab() { } async function setBackground(bg) { - /* - const response = await fetch("/setbackground", { - method: "POST", - headers: { "Content-Type": "application/json" }, - body: JSON.stringify({ - "bg": bg - }) - - }); - if (response.ok === true) { - //const getData = await response.json(); - //background = getData; - - //var aa = JSON.parse(getData[0]); - //const load_ch_coint = Object.getOwnPropertyNames(getData); - }*/ - //console.log(bg); + jQuery.ajax({ type: "POST", // url: "/setbackground", // @@ -682,11 +624,7 @@ async function setBackground(bg) { dataType: "json", contentType: "application/json", //processData: false, - success: function (html) { - //setBackground(html); - //$('body').css('background-image', 'linear-gradient(rgba(19,21,44,0.75), rgba(19,21,44,0.75)), url('+e.target.result+')'); - //$("#form_bg_download").after("
"); - }, + success: function (html) { }, error: function (jqXHR, exception) { console.log(exception); console.log(jqXHR); @@ -706,18 +644,12 @@ async function delBackground(bg) { }), }); if (response.ok === true) { - //const getData = await response.json(); - //background = getData; - //var aa = JSON.parse(getData[0]); - //const load_ch_coint = Object.getOwnPropertyNames(getData); + } } function printMessages() { - //console.log(chat); - //console.log('printMessages() -- printing messages for -- '+this_chid+' '+active_character+' '+characters[this_chid]); chat.forEach(function (item, i, arr) { - //console.log('print message calling addOneMessage'); addOneMessage(item); }); } @@ -832,6 +764,7 @@ function addOneMessage(mes, type = "normal") { newMessage.find('.avatar img').on('error', function () { $(this).attr("src", "/img/user-slash-solid.svg"); }); + if (type === 'swipe') { $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').html(''); $("#chat").children().filter('[mesid="' + (count_view_mes - 1) + '"]').children('.mes_block').children('.mes_text').append(messageText); @@ -845,20 +778,8 @@ function addOneMessage(mes, type = "normal") { } $('#chat .mes').last().addClass('last_mes'); $('#chat .mes').eq(-2).removeClass('last_mes'); - //$textchat.scrollTop(($textchat[0].scrollHeight)); - - //console.log(chat[chat.length - 1].["swipes"]); - //console.log(mes); - /* if (mes["swipes"] !== undefined) { - if (mes["swipes"].length - 1 == mes["swipe_id"]) { //this works to detect when next right swipe would generate - $(".swipe_right").css('opacity', '0.7') // but we need it to happen on load, not only when swiping happens. - } else { - $(".swipe_right").css('opacity', '0.3') - }; - } */ hideSwipeButtons(); - //console.log('addonemessage calling showSwipeBtns'); showSwipeButtons(); // TODO: figure out smooth scrolling that wouldn't hit performance much. @@ -908,7 +829,6 @@ function sendSystemMessage(type, text) { } chat.push(newMessage); - //console.log('sendSystemMessage calls addOneMessage'); addOneMessage(newMessage); is_send_press = false; } @@ -1270,7 +1190,6 @@ async function Generate(type, automatic_trigger, force_name2) {//encode("dsfs"). } function runGenerate(cycleGenerationPromt = '') { - $(".swipe_right").css("display", "none"); is_send_press = true; generatedPromtCache += cycleGenerationPromt; @@ -1315,18 +1234,9 @@ async function Generate(type, automatic_trigger, force_name2) {//encode("dsfs"). } } mesSend[mesSend.length] = item; - //chatString = chatString+item; + }); } - //finalPromt +=chatString; - //console.log(storyString); - - //console.log(encode(characters[this_chid].description+chatString).length); - //console.log(encode(JSON.stringify(characters[this_chid].description+chatString)).length); - //console.log(JSON.stringify(storyString)); - //Send story string - var mesSendString = ''; - var mesExmString = ''; function setPromtString() { mesSendString = ''; @@ -1335,6 +1245,7 @@ async function Generate(type, automatic_trigger, force_name2) {//encode("dsfs"). mesExmString += mesExamplesArray[j]; } for (let j = 0; j < mesSend.length; j++) { + mesSendString += mesSend[j]; if (force_name2 && j === mesSend.length - 1 && tokens_already_generated === 0) { mesSendString += name2 + ':'; @@ -1343,7 +1254,7 @@ async function Generate(type, automatic_trigger, force_name2) {//encode("dsfs"). } function checkPromtSize() { - //console.log('checking prompt size'); + setPromtString(); let thisPromtContextSize = encode(JSON.stringify(worldInfoString + storyString + mesExmString + mesSendString + anchorTop + anchorBottom + charPersonality + generatedPromtCache + promptBias + extension_prompt)).length + 120; @@ -1863,40 +1774,51 @@ function openNavToggle() { function changeMainAPI() { const selectedVal = $("#main_api").val(); - console.log(selectedVal); + //console.log(selectedVal); const apiElements = { "kobold": { - apiElem: $("#kobold_api"), + apiSettings: $("#kobold_api-settings"), + apiConnector: $("#kobold_api"), + apiRanges: $("#range_block"), maxContextElem: $("#max_context_block"), amountGenElem: $("#amount_gen_block"), softPromptElem: $("#softprompt_block") }, "textgenerationwebui": { - apiElem: $("#textgenerationwebui_api"), + apiSettings: $("#textgenerationwebui_api-settings"), + apiConnector: $("#textgenerationwebui_api"), + apiRanges: $("#range_block_textgenerationwebui"), maxContextElem: $("#max_context_block"), amountGenElem: $("#amount_gen_block"), softPromptElem: $("#softprompt_block") }, "novel": { - apiElem: $("#novel_api"), + apiSettings: $("#novel_api-settings"), + apiConnector: $("#novel_api"), + apiRanges: $("#range_block_novel"), maxContextElem: $("#max_context_block"), amountGenElem: $("#amount_gen_block"), softPromptElem: $("#softprompt_block") } }; + console.log('--- apiElements--- '); + //console.log(apiElements); for (const apiName in apiElements) { const apiObj = apiElements[apiName]; const isCurrentApi = selectedVal === apiName; - console.log(isCurrentApi); - console.log(selectedVal); - apiObj.apiElem.css("display", isCurrentApi ? "block" : "none"); + + apiObj.apiSettings.css("display", isCurrentApi ? "block" : "none"); + apiObj.apiConnector.css("display", isCurrentApi ? "block" : "none"); + apiObj.apiRanges.css("display", isCurrentApi ? "block" : "none"); if (isCurrentApi && apiName === "kobold") { + console.log("enabling SP for kobold"); $("#softprompt_block").css("display", "block"); } if (isCurrentApi && apiName === "textgenerationwebui") { + console.log("enabling amount_gen for ooba"); apiObj.amountGenElem.children().prop("disabled", false); apiObj.amountGenElem.css("opacity", 1.0); } @@ -1908,7 +1830,7 @@ function changeMainAPI() { //////////////////////////////////////////////////// async function getUserAvatars() { - $("#user_avatar_block").html(""); //RossAscends: necessary to avoid doubling avatars each QuickRefresh. + $("#user_avatar_block").html(""); //RossAscends: necessary to avoid doubling avatars each refresh. $("#user_avatar_block").append('
+
'); const response = await fetch("/getuseravatars", { method: "POST", @@ -2030,7 +1952,7 @@ async function getSettings(type) { }); var arr_holder = {}; - $("#settings_perset").empty(); //RossAscends: uncommented this to prevent settings selector from doubling preset list on QuickRefresh + $("#settings_perset").empty(); //RossAscends: uncommented this to prevent settings selector from doubling preset list on refresh $("#settings_perset").append( '' ); //adding in the GUI settings, since it is not loaded dynamically @@ -2106,21 +2028,11 @@ async function getSettings(type) { $("#settings_perset option[value=gui]") .attr("selected", "true") .trigger("change"); - $("#range_block").children().prop("disabled", true); - $("#range_block").css("opacity", 0.5); - - $("#amount_gen_block").children().prop("disabled", true); - $("#amount_gen_block").css("opacity", 0.45); } else { if (typeof koboldai_setting_names[preset_settings] !== "undefined") { $(`#settings_perset option[value=${koboldai_setting_names[preset_settings]}]`) .attr("selected", "true"); } else { - $("#range_block").children().prop("disabled", true); - $("#range_block").css("opacity", 0.5); - $("#amount_gen_block").children().prop("disabled", true); - $("#amount_gen_block").css("opacity", 0.45); - preset_settings = "gui"; $("#settings_perset option[value=gui]") .attr("selected", "true") @@ -2244,9 +2156,7 @@ async function saveSettings(type) { success: function (data) { //online_status = data.result; if (type == "change_name") { - //console.log('got name change'); - //console.log('success: reading from settings = ' + settings.username); - //name1 = settings.username; + clearChat(); printMessages(); @@ -2357,20 +2267,9 @@ async function getAllCharaChats() { } } } - //
- - //
- //console.log(data); - //chat.length = 0; - - //chat = data; - //getChatResult(); - //saveChat(); - //console.log('getAllCharaChats() -- Finished successfully'); }, error: function (jqXHR, exception) { - //getChatResult(); - //console.log('getAllCharaChats() -- Failed'); + console.log(exception); console.log(jqXHR); }, @@ -2689,13 +2588,10 @@ function read_bg_load(input) { "url(" + e.target.result + ")" ); $("#form_bg_download").after( - "
" + `
+ + +
` ); }, error: function (jqXHR, exception) { @@ -2741,10 +2637,10 @@ function showSwipeButtons() { } //console.log((chat[chat.length - 1])); if ((chat[chat.length - 1].swipes.length - swipeId) === 1) { - console.log('highlighting R swipe'); + //console.log('highlighting R swipe'); currentMessage.children('.swipe_right').css('opacity', '0.7'); } - console.log(swipesCounterHTML); + //console.log(swipesCounterHTML); $(".swipes-counter").html(swipesCounterHTML); @@ -2815,8 +2711,6 @@ $(document).ready(function () { } else if (parseInt(chat[chat.length - 1]['swipe_id']) < chat[chat.length - 1]['swipes'].length) { //otherwise, if the id is less than the number of swipes chat[chat.length - 1]['mes'] = chat[chat.length - 1]['swipes'][chat[chat.length - 1]['swipe_id']]; //load the last mes box with the latest generation run_swipe_right = true; //then prepare to do normal right swipe to show next message - - } if (chat[chat.length - 1]['swipe_id'] > chat[chat.length - 1]['swipes'].length) { //if we swipe right while generating (the swipe ID is greater than what we are viewing now) @@ -2929,22 +2823,21 @@ $(document).ready(function () { } }); + $(document).on('click', '.swipe_left', function () { // when we swipe left..but no generation. const swipe_duration = 120; const swipe_range = '700px'; chat[chat.length - 1]['swipe_id']--; - if (chat[chat.length - 1]['swipe_id'] >= 0) { // hide the left arrow if we are viewing the first candidate of the last message block - $(this).parent().children('swipe_right').css('display', 'flex'); + if (chat[chat.length - 1]['swipe_id'] >= 0) { + /*$(this).parent().children('swipe_right').css('display', 'flex'); if (chat[chat.length - 1]['swipe_id'] === 0) { $(this).css('display', 'none'); - } - + }*/ // Just in case let this_mes_div = $(this).parent(); let this_mes_block = $(this).parent().children('.mes_block').children('.mes_text'); const this_mes_div_height = this_mes_div[0].scrollHeight; this_mes_div.css('height', this_mes_div_height); const this_mes_block_height = this_mes_block[0].scrollHeight; - chat[chat.length - 1]['mes'] = chat[chat.length - 1]['swipes'][chat[chat.length - 1]['swipe_id']]; $(this).parent().children('.mes_block').transition({ x: swipe_range, @@ -3041,28 +2934,15 @@ $(document).ready(function () { } }); - $("#characloud_url").click(function () { - window.open("https://boosty.to/tavernai", "_blank"); - }); $("#send_but").click(function () { if (is_send_press == false) { - //hideSwipeButtons(); is_send_press = true; - Generate(); } }); - //hotkey to send input with enter (shift+enter generates a new line in the chat input box) - //this is not ideal for touch device users with virtual keyboards. - //ideally we would detect if the user is using a virtual keyboard, and disable this shortcut for them. - //because mobile users' hands are always near the screen, tapping the send button is better for them, and enter should always make a new line. - //note: CAI seems to have this handled. PC: shift+enter = new line, enter = send. iOS: shift+enter AND enter both make new lines, and only the send button sends. - //maybe a way to simulate this would be to disable the eventListener for people iOS. - $("#send_textarea").keydown(function (e) { if (!e.shiftKey && !e.ctrlKey && e.key == "Enter" && is_send_press == false) { - //hideSwipeButtons(); is_send_press = true; e.preventDefault(); Generate(); @@ -3200,40 +3080,8 @@ $(document).ready(function () { // Will allow to select the same file twice in a row $("#form_upload_avatar").trigger("reset"); }); - $("#logo_block").click(function (event) { - if (!bg_menu_toggle) { - $("#bg_menu_button").transition({ - perspective: "100px", - rotate3d: "1,1,0,180deg", - }); - $("#bg_menu_content").transition({ - opacity: 1.0, - height: "90vh", - duration: 340, - easing: "in", - complete: function () { - bg_menu_toggle = true; - $("#bg_menu_content").css("overflow-y", "auto"); - }, - }); - } else { - $("#bg_menu_button").transition({ - perspective: "100px", - rotate3d: "1,1,0,360deg", - }); - $("#bg_menu_content").css("overflow-y", "hidden"); - $("#bg_menu_content").transition({ - opacity: 0.0, - height: "0px", - duration: 340, - easing: "in", - complete: function () { - bg_menu_toggle = false; - }, - }); - } - }); - $(document).on("click", ".bg_example_img", function () { + + $(document).on("click", ".bg_example", function () { //when user clicks on a BG thumbnail... var this_bgfile = $(this).attr("bgfile"); // this_bgfile = whatever they clicked @@ -3255,8 +3103,6 @@ $(document).ready(function () { duration: 1300, //animation_rm_duration, easing: "linear", complete: function () { - // why does the BG transition completion make the #options (right nav) invisible? - $("#options").css("display", "none"); }, }); $("#bg" + number_bg).css( @@ -3783,15 +3629,19 @@ $(document).ready(function () { $("#max_context_counter").html(max_context + " Tokens"); $("#range_block").children().prop("disabled", false); + $("#range_block").css("opacity", 1.0); $("#amount_gen_block").children().prop("disabled", false); + $("#amount_gen_block").css("opacity", 1.0); } else { //$('.button').disableSelection(); preset_settings = "gui"; $("#range_block").children().prop("disabled", true); + $("#range_block").css("opacity", 0.5); $("#amount_gen_block").children().prop("disabled", true); + $("#amount_gen_block").css("opacity", 0.45); } saveSettingsDebounced(); @@ -4270,8 +4120,27 @@ $(document).ready(function () { }); $('.drawer-toggle').click(function () { + //$('#top-settings-holder').find('.open').slideToggle(0, "swing"); var icon = $(this).find('.drawer-icon'); - icon.toggleClass('down up'); - $(this).closest('.drawer').find('.drawer-content').slideToggle(); + var drawer = $(this).parent().find('.drawer-content'); + var drawerWasOpenAlready = $(this).parent().find('.drawer-content').hasClass('openDrawer'); + var iconWasOpenAlready = $(this).find('.drawer-icon').hasClass('openicon'); + console.log('Draw Open? ' + drawerWasOpenAlready + ' Icon Open? ' + iconWasOpenAlready); + + if (!drawerWasOpenAlready) { + $('.openDrawer').slideToggle(200, "swing") //close all open drawers + $('.openIcon').toggleClass('closedIcon openIcon'); //set all icons to closed state + $('.openDrawer').toggleClass('closedDrawer openDrawer'); //set all drawers to closed state + console.log('drawer was closed, so opening'); + icon.toggleClass('openIcon closedIcon'); + drawer.toggleClass('openDrawer closedDrawer'); //mark selected drawer as open if closed + $(this).closest('.drawer').find('.drawer-content').slideToggle(200, "swing"); //open selected drawer + + } else if (drawerWasOpenAlready) { + console.log('found the drawer was already open, so closing'); + icon.toggleClass('closedIcon openIcon'); + $('.openDrawer').slideToggle(200, "swing"); + drawer.toggleClass('closedDrawer openDrawer'); + } }); }); diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js index 880d2dbce..e9188b171 100644 --- a/public/scripts/RossAscends-mods.js +++ b/public/scripts/RossAscends-mods.js @@ -1,3 +1,4 @@ +esversion: 6 import { encode } from "../scripts/gpt-2-3-tokenizer/mod.js"; import { @@ -158,7 +159,7 @@ function RA_CountCharTokens() { //Auto Load Last Charcter -- (fires when active_character is defined and auto_load_chat is true) async function RA_autoloadchat() { if (document.getElementById('CharID0') !== null) { - console.log('char list loaded! clicking activeChar') + console.log('char list loaded! clicking activeChar'); var CharToAutoLoad = document.getElementById('CharID' + LoadLocal('ActiveChar')); if (CharToAutoLoad != null) { CharToAutoLoad.click(); @@ -167,17 +168,17 @@ async function RA_autoloadchat() { } RestoreNavTab(); } else { - console.log('no char list yet..') - setTimeout(RA_autoloadchat, 100) // if the charcter list hadn't been loaded yet, try again. + console.log('no char list yet..'); + setTimeout(RA_autoloadchat, 100); // if the charcter list hadn't been loaded yet, try again. } } //only triggers when AutoLoadChat is enabled, consider adding this as an independent feature later. function RestoreNavTab() { - if ($(rm_button_selected_ch).children("h2").text() !== '') { //check for a change in the character edit tab name + if ($('#rm_button_selected_ch').children("h2").text() !== '') { //check for a change in the character edit tab name console.log('detected ALC char finished loaded, proceeding to restore tab.'); - $(SelectedNavTab).click() //click to restore saved tab when name has changed (signalling char load is done) + $(SelectedNavTab).click(); //click to restore saved tab when name has changed (signalling char load is done) } else { - setTimeout(RestoreNavTab, 100) //if not changed yet, check again after 100ms + setTimeout(RestoreNavTab, 100); //if not changed yet, check again after 100ms } } //changes input bar and send button display depending on connection status @@ -205,9 +206,6 @@ function RA_autoconnect() { if (isUrlOrAPIKey(api_server) && main_api === "kobold") { $("#api_url_text").val(api_server); $("#api_button").click(); - //} else if (isUrlOrAPIKey(api_key_novel) && main_api === "novel") { - // $("#api_key_novel").val(api_key_novel); - // $("#api_button").click(); } } } else { @@ -236,7 +234,7 @@ $("document").ready(function () { if (LoadLocalBool('AutoLoadChatEnabled') == true) { RA_autoloadchat(); } //Autoconnect on page load if enabled, or when api type is changed - if (LoadLocalBool("AutoConnectEnabled") == true) { RA_autoconnect() } + if (LoadLocalBool("AutoConnectEnabled") == true) { RA_autoconnect(); } $("#main_api").change(function () { RA_autoconnect(); }); $("#api_button").click(function () { setTimeout(RA_checkOnlineStatus, 100); }); @@ -285,7 +283,6 @@ $("document").ready(function () { var SwipeTargetMesClassParent = e.target.closest('.last_mes'); if (SwipeTargetMesClassParent !== null) { if (SwipeButR.css('display') === 'flex') { - //if (SwipeButR.attr('style') == 'display: flex;' == true) { SwipeButR.click(); } } @@ -293,10 +290,8 @@ $("document").ready(function () { document.addEventListener('swiped-right', function (e) { var SwipeButL = $('.swipe_left:last'); var SwipeTargetMesClassParent = e.target.closest('.last_mes'); - //console.log('Touch swipe check -- closest last_mes = "' + (SwipeTargetMesClassParent !== null) + ' Button display = ' + (SwipeButL.attr('style') == 'display: flex;' == true)); if (SwipeTargetMesClassParent !== null) { if (SwipeButL.css('display') === 'flex') { - //if (SwipeButL.attr('style') == 'display: flex;' == true) { SwipeButL.click(); } } @@ -328,14 +323,8 @@ $("document").ready(function () { ClearLocal(); } if (event.key == "ArrowLeft") { //swipes left - /* console.log('SWIPE FILTER -- ' + - $("#send_textarea").val() + ' ' + - $("#character_popup").css("display") + ' ' + - $("#shadow_select_chat_popup").css("display") + ' ' + - isInputElementInFocus()); */ if ( - - $(".swipe_left:last").css("display") === "flex" && + $(".swipe_left:last").css('display') === 'flex' && $("#send_textarea").val() === '' && $("#character_popup").css("display") === "none" && $("#shadow_select_chat_popup").css("display") === "none" && @@ -345,14 +334,8 @@ $("document").ready(function () { } } if (event.key == "ArrowRight") { //swipes right - /* console.log('SWIPE FILTER -- ' + - $("#send_textarea").val() + ' ' + - $("#character_popup").css("display") + ' ' + - $("#shadow_select_chat_popup").css("display") + ' ' + - isInputElementInFocus()); */ if ( - - $(".swipe_right:last").css("display") === "flex" && + $(".swipe_right:last").css('display') === 'flex' && $("#send_textarea").val() === '' && $("#character_popup").css("display") === "none" && $("#shadow_select_chat_popup").css("display") === "none" && @@ -360,6 +343,6 @@ $("document").ready(function () { ) { $('.swipe_right:last').click(); } - }; - }) + } + }); }); diff --git a/public/style.css b/public/style.css index d4f41d071..9cea24137 100644 --- a/public/style.css +++ b/public/style.css @@ -70,11 +70,11 @@ body { border-radius: 5px; } -@supports (height: 100dvh) { +/* @supports (height: 100dvh) { body { height: 100dvh; } -} +} */ .mes_text p { margin-top: 0; @@ -162,13 +162,16 @@ code { backdrop-filter: blur(10px); background-color: var(--black70a); -webkit-backdrop-filter: blur(10px); - z-index: 2001; + z-index: 3000; } + + + #sheld { display: grid; grid-template-rows: auto min-content; - height: calc(100svh); + height: calc(100svh - 40px); /*overflow: auto;*/ overflow-x: hidden; @@ -180,13 +183,11 @@ code { } #chat { - +margin-top:5px; overflow-x: hidden; padding-bottom: 0; overflow-y: scroll; display: flex; - - margin-top: 40px; bottom: 10px; border-bottom: 1px solid var(--black30a); border-left: 1px solid var(--black30a); @@ -339,7 +340,8 @@ code { } #right-nav-panel hr, -#personality_div hr { +#personality_div hr, +#top-settings-holder hr { background-image: linear-gradient(90deg, var(--transparent), var(--white30a), var(--transparent)); } @@ -568,25 +570,25 @@ textarea { } -.right_menu { +/* .topbar { max-height: calc(100% - 50px); padding: 0 20px; } - -.right_menu h3 { + */ +#top-bar h3 { margin: 0; padding: 10px 0; } -.right_menu h4 { +#top-bar h4 { margin: 0; padding: 5px 0; } -.right_menu h5 { +#top-bar h5 { color: var(--white50a); - margin: 0; - padding-bottom: 5px; + margin-bottom: 0; + margin-top: 0; font-size: 0.75rem; } @@ -610,6 +612,7 @@ input[type=submit] {} width: calc(100% - 50px); margin-left: 20px; margin-right: 30px; + max-height: 30px; display: flex; align-items: flex-end; } @@ -711,6 +714,7 @@ select { border: 1px solid var(--white30a); border-radius: 10px; width: 100%; + margin-bottom:10px; } select option { @@ -897,146 +901,90 @@ input[type=search]:focus::-webkit-search-cancel-button { /*LEFT SIDE BG MENU*/ #logo_block { - margin-top: 10px; - height: 26px; - z-index: 2000; + z-index: 3001; } #bg_menu { - margin-top: 0; - margin-left: 2px; cursor: pointer; position: fixed; - z-index: 2050; - -webkit-user-select: none; - -webkit-touch-callout: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -#site_logo { - opacity: 0.4; - display: inline-block; - width: 130px; - height: 20px; - vertical-align: top; - margin-left: 1px; -} - -#update-notification { - height: min-content; - font-size: 0.75rem; - line-height: 0.75rem; - color: orange; - margin-bottom: 5px; - display: inline-block; - top: -50%; - position: relative; -} - -#update-notification a { - color: orange; - text-decoration: none; -} - -#bg_menu_button { - display: inline-block; - opacity: 0.4; - transition: 0.5s; - cursor: pointer; - width: 20px; - text-align: center; - height: 20px; - color: var(--white50a); - -} - -#bg_menu_button img { - width: 20px; - height: 20px; - margin-bottom: 6px; + z-index: 3001; } #bg_menu_content { margin-top: 5px; - margin-left: 0; - opacity: 0.0; - cursor: auto; - display: block; - width: 122px; - height: 0; - backdrop-filter: blur(10px); - background-color: var(--black70a); - -webkit-backdrop-filter: blur(10px); - overflow: hidden; + display: flex; + flex-wrap:wrap; + max-width: 450px; + justify-content: center; } .bg_example { - width: 103px; - height: 83px; - border-style: none; - padding: 6px; - /* padding-bottom: 20px; */ - position: relative; - margin-left: 3px; - backdrop-filter: blur(10px); - background-color: var(--black70a); - -webkit-backdrop-filter: blur(1px); -} - -.bg_example_img { - cursor: pointer; - width: 100%; - height: 100%; - object-fit: cover; - object-position: center center; - border-radius: 10px; + width: 30%; + max-height: 100px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + border-radius: 20px; + border: 1px solid var(--black50a); + box-shadow: 0 0 7px var(--black50a); + margin: 5px; + aspect-ratio: 4/3; } .bg_example_cross { - width: 12px; - height: 12px; - position: absolute; + width: 15px; + height: 15px; + position: relative; float: right; right: 10px; top: 10px; cursor: pointer; - opacity: 0.5; + opacity: 0.4; background-color: var(--black100); - border-radius: 2px; - padding: 1px; + border-radius: 50%; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + box-shadow: 0 0 0 2pt black; +} + +#form_bg_download { + width:30%; + margin: 5px; } .bg_example_but_load { - margin-left: 3px; - - width: 103px; - height: 83px; - border-style: none; - padding: 6px; - padding-bottom: 20px; - } .bg_example_but_load img { cursor: pointer; - width: 91px; - height: 57px; - object-fit: cover; - object-position: center center; + height: 100px; + object-fit: contain; + margin: auto auto; border-radius: 10px; opacity: 0.1; } #add_bg_button { - margin-bottom: 2px; } +.input-file { + display: flex; + justify-content: center; +} + #form_create { display: grid; - height: 90vh; - grid-template-rows: [avatar] min-content [hr] min-content [descriptionHeader] min-content [description] auto [firstmessageHeader] min-content [firstMessage] auto [hidden] min-content [advanced] min-content [tokenCounter] min-content [formButtons] min-content; + height: 100%; + overflow-y: auto; + grid-template-rows: + [avatar] min-content + [hr] min-content + [descriptionHeader] min-content + [description] auto + [firstmessageHeader] min-content + [firstMessage] auto + [hidden] min-content; } .avatar_div { @@ -1130,17 +1078,6 @@ input[type=search]:focus::-webkit-search-cancel-button { display: flex; } -.input-file { - display: block; -} - -#form_bg_download { - margin-bottom: 2px; - backdrop-filter: blur(10px); - background-color: var(--black70a); - -webkit-backdrop-filter: blur(10px); -} - /* Focus */ #colab_popup { @@ -1166,7 +1103,7 @@ input[type=search]:focus::-webkit-search-cancel-button { width: 300px; position: absolute; - z-index: 2060; + z-index: 9999; margin-left: auto; margin-right: auto; left: 0; @@ -1266,7 +1203,7 @@ input[type=search]:focus::-webkit-search-cancel-button { position: absolute; width: 100%; height: 100vh; - z-index: 2095; + z-index: 9999; } #colab_shadow_popup { @@ -1379,12 +1316,12 @@ input[type=search]:focus::-webkit-search-cancel-button { margin-right: auto; left: 0; right: 0; - margin-top: 40px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); padding: 4px; /*border: 1px solid #333333;*/ flex-direction: column; - z-index: 2064; + z-index: 3010; + border-radius: 0 0 20px 20px; } #world_popup_bottom_holder { @@ -1701,87 +1638,89 @@ input[type='checkbox']:not(#nav-toggle):not(#rm_button_panel_pin):checked::after display: none !important; } -#temp { - margin-left: 10px; - margin-bottom: 20px; +.range-block { + height:min-content; } -#temp_counter { - margin-bottom: 0; +.range-block-title{ + margin: 0; + padding: 0; + font-size: 14px; } - -#amount_gen { - margin-left: 10px; - margin-bottom: 20px; -} - -#amount_gen_counter { - margin-bottom: 0; -} - -#max_context { - margin-left: 10px; - margin-bottom: 20px; -} - -#max_context_counter { - margin-bottom: 0; -} - -#range_block input { - margin-left: 10px; - margin-bottom: 20px; -} - -#range_block_novel input { - margin-left: 10px; - margin-bottom: 20px; -} - -/* range sliders */ - -#range_block, -#range_block_novel { - margin-top: 10px; -} - -#range_block input, -#range_block_novel input { - margin-bottom: 20px; -} - -#temp, -#amount_gen, -#max_context { - margin-bottom: 20px; -} - -#temp_counter, -#amount_gen_counter, -#max_context_counter { - margin-bottom: 0; -} - .range-block-counter { - width: min-content; - margin: 0 auto; + width: max-content; + position: relative; + margin-left: auto; + margin-right: auto; + margin-top: 10px; + font-size:11px; + color: var(--white50a); } .range-block-range { margin: 0 auto; + margin-bottom: 10px; width: 100%; + margin-bottom: 10px; } -input[type="range"] { +/* input[type=range] { -webkit-appearance: none; - margin: 0 auto; + appearance: none; + margin: 0; + padding: 0; width: 100%; - height: 7px; + height: 5px; background: var(--white50a); border-radius: 15px; background-size: 70% 100%; background-repeat: no-repeat; } +input[type=range]::-webkit-slider-thumb, input[type=range]::-moz-range-thumb { + -webkit-appearance: none; + height: 15px; + width: 15px; + margin-top: -5px; + border-radius: 50%; + background:red; +} */ + +input[type="range"]{ + -webkit-appearance: none; + appearance: none; + margin: 0; + padding: 0; + width: 100%; + height: 5px; + background: var(--white50a); + border-radius: 15px; + background-size: 70% 100%; + background-repeat: no-repeat; + box-shadow:inset 0 0 2px black; +/* -webkit-appearance:none; + width:160px; + height:20px; + margin:10px 50px; + background: linear-gradient(to right, #9A2720 0%, #9A2720 100%); + background-size:150px 10px; + background-position:center; + background-repeat:no-repeat; + overflow:hidden; + outline: none; */ + } + + input[type="range"]::-webkit-slider-thumb{ + -webkit-appearance:none; + position:relative; + box-shadow:0 0 5px 0 black; + box-shadow:inset 0 0 5px var(--black70a); + -webkit-appearance: none; + height: 15px; + width: 15px; + /* margin-top: -5px; */ + border-radius: 50%; + background:var(--white100); + } /*Notes '?' links*/ @@ -1897,8 +1836,6 @@ input[type="range"] { } #anchor_order { - width: 284px; - margin-bottom: 15px; color: var(--white70a); background-color: var(--black50a); @@ -1934,7 +1871,6 @@ input[type="range"] { #character_popup { display: none; - position:fixed; background-color: var(--black30a); backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(30px); @@ -1948,7 +1884,6 @@ input[type="range"] { margin-right: auto; left: 0; right: 0; - margin-top: 40px; box-shadow: 0 0 20px var(--black70a); padding-left: 30px; padding-right: 30px; @@ -2199,6 +2134,7 @@ input[type="range"] { flex-direction: row; width: 100%; align-items: flex-end; + margin-bottom: 10px; } #rm_group_buttons .checkbox { @@ -2581,14 +2517,14 @@ a { bottom: 0; margin: 0; right: -450px; - padding: 0; + padding: 0 10px; -webkit-transition: right 0.14s ease-in-out 0.02s; -moz-transition: right 0.14s ease-in-out 0.02s; transition: right 0.14s ease-in-out 0.02s; backdrop-filter: blur(10px); background-color: var(--black70a); -webkit-backdrop-filter: blur(10px); - z-index: 2050; + z-index: 3000; white-space: nowrap; border-left: 1px solid var(--black30a); scrollbar-width: thin; @@ -2644,10 +2580,17 @@ a { #nav-toggle:checked~#right-nav-panel { right: 0; box-shadow: -5px 0 20px 0 var(--black70a); + /*overflow-y: auto;*/ +} + + +#right-nav-panel > div:not(#right-nav-panel-tabs) { + height: calc(100% - 40px); overflow-y: auto; } + /* Message images */ .mes img.img_extra { max-width: 600px; @@ -2660,84 +2603,6 @@ 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); - width: calc(100vw - 10px); - margin: 0 auto; - margin-left: 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; - } - - #rm_api_block { - width:100vw; - - } - - #right-nav-panel, #character_popup { /* character_popup display needs work, "width:100%" items push outside the box */ - width: 100vw; - 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.*/ - * { - - } - -} - /* Extensions */ #extensions_url { display: block; @@ -2778,54 +2643,6 @@ label[for="extensions_autoconnect"] { padding: 0.05px; /* clear fix */ } -.success { - color: green; -} - -.failure { - color: red; -} - -.expander { - flex-grow: 1; -} - -.drawer { - padding-bottom: 10px; -} - -.drawer-icon { - display: block; - cursor: pointer; - width: 26px; - height: 26px; - background-size: cover; - background-repeat: no-repeat; - filter: invert(1) brightness(75%); -} - -.drawer-icon.up { - background-image: url('img/circle-chevron-up-solid.svg'); -} - -.drawer-icon.down { - background-image: url('img/circle-chevron-down-solid.svg'); -} - -.drawer-header { - display: flex; - justify-content: space-between; - align-items: center; -} - -.drawer-content { - display: none; -} - -.drawer-content .checkbox_label { - margin: 1rem 0; -} - .extensions_info { text-align: left; margin: 0 1em; @@ -2850,4 +2667,226 @@ label[for="extensions_autoconnect"] { #extensions_list .disabled { text-decoration: line-through; color: lightgray; -} \ No newline at end of file +} + +.success { + color: green; +} + +.failure { + color: red; +} + +.expander { + flex-grow: 1; +} + +/*------------ TOP SIDE SETTINGS ----------------*/ + +#top-settings-holder{ + margin: 0 auto; + padding-top: 5px; + /* right: auto; */ + height: 35px; + min-width: 20vw; + max-width: 700px; + color: white; + justify-content: space-around; + display: grid; + grid-template-columns: 10% 10% 10% 10% 10% 10% 10%; + z-index: 3000; + position: relative; + /* grid-gap: 20px; */ + +} + +.drawer { + align-items: center; + display: flex; + flex-flow: column; + +} + +.drawer-icon { + display: inline-block; + cursor: pointer; + min-width: 36px; + height: 26px; + background-size: contain; + background-repeat: no-repeat; +} + +.icon-connect{ + background-image: url('img/wifi-solid.svg'); +} +.icon-sliders{ + background-image: url('img/sliders-solid.svg'); +} +.icon-globe{ + background-image: url('img/book-atlas-solid.svg'); +} +.icon-user{ + background-image: url('img/face-smile-regular.svg'); +} + +.icon-panorama{ + background-image: url('img/panorama-solid.svg'); +} + +.icon-cubes { + background-image: url('img/cubes-solid.svg'); +} + +.icon-formatting { + background-image: url('img/font-solid.svg'); +} + +.drawer-icon.openIcon { + /* background-image: url('img/circle-chevron-up-solid.svg'); */ + filter: invert(1) brightness(200%); + transition: all 0.275s; +} + +.drawer-icon.closedIcon { + /* background-image: url('img/circle-chevron-down-solid.svg'); */ + filter: invert(1); + opacity: 0.3; + transition: all 0.275s; +} + +.drawer-icon.closedIcon:hover{ + opacity: 1; +} + +.drawer-header { + display: flex; + align-items: center; +} + +.drawer-content { + background-color: var(--black50a); + color: white; + border-radius: 20px; + padding: 10px; + border: 1px solid grey; + box-shadow: 0 0 20px black; + /* min-width:400px; */ + width: max-content; + overflow-y: scroll; + max-height: 90vh; + display: none; + position: absolute; + left:0; + right:0; + width: max-content; + margin: 30px auto; + backdrop-filter: blur(20px); + -webkit-backdrop-filter: blur(20px); +} + +.flex-container { + display: flex; + gap: 20px; +} + +.wide50p { width:50%;} + + + + +/* ---------- @media quaries must always go at the bottom ------------*/ + +@media screen and (max-width: 450px) { /*styles for mobile phones (tested on iPhone 13 Pro)*/ + body { + font-size: 18px; + } + + .drawer-content { + width: calc(100vw - 10px); + position: fixed; + left: 0; + top: 10px; + } + + #top-settings-holder{ + max-width:70vw; + } + #bg1, #bg2 {position:fixed;} + + #sheld, #character_popup, #world_popup, #right-nav-panel { /*margin around the sides, and a larger one on bottom to avoid iOS Home bar*/ + height: calc(100svh - 55px); + width: calc(100vw - 10px); + margin: 0 auto; + margin-left: 5px; + position: fixed; + } + + .mes-text {padding-right: 25px;} + + #right-nav-panel { + margin-top: 0 auto; + border-radius: 0 0 0 20px; + height: calc(100vh - 30px); + width: calc(100vw - 5px); + } + + #right-nav-panel h4 {margin: 5px auto;} + + #form_create { + grid-template-rows: + [avatar] min-content + [hr] min-content + [descriptionHeader] min-content + [description] auto + [firstmessageHeader] min-content + [firstMessage] auto; + } + + #result_info { font-size: 14px;} + + .avatar_div {margin-top: 5px;} + + #character_popup { + width: calc(100vw - 5px); + border-radius: 0 0 0 20px; + margin-top: -35px; + height: calc(100vh - 30px); + } + + + #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: 200px; + 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: 200px; + } + + #talkativeness_hint span { + min-width: 33%; + } + /*for debug purposes*/ +/* + * {border: 1px solid purple;} + */ +} + +@media (max-width: 768px) { + .mes img.img_extra { + max-width: 100%; + } +} +