From 5587280b552689bc7fe2d74b6c4fd246c2e2899a Mon Sep 17 00:00:00 2001
From: Vladimir Mandic <mandic00@live.com>
Date: Sun, 16 Jun 2024 08:25:16 -0400
Subject: [PATCH] fix adetailer

---
 CHANGELOG.md                 |  1 +
 javascript/inputAccordion.js | 66 ++++++++++++++++++++++++++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 javascript/inputAccordion.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ffa2f578e..a4307eb66 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@
 - fix api face-hires
 - fix **hunyuandit** set attention processor
 - fix civitai download without name
+- fix compatibility with latest adetailer
 - css tweaks for standardui
 - restructure api examples: `cli/api-*`
 - handle theme fallback when invalid theme is specified
diff --git a/javascript/inputAccordion.js b/javascript/inputAccordion.js
new file mode 100644
index 000000000..d4c577505
--- /dev/null
+++ b/javascript/inputAccordion.js
@@ -0,0 +1,66 @@
+function inputAccordionChecked(id, checked) {
+  const accordion = gradioApp().getElementById(id);
+  accordion.visibleCheckbox.checked = checked;
+  accordion.onVisibleCheckboxChange();
+}
+
+function setupAccordion(accordion) {
+  const labelWrap = accordion.querySelector('.label-wrap');
+  const gradioCheckbox = gradioApp().querySelector(`#${accordion.id}-checkbox input`);
+  const extra = gradioApp().querySelector(`#${accordion.id}-extra`);
+  const span = labelWrap.querySelector('span');
+  let linked = true;
+
+  const isOpen = () => labelWrap.classList.contains('open');
+
+  const observerAccordionOpen = new MutationObserver((mutations) => {
+    mutations.forEach((mutationRecord) => {
+      accordion.classList.toggle('input-accordion-open', isOpen());
+
+      if (linked) {
+        accordion.visibleCheckbox.checked = isOpen();
+        accordion.onVisibleCheckboxChange();
+      }
+    });
+  });
+  observerAccordionOpen.observe(labelWrap, { attributes: true, attributeFilter: ['class'] });
+
+  if (extra) {
+    labelWrap.insertBefore(extra, labelWrap.lastElementChild);
+  }
+
+  accordion.onChecked = (checked) => {
+    if (isOpen() !== checked) {
+      labelWrap.click();
+    }
+  };
+
+  const visibleCheckbox = document.createElement('INPUT');
+  visibleCheckbox.type = 'checkbox';
+  visibleCheckbox.checked = isOpen();
+  visibleCheckbox.id = `${accordion.id}-visible-checkbox`;
+  visibleCheckbox.className = `${gradioCheckbox.className} input-accordion-checkbox`;
+  span.insertBefore(visibleCheckbox, span.firstChild);
+
+  accordion.visibleCheckbox = visibleCheckbox;
+  accordion.onVisibleCheckboxChange = () => {
+    if (linked && isOpen() !== visibleCheckbox.checked) {
+      labelWrap.click();
+    }
+
+    gradioCheckbox.checked = visibleCheckbox.checked;
+    updateInput(gradioCheckbox);
+  };
+
+  visibleCheckbox.addEventListener('click', (event) => {
+    linked = false;
+    event.stopPropagation();
+  });
+  visibleCheckbox.addEventListener('input', accordion.onVisibleCheckboxChange);
+}
+
+onUiLoaded(() => {
+  for (const accordion of gradioApp().querySelectorAll('.input-accordion')) {
+    setupAccordion(accordion);
+  }
+});