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

Improve context viewer

Browse Source
This commit is contained in:
somebody
2022-08-28 17:54:21 -05:00
parent b964834982
commit 01d8736daf
3 changed files with 59 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
static/koboldai.css
View File

@@ -809,6 +809,7 @@ td.server_vars {
padding-right: 35px;
margin-bottom: 10px;
flex-shrink: 0;
cursor: pointer;
}
.token_breakdown div {
@@ -1597,6 +1598,16 @@ body {
margin-bottom: 3px;
}
#context-viewer-header-right {
display: flex;
flex-direction: row;
}
#context-viewer-close {
cursor: pointer;
float: right;
}
#context-viewer-header > h3 {
margin: 0px;
margin-top: 3px;
@@ -1606,13 +1617,28 @@ body {
overflow-y: auto;
height: 100%;
flex-grow: 1;
padding: 0px 10px
padding: 0px 10px;
}
.context-symbol {
font-size: 1em !important;
position: relative;
top: 3px;
opacity: 0.5;
}
.context-block {
margin: 0px 2px;
}
.context-block:hover {
outline: 1px solid gray;
}
.context-block.example:hover {
outline: none !important;
}
.context-sp {background-color: orangered;}
.context-prompt {background-color: orange;}
.context-wi {background-color: #1751b9;}
@@ -1783,7 +1809,11 @@ h2 .material-icons-outlined {
cursor: pointer;
}
.material-icons-outlined, .collapsable_header, .section_header, .help_text {
.material-icons-outlined,
.collapsable_header,
.section_header,
.help_text,
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;

10
static/koboldai.js
View File

@@ -2065,6 +2065,8 @@ function update_context(data) {
el.classList.add(contextClass);
el.innerText = entry.text;
el.innerHTML = el.innerHTML.replaceAll("<br>", '<span class="material-icons-outlined context-symbol">keyboard_return</span>');
document.getElementById("context-container").appendChild(el);
}
@@ -2905,4 +2907,12 @@ $(document).ready(function(){
if (enabledTweaks.includes(path)) toggle.click();
}
$("#context-viewer-close").click(function() {
document.getElementById("context-viewer-container").classList.add("hidden");
});
$(".token_breakdown").click(function() {
document.getElementById("context-viewer-container").classList.remove("hidden");
});
});

27
templates/index_new.html
View File

@@ -113,22 +113,29 @@
</div>
<iframe id="download_iframe" style="display:none;"></iframe>
<div id="context-viewer-container">
<div id="context-viewer-container" class="hidden">
<div id="context-viewer">
<div id="context-viewer-header">
<h3>Context Viewer</h3>
<div id="context-viewer-key">
<span>Key:</span>
<h3 class="noselect">Context Viewer</h3>
<div id="context-viewer-header-right">
<div>
<span class="example context-block context-sp">Soft Prompt</span>
<span class="example context-block context-prompt">Prompt</span>
<span class="example context-block context-wi">World Info</span>
<span class="example context-block context-memory">Memory</span>
<span class="example context-block context-an">Author's Note</span>
<span class="example context-block context-action">Action</span>
<span class="noselect">Key:</span>
<div>
<span class="noselect example context-block context-sp">Soft Prompt</span>
<span class="noselect example context-block context-prompt">Prompt</span>
<span class="noselect example context-block context-wi">World Info</span>
<span class="noselect example context-block context-memory">Memory</span>
<span class="noselect example context-block context-an">Author's Note</span>
<span class="noselect example context-block context-action">Action</span>
</div>
</div>
<span id="context-viewer-close" class="material-icons-outlined">close</span>
</div>
</div>
<span class="help_text">
Context is the text the AI is sent when you ask it to generate text.
As the context is limited in size, you can use the Context Viewer to check if things you want the AI to know are in the context.
</span>
<div id="context-container"></div>
</div>
</div>