Update _res/_custom.js

_res/_custom.js

@@ -1,98 +1,98 @@
-function gradioCustomJS() {
-  console.log("gradioCustomJS Started");
-
-  // MARK: berechne Helligkeit der Akzentfarbe
-  function berechneHelligkeit(rgb) {
-    const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
-    if (!match) {
-      throw new Error("Ungültiges Farbformat");
-    }
-
-    const r = parseInt(match[1]) / 255;
-    const g = parseInt(match[2]) / 255;
-    const b = parseInt(match[3]) / 255;
-
-    const rLin = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
-    const gLin = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
-    const bLin = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
-
-    const luminanz = 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin;
-
-    return luminanz;
-  }
-
-  // MARK: Textfarbe bestimmen
-  function anpasseTextfarbe(farbe) {
-    const luminanz = berechneHelligkeit(farbe);
-    const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)";
-    console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe);
-
-    return textFarbe;
-  }
-
-  // MARK: Body Styles
-  const body = document.querySelector("body");
-  body.className = "dark";
-
-  // Catppuccin colors
-  const rosewater = "245, 224, 220";
-  const flamingo = "242, 205, 205";
-  const pink = "245, 194, 231";
-  const mauve = "203, 166, 247";
-  const red = "243, 139, 168";
-  const maroon = "235, 160, 172";
-  const peach = "250, 179, 135";
-  const yellow = "249, 226, 175";
-  const green = "166, 227, 161";
-  const teal = "148, 226, 213";
-  const sky = "137, 220, 235";
-  const sapphire = "116, 199, 236";
-  const blue = "137, 180, 250";
-
-  let colors = [rosewater, flamingo, pink, mauve, red, maroon, peach, yellow, green, teal, sky, sapphire, blue];
-  //let usedColor = `rgb(${colors[Math.floor(Math.random() * colors.length)]})`
-  let usedColor = `rgb(${sky})`;
-  const textColorByLuminance = anpasseTextfarbe(usedColor);
-
-  body.style.setProperty("--cat-rosewater", "rgb(" + rosewater + ")");
-  body.style.setProperty("--cat-flamingo", "rgb(" + flamingo + ")");
-  body.style.setProperty("--cat-pink", "rgb(" + pink + ")");
-  body.style.setProperty("--cat-mauve", "rgb(" + mauve + ")");
-  body.style.setProperty("--cat-red", "rgb(" + red + ")");
-  body.style.setProperty("--cat-maroon", "rgb(" + maroon + ")");
-  body.style.setProperty("--cat-peach", "rgb(" + peach + ")");
-  body.style.setProperty("--cat-yellow", "rgb(" + yellow + ")");
-  body.style.setProperty("--cat-green", "rgb(" + green + ")");
-  body.style.setProperty("--cat-teal", "rgb(" + teal + ")");
-  body.style.setProperty("--cat-sky", "rgb(" + sky + ")");
-  body.style.setProperty("--cat-sapphire", "rgb(" + sapphire + ")");
-  body.style.setProperty("--cat-blue", "rgb(" + blue + ")");
-
-  body.style.setProperty("--primary-600", usedColor);
-  body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)");
-  body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-600) 10%, white)");
-  body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-600) 20%, white)");
-  body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-600) 60%, white)");
-  body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-600) 70%, white)");
-  body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-600) 80%, white)");
-  body.style.setProperty("--primary-700", "color-mix(in srgb, var(--primary-600) 80%, black)");
-  body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 65%, black)");
-  body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 40%, black)");
-  body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 30%, black)");
-
-  body.style.setProperty("--button-primary-background-fill", "var(--primary-600)");
-  body.style.setProperty("--button-primary-background-fill-hover", "var(--primary-500)");
-  body.style.setProperty("--blur-value", "0px");
-
-  body.style.setProperty("--text-color-by-luminance", textColorByLuminance);
-  body.style.setProperty("--block-label-text-color", textColorByLuminance);
-  body.style.setProperty("--block-title-text-color", textColorByLuminance);
-  body.style.setProperty("--button-primary-text-color", textColorByLuminance);
-  body.style.setProperty("--checkbox-label-text-color-selected", textColorByLuminance);
-
-  // MARK: SVG Animationen & Emojis
-  // document.querySelector(".row-header i#wink").innerHTML = ''
-  // document.querySelector(".row-header i.heart-beat-emoji").innerHTML = ''
-
-  return "Animation created";
-}
+function gradioCustomJS() {
+  console.log("gradioCustomJS Started");
+
+  // MARK: berechne Helligkeit der Akzentfarbe
+  function berechneHelligkeit(rgb) {
+    const match = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+    if (!match) {
+      throw new Error("Ungültiges Farbformat");
+    }
+
+    const r = parseInt(match[1]) / 255;
+    const g = parseInt(match[2]) / 255;
+    const b = parseInt(match[3]) / 255;
+
+    const rLin = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
+    const gLin = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
+    const bLin = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);
+
+    const luminanz = 0.2126 * rLin + 0.7152 * gLin + 0.0722 * bLin;
+
+    return luminanz;
+  }
+
+  // MARK: Textfarbe bestimmen
+  function anpasseTextfarbe(farbe) {
+    const luminanz = berechneHelligkeit(farbe);
+    const textFarbe = luminanz > 0.4 ? "var(--neutral-950)" : "var(--neutral-50)";
+    console.log("Luminanz: " + luminanz + " Text-Farbe: " + textFarbe);
+
+    return textFarbe;
+  }
+
+  // MARK: Body Styles
+  const body = document.querySelector("body");
+  body.className = "dark";
+
+  // Catppuccin colors
+  const rosewater = "245, 224, 220";
+  const flamingo = "242, 205, 205";
+  const pink = "245, 194, 231";
+  const mauve = "203, 166, 247";
+  const red = "243, 139, 168";
+  const maroon = "235, 160, 172";
+  const peach = "250, 179, 135";
+  const yellow = "249, 226, 175";
+  const green = "166, 227, 161";
+  const teal = "148, 226, 213";
+  const sky = "137, 220, 235";
+  const sapphire = "116, 199, 236";
+  const blue = "137, 180, 250";
+
+  let colors = [rosewater, flamingo, pink, mauve, red, maroon, peach, yellow, green, teal, sky, sapphire, blue];
+  //let usedColor = `rgb(${colors[Math.floor(Math.random() * colors.length)]})`
+  let usedColor = `rgb(${mauve})`;
+  const textColorByLuminance = anpasseTextfarbe(usedColor);
+
+  body.style.setProperty("--cat-rosewater", "rgb(" + rosewater + ")");
+  body.style.setProperty("--cat-flamingo", "rgb(" + flamingo + ")");
+  body.style.setProperty("--cat-pink", "rgb(" + pink + ")");
+  body.style.setProperty("--cat-mauve", "rgb(" + mauve + ")");
+  body.style.setProperty("--cat-red", "rgb(" + red + ")");
+  body.style.setProperty("--cat-maroon", "rgb(" + maroon + ")");
+  body.style.setProperty("--cat-peach", "rgb(" + peach + ")");
+  body.style.setProperty("--cat-yellow", "rgb(" + yellow + ")");
+  body.style.setProperty("--cat-green", "rgb(" + green + ")");
+  body.style.setProperty("--cat-teal", "rgb(" + teal + ")");
+  body.style.setProperty("--cat-sky", "rgb(" + sky + ")");
+  body.style.setProperty("--cat-sapphire", "rgb(" + sapphire + ")");
+  body.style.setProperty("--cat-blue", "rgb(" + blue + ")");
+
+  body.style.setProperty("--primary-600", usedColor);
+  body.style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-600) 5%, white)");
+  body.style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-600) 10%, white)");
+  body.style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-600) 20%, white)");
+  body.style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-600) 60%, white)");
+  body.style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-600) 70%, white)");
+  body.style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-600) 80%, white)");
+  body.style.setProperty("--primary-700", "color-mix(in srgb, var(--primary-600) 80%, black)");
+  body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600) 65%, black)");
+  body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600) 40%, black)");
+  body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600) 30%, black)");
+
+  body.style.setProperty("--button-primary-background-fill", "var(--primary-600)");
+  body.style.setProperty("--button-primary-background-fill-hover", "var(--primary-500)");
+  body.style.setProperty("--blur-value", "0px");
+
+  body.style.setProperty("--text-color-by-luminance", textColorByLuminance);
+  body.style.setProperty("--block-label-text-color", textColorByLuminance);
+  body.style.setProperty("--block-title-text-color", textColorByLuminance);
+  body.style.setProperty("--button-primary-text-color", textColorByLuminance);
+  body.style.setProperty("--checkbox-label-text-color-selected", textColorByLuminance);
+
+  // MARK: SVG Animationen & Emojis
+  // document.querySelector(".row-header i#wink").innerHTML = ''
+  // document.querySelector(".row-header i.heart-beat-emoji").innerHTML = ''
+
+  return "Animation created";
+}