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

CSS change to move options to below game text for mobile

Browse Source
This commit is contained in:
ebolam
2022-07-05 14:11:05 -04:00
parent cc3ccb7f36
commit 796a1dcf16
7 changed files with 138 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
aiserver.py
View File

@@ -5978,9 +5978,9 @@ def popup_edit(data):
return return
if session['popup_jailed_dir'] is None: if session['popup_jailed_dir'] is None:
emit("popup_edit_file", {"file": data, "text": open(data, 'r').read()}); emit("popup_edit_file", {"file": data, "text": open(data, 'r', encoding='utf-8').read()});
elif session['popup_jailed_dir'] in data: elif session['popup_jailed_dir'] in data:
emit("popup_edit_file", {"file": data, "text": open(data, 'r').read()}); emit("popup_edit_file", {"file": data, "text": open(data, 'r', encoding='utf-8').read()});
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))
@@ -6036,7 +6036,6 @@ def file_popup(popup_title, starting_folder, return_event, upload=True, jailed=T
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 session['current_folder'] = starting_folder
@@ -6110,7 +6109,6 @@ def get_files_folders(starting_folder):
#==================================================================# #==================================================================#
@socketio.on('var_change') @socketio.on('var_change')
def UI_2_var_change(data): def UI_2_var_change(data):
print(data)
classname = data['ID'].split("_")[0] classname = data['ID'].split("_")[0]
name = data['ID'][len(classname)+1:] name = data['ID'][len(classname)+1:]
classname += "_settings" classname += "_settings"
@@ -6127,6 +6125,7 @@ def UI_2_var_change(data):
else: else:
print("Unknown Type {} = {}".format(name, type(getattr(koboldai_vars, name)))) print("Unknown Type {} = {}".format(name, type(getattr(koboldai_vars, name))))
print("Setting {} to {} as type {}".format(name, value, type(value)))
setattr(koboldai_vars, name, value) setattr(koboldai_vars, name, value)
#Now let's save except for story changes #Now let's save except for story changes
@@ -6293,30 +6292,19 @@ def UI_2_relay(data):
#==================================================================# #==================================================================#
# Test # Test
#==================================================================# #==================================================================#
def setup_context_for_thread():
pass
@bridged_kwarg()
def lua_print_threadid():
import threading
return threading.get_ident()
@app.route("/actions") @app.route("/actions")
def show_actions(): def show_actions():
return koboldai_vars.actions.actions return koboldai_vars.actions.actions
@app.route("/story") @app.route("/vars")
def show_story(): def show_vars():
return koboldai_vars.actions.to_json() json_data = {}
json_data['story_settings'] = json.loads(koboldai_vars.to_json("story_settings"))
@app.route("/story_list") json_data['model_settings'] = json.loads(koboldai_vars.to_json("model_settings"))
def show_story_list(): json_data['user_settings'] = json.loads(koboldai_vars.to_json("user_settings"))
return " ".join(koboldai_vars.story_list()) json_data['system_settings'] = json.loads(koboldai_vars.to_json("system_settings"))
return json_data
@app.route("/session")
def show_session():
print(dir(session))
return dict(session)
#==================================================================# #==================================================================#

24
gensettings.py
View File

@@ -232,9 +232,9 @@ gensettingstf = [
"step": 1, "step": 1,
"default": 0, "default": 0,
"tooltip": "Turn this on if you are playing a Choose your Adventure model.", "tooltip": "Turn this on if you are playing a Choose your Adventure model.",
"menu_path": "Story", #"menu_path": "Story",
"classname": "story", #"classname": "story",
"name": "adventure" #"name": "adventure"
}, },
{ {
"uitype": "toggle", "uitype": "toggle",
@@ -246,9 +246,9 @@ gensettingstf = [
"step": 1, "step": 1,
"default": 0, "default": 0,
"tooltip": "This mode optimizes KoboldAI for chatting.", "tooltip": "This mode optimizes KoboldAI for chatting.",
"menu_path": "Story", #"menu_path": "Story",
"classname": "story", #"classname": "story",
"name": "chatmode" #"name": "chatmode"
}, },
{ {
"uitype": "toggle", "uitype": "toggle",
@@ -461,9 +461,9 @@ gensettingsik =[{
"step": 1, "step": 1,
"default": 0, "default": 0,
"tooltip": "Turn this on if you are playing a Choose your Adventure model.", "tooltip": "Turn this on if you are playing a Choose your Adventure model.",
"menu_path": "Story", #"menu_path": "Story",
"classname": "story", #"classname": "story",
"name": "adventure" #"name": "adventure"
}, },
{ {
"uitype": "toggle", "uitype": "toggle",
@@ -475,9 +475,9 @@ gensettingsik =[{
"step": 1, "step": 1,
"default": 0, "default": 0,
"tooltip": "This mode optimizes KoboldAI for chatting.", "tooltip": "This mode optimizes KoboldAI for chatting.",
"menu_path": "Story", #"menu_path": "Story",
"classname": "story", #"classname": "story",
"name": "chatmode" #"name": "chatmode"
}, },
{ {
"uitype": "toggle", "uitype": "toggle",

37
koboldai_settings.py
View File

@@ -39,7 +39,7 @@ def process_variable_changes(socketio, classname, name, value, old_value, debug_
@sio.event @sio.event
def connect(): def connect():
pass pass
sio.connect('http://localhost:5000/?rely=true') sio.connect('ws://localhost:5000/?rely=true')
rely_clients[threading.get_ident()] = sio rely_clients[threading.get_ident()] = sio
#release no longer used clients #release no longer used clients
for thread in rely_clients: for thread in rely_clients:
@@ -60,10 +60,10 @@ class koboldai_vars(object):
def to_json(self, classname): def to_json(self, classname):
if classname == 'story_settings': if classname == 'story_settings':
if 'story' in self._sessions: #if 'story' in self._sessions:
return self._story_settings[self._sessions['story']].to_json() # return self._story_settings[self._sessions['story']].to_json()
else: #else:
return self._story_settings['default'].to_json() return self._story_settings['default'].to_json()
return self.__dict__["_{}".format(classname)].to_json() return self.__dict__["_{}".format(classname)].to_json()
def load_story(self, story_name, json_data): def load_story(self, story_name, json_data):
@@ -322,7 +322,7 @@ class story_settings(settings):
process_variable_changes(self.socketio, self.__class__.__name__.replace("_settings", ""), name, value, old_value) process_variable_changes(self.socketio, self.__class__.__name__.replace("_settings", ""), name, value, old_value)
#We want to automatically set gamesaved to false if something happens to the actions list (pins, redos, generations, text, etc) #We want to automatically set gamesaved to false if something happens to the actions list (pins, redos, generations, text, etc)
#To do that we need to give the actions list a copy of this data so it can set the gamesaved variable as needed #To do that we need to give the actions list a copy of this data so it can set the gamesaved variable as needed
if not new_variable: if not new_variable and old_value != value:
if name == 'actions': if name == 'actions':
self.actions.story_settings = self self.actions.story_settings = self
if self.tokenizer is not None: if self.tokenizer is not None:
@@ -336,6 +336,29 @@ class story_settings(settings):
self.memory_length = len(self.tokenizer.encode(self.memory)) self.memory_length = len(self.tokenizer.encode(self.memory))
elif name == 'prompt': elif name == 'prompt':
self.prompt_length = len(self.tokenizer.encode(self.prompt)) self.prompt_length = len(self.tokenizer.encode(self.prompt))
#Because we have seperate variables for action types, this syncs them
if name == 'actionmode':
if value == 0:
self.adventure = False
self.chatmode = False
elif value == 1:
self.adventure = True
self.chatmode = False
elif value == 2:
self.adventure = False
self.chatmode = True
elif name == 'adventure' and value == True:
self.chatmode = False
self.actionmode = 1
elif name == 'adventure' and value == False and self.chatmode == False:
self.actionmode = 0
elif name == 'chatmode' and value == True:
self.adventure = False
self.actionmode = 2
elif name == 'chatmode' and value == False and self.adventure == False:
self.actionmode = 0
class user_settings(settings): class user_settings(settings):
local_only_variables = ['socketio'] local_only_variables = ['socketio']
@@ -372,7 +395,7 @@ class user_settings(settings):
class system_settings(settings): class system_settings(settings):
local_only_variables = ['socketio', 'lua_state', 'lua_logname', 'lua_koboldbridge', 'lua_kobold', 'lua_koboldcore', 'regex_sl', 'acregex_ai', 'acregex_ui', 'comregex_ai', 'comregex_ui', 'sp'] local_only_variables = ['socketio', 'lua_state', 'lua_logname', 'lua_koboldbridge', 'lua_kobold', 'lua_koboldcore', 'regex_sl', 'acregex_ai', 'acregex_ui', 'comregex_ai', 'comregex_ui', 'sp']
no_save_variables = ['socketio'] no_save_variables = ['socketio', 'lua_state', 'lua_logname', 'lua_koboldbridge', 'lua_kobold', 'lua_koboldcore', 'sp']
settings_name = "system" settings_name = "system"
def __init__(self, socketio): def __init__(self, socketio):
self.socketio = socketio self.socketio = socketio

68
static/koboldai.css
View File

@@ -427,20 +427,32 @@ body {
color: var(--text); color: var(--text);
} }
@media only screen and not (max-width: 768px) {
.main-grid { .main-grid {
transition: margin-left .5s; transition: margin-left .5s;
display: grid; display: grid;
height: 98vh; height: 98vh;
margin-left: var(--flyout_menu_closed_width); margin-left: var(--flyout_menu_closed_width);
/* grid-template-areas: "menuicon gamescreen lefticon"
"menuicon actions lefticon"
"menuicon inputrow lefticon";*/
grid-template-areas: "menuicon gamescreen options lefticon" grid-template-areas: "menuicon gamescreen options lefticon"
"menuicon inputrow inputrow lefticon"; "menuicon inputrow inputrow lefticon";
grid-template-columns: 30px auto fit-content(30%) 20px; grid-template-columns: 30px auto fit-content(30%) 20px;
/* grid-template-rows: auto 40px 100px;*/
grid-template-rows: auto 100px; grid-template-rows: auto 100px;
} }
}
@media only screen and (max-width: 768px) {
.main-grid {
transition: margin-left .5s;
display: grid;
height: 98vh;
margin-left: var(--flyout_menu_closed_width);
grid-template-areas: "menuicon gamescreen lefticon"
"menuicon mobile_options lefticon"
"menuicon inputrow lefticon";
grid-template-columns: 30px auto 20px;
grid-template-rows: auto min-content 100px;
}
}
@media only screen and not (max-width: 768px) { @media only screen and not (max-width: 768px) {
.main-grid.pinned { .main-grid.pinned {
@@ -452,6 +464,7 @@ body {
.gamescreen { .gamescreen {
background-color: var(--gamescreen_background); background-color: var(--gamescreen_background);
color: white; color: white;
width: 100%;
grid-area: gamescreen; grid-area: gamescreen;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -483,27 +496,60 @@ body {
color: var(--text_edit); color: var(--text_edit);
} }
.sequence { @media only screen and not (max-width: 768px) {
.sequence_area {
margin-top: 10px; margin-top: 10px;
grid-area: options; grid-area: options;
background-color: var(--gamescreen_background); background-color: var(--gamescreen_background);
overflow-y: scroll; overflow-y: scroll;
} }
}
table.sequence { @media only screen and (max-width: 768px) {
.sequence_area {
margin-top: 5px;
grid-area: mobile_options;
background-color: var(--gamescreen_background);
overflow-y: hidden;
}
}
@media only screen and (max-width: 768px) {
.sequences {
width: 100%; width: 100%;
border: 0px; border: 0px;
border-spacing: 0; border-spacing: 0;
display: flex;
flex-direction: row;
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
} }
tr.sequence { @media only screen and not (max-width: 768px) {
.sequences {
width: 100%;
border: 0px;
border-spacing: 0;
display: flex;
flex-direction: column;
}
}
.sequence_row {
scroll-snap-align: start;
margin-top: 0px; margin-top: 0px;
margin-bottom: 0px; margin-bottom: 0px;
min-width: 100%;
display: grid;
grid-template-areas: "text icon";
grid-template-columns: auto 20px;
} }
td.sequence { .sequence {
border: 1px solid #959595; border: 1px solid #959595;
border-radius: 5px; border-radius: 5px;
grid-area: text;
padding: 0px; padding: 0px;
background-color: var(--options_background); background-color: var(--options_background);
-moz-transition: all 0.15s ease-in; -moz-transition: all 0.15s ease-in;
@@ -513,7 +559,11 @@ td.sequence {
white-space: pre-wrap; white-space: pre-wrap;
} }
td.sequence:hover { .sequnce_icon {
grid-area: icon;
}
.sequence:hover {
filter: brightness(70%); filter: brightness(70%);
} }

35
static/koboldai.js
View File

@@ -84,23 +84,23 @@ function create_options(data) {
while (option_chunk.firstChild) { while (option_chunk.firstChild) {
option_chunk.removeChild(option_chunk.firstChild); option_chunk.removeChild(option_chunk.firstChild);
} }
var table = document.createElement("table"); var table = document.createElement("div");
table.classList.add("sequence"); table.classList.add("sequences");
table.style = "border-spacing: 0;";
//Add Redo options //Add Redo options
i=0; i=0;
for (item of data.value.options) { for (item of data.value.options) {
if ((item['Previous Selection'])) { if ((item['Previous Selection'])) {
var row = document.createElement("tr"); var row = document.createElement("div");
row.classList.add("sequence"); row.classList.add("sequence_row");
var textcell = document.createElement("td"); var textcell = document.createElement("span");
textcell.textContent = item.text; textcell.textContent = item.text;
textcell.classList.add("sequence"); textcell.classList.add("sequence");
textcell.setAttribute("option_id", i); textcell.setAttribute("option_id", i);
textcell.setAttribute("option_chunk", data.value.id); textcell.setAttribute("option_chunk", data.value.id);
var iconcell = document.createElement("td"); var iconcell = document.createElement("span");
iconcell.setAttribute("option_id", i); iconcell.setAttribute("option_id", i);
iconcell.setAttribute("option_chunk", data.value.id); iconcell.setAttribute("option_chunk", data.value.id);
iconcell.classList.add("sequnce_icon");
var icon = document.createElement("span"); var icon = document.createElement("span");
icon.id = "Pin_"+i; icon.id = "Pin_"+i;
icon.classList.add("oi"); icon.classList.add("oi");
@@ -119,16 +119,17 @@ function create_options(data) {
i=0; i=0;
for (item of data.value.options) { for (item of data.value.options) {
if (!(item.Edited) && !(item['Previous Selection'])) { if (!(item.Edited) && !(item['Previous Selection'])) {
var row = document.createElement("tr"); var row = document.createElement("div");
row.classList.add("sequence"); row.classList.add("sequence_row");
var textcell = document.createElement("td"); var textcell = document.createElement("span");
textcell.textContent = item.text; textcell.textContent = item.text;
textcell.classList.add("sequence"); textcell.classList.add("sequence");
textcell.setAttribute("option_id", i); textcell.setAttribute("option_id", i);
textcell.setAttribute("option_chunk", data.value.id); textcell.setAttribute("option_chunk", data.value.id);
var iconcell = document.createElement("td"); var iconcell = document.createElement("span");
iconcell.setAttribute("option_id", i); iconcell.setAttribute("option_id", i);
iconcell.setAttribute("option_chunk", data.value.id); iconcell.setAttribute("option_chunk", data.value.id);
iconcell.classList.add("sequnce_icon");
var icon = document.createElement("span"); var icon = document.createElement("span");
icon.id = "Pin_"+i; icon.id = "Pin_"+i;
icon.classList.add("oi"); icon.classList.add("oi");
@@ -222,7 +223,7 @@ function selected_preset(data) {
var elements_to_change = document.getElementsByClassName("var_sync_model_"+key); var elements_to_change = document.getElementsByClassName("var_sync_model_"+key);
for (item of elements_to_change) { for (item of elements_to_change) {
if (item.tagName.toLowerCase() === 'input') { if (item.tagName.toLowerCase() === 'input') {
item.value = fix_text(value); item.value = value;
} else { } else {
item.textContent = fix_text(value); item.textContent = fix_text(value);
} }
@@ -268,6 +269,7 @@ function do_ai_busy(data) {
} }
function var_changed(data) { function var_changed(data) {
console.log(data);
//Special Case for Story Text //Special Case for Story Text
if ((data.classname == "actions") && (data.name == "Selected Text")) { if ((data.classname == "actions") && (data.name == "Selected Text")) {
do_story_text_updates(data); do_story_text_updates(data);
@@ -287,7 +289,14 @@ function var_changed(data) {
var elements_to_change = document.getElementsByClassName("var_sync_"+data.classname.replace(" ", "_")+"_"+data.name.replace(" ", "_")); var elements_to_change = document.getElementsByClassName("var_sync_"+data.classname.replace(" ", "_")+"_"+data.name.replace(" ", "_"));
for (item of elements_to_change) { for (item of elements_to_change) {
if ((item.tagName.toLowerCase() === 'input') || (item.tagName.toLowerCase() === 'select')) { if ((item.tagName.toLowerCase() === 'input') || (item.tagName.toLowerCase() === 'select')) {
item.value = fix_text(data.value); if (item.getAttribute("type") == "checkbox") {
if (item.checked != data.value) {
//not sure why the bootstrap-toggle won't respect a standard item.checked = true/false, so....
item.parentNode.click();
}
} else {
item.value = fix_text(data.value);
}
} else { } else {
item.textContent = fix_text(data.value); item.textContent = fix_text(data.value);
} }

4
templates/index_new.html
View File

@@ -40,14 +40,14 @@
</div> </div>
<!------------ Sequences ---------------------> <!------------ Sequences --------------------->
<div id="action_count" class="var_sync_actions_Action_Count hidden"></div> <div id="action_count" class="var_sync_actions_Action_Count hidden"></div>
<div id="Select Options" class="sequence"></div> <div id="Select Options" class="sequence_area"></div>
<!------------ Input Area---------------------> <!------------ Input Area--------------------->
<div class="inputrow" id="inputrow_container"> <div class="inputrow" id="inputrow_container">
<textarea id="input_text" placeholder="Enter text here"></textarea> <textarea id="input_text" placeholder="Enter text here"></textarea>
<div class="statusbar_outer hidden"> <div class="statusbar_outer hidden">
<div class="statusbar_inner" style="width:0%">0%</div> <div class="statusbar_inner" style="width:0%">0%</div>
</div><br> </div><br>
<button type="button" class="btn action_button submit var_sync_alt_system_aibusy" system_aibusy=False id="btnsend" onclick="socket.emit('submit', {'data': document.getElementById('input_text').value});">Submit</button> <button type="button" class="btn action_button submit var_sync_alt_system_aibusy" system_aibusy=False id="btnsend" onclick="socket.emit('submit', {'data': document.getElementById('input_text').value});this.textContent = '';">Submit</button>
<button type="button" class="btn action_button submited var_sync_alt_system_aibusy" system_aibusy=False id="btnsend"><img src="static/thinking.gif" class="force_center"></button> <button type="button" class="btn action_button submited var_sync_alt_system_aibusy" system_aibusy=False id="btnsend"><img src="static/thinking.gif" class="force_center"></button>
<button type="button" class="btn action_button back" onclick="socket.emit('back', {});"><span class="oi" data-glyph="action-undo"></span></button> <button type="button" class="btn action_button back" onclick="socket.emit('back', {});"><span class="oi" data-glyph="action-undo"></span></button>
<button type="button" class="btn action_button redo" onclick="socket.emit('redo', {});"><span class="oi" data-glyph="action-redo"></span></button> <button type="button" class="btn action_button redo" onclick="socket.emit('redo', {});"><span class="oi" data-glyph="action-redo"></span></button>

2
templates/settings item.html
View File

@@ -27,7 +27,7 @@
<input type=checkbox id="{{ item['classname'] }}_{{ item['name'] }}" class="setting_item_input var_sync_{{ item['classname'] }}_{{ item['name'] }}" <input type=checkbox id="{{ item['classname'] }}_{{ item['name'] }}" class="setting_item_input var_sync_{{ item['classname'] }}_{{ item['name'] }}"
data-size="mini" data-onstyle="success" data-toggle="toggle" onchange='socket.emit("var_change", {"ID": this.id, "value": this.checked});'> data-size="mini" data-onstyle="success" data-toggle="toggle" onchange='socket.emit("var_change", {"ID": this.id, "value": this.checked});'>
{% elif item['uitype'] == "dropdown" %} {% elif item['uitype'] == "dropdown" %}
<select id="{{ item['classname'] }}_{{ item['name'] }}" class="settings_select var_sync_{{ item['classname'] }}_{{ item['name'] }}" onclick='socket.emit("var_change", {"ID": this.id, "value": this.value});'> <select id="{{ item['classname'] }}_{{ item['name'] }}" class="settings_select var_sync_{{ item['classname'] }}_{{ item['name'] }}" onchange='socket.emit("var_change", {"ID": this.id, "value": this.value});'>
{% for option in item['children'] %} {% for option in item['children'] %}
<option value="{{ option['value'] }}">{{ option["text"] }}</option> <option value="{{ option['value'] }}">{{ option["text"] }}</option>
{% endfor %} {% endfor %}