mirror of
https://github.com/KoboldAI/KoboldAI-Client.git
synced 2025-06-05 21:59:24 +02:00
Checkin
This commit is contained in:
ebolam
211
aiserver.py
211
aiserver.py
@@ -263,8 +263,10 @@ def sendModelSelection(menu="mainmenu", folder="./models"):
|
||||
else:
|
||||
showdelete=False
|
||||
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")
|
||||
else:
|
||||
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")
|
||||
|
||||
def get_folder_path_info(base):
|
||||
if base == 'This PC':
|
||||
@@ -333,7 +335,7 @@ def check_if_dir_is_model(path):
|
||||
if os.path.exists(path):
|
||||
try:
|
||||
from transformers import AutoConfig
|
||||
model_config = AutoConfig.from_pretrained(path, revision=koboldai_vars.revision, cache_dir="cache")
|
||||
model_config = AutoConfig.from_pretrained(path)
|
||||
except:
|
||||
return False
|
||||
return True
|
||||
@@ -1034,12 +1036,18 @@ def get_model_info(model, directory=""):
|
||||
break_values = break_values.split(",")
|
||||
else:
|
||||
break_values = [layer_count]
|
||||
break_values = [int(x) for x in break_values]
|
||||
break_values += [0] * (gpu_count - len(break_values))
|
||||
emit('from_server', {'cmd': 'selected_model_info', 'key_value': key_value, 'key':key,
|
||||
'gpu':gpu, 'layer_count':layer_count, 'breakmodel':breakmodel,
|
||||
'disk_break_value': disk_blocks, 'accelerate': utils.HAS_ACCELERATE,
|
||||
'break_values': break_values, 'gpu_count': gpu_count,
|
||||
'url': url, 'gpu_names': gpu_names}, broadcast=True, room="UI_1")
|
||||
emit('selected_model_info', {'key_value': key_value, 'key':key,
|
||||
'gpu':gpu, 'layer_count':layer_count, 'breakmodel':breakmodel,
|
||||
'disk_break_value': disk_blocks, 'disk_break': not utils.HAS_ACCELERATE,
|
||||
'break_values': break_values, 'gpu_count': gpu_count,
|
||||
'url': url, 'gpu_names': gpu_names}, broadcast=False, room="UI_2")
|
||||
if key_value != "":
|
||||
get_oai_models(key_value)
|
||||
|
||||
@@ -1047,18 +1055,16 @@ def get_model_info(model, directory=""):
|
||||
def get_layer_count(model, directory=""):
|
||||
if(model not in ["InferKit", "Colab", "OAI", "GooseAI" , "ReadOnly", "TPUMeshTransformerGPTJ"]):
|
||||
if(koboldai_vars.model == "GPT2Custom"):
|
||||
model_config = open(koboldai_vars.custmodpth + "/config.json", "r")
|
||||
model_config = open(directory + "/config.json", "r")
|
||||
# Get the model_type from the config or assume a model type if it isn't present
|
||||
else:
|
||||
from transformers import AutoConfig
|
||||
if directory == "":
|
||||
model_config = AutoConfig.from_pretrained(koboldai_vars.model, revision=koboldai_vars.revision, cache_dir="cache")
|
||||
elif(os.path.isdir(koboldai_vars.custmodpth.replace('/', '_'))):
|
||||
model_config = AutoConfig.from_pretrained(koboldai_vars.custmodpth.replace('/', '_'), revision=koboldai_vars.revision, cache_dir="cache")
|
||||
elif(os.path.isdir(directory)):
|
||||
model_config = AutoConfig.from_pretrained(directory, revision=koboldai_vars.revision, cache_dir="cache")
|
||||
model_config = AutoConfig.from_pretrained(model, cache_dir="cache")
|
||||
elif os.path.isdir(directory):
|
||||
model_config = AutoConfig.from_pretrained(directory, cache_dir="cache")
|
||||
else:
|
||||
model_config = AutoConfig.from_pretrained(koboldai_vars.custmodpth, revision=koboldai_vars.revision, cache_dir="cache")
|
||||
assert "Selected Model directory doesn't exist"
|
||||
|
||||
|
||||
|
||||
@@ -5821,8 +5827,177 @@ def new_ui_index():
|
||||
def ui2_connect():
|
||||
#Send all variables to client
|
||||
koboldai_vars.send_to_ui()
|
||||
|
||||
pass
|
||||
|
||||
#==================================================================#
|
||||
# File Popup options
|
||||
#==================================================================#
|
||||
@app.route("/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)
|
||||
return "ok"
|
||||
|
||||
@socketio.on('popup_change_folder')
|
||||
def popup_change_folder(data):
|
||||
print("Doing popup change folder: {}".format(data))
|
||||
if 'popup_jailed_dir' not in session:
|
||||
print("Someone is trying to get at files in your server. Blocked.")
|
||||
return
|
||||
if session['popup_jailed_dir'] is None:
|
||||
get_files_folders(data)
|
||||
elif session['popup_jailed_dir'] in data:
|
||||
get_files_folders(data)
|
||||
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))
|
||||
|
||||
@socketio.on('popup_delete')
|
||||
def popup_delete(data):
|
||||
if 'popup_deletable' not in session:
|
||||
print("Someone is trying to delete a file in your server. Blocked.")
|
||||
return
|
||||
if not session['popup_deletable']:
|
||||
print("Someone is trying to delete a file in your server. Blocked.")
|
||||
return
|
||||
|
||||
if session['popup_jailed_dir'] is None:
|
||||
import shutil
|
||||
if os.path.isdir(data):
|
||||
shutil.rmtree(data)
|
||||
else:
|
||||
os.remove(data)
|
||||
path = os.path.abspath(data).replace("\\", "/")
|
||||
if path[-1] == "/":
|
||||
path = path[:-1]
|
||||
path = "/".join(path.split("/")[:-1])
|
||||
get_files_folders(path)
|
||||
elif session['popup_jailed_dir'] in data:
|
||||
import shutil
|
||||
if os.path.isdir(data):
|
||||
shutil.rmtree(data)
|
||||
else:
|
||||
os.remove(data)
|
||||
path = os.path.abspath(data).replace("\\", "/")
|
||||
if path[-1] == "/":
|
||||
path = path[:-1]
|
||||
path = "/".join(path.split("/")[:-1])
|
||||
get_files_folders(path)
|
||||
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))
|
||||
|
||||
@socketio.on('popup_edit')
|
||||
def popup_edit(data):
|
||||
if 'popup_editable' not in session:
|
||||
print("Someone is trying to edit a file in your server. Blocked.")
|
||||
return
|
||||
if not session['popup_editable']:
|
||||
print("Someone is trying to edit a file in your server. Blocked.")
|
||||
return
|
||||
|
||||
if session['popup_jailed_dir'] is None:
|
||||
emit("popup_edit_file", {"file": data, "text": open(data, 'r').read()});
|
||||
elif session['popup_jailed_dir'] in data:
|
||||
emit("popup_edit_file", {"file": data, "text": open(data, 'r').read()});
|
||||
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))
|
||||
|
||||
@socketio.on('popup_change_file')
|
||||
def popup_change_file(data):
|
||||
if 'popup_editable' not in session:
|
||||
print("Someone is trying to edit a file in your server. Blocked.")
|
||||
return
|
||||
if not session['popup_editable']:
|
||||
print("Someone is trying to edit a file in your server. Blocked.")
|
||||
return
|
||||
|
||||
if session['popup_jailed_dir'] is None:
|
||||
with open(data['file'], 'w') as f:
|
||||
f.write(data['data'])
|
||||
elif session['popup_jailed_dir'] in data['file']:
|
||||
with open(data['file'], 'w') as f:
|
||||
f.write(data['data'])
|
||||
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))
|
||||
|
||||
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):
|
||||
#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
|
||||
#jailed = if set to true will look for the session variable jailed_folder and prevent navigation outside of that folder
|
||||
#folder_only = will only show folders, no files
|
||||
#deletable = will show the delete icons/methods.
|
||||
#editable = will show the edit icons/methods
|
||||
#show_breadcrumbs = will show the breadcrumbs at the top of the screen
|
||||
#item_check will call this function to check if the item is valid as a selection if not none. Will pass absolute directory as only argument to function
|
||||
#show_hidden = ... really, you have to ask?
|
||||
if jailed:
|
||||
session['popup_jailed_dir'] = os.path.abspath(starting_folder).replace("\\", "/")
|
||||
else:
|
||||
session['popup_jailed_dir'] = None
|
||||
session['popup_deletable'] = deleteable
|
||||
session['popup_editable'] = editable
|
||||
session['popup_show_hidden'] = show_hidden
|
||||
session['popup_item_check'] = item_check
|
||||
session['popup_folder_only'] = folder_only
|
||||
session['popup_show_breadcrumbs'] = show_breadcrumbs
|
||||
|
||||
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, "deleteable": deleteable, "editable": editable}, broadcast=True, room="UI_1")
|
||||
|
||||
get_files_folders(starting_folder)
|
||||
|
||||
|
||||
def get_files_folders(starting_folder):
|
||||
import stat
|
||||
item_check = session['popup_item_check']
|
||||
show_breadcrumbs = session['popup_show_breadcrumbs']
|
||||
show_hidden = session['popup_show_hidden']
|
||||
folder_only = session['popup_folder_only']
|
||||
|
||||
if starting_folder == 'This PC':
|
||||
breadcrumbs = [['This PC', 'This PC']]
|
||||
items = [["{}:/".format(chr(i)), "{}:\\".format(chr(i))] for i in range(65, 91) if os.path.exists("{}:".format(chr(i)))]
|
||||
else:
|
||||
path = os.path.abspath(starting_folder).replace("\\", "/")
|
||||
if path[-1] == "/":
|
||||
path = path[:-1]
|
||||
breadcrumbs = []
|
||||
for i in range(len(path.split("/"))):
|
||||
breadcrumbs.append(["/".join(path.split("/")[:i+1]),
|
||||
path.split("/")[i]])
|
||||
if len(breadcrumbs) == 1:
|
||||
breadcrumbs = [["{}:/".format(chr(i)), "{}:\\".format(chr(i))] for i in range(65, 91) if os.path.exists("{}:".format(chr(i)))]
|
||||
else:
|
||||
if len([["{}:/".format(chr(i)), "{}:\\".format(chr(i))] for i in range(65, 91) if os.path.exists("{}:".format(chr(i)))]) > 0:
|
||||
breadcrumbs.insert(0, ['This PC', 'This PC'])
|
||||
folders = []
|
||||
files = []
|
||||
base_path = os.path.abspath(starting_folder).replace("\\", "/")
|
||||
for item in os.listdir(base_path):
|
||||
item_full_path = os.path.join(base_path, item).replace("\\", "/")
|
||||
if hasattr(os.stat(item_full_path), "st_file_attributes"):
|
||||
hidden = bool(os.stat(item_full_path).st_file_attributes & stat.FILE_ATTRIBUTE_HIDDEN)
|
||||
else:
|
||||
hidden = item[0] == "."
|
||||
if item_check is None:
|
||||
valid_selection = True
|
||||
else:
|
||||
valid_selection = item_check(item_full_path)
|
||||
|
||||
if (show_hidden and hidden) or not hidden:
|
||||
if os.path.isdir(os.path.join(base_path, item)):
|
||||
folders.append([True, item_full_path, item, valid_selection])
|
||||
else:
|
||||
files.append([False, item_full_path, item, valid_selection])
|
||||
items = folders
|
||||
if not folder_only:
|
||||
items += files
|
||||
|
||||
socketio.emit("popup_items", items, broadcast=True, include_self=True, room="UI_2")
|
||||
socketio.emit("popup_items", items, broadcast=True, include_self=True, room="UI_1")
|
||||
if show_breadcrumbs:
|
||||
socketio.emit("popup_breadcrumbs", breadcrumbs, broadcast=True, room="UI_2")
|
||||
socketio.emit("popup_breadcrumbs", breadcrumbs, broadcast=True, room="UI_1")
|
||||
|
||||
#==================================================================#
|
||||
# Event triggered when browser SocketIO detects a variable change
|
||||
#==================================================================#
|
||||
@@ -5914,6 +6089,26 @@ def UI_2_retry(data):
|
||||
koboldai_vars.recentrng = koboldai_vars.recentrngm = None
|
||||
actionsubmit("", actionmode=koboldai_vars.actionmode)
|
||||
|
||||
#==================================================================#
|
||||
# Event triggered when user clicks the load model button
|
||||
#==================================================================#
|
||||
@socketio.on('load_model_button')
|
||||
def UI_2_load_model_button(data):
|
||||
sendModelSelection()
|
||||
|
||||
#==================================================================#
|
||||
# Event triggered when user clicks the a model
|
||||
#==================================================================#
|
||||
@socketio.on('select_model')
|
||||
def UI_2_load_model_button(data):
|
||||
if data['model'] in model_menu:
|
||||
sendModelSelection(menu=data['model'])
|
||||
else:
|
||||
#We now have some model we want to potentially load.
|
||||
#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'])
|
||||
|
||||
#==================================================================#
|
||||
# Event triggered to rely a message
|
||||
#==================================================================#
|
||||
|
||||
@@ -21,6 +21,8 @@
|
||||
--enabled_button_text: #fff;
|
||||
--enabled_button_background_color: #337ab7;
|
||||
--enabled_button_border_color: #2e6da4;
|
||||
--popup_title_bar_color: #337AB7;
|
||||
--popup_item_color: #262626;
|
||||
--disabled_button_text: #303030;
|
||||
--disabled_button_background_color: #686c68;
|
||||
--disabled_button_border_color: #686c68;
|
||||
@@ -543,6 +545,161 @@ td.sequence:hover {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
/*---------------------------------- Popup -------------------------------------------------*/
|
||||
.popup {
|
||||
position: absolute;
|
||||
top: 10vh;
|
||||
left: 10%;
|
||||
z-index: 999;
|
||||
width: 80%;
|
||||
height: 80vh;
|
||||
background-color: black;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.popup .title {
|
||||
width: 100%;
|
||||
background-color: var(--popup_title_bar_color);
|
||||
text-align: center;
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
.popup .popup_list_area {
|
||||
height: 70vh;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.popup .item {
|
||||
width: 100%;
|
||||
background-color: var(--popup_item_color);
|
||||
padding: 2px;
|
||||
display: grid;
|
||||
grid-template-areas: "folder_icon delete_icon edit_icon file";
|
||||
grid-template-columns: 20px 20px 20px auto;
|
||||
|
||||
}
|
||||
|
||||
.popup .item .folder_icon {
|
||||
grid-area: folder_icon;
|
||||
}
|
||||
|
||||
.popup .item .edit_icon {
|
||||
grid-area: edit_icon;
|
||||
}
|
||||
|
||||
.popup .item .delete_icon {
|
||||
grid-area: delete_icon;
|
||||
}
|
||||
|
||||
.popup .item .file {
|
||||
grid-area: file;
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.popup .item .file:hover {
|
||||
background-color: #688f1f;
|
||||
}
|
||||
|
||||
.popup .popup_load_cancel {
|
||||
text-align: center;
|
||||
background-color: var(--popup_title_bar_color);
|
||||
}
|
||||
|
||||
.popup_load_cancel_button {
|
||||
vertical-align: bottom;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
.breadcrumbitem {
|
||||
padding: 5px 10px 5px 10px;
|
||||
color: #ffffff;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
-moz-transition: background-color 0.25s ease-in;
|
||||
-o-transition: background-color 0.25s ease-in;
|
||||
-webkit-transition: background-color 0.25s ease-in;
|
||||
transition: background-color 0.25s ease-in;
|
||||
}
|
||||
|
||||
.breadcrumbitem:hover {
|
||||
cursor: pointer;
|
||||
background-color: #688f1f;
|
||||
}
|
||||
/*----------------------------- Model Load Popup ------------------------------------------*/
|
||||
|
||||
.popup .item .model {
|
||||
grid-area: file;
|
||||
display: grid;
|
||||
grid-template-areas: "item gpu_size";
|
||||
grid-template-columns: auto 40px;
|
||||
}
|
||||
|
||||
.popup .item .model:hover {
|
||||
background-color: #688f1f;
|
||||
}
|
||||
|
||||
.popup .item .model.selected {
|
||||
background-color: #688f1f;
|
||||
}
|
||||
|
||||
.model_setting_container {
|
||||
display: grid;
|
||||
grid-template-areas: "label label"
|
||||
"item item"
|
||||
"minlabel maxlabel";
|
||||
grid-template-rows: 20px 25px 10px;
|
||||
grid-template-columns: auto 40px;
|
||||
row-gap: 0.2em;
|
||||
border: 1px;
|
||||
margin: 2px;
|
||||
}
|
||||
|
||||
.model_setting_minlabel {
|
||||
grid-area: minlabel;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.model_setting_maxlabel {
|
||||
grid-area: maxlabel;
|
||||
overflow: hidden;
|
||||
text-align: right;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.model_setting_label {
|
||||
grid-area: label;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.model_setting_value {
|
||||
text-align: left;
|
||||
grid-area: label;
|
||||
background-color: inherit;
|
||||
color: inherit;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.model_setting_value:focus {
|
||||
color: var(--text_edit);
|
||||
}
|
||||
|
||||
.model_setting_item {
|
||||
grid-area: item;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.model_setting_item_input {
|
||||
width:95%;
|
||||
}
|
||||
|
||||
/*---------------------------------- Global ------------------------------------------------*/
|
||||
.hidden {
|
||||
display: none;
|
||||
@@ -573,7 +730,7 @@ input {
|
||||
}
|
||||
|
||||
|
||||
.action_button.disabled {
|
||||
button.disabled {
|
||||
color: var(--disabled_button_text);
|
||||
background-color: var(--disabled_button_background_color);
|
||||
border-color: var(--disabled_button_border_color);
|
||||
@@ -595,4 +752,8 @@ input {
|
||||
|
||||
.rawtext {
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.text_red {
|
||||
color: red;
|
||||
}
|
||||
@@ -8,11 +8,19 @@ socket.on("disconnect", (reason, details) => {
|
||||
});
|
||||
socket.on('reset_story', function(){reset_story();});
|
||||
socket.on('var_changed', function(data){var_changed(data);});
|
||||
socket.on('load_popup', function(data){load_popup(data);});
|
||||
socket.on('popup_items', function(data){popup_items(data);});
|
||||
socket.on('popup_breadcrumbs', function(data){popup_breadcrumbs(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('selected_model_info', function(data){selected_model_info(data);});
|
||||
//socket.onAny(function(event_name, data) {console.log({"event": event_name, "class": data.classname, "data": data});});
|
||||
|
||||
var backend_vars = {};
|
||||
var presets = {}
|
||||
var ai_busy_start = Date.now();
|
||||
var popup_deleteable = false;
|
||||
var popup_editable = false;
|
||||
//-----------------------------------Server to UI Functions-----------------------------------------------
|
||||
function connect() {
|
||||
console.log("connected");
|
||||
@@ -276,9 +284,465 @@ function var_changed(data) {
|
||||
}
|
||||
}
|
||||
|
||||
function load_popup(data) {
|
||||
popup_deleteable = data.deleteable;
|
||||
popup_editable = data.editable;
|
||||
var popup = document.getElementById("popup");
|
||||
var popup_title = document.getElementById("popup_title");
|
||||
popup_title.textContent = data.popup_title;
|
||||
var popup_list = document.getElementById("popup_list");
|
||||
//first, let's clear out our existing data
|
||||
while (popup_list.firstChild) {
|
||||
popup_list.removeChild(popup_list.firstChild);
|
||||
}
|
||||
var breadcrumbs = document.getElementById('popup_breadcrumbs');
|
||||
while (breadcrumbs.firstChild) {
|
||||
breadcrumbs.removeChild(breadcrumbs.firstChild);
|
||||
}
|
||||
|
||||
popup.classList.remove("hidden");
|
||||
|
||||
//adjust accept button
|
||||
var accept = document.getElementById("popup_accept");
|
||||
accept.classList.add("disabled");
|
||||
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");
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
function popup_items(data) {
|
||||
var popup_list = document.getElementById('popup_list');
|
||||
//first, let's clear out our existing data
|
||||
while (popup_list.firstChild) {
|
||||
popup_list.removeChild(popup_list.firstChild);
|
||||
}
|
||||
|
||||
for (item of data) {
|
||||
var list_item = document.createElement("span");
|
||||
list_item.classList.add("item");
|
||||
|
||||
//create the folder icon
|
||||
var folder_icon = document.createElement("span");
|
||||
folder_icon.classList.add("folder_icon");
|
||||
if (item[0]) {
|
||||
folder_icon.classList.add("oi");
|
||||
folder_icon.setAttribute('data-glyph', "folder");
|
||||
}
|
||||
list_item.append(folder_icon);
|
||||
|
||||
//create the edit icon
|
||||
var edit_icon = document.createElement("span");
|
||||
edit_icon.classList.add("edit_icon");
|
||||
if ((popup_editable) && !(item[0])) {
|
||||
edit_icon.classList.add("oi");
|
||||
edit_icon.setAttribute('data-glyph', "pencil");
|
||||
edit_icon.id = item[1];
|
||||
edit_icon.onclick = function () {
|
||||
socket.emit("popup_edit", this.id);
|
||||
};
|
||||
}
|
||||
list_item.append(edit_icon);
|
||||
|
||||
//create the delete icon
|
||||
var delete_icon = document.createElement("span");
|
||||
delete_icon.classList.add("delete_icon");
|
||||
if (popup_deleteable) {
|
||||
delete_icon.classList.add("oi");
|
||||
delete_icon.setAttribute('data-glyph', "x");
|
||||
delete_icon.id = item[1];
|
||||
delete_icon.setAttribute("folder", item[0]);
|
||||
delete_icon.onclick = function () {
|
||||
if (this.getAttribute("folder") == "true") {
|
||||
if (window.confirm("Do you really want to delete this folder and ALL files under it?")) {
|
||||
socket.emit("popup_delete", this.id);
|
||||
}
|
||||
} else {
|
||||
if (window.confirm("Do you really want to delete this file?")) {
|
||||
socket.emit("popup_delete", this.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
list_item.append(delete_icon);
|
||||
|
||||
//create the actual item
|
||||
var popup_item = document.createElement("span");
|
||||
popup_item.classList.add("file");
|
||||
popup_item.id = item[1];
|
||||
popup_item.setAttribute("folder", item[0]);
|
||||
popup_item.setAttribute("valid", item[3]);
|
||||
popup_item.textContent = item[2];
|
||||
popup_item.onclick = function () {
|
||||
var accept = document.getElementById("popup_accept");
|
||||
if (this.getAttribute("valid") == "true") {
|
||||
accept.classList.remove("disabled");
|
||||
accept.setAttribute("selected_value", this.id);
|
||||
} else {
|
||||
console.log("not valid");
|
||||
accept.setAttribute("selected_value", "");
|
||||
accept.classList.add("disabled");
|
||||
if (this.getAttribute("folder") == "true") {
|
||||
console.log("folder");
|
||||
socket.emit("popup_change_folder", this.id);
|
||||
}
|
||||
}
|
||||
};
|
||||
list_item.append(popup_item);
|
||||
|
||||
|
||||
popup_list.append(list_item);
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
function popup_breadcrumbs(data) {
|
||||
var breadcrumbs = document.getElementById('popup_breadcrumbs')
|
||||
while (breadcrumbs.firstChild) {
|
||||
breadcrumbs.removeChild(breadcrumbs.firstChild);
|
||||
}
|
||||
|
||||
for (item of data) {
|
||||
var button = document.createElement("button");
|
||||
button.id = item[0];
|
||||
button.textContent = item[1];
|
||||
button.classList.add("breadcrumbitem");
|
||||
button.onclick = function () {
|
||||
socket.emit("popup_change_folder", this.id);
|
||||
};
|
||||
breadcrumbs.append(button);
|
||||
var span = document.createElement("span");
|
||||
span.textContent = "\\";
|
||||
breadcrumbs.append(span);
|
||||
}
|
||||
}
|
||||
|
||||
function popup_edit_file(data) {
|
||||
var popup_list = document.getElementById('popup_list');
|
||||
//first, let's clear out our existing data
|
||||
while (popup_list.firstChild) {
|
||||
popup_list.removeChild(popup_list.firstChild);
|
||||
}
|
||||
var accept = document.getElementById("popup_accept");
|
||||
accept.setAttribute("selected_value", "");
|
||||
accept.onclick = function () {
|
||||
var textarea = document.getElementById("filecontents");
|
||||
socket.emit("popup_change_file", {"file": textarea.getAttribute("filename"), "data": textarea.value});
|
||||
document.getElementById("popup").classList.add("hidden");
|
||||
};
|
||||
|
||||
var textarea = document.createElement("textarea");
|
||||
textarea.classList.add("fullwidth");
|
||||
textarea.rows = 25;
|
||||
textarea.id = "filecontents"
|
||||
textarea.setAttribute("filename", data.file);
|
||||
textarea.value = data.text;
|
||||
textarea.onblur = function () {
|
||||
var accept = document.getElementById("popup_accept");
|
||||
accept.classList.remove("disabled");
|
||||
};
|
||||
popup_list.append(textarea);
|
||||
|
||||
}
|
||||
//--------------------------------------------UI to Server Functions----------------------------------
|
||||
|
||||
function show_model_menu(data) {
|
||||
document.getElementById("loadmodelcontainer").classList.remove("hidden");
|
||||
|
||||
//clear old options
|
||||
document.getElementById("modelkey").classList.add("hidden");
|
||||
document.getElementById("modelkey").value = "";
|
||||
document.getElementById("modelurl").classList.add("hidden");
|
||||
document.getElementById("use_gpu_div").classList.add("hidden");
|
||||
document.getElementById("modellayers").classList.add("hidden");
|
||||
var model_layer_bars = document.getElementById('model_layer_bars');
|
||||
while (model_layer_bars.firstChild) {
|
||||
model_layer_bars.removeChild(model_layer_bars.firstChild);
|
||||
}
|
||||
|
||||
//clear out the breadcrumbs
|
||||
var breadcrumbs = document.getElementById('loadmodellistbreadcrumbs')
|
||||
while (breadcrumbs.firstChild) {
|
||||
breadcrumbs.removeChild(breadcrumbs.firstChild);
|
||||
}
|
||||
//add breadcrumbs
|
||||
for (item of data.breadcrumbs) {
|
||||
var button = document.createElement("button");
|
||||
button.classList.add("breadcrumbitem");
|
||||
button.id = item[0];
|
||||
button.value = item[1];
|
||||
button.onclick = function () {
|
||||
socket.emit('selectmodel', {'data': this.id, 'folder': this.value});
|
||||
};
|
||||
breadcrumbs.append(button);
|
||||
var span = document.createElement("span");
|
||||
span.textContent = "\\";
|
||||
breadcrumbs.append(span);
|
||||
}
|
||||
|
||||
//clear out the items
|
||||
var model_list = document.getElementById('loadmodellistcontent')
|
||||
while (model_list.firstChild) {
|
||||
model_list.removeChild(model_list.firstChild);
|
||||
}
|
||||
//add items
|
||||
for (item of data.data) {
|
||||
var list_item = document.createElement("span");
|
||||
list_item.classList.add("item");
|
||||
|
||||
//create the folder icon
|
||||
var folder_icon = document.createElement("span");
|
||||
folder_icon.classList.add("folder_icon");
|
||||
if (item[3]) {
|
||||
folder_icon.classList.add("oi");
|
||||
folder_icon.setAttribute('data-glyph', "folder");
|
||||
}
|
||||
list_item.append(folder_icon);
|
||||
|
||||
//create the delete icon
|
||||
//var delete_icon = document.createElement("span");
|
||||
//delete_icon.classList.add("delete_icon");
|
||||
//if (popup_deleteable) {
|
||||
// delete_icon.classList.add("oi");
|
||||
// delete_icon.setAttribute('data-glyph', "x");
|
||||
// delete_icon.id = item[1];
|
||||
// delete_icon.setAttribute("folder", item[0]);
|
||||
// delete_icon.onclick = function () {
|
||||
// if (this.getAttribute("folder") == "true") {
|
||||
// if (window.confirm("Do you really want to delete this folder and ALL files under it?")) {
|
||||
// socket.emit("popup_delete", this.id);
|
||||
// }
|
||||
// } else {
|
||||
// if (window.confirm("Do you really want to delete this file?")) {
|
||||
// socket.emit("popup_delete", this.id);
|
||||
// }
|
||||
// }
|
||||
// };
|
||||
//}
|
||||
//list_item.append(delete_icon);
|
||||
|
||||
//create the actual item
|
||||
var popup_item = document.createElement("span");
|
||||
popup_item.classList.add("model");
|
||||
popup_item.id = item[1];
|
||||
popup_item.setAttribute("Menu", data.menu)
|
||||
//name text
|
||||
var text = document.createElement("span");
|
||||
text.style="grid-area: item;";
|
||||
text.textContent = item[0];
|
||||
popup_item.append(text);
|
||||
//model size text
|
||||
var text = document.createElement("span");
|
||||
text.textContent = item[2];
|
||||
text.style="grid-area: gpu_size;padding: 2px;";
|
||||
popup_item.append(text);
|
||||
|
||||
popup_item.onclick = function () {
|
||||
var accept = document.getElementById("popup_accept");
|
||||
accept.classList.add("disabled");
|
||||
socket.emit("select_model", {"model": this.id, "menu": this.getAttribute("Menu")});
|
||||
var model_list = document.getElementById('loadmodellistcontent').getElementsByClassName("selected");
|
||||
for (model of model_list) {
|
||||
model.classList.remove("selected");
|
||||
}
|
||||
this.classList.add("selected");
|
||||
};
|
||||
list_item.append(popup_item);
|
||||
|
||||
|
||||
model_list.append(list_item);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function selected_model_info(data) {
|
||||
var accept = document.getElementById("btn_loadmodelaccept");
|
||||
//hide or unhide key
|
||||
if (data.key) {
|
||||
document.getElementById("modelkey").classList.remove("hidden");
|
||||
document.getElementById("modelkey").value = data.key_value;
|
||||
} else {
|
||||
document.getElementById("modelkey").classList.add("hidden");
|
||||
document.getElementById("modelkey").value = "";
|
||||
}
|
||||
//hide or unhide URL
|
||||
if (data.url) {
|
||||
document.getElementById("modelurl").classList.remove("hidden");
|
||||
} else {
|
||||
document.getElementById("modelurl").classList.add("hidden");
|
||||
}
|
||||
//hide or unhide the use gpu checkbox
|
||||
if (data.gpu) {
|
||||
document.getElementById("use_gpu_div").classList.remove("hidden");
|
||||
} else {
|
||||
document.getElementById("use_gpu_div").classList.add("hidden");
|
||||
}
|
||||
//setup breakmodel
|
||||
if (data.breakmodel) {
|
||||
document.getElementById("modellayers").classList.remove("hidden");
|
||||
//setup model layer count
|
||||
console.log(data.break_values.reduce((a, b) => a + b, 0));
|
||||
document.getElementById("gpu_layers_current").textContent = data.break_values.reduce((a, b) => a + b, 0);
|
||||
document.getElementById("gpu_layers_max").textContent = data.layer_count;
|
||||
document.getElementById("gpu_count").value = data.gpu_count;
|
||||
|
||||
//create the gpu load bars
|
||||
var model_layer_bars = document.getElementById('model_layer_bars');
|
||||
while (model_layer_bars.firstChild) {
|
||||
model_layer_bars.removeChild(model_layer_bars.firstChild);
|
||||
}
|
||||
|
||||
//Add the bars
|
||||
for (let i = 0; i < data.gpu_names.length; i++) {
|
||||
var div = document.createElement("div");
|
||||
div.classList.add("model_setting_container");
|
||||
//build GPU text
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("model_setting_label");
|
||||
span.textContent = "GPU " + i + " " + data.gpu_names[i] + ": "
|
||||
//build layer count box
|
||||
var input = document.createElement("input");
|
||||
input.classList.add("model_setting_value");
|
||||
input.classList.add("setting_value");
|
||||
input.inputmode = "numeric";
|
||||
input.id = "gpu_layers_box_"+i;
|
||||
input.value = data.break_values[i];
|
||||
input.onblur = function () {
|
||||
document.getElementById(this.id.replace("_box", "")).value = this.value;
|
||||
update_gpu_layers();
|
||||
}
|
||||
span.append(input);
|
||||
div.append(span);
|
||||
//build layer count slider
|
||||
var input = document.createElement("input");
|
||||
input.classList.add("model_setting_item");
|
||||
input.type = "range";
|
||||
input.min = 0;
|
||||
input.max = data.layer_count;
|
||||
input.step = 1;
|
||||
input.value = data.break_values[i];
|
||||
input.id = "gpu_layers_" + i;
|
||||
input.onchange = function () {
|
||||
document.getElementById(this.id.replace("gpu_layers", "gpu_layers_box")).value = this.value;
|
||||
update_gpu_layers();
|
||||
}
|
||||
div.append(input);
|
||||
//build slider bar #s
|
||||
//min
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("model_setting_minlabel");
|
||||
var span2 = document.createElement("span");
|
||||
span2.style="top: -4px; position: relative;";
|
||||
span2.textContent = 0;
|
||||
span.append(span2);
|
||||
div.append(span);
|
||||
//max
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("model_setting_maxlabel");
|
||||
var span2 = document.createElement("span");
|
||||
span2.style="top: -4px; position: relative;";
|
||||
span2.textContent = data.layer_count;
|
||||
span.append(span2);
|
||||
div.append(span);
|
||||
|
||||
model_layer_bars.append(div);
|
||||
}
|
||||
|
||||
//add the disk layers
|
||||
var div = document.createElement("div");
|
||||
div.classList.add("model_setting_container");
|
||||
//build GPU text
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("model_setting_label");
|
||||
span.textContent = "Disk cache: "
|
||||
//build layer count box
|
||||
var input = document.createElement("input");
|
||||
input.classList.add("model_setting_value");
|
||||
input.classList.add("setting_value");
|
||||
input.inputmode = "numeric";
|
||||
input.id = "disk_layers_box";
|
||||
input.value = data.disk_break_value;
|
||||
input.onblur = function () {
|
||||
document.getElementById(this.id.replace("_box", "")).value = this.value;
|
||||
update_gpu_layers();
|
||||
}
|
||||
span.append(input);
|
||||
div.append(span);
|
||||
//build layer count slider
|
||||
var input = document.createElement("input");
|
||||
input.classList.add("model_setting_item");
|
||||
input.type = "range";
|
||||
input.min = 0;
|
||||
input.max = data.layer_count;
|
||||
input.step = 1;
|
||||
input.value = data.disk_break_value;
|
||||
input.id = "disk_layers";
|
||||
input.onchange = function () {
|
||||
document.getElementById(this.id+"_box").value = this.value;
|
||||
update_gpu_layers();
|
||||
}
|
||||
div.append(input);
|
||||
//build slider bar #s
|
||||
//min
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("model_setting_minlabel");
|
||||
var span2 = document.createElement("span");
|
||||
span2.style="top: -4px; position: relative;";
|
||||
span2.textContent = 0;
|
||||
span.append(span2);
|
||||
div.append(span);
|
||||
//max
|
||||
var span = document.createElement("span");
|
||||
span.classList.add("model_setting_maxlabel");
|
||||
var span2 = document.createElement("span");
|
||||
span2.style="top: -4px; position: relative;";
|
||||
span2.textContent = data.layer_count;
|
||||
span.append(span2);
|
||||
div.append(span);
|
||||
|
||||
model_layer_bars.append(div);
|
||||
|
||||
update_gpu_layers();
|
||||
} else {
|
||||
document.getElementById("modellayers").classList.add("hidden");
|
||||
accept.classList.remove("disabled");
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
function update_gpu_layers() {
|
||||
var gpu_layers
|
||||
gpu_layers = 0;
|
||||
for (let i=0; i < document.getElementById("gpu_count").value; i++) {
|
||||
gpu_layers += parseInt(document.getElementById("gpu_layers_"+i).value);
|
||||
}
|
||||
if (document.getElementById("disk_layers")) {
|
||||
gpu_layers += parseInt(document.getElementById("disk_layers").value);
|
||||
}
|
||||
if (gpu_layers > parseInt(document.getElementById("gpu_layers_max").textContent)) {
|
||||
document.getElementById("gpu_layers_current").textContent = gpu_layers;
|
||||
document.getElementById("gpu_layers_current").classList.add("text_red");
|
||||
var accept = document.getElementById("btn_loadmodelaccept");
|
||||
accept.classList.add("disabled");
|
||||
} else {
|
||||
var accept = document.getElementById("btn_loadmodelaccept");
|
||||
accept.classList.remove("disabled");
|
||||
document.getElementById("gpu_layers_current").textContent = gpu_layers;
|
||||
document.getElementById("gpu_layers_current").classList.remove("text_red");
|
||||
}
|
||||
}
|
||||
|
||||
function load_model() {
|
||||
message = {'cmd': 'load_model', 'use_gpu': $('#use_gpu')[0].checked,
|
||||
'key': $('#modelkey')[0].value, 'gpu_layers': gpu_layers.slice(0, -1),
|
||||
'disk_layers': disk_layers, 'url': $('#modelurl')[0].value,
|
||||
'online_model': $('#oaimodel')[0].value};
|
||||
}
|
||||
//--------------------------------------------General UI Functions------------------------------------
|
||||
String.prototype.toHHMMSS = function () {
|
||||
var sec_num = parseInt(this, 10); // don't forget the second param
|
||||
|
||||
@@ -61,5 +61,53 @@
|
||||
<div id="rightSideMenu" class="rightSideMenu">
|
||||
{% include 'story flyout.html' %}
|
||||
</div>
|
||||
|
||||
<!------------- Pop-Up ------------------------------->
|
||||
<div class="popup hidden" id="popup">
|
||||
<div class="title" id="popup_title">
|
||||
Popup Title
|
||||
</div>
|
||||
<div id="popup_breadcrumbs"></div>
|
||||
<div class="popup_list_area" id="popup_list"></div>
|
||||
<div class="popup_load_cancel">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!---------------- Model Load Screen ---------------------->
|
||||
<div class="popup hidden" id="loadmodelcontainer">
|
||||
<div class="title">
|
||||
Select A Model To Load
|
||||
</div>
|
||||
<div id="loadmodellistbreadcrumbs">
|
||||
|
||||
</div>
|
||||
<div id="loadmodellistcontent" class="popup_list_area"></div>
|
||||
<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});">
|
||||
<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="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 class="hidden" id=modellayers>
|
||||
<div class="justifyleft">
|
||||
GPU/Disk Layers
|
||||
<span class="helpicon">?
|
||||
<span class="helptext">Number of layers to assign to GPUs and to disk cache. Remaining layers will be put into CPU RAM.</span>
|
||||
</span>
|
||||
</div>
|
||||
<div class="justifyright"><span id="gpu_layers_current">0</span>/<span id="gpu_layers_max">0</span></div>
|
||||
<div id=model_layer_bars style="color: white"></div>
|
||||
<input type=hidden id='gpu_count' value=0/>
|
||||
</div>
|
||||
<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>
|
||||
<button type="button" class="btn popup_load_cancel_button disabled" onclick="load_model()" id="btn_loadmodelaccept">Load</button>
|
||||
<button type="button" class="btn popup_load_cancel_button" onclick='document.getElementById("loadmodelcontainer").classList.add("hidden");' id="btn_loadmodelclose">Cancel</button>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -33,7 +33,7 @@
|
||||
<div id="setting_menu_model" class="settings_category_area">
|
||||
<div id="Model_Info">
|
||||
<div>Running Model: <span class="var_sync_model_model">ReadOnly</span></div>
|
||||
<div><button class="btn action_button">Load Model</button></div>
|
||||
<div><button class="btn action_button" onclick="socket.emit('load_model_button', {});">Load Model</button></div>
|
||||
</div>
|
||||
{% with menu='Model' %}
|
||||
{% include 'settings item.html' %}
|
||||
|
||||
Reference in New Issue
Block a user