init

f555b43 over 3 years ago

12.8 kB

function hexToRgb(color) {
  let hex = color[0] === "#" ? color.slice(1) : color;
  let c;

  // expand the short hex by doubling each character, fc0 -> ffcc00
  if (hex.length !== 6) {
    hex = (() => {
      const result = [];
      for (c of Array.from(hex)) {
        result.push(`${c}${c}`);
      }
      return result;
    })().join("");
  }
  const colorStr = hex.match(/#?(.{2})(.{2})(.{2})/).slice(1);
  const rgb = colorStr.map((col) => parseInt(col, 16));
  rgb.push(1);
  return rgb;
}

function rgbToHsl(rgb) {
  const r = rgb[0] / 255;
  const g = rgb[1] / 255;
  const b = rgb[2] / 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  const diff = max - min;
  const add = max + min;

  const hue =
    min === max
      ? 0
      : r === max
      ? ((60 * (g - b)) / diff + 360) % 360
      : g === max
      ? (60 * (b - r)) / diff + 120
      : (60 * (r - g)) / diff + 240;

  const lum = 0.5 * add;

  const sat =
    lum === 0 ? 0 : lum === 1 ? 1 : lum <= 0.5 ? diff / add : diff / (2 - add);

  const h = Math.round(hue);
  const s = Math.round(sat * 100);
  const l = Math.round(lum * 100);
  const a = rgb[3] || 1;

  return [h, s, l, a];
}

function hexToHsl(color) {
  const rgb = hexToRgb(color);
  const hsl = rgbToHsl(rgb);
  return "hsl(" + hsl[0] + "deg " + hsl[1] + "% " + hsl[2] + "%)";
}

function hslToHex(h, s, l) {
  l /= 100;
  const a = (s * Math.min(l, 1 - l)) / 100;
  const f = (n) => {
    const k = (n + h / 30) % 12;
    const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
    return Math.round(255 * Math.max(0, Math.min(color, 1)))
      .toString(16)
      .padStart(2, "0"); // convert to Hex and prefix "0" if needed
  };
  return `#${f(0)}${f(8)}${f(4)}`;
}

function hsl2rgb(h, s, l) {
  let a = s * Math.min(l, 1 - l);
  let f = (n, k = (n + h / 30) % 12) =>
    l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
  return [f(0), f(8), f(4)];
}

function invertColor(hex) {
  if (hex.indexOf("#") === 0) {
    hex = hex.slice(1);
  }
  // convert 3-digit hex to 6-digits.
  if (hex.length === 3) {
    hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
  }
  if (hex.length !== 6) {
    throw new Error("Invalid HEX color.");
  }
  // invert color components
  var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
    g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
    b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
  // pad each with zeros and return
  return "#" + padZero(r) + padZero(g) + padZero(b);
}

function padZero(str, len) {
  len = len || 2;
  var zeros = new Array(len).join("0");
  return (zeros + str).slice(-len);
}

function getValsWrappedIn(str, c1, c2) {
  var rg = new RegExp("(?<=\\" + c1 + ")(.*?)(?=\\" + c2 + ")", "g");
  return str.match(rg);
}

let styleobj = {};
let hslobj = {};
let isColorsInv;

const toHSLArray = (hslStr) => hslStr.match(/\d+/g).map(Number);

function offsetColorsHSV(ohsl) {
  let inner_styles = "";

  for (const key in styleobj) {
    let keyVal = styleobj[key];

    if (keyVal.indexOf("#") != -1 || keyVal.indexOf("hsl") != -1) {
      let colcomp = gradioApp().querySelector("#" + key + " input");
      if (colcomp) {
        let hsl;

        if (keyVal.indexOf("#") != -1) {
          keyVal = keyVal.replace(/\s+/g, "");
          //inv ? keyVal = invertColor(keyVal) : 0;
          if (isColorsInv) {
            keyVal = invertColor(keyVal);
            styleobj[key] = keyVal;
          }
          hsl = rgbToHsl(hexToRgb(keyVal));
        } else {
          if (isColorsInv) {
            let c = toHSLArray(keyVal);
            let hex = hslToHex(c[0], c[1], c[2]);
            keyVal = invertColor(hex);
            styleobj[key] = keyVal;
            hsl = rgbToHsl(hexToRgb(keyVal));
          } else {
            hsl = toHSLArray(keyVal);
          }
        }

        let h = (parseInt(hsl[0]) + parseInt(ohsl[0])) % 360;
        let s = parseInt(hsl[1]) + parseInt(ohsl[1]);
        let l = parseInt(hsl[2]) + parseInt(ohsl[2]);

        let hex = hslToHex(
          h,
          Math.min(Math.max(s, 0), 100),
          Math.min(Math.max(l, 0), 100)
        );

        colcomp.value = hex;

        hslobj[key] = "hsl(" + h + "deg " + s + "% " + l + "%)";
        inner_styles += key + ":" + hslobj[key] + ";";
      }
    } else {
      inner_styles += key + ":" + styleobj[key] + ";";
    }
  }

  isColorsInv = false;

  const preview_styles = gradioApp().querySelector("#preview-styles");
  preview_styles.innerHTML = ":root {" + inner_styles + "}";
  preview_styles.innerHTML +=
    "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";

  const vars_textarea = gradioApp().querySelector("#theme_vars textarea");
  vars_textarea.value = inner_styles;

  const inputEvent = new Event("input");
  Object.defineProperty(inputEvent, "target", { value: vars_textarea });
  vars_textarea.dispatchEvent(inputEvent);
}

function updateTheme(vars) {
  let inner_styles = "";

  for (let i = 0; i < vars.length - 1; i++) {
    let key = vars[i].split(":");
    let id = key[0].replace(/\s+/g, "");
    let val = key[1].trim();

    styleobj[id] = val;
    inner_styles += id + ":" + val + ";";

    gradioApp()
      .querySelectorAll("#" + id + " input")
      .forEach((elem) => {
        if (val.indexOf("hsl") != -1) {
          let hsl = toHSLArray(val);
          let hex = hslToHex(hsl[0], hsl[1], hsl[2]);
          elem.value = hex;
        } else {
          elem.value = val.split("px")[0];
        }
      });
  }

  const preview_styles = gradioApp().querySelector("#preview-styles");

  if (preview_styles) {
    preview_styles.innerHTML = ":root {" + inner_styles + "}";
    preview_styles.innerHTML +=
      "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
  } else {
    const r = gradioApp();
    const style = document.createElement("style");
    style.id = "preview-styles";
    style.innerHTML = ":root {" + inner_styles + "}";
    style.innerHTML +=
      "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
    r.appendChild(style);
  }

  const vars_textarea = gradioApp().querySelector("#theme_vars textarea");
  const css_textarea = gradioApp().querySelector("#theme_css textarea");

  vars_textarea.value = inner_styles;
  css_textarea.value = css_textarea.value;

  //console.log(Object);

  const vEvent = new Event("input");
  const cEvent = new Event("input");
  Object.defineProperty(vEvent, "target", { value: vars_textarea });
  Object.defineProperty(cEvent, "target", { value: css_textarea });
  vars_textarea.dispatchEvent(vEvent);
  css_textarea.dispatchEvent(cEvent);
}

function applyTheme() {
  console.log("apply");
}

function initTheme() {
  const current_style = gradioApp().querySelector(".gradio-container > style");
  //console.log(current_style);
  //const head = document.head;
  //head.appendChild(current_style);

  const css_styles = current_style.innerHTML.split(
    "/*BREAKPOINT_CSS_CONTENT*/"
  );
  let init_css_vars = css_styles[0].split("}")[0].split("{")[1];
  init_css_vars = init_css_vars.replace(/\n|\r/g, "");

  let init_vars = init_css_vars.split(";");
  let vars = init_vars;

  //console.log(vars);

  const vars_textarea = gradioApp().querySelector("#theme_vars textarea");
  const css_textarea = gradioApp().querySelector("#theme_css textarea");
  //const result_textarea = gradioApp().querySelector('#theme_result textarea');
  vars_textarea.value = init_css_vars;
  css_textarea.value =
    "/*BREAKPOINT_CSS_CONTENT*/" + css_styles[1] + "/*BREAKPOINT_CSS_CONTENT*/";

  updateTheme(vars);

  //vars_textarea.addEventListener("change", function(e) {
  //e.preventDefault();
  //e.stopPropagation();
  //vars = vars_textarea.value.split(";");
  //console.log(e);
  //updateTheme(vars);

  //})

  const preview_styles = gradioApp().querySelector("#preview-styles");
  let intervalChange;

  gradioApp()
    .querySelectorAll("#ui_theme_settings input")
    .forEach((elem) => {
      elem.addEventListener("input", function (e) {
        let celem = e.currentTarget;
        let val = e.currentTarget.value;
        let curr_val;

        switch (e.currentTarget.type) {
          case "range":
            celem = celem.parentElement;
            val = e.currentTarget.value + "px";
            break;
          case "color":
            celem = celem.parentElement.parentElement;
            val = e.currentTarget.value;
            break;
          case "number":
            celem = celem.parentElement.parentElement.parentElement;
            val = e.currentTarget.value + "px";
            break;
        }

        styleobj[celem.id] = val;

        //console.log(styleobj);

        if (intervalChange != null) clearInterval(intervalChange);
        intervalChange = setTimeout(() => {
          let inner_styles = "";

          for (const key in styleobj) {
            inner_styles += key + ":" + styleobj[key] + ";";
          }

          vars = inner_styles.split(";");
          preview_styles.innerHTML = ":root {" + inner_styles + "}";
          preview_styles.innerHTML +=
            "@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";

          vars_textarea.value = inner_styles;
          const vEvent = new Event("input");
          Object.defineProperty(vEvent, "target", { value: vars_textarea });
          vars_textarea.dispatchEvent(vEvent);

          offsetColorsHSV(hsloffset);
        }, 1000);
      });
    });

  const reset_btn = gradioApp().getElementById("theme_reset_btn");
  reset_btn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    gradioApp()
      .querySelectorAll("#ui_theme_hsv input")
      .forEach((elem) => {
        elem.value = 0;
      });
    hsloffset = [0, 0, 0];
    updateTheme(init_vars);
  });

  /*
	const apply_btn = gradioApp().getElementById('theme_apply_btn');	
	apply_btn.addEventListener("click", function(e) {
		e.preventDefault();
		e.stopPropagation();				
		init_css_vars = vars_textarea.value.replace(/\n|\r/g, "");		
		vars_textarea.value = init_css_vars;
		
		init_vars = init_css_vars.split(";");
		vars = init_vars;		
		updateTheme(vars);
	})
	*/

  let intervalCheck;
  function dropDownOnChange() {
    if (init_css_vars != vars_textarea.value) {
      clearInterval(intervalCheck);
      init_css_vars = vars_textarea.value.replace(/\n|\r/g, "");
      vars_textarea.value = init_css_vars;
      init_vars = init_css_vars.split(";");
      vars = init_vars;
      updateTheme(vars);
    }
  }

  const drop_down = gradioApp().querySelector("#themes_drop_down");
  drop_down.addEventListener("click", function (e) {
    if (intervalCheck != null) clearInterval(intervalCheck);
    intervalCheck = setInterval(dropDownOnChange, 100);
    //console.log("ok");
  });

  let hsloffset = [0, 0, 0];

  const hue = gradioApp()
    .querySelectorAll("#theme_hue input")
    .forEach((elem) => {
      elem.addEventListener("change", function (e) {
        e.preventDefault();
        e.stopPropagation();
        hsloffset[0] = e.currentTarget.value;
        offsetColorsHSV(hsloffset);
      });
    });

  const sat = gradioApp()
    .querySelectorAll("#theme_sat input")
    .forEach((elem) => {
      elem.addEventListener("change", function (e) {
        e.preventDefault();
        e.stopPropagation();
        hsloffset[1] = e.currentTarget.value;
        offsetColorsHSV(hsloffset);
      });
    });

  const brt = gradioApp()
    .querySelectorAll("#theme_brt input")
    .forEach((elem) => {
      elem.addEventListener("change", function (e) {
        e.preventDefault();
        e.stopPropagation();
        hsloffset[2] = e.currentTarget.value;
        offsetColorsHSV(hsloffset);
      });
    });

  const inv_btn = gradioApp().getElementById("theme_invert_btn");
  inv_btn.addEventListener("click", function (e) {
    e.preventDefault();
    e.stopPropagation();
    isColorsInv = !isColorsInv;
    offsetColorsHSV(hsloffset);
  });
}

function observeGradioApp() {
  const observer = new MutationObserver(() => {
    const block = gradioApp().getElementById("tab_ui_theme");
    if (block) {
      observer.disconnect();

      setTimeout(() => {
        initTheme();
      }, "500");
    }
  });
  observer.observe(gradioApp(), { childList: true, subtree: true });
}

document.addEventListener("DOMContentLoaded", () => {
  observeGradioApp();
});

	function hexToRgb(color) {
	let hex = color[0] === "#" ? color.slice(1) : color;
	let c;

	// expand the short hex by doubling each character, fc0 -> ffcc00
	if (hex.length !== 6) {
	hex = (() => {
	const result = [];
	for (c of Array.from(hex)) {
	result.push(`${c}${c}`);
	}
	return result;
	})().join("");
	}
	const colorStr = hex.match(/#?(.{2})(.{2})(.{2})/).slice(1);
	const rgb = colorStr.map((col) => parseInt(col, 16));
	rgb.push(1);
	return rgb;
	}

	function rgbToHsl(rgb) {
	const r = rgb[0] / 255;
	const g = rgb[1] / 255;
	const b = rgb[2] / 255;

	const max = Math.max(r, g, b);
	const min = Math.min(r, g, b);
	const diff = max - min;
	const add = max + min;

	const hue =
	min === max
	? 0
	: r === max
	? ((60 * (g - b)) / diff + 360) % 360
	: g === max
	? (60 * (b - r)) / diff + 120
	: (60 * (r - g)) / diff + 240;

	const lum = 0.5 * add;

	const sat =
	lum === 0 ? 0 : lum === 1 ? 1 : lum <= 0.5 ? diff / add : diff / (2 - add);

	const h = Math.round(hue);
	const s = Math.round(sat * 100);
	const l = Math.round(lum * 100);
	const a = rgb[3] \|\| 1;

	return [h, s, l, a];
	}

	function hexToHsl(color) {
	const rgb = hexToRgb(color);
	const hsl = rgbToHsl(rgb);
	return "hsl(" + hsl[0] + "deg " + hsl[1] + "% " + hsl[2] + "%)";
	}

	function hslToHex(h, s, l) {
	l /= 100;
	const a = (s * Math.min(l, 1 - l)) / 100;
	const f = (n) => {
	const k = (n + h / 30) % 12;
	const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
	return Math.round(255 * Math.max(0, Math.min(color, 1)))
	.toString(16)
	.padStart(2, "0"); // convert to Hex and prefix "0" if needed
	};
	return `#${f(0)}${f(8)}${f(4)}`;
	}

	function hsl2rgb(h, s, l) {
	let a = s * Math.min(l, 1 - l);
	let f = (n, k = (n + h / 30) % 12) =>
	l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
	return [f(0), f(8), f(4)];
	}

	function invertColor(hex) {
	if (hex.indexOf("#") === 0) {
	hex = hex.slice(1);
	}
	// convert 3-digit hex to 6-digits.
	if (hex.length === 3) {
	hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
	}
	if (hex.length !== 6) {
	throw new Error("Invalid HEX color.");
	}
	// invert color components
	var r = (255 - parseInt(hex.slice(0, 2), 16)).toString(16),
	g = (255 - parseInt(hex.slice(2, 4), 16)).toString(16),
	b = (255 - parseInt(hex.slice(4, 6), 16)).toString(16);
	// pad each with zeros and return
	return "#" + padZero(r) + padZero(g) + padZero(b);
	}

	function padZero(str, len) {
	len = len \|\| 2;
	var zeros = new Array(len).join("0");
	return (zeros + str).slice(-len);
	}

	function getValsWrappedIn(str, c1, c2) {
	var rg = new RegExp("(?<=\\" + c1 + ")(.*?)(?=\\" + c2 + ")", "g");
	return str.match(rg);
	}

	let styleobj = {};
	let hslobj = {};
	let isColorsInv;

	const toHSLArray = (hslStr) => hslStr.match(/\d+/g).map(Number);

	function offsetColorsHSV(ohsl) {
	let inner_styles = "";

	for (const key in styleobj) {
	let keyVal = styleobj[key];

	if (keyVal.indexOf("#") != -1 \|\| keyVal.indexOf("hsl") != -1) {
	let colcomp = gradioApp().querySelector("#" + key + " input");
	if (colcomp) {
	let hsl;

	if (keyVal.indexOf("#") != -1) {
	keyVal = keyVal.replace(/\s+/g, "");
	//inv ? keyVal = invertColor(keyVal) : 0;
	if (isColorsInv) {
	keyVal = invertColor(keyVal);
	styleobj[key] = keyVal;
	}
	hsl = rgbToHsl(hexToRgb(keyVal));
	} else {
	if (isColorsInv) {
	let c = toHSLArray(keyVal);
	let hex = hslToHex(c[0], c[1], c[2]);
	keyVal = invertColor(hex);
	styleobj[key] = keyVal;
	hsl = rgbToHsl(hexToRgb(keyVal));
	} else {
	hsl = toHSLArray(keyVal);
	}
	}

	let h = (parseInt(hsl[0]) + parseInt(ohsl[0])) % 360;
	let s = parseInt(hsl[1]) + parseInt(ohsl[1]);
	let l = parseInt(hsl[2]) + parseInt(ohsl[2]);

	let hex = hslToHex(
	h,
	Math.min(Math.max(s, 0), 100),
	Math.min(Math.max(l, 0), 100)
	);

	colcomp.value = hex;

	hslobj[key] = "hsl(" + h + "deg " + s + "% " + l + "%)";
	inner_styles += key + ":" + hslobj[key] + ";";
	}
	} else {
	inner_styles += key + ":" + styleobj[key] + ";";
	}
	}

	isColorsInv = false;

	const preview_styles = gradioApp().querySelector("#preview-styles");
	preview_styles.innerHTML = ":root {" + inner_styles + "}";
	preview_styles.innerHTML +=
	"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";

	const vars_textarea = gradioApp().querySelector("#theme_vars textarea");
	vars_textarea.value = inner_styles;

	const inputEvent = new Event("input");
	Object.defineProperty(inputEvent, "target", { value: vars_textarea });
	vars_textarea.dispatchEvent(inputEvent);
	}

	function updateTheme(vars) {
	let inner_styles = "";

	for (let i = 0; i < vars.length - 1; i++) {
	let key = vars[i].split(":");
	let id = key[0].replace(/\s+/g, "");
	let val = key[1].trim();

	styleobj[id] = val;
	inner_styles += id + ":" + val + ";";

	gradioApp()
	.querySelectorAll("#" + id + " input")
	.forEach((elem) => {
	if (val.indexOf("hsl") != -1) {
	let hsl = toHSLArray(val);
	let hex = hslToHex(hsl[0], hsl[1], hsl[2]);
	elem.value = hex;
	} else {
	elem.value = val.split("px")[0];
	}
	});
	}

	const preview_styles = gradioApp().querySelector("#preview-styles");

	if (preview_styles) {
	preview_styles.innerHTML = ":root {" + inner_styles + "}";
	preview_styles.innerHTML +=
	"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
	} else {
	const r = gradioApp();
	const style = document.createElement("style");
	style.id = "preview-styles";
	style.innerHTML = ":root {" + inner_styles + "}";
	style.innerHTML +=
	"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";
	r.appendChild(style);
	}

	const vars_textarea = gradioApp().querySelector("#theme_vars textarea");
	const css_textarea = gradioApp().querySelector("#theme_css textarea");

	vars_textarea.value = inner_styles;
	css_textarea.value = css_textarea.value;

	//console.log(Object);

	const vEvent = new Event("input");
	const cEvent = new Event("input");
	Object.defineProperty(vEvent, "target", { value: vars_textarea });
	Object.defineProperty(cEvent, "target", { value: css_textarea });
	vars_textarea.dispatchEvent(vEvent);
	css_textarea.dispatchEvent(cEvent);
	}

	function applyTheme() {
	console.log("apply");
	}

	function initTheme() {
	const current_style = gradioApp().querySelector(".gradio-container > style");
	//console.log(current_style);
	//const head = document.head;
	//head.appendChild(current_style);

	const css_styles = current_style.innerHTML.split(
	"/BREAKPOINT_CSS_CONTENT/"
	);
	let init_css_vars = css_styles[0].split("}")[0].split("{")[1];
	init_css_vars = init_css_vars.replace(/\n\|\r/g, "");

	let init_vars = init_css_vars.split(";");
	let vars = init_vars;

	//console.log(vars);

	const vars_textarea = gradioApp().querySelector("#theme_vars textarea");
	const css_textarea = gradioApp().querySelector("#theme_css textarea");
	//const result_textarea = gradioApp().querySelector('#theme_result textarea');
	vars_textarea.value = init_css_vars;
	css_textarea.value =
	"/BREAKPOINT_CSS_CONTENT/" + css_styles[1] + "/BREAKPOINT_CSS_CONTENT/";

	updateTheme(vars);

	//vars_textarea.addEventListener("change", function(e) {
	//e.preventDefault();
	//e.stopPropagation();
	//vars = vars_textarea.value.split(";");
	//console.log(e);
	//updateTheme(vars);

	//})

	const preview_styles = gradioApp().querySelector("#preview-styles");
	let intervalChange;

	gradioApp()
	.querySelectorAll("#ui_theme_settings input")
	.forEach((elem) => {
	elem.addEventListener("input", function (e) {
	let celem = e.currentTarget;
	let val = e.currentTarget.value;
	let curr_val;

	switch (e.currentTarget.type) {
	case "range":
	celem = celem.parentElement;
	val = e.currentTarget.value + "px";
	break;
	case "color":
	celem = celem.parentElement.parentElement;
	val = e.currentTarget.value;
	break;
	case "number":
	celem = celem.parentElement.parentElement.parentElement;
	val = e.currentTarget.value + "px";
	break;
	}

	styleobj[celem.id] = val;

	//console.log(styleobj);

	if (intervalChange != null) clearInterval(intervalChange);
	intervalChange = setTimeout(() => {
	let inner_styles = "";

	for (const key in styleobj) {
	inner_styles += key + ":" + styleobj[key] + ";";
	}

	vars = inner_styles.split(";");
	preview_styles.innerHTML = ":root {" + inner_styles + "}";
	preview_styles.innerHTML +=
	"@media only screen and (max-width: 860px) {:root{--ae-outside-gap-size: var(--ae-mobile-outside-gap-size);--ae-inside-padding-size: var(--ae-mobile-inside-padding-size);}}";

	vars_textarea.value = inner_styles;
	const vEvent = new Event("input");
	Object.defineProperty(vEvent, "target", { value: vars_textarea });
	vars_textarea.dispatchEvent(vEvent);

	offsetColorsHSV(hsloffset);
	}, 1000);
	});
	});

	const reset_btn = gradioApp().getElementById("theme_reset_btn");
	reset_btn.addEventListener("click", function (e) {
	e.preventDefault();
	e.stopPropagation();
	gradioApp()
	.querySelectorAll("#ui_theme_hsv input")
	.forEach((elem) => {
	elem.value = 0;
	});
	hsloffset = [0, 0, 0];
	updateTheme(init_vars);
	});

	/*
	const apply_btn = gradioApp().getElementById('theme_apply_btn');
	apply_btn.addEventListener("click", function(e) {
	e.preventDefault();
	e.stopPropagation();
	init_css_vars = vars_textarea.value.replace(/\n\|\r/g, "");
	vars_textarea.value = init_css_vars;

	init_vars = init_css_vars.split(";");
	vars = init_vars;
	updateTheme(vars);
	})
	*/

	let intervalCheck;
	function dropDownOnChange() {
	if (init_css_vars != vars_textarea.value) {
	clearInterval(intervalCheck);
	init_css_vars = vars_textarea.value.replace(/\n\|\r/g, "");
	vars_textarea.value = init_css_vars;
	init_vars = init_css_vars.split(";");
	vars = init_vars;
	updateTheme(vars);
	}
	}

	const drop_down = gradioApp().querySelector("#themes_drop_down");
	drop_down.addEventListener("click", function (e) {
	if (intervalCheck != null) clearInterval(intervalCheck);
	intervalCheck = setInterval(dropDownOnChange, 100);
	//console.log("ok");
	});

	let hsloffset = [0, 0, 0];

	const hue = gradioApp()
	.querySelectorAll("#theme_hue input")
	.forEach((elem) => {
	elem.addEventListener("change", function (e) {
	e.preventDefault();
	e.stopPropagation();
	hsloffset[0] = e.currentTarget.value;
	offsetColorsHSV(hsloffset);
	});
	});

	const sat = gradioApp()
	.querySelectorAll("#theme_sat input")
	.forEach((elem) => {
	elem.addEventListener("change", function (e) {
	e.preventDefault();
	e.stopPropagation();
	hsloffset[1] = e.currentTarget.value;
	offsetColorsHSV(hsloffset);
	});
	});

	const brt = gradioApp()
	.querySelectorAll("#theme_brt input")
	.forEach((elem) => {
	elem.addEventListener("change", function (e) {
	e.preventDefault();
	e.stopPropagation();
	hsloffset[2] = e.currentTarget.value;
	offsetColorsHSV(hsloffset);
	});
	});

	const inv_btn = gradioApp().getElementById("theme_invert_btn");
	inv_btn.addEventListener("click", function (e) {
	e.preventDefault();
	e.stopPropagation();
	isColorsInv = !isColorsInv;
	offsetColorsHSV(hsloffset);
	});
	}

	function observeGradioApp() {
	const observer = new MutationObserver(() => {
	const block = gradioApp().getElementById("tab_ui_theme");
	if (block) {
	observer.disconnect();

	setTimeout(() => {
	initTheme();
	}, "500");
	}
	});
	observer.observe(gradioApp(), { childList: true, subtree: true });
	}

	document.addEventListener("DOMContentLoaded", () => {
	observeGradioApp();
	});