Spaces:
Running
on
Zero
Running
on
Zero
Update _res/_custom.js
Browse files- _res/_custom.js +98 -97
_res/_custom.js
CHANGED
|
@@ -1,97 +1,98 @@
|
|
| 1 |
-
function gradioCustomJS() {
|
| 2 |
-
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
| 20 |
-
|
| 21 |
-
|
| 22 |
-
|
| 23 |
-
|
| 24 |
-
|
| 25 |
-
|
| 26 |
-
|
| 27 |
-
|
| 28 |
-
|
| 29 |
-
|
| 30 |
-
|
| 31 |
-
|
| 32 |
-
|
| 33 |
-
|
| 34 |
-
|
| 35 |
-
|
| 36 |
-
|
| 37 |
-
|
| 38 |
-
|
| 39 |
-
|
| 40 |
-
|
| 41 |
-
|
| 42 |
-
|
| 43 |
-
|
| 44 |
-
|
| 45 |
-
|
| 46 |
-
|
| 47 |
-
|
| 48 |
-
|
| 49 |
-
|
| 50 |
-
|
| 51 |
-
|
| 52 |
-
|
| 53 |
-
|
| 54 |
-
|
| 55 |
-
|
| 56 |
-
|
| 57 |
-
|
| 58 |
-
|
| 59 |
-
|
| 60 |
-
|
| 61 |
-
|
| 62 |
-
|
| 63 |
-
|
| 64 |
-
|
| 65 |
-
|
| 66 |
-
|
| 67 |
-
|
| 68 |
-
|
| 69 |
-
|
| 70 |
-
|
| 71 |
-
|
| 72 |
-
|
| 73 |
-
|
| 74 |
-
|
| 75 |
-
|
| 76 |
-
|
| 77 |
-
|
| 78 |
-
|
| 79 |
-
|
| 80 |
-
|
| 81 |
-
|
| 82 |
-
|
| 83 |
-
|
| 84 |
-
|
| 85 |
-
|
| 86 |
-
|
| 87 |
-
|
| 88 |
-
|
| 89 |
-
|
| 90 |
-
|
| 91 |
-
|
| 92 |
-
|
| 93 |
-
|
| 94 |
-
|
| 95 |
-
|
| 96 |
-
|
| 97 |
-
|
|
|
|
|
|
| 1 |
+
function gradioCustomJS() {
|
| 2 |
+
console.log("gradioCustomJS Started");
|
| 3 |
+
|
| 4 |
+
// MARK: berechne Helligkeit der Akzentfarbe
|
| 5 |
+
function berechneHelligkeit(rgb) {
|
| 6 |
+
const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
| 7 |
+
if (!match) {
|
| 8 |
+
throw new Error("Ungültiges Farbformat");
|
| 9 |
+
}
|
| 10 |
+
|
| 11 |
+
const r = parseInt(match[1]) / 255;
|
| 12 |
+
const g = parseInt(match[2]) / 255;
|
| 13 |
+
const b = parseInt(match[3]) / 255;
|
| 14 |
+
|
| 15 |
+
const rLin = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
|
| 16 |
+
const gLin = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
|
| 17 |
+
const bLin = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
|
| 18 |
+
|
| 19 |
+
const luminanz = 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin;
|
| 20 |
+
|
| 21 |
+
return luminanz;
|
| 22 |
+
}
|
| 23 |
+
|
| 24 |
+
// MARK: Textfarbe bestimmen
|
| 25 |
+
function anpasseTextfarbe(farbe) {
|
| 26 |
+
const luminanz = berechneHelligkeit(farbe);
|
| 27 |
+
const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)";
|
| 28 |
+
console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe);
|
| 29 |
+
|
| 30 |
+
return textFarbe;
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
// MARK: Body Styles
|
| 34 |
+
const body = document.querySelector("body");
|
| 35 |
+
body.className = "dark";
|
| 36 |
+
|
| 37 |
+
// Catppuccin colors
|
| 38 |
+
const rosewater = "245, 224, 220";
|
| 39 |
+
const flamingo = "242, 205, 205";
|
| 40 |
+
const pink = "245, 194, 231";
|
| 41 |
+
const mauve = "203, 166, 247";
|
| 42 |
+
const red = "243, 139, 168";
|
| 43 |
+
const maroon = "235, 160, 172";
|
| 44 |
+
const peach = "250, 179, 135";
|
| 45 |
+
const yellow = "249, 226, 175";
|
| 46 |
+
const green = "166, 227, 161";
|
| 47 |
+
const teal = "148, 226, 213";
|
| 48 |
+
const sky = "137, 220, 235";
|
| 49 |
+
const sapphire = "116, 199, 236";
|
| 50 |
+
const blue = "137, 180, 250";
|
| 51 |
+
|
| 52 |
+
let colors = [rosewater, flamingo, pink, mauve, red, maroon, peach, yellow, green, teal, sky, sapphire, blue];
|
| 53 |
+
//let usedColor = `rgb(${colors[Math.floor(Math.random() * colors.length)]})`
|
| 54 |
+
let usedColor = `rgb(${sapphire})`;
|
| 55 |
+
const textColorByLuminance = anpasseTextfarbe(usedColor);
|
| 56 |
+
|
| 57 |
+
body.style.setProperty("--cat-rosewater", "rgb(" + rosewater + ")");
|
| 58 |
+
body.style.setProperty("--cat-flamingo", "rgb(" + flamingo + ")");
|
| 59 |
+
body.style.setProperty("--cat-pink", "rgb(" + pink + ")");
|
| 60 |
+
body.style.setProperty("--cat-mauve", "rgb(" + mauve + ")");
|
| 61 |
+
body.style.setProperty("--cat-red", "rgb(" + red + ")");
|
| 62 |
+
body.style.setProperty("--cat-maroon", "rgb(" + maroon + ")");
|
| 63 |
+
body.style.setProperty("--cat-peach", "rgb(" + peach + ")");
|
| 64 |
+
body.style.setProperty("--cat-yellow", "rgb(" + yellow + ")");
|
| 65 |
+
body.style.setProperty("--cat-green", "rgb(" + green + ")");
|
| 66 |
+
body.style.setProperty("--cat-teal", "rgb(" + teal + ")");
|
| 67 |
+
body.style.setProperty("--cat-sky", "rgb(" + sky + ")");
|
| 68 |
+
body.style.setProperty("--cat-sapphire", "rgb(" + sapphire + ")");
|
| 69 |
+
body.style.setProperty("--cat-blue", "rgb(" + blue + ")");
|
| 70 |
+
|
| 71 |
+
body.style.setProperty("--primary-600", usedColor);
|
| 72 |
+
body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)");
|
| 73 |
+
body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-600) 10%, white)");
|
| 74 |
+
body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-600) 20%, white)");
|
| 75 |
+
body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-600) 60%, white)");
|
| 76 |
+
body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-600) 70%, white)");
|
| 77 |
+
body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-600) 80%, white)");
|
| 78 |
+
body.style.setProperty("--primary-700", "color-mix(in srgb, var(--primary-600) 80%, black)");
|
| 79 |
+
body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 65%, black)");
|
| 80 |
+
body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 40%, black)");
|
| 81 |
+
body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 30%, black)");
|
| 82 |
+
|
| 83 |
+
body.style.setProperty("--button-primary-background-fill", "var(--primary-600)");
|
| 84 |
+
body.style.setProperty("--button-primary-background-fill-hover", "var(--primary-500)");
|
| 85 |
+
body.style.setProperty("--blur-value", "0px");
|
| 86 |
+
|
| 87 |
+
body.style.setProperty("--text-color-by-luminance", textColorByLuminance);
|
| 88 |
+
body.style.setProperty("--block-label-text-color", textColorByLuminance);
|
| 89 |
+
body.style.setProperty("--block-title-text-color", textColorByLuminance);
|
| 90 |
+
body.style.setProperty("--button-primary-text-color", textColorByLuminance);
|
| 91 |
+
body.style.setProperty("--checkbox-label-text-color-selected", textColorByLuminance);
|
| 92 |
+
|
| 93 |
+
// MARK: SVG Animationen & Emojis
|
| 94 |
+
// document.querySelector(".row-header i#wink").innerHTML = ''
|
| 95 |
+
// document.querySelector(".row-header i.heart-beat-emoji").innerHTML = ''
|
| 96 |
+
|
| 97 |
+
return "Animation created";
|
| 98 |
+
}
|