mirror of
https://github.com/SillyTavern/SillyTavern.git
synced 2025-06-05 21:59:27 +02:00
down the rabbit hole
This commit is contained in:
RossAscends
@@ -1133,39 +1133,51 @@ function setAvgBG() {
|
||||
.replace(/^url\(['"]?/, '')
|
||||
.replace(/['"]?\)$/, '');
|
||||
|
||||
const charAvatar = new Image()
|
||||
charAvatar.src = $("#avatar_load_preview")
|
||||
.attr('src')
|
||||
.replace(/^url\(['"]?/, '')
|
||||
.replace(/['"]?\)$/, '');
|
||||
|
||||
const userAvatar = new Image()
|
||||
userAvatar.src = $("#user_avatar_block .avatar.selected img")
|
||||
.attr('src')
|
||||
.replace(/^url\(['"]?/, '')
|
||||
.replace(/['"]?\)$/, '');
|
||||
/* const charAvatar = new Image()
|
||||
charAvatar.src = $("#avatar_load_preview")
|
||||
.attr('src')
|
||||
.replace(/^url\(['"]?/, '')
|
||||
.replace(/['"]?\)$/, '');
|
||||
|
||||
const userAvatar = new Image()
|
||||
userAvatar.src = $("#user_avatar_block .avatar.selected img")
|
||||
.attr('src')
|
||||
.replace(/^url\(['"]?/, '')
|
||||
.replace(/['"]?\)$/, ''); */
|
||||
|
||||
|
||||
bgimg.onload = function () {
|
||||
var rgb = getAverageRGB(bgimg);
|
||||
console.log(`average color of the bg is:`)
|
||||
console.log(rgb);
|
||||
//console.log(`average color of the bg is:`)
|
||||
//console.log(rgb);
|
||||
$("#blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
|
||||
|
||||
const backgroundColorString = $("#blur-tint-color-picker").attr('color')
|
||||
.replace('rgba', '')
|
||||
.replace('rgb', '')
|
||||
.replace('(', '[')
|
||||
.replace(')', ']'); //[50, 120, 200, 1]; // Example background color
|
||||
const backgroundColorArray = JSON.parse(backgroundColorString) //[200, 200, 200, 1]
|
||||
console.log(backgroundColorArray)
|
||||
$("#main-text-color-picker").attr('color', getReadableTextColor(backgroundColorArray));
|
||||
console.log($("#main-text-color-picker").attr('color')); // Output: 'rgba(0, 47, 126, 1)'
|
||||
}
|
||||
|
||||
charAvatar.onload = function () {
|
||||
var rgb = getAverageRGB(charAvatar);
|
||||
console.log(`average color of the AI avatar is:`);
|
||||
console.log(rgb);
|
||||
$("#bot-mes-blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
|
||||
}
|
||||
/* charAvatar.onload = function () {
|
||||
var rgb = getAverageRGB(charAvatar);
|
||||
//console.log(`average color of the AI avatar is:`);
|
||||
//console.log(rgb);
|
||||
$("#bot-mes-blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
|
||||
}
|
||||
|
||||
userAvatar.onload = function () {
|
||||
var rgb = getAverageRGB(userAvatar);
|
||||
//console.log(`average color of the user avatar is:`);
|
||||
//console.log(rgb);
|
||||
$("#user-mes-blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
|
||||
} */
|
||||
|
||||
|
||||
userAvatar.onload = function () {
|
||||
var rgb = getAverageRGB(userAvatar);
|
||||
console.log(`average color of the user avatar is:`);
|
||||
console.log(rgb);
|
||||
$("#user-mes-blur-tint-color-picker").attr('color', 'rgb(' + rgb.r + ',' + rgb.g + ',' + rgb.b + ')');
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1212,6 +1224,131 @@ function setAvgBG() {
|
||||
return rgb;
|
||||
|
||||
}
|
||||
|
||||
function hslToRgb(h, s, l) {
|
||||
const hueToRgb = (p, q, t) => {
|
||||
if (t < 0) t += 1;
|
||||
if (t > 1) t -= 1;
|
||||
if (t < 1 / 6) return p + (q - p) * 6 * t;
|
||||
if (t < 1 / 2) return q;
|
||||
if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
|
||||
return p;
|
||||
};
|
||||
|
||||
if (s === 0) {
|
||||
return [l, l, l];
|
||||
}
|
||||
|
||||
const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
|
||||
const p = 2 * l - q;
|
||||
const r = hueToRgb(p, q, h + 1 / 3);
|
||||
const g = hueToRgb(p, q, h);
|
||||
const b = hueToRgb(p, q, h - 1 / 3);
|
||||
|
||||
return [r * 255, g * 255, b * 255];
|
||||
}
|
||||
|
||||
function rgbToLuminance(r, g, b) {
|
||||
console.log(r, g, b)
|
||||
const gammaCorrect = (color) => {
|
||||
return color <= 0.03928
|
||||
? color / 12.92
|
||||
: Math.pow((color + 0.055) / 1.055, 2.4);
|
||||
};
|
||||
|
||||
const rsRGB = r / 255;
|
||||
const gsRGB = g / 255;
|
||||
const bsRGB = b / 255;
|
||||
|
||||
const rLuminance = gammaCorrect(rsRGB).toFixed(2);
|
||||
const gLuminance = gammaCorrect(gsRGB).toFixed(2);
|
||||
const bLuminance = gammaCorrect(bsRGB).toFixed(2);
|
||||
|
||||
console.log(`rLum ${rLuminance}, gLum ${gLuminance}, bLum ${bLuminance}`)
|
||||
|
||||
return 0.2126 * rLuminance + 0.7152 * gLuminance + 0.0722 * bLuminance;
|
||||
}
|
||||
|
||||
//this version keeps BG and main text in same hue
|
||||
/* function getReadableTextColor(rgb) {
|
||||
const [r, g, b] = rgb;
|
||||
|
||||
// Convert RGB to HSL
|
||||
const rgbToHsl = (r, g, b) => {
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
const d = max - min;
|
||||
const l = (max + min) / 2;
|
||||
|
||||
if (d === 0) return [0, 0, l];
|
||||
|
||||
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
const h = (() => {
|
||||
switch (max) {
|
||||
case r:
|
||||
return (g - b) / d + (g < b ? 6 : 0);
|
||||
case g:
|
||||
return (b - r) / d + 2;
|
||||
case b:
|
||||
return (r - g) / d + 4;
|
||||
}
|
||||
})() / 6;
|
||||
|
||||
return [h, s, l];
|
||||
};
|
||||
const [h, s, l] = rgbToHsl(r / 255, g / 255, b / 255);
|
||||
|
||||
// Calculate appropriate text color based on background color
|
||||
const targetLuminance = l > 0.5 ? 0.2 : 0.8;
|
||||
const targetSaturation = s > 0.5 ? s - 0.2 : s + 0.2;
|
||||
const [rNew, gNew, bNew] = hslToRgb(h, targetSaturation, targetLuminance);
|
||||
|
||||
// Return the text color in RGBA format
|
||||
return `rgba(${rNew.toFixed(0)}, ${gNew.toFixed(0)}, ${bNew.toFixed(0)}, 1)`;
|
||||
}*/
|
||||
|
||||
//this version makes main text complimentary color to BG color
|
||||
function getReadableTextColor(rgb) {
|
||||
const [r, g, b] = rgb;
|
||||
|
||||
// Convert RGB to HSL
|
||||
const rgbToHsl = (r, g, b) => {
|
||||
const max = Math.max(r, g, b);
|
||||
const min = Math.min(r, g, b);
|
||||
const d = max - min;
|
||||
const l = (max + min) / 2;
|
||||
|
||||
if (d === 0) return [0, 0, l];
|
||||
|
||||
const s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
|
||||
const h = (() => {
|
||||
switch (max) {
|
||||
case r:
|
||||
return (g - b) / d + (g < b ? 6 : 0);
|
||||
case g:
|
||||
return (b - r) / d + 2;
|
||||
case b:
|
||||
return (r - g) / d + 4;
|
||||
}
|
||||
})() / 6;
|
||||
|
||||
return [h, s, l];
|
||||
};
|
||||
const [h, s, l] = rgbToHsl(r / 255, g / 255, b / 255);
|
||||
|
||||
// Calculate complementary color based on background color
|
||||
const complementaryHue = (h + 0.5) % 1;
|
||||
const complementarySaturation = s > 0.5 ? s - 0.2 : s + 0.2;
|
||||
const complementaryLuminance = l > 0.5 ? 0.2 : 0.8;
|
||||
|
||||
// Convert complementary color back to RGB
|
||||
const [rNew, gNew, bNew] = hslToRgb(complementaryHue, complementarySaturation, complementaryLuminance);
|
||||
|
||||
// Return the text color in RGBA format
|
||||
return `rgba(${rNew.toFixed(0)}, ${gNew.toFixed(0)}, ${bNew.toFixed(0)}, 1)`;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
$(document).ready(() => {
|
||||
|
||||
Reference in New Issue
Block a user