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

Merge pull request #139 from ebolam/Web-UI

Browse Source 
UI changes with AI Selection in Web
This commit is contained in:
henk717
2022-06-07 20:33:46 +02:00
committed by GitHub
parent 9bf4db2a7c 6fd2496d94
commit 2333c85f4e
3 changed files with 1590 additions and 1166 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2476
aiserver.py
View File

File diff suppressed because it is too large Load Diff

206
static/application.js
View File

@@ -7,6 +7,7 @@ var socket;
// UI references for jQuery
var connect_status;
var button_loadmodel;
var button_newgame;
var button_rndgame;
var button_save;
@@ -55,6 +56,7 @@ var savepins;
var topic;
var saveas_accept;
var saveas_close;
var loadmodelpopup;
var loadpopup;
var loadcontent;
var load_accept;
@@ -98,6 +100,7 @@ var remote = false;
var gamestate = "";
var gamesaved = true;
var modelname = null;
var model = "";
// This is true iff [we're in macOS and the browser is Safari] or [we're in iOS]
var using_webkit_patch = true;
@@ -943,6 +946,17 @@ function sendSaveAsRequest() {
socket.send({'cmd': 'saveasrequest', 'data': {"name": saveasinput.val(), "pins": savepins.val()}});
}
function showLoadModelPopup() {
loadmodelpopup.removeClass("hidden");
loadmodelpopup.addClass("flex");
}
function hideLoadModelPopup() {
loadmodelpopup.removeClass("flex");
loadmodelpopup.addClass("hidden");
loadmodelcontent.html("");
}
function showLoadPopup() {
loadpopup.removeClass("hidden");
loadpopup.addClass("flex");
@@ -976,6 +990,58 @@ function hideUSPopup() {
spcontent.html("");
}
function buildLoadModelList(ar, menu) {
disableButtons([load_model_accept]);
loadmodelcontent.html("");
var i;
for(i=0; i<ar.length; i++) {
var html
html = "<div class=\"flex\">\
<div class=\"loadlistpadding\"></div>"
if(ar[i][3]) {
html = html + "<span class=\"loadlisticon loadmodellisticon-folder oi oi-folder allowed\" aria-hidden=\"true\"></span>"
} else {
html = html + "<div class=\"loadlistpadding\"></div>"
}
html = html + "<div class=\"loadlistpadding\"></div>\
<div class=\"loadlistitem\" id=\"loadmodel"+i+"\" name=\""+ar[i][1]+"\" pretty_name=\""+ar[i][0]+"\">\
<div>"+ar[i][0]+"</div>\
<div class=\"flex-push-right\">"+ar[i][2]+"</div>\
</div>\
</div>"
loadmodelcontent.append(html);
//If this is a menu
if(ar[i][3]) {
$("#loadmodel"+i).off("click").on("click", (function () {
return function () {
socket.send({'cmd': 'list_model', 'data': $(this).attr("name"), 'pretty_name': $(this).attr("pretty_name")});
disableButtons([load_model_accept]);
}
})(i));
//If we're in the custom load menu (we need to send the path data back in that case)
} else if(menu == 'custom') {
$("#loadmodel"+i).off("click").on("click", (function () {
return function () {
socket.send({'cmd': 'selectmodel', 'data': $(this).attr("name"), 'path': $(this).attr("pretty_name")});
highlightLoadLine($(this));
}
})(i));
//Normal load
} else {
$("#loadmodel"+i).off("click").on("click", (function () {
return function () {
$("#use_gpu_div").addClass("hidden");
$("#modelkey").addClass("hidden");
$("#modellayers").addClass("hidden");
socket.send({'cmd': 'selectmodel', 'data': $(this).attr("name")});
highlightLoadLine($(this));
}
})(i));
}
}
}
function buildLoadList(ar) {
disableButtons([load_accept]);
loadcontent.html("");
@@ -1111,6 +1177,7 @@ function buildUSList(unloaded, loaded) {
function highlightLoadLine(ref) {
$("#loadlistcontent > div > div.popuplistselected").removeClass("popuplistselected");
$("#loadmodellistcontent > div > div.popuplistselected").removeClass("popuplistselected");
ref.addClass("popuplistselected");
}
@@ -1814,6 +1881,29 @@ function unbindGametext() {
gametext_bound = false;
}
function update_gpu_layers() {
var gpu_layers
gpu_layers = 0;
for (let i=0; i < $("#gpu_count")[0].value; i++) {
gpu_layers += parseInt($("#gpu_layers"+i)[0].value);
}
if (gpu_layers > parseInt(document.getElementById("gpu_layers_max").innerHTML)) {
disableButtons([load_model_accept]);
$("#gpu_layers_current").html("<span style='color: red'>"+gpu_layers+"</span>");
} else {
enableButtons([load_model_accept]);
$("#gpu_layers_current").html(gpu_layers);
}
}
function RemoveAllButFirstOption(selectElement) {
var i, L = selectElement.options.length - 1;
for(i = L; i >= 1; i--) {
selectElement.remove(i);
}
}
//=================================================================//
// READY/RUNTIME
//=================================================================//
@@ -1822,6 +1912,8 @@ $(document).ready(function(){
// Bind UI references
connect_status = $('#connectstatus');
button_loadmodel = $('#btn_loadmodel');
button_showmodel = $('#btn_showmodel');
button_newgame = $('#btn_newgame');
button_rndgame = $('#btn_rndgame');
button_save = $('#btn_save');
@@ -1874,9 +1966,13 @@ $(document).ready(function(){
saveas_accept = $("#btn_saveasaccept");
saveas_close = $("#btn_saveasclose");
loadpopup = $("#loadcontainer");
loadmodelpopup = $("#loadmodelcontainer");
loadcontent = $("#loadlistcontent");
loadmodelcontent = $("#loadmodellistcontent");
load_accept = $("#btn_loadaccept");
load_close = $("#btn_loadclose");
load_model_accept = $("#btn_loadmodelaccept");
load_model_close = $("#btn_loadmodelclose");
sppopup = $("#spcontainer");
spcontent = $("#splistcontent");
sp_accept = $("#btn_spaccept");
@@ -1899,6 +1995,7 @@ $(document).ready(function(){
socket = io.connect(window.document.origin, {transports: ['polling', 'websocket'], closeOnBeforeunload: false});
socket.on('from_server', function(msg) {
//console.log(msg);
if(msg.cmd == "connected") {
// Connected to Server Actions
sman_allow_delete = msg.hasOwnProperty("smandelete") && msg.smandelete;
@@ -2374,6 +2471,84 @@ $(document).ready(function(){
} else {
debug_area.addClass("hidden");
}
} else if(msg.cmd == 'show_model_menu') {
$("#use_gpu_div").addClass("hidden");
$("#modelkey").addClass("hidden");
$("#modellayers").addClass("hidden");
$("#oaimodel").addClass("hidden")
buildLoadModelList(msg.data, msg.menu);
} else if(msg.cmd == 'selected_model_info') {
enableButtons([load_model_accept]);
$("#oaimodel").addClass("hidden")
$("#oaimodel")[0].options[0].selected = true;
if (msg.key) {
$("#modelkey").removeClass("hidden");
$("#modelkey")[0].value = msg.key_value;
} else {
$("#modelkey").addClass("hidden");
}
if (msg.url) {
$("#modelurl").removeClass("hidden");
} else {
$("#modelurl").addClass("hidden");
}
if (msg.gpu) {
$("#use_gpu_div").removeClass("hidden");
} else {
$("#use_gpu_div").addClass("hidden");
}
if (msg.breakmodel) {
var html;
$("#modellayers").removeClass("hidden");
html = "";
msg.break_values.forEach(function (item, index) {
html += "GPU " + index + ": <input type='range' class='form-range airange' min='0' max='"+msg.layer_count+"' step='1' value='"+item+"' id='gpu_layers"+index+"' onchange='update_gpu_layers();'>";
})
$("#model_layer_bars").html(html);
$("#gpu_layers_max").html(msg.layer_count);
$("#gpu_count")[0].value = msg.gpu_count;
update_gpu_layers();
} else {
$("#modellayers").addClass("hidden");
}
} else if(msg.cmd == 'oai_engines') {
$("#oaimodel").removeClass("hidden")
selected_item = 0;
length = $("#oaimodel")[0].options.length;
for (let i = 0; i < length; i++) {
$("#oaimodel")[0].options.remove(1);
}
msg.data.forEach(function (item, index) {
var option = document.createElement("option");
option.value = item[0];
option.text = item[1];
if(msg.online_model == item[0]) {
selected_item = index+1;
}
$("#oaimodel")[0].appendChild(option);
if(selected_item != "") {
$("#oaimodel")[0].options[selected_item].selected = true;
}
})
} else if(msg.cmd == 'show_model_name') {
$("#showmodelnamecontent").html("<div class=\"flex\"><div class=\"loadlistpadding\"></div><div class=\"loadlistitem\">" + msg.data + "</div></div>");
$("#showmodelnamecontainer").removeClass("hidden");
} else if(msg.cmd == 'hide_model_name') {
$("#showmodelnamecontainer").addClass("hidden");
//console.log("Closing window");
} else if(msg.cmd == 'model_load_status') {
$("#showmodelnamecontent").html("<div class=\"flex\"><div class=\"loadlistpadding\"></div><div class=\"loadlistitem\" style='align: left'>" + msg.data + "</div></div>");
$("#showmodelnamecontainer").removeClass("hidden");
//console.log(msg.data);
} else if(msg.cmd == 'oai_engines') {
RemoveAllButFirstOption($("#oaimodel")[0]);
for (const engine of msg.data) {
var opt = document.createElement('option');
opt.value = engine[0];
opt.innerHTML = engine[1];
$("#oaimodel")[0].appendChild(opt);
}
}
});
@@ -2588,12 +2763,35 @@ $(document).ready(function(){
hideLoadPopup();
});
load_model_close.on("click", function(ev) {
$("#modellayers").addClass("hidden");
hideLoadModelPopup();
});
load_accept.on("click", function(ev) {
hideMessage();
newly_loaded = true;
socket.send({'cmd': 'loadrequest', 'data': ''});
hideLoadPopup();
});
load_model_accept.on("click", function(ev) {
hideMessage();
var gpu_layers;
var message;
if($("#modellayers")[0].classList.contains('hidden')) {
gpu_layers = ","
} else {
gpu_layers = ""
for (let i=0; i < $("#gpu_count")[0].value; i++) {
gpu_layers += $("#gpu_layers"+i)[0].value + ",";
}
}
message = {'cmd': 'load_model', 'use_gpu': $('#use_gpu')[0].checked, 'key': $('#modelkey')[0].value, 'gpu_layers': gpu_layers.slice(0, -1), 'url': $('#modelurl')[0].value, 'online_model': $('#oaimodel')[0].value};
socket.send(message);
loadmodelcontent.html("");
hideLoadModelPopup();
});
sp_close.on("click", function(ev) {
hideSPPopup();
@@ -2617,6 +2815,14 @@ $(document).ready(function(){
hideUSPopup();
});
button_loadmodel.on("click", function(ev) {
showLoadModelPopup();
socket.send({'cmd': 'list_model', 'data': 'mainmenu'});
});
button_showmodel.on("click", function(ev) {
socket.send({'cmd': 'show_model', 'data': ''});
});
button_newgame.on("click", function(ev) {
if(connected) {
showNewStoryPopup();

74
templates/index.html
View File

@@ -33,6 +33,15 @@
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="nav navbar-nav">
{% if not hide_ai_menu %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">AI</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#" id="btn_loadmodel">Load Model</a>
<a class="dropdown-item" href="#" id="btn_showmodel">Model Info</a>
</div>
</li>
{% endif %}
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">New Game</a>
<div class="dropdown-menu">
@@ -265,6 +274,58 @@
</div>
</div>
</div>
<div class="popupcontainer hidden" id="loadmodelcontainer">
<div id="loadpopup">
<div class="popuptitlebar">
<div class="popuptitletext">Select A Model To Load</div>
</div>
<div class="loadmodellistheader">
<div>Model</div>
</div>
<div id="loadmodellistcontent" style="overflow: scroll; height: 300px;">
</div>
<div class="popupfooter">
<input class="form-control hidden" type="text" placeholder="key" id="modelkey" onblur="socket.send({'cmd': 'OAI_Key_Update', 'key': $('#modelkey')[0].value});">
<input class="form-control hidden" type="text" placeholder="Enter the URL of the server (For example a trycloudflare link)" id="modelurl" onchange="check_enable_model_load()">
</div>
<div class="popupfooter">
<select class="form-control hidden" id="oaimodel"><option value="">Select OAI Model</option></select>
</div>
<div class="popupfooter hidden" id=modellayers>
<div class='settingitem' style="width:100%">
<div class='settinglabel'>
<div class="justifyleft">
GPU Layers
<span class="helpicon">?
<span class="helptext">Number of layers to assign to the GPU</span>
</span>
</div>
<div class="justifyright" id="gpu_layers_current">0</div>
</div>
<div id=model_layer_bars style="color: white">
</div>
<input type=hidden id='gpu_count' value=0/>
<div class="settingminmax">
<div class="justifyleft">
0
</div>
<div class="justifyright" id="gpu_layers_max">
24
</div>
</div>
</div>
</div>
<div class="popupfooter">
<button type="button" class="btn btn-primary" id="btn_loadmodelaccept">Load</button>
<button type="button" class="btn btn-primary" id="btn_loadmodelclose">Cancel</button>
<div class="box flex-push-right hidden" id=use_gpu_div>
<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="use_gpu" checked>
<div class="box-label">Use GPU</div>
</div>
</div>
</div>
</div>
<div class="popupcontainer hidden" id="spcontainer">
<div id="sppopup">
<div class="popuptitlebar">
@@ -351,6 +412,19 @@
</div>
</div>
</div>
<div class="popupcontainer hidden" id="showmodelnamecontainer" style="center;">
<div>
<div class="popuptitlebar" style="width:50% center;">
<div class="popuptitletext">Model Info</div>
</div>
<div class="aidgpopuplistheader" id=showmodelnamecontent style="width:50% center;">
Read Only
</div>
<div class="popupfooter" style="width:50% center;">
<button type="button" class="btn btn-primary" onclick='$("#showmodelnamecontainer").addClass("hidden");'>OK</button>
</div>
</div>
</div>
<div class="popupcontainer hidden" id="rndgamecontainer">
<div id="rspopup">
<div class="popuptitlebar">