mirror of
https://github.com/KoboldAI/KoboldAI-Client.git
synced 2024-12-13 00:56:18 +01:00
12718dbe24
This makes it so that SocketIO uses long polling to set up the connection before switching to websocket, instead of immediately using websocket. This seems to resolve issues where the browser sometimes can't connect to the websocket server until the window has been open for a minute.
348 lines
13 KiB
HTML
348 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<title>KoboldAI Client</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<script src="static/jquery-3.6.0.min.js"></script>
|
|
<script src="static/jquery-ui.sortable.min.js"></script>
|
|
<script src="static/socket.io.min.js"></script>
|
|
<script src="static/application.js?ver=1.16.4h"></script>
|
|
<script src="static/bootstrap.min.js"></script>
|
|
<script src="static/bootstrap-toggle.min.js"></script>
|
|
<script src="static/rangy-core.min.js"></script>
|
|
|
|
<link rel="stylesheet" href="static/jquery-ui.sortable.min.css">
|
|
<link rel="stylesheet" href="static/bootstrap.min.css">
|
|
<link rel="stylesheet" href="static/bootstrap-toggle.min.css">
|
|
<link rel="stylesheet" href="static/custom.css?ver=1.16.4e">
|
|
<link rel="stylesheet" href="static/open-iconic-bootstrap.min.css">
|
|
</head>
|
|
<body>
|
|
<input type="file" id="remote-save-select" accept="application/json" style="display:none">
|
|
<div class="container">
|
|
<div class="row" id="topmenu">
|
|
<div id="menuitems">
|
|
<div class="navcontainer">
|
|
<nav class="navbar" id="navbar">
|
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown">
|
|
<span class="navbar-button-bar"></span>
|
|
<span class="navbar-button-bar"></span>
|
|
<span class="navbar-button-bar"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNavDropdown">
|
|
<ul class="nav navbar-nav">
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">New Game</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#" id="btn_newgame">Blank Story</a>
|
|
<a class="dropdown-item" href="#" id="btn_rndgame">Random Story</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Save</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#" id="btn_save">Save</a>
|
|
<a class="dropdown-item" href="#" id="btn_saveas">Save As</a>
|
|
<a class="dropdown-item" href="#" id="btn_savetofile">Save To File...</a>
|
|
<a class="dropdown-item" href="#" id="btn_download">Download Story as JSON</a>
|
|
<a class="dropdown-item" href="#" id="btn_downloadtxt">Download Story as Plaintext</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Load</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#" id="btn_load">Load</a>
|
|
<a class="dropdown-item" href="#" id="btn_loadfromfile">Load From File...</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item dropdown">
|
|
<a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Import</a>
|
|
<div class="dropdown-menu">
|
|
<a class="dropdown-item" href="#" id="btn_import">AI Dungeon Adventure</a>
|
|
<a class="dropdown-item" href="#" id="btn_importwi">AI Dungeon World Info</a>
|
|
<a class="dropdown-item" href="#" id="btn_impaidg">aidg.club Prompt</a>
|
|
</div>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" id="btn_settings">Settings</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" id="btn_format">Formatting</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#" id="btn_userscripts">Userscripts</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link hidden" href="#" id="btn_softprompt">Soft Prompt</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</div>
|
|
<div id="connectstatusdiv">
|
|
<span id="connectstatus" class="color_orange">Waiting for connection...</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" id="settingsmenu" style="display:none;">
|
|
</div>
|
|
<div class="row" id="formatmenu">
|
|
</div>
|
|
<div class="layer-container">
|
|
<div class="layer-bottom row" id="gamescreen">
|
|
<span id="gametext" contenteditable="true"><p>...</p></span>
|
|
<div class="hidden" id="wimenu">
|
|
</div>
|
|
</div>
|
|
<div id="curtain" class="layer-top row hidden"></div>
|
|
</div>
|
|
<div class="row" id="seqselmenu">
|
|
<div class="seqselheader">Select sequence to keep:</div>
|
|
<div id="seqselcontents">
|
|
</div>
|
|
</div>
|
|
<div class="row flex" id="actionmenu">
|
|
<div id="actionmenuitems">
|
|
<button type="button" class="btn btn-primary" id="btn_actmem">Memory</button>
|
|
<button type="button" class="btn btn-primary" id="btn_actwi">W Info</button>
|
|
<button type="button" class="btn btn-primary" id="btn_actundo">Back</button>
|
|
<button type="button" class="btn btn-primary" id="btn_actretry">Retry</button>
|
|
</div>
|
|
<div id="messagefield"></div>
|
|
<div class="box flex-push-right">
|
|
<input type="checkbox" data-toggle="toggle" data-onstyle="success" id="allowediting" disabled>
|
|
<div class="box-label">Allow Editing</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div id="inputrow">
|
|
<div id="inputrowmode">
|
|
<button type="button" class="btn btn-secondary hidden" id="btnmode">Mode:<br/><b id="btnmode_label">Story</b></button>
|
|
</div>
|
|
<div id="inputrowleft">
|
|
<textarea class="form-control" id="input_text" placeholder="Enter text here"></textarea>
|
|
</div>
|
|
<div id="inputrowright">
|
|
<button type="button" class="btn btn-secondary" id="btnsend">Wait</button>
|
|
</div>
|
|
</div>
|
|
<div id="anoterowcontainer">
|
|
<div id="anoterow">
|
|
<div id="anoterowleft">
|
|
<div class="anotelabel">
|
|
Author's Note
|
|
</div>
|
|
<div class="anotefield">
|
|
<input class="form-control" type="text" placeholder="Author's Note" id="anoteinput">
|
|
</div>
|
|
</div>
|
|
<div id="anoterowright">
|
|
<div id="anoteslidelabel">
|
|
<div class="justifyleft">
|
|
Depth
|
|
</div>
|
|
<div class="justifyright" id="anotecur">
|
|
3
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<input type="range" class="form-range airange" min="1" max="5" step="1" id="anotedepth">
|
|
</div>
|
|
<div class="settingminmax">
|
|
<div class="justifyleft">
|
|
1
|
|
</div>
|
|
<div class="justifyright">
|
|
5
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="hidden" id="popupcontainer">
|
|
<div id="popup">
|
|
<div id="popuptitlebar">
|
|
<div id="popuptitletext">Select an Adventure to Import</div>
|
|
</div>
|
|
<div id="popuplistheader">
|
|
<div>Title</div>
|
|
<div># Actions</div>
|
|
<div>Description</div>
|
|
</div>
|
|
<div id="popupcontent">
|
|
</div>
|
|
<div id="popupfooter">
|
|
<button type="button" class="btn btn-primary" id="btn_popupaccept">Accept</button>
|
|
<button type="button" class="btn btn-primary" id="btn_popupclose">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="popupcontainer hidden" id="aidgpopupcontainer">
|
|
<div id="aidgpopup">
|
|
<div class="popuptitlebar">
|
|
<div class="popuptitletext">Enter the Prompt Number</div>
|
|
</div>
|
|
<div class="aidgpopuplistheader">
|
|
(4-digit number at the end of aidg.club URL)
|
|
</div>
|
|
<div class="aidgpopupcontent">
|
|
<input class="form-control" type="text" placeholder="Prompt Number" id="aidgpromptnum">
|
|
</div>
|
|
<div class="popupfooter">
|
|
<button type="button" class="btn btn-primary" id="btn_aidgpopupaccept">Accept</button>
|
|
<button type="button" class="btn btn-primary" id="btn_aidgpopupclose">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="popupcontainer hidden" id="saveascontainer">
|
|
<div id="saveaspopup">
|
|
<div class="popuptitlebar">
|
|
<div class="popuptitletext">Enter Name For Save</div>
|
|
</div>
|
|
<div class="aidgpopupcontent">
|
|
<input class="form-control" type="text" placeholder="Save Name" id="savename">
|
|
</div>
|
|
<div class="popuperror hidden">
|
|
<span></span>
|
|
</div>
|
|
<div class="saveasoverwrite hidden">
|
|
<span>File already exists. Really overwrite?</span>
|
|
</div>
|
|
<div class="popupfooter">
|
|
<button type="button" class="btn btn-primary" id="btn_saveasaccept">Accept</button>
|
|
<button type="button" class="btn btn-primary" id="btn_saveasclose">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="popupcontainer hidden" id="loadcontainer">
|
|
<div id="loadpopup">
|
|
<div class="popuptitlebar">
|
|
<div class="popuptitletext">Select A Story To Load</div>
|
|
</div>
|
|
<div class="loadlistheader">
|
|
<div>Save Name</div>
|
|
<div class="flex-push-right"># Actions</div>
|
|
</div>
|
|
<div id="loadlistcontent">
|
|
</div>
|
|
<div class="popupfooter">
|
|
<button type="button" class="btn btn-primary" id="btn_loadaccept">Load</button>
|
|
<button type="button" class="btn btn-primary" id="btn_loadclose">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="popupcontainer hidden" id="spcontainer">
|
|
<div id="sppopup">
|
|
<div class="popuptitlebar">
|
|
<div class="popuptitletext">Select A Soft Prompt To Use</div>
|
|
</div>
|
|
<div id="splistcontent">
|
|
</div>
|
|
<div class="popupfooter">
|
|
<button type="button" class="btn btn-primary" id="btn_spaccept">Load</button>
|
|
<button type="button" class="btn btn-primary" id="btn_spclose">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="popupcontainer hidden" id="uscontainer">
|
|
<div id="uspopup">
|
|
<div class="popuptitlebar">
|
|
<div class="popuptitletext">Select userscripts to load; drag-and-drop to reorder</div>
|
|
</div>
|
|
<div class="usheadergrid">
|
|
<div>[AVAILABLE]</div>
|
|
<div>[ACTIVE]</div>
|
|
</div>
|
|
<div class="uslistgrid">
|
|
<div id="uslistunloaded">
|
|
</div>
|
|
<div id="uslistloaded">
|
|
</div>
|
|
</div>
|
|
<div class="popupfooter">
|
|
<button type="button" class="btn btn-primary" id="btn_usaccept">Load</button>
|
|
<button type="button" class="btn btn-primary" id="btn_usclose">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="popupcontainer hidden" id="loadcontainerdelete">
|
|
<div id="loadpopupdelete">
|
|
<div class="popuptitlebar">
|
|
<div class="popuptitletext">Really Delete Story?</div>
|
|
</div>
|
|
<div class="dialogheader">
|
|
"<span id="loadcontainerdelete-storyname"></span>" will be PERMANENTLY deleted! You will not be able to recover this story later.
|
|
</div>
|
|
<div class="popuperror hidden">
|
|
<span></span>
|
|
</div>
|
|
<div class="popupfooter">
|
|
<button type="button" class="btn btn-danger" id="btn_dsaccept">Delete</button>
|
|
<button type="button" class="btn btn-primary" id="btn_dsclose">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="popupcontainer hidden" id="loadcontainerrename">
|
|
<div id="loadpopuprename">
|
|
<div class="popuptitlebar">
|
|
<div class="popuptitletext">Enter New Name For Story</div>
|
|
</div>
|
|
<div class="dialogheader">
|
|
What should the story "<span id="loadcontainerrename-storyname"></span>" be renamed to?
|
|
<input class="form-control" type="text" placeholder="New Save Name" id="newsavename">
|
|
</div>
|
|
<div class="popuperror hidden">
|
|
<span></span>
|
|
</div>
|
|
<div class="saveasoverwrite hidden">
|
|
<span>File already exists. Really overwrite?</span>
|
|
</div>
|
|
<div class="popupfooter">
|
|
<button type="button" class="btn btn-primary" id="btn_rensaccept">Accept</button>
|
|
<button type="button" class="btn btn-primary" id="btn_rensclose">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="popupcontainer hidden" id="newgamecontainer">
|
|
<div id="nspopup">
|
|
<div class="popuptitlebar">
|
|
<div class="popuptitletext">Really Start A New Story?</div>
|
|
</div>
|
|
<div class="aidgpopuplistheader">
|
|
Unsaved data will be lost.
|
|
</div>
|
|
<div class="popupfooter">
|
|
<button type="button" class="btn btn-primary" id="btn_nsaccept">Accept</button>
|
|
<button type="button" class="btn btn-primary" id="btn_nsclose">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="popupcontainer hidden" id="rndgamecontainer">
|
|
<div id="rspopup">
|
|
<div class="popuptitlebar">
|
|
<div class="popuptitletext">Really Start A Random Story?</div>
|
|
</div>
|
|
<div class="aidgpopuplistheader">
|
|
<br>
|
|
Story quality and topic depends on the model and your settings/suggestion (Around 0.5 temp is recommended).<br>
|
|
This feature works best with finetuned models like GPT-Neo-AID or GPT-Neo-Horni but is limited to what the AI knows.<br>
|
|
If you get random spam then your model is not capable of using this feature and if you get unrelated stories it does not understand the topic.<br>
|
|
Generated results are unfiltered and can be offensive or unsuitable for children.<br><br>
|
|
Unsaved data will be lost.<br><br>
|
|
Below you can input a genre suggestion for the AI to loosely base the story on (For example Horror or Cowboy).<br>
|
|
</div>
|
|
<div class="aidgpopupcontent">
|
|
<input class="form-control" type="text" placeholder="Story Genre Suggestion (Leave blank for fully random)" id="topic">
|
|
</div>
|
|
<div class="popupfooter">
|
|
<button type="button" class="btn btn-primary" id="btn_rsaccept">Accept</button>
|
|
<button type="button" class="btn btn-primary" id="btn_rsclose">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|