small legacy web appearance tweaks

This commit is contained in:
Lincoln Stein 2022-09-17 02:44:07 -04:00
parent b3e026aa4e
commit b5ed668eff
2 changed files with 27 additions and 15 deletions

View File

@ -91,6 +91,7 @@ header h1 {
} }
#fieldset-config { #fieldset-config {
line-height:2em; line-height:2em;
background-color: #F0F0F0;
} }
input[type="number"] { input[type="number"] {
width: 60px; width: 60px;
@ -122,6 +123,9 @@ label {
cursor: pointer; cursor: pointer;
color: red; color: red;
} }
#basic-parameters {
background-color: #EEEEEE;
}
#txt2img { #txt2img {
background-color: #DCDCDC; background-color: #DCDCDC;
} }
@ -129,15 +133,20 @@ label {
background-color: #EEEEEE; background-color: #EEEEEE;
} }
#img2img { #img2img {
background-color: #F5F5F5; background-color: #DCDCDC;
} }
#gfpgan { #gfpgan {
background-color: #DCDCDC; background-color: #EEEEEE;
} }
#progress-section { #progress-section {
background-color: #F5F5F5; background-color: #F5F5F5;
} }
.section-header {
text-align: left;
font-weight: bold;
padding: 0 0 0 0;
}
#no-results-message:not(:only-child) { #no-results-message:not(:only-child) {
display: none; display: none;
} }

View File

@ -25,6 +25,7 @@
</div> </div>
</fieldset> </fieldset>
<fieldset id="fieldset-config"> <fieldset id="fieldset-config">
<div class="section-header">Basic options</div>
<label for="iterations">Images to generate:</label> <label for="iterations">Images to generate:</label>
<input value="1" type="number" id="iterations" name="iterations" size="4"> <input value="1" type="number" id="iterations" name="iterations" size="4">
<label for="steps">Steps:</label> <label for="steps">Steps:</label>
@ -39,11 +40,11 @@
<option value="k_dpm_2">KDPM_2</option> <option value="k_dpm_2">KDPM_2</option>
<option value="k_dpm_2_a">KDPM_2A</option> <option value="k_dpm_2_a">KDPM_2A</option>
<option value="k_euler">KEULER</option> <option value="k_euler">KEULER</option>
<option value="k_euler_a">KEULER_A</option> <option value="k_euler_a">KEULER_A</option>
<option value="k_heun">KHEUN</option> <option value="k_heun">KHEUN</option>
</select> </select>
<input type="checkbox" name="seamless" id="seamless"> <input type="checkbox" name="seamless" id="seamless">
<label for="seamless">Seamless circular tiling</label> <label for="seamless">Seamless circular tiling</label>
<br> <br>
<label title="Set to multiple of 64" for="width">Width:</label> <label title="Set to multiple of 64" for="width">Width:</label>
<select id="width" name="width" value="512"> <select id="width" name="width" value="512">
@ -73,26 +74,28 @@
<input type="checkbox" name="progress_images" id="progress_images"> <input type="checkbox" name="progress_images" id="progress_images">
<label for="progress_images">Display in-progress images (slower)</label> <label for="progress_images">Display in-progress images (slower)</label>
<button type="button" id="reset-all">Reset to Defaults</button> <button type="button" id="reset-all">Reset to Defaults</button>
<div id="variations"> <span id="variations">
<label title="If > 0, generates variations on the initial seed instead of random seeds per iteration. Must be between 0 and 1. Higher values will be more different." for="variation_amount">Variation amount (0 to disable):</label> <label title="If > 0, generates variations on the initial seed instead of random seeds per iteration. Must be between 0 and 1. Higher values will be more different." for="variation_amount">Variation amount (0 to disable):</label>
<input value="0" type="number" id="variation_amount" name="variation_amount" step="0.01" min="0" max="1"> <input value="0" type="number" id="variation_amount" name="variation_amount" step="0.01" min="0" max="1">
<label title="list of variations to apply, in the format `seed:weight,seed:weight,..." for="with_variations">With variations (seed:weight,seed:weight,...):</label> <label title="list of variations to apply, in the format `seed:weight,seed:weight,..." for="with_variations">With variations (seed:weight,seed:weight,...):</label>
<input value="" type="text" id="with_variations" name="with_variations"> <input value="" type="text" id="with_variations" name="with_variations">
</div> </span>
<div id="img2img"> </fieldset>
<label title="Upload an image to use img2img" for="initimg">Initial image:</label> <fieldset id="img2img">
<input type="file" id="initimg" name="initimg" accept=".jpg, .jpeg, .png"> <div class="section-header">Image-to-image options</div>
<button type="button" id="remove-image">Remove Image</button> <label title="Upload an image to use img2img" for="initimg">Initial image:</label>
<input type="file" id="initimg" name="initimg" accept=".jpg, .jpeg, .png">
<button type="button" id="remove-image">Remove Image</button>
<br> <br>
<label for="strength">Img2Img Strength:</label> <label for="strength">Img2Img Strength:</label>
<input value="0.75" type="number" id="strength" name="strength" step="0.01" min="0" max="1"> <input value="0.75" type="number" id="strength" name="strength" step="0.01" min="0" max="1">
<input type="checkbox" id="fit" name="fit" checked> <input type="checkbox" id="fit" name="fit" checked>
<label title="Rescale image to fit within requested width and height" for="fit">Fit to width/height:</label> <label title="Rescale image to fit within requested width and height" for="fit">Fit to width/height</label>
</div>
</fieldset> </fieldset>
<fieldset id="gfpgan"> <fieldset id="gfpgan">
<div class="section-header">Post-processing options</div>
<label title="Strength of the gfpgan (face fixing) algorithm." for="gfpgan_strength">GPFGAN Strength (0 to disable):</label> <label title="Strength of the gfpgan (face fixing) algorithm." for="gfpgan_strength">GPFGAN Strength (0 to disable):</label>
<input value="0.8" min="0" max="1" type="number" id="gfpgan_strength" name="gfpgan_strength" step="0.05"> <input value="0.0" min="0" max="1" type="number" id="gfpgan_strength" name="gfpgan_strength" step="0.1">
<label title="Upscaling to perform using ESRGAN." for="upscale_level">Upscaling Level</label> <label title="Upscaling to perform using ESRGAN." for="upscale_level">Upscaling Level</label>
<select id="upscale_level" name="upscale_level" value=""> <select id="upscale_level" name="upscale_level" value="">
<option value="" selected>None</option> <option value="" selected>None</option>
@ -113,7 +116,7 @@
<div id="scaling-inprocess-message"> <div id="scaling-inprocess-message">
<i><span>Postprocessing...</span><span id="processing_cnt">1/3</span></i> <i><span>Postprocessing...</span><span id="processing_cnt">1/3</span></i>
</div> </div>
</div> </span>
</section> </section>
<div id="results"> <div id="results">