From b5ed668effc27b5b84b0c345850ee67119133040 Mon Sep 17 00:00:00 2001
From: Lincoln Stein <lincoln.stein@gmail.com>
Date: Sat, 17 Sep 2022 02:44:07 -0400
Subject: [PATCH] small legacy web appearance tweaks

---
 static/legacy_web/index.css  | 15 ++++++++++++---
 static/legacy_web/index.html | 27 +++++++++++++++------------
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/static/legacy_web/index.css b/static/legacy_web/index.css
index e95c818e19..51f0f267c3 100644
--- a/static/legacy_web/index.css
+++ b/static/legacy_web/index.css
@@ -91,6 +91,7 @@ header h1 {
 }
 #fieldset-config {
     line-height:2em;
+    background-color: #F0F0F0;
 }
 input[type="number"] {
     width: 60px;
@@ -122,6 +123,9 @@ label {
     cursor: pointer;
     color: red;
 }
+#basic-parameters {
+    background-color: #EEEEEE;
+}
 #txt2img {
     background-color: #DCDCDC;
 }
@@ -129,15 +133,20 @@ label {
     background-color: #EEEEEE;
 }
 #img2img {
-    background-color: #F5F5F5;
+    background-color: #DCDCDC;
 }
 #gfpgan {
-    background-color: #DCDCDC;
+    background-color: #EEEEEE;
 }
 #progress-section {
     background-color: #F5F5F5;
 }
-
+.section-header {
+    text-align: left;
+    font-weight: bold;
+    padding: 0 0 0 0;
+}
 #no-results-message:not(:only-child) {
     display: none;
 }
+
diff --git a/static/legacy_web/index.html b/static/legacy_web/index.html
index 3d845f74ef..5ce8b45baf 100644
--- a/static/legacy_web/index.html
+++ b/static/legacy_web/index.html
@@ -25,6 +25,7 @@
 	  </div>
         </fieldset>
         <fieldset id="fieldset-config">
+	  <div class="section-header">Basic options</div>
           <label for="iterations">Images to generate:</label>
           <input value="1" type="number" id="iterations" name="iterations" size="4">
           <label for="steps">Steps:</label>
@@ -39,11 +40,11 @@
             <option value="k_dpm_2">KDPM_2</option>
             <option value="k_dpm_2_a">KDPM_2A</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>
           </select>
           <input type="checkbox" name="seamless" id="seamless">
-	        <label for="seamless">Seamless circular tiling</label>
+	  <label for="seamless">Seamless circular tiling</label>
           <br>
           <label title="Set to multiple of 64" for="width">Width:</label>
           <select id="width" name="width" value="512">
@@ -73,26 +74,28 @@
           <input type="checkbox" name="progress_images" id="progress_images">
 	  <label for="progress_images">Display in-progress images (slower)</label>
 	  <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>
             <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>
             <input value="" type="text" id="with_variations" name="with_variations">
-	  </div>
-	  <div id="img2img">
-            <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>
+	  </span>
+	</fieldset>
+	<fieldset id="img2img">
+	  <div class="section-header">Image-to-image options</div>
+          <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>
 	    <label for="strength">Img2Img Strength:</label>
 	    <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>
-	    <label title="Rescale image to fit within requested width and height" for="fit">Fit to width/height:</label>
-	  </div>
+	    <label title="Rescale image to fit within requested width and height" for="fit">Fit to width/height</label>
 	</fieldset>
         <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>
-          <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>
           <select id="upscale_level" name="upscale_level" value="">
             <option value="" selected>None</option>
@@ -113,7 +116,7 @@
           <div id="scaling-inprocess-message">
             <i><span>Postprocessing...</span><span id="processing_cnt">1/3</span></i>
           </div>
-        </div>
+        </span>
       </section>
 
       <div id="results">