Upload 14 files

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+_res/assets/webfonts/GeistMono.ttf filter=lfs diff=lfs merge=lfs -text

_res/_custom.css

@@ -0,0 +1,275 @@
+@import url("https://fonts.googleapis.com/css2?family=Baloo+Tamma+2:wght@400..800&display=swap");
+
+@font-face {
+  font-family: "Geist Mono";
+  src: url("file=_res/assets/webfonts/GeistMono-Thin.woff2") format("woff2");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Geist Mono";
+  src: url("file=_res/assets/webfonts/GeistMono-Light.woff2") format("woff2");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Geist Mono";
+  src: url("file=_res/assets/webfonts/GeistMono-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Geist Mono";
+  src: url("file=_res/assets/webfonts/GeistMono-SemiBold.woff2") format("woff2");
+  font-weight: 600;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Geist Mono";
+  src: url("file=_res/assets/webfonts/GeistMono-Bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Qartella-Light";
+  src: url("file=_res/assets/webfonts/Qartella-Light.woff2") format("woff2"), url("file=_res/assets/webfonts/Qartella-Light.woff") format("woff");
+  font-weight: normal;
+  font-style: light;
+}
+
+@font-face {
+  font-family: "Qartella-Bold";
+  src: url("file=_res/assets/webfonts/Qartella-Bold.woff2") format("woff2"), url("file=_res/assets/webfonts/Qartella-Bold.woff") format("woff");
+  font-weight: normal;
+  font-style: bold;
+}
+
+::-webkit-scrollbar {
+  width: 0px;
+}
+
+body {
+  background: var(--background-fill-primary);
+  background: linear-gradient(180deg, var(--primary-800) 355px, var(--background-fill-primary) 355px);
+}
+
+.gradio-container-5-29-0 {
+  padding-top: 30px !important;
+  transition: opacity 0.4s linear;
+  position: relative;
+  font-family: "Geist Mono", sans-serif !important;
+  font-weight: 400;
+}
+
+.md-header-wrapper,
+.md-header > span > div {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  position: relative;
+  background-image: url("gradio_api/file=_res/assets/Schaafe.png");
+  background-position: 70% bottom;
+  background-repeat: no-repeat;
+  padding: 0 10px;
+
+  h1 {
+    --sc: rgb(2, 44, 32);
+    font-family: "Baloo Tamma 2", system-ui;
+    font-optical-sizing: auto;
+    font-weight: 600;
+    font-style: normal;
+    font-size: 3.8rem;
+    padding: 8px;
+    text-shadow: 2px 2px 2px var(--sc), -2px 2px 2px var(--sc), -2px -2px 0 var(--sc), 2px -2px 0 var(--sc);
+    display: flex;
+    flex-direction: column;
+    text-align: right;
+    margin-right: 45%;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+
+    & span {
+      font-weight: 400;
+      font-size: 2rem;
+      margin-top: -20px;
+      text-transform: uppercase;
+    }
+  }
+
+  p {
+    margin-top: var(--spacing-xs);
+
+    #wink,
+    #heart {
+      display: inline;
+      width: 26px;
+      margin-bottom: 8px;
+    }
+
+    #wink {
+      animation: wink 3s ease-in-out infinite;
+    }
+
+    #heart {
+      animation: beat 2s ease-in-out infinite;
+    }
+  }
+}
+
+.row-main {
+  padding: 16px;
+  background-color: var(--neutral-900) !important;
+  border-right-width: 0px !important;
+  border-bottom-width: 0px !important;
+  border-left-width: 0px !important;
+  border-top: 8px solid var(--primary-600) !important;
+  border-radius: var(--container-radius) !important;
+}
+
+.primary.svelte-1ixn6qd,
+span.svelte-g2oxp3,
+.wrap.svelte-12ioyct,
+label.svelte-1to105q.svelte-1to105q,
+label.selected.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav,
+label.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav:hover,
+.md-header > span > div p {
+  color: var(--text-color-by-luminance, #fff);
+  transition: color 0.4s ease-in-out;
+}
+
+label.svelte-1bx8sav > .svelte-1bx8sav + .svelte-1bx8sav {
+  margin-left: 0;
+}
+
+.app.svelte-1y320eu.svelte-1y320eu {
+  position: relative;
+  margin: auto;
+  padding: var(--size-4) var(--size-8);
+  width: 100%;
+  height: 100%;
+}
+
+@media (min-width: 640px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 1536px;
+  }
+}
+
+@media (min-width: 1920px) {
+  .fillable.svelte-1y320eu.svelte-1y320eu:not(.fill_width) {
+    max-width: 1536px !important;
+  }
+}
+
+.info.svelte-1y320eu.svelte-1y320eu {
+  display: flex;
+  position: absolute;
+  bottom: 0;
+  justify-content: flex-start;
+  border-top: 1px solid var(--button-secondary-border-color);
+  padding: var(--size-1) var(--size-5);
+  width: 100%;
+  color: var(--body-text-color-subdued);
+  font-size: var(--text-md);
+  white-space: nowrap;
+}
+
+.app.svelte-1y320eu.svelte-1y320eu {
+  max-width: 1536px !important;
+  position: relative;
+  margin: auto;
+  padding: var(--size-4) var(--size-8);
+  width: 100%;
+  height: 100%;
+}
+
+.input-image,
+.output-slider {
+  height: 800px;
+}
+
+.hidethis,
+input.svelte-1bx8sav.svelte-1bx8sav.svelte-1bx8sav {
+  display: none;
+}
+
+/* Keyframes */
+
+@keyframes wink {
+  0%,
+  60%,
+  100% {
+    transform: rotate(0deg);
+  }
+  10%,
+  30%,
+  70%,
+  90% {
+    transform: rotate(14deg);
+  }
+  20%,
+  80% {
+    transform: rotate(-8deg);
+  }
+  40% {
+    transform: rotate(-4deg);
+  }
+  50% {
+    transform: rotate(10deg);
+  }
+}
+
+@keyframes beat {
+  0% {
+    transform: scale(1);
+  }
+  5% {
+    transform: scale(0.75);
+  }
+  20% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(1);
+  }
+  35% {
+    transform: scale(0.75);
+  }
+  50% {
+    transform: scale(1);
+  }
+  55% {
+    transform: scale(0.75);
+  }
+  70% {
+    transform: scale(1);
+  }
+}

_res/_custom.js

@@ -0,0 +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";
+}

_res/assets/webfonts/GeistMono.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2386ddac2c72b6e0c126561e91486b7284412f303d8d9513da9ffec789e63338
+size 138896