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: N/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)