Skip to content
81 changes: 11 additions & 70 deletions src/Pages/Install.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
7 changes: 6 additions & 1 deletion src/Pages/Shared/_Layout.cshtml
Original file line number Diff line number Diff line change
Expand Up @@ -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];
Expand Down
51 changes: 51 additions & 0 deletions src/Pages/ThemePreview.cshtml
Original file line number Diff line number Diff line change
@@ -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>
}
179 changes: 30 additions & 149 deletions src/wwwroot/css/installer.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,161 +24,42 @@
}
.form-check {
margin-bottom: 0.5rem;
cursor: pointer;
}
.theme_preview {
max-height: 44rem;
overflow-y: auto;
}
.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;
pointer-events: none;
}
label {
font-size: 120%;
Expand Down
37 changes: 37 additions & 0 deletions src/wwwroot/css/themepreview.css
Original file line number Diff line number Diff line change
@@ -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;
}