add a visible checkbox to input accordion

var observerAccordionOpen = new MutationObserver(function(mutations) {

    mutations.forEach(function(mutationRecord) {

        var elem = mutationRecord.target;

        var open = elem.classList.contains('open');

function inputAccordionChecked(id, checked) {

    var accordion = gradioApp().getElementById(id);

    accordion.visibleCheckbox.checked = checked;

    accordion.onVisibleCheckboxChange();

}

        var accordion = elem.parentNode;

        accordion.classList.toggle('input-accordion-open', open);

function setupAccordion(accordion){

    var labelWrap = accordion.querySelector('.label-wrap');

    var gradioCheckbox = gradioApp().querySelector('#' + accordion.id + "-checkbox input");

    var extra = gradioApp().querySelector('#' + accordion.id + "-extra");

    var span = labelWrap.querySelector('span');

    var linked = true;

        var checkbox = gradioApp().querySelector('#' + accordion.id + "-checkbox input");

        checkbox.checked = open;

        updateInput(checkbox);

    var isOpen = function(){ return labelWrap.classList.contains('open'); }

        var extra = gradioApp().querySelector('#' + accordion.id + "-extra");

        if (extra) {

            extra.style.display = open ? "" : "none";

    var observerAccordionOpen = new MutationObserver(function(mutations) {

        mutations.forEach(function(mutationRecord) {

            accordion.classList.toggle('input-accordion-open', isOpen());

            if(linked){

                accordion.visibleCheckbox.checked = isOpen();

                accordion.onVisibleCheckboxChange();

            }

        });

    });

    observerAccordionOpen.observe(labelWrap, {attributes: true, attributeFilter: ['class']});

function inputAccordionChecked(id, checked) {

    var label = gradioApp().querySelector('#' + id + " .label-wrap");

    if (label.classList.contains('open') != checked) {

        label.click();

    if (extra) {

        labelWrap.insertBefore(extra, labelWrap.lastElementChild);

    }

    accordion.onChecked = function(checked){

        if (isOpen() != checked) {

            labelWrap.click();

        }

    }

onUiLoaded(function() {

    for (var accordion of gradioApp().querySelectorAll('.input-accordion')) {

        var labelWrap = accordion.querySelector('.label-wrap');

        observerAccordionOpen.observe(labelWrap, {attributes: true, attributeFilter: ['class']});

    var 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);

        var extra = gradioApp().querySelector('#' + accordion.id + "-extra");

        if (extra) {

            labelWrap.insertBefore(extra, labelWrap.lastElementChild);

    accordion.visibleCheckbox = visibleCheckbox;

    accordion.onVisibleCheckboxChange = function(){

        if(linked && isOpen() != visibleCheckbox.checked) {

            labelWrap.click();

        }

        gradioCheckbox.checked = visibleCheckbox.checked;

        updateInput(gradioCheckbox);

    };

    visibleCheckbox.addEventListener('click', function(event){

        linked = false;

        event.stopPropagation();

    });

    visibleCheckbox.addEventListener('input', accordion.onVisibleCheckboxChange);

}

onUiLoaded(function() {

    for (var accordion of gradioApp().querySelectorAll('.input-accordion')) {

        setupAccordion(accordion);

    }

});

    padding: 8px 8px;

}

input[type="checkbox"].input-accordion-checkbox{

    vertical-align: sub;

    margin-right: 0.5em;

}

/* txt2img/img2img specific */