Added settings menu to adjust generator parameters from game UI

Fixed text scrolling when content exceeded game screen height

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
+    rep_pen     = 1.0 # Generator repetition_penalty
-    temp        = 1.1 # Generator temperature
+    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
 #==================================================================#

static/application.js

@@ -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) {

static/custom.css

@@ -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;
 }
@@ -92,6 +103,21 @@ chunk {
 	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 {
+.justifyleft {
-	color: #c0fc51;
+	text-align: left;
-	cursor: pointer;
 }
 
-.colorfade {
+.justifyright {
-	-moz-transition:color 1s ease-in;
+	text-align: right;
-    -o-transition:color 1s ease-in;
+}
-    -webkit-transition:color 1s ease-in;
+
+.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;
 }

templates/index.html

@@ -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>