1 files changed, 56 insertions, 36 deletions
diff --git a/javascript/ui_settings_hints.js b/javascript/ui_settings_hints.js
index 87a289d3..9251fd71 100644
--- a/javascript/ui_settings_hints.js
+++ b/javascript/ui_settings_hints.js
@@ -1,41 +1,61 @@
 // various hints and extra info for the settings tab
 
-onUiLoaded(function(){
-    createLink = function(elem_id, text, href){
-        var a = document.createElement('A')
-        a.textContent = text
-        a.target = '_blank';
-
-        elem = gradioApp().querySelector('#'+elem_id)
-        elem.insertBefore(a, elem.querySelector('label'))
-
-        return a
-    }
-
-    createLink("setting_samples_filename_pattern", "[wiki] ").href = "https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Custom-Images-Filename-Name-and-Subdirectory"
-    createLink("setting_directories_filename_pattern", "[wiki] ").href = "https://github.com/AUTOMATIC1111/stable-diffusion-webui/wiki/Custom-Images-Filename-Name-and-Subdirectory"
-
-    createLink("setting_quicksettings_list", "[info] ").addEventListener("click", function(event){
-        requestGet("./internal/quicksettings-hint", {}, function(data){
-            var table = document.createElement('table')
-            table.className = 'settings-value-table'
-
-            data.forEach(function(obj){
-                var tr = document.createElement('tr')
-                var td = document.createElement('td')
-                td.textContent = obj.name
-                tr.appendChild(td)
-
-                var td = document.createElement('td')
-                td.textContent = obj.label
-                tr.appendChild(td)
-
-                table.appendChild(tr)
-            })
-
-            popup(table);
-        })
-    });
+settingsHintsSetup = false
+
+onOptionsChanged(function(){
+    if(settingsHintsSetup) return
+    settingsHintsSetup = true
+
+    gradioApp().querySelectorAll('#settings [id^=setting_]').forEach(function(div){
+        var name = div.id.substr(8)
+        var commentBefore = opts._comments_before[name]
+        var commentAfter = opts._comments_after[name]
+
+        if(! commentBefore && !commentAfter) return
+
+        var span = null
+        if(div.classList.contains('gradio-checkbox')) span = div.querySelector('label span')
+        else if(div.classList.contains('gradio-checkboxgroup')) span = div.querySelector('span')
+        else span = div.querySelector('label span').firstChild
+
+        if(!span) return
+
+        if(commentBefore){
+            var comment = document.createElement('DIV')
+            comment.className = 'settings-comment'
+            comment.innerHTML = commentBefore
+            span.parentElement.insertBefore(document.createTextNode('\xa0'), span)
+            span.parentElement.insertBefore(comment, span)
+            span.parentElement.insertBefore(document.createTextNode('\xa0'), span)
+        }
+        if(commentAfter){
+            var comment = document.createElement('DIV')
+            comment.className = 'settings-comment'
+            comment.innerHTML = commentAfter
+            span.parentElement.insertBefore(comment, span.nextSibling)
+            span.parentElement.insertBefore(document.createTextNode('\xa0'), span.nextSibling)
+        }
+    })
 })
 
+function settingsHintsShowQuicksettings(){
+	requestGet("./internal/quicksettings-hint", {}, function(data){
+		var table = document.createElement('table')
+		table.className = 'settings-value-table'
 
+		data.forEach(function(obj){
+			var tr = document.createElement('tr')
+			var td = document.createElement('td')
+			td.textContent = obj.name
+			tr.appendChild(td)
+
+			var td = document.createElement('td')
+			td.textContent = obj.label
+			tr.appendChild(td)
+
+			table.appendChild(tr)
+		})
+
+		popup(table);
+	})
+}