Implementation:AUTOMATIC1111 Stable diffusion webui Settings JS
| Knowledge Sources | |
|---|---|
| Domains | UI_Frontend, Settings, Search |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
Provides client-side functionality for the Settings page, including search filtering, show-all-tabs mode, and settings category grouping.
Description
This JavaScript module enhances the Settings page with three main features. First, it implements a real-time search filter: when the user types in the settings search input, all setting entries are filtered by text content, and matching tabs are shown simultaneously via settingsShowAllTabs (which excludes certain tabs like defaults, sysinfo, actions, and licenses). Clearing the search restores the single-tab view via settingsShowOneTab. Second, it repositions the search input and "Show all pages" button within the settings tab layout for better UX. Third, when options change (via onOptionsChanged callback), it processes the opts._categories array to insert category header spans before setting tab buttons, grouping related settings sections under labeled categories with localization support. The settingsExcludeTabsFromShowAll object defines which tabs should remain hidden even in show-all mode.
Usage
The Settings page search and navigation enhancements are active automatically. Type in the search box to filter settings across all tabs. Click "Show all pages" to view all settings tabs simultaneously. Category labels appear automatically based on the application's settings category configuration.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: javascript/settings.js
- Lines: 1-71
Signature
let settingsExcludeTabsFromShowAll = { ... }
function settingsShowAllTabs()
function settingsShowOneTab()
// Callbacks: onUiLoaded(function() { ... })
// Callbacks: onOptionsChanged(function() { ... })
Import
// Loaded automatically by the web UI as part of the javascript/ directory
// settingsShowAllTabs and settingsShowOneTab are available globally
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| editTextarea.value | string | Yes | The search text entered by the user in the settings search input |
| opts._categories | array | Yes | Array of [section, category] pairs defining settings groupings |
Outputs
| Name | Type | Description |
|---|---|---|
| (side effect) | DOM | Filters settings entries by visibility, toggles tab display, and inserts category header spans |
Usage Examples
// All functionality is automatic. User interactions:
// 1. Type "checkpoint" in the settings search box
// -> All settings containing "checkpoint" are shown across all tabs
// -> Non-matching settings are hidden
// 2. Clear the search box
// -> Returns to single-tab view
// 3. Click "Show all pages" button
// -> All settings tabs displayed simultaneously (except excluded ones)
// Programmatic usage:
settingsShowAllTabs(); // Show all settings tabs
settingsShowOneTab(); // Return to single-tab navigation