mirror of
https://github.com/KoboldAI/KoboldAI-Client.git
synced 2025-03-26 00:10:06 +01:00
Added settings menu to adjust generator parameters from game UI
Fixed text scrolling when content exceeded game screen height
This commit is contained in:
KoboldAI Dev
parent
1c9c219251
commit
6e54f654d6
28
aiserver.py
28
aiserver.py
@ -45,8 +45,9 @@ class vars:
|
||||
aibusy = False # Stops submissions while the AI is working
|
||||
max_length = 500 # Maximum number of tokens to submit per action
|
||||
genamt = 60 # Amount of text for each action to generate
|
||||
rep_pen = 1.2 # Generator repetition_penalty
|
||||
temp = 1.1 # Generator temperature
|
||||
rep_pen = 1.0 # Generator repetition_penalty
|
||||
temp = 0.9 # Generator temperature
|
||||
top_p = 1.0 # Generator top_p
|
||||
gamestarted = False
|
||||
prompt = ""
|
||||
memory = ""
|
||||
@ -221,9 +222,11 @@ def do_connect():
|
||||
emit('from_server', {'cmd': 'connected'})
|
||||
if(not vars.gamestarted):
|
||||
setStartState()
|
||||
refresh_settings()
|
||||
else:
|
||||
# Game in session, send current game data and ready state to browser
|
||||
refresh_story()
|
||||
refresh_settings()
|
||||
if(vars.mode == "play"):
|
||||
if(not vars.aibusy):
|
||||
emit('from_server', {'cmd': 'setgamestate', 'data': 'ready'})
|
||||
@ -288,6 +291,18 @@ def get_message(msg):
|
||||
loadRequest()
|
||||
elif(msg['cmd'] == 'newgame'):
|
||||
newGameRequest()
|
||||
elif(msg['cmd'] == 'settemp'):
|
||||
vars.temperature = float(msg['data'])
|
||||
emit('from_server', {'cmd': 'setlabeltemp', 'data': msg['data']})
|
||||
elif(msg['cmd'] == 'settopp'):
|
||||
vars.top_p = float(msg['data'])
|
||||
emit('from_server', {'cmd': 'setlabeltopp', 'data': msg['data']})
|
||||
elif(msg['cmd'] == 'setreppen'):
|
||||
vars.rep_pen = float(msg['data'])
|
||||
emit('from_server', {'cmd': 'setlabelreppen', 'data': msg['data']})
|
||||
elif(msg['cmd'] == 'setoutput'):
|
||||
vars.genamt = int(msg['data'])
|
||||
emit('from_server', {'cmd': 'setlabeloutput', 'data': msg['data']})
|
||||
|
||||
#==================================================================#
|
||||
#
|
||||
@ -437,6 +452,15 @@ def refresh_story():
|
||||
i += 1
|
||||
emit('from_server', {'cmd': 'updatescreen', 'data': formatforhtml(txt)})
|
||||
|
||||
#==================================================================#
|
||||
# Sends the current generator settings to the Game Menu
|
||||
#==================================================================#
|
||||
def refresh_settings():
|
||||
emit('from_server', {'cmd': 'updatetemp', 'data': vars.temp})
|
||||
emit('from_server', {'cmd': 'updatetopp', 'data': vars.top_p})
|
||||
emit('from_server', {'cmd': 'updatereppen', 'data': vars.rep_pen})
|
||||
emit('from_server', {'cmd': 'updateoutlen', 'data': vars.genamt})
|
||||
|
||||
#==================================================================#
|
||||
# Sets the logical and display states for the AI Busy condition
|
||||
#==================================================================#
|
||||
|
||||
@ -3,6 +3,10 @@
|
||||
//=================================================================//
|
||||
var socket;
|
||||
|
||||
var button_newgame;
|
||||
var button_save;
|
||||
var button_load;
|
||||
var button_settings;
|
||||
var button_send;
|
||||
var button_actedit;
|
||||
var button_actmem;
|
||||
@ -12,6 +16,10 @@ var button_delete;
|
||||
var game_text;
|
||||
var input_text;
|
||||
var message_text;
|
||||
var setting_temp;
|
||||
var setting_topp;
|
||||
var setting_reppen;
|
||||
var setting_outlen;
|
||||
|
||||
var shift_down = false;
|
||||
var do_clear_ent = false;
|
||||
@ -156,6 +164,7 @@ $(document).ready(function(){
|
||||
button_newgame = $('#btn_newgame');
|
||||
button_save = $('#btn_save');
|
||||
button_load = $('#btn_load');
|
||||
button_settings = $('#btn_settings');
|
||||
button_send = $('#btnsend');
|
||||
button_actedit = $('#btn_actedit');
|
||||
button_actmem = $('#btn_actmem');
|
||||
@ -165,6 +174,14 @@ $(document).ready(function(){
|
||||
game_text = $('#gametext');
|
||||
input_text = $('#input_text');
|
||||
message_text = $('#messagefield');
|
||||
setting_temp = $('#settemp');
|
||||
setting_topp = $('#settopp');
|
||||
setting_reppen = $('#setreppen');
|
||||
setting_outlen = $('#setoutput');
|
||||
label_temp = $('#settempcur');
|
||||
label_topp = $('#settoppcur');
|
||||
label_reppen = $('#setreppencur');
|
||||
label_outlen = $('#setoutputcur');
|
||||
|
||||
// Connect to SocketIO server
|
||||
socket = io.connect('http://127.0.0.1:5000');
|
||||
@ -178,6 +195,10 @@ $(document).ready(function(){
|
||||
} else if(msg.cmd == "updatescreen") {
|
||||
// Send game content to Game Screen
|
||||
game_text.html(msg.data);
|
||||
// Scroll to bottom of text
|
||||
setTimeout(function () {
|
||||
$('#gamescreen').animate({scrollTop: $('#gamescreen').prop('scrollHeight')}, 1000);
|
||||
}, 5);
|
||||
} else if(msg.cmd == "setgamestate") {
|
||||
// Enable or Disable buttons
|
||||
if(msg.data == "ready") {
|
||||
@ -227,6 +248,34 @@ $(document).ready(function(){
|
||||
} else if(msg.cmd == "texteffect") {
|
||||
// Apply color highlight to line of text
|
||||
newTextHighlight($("#n"+msg.data))
|
||||
} else if(msg.cmd == "updatetemp") {
|
||||
// Send current temp value to input
|
||||
setting_temp.val(parseFloat(msg.data));
|
||||
label_temp.html(msg.data);
|
||||
} else if(msg.cmd == "updatetopp") {
|
||||
// Send current temp value to input
|
||||
setting_topp.val(parseFloat(msg.data));
|
||||
label_topp.html(msg.data);
|
||||
} else if(msg.cmd == "updatereppen") {
|
||||
// Send current temp value to input
|
||||
setting_reppen.val(parseFloat(msg.data));
|
||||
label_reppen.html(msg.data);
|
||||
} else if(msg.cmd == "updateoutlen") {
|
||||
// Send current temp value to input
|
||||
setting_outlen.val(parseInt(msg.data));
|
||||
label_outlen.html(msg.data);
|
||||
} else if(msg.cmd == "setlabeltemp") {
|
||||
// Update setting label with value from server
|
||||
label_temp.html(msg.data);
|
||||
} else if(msg.cmd == "setlabeltopp") {
|
||||
// Update setting label with value from server
|
||||
label_topp.html(msg.data);
|
||||
} else if(msg.cmd == "setlabelreppen") {
|
||||
// Update setting label with value from server
|
||||
label_reppen.html(msg.data);
|
||||
} else if(msg.cmd == "setlabeloutput") {
|
||||
// Update setting label with value from server
|
||||
label_outlen.html(msg.data);
|
||||
}
|
||||
});
|
||||
|
||||
@ -273,6 +322,15 @@ $(document).ready(function(){
|
||||
socket.send({'cmd': 'newgame', 'data': ''});
|
||||
});
|
||||
|
||||
button_settings.on("click", function(ev) {
|
||||
$('#settingsmenu').slideToggle("slow");
|
||||
});
|
||||
|
||||
// Bind settings to server calls
|
||||
$('input[type=range]').on('input', function () {
|
||||
socket.send({'cmd': $(this).attr('id'), 'data': $(this).val()});
|
||||
});
|
||||
|
||||
// Bind Enter button to submit
|
||||
input_text.keydown(function (ev) {
|
||||
if (ev.which == 13 && !shift_down) {
|
||||
|
||||
@ -16,6 +16,12 @@ chunk {
|
||||
grid-template-columns: 80% 20%;
|
||||
}
|
||||
|
||||
#settingsmenu {
|
||||
display:none;
|
||||
background-color: #295071;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#connectstatusdiv {
|
||||
display: flex;
|
||||
}
|
||||
@ -30,7 +36,7 @@ chunk {
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
vertical-align: bottom;
|
||||
overflow: auto;
|
||||
overflow-y: scroll;
|
||||
background-color: #262626;
|
||||
color: #ffffff;
|
||||
font-size: 12pt;
|
||||
@ -41,6 +47,11 @@ chunk {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
#gametext {
|
||||
max-height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#actionmenu {
|
||||
margin-top: 10px;
|
||||
}
|
||||
@ -91,6 +102,21 @@ chunk {
|
||||
top:10px;
|
||||
left:5px;
|
||||
}
|
||||
|
||||
.airange {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.chunkhov:hover {
|
||||
color: #c0fc51;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.colorfade {
|
||||
-moz-transition:color 1s ease-in;
|
||||
-o-transition:color 1s ease-in;
|
||||
-webkit-transition:color 1s ease-in;
|
||||
}
|
||||
|
||||
.color_orange {
|
||||
color: #f7a223;
|
||||
@ -112,13 +138,38 @@ chunk {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.chunkhov:hover {
|
||||
color: #c0fc51;
|
||||
cursor: pointer;
|
||||
.justifyleft {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.colorfade {
|
||||
-moz-transition:color 1s ease-in;
|
||||
-o-transition:color 1s ease-in;
|
||||
-webkit-transition:color 1s ease-in;
|
||||
.justifyright {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.settingitem {
|
||||
width: 20%;
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.settinglabel {
|
||||
color: #ffffff;
|
||||
display: grid;
|
||||
grid-template-columns: 80% 20%;
|
||||
}
|
||||
|
||||
.settingminmax {
|
||||
display: grid;
|
||||
grid-template-columns: 50% 50%;
|
||||
}
|
||||
|
||||
.settingminmax div {
|
||||
font-size: 8pt;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
}
|
||||
@ -20,12 +20,100 @@
|
||||
<button type="button" class="btn btn-primary" id="btn_newgame">New Story</button>
|
||||
<button type="button" class="btn btn-primary" id="btn_save">Save</button>
|
||||
<button type="button" class="btn btn-primary" id="btn_load">Load</button>
|
||||
<div class="spacer"></div>
|
||||
<button type="button" class="btn btn-primary" id="btn_settings">Settings</button>
|
||||
</div>
|
||||
<div id="connectstatusdiv">
|
||||
<span id="connectstatus" class="color_orange">Waiting for connection...</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="settingsmenu">
|
||||
<div class="settingitem">
|
||||
<div class="settinglabel">
|
||||
<div class="justifyleft">
|
||||
Temperature
|
||||
</div>
|
||||
<div class="justifyright" id="settempcur">
|
||||
0.0
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="range" class="form-range airange" min="0.1" max="2" step="0.05" id="settemp">
|
||||
</div>
|
||||
<div class="settingminmax">
|
||||
<div class="justifyleft">
|
||||
0.10
|
||||
</div>
|
||||
<div class="justifyright">
|
||||
2.00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settingitem">
|
||||
<div class="settinglabel">
|
||||
<div class="justifyleft">
|
||||
Top p Sampling
|
||||
</div>
|
||||
<div class="justifyright" id="settoppcur">
|
||||
0.0
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="range" class="form-range airange" min="0.1" max="1" step="0.05" id="settopp">
|
||||
</div>
|
||||
<div class="settingminmax">
|
||||
<div class="justifyleft">
|
||||
0.10
|
||||
</div>
|
||||
<div class="justifyright">
|
||||
1.00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settingitem">
|
||||
<div class="settinglabel">
|
||||
<div class="justifyleft">
|
||||
Repetition Penalty
|
||||
</div>
|
||||
<div class="justifyright" id="setreppencur">
|
||||
0.0
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="range" class="form-range airange" min="1" max="2" step="0.05" id="setreppen">
|
||||
</div>
|
||||
<div class="settingminmax">
|
||||
<div class="justifyleft">
|
||||
1.00
|
||||
</div>
|
||||
<div class="justifyright">
|
||||
2.00
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="settingitem">
|
||||
<div class="settinglabel">
|
||||
<div class="justifyleft">
|
||||
Amount to Generate
|
||||
</div>
|
||||
<div class="justifyright" id="setoutputcur">
|
||||
0
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<input type="range" class="form-range airange" min="10" max="500" step="1" id="setoutput">
|
||||
</div>
|
||||
<div class="settingminmax">
|
||||
<div class="justifyleft">
|
||||
10
|
||||
</div>
|
||||
<div class="justifyright">
|
||||
500
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="gamescreen">
|
||||
<span id="gametext">...</span>
|
||||
</div>
|
||||
@ -53,4 +141,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user