From b50d2d6d2b9ff80a324060bf1a75cdbd50f85996 Mon Sep 17 00:00:00 2001
From: somebody <onesome01@protonmail.com>
Date: Sat, 8 Oct 2022 21:13:57 -0500
Subject: [PATCH] Fix for chrome slow filter repaint on tooltip

good ol browser performance bugs
---
 static/koboldai.css |  1 +
 static/koboldai.js  | 24 +++++++++++++++++++++---
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/static/koboldai.css b/static/koboldai.css
index c16d1a35..9e602190 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -1879,6 +1879,7 @@ body {
 }
 
 .context-token {
+	position: relative;
 	background-color: inherit;
 }
 
diff --git a/static/koboldai.js b/static/koboldai.js
index 4377c52e..6b33fb22 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -2835,6 +2835,22 @@ function update_bias_slider_value(slider) {
 	slider.parentElement.parentElement.querySelector(".bias_slider_cur").textContent = slider.value;
 }
 
+function distortColor(rgb) {
+	// rgb are 0..255, NOT NORMALIZED!!!!!!
+	const brightnessTamperAmplitude = 0.1;
+	const psuedoHue = 12;
+
+	let brightnessDistortion = Math.random() * (255 * brightnessTamperAmplitude);
+	rgb = rgb.map(x => x + brightnessDistortion);
+
+	// Cheap hack to imitate hue rotation
+	rgb = rgb.map(x => x += (Math.random() * psuedoHue * 2) - psuedoHue);
+
+	// Clamp and round
+	rgb = rgb.map(x => Math.round(Math.max(0, Math.min(255, x))));
+	return rgb;
+}
+
 function update_context(data) {
 	$(".context-block").remove();
 
@@ -2868,15 +2884,17 @@ function update_context(data) {
 			{classes: ["context-block", contextClass]}
 		);
 
+		let rgb = window.getComputedStyle(el)["background-color"].match(/(\d+), (\d+), (\d+)/).slice(1, 4).map(Number);
+
 		for (const [tokenId, token] of entry.tokens) {
-			let bright = 0.8 + (Math.random() * 0.2);
-			let hue = Math.random() * 20;
+			let tokenColor = distortColor(rgb);
+			tokenColor = "#" + (tokenColor.map((x) => x.toString(16)).join(""));
 
 			let tokenEl = $e("span", el, {
 				classes: ["context-token"],
 				"token-id": tokenId === -1 ? "Soft" : tokenId,
 				innerText: token,
-				"style.filter": `brightness(${bright}) hue-rotate(${hue}deg)`
+				"style.backgroundColor": tokenColor,
 			});
 
 			tokenEl.innerHTML = tokenEl.innerHTML.replaceAll("<br>", '<span class="material-icons-outlined context-symbol">keyboard_return</span>');