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

Token view inital work

Browse Source
This commit is contained in:
somebody
2022-10-06 19:34:24 -05:00
parent 5aeee019dc
commit 5eeaef33e9
4 changed files with 63 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
static/koboldai.css
View File

@@ -1867,16 +1867,21 @@ body {
font-family: monospace;
}
.context-block:hover {
.context-token {
/* Tooltip tries to make this inline-block. No!!!! */
display: inline !important;
}
.context-token:hover {
outline: 1px solid gray;
}
.context-sp {background-color: var(--context_colors_soft_prompt);}
.context-prompt {background-color: var(--context_colors_prompt);}
.context-wi {background-color: var(--context_colors_world_info);}
.context-memory {background-color: var(--context_colors_memory);}
.context-an {background-color: var(--context_colors_authors_notes);}
.context-action {background-color: var(--context_colors_game_text);}
.context-sp > .context-token {background-color: var(--context_colors_soft_prompt);}
.context-prompt > .context-token {background-color: var(--context_colors_prompt);}
.context-wi > .context-token {background-color: var(--context_colors_world_info);}
.context-memory > .context-token {background-color: var(--context_colors_memory);}
.context-an > .context-token {background-color: var(--context_colors_authors_notes);}
.context-action > .context-token {background-color: var(--context_colors_game_text);}
/* File Drag Indicator */
#file-upload-notice {
@@ -2544,30 +2549,33 @@ input[type='range'] {
/*Tooltip based on attribute*/
[tooltip] {
cursor: pointer;
display: inline-block;
line-height: 1;
position: relative;
cursor: pointer;
display: inline-block;
line-height: 1;
position: relative;
}
[tooltip]::after {
background-color: rgba(51, 51, 51, 0.9);
border-radius: 0.3rem;
color: #fff;
content: attr(tooltip);
font-size: 1rem;
font-size: 85%;
font-weight: normal;
line-height: 1.15rem;
opacity: 0;
padding: 0.25rem 0.5rem;
position: absolute;
text-align: center;
text-transform: none;
transition: opacity 0.2s;
visibility: hidden;
white-space: nowrap;
z-index: 1;
background-color: rgba(51, 51, 51, 0.9);
border-radius: 0.3rem;
color: #fff;
content: attr(tooltip);
font-size: 1rem;
font-size: 85%;
font-weight: normal;
line-height: 1.15rem;
opacity: 0;
padding: 0.25rem 0.5rem;
position: absolute;
text-align: center;
text-transform: none;
transition: opacity 0.2s;
visibility: hidden;
white-space: nowrap;
z-index: 9999;
pointer-events: none;
}
@media (max-width: 767px) {
[tooltip].tooltip::before {
display: none;

28
static/koboldai.js
View File

@@ -2883,13 +2883,31 @@ function update_context(data) {
action: "action"
}[entry.type]);
let el = document.createElement("span");
el.classList.add("context-block");
el.classList.add(contextClass);
el.innerText = entry.text;
let el = $e(
"span",
$el("#context-container"),
{classes: ["context-block", contextClass]}
);
//el.innerText = entry.text;
el.innerHTML = el.innerHTML.replaceAll("<br>", '<span class="material-icons-outlined context-symbol">keyboard_return</span>');
let encodedChunk = encode(entry.text);
for (const token of encodedChunk) {
// let bright = 1 - ((token / vocab_size) * 0.4);
//let hue = ((token / vocab_size) - 0.5) * 20
let bright = 0.8 + (Math.random() * 0.2);
let hue = Math.random() * 20;
let tokenEl = $e("span", el, {
classes: ["context-token"],
"token-id": token,
"tooltip": token,
innerText: decode([token]),
"style.filter": `brightness(${bright}) hue-rotate(${hue}deg)`
});
tokenEl.innerHTML = tokenEl.innerHTML.replaceAll("<br>", '<span class="material-icons-outlined context-symbol">keyboard_return</span>');
}
document.getElementById("context-container").appendChild(el);
}

3
static/tokenizer.js
View File

@@ -1,6 +1,9 @@
import encoder from "./encoder.js";
import bpe_file from "./vocab.bpe.js";
// Assumes tokens are in order!!!
export const vocab_size = Math.max(...Object.values(encoder));
const range = (x, y) => {
const res = Array.from(Array(y).keys()).slice(x)
return res

2
templates/index_new.html
View File

@@ -9,7 +9,7 @@
// debug_info.push({msg: message, url: url, line: line});
});
</script>
<script type="module">import {encode, decode} from "./static/tokenizer.js";window.encode = encode;window.decode = decode;</script>
<script type="module">import {vocab_size, encode, decode} from "./static/tokenizer.js";window.encode = encode;window.decode = decode;window.vocab_size = vocab_size;</script>
<link href="static/open-iconic/css/open-iconic.css" rel="stylesheet">
<link rel="stylesheet" href="static/bootstrap-toggle.min.css">
<link rel="stylesheet" href="static/bootstrap.min.css">