Skip to content
Open
Show file tree
Hide file tree
Changes from 7 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
55 changes: 55 additions & 0 deletions src/Pages/ThemePreview.cshtml
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
@page
@{
var themeOverride = Request.Query["theme"].ToString();
ViewData["theme_override"] = themeOverride;
}
@section Header {
<link rel="stylesheet" href="css/[email protected]" />
<link rel="stylesheet" href="css/[email protected]" />
}
<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() {
makeGenericPopover('input_images', 'Images', 'Integer', 'How many images to generate at once.', ["1", "4"])
makeGenericPopover('input_seed', 'Seed', 'Integer', 'Image seed.\n-1 = random.\nDifferent seeds produce different results for the same prompt.', ["1", "2", "...", "10"])
makeGenericPopover('input_steps', 'Steps', 'Integer', 'Diffusion works by running a model repeatedly to slowly build and then refine an image.\nThis parameter is how many times to run the model.\nMore steps = better quality, but more time.\n20 is a good baseline for speed, 40 is good for maximizing quality.\nSome models, such as Turbo models, are intended for low step counts like 4 or 8.\nYou can go much higher, but it quickly becomes pointless above 70 or so.\nNote that steps is a core parameter used for defining diffusion schedules and other advanced internals,\nand merely running the model over top of an existing image is not the same as increasing the steps.\nNote that the number of steps actually ran can be influenced by other parameters such as Init Image Creativity when applied.', ["10", "15", "20", "30", "40"])
makeGenericPopover('input_cfgscale', 'CFG Scale', 'Decimal', 'How strongly to scale prompt input.\nHigher CFG scales tend to produce more contrast, and lower CFG scales produce less contrast.\nToo-high values can cause corrupted/burnt images, too-low can cause nonsensical images.\n7 is a good baseline. Normal usages vary between 4 and 9.\nSome model types, such as Flux, Hunyuan Video, or any Turbo model, expect CFG to be set to 1.', ["5", "6", "7", "8", "9"])
generateInputs();
});
</script>
<div class="theme_preview-content">
<div class="theme_preview-item" 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/[email protected]"></script>
}
174 changes: 23 additions & 151 deletions src/wwwroot/css/installer.css
Original file line number Diff line number Diff line change
Expand Up @@ -24,166 +24,38 @@
}
.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);
}
.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 {
margin-top: 0.125rem;
margin-left: 0.5rem;
cursor: pointer;
font-size: 120%;
vertical-align: top;
margin-top: -0.3rem;
}
.final_confirm_info {
font-weight: bold;
Expand Down
33 changes: 33 additions & 0 deletions src/wwwroot/css/themepreview.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
html, body {
height: 100%
}
#alt_generate_button {
margin-left: 0 !important;
}
.version-display {
display: none;
visibility: hidden;
}
.theme_preview-content {
height: 100%;
align-content: center;
margin-top: -0.25rem;
}
.theme_preview-item {
display: flex;
justify-content: center;
}
.theme_preview-item:not(:last-child) {
margin-bottom: 0.5em;
}
.theme_preview-item .theme_preview-text {
font-size: 1.25rem;
margin-bottom: 0;
}
.input-group.input-group-open {
display: block;
margin: 0 0.5rem;
}
.input-group.input-group-open .input-group-content {
margin-top: 0;
}