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 colors = {
rosewater: "245, 224, 220",
flamingo: "242, 205, 205",
pink: "245, 194, 231",
mauve: "203, 166, 247",
red: "243, 139, 168",
maroon: "235, 160, 172",
peach: "250, 179, 135",
yellow: "249, 226, 175",
green: "166, 227, 161",
teal: "148, 226, 213",
sky: "137, 220, 235",
sapphire: "116, 199, 236",
blue: "137, 180, 250",
}
let usedColor = `rgb(${Object.values(colors)[Math.floor(Math.random() * Object.keys(colors).length)]})`
for (const [colorName, colorValues] of Object.entries(colors)) {
body.style.setProperty(`--cat-${colorName.replace(/,/g, "-")}`, `rgb(${colorValues})`)
}
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), black 20%)")
body.style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-600), black 35%)")
body.style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-600), black 55%)")
body.style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-600), black 65%)")
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", anpasseTextfarbe(usedColor))
// MARK: Selectors & Elements
const gradioApp = document.querySelector("gradio-app")
const gradioContainer = document.querySelector("body > gradio-app > div.gradio-container")
const resolutionModalWrapper = document.createElement("div")
resolutionModalWrapper.id = "resolution_modal_wrapper"
resolutionModalWrapper.style.display = "none"
resolutionModalWrapper.className = "resolution-modal-wrapper"
const alertModalElem = document.createElement("div")
const alertModalElemP = document.createElement("p")
const alertModalElemI = document.createElement("i")
alertModalElemI.className = "fas fa-exclamation-circle"
const alertModalElemSpan = document.createElement("span")
alertModalElemSpan.id = "alertModalText"
const alertModalElemButton = document.createElement("button")
alertModalElemButton.className = "lg primary run-btn svelte-cmf5ev"
alertModalElemButton.id = "alertModalBtn"
alertModalElemButton.textContent = "Ok"
alertModalElemP.id = "alertModalP"
alertModalElemP.append(alertModalElemI, alertModalElemSpan)
alertModalElem.id = "alertModal"
alertModalElem.append(alertModalElemP, alertModalElemButton)
//alertModalElem.innerHTML = ''
resolutionModalWrapper.appendChild(alertModalElem)
body.appendChild(resolutionModalWrapper)
let resizeWindowToggleVar = 0
// MARK: Alert Modal Events
alertModalElemButton.addEventListener("click", () => {
oldText = alertModalElemSpan.textContent
alertModalElemButton.disabled = true
alertModalElemSpan.innerHTML = 'Der "Ok" Button ändert nur diesen Text. 🫢
In 2.5 Sekunden wird wieder die ursprüngliche Meldung gezeigt. Cool oder?'
setTimeout(() => {
alertModalElemSpan.textContent = oldText
alertModalElemButton.disabled = false
alertModalElemButton.textContent = "Noch mal?"
}, 2500)
})
//component-15
const tabNav = document.querySelector("div.tab-nav")
tabNav.addEventListener("mouseover", () => {
tabNav.addEventListener("wheel", (event) => {
event.preventDefault()
let scrollLeft = 0
if (Math.sign(event.deltaY) < 0) {
scrollLeft = -25
}
if (Math.sign(event.deltaY) > 0) {
scrollLeft = +25
}
tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth))
})
})
tabNav.addEventListener("mouseout", () => {
tabNav.removeEventListener("wheel", (event) => {
event.preventDefault()
// const scrollLeft = tabNav.scrollLeft + 10
// tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth))
})
})
// MARK: Element-Ready function
function elementReady(selector) {
return new Promise((resolve, reject) => {
const el = document.querySelector(selector)
if (el) {
resolve(el)
}
new MutationObserver((mutationRecords, observer) => {
Array.from(document.querySelectorAll(selector)).forEach((element) => {
resolve(element)
observer.disconnect()
})
}).observe(document.documentElement, {
childList: true,
subtree: true,
})
})
}
// MARK: Mobile Check
function istMobile() {
// Überprüfen, ob das Gerät ein Touchscreen hat
if ("ontouchstart" in window || (navigator.maxTouchPoints && window.innerWidth < 768)) {
resizeWindowToggleVar = 1
gradioContainer.classList.add("blur-container")
body.style.setProperty("--blur-value", "12px")
gradioApp.style.height = "calc(100vh - 120px)"
resolutionModalWrapper.style.setProperty("--opacity-value", "1")
alertModalElemSpan.textContent = "Diese Seite ist nicht für mobile Geräte optimiert. Bitte besuche diese Seite von einem Desktop-Computer aus."
alertModalElemButton.textContent = "Ok"
resolutionModalWrapper.style.display = ""
} else if (window.innerWidth < 1024) {
resizeWindowToggleVar = 1
gradioContainer.classList.add("blur-container")
body.style.setProperty("--blur-value", "12px")
gradioApp.style.height = "calc(100vh - 120px)"
resolutionModalWrapper.style.setProperty("--opacity-value", "1")
alertModalElemSpan.textContent = "Bildschirm Auflösung oder Fensterbreite zu gering. Bitte besuche diese Seite von einem Desktop-Computer aus."
alertModalElemButton.textContent = "Ok"
resolutionModalWrapper.style.display = ""
} else {
gradioContainer.classList.remove("blur-container")
body.style.setProperty("--blur-value", "0px")
gradioApp.style.height = ""
resolutionModalWrapper.style.setProperty("--opacity-value", "0")
resize_eventListener("remove")
if (resizeWindowToggleVar == 1) {
setTimeout(() => ((resolutionModalWrapper.style.display = "none"), (resizeWindowToggleVar = 0)), 800)
}
}
}
// MARK: SVG Animationen & Emojis
const winking_hand_emoji = document.querySelector(".row-header p i.winking-hand-emoji")
winking_hand_emoji.innerHTML =
''
const heart_beat_emoji = document.querySelector(".row-header p i.heart-beat-emoji")
heart_beat_emoji.innerHTML =
''
// MARK: Event Listeners
function resize_eventListener(trigger) {
if (trigger == "add") {
istMobile()
console.log("Window Resize EventListener added.")
window.addEventListener("resize", () => {
console.log("Event Window resize.")
istMobile()
})
}
if (trigger == "remove") {
console.log("Window Resize EventListener removed.")
window.removeEventListener("resize", () => {
console.log("Event Window resize.")
istMobile()
})
}
}
elementReady("body > gradio-app > div.gradio-container").then((element) => {
console.log("Element exist: " + element)
istMobile()
})
resize_eventListener("add")
return "Custom Gradio JS"
}