rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

Redesign SD settings

Browse Source
This commit is contained in:
Cohee
2024-06-18 00:49:42 +03:00
parent b09e86fb53
commit a9c4422c87
3 changed files with 168 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
public/scripts/extensions/stable-diffusion/index.js
View File

@ -438,7 +438,7 @@ async function loadSettings() {
$('#sd_comfy_prompt').val(extension_settings.sd.comfy_prompt); $('#sd_comfy_prompt').val(extension_settings.sd.comfy_prompt);
$('#sd_snap').prop('checked', extension_settings.sd.snap); $('#sd_snap').prop('checked', extension_settings.sd.snap);
$('#sd_clip_skip').val(extension_settings.sd.clip_skip); $('#sd_clip_skip').val(extension_settings.sd.clip_skip);
$('#sd_clip_skip_value').text(extension_settings.sd.clip_skip); $('#sd_clip_skip_value').val(extension_settings.sd.clip_skip);
$('#sd_seed').val(extension_settings.sd.seed); $('#sd_seed').val(extension_settings.sd.seed);
$('#sd_free_extend').prop('checked', extension_settings.sd.free_extend); $('#sd_free_extend').prop('checked', extension_settings.sd.free_extend);
$('#sd_wand_visible').prop('checked', extension_settings.sd.wand_visible); $('#sd_wand_visible').prop('checked', extension_settings.sd.wand_visible);
@ -821,7 +821,7 @@ function onInteractiveVisibleInput() {
function onClipSkipInput() { function onClipSkipInput() {
extension_settings.sd.clip_skip = Number($('#sd_clip_skip').val()); extension_settings.sd.clip_skip = Number($('#sd_clip_skip').val());
$('#sd_clip_skip_value').text(extension_settings.sd.clip_skip); $('#sd_clip_skip_value').val(extension_settings.sd.clip_skip);
saveSettingsDebounced(); saveSettingsDebounced();
} }
@ -832,13 +832,13 @@ function onSeedInput() {
function onScaleInput() { function onScaleInput() {
extension_settings.sd.scale = Number($('#sd_scale').val()); extension_settings.sd.scale = Number($('#sd_scale').val());
$('#sd_scale_value').text(extension_settings.sd.scale.toFixed(1)); $('#sd_scale_value').val(extension_settings.sd.scale.toFixed(1));
saveSettingsDebounced(); saveSettingsDebounced();
} }
function onStepsInput() { function onStepsInput() {
extension_settings.sd.steps = Number($('#sd_steps').val()); extension_settings.sd.steps = Number($('#sd_steps').val());
$('#sd_steps_value').text(extension_settings.sd.steps); $('#sd_steps_value').val(extension_settings.sd.steps);
saveSettingsDebounced(); saveSettingsDebounced();
} }
@ -901,13 +901,13 @@ function onSchedulerChange() {
function onWidthInput() { function onWidthInput() {
extension_settings.sd.width = Number($('#sd_width').val()); extension_settings.sd.width = Number($('#sd_width').val());
$('#sd_width_value').text(extension_settings.sd.width); $('#sd_width_value').val(extension_settings.sd.width);
saveSettingsDebounced(); saveSettingsDebounced();
} }
function onHeightInput() { function onHeightInput() {
extension_settings.sd.height = Number($('#sd_height').val()); extension_settings.sd.height = Number($('#sd_height').val());
$('#sd_height_value').text(extension_settings.sd.height); $('#sd_height_value').val(extension_settings.sd.height);
saveSettingsDebounced(); saveSettingsDebounced();
} }
@ -947,7 +947,7 @@ async function onViewAnlasClick() {
function onNovelUpscaleRatioInput() { function onNovelUpscaleRatioInput() {
extension_settings.sd.novel_upscale_ratio = Number($('#sd_novel_upscale_ratio').val()); extension_settings.sd.novel_upscale_ratio = Number($('#sd_novel_upscale_ratio').val());
$('#sd_novel_upscale_ratio_value').text(extension_settings.sd.novel_upscale_ratio.toFixed(1)); $('#sd_novel_upscale_ratio_value').val(extension_settings.sd.novel_upscale_ratio.toFixed(1));
saveSettingsDebounced(); saveSettingsDebounced();
} }
@ -1049,19 +1049,19 @@ function onHrUpscalerChange() {
function onHrScaleInput() { function onHrScaleInput() {
extension_settings.sd.hr_scale = Number($('#sd_hr_scale').val()); extension_settings.sd.hr_scale = Number($('#sd_hr_scale').val());
$('#sd_hr_scale_value').text(extension_settings.sd.hr_scale.toFixed(1)); $('#sd_hr_scale_value').val(extension_settings.sd.hr_scale.toFixed(1));
saveSettingsDebounced(); saveSettingsDebounced();
} }
function onDenoisingStrengthInput() { function onDenoisingStrengthInput() {
extension_settings.sd.denoising_strength = Number($('#sd_denoising_strength').val()); extension_settings.sd.denoising_strength = Number($('#sd_denoising_strength').val());
$('#sd_denoising_strength_value').text(extension_settings.sd.denoising_strength.toFixed(2)); $('#sd_denoising_strength_value').val(extension_settings.sd.denoising_strength.toFixed(2));
saveSettingsDebounced(); saveSettingsDebounced();
} }
function onHrSecondPassStepsInput() { function onHrSecondPassStepsInput() {
extension_settings.sd.hr_second_pass_steps = Number($('#sd_hr_second_pass_steps').val()); extension_settings.sd.hr_second_pass_steps = Number($('#sd_hr_second_pass_steps').val());
$('#sd_hr_second_pass_steps_value').text(extension_settings.sd.hr_second_pass_steps); $('#sd_hr_second_pass_steps_value').val(extension_settings.sd.hr_second_pass_steps);
saveSettingsDebounced(); saveSettingsDebounced();
} }

233
public/scripts/extensions/stable-diffusion/settings.html
View File

@ -128,16 +128,20 @@
<div data-sd-source="openai"> <div data-sd-source="openai">
<small data-i18n="These settings only apply to DALL-E 3">These settings only apply to DALL-E 3</small> <small data-i18n="These settings only apply to DALL-E 3">These settings only apply to DALL-E 3</small>
<div class="flex-container"> <div class="flex-container">
<label for="sd_openai_style" data-i18n="Image Style">Image Style</label> <div class="flex1">
<select id="sd_openai_style"> <label for="sd_openai_style" data-i18n="Image Style">Image Style</label>
<option value="vivid">Vivid</option> <select id="sd_openai_style">
<option value="natural">Natural</option> <option value="vivid">Vivid</option>
</select> <option value="natural">Natural</option>
<label for="sd_openai_quality" data-i18n="Image Quality">Image Quality</label> </select>
<select id="sd_openai_quality"> </div>
<option value="standard" data-i18n="Standard">Standard</option> <div class="flex1">
<option value="hd" data-i18n="HD">HD</option> <label for="sd_openai_quality" data-i18n="Image Quality">Image Quality</label>
</select> <select id="sd_openai_quality">
<option value="standard" data-i18n="Standard">Standard</option>
<option value="hd" data-i18n="HD">HD</option>
</select>
</div>
</div> </div>
</div> </div>
<div data-sd-source="comfy"> <div data-sd-source="comfy">
@ -185,91 +189,160 @@
</label> </label>
</div> </div>
</div> </div>
<label for="sd_scale" data-i18n="CFG Scale">CFG Scale (<span id="sd_scale_value"></span>)</label>
<input id="sd_scale" type="range" min="{{scale_min}}" max="{{scale_max}}" step="{{scale_step}}" value="{{scale}}" /> <div class="flex-container">
<div data-sd-source="novel" class="marginTopBot5"> <div class="flex1">
<label class="checkbox_label" for="sd_novel_decrisper" title="Reduce artifacts caused by high guidance values."> <label for="sd_model" data-i18n="Model">Model</label>
<input id="sd_novel_decrisper" type="checkbox" /> <select id="sd_model"></select>
<span data-i18n="Decrisper"> </div>
Decrisper
</span> <div class="flex1" data-sd-source="comfy">
</label> <label for="sd_vae">VAE</label>
<select id="sd_vae"></select>
</div>
</div> </div>
<label for="sd_steps" data-i18n="Sampling steps">Sampling steps (<span id="sd_steps_value"></span>)</label>
<input id="sd_steps" type="range" min="{{steps_min}}" max="{{steps_max}}" step="{{steps_step}}" value="{{steps}}" /> <div class="flex-container">
<label for="sd_width" data-i18n="Width">Width (<span id="sd_width_value"></span>)</label> <div class="flex1">
<input id="sd_width" type="range" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{width}}" /> <label for="sd_sampler" data-i18n="Sampling method">Sampling method</label>
<label for="sd_height" data-i18n="Height">Height (<span id="sd_height_value"></span>)</label> <select id="sd_sampler"></select>
<input id="sd_height" type="range" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{height}}" /> </div>
<label for="sd_resolution" data-i18n="Resolution">Resolution</label>
<select id="sd_resolution"><!-- Populated in JS --></select> <div class="flex1" data-sd-source="comfy,auto">
<label for="sd_model" data-i18n="Model">Model</label> <label for="sd_scheduler" data-i18n="Scheduler">Scheduler</label>
<select id="sd_model"></select> <select id="sd_scheduler"></select>
<label for="sd_sampler" data-i18n="Sampling method">Sampling method</label> </div>
<select id="sd_sampler"></select>
<label data-sd-source="horde" for="sd_horde_karras" class="checkbox_label marginTopBot5">
<input id="sd_horde_karras" type="checkbox" />
<span data-i18n="Karras (not all samplers supported)">
Karras (not all samplers supported)
</span>
</label>
<div data-sd-source="novel" class="flex-container marginTopBot5">
<label class="flex1 checkbox_label" data-i18n="[title]SMEA versions of samplers are modified to perform better at high resolution." title="SMEA versions of samplers are modified to perform better at high resolution.">
<input id="sd_novel_sm" type="checkbox" />
<span data-i18n="SMEA">
SMEA
</span>
</label>
<label class="flex1 checkbox_label" data-i18n="[title]DYN variants of SMEA samplers often lead to more varied output, but may fail at very high resolutions." title="DYN variants of SMEA samplers often lead to more varied output, but may fail at very high resolutions.">
<input id="sd_novel_sm_dyn" type="checkbox" />
<span data-i18n="DYN">
DYN
</span>
</label>
</div> </div>
<div data-sd-source="comfy,auto">
<label for="sd_scheduler" data-i18n="Scheduler">Scheduler</label> <div class="flex-container">
<select id="sd_scheduler"></select> <div class="flex1">
<label for="sd_resolution" data-i18n="Resolution">Resolution</label>
<select id="sd_resolution"><!-- Populated in JS --></select>
</div>
<div class="flex1" data-sd-source="auto,vlad,drawthings">
<label for="sd_hr_upscaler" data-i18n="Upscaler">Upscaler</label>
<select id="sd_hr_upscaler"></select>
</div>
</div> </div>
<div data-sd-source="comfy">
<label for="sd_vae">VAE</label> <div class="flex-container">
<select id="sd_vae"></select> <div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
<small>
<span data-i18n="Sampling steps">Sampling steps</span>
</small>
<input class="neo-range-slider" type="range" id="sd_steps" name="sd_steps" min="{{steps_min}}" max="{{steps_max}}" step="{{steps_step}}" value="{{steps}}" >
<input class="neo-range-input" type="number" id="sd_steps_value" data-for="sd_steps" min="{{steps_min}}" max="{{steps_max}}" step="{{steps_step}}" value="{{steps}}" >
</div>
<div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
<small>
<span data-i18n="CFG Scale">CFG Scale</span>
</small>
<input class="neo-range-slider" type="range" id="sd_scale" name="sd_scale" min="{{scale_min}}" max="{{scale_max}}" step="{{scale_step}}" value="{{scale}}" >
<input class="neo-range-input" type="number" id="sd_scale_value" data-for="sd_scale" min="{{scale_min}}" max="{{scale_max}}" step="{{scale_step}}" value="{{scale}}" >
</div>
</div> </div>
<div class="flex-container marginTopBot5">
<div class="flex-container">
<div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
<small>
<span data-i18n="Width">Width</span>
</small>
<input class="neo-range-slider" type="range" id="sd_width" name="sd_width" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{width}}" >
<input class="neo-range-input" type="number" id="sd_width_value" data-for="sd_width" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{width}}" >
</div>
<div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p">
<small>
<span data-i18n="Height">Height</span>
</small>
<input class="neo-range-slider" type="range" id="sd_height" name="sd_height" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{height}}" >
<input class="neo-range-input" type="number" id="sd_height_value" data-for="sd_height" max="{{dimension_max}}" min="{{dimension_min}}" step="{{dimension_step}}" value="{{height}}" >
</div>
</div>
<div class="flex-container">
<div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad,drawthings">
<small>
<span data-i18n="Upscale by">Upscale by</span>
</small>
<input class="neo-range-slider" type="range" id="sd_hr_scale" name="sd_hr_scale" min="{{hr_scale_min}}" max="{{hr_scale_max}}" step="{{hr_scale_step}}" value="{{hr_scale}}" >
<input class="neo-range-input" type="number" id="sd_hr_scale_value" data-for="sd_hr_scale" min="{{hr_scale_min}}" max="{{hr_scale_max}}" step="{{hr_scale_step}}" value="{{hr_scale}}" >
</div>
<div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad">
<small>
<span data-i18n="Denoising strength">Denoising strength</span>
</small>
<input class="neo-range-slider" type="range" id="sd_denoising_strength" name="sd_denoising_strength" min="{{denoising_strength_min}}" max="{{denoising_strength_max}}" step="{{denoising_strength_step}}" value="{{denoising_strength}}" >
<input class="neo-range-input" type="number" id="sd_denoising_strength_value" data-for="sd_denoising_strength" min="{{denoising_strength_min}}" max="{{denoising_strength_max}}" step="{{denoising_strength_step}}" value="{{denoising_strength}}" >
</div>
<div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad">
<small>
<span data-i18n="Hires steps (2nd pass)">Hires steps (2nd pass)</span>
</small>
<input class="neo-range-slider" type="range" id="sd_hr_second_pass_steps" name="sd_hr_second_pass_steps" max="{{hr_second_pass_steps_max}}" step="{{hr_second_pass_steps_step}}" value="{{hr_second_pass_steps}}" >
<input class="neo-range-input" type="number" id="sd_hr_second_pass_steps_value" data-for="sd_hr_second_pass_steps" max="{{hr_second_pass_steps_max}}" step="{{hr_second_pass_steps_step}}" value="{{hr_second_pass_steps}}" >
</div>
<div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="novel">
<small>
<span data-i18n="Upscale by">Upscale by</span>
</small>
<input class="neo-range-slider" type="range" id="sd_novel_upscale_ratio" name="sd_novel_upscale_ratio" min="{{novel_upscale_ratio_min}}" max="{{novel_upscale_ratio_max}}" step="{{novel_upscale_ratio_step}}" value="{{novel_upscale_ratio}}" >
<input class="neo-range-input" type="number" id="sd_novel_upscale_ratio_value" data-for="sd_novel_upscale_ratio" min="{{novel_upscale_ratio_min}}" max="{{novel_upscale_ratio_max}}" step="{{novel_upscale_ratio_step}}" value="{{novel_upscale_ratio}}" >
</div>
<div class="alignitemscenter flex-container flexFlowColumn flexGrow flexShrink gap0 flexBasis48p" data-sd-source="auto,vlad,comfy,horde,drawthings,extras">
<small>
<span data-i18n="CLIP Skip">CLIP Skip</span>
</small>
<input class="neo-range-slider" type="range" id="sd_clip_skip" name="sd_clip_skip" min="{{clip_skip_min}}" max="{{clip_skip_max}}" step="{{clip_skip_step}}" value="{{clip_skip}}" >
<input class="neo-range-input" type="number" id="sd_clip_skip_value" data-for="sd_clip_skip" min="{{clip_skip_min}}" max="{{clip_skip_max}}" step="{{clip_skip_step}}" value="{{clip_skip}}" >
</div>
</div>
<div class="flex-container marginTopBot5" data-sd-source="auto,vlad,extras,horde,drawthings,comfy">
<label class="flex1 checkbox_label"> <label class="flex1 checkbox_label">
<input id="sd_restore_faces" type="checkbox" /> <input id="sd_restore_faces" type="checkbox" />
<span data-i18n="Restore Faces">Restore Faces</span> <small data-i18n="Restore Faces">Restore Faces</small>
</label> </label>
<label class="flex1 checkbox_label"> <label class="flex1 checkbox_label">
<input id="sd_enable_hr" type="checkbox" /> <input id="sd_enable_hr" type="checkbox" />
<span data-i18n="Hires. Fix">Hires. Fix</span> <small data-i18n="Hires. Fix">Hires. Fix</small>
</label>
<label data-sd-source="horde" for="sd_horde_karras" class="flex1 checkbox_label">
<input id="sd_horde_karras" type="checkbox" />
<small data-i18n="Karras">Karras</small>
<i class="fa-solid fa-info-circle fa-sm opacity50p" data-i18n="[title]Not all samplers supported." title="Not all samplers supported."></i>
</label> </label>
</div> </div>
<div data-sd-source="auto,vlad,comfy,horde,drawthings,extras" class="marginTopBot5">
<label for="sd_clip_skip">CLIP Skip (<span id="sd_clip_skip_value"></span>)</label> <div class="flex-container marginTopBot5" data-sd-source="novel">
<input type="range" id="sd_clip_skip" min="{{clip_skip_min}}" max="{{clip_skip_max}}" step="{{clip_skip_step}}" value="{{clip_skip}}" /> <label class="flex1 checkbox_label" data-i18n="[title]SMEA versions of samplers are modified to perform better at high resolution." title="SMEA versions of samplers are modified to perform better at high resolution.">
</div> <input id="sd_novel_sm" type="checkbox" />
<div data-sd-source="auto,vlad,drawthings"> <small data-i18n="SMEA">SMEA</small>
<label for="sd_hr_upscaler" data-i18n="Upscaler">Upscaler</label> </label>
<select id="sd_hr_upscaler"></select> <label class="flex1 checkbox_label" data-i18n="[title]DYN variants of SMEA samplers often lead to more varied output, but may fail at very high resolutions." title="DYN variants of SMEA samplers often lead to more varied output, but may fail at very high resolutions.">
<label for="sd_hr_scale"><span data-i18n="Upscale by">Upscale by</span> (<span id="sd_hr_scale_value"></span>)</label> <input id="sd_novel_sm_dyn" type="checkbox" />
<input id="sd_hr_scale" type="range" min="{{hr_scale_min}}" max="{{hr_scale_max}}" step="{{hr_scale_step}}" value="{{hr_scale}}" /> <small data-i18n="DYN">DYN</small>
</div> </label>
<div data-sd-source="auto,vlad"> <label class="flex1 checkbox_label" for="sd_novel_decrisper" title="Reduce artifacts caused by high guidance values.">
<label for="sd_denoising_strength"><span data-i18n="Denoising strength">Denoising strength</span> (<span id="sd_denoising_strength_value"></span>)</label> <input id="sd_novel_decrisper" type="checkbox" />
<input id="sd_denoising_strength" type="range" min="{{denoising_strength_min}}" max="{{denoising_strength_max}}" step="{{denoising_strength_step}}" value="{{denoising_strength}}" /> <small data-i18n="Decrisper">Decrisper</small>
<label for="sd_hr_second_pass_steps"><span data-i18n="Hires steps (2nd pass)">Hires steps (2nd pass)</span> (<span id="sd_hr_second_pass_steps_value"></span>)</label> </label>
<input id="sd_hr_second_pass_steps" type="range" min="{{hr_second_pass_steps_min}}" max="{{hr_second_pass_steps_max}}" step="{{hr_second_pass_steps_step}}" value="{{hr_second_pass_steps}}" />
</div>
<div data-sd-source="novel">
<label for="sd_novel_upscale_ratio"><span data-i18n="Upscale by">Upscale by</span> (<span id="sd_novel_upscale_ratio_value"></span>)</label>
<input id="sd_novel_upscale_ratio" type="range" min="{{novel_upscale_ratio_min}}" max="{{novel_upscale_ratio_max}}" step="{{novel_upscale_ratio_step}}" value="{{novel_upscale_ratio}}" />
</div> </div>
<div data-sd-source="novel,togetherai,pollinations,comfy,drawthings,vlad,auto,horde,extras" class="marginTop5"> <div data-sd-source="novel,togetherai,pollinations,comfy,drawthings,vlad,auto,horde,extras" class="marginTop5">
<label for="sd_seed">Seed</label> <label for="sd_seed">
<small>(-1 for random)</small> <span data-i18n="Seed">Seed</span>
<small data-i18n="(-1 for random)">(-1 for random)</small>
</label>
<input id="sd_seed" type="number" class="text_pole" min="-1" max="9999999999" step="1" /> <input id="sd_seed" type="number" class="text_pole" min="-1" max="9999999999" step="1" />
</div> </div>
<hr> <hr>
<h4 data-i18n="[title]Preset for prompt prefix and negative prompt" title="Preset for prompt prefix and negative prompt"> <h4 data-i18n="[title]Preset for prompt prefix and negative prompt" title="Preset for prompt prefix and negative prompt">
<span data-i18n="Style">Style</span> <span data-i18n="Style">Style</span>

5
public/scripts/extensions/stable-diffusion/style.css
View File

@ -96,3 +96,8 @@
opacity: 1; opacity: 1;
} }
} }
.sd_settings .flex1.checkbox_label input[type="checkbox"] {
margin-right: 5px;
margin-left: 5px;
}