2 files changed, 35 insertions, 0 deletions
diff --git a/javascript/extraNetworks.js b/javascript/extraNetworks.js
index a1bf29a8..98a7abb7 100644
--- a/javascript/extraNetworks.js
+++ b/javascript/extraNetworks.js
@@ -130,6 +130,10 @@ function extraNetworksMovePromptToTab(tabname, id, showPrompt, showNegativePromp
     } else {
         promptContainer.insertBefore(prompt, promptContainer.firstChild);
     }
+
+    if (elem) {
+        elem.classList.toggle('extra-page-prompts-active', showNegativePrompt || showPrompt);
+    }
 }
 
 
@@ -388,3 +392,9 @@ function extraNetworksRefreshSingleCard(page, tabname, name) {
         }
     });
 }
+
+window.addEventListener("keydown", function(event) {
+    if (event.key == "Escape") {
+        closePopup();
+    }
+});
diff --git a/javascript/settings.js b/javascript/settings.js
index 4e79ec00..e6009290 100644
--- a/javascript/settings.js
+++ b/javascript/settings.js
@@ -44,3 +44,28 @@ onUiLoaded(function() {
 
     buttonShowAllPages.addEventListener("click", settingsShowAllTabs);
 });
+
+
+onOptionsChanged(function() {
+    if (gradioApp().querySelector('#settings .settings-category')) return;
+
+    var sectionMap = {};
+    gradioApp().querySelectorAll('#settings > div > button').forEach(function(x) {
+        sectionMap[x.textContent.trim()] = x;
+    });
+
+    opts._categories.forEach(function(x) {
+        var section = x[0];
+        var category = x[1];
+
+        var span = document.createElement('SPAN');
+        span.textContent = category;
+        span.className = 'settings-category';
+
+        var sectionElem = sectionMap[section];
+        if (!sectionElem) return;
+
+        sectionElem.parentElement.insertBefore(span, sectionElem);
+    });
+});
+