[Installer] Dynamic theme preview loading, Iframe previews, and other small improvements

src/Pages/Install.cshtml

@@ -143,76 +143,17 @@
         <div class="install_hint">You can always change this later in the User Settings page.</div>
         <br>
         <fieldset class="form-group theme_preview" id="theme_selection_field">
-            <div class="form-check theme_preview_modern_dark" id="theme_input_modern_dark">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_moderndark" value="modern_dark" checked="">
-                <label class="form-check-label" for="theme_moderndark">Modern Dark</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_modern_light" id="theme_input_modern_light">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_modernlight" value="modern_light">
-                <label class="form-check-label" for="theme_modernlight">Modern Light</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_solarized" id="theme_input_solarized">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_solarized" value="solarized">
-                <label class="form-check-label" for="theme_solarized">Solarized Light</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_dark_dreams" id="theme_input_dark_dreams">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_darkdreams" value="dark_dreams">
-                <label class="form-check-label" for="theme_darkdreams">Dark Dreams</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_gravity_blue" id="theme_input_gravity_blue">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_gravityblue" value="gravity_blue">
-                <label class="form-check-label" for="theme_gravityblue">Gravity Blue</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_cyber_swarm" id="theme_input_cyber_swarm">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_cyberswarm" value="cyber_swarm">
-                <label class="form-check-label" for="theme_cyberswarm">Cyber Swarm</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_punked" id="theme_input_punked">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_punked" value="punked">
-                <label class="form-check-label" for="theme_punked">Punked</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_eyesear_white" id="theme_input_eyesear_white">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_eyesearwhite" value="eyesear_white">
-                <label class="form-check-label" for="theme_eyesearwhite">Eyesear White</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_swarmpunk" id="theme_input_swarmpunk">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_swarmpunk" value="swarmpunk">
-                <label class="form-check-label" for="theme_swarmpunk">Swarm Punk</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_beweish" id="theme_input_beweish">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_beweish" value="beweish">
-                <label class="form-check-label" for="theme_beweish">Beweish</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_ctp_mocha" id="theme_input_ctp_mocha">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_ctpmocha" value="ctp_mocha">
-                <label class="form-check-label" for="theme_ctpmocha">Catppuccin Mocha</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_ctp_macchiato" id="theme_input_ctp_macchiato">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_ctpmacchiato" value="ctp_macchiato">
-                <label class="form-check-label" for="theme_ctpmacchiato">Catppuccin Macchiato</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_ctp_frappe" id="theme_input_ctp_frappe">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_ctpfrappe" value="ctp_frappe">
-                <label class="form-check-label" for="theme_ctpfrappe">Catppuccin Frappé</label>
-                <span class="button_example">Example</span>
-            </div>
-            <div class="form-check theme_preview_ctp_latte" id="theme_input_ctp_latte">
-                <input class="form-check-input" type="radio" name="theme_radio" id="theme_ctplatte" value="ctp_latte">
-                <label class="form-check-label" for="theme_ctplatte">Catppuccin Latte</label>
-                <span class="button_example">Example</span>
-            </div>
+            @foreach (var theme in Program.Web.RegisteredThemes.Values)
+            {
+                string themeName = $"{theme.Name.Replace(" (Legacy)","")}";
+                string themeId = $"{theme.ID}";
+                string themeIdNoUnderscore = $"{theme.ID.Replace("_", "")}";
+                <div class="form-check theme_preview_@themeId" id="theme_input_@themeId">
+                    <input class="form-check-input" type="radio" name="theme_radio" id="theme_@themeIdNoUnderscore" value="@themeId" @(themeId == "modern_dark" ? "checked" : "")>
+                    <label class="form-check-label" for="theme_@themeIdNoUnderscore">@themeName</label>
+                    <iframe class="form-check-iframe" src="ThemePreview?theme=@themeId"></iframe>
+                </div>
+            }
         </fieldset>
     </div>
 

src/Pages/Shared/_Layout.cshtml

@@ -6,8 +6,13 @@
     <title id="page_title">@ViewData["Title"] - SwarmUI - @Program.ServerSettings.UserAuthorization.InstanceTitle</title>
     @{
         string themeId = "modern_dark";
+        var themeOverride = ViewData["theme_override"]?.ToString();
+        if (!string.IsNullOrEmpty(themeOverride) && Program.Web.RegisteredThemes.ContainsKey(themeOverride))
+        {
+            themeId = themeOverride;
+        }
         // TODO: Identify user by auth header and use their settings to determine theme
-        if (ViewContext.HttpContext.Request.Cookies.TryGetValue("sui_theme_id", out string themeCookie) && Program.Web.RegisteredThemes.ContainsKey(themeCookie)) {
+        else if (ViewContext.HttpContext.Request.Cookies.TryGetValue("sui_theme_id", out string themeCookie) && Program.Web.RegisteredThemes.ContainsKey(themeCookie)) {
             themeId = themeCookie;
         }
         WebServer.ThemeData theme = Program.Web.RegisteredThemes[themeId];

src/Pages/ThemePreview.cshtml

@@ -0,0 +1,51 @@
+@page
+@{
+    var themeOverride = Request.Query["theme"].ToString();
+    ViewData["theme_override"] = themeOverride;
+}
+@section Header {
+    <link rel="stylesheet" href="css/genpage.css?vary=@Utilities.VaryID" />
+    <link rel="stylesheet" href="css/themepreview.css?vary=@Utilities.VaryID" />
+}
+<script>
+function reuseLastParamVal() {
+    return null; // Prevent error in browser console
+}
+
+function generateInputs() {
+    const container = getRequiredElementById('input_group_content_coreparameters');
+    container.innerHTML = 
+        makeNumberInput(null, 'input_images', 'images', 'Images', '', 1, 1, 10000, 1, 'big', false, true)
+        + makeNumberInput(null, 'input_seed', 'seed', 'Seed', '', -1, -1, 9223372036854776000, 1, 'seed', false, true)
+        + makeSliderInput(null, 'input_steps', 'steps', 'Steps', '', 20, 0, 500, 0, 100, 1, false, false, true)
+        + makeSliderInput(null, 'input_cfgscale', 'cfgscale', 'CFG Scale', '', 7, 0, 100, 0, 20, 0.5, false, false, true);
+    autoNumberWidth(document.getElementById('input_images'));
+    enableSliderAbove(document.getElementById('input_steps'));
+    enableSliderAbove(document.getElementById('input_cfgscale'));
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    generateInputs();
+});
+</script>
+<div class="theme_preview-content">
+    <div class="theme_preview-item noise-image-bg" id="theme_preview_coreparameters">
+        <div class="input-group input-group-open" id="auto-group-coreparameters">
+            <div class="input-group-content" id="input_group_content_coreparameters"></div>
+        </div>
+    </div>
+
+    <hr>
+
+    <div class="theme_preview-item">
+        <div class="alt-prompt-buttons-wrapper">
+            <button class="alt-prompt-buttons alt-prompt-generate-button basic-button translate" id="alt_generate_button">Generate</button>
+            <button class="alt-prompt-buttons alt-prompt-center-button basic-button" id="alt_center_button">&#x2B9F;</button>
+            <button class="alt-prompt-buttons interrupt-button interrupt-button-none alt-interrupt" id="alt_interrupt_button">&times;</button>
+        </div>
+    </div>
+</div>
+
+@section Scripts {
+    <script src="js/genpage/helpers/ui_improvements.js?vary=@Utilities.VaryID"></script>
+}

src/wwwroot/css/installer.css

@@ -24,161 +24,37 @@
 }
 .form-check {
     margin-bottom: 0.5rem;
+    cursor: pointer;
 }
 .theme_preview .form-check {
     display: inline-block;
-    width: 30%;
-    height: 10rem;
+    width: 49%;
+    height: 22rem;
     border: 1px solid var(--light-border);
     border-radius: 0.5rem;
+    padding-left: 0;
+    position: relative;
 }
-.theme_preview .form-check .button_example {
-    display: block;
-    height: 2rem;
-    font-weight: bold;
-    border-radius: 0.5rem;
-    text-align: center;
-    width: fit-content;
-    padding-left: 0.2rem;
-    padding-right: 0.2rem;
-    margin-top: 2rem;
-    margin-left: auto;
-    margin-right: auto;
-    padding-top: 3px;
-}
-.theme_preview_modern_dark {
-    background-color: #202020;
-    color: #E4E4E4;
-}
-.theme_preview_modern_dark .button_example {
-    border: 1px solid #3f3f46;
-    background-color: #4b4b4b;
-    color: #ffffff;
-}
-.theme_preview_modern_light {
-    background-color: #D9D9D9;
-    color: #101010;
-}
-.theme_preview_modern_light .button_example {
-    border: 1px solid #3f3f46;
-    background-color: #a1a1a1;
-    color: #101010;
-}
-.theme_preview_dark_dreams {
-    background-color: #18181b;
-    color: #eeeeee;
-}
-.theme_preview_dark_dreams .button_example {
-    border: 1px solid #3f3f46;
-    background-color: #7855e1;
-    color: #ffffff;
-}
-.theme_preview_cyber_swarm {
-    background-color: #18181b;
-    color: #eeeeee;
-}
-.theme_preview_cyber_swarm .button_example {
-    border: 1px solid #3f3f46;
-    background-color: #00bc8c;
-    color: #ffffff;
-    border-radius: 1rem;
-    padding-top: 0.1em;
-    padding-left: 0.3em;
-    padding-right: 0.3em;
-}
-.theme_preview_gravity_blue {
-    background-color: #0b0f20;
-    color: #eeeeee;
-}
-.theme_preview_gravity_blue .button_example {
-    border: 1px solid #3f3f46;
-    background-color: orange;
-    color: #101010;
-}
-.theme_preview_eyesear_white {
-    background-color: #f0f0f0;
-    color: #101010;
-}
-.theme_preview_eyesear_white .button_example {
-    border: 1px solid #3f3f46;
-    background-color: #a1a1a1;
-    color: #101010;
-}
-.theme_preview_punked {
-    background-color: #0a0a0a;
-    color: #eeeeee;
-}
-.theme_preview_punked .button_example {
-    border: 1px solid #00fff7;
-    background-color: #0a0a0a;
-    color: #ffffff;
-    border-radius: 1rem;
-    padding-top: 0.1em;
-    padding-left: 0.3em;
-    padding-right: 0.3em;
-}
-.theme_preview_solarized {
-    background-color: #d3cdc0;
-    color: #101010;
-}
-.theme_preview_solarized .button_example {
-    border: 1px solid #3f3f46;
-    background-color: #a1a1a1;
-    color: #101010;
-}
-.theme_preview_swarmpunk {
-    background-color: #0a0a1f;
-    color: #00ff9d;
-}
-.theme_preview_swarmpunk .button_example {
-    border: 1px solid #00ff9d40;
-    background-color: #12122a;
-    color: #00ff9d;
-}
-.theme_preview_beweish {
-    background-color: #0e0e2c;
-    color: #ffffff;
-}
-.theme_preview_beweish .button_example {
-    border: 1px solid #2a4170;
-    background-color: #0f3460;
-    color: #ffffff;
-}
-.theme_preview_ctp_mocha {
-    background-color: #11111b;
-    color: #cdd6f4;
-}
-.theme_preview_ctp_mocha .button_example {
-    border: 1px solid #313244;
-    background-color: #585b70;
-    color: #cdd6f4;
-}
-.theme_preview_ctp_macchiato {
-    background-color: #181926;
-    color: #cad3f5;
-}
-.theme_preview_ctp_macchiato .button_example {
-    border: 1px solid #363a4f;
-    background-color: #5b6078;
-    color: #cad3f5;
-}
-.theme_preview_ctp_frappe {
-    background-color: #232634;
-    color: #c6d0f5;
-}
-.theme_preview_ctp_frappe .button_example {
-    border: 1px solid #414559;
-    background-color: #626880;
-    color: #c6d0f5;
-}
-.theme_preview_ctp_latte {
-    background-color: #dce0e8;
-    color: #4c4f69;
-}
-.theme_preview_ctp_latte .button_example {
-    border: 1px solid #ccd0da;
-    background-color: #acb0be;
-    color: #4c4f69;
+.theme_preview .form-check:has(.form-check-input:checked) {
+    border: 1px solid var(--emphasis);
+}
+.theme_preview label {
+    margin-top: 0.125rem;
+    margin-left: 0.5rem;
+    cursor: pointer;
+}
+.form-check .form-check-input {
+    margin-left: 0.5rem;
+    margin-top: 0.5rem;
+}
+.form-check .form-check-iframe {
+    width: 100%;
+    height: calc(100% - 2rem);
+    border-bottom-left-radius: calc(0.5rem - 1px);
+    border-bottom-right-radius: calc(0.5rem - 1px);
+    position: absolute;
+    bottom: 0;
+    left: 0;
 }
 label {
     font-size: 120%;

src/wwwroot/css/themepreview.css

@@ -0,0 +1,37 @@
+html, body {
+    height: 100%;
+}
+hr {
+    margin: 0 0 1rem 0;
+}
+#alt_generate_button {
+  margin-left: 0 !important;
+}
+.version-display {
+    display: none;
+    visibility: hidden;
+}
+.theme_preview-content {
+    height: 100%;
+    align-content: center;
+    margin-top: -0.55rem;
+}
+.theme_preview-item {
+    display: flex;
+    justify-content: center;
+}
+.theme_preview-item .theme_preview-text {
+    font-size: 1.25rem;
+    margin-bottom: 0;
+}
+.theme_preview-item.noise-image-bg {
+    background-image: var(--noise-image);
+    padding: 1rem 0;
+}
+.input-group.input-group-open {
+    display: block;
+    margin: 0 0.5rem;
+}
+.input-group.input-group-open .input-group-content  {
+    margin-top: 0;
+}