From 14295922f9c7e93b95e3229316d865b1ed904f8c Mon Sep 17 00:00:00 2001 From: Concedo <39025047+LostRuins@users.noreply.github.com> Date: Thu, 21 Sep 2023 17:40:35 +0800 Subject: [PATCH] updated ver, updated lite (+1 squashed commits) Squashed commits: [891291bc] updated lite to v67 --- klite.embd | 183 +++++++++++++++++++++++++++++++-------------------- koboldcpp.py | 2 +- 2 files changed, 112 insertions(+), 73 deletions(-) diff --git a/klite.embd b/klite.embd index c85a8321b..1cbb7bd39 100644 --- a/klite.embd +++ b/klite.embd @@ -6,7 +6,7 @@ It requires no dependencies, installation or setup. Just copy this single static HTML file anywhere and open it in a browser, or from a webserver. Please go to https://github.com/LostRuins/lite.koboldai.net for updates on Kobold Lite. Kobold Lite is under the AGPL v3.0 License for the purposes of koboldcpp. Please do not remove this line. -Current version: 66 +Current version: 67 -Concedo --> @@ -1736,6 +1736,11 @@ Current version: 66 @media screen and (max-width: 880px) { #aesthetic_text_preview_panel { display: none; } } + .aui_nametag + { + margin: 0 0 3px; + font-weight: bold; + } /*--------- end instruct-UI -----------*/ @@ -3472,6 +3477,11 @@ Current version: 66 story.savedsettings.saved_oai_addr = ""; story.savedsettings.saved_claude_key = ""; story.savedsettings.saved_claude_addr = ""; + + if (!strip_images) + { + story.savedaestheticsettings = JSON.parse(JSON.stringify(aestheticInstructUISettings, null, 2)); + } } var storyjson = JSON.stringify(story); console.log("Exporting story: " + storyjson); @@ -3594,6 +3604,10 @@ Current version: 66 localsettings.saved_claude_addr = tmp_claude2; } + if (story.savedaestheticsettings && story.savedaestheticsettings != "") { + import_props_into_object(aestheticInstructUISettings,story.savedaestheticsettings); + } + } else { msgbox("Could not import from URL. Is it valid?"); @@ -3702,8 +3716,11 @@ Current version: 66 loaded_storyobj.savedsettings.saved_oai_addr = ""; loaded_storyobj.savedsettings.saved_claude_key = ""; loaded_storyobj.savedsettings.saved_claude_addr = ""; + + loaded_storyobj.savedaestheticsettings = JSON.parse(JSON.stringify(aestheticInstructUISettings, null, 2)); }else{ loaded_storyobj.savedsettings = null; + loaded_storyobj.savedaestheticsettings = null; } @@ -3795,7 +3812,7 @@ Current version: 66 //replace portraits compressImage(data, (compressedImageURI, aspectratio)=>{ aestheticInstructUISettings.AI_portrait = compressedImageURI; - document.getElementById('portrait_height').value = Math.round(document.getElementById('portrait_width').value / aspectratio); + document.getElementById('portrait_ratio_AI').value = aspectratio.toFixed(2); refreshPreview(true); render_gametext(); }, true); @@ -3910,6 +3927,11 @@ Current version: 66 localsettings.instruct_endtag = "\\n"+localsettings.instruct_endtag+"\\n"; } } + + if (loaded_storyobj.savedaestheticsettings && loaded_storyobj.savedaestheticsettings != "") { + import_props_into_object(aestheticInstructUISettings,loaded_storyobj.savedaestheticsettings); + } + hide_popups(); render_gametext(); }, hide_popups); @@ -4321,7 +4343,7 @@ Current version: 66 `; inputBox(warntxt,"AI Safety Warning","","Acknowledgement Required",()=>{ let userinput = getInputBoxValue().toLowerCase().trim(); - if(userinput=="i understand") + if(userinput.includes("understand")) { confirm_scenario(); } @@ -8786,17 +8808,19 @@ Current version: 66 this.bubbleColor_you = '#29343a'; this.bubbleColor_AI = 'rgba(20, 20, 40, 1)'; - // this.background_anchor_style_you = 'left'; - // this.background_anchor_style_AI = 'left'; this.background_margin = [10, 10, 5, 0]; - this.background_padding = [40, 40, 10, 0]; + this.background_padding = [25, 25, 10, 10]; this.background_minHeight = 100; this.centerHorizontally = false; - this.show_portraits = true; // Shows/hides the rest of the fields below on the UI, and is also used on the display part of the code. - this.border_style = 'Rect'; - this.portrait_width = 100; - this.portrait_height = 100; + this.border_style = 'Rounded'; + this.portrait_width_AI = 100; + this.portrait_ratio_AI = 1.0; + this.portrait_width_you = 100; + this.portrait_ratio_you = 1.0; + + this.show_chat_names = true; + this.rounded_bubbles = true; this.you_portrait = null; this.AI_portrait = niko_square; @@ -8817,8 +8841,14 @@ Current version: 66 padding() { return `${this.background_padding[2]}px ${this.background_padding[1]}px ${this.background_padding[3]}px ${this.background_padding[0]}px`; } margin() { return `${this.background_margin[2]}px ${this.background_margin[1]}px ${this.background_margin[3]}px ${this.background_margin[0]}px`; } - portraitSize() { return { width: this.portrait_width, height: this.border_style == 'Circle' ? this.portrait_width : this.portrait_height }; } - portraitRadius() { return this.border_style == 'Circle' ? '1000rem' : (this.border_style == 'Rounded' ? '2rem' : '0.1rem'); } + portraitSize(role) { + if (role == "you") { + return { width: this.portrait_width_you, height: this.border_style == 'Circle' ? this.portrait_width_you : this.portrait_width_you / this.portrait_ratio_you }; + } else { + return { width: this.portrait_width_AI, height: this.border_style == 'Circle' ? this.portrait_width_AI : this.portrait_width_AI / this.portrait_ratio_AI }; + } + } + portraitRadius() { return this.border_style == 'Circle' ? '1000rem' : (this.border_style == 'Rounded' ? '1.6rem' : '0.1rem'); } } const sideMapping = { 'left': 0, 'right': 1, 'top': 2, 'bottom': 3 }; @@ -8827,15 +8857,6 @@ Current version: 66 let tempAestheticInstructUISettings = null; // These exist to act as backup when customizing, to revert when pressing the 'Cancel' button. function initializeInstructUIFunctionality() { - // Load the default settings (by default), or the latest chosen ones. - if (localsettings.persist_session === true) { - const jsonString = localStorage.getItem((localflag?"e_":"")+'koboldLiteUICustomizationOptions'); - if (jsonString) { - var obj = JSON.parse(jsonString); - for (let key in obj) { if (aestheticInstructUISettings.hasOwnProperty(key)) { aestheticInstructUISettings[key] = obj[key]; } } - } - } // If persist session isn't toggled, reset to the default settings. - else { localStorage.setItem((localflag ? 'e_': '') + 'koboldLiteUICustomizationOptions', JSON.stringify(aestheticInstructUISettings, null, 2)); } // Initialize foregroundColorPickers and backgroundColorPickers. document.querySelectorAll('.enhancedTextColorPicker, .enhancedStandardColorPicker').forEach(element => { @@ -8908,11 +8929,12 @@ Current version: 66 if(isSelfPortrait) { aestheticInstructUISettings.you_portrait = compressedImageURI; + document.getElementById('portrait_ratio_you').value = aspectratio.toFixed(2); } else { aestheticInstructUISettings.AI_portrait = compressedImageURI; - document.getElementById('portrait_height').value = Math.round(document.getElementById('portrait_width').value / aspectratio); + document.getElementById('portrait_ratio_AI').value = aspectratio.toFixed(2); } refreshPreview(true); } @@ -8928,7 +8950,10 @@ Current version: 66 document.getElementById("reset-portrait").addEventListener('click', (e) => { aestheticInstructUISettings.you_portrait = null; aestheticInstructUISettings.AI_portrait = niko_square; - document.getElementById('portrait_height').value = document.getElementById('portrait_width').value = 100; + document.getElementById('portrait_ratio_AI').value = 1.0; + document.getElementById('portrait_width_AI').value = 100; + document.getElementById('portrait_ratio_you').value = 1.0; + document.getElementById('portrait_width_you').value = 100; refreshPreview(true); }); @@ -8979,29 +9004,29 @@ Current version: 66 if (role != 'uniform') { aestheticInstructUISettings[`bubbleColor_${role}`] = document.getElementById(`${role}-bubble-colorselector`).style.backgroundColor; } } + aestheticInstructUISettings.rounded_bubbles = document.getElementById('aui_rounded_bubbles').checked; + aestheticInstructUISettings.show_chat_names = document.getElementById('aui_show_chat_names').checked; aestheticInstructUISettings.use_markdown = document.getElementById('instructModeMarkdown').checked; aestheticInstructUISettings.use_uniform_colors = !document.getElementById('instructModeCustomized').checked; aestheticInstructUISettings.code_block_background = document.getElementById('code-block-background-colorselector').style.color; aestheticInstructUISettings.code_block_foreground = document.getElementById('code-block-foreground-colorselector').style.color; aestheticInstructUISettings.font_size = document.getElementById('instruct-font-size').value; aestheticInstructUISettings.border_style = document.getElementById('instructBorderStyle').value; - aestheticInstructUISettings.portrait_width = document.getElementById('portrait_width').value; - aestheticInstructUISettings.portrait_height = document.getElementById('portrait_height').value; + aestheticInstructUISettings.portrait_width_AI = document.getElementById('portrait_width_AI').value; + aestheticInstructUISettings.portrait_ratio_AI = document.getElementById('portrait_ratio_AI').value; + aestheticInstructUISettings.portrait_width_you = document.getElementById('portrait_width_you').value; + aestheticInstructUISettings.portrait_ratio_you = document.getElementById('portrait_ratio_you').value; aestheticInstructUISettings.background_minHeight = document.getElementById('instruct-min-backgroundHeight').value; aestheticInstructUISettings.centerHorizontally = document.getElementById('instructModeCenterHorizontally').checked; - // aestheticInstructUISettings.background_anchor_style_you = document.getElementById('background-anchor-style-you').value; - // aestheticInstructUISettings.background_anchor_style_AI = document.getElementById('background-anchor-style-AI').value; - //basic sanitization aestheticInstructUISettings.font_size = cleannum(aestheticInstructUISettings.font_size, 5, 50); - aestheticInstructUISettings.portrait_width = cleannum(aestheticInstructUISettings.portrait_width, 10, 250); - aestheticInstructUISettings.portrait_height = cleannum(aestheticInstructUISettings.portrait_height, 10, 250); + aestheticInstructUISettings.portrait_width_AI = cleannum(aestheticInstructUISettings.portrait_width_AI, 10, 250); + aestheticInstructUISettings.portrait_ratio_AI = cleannum(aestheticInstructUISettings.portrait_ratio_AI, 0.01, 3).toFixed(2); + aestheticInstructUISettings.portrait_width_you = cleannum(aestheticInstructUISettings.portrait_width_you, 10, 250); + aestheticInstructUISettings.portrait_ratio_you = cleannum(aestheticInstructUISettings.portrait_ratio_you, 0.01, 3).toFixed(2); aestheticInstructUISettings.background_minHeight = cleannum(aestheticInstructUISettings.background_minHeight, 0, 300); - // NOTE: Portraits are loaded automatically from the json, and are stored to aestheticInstructUISettings directly. - localStorage.setItem((localflag?"e_":"")+'koboldLiteUICustomizationOptions', JSON.stringify(aestheticInstructUISettings, null, 2)); - function getTextStyleFromElement(id) { let element = document.getElementById(id); let computedStyle = window.getComputedStyle(element); @@ -9018,18 +9043,20 @@ Current version: 66 } // Apply the settings from the json file to the UI. + document.getElementById('aui_rounded_bubbles').checked = aestheticInstructUISettings.rounded_bubbles; + document.getElementById('aui_show_chat_names').checked = aestheticInstructUISettings.show_chat_names; document.getElementById('instructModeMarkdown').checked = aestheticInstructUISettings.use_markdown; document.getElementById('instructModeCustomized').checked = !aestheticInstructUISettings.use_uniform_colors; document.getElementById('code-block-background-colorselector').style.color = aestheticInstructUISettings.code_block_background; document.getElementById('code-block-foreground-colorselector').style.color = aestheticInstructUISettings.code_block_foreground; document.getElementById('instruct-font-size').value = aestheticInstructUISettings.font_size; document.getElementById('instructBorderStyle').value = aestheticInstructUISettings.border_style; - document.getElementById('portrait_width').value = aestheticInstructUISettings.portrait_width; - document.getElementById('portrait_height').value = aestheticInstructUISettings.portrait_height; + document.getElementById('portrait_width_AI').value = aestheticInstructUISettings.portrait_width_AI; + document.getElementById('portrait_ratio_AI').value = aestheticInstructUISettings.portrait_ratio_AI; + document.getElementById('portrait_width_you').value = aestheticInstructUISettings.portrait_width_you; + document.getElementById('portrait_ratio_you').value = aestheticInstructUISettings.portrait_ratio_you; document.getElementById('instruct-min-backgroundHeight').value = aestheticInstructUISettings.background_minHeight; document.getElementById('instructModeCenterHorizontally').checked = aestheticInstructUISettings.centerHorizontally; - // document.getElementById('background-anchor-style-AI').value = aestheticInstructUISettings.background_anchor_style_AI; - // document.getElementById('background-anchor-style-you').value = aestheticInstructUISettings.background_anchor_style_you; // Show or hide customization UI elements based on whether they should be visible in the UI or not. showOrHide('.uniform-mode-font', document.getElementById('instructModeCustomized').checked == false); @@ -9066,6 +9093,8 @@ Current version: 66 { const contextDict = { sysOpen: '', youOpen: '', AIOpen: '', closeTag: '' } let you = get_instruct_starttag(); let bot = get_instruct_endtag(); // Instruct tags will be used to wrap text in styled bubbles. + + let as = aestheticInstructUISettings; // ..and use this as shortcut to avoid typing it each time. if(localsettings.opmode==3) { //replace all possible instances with placeholders @@ -9077,20 +9106,26 @@ Current version: 66 input = input.replaceAll(mynameregex, '{{userplaceholder}}'); input = input.replaceAll(mynameregex2, '{{userplaceholder}}'); input = input.replaceAll(mynameregex3, '{{userplaceholder}}'); - input = input.replaceAll("{{userplaceholder}}", '{{userplaceholder}}

'+localsettings.chatname+'

'); - - input = input.replaceAll(othernamesregex, function(match) { - return "{{botplaceholder}}

" + match.substring(0,match.length-2).trim() + "

"; - }); - input = input.replaceAll(othernamesregex2, function(match) { - return "{{botplaceholder}}

" + match.substring(0,match.length-2).trim() + "

"; - }); + if(as.show_chat_names) + { + input = input.replaceAll("{{userplaceholder}}", `{{userplaceholder}}

`+localsettings.chatname+`

`); + input = input.replaceAll(othernamesregex, function(match) { + return "{{botplaceholder}}

" + match.substring(0,match.length-2).trim() + "

"; + }); + input = input.replaceAll(othernamesregex2, function(match) { + return "{{botplaceholder}}

" + match.substring(0,match.length-2).trim() + "

"; + }); + } + else + { + input = input.replaceAll(othernamesregex, "{{botplaceholder}}"); + input = input.replaceAll(othernamesregex2, "{{botplaceholder}}"); + } you = "{{userplaceholder}}"; bot = "{{botplaceholder}}"; } - let as = aestheticInstructUISettings; // ..and use this as shortcut to avoid typing it each time. let portraitsStyling = // Also, implement portraits as css classes. Now chat entries can reuse them instead of recreating them. `