//=================================================================// // VARIABLES //=================================================================// // Socket IO Object var socket; // UI references for jQuery var connect_status; var button_newgame; var button_rndgame; var button_save; var button_saveas; var button_savetofile; var button_load; var button_import; var button_importwi; var button_impaidg; var button_settings; var button_format; var button_send; var button_actedit; var button_actmem; var button_actback; var button_actretry; var button_delete; var button_actwi; var game_text; var input_text; var message_text; var settings_menu; var format_menu; var wi_menu; var anote_menu; var anote_input; var anote_labelcur; var anote_slider; var popup; var popup_title; var popup_content; var popup_accept; var popup_close; var aidgpopup; var aidgpromptnum; var aidg_accept; var aidg_close; var saveaspopup; var saveasinput; var topic; var saveas_accept; var saveas_close; var saveasoverwrite; var loadpopup; var loadcontent; var load_accept; var load_close; var nspopup; var ns_accept; var ns_close; var rspopup; var rs_accept; var rs_close; var seqselmenu; var seqselcontents; // Key states var shift_down = false; var do_clear_ent = false; // Display vars var allowtoggle = false; var formatcount = 0; //=================================================================// // METHODS //=================================================================// function addSetting(ob) { // Add setting block to Settings Menu if(ob.uitype == "slider"){ settings_menu.append("
\
\
\ "+ob.label+" ?"+ob.tooltip+"\
\
\ "+ob.default+"\
\
\
\ \
\
\
\ "+ob.min+"\
\
\ "+ob.max+"\
\
\
"); // Set references to HTML objects var refin = $("#"+ob.id); var reflb = $("#"+ob.id+"cur"); window["setting_"+ob.id] = refin; // Is this still needed? window["label_"+ob.id] = reflb; // Is this still needed? // Add event function to input refin.on("input", function () { socket.send({'cmd': $(this).attr('id'), 'data': $(this).val()}); }); } else if(ob.uitype == "toggle"){ settings_menu.append("
\ \ "+ob.label+" \ ?"+ob.tooltip+"\
"); // Tell Bootstrap-Toggle to render the new checkbox $("input[type=checkbox]").bootstrapToggle(); $("#"+ob.id).on("change", function () { if(allowtoggle) { socket.send({'cmd': $(this).attr('id'), 'data': $(this).prop('checked')}); } }); } } function addFormat(ob) { // Check if we need to make a new column for this button if(formatcount == 0) { format_menu.append("
"); } // Get reference to the last child column var ref = $("#formatmenu > div").last(); // Add format block to Format Menu ref.append("
\ \ "+ob.label+" \ ?"+ob.tooltip+"\
"); // Tell Bootstrap-Toggle to render the new checkbox $("input[type=checkbox]").bootstrapToggle(); // Add event to input $("#"+ob.id).on("change", function () { if(allowtoggle) { socket.send({'cmd': $(this).attr('id'), 'data': $(this).prop('checked')}); } }); // Increment display variable formatcount++; if(formatcount == 2) { formatcount = 0; } } function addImportLine(ob) { popup_content.append("
\
"+ob.title+"
\
"+ob.acts+"
\
"+ob.descr+"
\
"); $("#import"+ob.num).on("click", function () { socket.send({'cmd': 'importselect', 'data': $(this).attr('id')}); highlightImportLine($(this)); }); } function addWiLine(ob) { if(ob.init) { wi_menu.append("
\
\ \ \ \
\
\ \
\
\ \
\
"); // Send key value to text input $("#wikey"+ob.num).val(ob.key); // Assign delete event to button $("#btn_wi"+ob.num).on("click", function () { showWiDeleteConfirm(ob.num); }); } else { // Show WI line item with form fields hidden (uninitialized) wi_menu.append("
\
\ \ \ \
\
\ \
\
\ \
\
"); // Assign function to expand WI item to button $("#btn_wi"+ob.num).on("click", function () { expandWiLine(ob.num); }); } // Assign actions to other elements $("#btn_wican"+ob.num).on("click", function () { hideWiDeleteConfirm(ob.num); }); $("#btn_widel"+ob.num).on("click", function () { socket.send({'cmd': 'widelete', 'data': ob.num}); }); } function expandWiLine(num) { show([$("#wikey"+num), $("#wientry"+num)]); $("#btn_wi"+num).html("X"); $("#btn_wi"+num).off(); // Tell server the WI entry was initialized socket.send({'cmd': 'wiinit', 'data': num}); $("#btn_wi"+num).on("click", function () { showWiDeleteConfirm(num); }); } function showWiDeleteConfirm(num) { hide([$("#btn_wi"+num)]); show([$("#btn_widel"+num), $("#btn_wican"+num)]); } function hideWiDeleteConfirm(num) { show([$("#btn_wi"+num)]); hide([$("#btn_widel"+num), $("#btn_wican"+num)]); } function highlightImportLine(ref) { $("#popupcontent > div").removeClass("popuplistselected"); ref.addClass("popuplistselected"); enableButtons([popup_accept]); } function enableButtons(refs) { for(i=0; i"); } function hideWaitAnimation() { $('#waitanim').remove(); } function hide(refs) { for(i=0; i *', function() { editModeSelect($(this).attr("n")); }); disableSendBtn(); hide([button_actback, button_actmem, button_actretry, button_actwi]); show([button_delete]); } function exitEditMode() { // Remove class to each story chunk hideMessage(); button_actedit.html("Edit"); game_text.children('chunk').removeClass("chunkhov"); game_text.off('click', '> *'); enableSendBtn(); show([button_actback, button_actmem, button_actretry, button_actwi]); hide([button_delete]); input_text.val(""); } function editModeSelect(n) { socket.send({'cmd': 'editline', 'data': n}); } function enterMemoryMode() { showMessage("Edit the memory to be sent with each request to the AI."); button_actmem.html("Cancel"); hide([button_actback, button_actretry, button_actedit, button_delete, button_actwi]); // Display Author's Note field anote_menu.slideDown("fast"); } function exitMemoryMode() { hideMessage(); button_actmem.html("Memory"); show([button_actback, button_actretry, button_actedit, button_actwi]); input_text.val(""); // Hide Author's Note field anote_menu.slideUp("fast"); } function enterWiMode() { showMessage("World Info will be added to memory only when the key appears in submitted text or the last action."); button_actwi.html("Accept"); hide([button_actedit, button_actback, button_actmem, button_actretry, game_text]); show([wi_menu]); disableSendBtn(); } function exitWiMode() { hideMessage(); button_actwi.html("W Info"); hide([wi_menu]); show([button_actedit, button_actback, button_actmem, button_actretry, game_text]); enableSendBtn(); } function returnWiList(ar) { var list = []; var i; for(i=0; i\
"+ar[i].name+"
\
"+ar[i].actions+"
\ "); $("#load"+i).on("click", function () { enableButtons([load_accept]); socket.send({'cmd': 'loadselect', 'data': $(this).attr("name")}); highlightLoadLine($(this)); }); } } function highlightLoadLine(ref) { $("#loadlistcontent > div").removeClass("popuplistselected"); ref.addClass("popuplistselected"); } function showNewStoryPopup() { nspopup.removeClass("hidden"); nspopup.addClass("flex"); } function hideNewStoryPopup() { nspopup.removeClass("flex"); nspopup.addClass("hidden"); } function showRandomStoryPopup() { rspopup.removeClass("hidden"); rspopup.addClass("flex"); } function hideRandomStoryPopup() { rspopup.removeClass("flex"); rspopup.addClass("hidden"); } function setStartState() { enableSendBtn(); enableButtons([button_actmem, button_actwi]); disableButtons([button_actedit, button_actback, button_actretry]); hide([wi_menu, button_delete]); show([game_text, button_actedit, button_actmem, button_actwi, button_actback, button_actretry]); hideMessage(); hideWaitAnimation(); button_actedit.html("Edit"); button_actmem.html("Memory"); button_actwi.html("W Info"); hideAidgPopup(); hideSaveAsPopup(); hideLoadPopup(); hideNewStoryPopup(); hidegenseqs(); } function parsegenseqs(seqs) { seqselcontents.html(""); var i; for(i=0; i"+seqs[i].generated_text+""); $("#seqsel"+i).on("click", function () { socket.send({'cmd': 'seqsel', 'data': $(this).attr("n")}); }); } $('#seqselmenu').slideDown("slow"); } function hidegenseqs() { $('#seqselmenu').slideUp("slow", function() { seqselcontents.html(""); }); } //=================================================================// // READY/RUNTIME //=================================================================// $(document).ready(function(){ // Bind UI references connect_status = $('#connectstatus'); button_newgame = $('#btn_newgame'); button_rndgame = $('#btn_rndgame'); button_save = $('#btn_save'); button_saveas = $('#btn_saveas'); button_savetofile = $('#btn_savetofile'); button_load = $('#btn_load'); button_loadfrfile = $('#btn_loadfromfile'); button_import = $("#btn_import"); button_importwi = $("#btn_importwi"); button_impaidg = $("#btn_impaidg"); button_settings = $('#btn_settings'); button_format = $('#btn_format'); button_send = $('#btnsend'); button_actedit = $('#btn_actedit'); button_actmem = $('#btn_actmem'); button_actback = $('#btn_actundo'); button_actretry = $('#btn_actretry'); button_delete = $('#btn_delete'); button_actwi = $('#btn_actwi'); game_text = $('#gametext'); input_text = $('#input_text'); message_text = $('#messagefield'); settings_menu = $("#settingsmenu"); format_menu = $('#formatmenu'); anote_menu = $('#anoterowcontainer'); wi_menu = $('#wimenu'); anote_input = $('#anoteinput'); anote_labelcur = $('#anotecur'); anote_slider = $('#anotedepth'); popup = $("#popupcontainer"); popup_title = $("#popuptitletext"); popup_content = $("#popupcontent"); popup_accept = $("#btn_popupaccept"); popup_close = $("#btn_popupclose"); aidgpopup = $("#aidgpopupcontainer"); aidgpromptnum = $("#aidgpromptnum"); aidg_accept = $("#btn_aidgpopupaccept"); aidg_close = $("#btn_aidgpopupclose"); saveaspopup = $("#saveascontainer"); saveasinput = $("#savename"); topic = $("#topic"); saveas_accept = $("#btn_saveasaccept"); saveas_close = $("#btn_saveasclose"); saveasoverwrite = $("#saveasoverwrite"); loadpopup = $("#loadcontainer"); loadcontent = $("#loadlistcontent"); load_accept = $("#btn_loadaccept"); load_close = $("#btn_loadclose"); nspopup = $("#newgamecontainer"); ns_accept = $("#btn_nsaccept"); ns_close = $("#btn_nsclose"); rspopup = $("#rndgamecontainer"); rs_accept = $("#btn_rsaccept"); rs_close = $("#btn_rsclose"); seqselmenu = $("#seqselmenu"); seqselcontents = $("#seqselcontents"); // Connect to SocketIO server loc = window.document.location; socket = io.connect(loc.href); socket.on('from_server', function(msg) { if(msg.cmd == "connected") { // Connected to Server Actions connect_status.html("Connected to KoboldAI Process!"); connect_status.removeClass("color_orange"); connect_status.addClass("color_green"); // Reset Menus settings_menu.html(""); format_menu.html(""); wi_menu.html(""); } 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") { enableSendBtn(); enableButtons([button_actedit, button_actmem, button_actwi, button_actback, button_actretry]); hideWaitAnimation(); } else if(msg.data == "wait") { disableSendBtn(); disableButtons([button_actedit, button_actmem, button_actwi, button_actback, button_actretry]); showWaitAnimation(); } else if(msg.data == "start") { setStartState(); } } else if(msg.cmd == "editmode") { // Enable or Disable edit mode if(msg.data == "true") { enterEditMode(); } else { exitEditMode(); } } else if(msg.cmd == "setinputtext") { // Set input box text for edit mode input_text.val(msg.data); } else if(msg.cmd == "enablesubmit") { // Enables the submit button enableSendBtn(); } else if(msg.cmd == "memmode") { // Enable or Disable memory edit mode if(msg.data == "true") { enterMemoryMode(); } else { exitMemoryMode(); } } else if(msg.cmd == "errmsg") { // Send error message errMessage(msg.data); } 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 $("#settemp").val(parseFloat(msg.data)); $("#settempcur").html(msg.data); } else if(msg.cmd == "updatetopp") { // Send current top p value to input $("#settopp").val(parseFloat(msg.data)); $("#settoppcur").html(msg.data); } else if(msg.cmd == "updatereppen") { // Send current rep pen value to input $("#setreppen").val(parseFloat(msg.data)); $("#setreppencur").html(msg.data); } else if(msg.cmd == "updateoutlen") { // Send current output amt value to input $("#setoutput").val(parseInt(msg.data)); $("#setoutputcur").html(msg.data); } else if(msg.cmd == "updatetknmax") { // Send current max tokens value to input $("#settknmax").val(parseInt(msg.data)); $("#settknmaxcur").html(msg.data); } else if(msg.cmd == "updateikgen") { // Send current max tokens value to input $("#setikgen").val(parseInt(msg.data)); $("#setikgencur").html(msg.data); } else if(msg.cmd == "setlabeltemp") { // Update setting label with value from server $("#settempcur").html(msg.data); } else if(msg.cmd == "setlabeltopp") { // Update setting label with value from server $("#settoppcur").html(msg.data); } else if(msg.cmd == "setlabelreppen") { // Update setting label with value from server $("#setreppencur").html(msg.data); } else if(msg.cmd == "setlabeloutput") { // Update setting label with value from server $("#setoutputcur").html(msg.data); } else if(msg.cmd == "setlabeltknmax") { // Update setting label with value from server $("#settknmaxcur").html(msg.data); } else if(msg.cmd == "setlabelikgen") { // Update setting label with value from server $("#setikgencur").html(msg.data); } else if(msg.cmd == "updateanotedepth") { // Send current Author's Note depth value to input anote_slider.val(parseInt(msg.data)); anote_labelcur.html(msg.data); } else if(msg.cmd == "setlabelanotedepth") { // Update setting label with value from server anote_labelcur.html(msg.data); } else if(msg.cmd == "getanote") { // Request contents of Author's Note field var txt = anote_input.val(); socket.send({'cmd': 'anote', 'data': txt}); } else if(msg.cmd == "setanote") { // Set contents of Author's Note field anote_input.val(msg.data); } else if(msg.cmd == "addsetting") { // Add setting controls addSetting(msg.data); } else if(msg.cmd == "addformat") { // Add setting controls addFormat(msg.data); } else if(msg.cmd == "updatefrmttriminc") { // Update toggle state $("#frmttriminc").prop('checked', msg.data).change(); } else if(msg.cmd == "updatefrmtrmblln") { // Update toggle state $("#frmtrmblln").prop('checked', msg.data).change(); } else if(msg.cmd == "updatefrmtrmspch") { // Update toggle state $("#frmtrmspch").prop('checked', msg.data).change(); } else if(msg.cmd == "updatefrmtadsnsp") { // Update toggle state $("#frmtadsnsp").prop('checked', msg.data).change(); } else if(msg.cmd == "allowtoggle") { // Allow toggle change states to propagate allowtoggle = msg.data; } else if(msg.cmd == "popupshow") { // Show/Hide Popup popupShow(msg.data); } else if(msg.cmd == "addimportline") { // Add import popup entry addImportLine(msg.data); } else if(msg.cmd == "clearpopup") { // Clear previous contents of popup popup_content.html(""); } else if(msg.cmd == "wimode") { // Enable or Disable WI edit mode if(msg.data == "true") { enterWiMode(); } else { exitWiMode(); } } else if(msg.cmd == "addwiitem") { // Add WI entry to WI Menu addWiLine(msg.data); } else if(msg.cmd == "clearwi") { // Clear previous contents of WI list wi_menu.html(""); } else if(msg.cmd == "requestwiitem") { // Package WI contents and send back to server returnWiList(msg.data); } else if(msg.cmd == "saveas") { // Show Save As prompt showSaveAsPopup(); } else if(msg.cmd == "hidesaveas") { // Hide Save As prompt hideSaveAsPopup(); } else if(msg.cmd == "buildload") { // Send array of save files to load UI buildLoadList(msg.data); } else if(msg.cmd == "askforoverwrite") { // Show overwrite warning show([saveasoverwrite]); } else if(msg.cmd == "genseqs") { // Parse generator sequences to UI parsegenseqs(msg.data); } else if(msg.cmd == "hidegenseqs") { // Collapse genseqs menu hidegenseqs(); } else if(msg.cmd == "setlabelnumseq") { // Update setting label with value from server $("#setnumseqcur").html(msg.data); } else if(msg.cmd == "updatenumseq") { // Send current max tokens value to input $("#setnumseq").val(parseInt(msg.data)); $("#setnumseqcur").html(msg.data); } else if(msg.cmd == "setlabelwidepth") { // Update setting label with value from server $("#setwidepthcur").html(msg.data); } else if(msg.cmd == "updatewidepth") { // Send current max tokens value to input $("#setwidepth").val(parseInt(msg.data)); $("#setwidepthcur").html(msg.data); } else if(msg.cmd == "updateuseprompt") { // Update toggle state $("#setuseprompt").prop('checked', msg.data).change(); } }); socket.on('disconnect', function() { connect_status.html("Lost connection..."); connect_status.removeClass("color_green"); connect_status.addClass("color_orange"); }); // Bind actions to UI buttons button_send.on("click", function(ev) { dosubmit(); }); button_actretry.on("click", function(ev) { socket.send({'cmd': 'retry', 'data': ''}); hidegenseqs(); }); button_actback.on("click", function(ev) { socket.send({'cmd': 'back', 'data': ''}); hidegenseqs(); }); button_actedit.on("click", function(ev) { socket.send({'cmd': 'edit', 'data': ''}); }); button_delete.on("click", function(ev) { socket.send({'cmd': 'delete', 'data': ''}); }); button_actmem.on("click", function(ev) { socket.send({'cmd': 'memory', 'data': ''}); }); button_savetofile.on("click", function(ev) { socket.send({'cmd': 'savetofile', 'data': ''}); }); button_loadfrfile.on("click", function(ev) { socket.send({'cmd': 'loadfromfile', 'data': ''}); }); button_import.on("click", function(ev) { socket.send({'cmd': 'import', 'data': ''}); }); button_importwi.on("click", function(ev) { socket.send({'cmd': 'importwi', 'data': ''}); }); button_settings.on("click", function(ev) { $('#settingsmenu').slideToggle("slow"); }); button_format.on("click", function(ev) { $('#formatmenu').slideToggle("slow"); }); popup_close.on("click", function(ev) { socket.send({'cmd': 'importcancel', 'data': ''}); }); popup_accept.on("click", function(ev) { socket.send({'cmd': 'importaccept', 'data': ''}); }); button_actwi.on("click", function(ev) { socket.send({'cmd': 'wi', 'data': ''}); }); button_impaidg.on("click", function(ev) { showAidgPopup(); }); aidg_close.on("click", function(ev) { hideAidgPopup(); }); aidg_accept.on("click", function(ev) { sendAidgImportRequest(); }); button_save.on("click", function(ev) { socket.send({'cmd': 'saverequest', 'data': ''}); }); button_saveas.on("click", function(ev) { showSaveAsPopup(); }); saveas_close.on("click", function(ev) { hideSaveAsPopup(); socket.send({'cmd': 'clearoverwrite', 'data': ''}); }); saveas_accept.on("click", function(ev) { sendSaveAsRequest(); }); button_load.on("click", function(ev) { socket.send({'cmd': 'loadlistrequest', 'data': ''}); }); load_close.on("click", function(ev) { hideLoadPopup(); }); load_accept.on("click", function(ev) { socket.send({'cmd': 'loadrequest', 'data': ''}); hideLoadPopup(); }); button_newgame.on("click", function(ev) { showNewStoryPopup(); }); ns_accept.on("click", function(ev) { socket.send({'cmd': 'newgame', 'data': ''}); hideNewStoryPopup(); }); ns_close.on("click", function(ev) { hideNewStoryPopup(); }); button_rndgame.on("click", function(ev) { showRandomStoryPopup(); }); rs_accept.on("click", function(ev) { socket.send({'cmd': 'rndgame', 'data': topic.val()}); hideRandomStoryPopup(); }); rs_close.on("click", function(ev) { hideRandomStoryPopup(); }); anote_slider.on("input", function () { socket.send({'cmd': 'anotedepth', 'data': $(this).val()}); }); saveasinput.on("input", function () { if(saveasinput.val() == "") { disableButtons([saveas_accept]); } else { enableButtons([saveas_accept]); } hide([saveasoverwrite]); }); // Bind Enter button to submit input_text.keydown(function (ev) { if (ev.which == 13 && !shift_down) { do_clear_ent = true; dosubmit(); } else if(ev.which == 16) { shift_down = true; } }); // Enter to submit, but not if holding shift input_text.keyup(function (ev) { if (ev.which == 13 && do_clear_ent) { input_text.val(""); do_clear_ent = false; } else if(ev.which == 16) { shift_down = false; } }); aidgpromptnum.keydown(function (ev) { if (ev.which == 13) { sendAidgImportRequest(); } }); saveasinput.keydown(function (ev) { if (ev.which == 13 && saveasinput.val() != "") { sendSaveAsRequest(); } }); });