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

Model Loading functional

Browse Source 
Fix for mobile display
This commit is contained in:
ebolam
2022-07-01 08:09:10 -04:00
parent 16c5c580db
commit 9170aa7a4e
4 changed files with 323 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
aiserver.py
View File

@@ -257,13 +257,15 @@ def sendModelSelection(menu="mainmenu", folder="./models"):
if koboldai_vars.host: if koboldai_vars.host:
breadcrumbs = [] breadcrumbs = []
menu_list = [[folder, menu, "", False] for folder in paths] menu_list = [[folder, menu, "", False] for folder in paths]
menu_list_ui_2 = [[folder[0], folder[1], "", False] for folder in paths]
menu_list.append(["Return to Main Menu", "mainmenu", "", True]) menu_list.append(["Return to Main Menu", "mainmenu", "", True])
menu_list_ui_2.append(["Return to Main Menu", "mainmenu", "", True])
if os.path.abspath("{}/models".format(os.getcwd())) == os.path.abspath(folder): if os.path.abspath("{}/models".format(os.getcwd())) == os.path.abspath(folder):
showdelete=True showdelete=True
else: else:
showdelete=False showdelete=False
emit('from_server', {'cmd': 'show_model_menu', 'data': menu_list, 'menu': menu, 'breadcrumbs': breadcrumbs, "showdelete": showdelete}, broadcast=True, room="UI_1") emit('from_server', {'cmd': 'show_model_menu', 'data': menu_list, 'menu': menu, 'breadcrumbs': breadcrumbs, "showdelete": showdelete}, broadcast=True, room="UI_1")
emit('show_model_menu', {'data': menu_list, 'menu': menu, 'breadcrumbs': breadcrumbs, "showdelete": showdelete}, broadcast=False, room="UI_2") emit('show_model_menu', {'data': menu_list_ui_2, 'menu': menu, 'breadcrumbs': breadcrumbs, "showdelete": showdelete}, broadcast=False, room="UI_2")
else: else:
emit('from_server', {'cmd': 'show_model_menu', 'data': model_menu[menu], 'menu': menu, 'breadcrumbs': [], "showdelete": False}, broadcast=True, room="UI_1") emit('from_server', {'cmd': 'show_model_menu', 'data': model_menu[menu], 'menu': menu, 'breadcrumbs': [], "showdelete": False}, broadcast=True, room="UI_1")
emit('show_model_menu', {'data': model_menu[menu], 'menu': menu, 'breadcrumbs': [], "showdelete": False}, broadcast=False, room="UI_2") emit('show_model_menu', {'data': model_menu[menu], 'menu': menu, 'breadcrumbs': [], "showdelete": False}, broadcast=False, room="UI_2")
@@ -1010,6 +1012,8 @@ def get_model_info(model, directory=""):
key_value = js["apikey"] key_value = js["apikey"]
elif 'oaiapikey' in js and js['oaiapikey'] != "": elif 'oaiapikey' in js and js['oaiapikey'] != "":
key_value = js["oaiapikey"] key_value = js["oaiapikey"]
if model in ('GooseAI', 'OAI'):
get_oai_models({'model': model, 'key': key_value})
key = True key = True
elif model == 'ReadOnly': elif model == 'ReadOnly':
pass pass
@@ -1045,11 +1049,10 @@ def get_model_info(model, directory=""):
'url': url, 'gpu_names': gpu_names}, broadcast=True, room="UI_1") 'url': url, 'gpu_names': gpu_names}, broadcast=True, room="UI_1")
emit('selected_model_info', {'key_value': key_value, 'key':key, emit('selected_model_info', {'key_value': key_value, 'key':key,
'gpu':gpu, 'layer_count':layer_count, 'breakmodel':breakmodel, 'gpu':gpu, 'layer_count':layer_count, 'breakmodel':breakmodel,
'disk_break_value': disk_blocks, 'disk_break': not utils.HAS_ACCELERATE, 'disk_break_value': disk_blocks, 'disk_break': utils.HAS_ACCELERATE,
'break_values': break_values, 'gpu_count': gpu_count, 'break_values': break_values, 'gpu_count': gpu_count,
'url': url, 'gpu_names': gpu_names}, broadcast=False, room="UI_2") 'url': url, 'gpu_names': gpu_names}, broadcast=False, room="UI_2")
if key_value != "":
get_oai_models(key_value)
def get_layer_count(model, directory=""): def get_layer_count(model, directory=""):
@@ -1072,12 +1075,14 @@ def get_layer_count(model, directory=""):
else: else:
return None return None
@socketio.on('OAI_Key_Update')
def get_oai_models(key): def get_oai_models(data):
key = data['key']
model = data['model']
koboldai_vars.oaiapikey = key koboldai_vars.oaiapikey = key
if koboldai_vars.model == 'OAI': if model == 'OAI':
url = "https://api.openai.com/v1/engines" url = "https://api.openai.com/v1/engines"
elif koboldai_vars.model == 'GooseAI': elif model == 'GooseAI':
url = "https://api.goose.ai/v1/engines" url = "https://api.goose.ai/v1/engines"
else: else:
return return
@@ -1106,8 +1111,8 @@ def get_oai_models(key):
# If the client settings file doesn't exist, create it # If the client settings file doesn't exist, create it
# Write API key to file # Write API key to file
os.makedirs('settings', exist_ok=True) os.makedirs('settings', exist_ok=True)
if path.exists("settings/{}.settings".format(koboldai_vars.model)): if path.exists("settings/{}.settings".format(model)):
with open("settings/{}.settings".format(koboldai_vars.model), "r") as file: with open("settings/{}.settings".format(model), "r") as file:
js = json.load(file) js = json.load(file)
if 'online_model' in js: if 'online_model' in js:
online_model = js['online_model'] online_model = js['online_model']
@@ -1115,11 +1120,12 @@ def get_oai_models(key):
if js['apikey'] != key: if js['apikey'] != key:
changed=True changed=True
if changed: if changed:
with open("settings/{}.settings".format(koboldai_vars.model), "w") as file: with open("settings/{}.settings".format(model), "w") as file:
js["apikey"] = key js["apikey"] = key
file.write(json.dumps(js, indent=3), room="UI_1") file.write(json.dumps(js, indent=3), room="UI_1")
emit('from_server', {'cmd': 'oai_engines', 'data': engines, 'online_model': online_model}, broadcast=True) emit('from_server', {'cmd': 'oai_engines', 'data': engines, 'online_model': online_model}, broadcast=True, room="UI_1")
emit('oai_engines', {'data': engines, 'online_model': online_model}, room="UI_2")
else: else:
# Something went wrong, print the message and quit since we can't initialize an engine # Something went wrong, print the message and quit since we can't initialize an engine
print("{0}ERROR!{1}".format(colors.RED, colors.END), room="UI_1") print("{0}ERROR!{1}".format(colors.RED, colors.END), room="UI_1")
@@ -3205,7 +3211,7 @@ def get_message(msg):
else: else:
print(colors.RED + "WARNING!!: Someone maliciously attempted to delete " + msg['data'] + " the attempt has been blocked.") print(colors.RED + "WARNING!!: Someone maliciously attempted to delete " + msg['data'] + " the attempt has been blocked.")
elif(msg['cmd'] == 'OAI_Key_Update'): elif(msg['cmd'] == 'OAI_Key_Update'):
get_oai_models(msg['key']) get_oai_models({'model': koboldai_vars.model, 'key': msg['key']})
elif(msg['cmd'] == 'loadselect'): elif(msg['cmd'] == 'loadselect'):
koboldai_vars.loadselect = msg["data"] koboldai_vars.loadselect = msg["data"]
elif(msg['cmd'] == 'spselect'): elif(msg['cmd'] == 'spselect'):
@@ -5835,9 +5841,32 @@ def ui2_connect():
#==================================================================# #==================================================================#
@app.route("/popup_test") @app.route("/popup_test")
def popup_test(): def popup_test():
file_popup("Test Popup", "./", "return_event_name", folder_only=False, editable=True, deleteable=True, jailed=False, item_check=check_if_dir_is_model) file_popup("Test Popup", "./", "return_event_name", renameable=True, folder_only=False, editable=True, deleteable=True, jailed=False, item_check=check_if_dir_is_model)
return "ok" return "ok"
@socketio.on('upload_file')
def upload_file(data):
print("upload_file {}".format(data['filename']))
if 'current_folder' in session:
path = os.path.abspath(os.path.join(session['current_folder'], data['filename']).replace("\\", "/")).replace("\\", "/")
print("Want to save to {}".format(path))
if 'popup_jailed_dir' not in session:
print("Someone is trying to upload a file to your server. Blocked.")
elif session['popup_jailed_dir'] is None:
if os.path.exists(path):
emit("error_popup", "The file already exists. Please delete it or rename the file before uploading", room="UI_2");
else:
with open(path, "wb") as f:
f.write(data['data'])
get_files_folders(session['current_folder'])
elif session['popup_jailed_dir'] in session['current_folder']:
if os.path.exists(path):
emit("error_popup", "The file already exists. Please delete it or rename the file before uploading", room="UI_2");
else:
with open(path, "wb") as f:
f.write(data['data'])
get_files_folders(session['current_folder'])
@socketio.on('popup_change_folder') @socketio.on('popup_change_folder')
def popup_change_folder(data): def popup_change_folder(data):
print("Doing popup change folder: {}".format(data)) print("Doing popup change folder: {}".format(data))
@@ -5851,6 +5880,24 @@ def popup_change_folder(data):
else: else:
print("User is trying to get at files in your server outside the jail. Blocked. Jailed Dir: {} Requested Dir: {}".format(session['popup_jailed_dir'], data)) print("User is trying to get at files in your server outside the jail. Blocked. Jailed Dir: {} Requested Dir: {}".format(session['popup_jailed_dir'], data))
@socketio.on('popup_rename')
def popup_rename(data):
if 'popup_renameable' not in session:
print("Someone is trying to rename a file in your server. Blocked.")
return
if not session['popup_renameable']:
print("Someone is trying to rename a file in your server. Blocked.")
return
if session['popup_jailed_dir'] is None:
os.rename(data['file'], data['new_name'])
get_files_folders(os.path.dirname(data['file']))
elif session['popup_jailed_dir'] in data:
os.rename(data['file'], data['new_name'])
get_files_folders(os.path.dirname(data['file']))
else:
print("User is trying to rename files in your server outside the jail. Blocked. Jailed Dir: {} Requested Dir: {}".format(session['popup_jailed_dir'], data['file']))
@socketio.on('popup_delete') @socketio.on('popup_delete')
def popup_delete(data): def popup_delete(data):
if 'popup_deletable' not in session: if 'popup_deletable' not in session:
@@ -5919,7 +5966,7 @@ def popup_change_file(data):
else: else:
print("User is trying to delete files in your server outside the jail. Blocked. Jailed Dir: {} Requested Dir: {}".format(session['popup_jailed_dir'], data)) print("User is trying to delete files in your server outside the jail. Blocked. Jailed Dir: {} Requested Dir: {}".format(session['popup_jailed_dir'], data))
def file_popup(popup_title, starting_folder, return_event, jailed=True, folder_only=True, deleteable=False, editable=False, show_breadcrumbs=True, item_check=None, show_hidden=False): def file_popup(popup_title, starting_folder, return_event, upload=True, jailed=True, folder_only=True, renameable=False, deleteable=False, editable=False, show_breadcrumbs=True, item_check=None, show_hidden=False):
#starting_folder = The folder we're going to get folders and/or items from #starting_folder = The folder we're going to get folders and/or items from
#return_event = the socketio event that will be emitted when the load button is clicked #return_event = the socketio event that will be emitted when the load button is clicked
#jailed = if set to true will look for the session variable jailed_folder and prevent navigation outside of that folder #jailed = if set to true will look for the session variable jailed_folder and prevent navigation outside of that folder
@@ -5934,20 +5981,23 @@ def file_popup(popup_title, starting_folder, return_event, jailed=True, folder_o
else: else:
session['popup_jailed_dir'] = None session['popup_jailed_dir'] = None
session['popup_deletable'] = deleteable session['popup_deletable'] = deleteable
session['popup_renameable'] = renameable
session['popup_editable'] = editable session['popup_editable'] = editable
session['popup_show_hidden'] = show_hidden session['popup_show_hidden'] = show_hidden
session['popup_item_check'] = item_check session['popup_item_check'] = item_check
session['popup_folder_only'] = folder_only session['popup_folder_only'] = folder_only
session['popup_show_breadcrumbs'] = show_breadcrumbs session['popup_show_breadcrumbs'] = show_breadcrumbs
session['upload'] = upload
socketio.emit("load_popup", {"popup_title": popup_title, "call_back": return_event, "deleteable": deleteable, "editable": editable}, broadcast=True, room="UI_2") socketio.emit("load_popup", {"popup_title": popup_title, "call_back": return_event, "renameable": renameable, "deleteable": deleteable, "editable": editable, 'upload': upload}, broadcast=True, room="UI_2")
socketio.emit("load_popup", {"popup_title": popup_title, "call_back": return_event, "deleteable": deleteable, "editable": editable}, broadcast=True, room="UI_1") socketio.emit("load_popup", {"popup_title": popup_title, "call_back": return_event, "renameable": renameable, "deleteable": deleteable, "editable": editable, 'upload': upload}, broadcast=True, room="UI_1")
get_files_folders(starting_folder) get_files_folders(starting_folder)
def get_files_folders(starting_folder): def get_files_folders(starting_folder):
import stat import stat
session['current_folder'] = starting_folder
item_check = session['popup_item_check'] item_check = session['popup_item_check']
show_breadcrumbs = session['popup_show_breadcrumbs'] show_breadcrumbs = session['popup_show_breadcrumbs']
show_hidden = session['popup_show_hidden'] show_hidden = session['popup_show_hidden']
@@ -6101,14 +6151,51 @@ def UI_2_load_model_button(data):
#==================================================================# #==================================================================#
@socketio.on('select_model') @socketio.on('select_model')
def UI_2_load_model_button(data): def UI_2_load_model_button(data):
print(data)
#We've selected a menu
if data['model'] in model_menu: if data['model'] in model_menu:
sendModelSelection(menu=data['model']) sendModelSelection(menu=data['model'])
#We've selected a custom line
elif data['menu'] in ("NeoCustom", "GPT2Custom"):
get_model_info(data['menu'], directory=data['display_name'])
#We've selected a custom menu
elif data['model'] in ("NeoCustom", "GPT2Custom"):
sendModelSelection(menu=data['model'], folder="./models")
else: else:
#We now have some model we want to potentially load. #We now have some model we want to potentially load.
#First we need to send the client the model parameters (layers, etc) #First we need to send the client the model parameters (layers, etc)
print("getting model info for {}".format(data['model']))
get_model_info(data['model']) get_model_info(data['model'])
#==================================================================#
# Event triggered when user loads a model
#==================================================================#
@socketio.on('load_model')
def UI_2_load_model(data):
print(data)
if not os.path.exists("settings/"):
os.mkdir("settings")
changed = True
if not utils.HAS_ACCELERATE:
data['disk_layers'] = "0"
if os.path.exists("settings/" + data['model'].replace('/', '_') + ".breakmodel"):
with open("settings/" + data['model'].replace('/', '_') + ".breakmodel", "r") as file:
file_data = file.read().split('\n')[:2]
if len(file_data) < 2:
file_data.append("0")
gpu_layers, disk_layers = file_data
if gpu_layers == data['gpu_layers'] and disk_layers == data['disk_layers']:
changed = False
if changed:
f = open("settings/" + data['model'].replace('/', '_') + ".breakmodel", "w")
f.write(data['gpu_layers'] + '\n' + data['disk_layers'])
f.close()
koboldai_vars.colaburl = data['url'] + "/request"
koboldai_vars.model = data['model']
koboldai_vars.custmodpth = data['path']
print("loading Model")
load_model(use_gpu=data['use_gpu'], gpu_layers=data['gpu_layers'], disk_layers=data['disk_layers'], online_model=data['online_model'])
#==================================================================# #==================================================================#
# Event triggered to rely a message # Event triggered to rely a message
#==================================================================# #==================================================================#

19
static/koboldai.css
View File

@@ -203,6 +203,12 @@
cursor: pointer; cursor: pointer;
} }
@media only screen and (max-width: 768px) {
.menu_pin {
display: hidden;
}
}
@media only screen and not (max-width: 768px) {
.menu_pin { .menu_pin {
position: fixed; position: fixed;
top:10px; top:10px;
@@ -215,6 +221,7 @@
transition: left 0.5s; transition: left 0.5s;
cursor: pointer; cursor: pointer;
} }
}
.menu_pin.hidden { .menu_pin.hidden {
left: 0px; left: 0px;
@@ -236,6 +243,7 @@
transition: 0.5s; transition: 0.5s;
} }
@media only screen and not (max-width: 768px) {
.SideMenu.pinned { .SideMenu.pinned {
height: 100%; height: 100%;
width: var(--flyout_menu_width); width: var(--flyout_menu_width);
@@ -247,6 +255,7 @@
overflow-x: hidden; overflow-x: hidden;
transition: 0.5s; transition: 0.5s;
} }
}
.SideMenu.open { .SideMenu.open {
width: var(--flyout_menu_width); width: var(--flyout_menu_width);
@@ -366,9 +375,11 @@ body {
grid-template-rows: auto 100px; grid-template-rows: auto 100px;
} }
@media only screen and not (max-width: 768px) {
.main-grid.pinned { .main-grid.pinned {
margin-left: var(--flyout_menu_width); margin-left: var(--flyout_menu_width);
} }
}
/* ---------------------------------- GAME SCREEN ----------------------------------*/ /* ---------------------------------- GAME SCREEN ----------------------------------*/
.gamescreen { .gamescreen {
@@ -577,8 +588,8 @@ td.sequence:hover {
background-color: var(--popup_item_color); background-color: var(--popup_item_color);
padding: 2px; padding: 2px;
display: grid; display: grid;
grid-template-areas: "folder_icon delete_icon edit_icon file"; grid-template-areas: "folder_icon delete_icon edit_icon rename_icon file";
grid-template-columns: 20px 20px 20px auto; grid-template-columns: 20px 20px 20px 20px auto;
} }
@@ -590,6 +601,10 @@ td.sequence:hover {
grid-area: edit_icon; grid-area: edit_icon;
} }
.popup .item .rename_icon {
grid-area: rename_icon;
}
.popup .item .delete_icon { .popup .item .delete_icon {
grid-area: delete_icon; grid-area: delete_icon;
} }

256
static/koboldai.js
View File

@@ -14,6 +14,8 @@ socket.on('popup_breadcrumbs', function(data){popup_breadcrumbs(data);});
socket.on('popup_edit_file', function(data){popup_edit_file(data);}); socket.on('popup_edit_file', function(data){popup_edit_file(data);});
socket.on('show_model_menu', function(data){show_model_menu(data);}); socket.on('show_model_menu', function(data){show_model_menu(data);});
socket.on('selected_model_info', function(data){selected_model_info(data);}); socket.on('selected_model_info', function(data){selected_model_info(data);});
socket.on('oai_engines', function(data){oai_engines(data);});
socket.on('error_popup', function(data){error_popup(data);});
//socket.onAny(function(event_name, data) {console.log({"event": event_name, "class": data.classname, "data": data});}); //socket.onAny(function(event_name, data) {console.log({"event": event_name, "class": data.classname, "data": data});});
var backend_vars = {}; var backend_vars = {};
@@ -21,6 +23,7 @@ var presets = {}
var ai_busy_start = Date.now(); var ai_busy_start = Date.now();
var popup_deleteable = false; var popup_deleteable = false;
var popup_editable = false; var popup_editable = false;
var popup_renameable = false;
//-----------------------------------Server to UI Functions----------------------------------------------- //-----------------------------------Server to UI Functions-----------------------------------------------
function connect() { function connect() {
console.log("connected"); console.log("connected");
@@ -287,6 +290,7 @@ function var_changed(data) {
function load_popup(data) { function load_popup(data) {
popup_deleteable = data.deleteable; popup_deleteable = data.deleteable;
popup_editable = data.editable; popup_editable = data.editable;
popup_renameable = data.renameable;
var popup = document.getElementById("popup"); var popup = document.getElementById("popup");
var popup_title = document.getElementById("popup_title"); var popup_title = document.getElementById("popup_title");
popup_title.textContent = data.popup_title; popup_title.textContent = data.popup_title;
@@ -300,17 +304,47 @@ function load_popup(data) {
breadcrumbs.removeChild(breadcrumbs.firstChild); breadcrumbs.removeChild(breadcrumbs.firstChild);
} }
if (data.upload) {
const dropArea = document.getElementById('popup_list');
dropArea.addEventListener('dragover', (event) => {
event.stopPropagation();
event.preventDefault();
// Style the drag-and-drop as a "copy file" operation.
event.dataTransfer.dropEffect = 'copy';
});
dropArea.addEventListener('drop', (event) => {
event.stopPropagation();
event.preventDefault();
const fileList = event.dataTransfer.files;
for (file of fileList) {
reader = new FileReader();
reader.onload = function (event) {
socket.emit("upload_file", {'filename': file.name, "data": event.target.result});
};
reader.readAsArrayBuffer(file);
}
});
} else {
}
popup.classList.remove("hidden"); popup.classList.remove("hidden");
//adjust accept button //adjust accept button
var accept = document.getElementById("popup_accept"); if (data.call_back == "") {
accept.classList.add("disabled"); document.getElementById("popup_load_cancel").classList.add("hidden");
accept.setAttribute("emit", data.call_back); } else {
accept.setAttribute("selected_value", ""); document.getElementById("popup_load_cancel").classList.remove("hidden");
accept.onclick = function () { var accept = document.getElementById("popup_accept");
socket.emit(this.emit, this.getAttribute("selected_value")); accept.classList.add("disabled");
document.getElementById("popup").classList.add("hidden"); accept.setAttribute("emit", data.call_back);
}; accept.setAttribute("selected_value", "");
accept.onclick = function () {
socket.emit(this.emit, this.getAttribute("selected_value"));
document.getElementById("popup").classList.add("hidden");
};
}
} }
@@ -320,6 +354,7 @@ function popup_items(data) {
while (popup_list.firstChild) { while (popup_list.firstChild) {
popup_list.removeChild(popup_list.firstChild); popup_list.removeChild(popup_list.firstChild);
} }
document.getElementById('popup_upload_input').value = "";
for (item of data) { for (item of data) {
var list_item = document.createElement("span"); var list_item = document.createElement("span");
@@ -339,7 +374,8 @@ function popup_items(data) {
edit_icon.classList.add("edit_icon"); edit_icon.classList.add("edit_icon");
if ((popup_editable) && !(item[0])) { if ((popup_editable) && !(item[0])) {
edit_icon.classList.add("oi"); edit_icon.classList.add("oi");
edit_icon.setAttribute('data-glyph', "pencil"); edit_icon.setAttribute('data-glyph', "spreadsheet");
edit_icon.title = "Edit"
edit_icon.id = item[1]; edit_icon.id = item[1];
edit_icon.onclick = function () { edit_icon.onclick = function () {
socket.emit("popup_edit", this.id); socket.emit("popup_edit", this.id);
@@ -347,12 +383,31 @@ function popup_items(data) {
} }
list_item.append(edit_icon); list_item.append(edit_icon);
//create the rename icon
var rename_icon = document.createElement("span");
rename_icon.classList.add("rename_icon");
if ((popup_renameable) && !(item[0])) {
rename_icon.classList.add("oi");
rename_icon.setAttribute('data-glyph', "pencil");
rename_icon.title = "Rename"
rename_icon.id = item[1];
rename_icon.setAttribute("filename", item[2]);
rename_icon.onclick = function () {
var new_name = prompt("Please enter new filename for \n"+ this.getAttribute("filename"));
if (new_name != null) {
socket.emit("popup_rename", {"file": this.id, "new_name": new_name});
}
};
}
list_item.append(rename_icon);
//create the delete icon //create the delete icon
var delete_icon = document.createElement("span"); var delete_icon = document.createElement("span");
delete_icon.classList.add("delete_icon"); delete_icon.classList.add("delete_icon");
if (popup_deleteable) { if (popup_deleteable) {
delete_icon.classList.add("oi"); delete_icon.classList.add("oi");
delete_icon.setAttribute('data-glyph', "x"); delete_icon.setAttribute('data-glyph', "x");
delete_icon.title = "Delete"
delete_icon.id = item[1]; delete_icon.id = item[1];
delete_icon.setAttribute("folder", item[0]); delete_icon.setAttribute("folder", item[0]);
delete_icon.onclick = function () { delete_icon.onclick = function () {
@@ -448,7 +503,30 @@ function popup_edit_file(data) {
popup_list.append(textarea); popup_list.append(textarea);
} }
//--------------------------------------------UI to Server Functions----------------------------------
function error_popup(data) {
alert(data);
}
function oai_engines(data) {
console.log(data);
var oaimodel = document.getElementById("oaimodel")
oaimodel.classList.remove("hidden")
selected_item = 0;
length = oaimodel.options.length;
for (let i = 0; i < length; i++) {
oaimodel.options.remove(1);
}
for (item of data.data) {
var option = document.createElement("option");
option.value = item[0];
option.text = item[1];
if(data.online_model == item[0]) {
option.selected = true;
}
oaimodel.appendChild(option);
}
}
function show_model_menu(data) { function show_model_menu(data) {
document.getElementById("loadmodelcontainer").classList.remove("hidden"); document.getElementById("loadmodelcontainer").classList.remove("hidden");
@@ -528,7 +606,9 @@ function show_model_menu(data) {
//create the actual item //create the actual item
var popup_item = document.createElement("span"); var popup_item = document.createElement("span");
popup_item.classList.add("model"); popup_item.classList.add("model");
popup_item.setAttribute("display_name", item[0]);
popup_item.id = item[1]; popup_item.id = item[1];
popup_item.setAttribute("Menu", data.menu) popup_item.setAttribute("Menu", data.menu)
//name text //name text
var text = document.createElement("span"); var text = document.createElement("span");
@@ -542,14 +622,17 @@ function show_model_menu(data) {
popup_item.append(text); popup_item.append(text);
popup_item.onclick = function () { popup_item.onclick = function () {
var accept = document.getElementById("popup_accept"); var accept = document.getElementById("btn_loadmodelaccept");
accept.classList.add("disabled"); accept.classList.add("disabled");
socket.emit("select_model", {"model": this.id, "menu": this.getAttribute("Menu")}); socket.emit("select_model", {"model": this.id, "menu": this.getAttribute("Menu"), "display_name": this.getAttribute("display_name")});
var model_list = document.getElementById('loadmodellistcontent').getElementsByClassName("selected"); var model_list = document.getElementById('loadmodellistcontent').getElementsByClassName("selected");
for (model of model_list) { for (model of model_list) {
model.classList.remove("selected"); model.classList.remove("selected");
} }
this.classList.add("selected"); this.classList.add("selected");
accept.setAttribute("selected_model", this.id);
accept.setAttribute("menu", this.getAttribute("Menu"));
accept.setAttribute("display_name", this.getAttribute("display_name"));
}; };
list_item.append(popup_item); list_item.append(popup_item);
@@ -560,6 +643,7 @@ function show_model_menu(data) {
} }
function selected_model_info(data) { function selected_model_info(data) {
console.log(data);
var accept = document.getElementById("btn_loadmodelaccept"); var accept = document.getElementById("btn_loadmodelaccept");
//hide or unhide key //hide or unhide key
if (data.key) { if (data.key) {
@@ -653,56 +737,58 @@ function selected_model_info(data) {
} }
//add the disk layers //add the disk layers
var div = document.createElement("div"); if (data.disk_break) {
div.classList.add("model_setting_container"); var div = document.createElement("div");
//build GPU text div.classList.add("model_setting_container");
var span = document.createElement("span"); //build GPU text
span.classList.add("model_setting_label"); var span = document.createElement("span");
span.textContent = "Disk cache: " span.classList.add("model_setting_label");
//build layer count box span.textContent = "Disk cache: "
var input = document.createElement("input"); //build layer count box
input.classList.add("model_setting_value"); var input = document.createElement("input");
input.classList.add("setting_value"); input.classList.add("model_setting_value");
input.inputmode = "numeric"; input.classList.add("setting_value");
input.id = "disk_layers_box"; input.inputmode = "numeric";
input.value = data.disk_break_value; input.id = "disk_layers_box";
input.onblur = function () { input.value = data.disk_break_value;
document.getElementById(this.id.replace("_box", "")).value = this.value; input.onblur = function () {
update_gpu_layers(); document.getElementById(this.id.replace("_box", "")).value = this.value;
} update_gpu_layers();
span.append(input); }
div.append(span); span.append(input);
//build layer count slider div.append(span);
var input = document.createElement("input"); //build layer count slider
input.classList.add("model_setting_item"); var input = document.createElement("input");
input.type = "range"; input.classList.add("model_setting_item");
input.min = 0; input.type = "range";
input.max = data.layer_count; input.min = 0;
input.step = 1; input.max = data.layer_count;
input.value = data.disk_break_value; input.step = 1;
input.id = "disk_layers"; input.value = data.disk_break_value;
input.onchange = function () { input.id = "disk_layers";
document.getElementById(this.id+"_box").value = this.value; input.onchange = function () {
update_gpu_layers(); document.getElementById(this.id+"_box").value = this.value;
} update_gpu_layers();
div.append(input); }
//build slider bar #s div.append(input);
//min //build slider bar #s
var span = document.createElement("span"); //min
span.classList.add("model_setting_minlabel"); var span = document.createElement("span");
var span2 = document.createElement("span"); span.classList.add("model_setting_minlabel");
span2.style="top: -4px; position: relative;"; var span2 = document.createElement("span");
span2.textContent = 0; span2.style="top: -4px; position: relative;";
span.append(span2); span2.textContent = 0;
div.append(span); span.append(span2);
//max div.append(span);
var span = document.createElement("span"); //max
span.classList.add("model_setting_maxlabel"); var span = document.createElement("span");
var span2 = document.createElement("span"); span.classList.add("model_setting_maxlabel");
span2.style="top: -4px; position: relative;"; var span2 = document.createElement("span");
span2.textContent = data.layer_count; span2.style="top: -4px; position: relative;";
span.append(span2); span2.textContent = data.layer_count;
div.append(span); span.append(span2);
div.append(span);
}
model_layer_bars.append(div); model_layer_bars.append(div);
@@ -738,11 +824,49 @@ function update_gpu_layers() {
} }
function load_model() { function load_model() {
message = {'cmd': 'load_model', 'use_gpu': $('#use_gpu')[0].checked, var accept = document.getElementById('btn_loadmodelaccept');
'key': $('#modelkey')[0].value, 'gpu_layers': gpu_layers.slice(0, -1), gpu_layers = []
'disk_layers': disk_layers, 'url': $('#modelurl')[0].value, for (let i=0; i < document.getElementById("gpu_count").value; i++) {
'online_model': $('#oaimodel')[0].value}; gpu_layers.push(document.getElementById("gpu_layers_"+i).value);
}
if (document.getElementById("disk_layers")) {
disk_layers = document.getElementById("disk_layers").value;
} else {
disk_layers = "0";
}
//Need to do different stuff with custom models
if ((accept.getAttribute('menu') == 'GPT2Custom') || (accept.getAttribute('menu') == 'NeoCustom')) {
var model = document.getElementById("btn_loadmodelaccept").getAttribute("menu");
var path = document.getElementById("btn_loadmodelaccept").getAttribute("display_name");
} else {
var model = document.getElementById("btn_loadmodelaccept").getAttribute("selected_model");
var path = "";
}
message = {'model': model, 'path': path, 'use_gpu': document.getElementById("use_gpu").checked,
'key': document.getElementById('modelkey').value, 'gpu_layers': gpu_layers.join(),
'disk_layers': disk_layers, 'url': document.getElementById("modelurl").value,
'online_model': document.getElementById("oaimodel").value};
console.log(message);
socket.emit("load_model", message);
document.getElementById("loadmodelcontainer").classList.add("hidden");
} }
//--------------------------------------------UI to Server Functions----------------------------------
function upload_file(file_box) {
var fileList = file_box.files;
for (file of fileList) {
reader = new FileReader();
reader.onload = function (event) {
socket.emit("upload_file", {'filename': file.name, "data": event.target.result});
};
reader.readAsArrayBuffer(file);
}
}
//--------------------------------------------General UI Functions------------------------------------ //--------------------------------------------General UI Functions------------------------------------
String.prototype.toHHMMSS = function () { String.prototype.toHHMMSS = function () {
var sec_num = parseInt(this, 10); // don't forget the second param var sec_num = parseInt(this, 10); // don't forget the second param

16
templates/index_new.html
View File

@@ -69,7 +69,11 @@
</div> </div>
<div id="popup_breadcrumbs"></div> <div id="popup_breadcrumbs"></div>
<div class="popup_list_area" id="popup_list"></div> <div class="popup_list_area" id="popup_list"></div>
<div class="popup_load_cancel"> <div class="popup_load_cancel hidden" id="popup_upload">
<input type=file id="popup_upload_file">
</div>
<div>Drag file(s) above or click here to Upload File<input id="popup_upload_input" type=file onchange="upload_file(this)"></div>
<div class="popup_load_cancel" id="popup_load_cancel">
<button class="btn popup_load_cancel_button" id="popup_accept">Load</button> <button class="btn popup_load_cancel_button" id="popup_accept">Load</button>
<button class="btn popup_load_cancel_button" id="popup_cancel" onclick='document.getElementById("popup").classList.add("hidden");'>Cancel</button> <button class="btn popup_load_cancel_button" id="popup_cancel" onclick='document.getElementById("popup").classList.add("hidden");'>Cancel</button>
</div> </div>
@@ -85,10 +89,12 @@
</div> </div>
<div id="loadmodellistcontent" class="popup_list_area"></div> <div id="loadmodellistcontent" class="popup_list_area"></div>
<div class="popup_load_cancel"> <div class="popup_load_cancel">
<input class="hidden" type="text" placeholder="key" id="modelkey" onblur="socket.send({'cmd': 'OAI_Key_Update', 'key': $('#modelkey')[0].value});"> <div>
<input class="hidden" type="text" placeholder="Enter the URL of the server (For example a trycloudflare link)" id="modelurl" onchange="check_enable_model_load()"> <input class="hidden" type="text" placeholder="key" id="modelkey" onblur="socket.emit('OAI_Key_Update', {'model': document.getElementById('btn_loadmodelaccept').getAttribute('selected_model'), 'key': this.value});">
<input class="hidden" type="text" placeholder="Model Path or Hugging Face Name" id="custommodelname" menu="" onblur="socket.send({'cmd': 'selectmodel', 'data': $(this).attr('menu'), 'path_modelname': $('#custommodelname')[0].value});"> <input class="hidden" type="text" placeholder="Enter the URL of the server (For example a trycloudflare link)" id="modelurl" onchange="check_enable_model_load()">
<select class="hidden" id="oaimodel"><option value="">Select OAI Model</option></select> <input class="hidden" type="text" placeholder="Model Path or Hugging Face Name" id="custommodelname" menu="" onblur="socket.send({'cmd': 'selectmodel', 'data': $(this).attr('menu'), 'path_modelname': $('#custommodelname')[0].value});">
<select class="hidden" id="oaimodel"><option value="">Select OAI Model</option></select>
</div>
<div class="hidden" id=modellayers> <div class="hidden" id=modellayers>
<div class="justifyleft"> <div class="justifyleft">
GPU/Disk Layers GPU/Disk Layers