add links to wiki for filename pattern settings

add extended info for quicksettings setting

javascript/ui_settings_hints.js

@@ -0,0 +1,41 @@
+// 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);
+        })
+    });
+})
+
+

modules/ui.py

@@ -1944,3 +1944,17 @@ gradio: {gr.__version__}
  • 
 checkpoint: <a id="sd_checkpoint_hash">N/A</a>
 """
+
+
+def setup_ui_api(app):
+    from pydantic import BaseModel, Field
+    from typing import List
+
+    class QuicksettingsHint(BaseModel):
+        name: str = Field(title="Name of the quicksettings field")
+        label: str = Field(title="Label of the quicksettings field")
+
+    def quicksettings_hint():
+        return [QuicksettingsHint(name=k, label=v.label) for k, v in opts.data_labels.items()]
+
+    app.add_api_route("/internal/quicksettings-hint", quicksettings_hint, methods=["GET"], response_model=List[QuicksettingsHint])

style.css

@@ -125,6 +125,10 @@ div.gradio-html.min{
     text-decoration: none;
 }
 
+a{
+    font-weight: bold;
+    cursor: pointer;
+}
 
 
 /* general styled components */
@@ -397,6 +401,18 @@ div#extras_scale_to_tab div.form{
     margin: 0 1.2em;
 }
 
+table.settings-value-table{
+    background: white;
+    border-collapse: collapse;
+    margin: 1em;
+    border: 4px solid white;
+}
+
+table.settings-value-table td{
+    padding: 0.4em;
+    border: 1px solid #ccc;
+    max-width: 36em;
+}
 
 /* live preview */
 .progressDiv{

webui.py

@@ -345,6 +345,7 @@ def webui():
         setup_middleware(app)
 
         modules.progress.setup_progress_api(app)
+        modules.ui.setup_ui_api(app)
 
         if launch_api:
             create_api(app)