From 2b96a7b694d3392f76940dfe5df895a2833400fb Mon Sep 17 00:00:00 2001
From: AUTOMATIC <16777216c@gmail.com>
Date: Mon, 8 May 2023 16:46:35 +0300
Subject: [PATCH] add links to wiki for filename pattern settings add extended
 info for quicksettings setting

---
 javascript/ui_settings_hints.js | 41 +++++++++++++++++++++++++++++++++
 modules/ui.py                   | 14 +++++++++++
 style.css                       | 16 +++++++++++++
 webui.py                        |  1 +
 4 files changed, 72 insertions(+)
 create mode 100644 javascript/ui_settings_hints.js

diff --git a/javascript/ui_settings_hints.js b/javascript/ui_settings_hints.js
new file mode 100644
index 000000000..87a289d31
--- /dev/null
+++ b/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);
+        })
+    });
+})
+
+
diff --git a/modules/ui.py b/modules/ui.py
index 883d37e75..842c57f74 100644
--- a/modules/ui.py
+++ b/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])
diff --git a/style.css b/style.css
index 57ddba0ed..b823c7ddb 100644
--- a/style.css
+++ b/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{
diff --git a/webui.py b/webui.py
index f770db547..727ebd31d 100644
--- a/webui.py
+++ b/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)