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

24
static/koboldai.css
View File

@@ -1867,16 +1867,21 @@ body {
font-family: monospace; 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; outline: 1px solid gray;
} }
.context-sp {background-color: var(--context_colors_soft_prompt);} .context-sp > .context-token {background-color: var(--context_colors_soft_prompt);}
.context-prompt {background-color: var(--context_colors_prompt);} .context-prompt > .context-token {background-color: var(--context_colors_prompt);}
.context-wi {background-color: var(--context_colors_world_info);} .context-wi > .context-token {background-color: var(--context_colors_world_info);}
.context-memory {background-color: var(--context_colors_memory);} .context-memory > .context-token {background-color: var(--context_colors_memory);}
.context-an {background-color: var(--context_colors_authors_notes);} .context-an > .context-token {background-color: var(--context_colors_authors_notes);}
.context-action {background-color: var(--context_colors_game_text);} .context-action > .context-token {background-color: var(--context_colors_game_text);}
/* File Drag Indicator */ /* File Drag Indicator */
#file-upload-notice { #file-upload-notice {
@@ -2549,6 +2554,7 @@ input[type='range'] {
line-height: 1; line-height: 1;
position: relative; position: relative;
} }
[tooltip]::after { [tooltip]::after {
background-color: rgba(51, 51, 51, 0.9); background-color: rgba(51, 51, 51, 0.9);
border-radius: 0.3rem; border-radius: 0.3rem;
@@ -2566,8 +2572,10 @@ input[type='range'] {
transition: opacity 0.2s; transition: opacity 0.2s;
visibility: hidden; visibility: hidden;
white-space: nowrap; white-space: nowrap;
z-index: 1; z-index: 9999;
pointer-events: none;
} }
@media (max-width: 767px) { @media (max-width: 767px) {
[tooltip].tooltip::before { [tooltip].tooltip::before {
display: none; display: none;

28
static/koboldai.js
View File

@@ -2883,13 +2883,31 @@ function update_context(data) {
action: "action" action: "action"
}[entry.type]); }[entry.type]);
let el = document.createElement("span"); let el = $e(
el.classList.add("context-block"); "span",
el.classList.add(contextClass); $el("#context-container"),
el.innerText = entry.text; {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); document.getElementById("context-container").appendChild(el);
} }

3
static/tokenizer.js
View File

@@ -1,6 +1,9 @@
import encoder from "./encoder.js"; import encoder from "./encoder.js";
import bpe_file from "./vocab.bpe.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 range = (x, y) => {
const res = Array.from(Array(y).keys()).slice(x) const res = Array.from(Array(y).keys()).slice(x)
return res return res

2
templates/index_new.html
View File

@@ -9,7 +9,7 @@
// debug_info.push({msg: message, url: url, line: line}); // debug_info.push({msg: message, url: url, line: line});
}); });
</script> </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 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-toggle.min.css">
<link rel="stylesheet" href="static/bootstrap.min.css"> <link rel="stylesheet" href="static/bootstrap.min.css">