rixty/KoboldAI-Client
1
1
Fork 0
mirror of https://github.com/KoboldAI/KoboldAI-Client.git synced 2025-06-05 21:59:24 +02:00
Code Issues Projects Releases Wiki Activity

Auto-scroll on text chunk update

Browse Source
This commit is contained in:
ebolam
2022-07-14 19:08:28 -04:00
parent 8e0dd23810
commit 33cb49e7d6
2 changed files with 44 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
static/koboldai.js
View File

@@ -161,6 +161,7 @@ function do_story_text_updates(data) {
if (document.getElementById('Selected Text Chunk '+data.value.id)) {
document.getElementById('Selected Text Chunk '+data.value.id).textContent = data.value.text;
document.getElementById('Selected Text Chunk '+data.value.id).classList.remove("pulse")
scrollToView(document.getElementById('Selected Text Chunk '+data.value.id));
} else {
var span = document.createElement("span");
span.id = 'Selected Text Chunk '+data.value.id;
@@ -170,12 +171,16 @@ function do_story_text_updates(data) {
span.onblur = function () {
if (this.textContent != this.original_text) {
socket.emit("Set Selected Text", {"id": this.chunk, "text": this.textContent});
this.original_text = this.textContent;
this.classList.add("pulse");
}
}
span.onkeydown = detect_enter_text;
span.textContent = data.value.text;
story_area.append(span);
scrollToView(span);
}
}
@@ -325,7 +330,6 @@ function var_changed(data) {
if ((data.classname == "actions") && (data.name == "Action Count")) {
var option_container = document.getElementById("Select Options");
var current_chunk = parseInt(document.getElementById("action_count").textContent)+1;
console.log("Hide except for "+current_chunk);
var children = option_container.children;
for (var i = 0; i < children.length; i++) {
var chunk = children[i];
@@ -958,6 +962,25 @@ function upload_file(file_box) {
}
//--------------------------------------------General UI Functions------------------------------------
function scrollToView(element){
var offset = element.offset().top;
if(!element.is(":visible")) {
element.css({"visibility":"hidden"}).show();
var offset = element.offset().top;
element.css({"visibility":"", "display":""});
}
var visible_area_start = $(window).scrollTop();
var visible_area_end = visible_area_start + window.innerHeight;
if(offset < visible_area_start || offset > visible_area_end){
// Not in view so scroll to it
$('html,body').animate({scrollTop: offset - window.innerHeight/3}, 1000);
return false;
}
return true;
}
function update_token_lengths() {
max_token_length = parseInt(document.getElementById("model_max_length_cur").value);
if ((document.getElementById("memory").getAttribute("story_memory_length") == null) || (document.getElementById("memory").getAttribute("story_memory_length") == "")) {
@@ -1062,9 +1085,8 @@ function toggle_pin_flyout() {
}
}
function detect_enter(e) {
function detect_enter_submit(e) {
if (((e.code == "Enter") || (e.code == "NumpadEnter")) && !(shift_down)) {
console.log("submitting");
if (typeof e.stopPropagation != "undefined") {
e.stopPropagation();
} else {
@@ -1075,6 +1097,23 @@ function detect_enter(e) {
}
}
function detect_enter_text(e) {
if (((e.code == "Enter") || (e.code == "NumpadEnter")) && !(shift_down)) {
if (typeof e.stopPropagation != "undefined") {
e.stopPropagation();
} else {
e.cancelBubble = true;
}
//get element
console.log("Doing Text Enter");
console.log(e.currentTarget.activeElement);
if (e.currentTarget.activeElement != undefined) {
var item = $(e.currentTarget.activeElement);
item.onchange();
}
}
}
function detect_shift_down(e) {
if ((e.code == "ShiftLeft") || (e.code == "ShiftRight")) {
shift_down = true;
@@ -1090,5 +1129,5 @@ function detect_shift_up(e) {
$(document).ready(function(){
document.onkeydown = detect_shift_down;
document.onkeyup = detect_shift_up;
document.getElementById("input_text").onkeydown = detect_enter;
document.getElementById("input_text").onkeydown = detect_enter_submit;
});

2
templates/index_new.html
View File

@@ -34,7 +34,7 @@
<!------------ Game Text Screen--------------------->
<div class="gamescreen" id="gamescreen">
<div class="gametext">
<span id="story_prompt" class="var_sync_story_prompt var_sync_alt_story_prompt_length rawtext" contenteditable=true onchange="sync_to_server(this);"></span>
<span id="story_prompt" class="var_sync_story_prompt var_sync_alt_story_prompt_length rawtext" contenteditable=true onchange="sync_to_server(this);" onkeydown="detect_enter_text"></span>
<span id="Selected Text" class="rawtext"></span>
</div>
</div>