Merge pull request #340 from mdiller/mdiller_styling

Updated/Fixed CSS Styling

ui/index.html

@@ -8,6 +8,7 @@
     <link rel="stylesheet" href="/media/modifier-thumbnails.css?v=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css">
     <link rel="stylesheet" href="/media/drawingboard.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700;800&display=swap" rel="stylesheet"> 
     <script src="/media/jquery-3.6.1.min.js"></script>
     <script src="/media/drawingboard.min.js"></script>
 </head>
@@ -61,14 +62,17 @@
                     <input id="prompt_from_file" name="prompt_from_file" type="file" /> <!-- hidden -->
                 </div>
 
-                <label for="negative_prompt">Negative Prompt <small>(optional)</small>:</label> <input id="negative_prompt" name="negative_prompt" size="50"><br/><br/>
+                <label for="negative_prompt">Negative Prompt <small>(optional)</small>:</label> <input id="negative_prompt" name="negative_prompt"><br/><br/>
 
                 <div id="editor-inputs-init-image" class="row">
                     <label for="init_image"><b>Initial Image (img2img):</b> <small>(optional)</small> </label> <input id="init_image" name="init_image" type="file" /><br/>
 
                     <div id="init_image_preview_container" class="image_preview_container">
-                        <img id="init_image_preview" src="" width="100" height="100" />
+                        <div id="init_image_wrapper">
+                            <img id="init_image_preview" src="" />
+                            <span id="init_image_size_box"></span>
                             <button class="init_image_clear image_clear_btn">X</button>
+                        </div>
 
                         <br/>
                         <input id="enable_mask" name="enable_mask" type="checkbox"> <label for="enable_mask">In-Painting (beta) <small>(select the area which the AI will paint into)</small></label>
@@ -90,15 +94,16 @@
             <div id="editor-settings" class="panel-box settings-box">
                 <h4 class="collapsible">Image Settings</h4>
                 <ul id="editor-settings-entries" class="collapsible-content">
-                    <li><b class="settings-subheader">Image Settings</b></li>
+                    <li><table>
-                    <li class="pl-5"><label for="seed">Seed:</label> <input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random Image</label></li>
+                    <tr><b class="settings-subheader">Image Settings</b></tr>
-                    <li class="pl-5"><label for="num_outputs_total">Number of images to make:</label> <input id="num_outputs_total" name="num_outputs_total" value="1" size="1"> <label for="num_outputs_parallel">Generate in parallel:</label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1"> (images at once)</li>
+                    <tr class="pl-5"><td><label for="seed">Seed:</label></td><td><input id="seed" name="seed" size="10" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random</label></td></tr>
-                    <li class="pl-5"><label for="stable_diffusion_model">Model:</label>
+                    <tr class="pl-5"><td><label for="num_outputs_total">Number of Images:</label></td><td><input id="num_outputs_total" name="num_outputs_total" value="1" size="1"> <label><small>(total)</small></label> <input id="num_outputs_parallel" name="num_outputs_parallel" value="1" size="1"> <label for="num_outputs_parallel"><small>(in parallel)</small></label></td></tr>
+                    <tr class="pl-5"><td><label for="stable_diffusion_model">Model:</label></td><td>
                         <select id="stable_diffusion_model" name="stable_diffusion_model">
                             <!-- <option value="sd-v1-4" selected>sd-v1-4</option> -->
                         </select>
-                    </li>
+                    </td></tr>
-                    <li id="samplerSelection" class="pl-5"><label for="sampler">Sampler:</label>
+                    <tr id="samplerSelection" class="pl-5"><td><label for="sampler">Sampler:</label></td><td>
                         <select id="sampler" name="sampler">
                             <option value="plms">plms</option>
                             <option value="ddim">ddim</option>
@@ -109,8 +114,8 @@
                             <option value="dpm2_a">dpm2_a</option>
                             <option value="lms">lms</option>
                         </select>
-                    </li>
+                    </td></tr>
-                    <li class="pl-5"><label>Image Size: </label>
+                    <tr class="pl-5"><td><label>Image Size: </label></td><td>
                         <select id="width" name="width" value="512">
                             <option value="128">128 (*)</option>
                             <option value="192">192</option>
@@ -155,24 +160,25 @@
                             <option value="2048">2048</option>
                         </select>
                         <label for="height"><small>(height)</small></label>
-                    </li>
+                    </td></tr>
-                    <li class="pl-5"><label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25"></li>
+                    <tr class="pl-5"><td><label for="num_inference_steps">Inference Steps:</label></td><td> <input id="num_inference_steps" name="num_inference_steps" size="4" value="25"></td></tr>
-                    <li class="pl-5"><label for="guidance_scale_slider">Guidance Scale:</label> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="10" max="500"> <input id="guidance_scale" name="guidance_scale" size="4"></li>
+                    <tr class="pl-5"><td><label for="guidance_scale_slider">Guidance Scale:</label></td><td> <input id="guidance_scale_slider" name="guidance_scale_slider" class="editor-slider" value="75" type="range" min="10" max="500"> <input id="guidance_scale" name="guidance_scale" size="4"></td></tr>
-                    <li class="pl-5"><span id="prompt_strength_container"><label for="prompt_strength_slider">Prompt Strength:</label> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4"><br/></span></li>
+                    <tr id="prompt_strength_container" class="pl-5"><td><label for="prompt_strength_slider">Prompt Strength:</label></td><td> <input id="prompt_strength_slider" name="prompt_strength_slider" class="editor-slider" value="80" type="range" min="0" max="99"> <input id="prompt_strength" name="prompt_strength" size="4"><br/></td></tr></span>
-                    <li class="pl-5"><label for="output_format">Output format:</label>
+                    <tr class="pl-5"><td><label for="output_format">Output Format:</label></td><td>
                         <select id="output_format" name="output_format">
                             <option value="jpeg" selected>jpeg</option>
                             <option value="png">png</option>
                         </select>
-                    </li>
+                    </td></tr>
+                    </li></table>
 
                     <br/>
 
                     <li><b class="settings-subheader">Render Settings</b></li>
-                    <li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview of the image <small>(uses more VRAM, slightly slower image creation)</small></label></li>
+                    <li class="pl-5"><input id="stream_image_progress" name="stream_image_progress" type="checkbox"> <label for="stream_image_progress">Show a live preview <small>(uses more VRAM, slightly slower image creation)</small></label></li>
                     <li class="pl-5"><input id="use_face_correction" name="use_face_correction" type="checkbox" checked> <label for="use_face_correction">Fix incorrect faces and eyes <small>(uses GFPGAN)</small></label></li>
                     <li class="pl-5">
-                        <input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Upscale the image to 4x resolution using </label>
+                        <input id="use_upscale" name="use_upscale" type="checkbox"> <label for="use_upscale">Upscale image by 4x with </label>
                         <select id="upscale_model" name="upscale_model">
                             <option value="RealESRGAN_x4plus" selected>RealESRGAN_x4plus</option>
                             <option value="RealESRGAN_x4plus_anime_6B">RealESRGAN_x4plus_anime_6B</option>

ui/media/main.css

@@ -1,8 +1,98 @@
+:root {
+    --background-color1: rgb(32, 33, 36); /* main parts of the page */
+    --background-color2: rgb(44, 45, 48); /* main panels */
+    --background-color3: rgb(47, 49, 53);
+    --background-color4: rgb(18, 18, 19); /* settings dropdowns */
+
+    --accent-hue: 266;
+    --accent-lightness: 36%;
+
+    --text-color: #eee;
+
+    --input-text-color: black;
+    --input-background-color: #e9e9ed; 
+    --input-border-color: #8f8f9d; 
+
+    --button-text-color: var(--input-text-color);
+    --button-color: #e9e9ed;
+    --button-border: 1px solid #8f8f9d;
+
+    /* other */
+    --input-border-radius: 4px;
+    --input-border-size: 1px; 
+    --accent-color: hsl(var(--accent-hue), 100%, var(--accent-lightness));
+    --make-image-border: 2px solid hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) - 21%));
+}
+
+
+/* Light Theme */
+/* :root {
+    --background-color1: white; 
+    --background-color2: #dddddd;
+    --background-color3: #e7e9eb;
+    --background-color4: #cccccc;
+
+    --text-color: black;
+
+    --input-text-color: black;
+    --input-background-color: #f8f9fa; 
+    --input-border-color: grey; 
+} */
+
+
+/* Discord Theme */
+/* :root {
+    --background-color1: #36393f;
+    --background-color2: #2f3136;
+    --background-color3: #292b2f;
+    --background-color4: #202225;
+    
+    --accent-hue: 235;
+    --accent-lightness: 65%;
+    --make-image-border: none;
+    
+    --button-color: var(--accent-color);
+    --button-border: none;
+
+    --input-text-color: #ccc;
+    --input-border-size: 2px; 
+    --input-background-color: #202225; 
+    --input-border-color: var(--input-background-color); 
+} */
+
+/* Example "Custom" Theme */
+/* :root {
+    --main-hue: 222;
+	--main-saturation: 18%;
+	--value-base: 19%;
+	--value-step: 3%;
+	--background-color1: hsl(var(--main-hue), var(--main-saturation), var(--value-base));
+	--background-color2: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (1 * var(--value-step))));
+	--background-color3: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (2 * var(--value-step))));
+	--background-color4: hsl(var(--main-hue), var(--main-saturation), calc(var(--value-base) - (3 * var(--value-step))));
+    
+    --accent-hue: 212;
+    --make-image-border: none;
+
+    --button-color: var(--accent-color);
+    --button-border: none;
+    
+    --input-border-size: 1px; 
+    --input-background-color: var(--background-color3);
+	--input-text-color: #ccc;
+	--input-border-color: var(--background-color4);
+} */
+
+
+* {
+    font-family: Work Sans, Verdana, Geneva, sans-serif;
+    box-sizing: border-box;
+}
+
 body {
-    font-family: Arial, Helvetica, sans-serif;
     font-size: 11pt;
-    background-color: rgb(32, 33, 36);
+    background-color: var(--background-color1);
-    color: #eee;
+    color: var(--text-color);
 }
 a {
     color: rgb(0, 102, 204);
@@ -16,12 +106,8 @@ label {
 #prompt {
     width: 100%;
     height: 65pt;
-    box-sizing: border-box;
+    font-size: 13px;
-}
+    margin-bottom: 6px;
-@media screen and (max-width: 600px) {
-    #prompt {
-        width: 95%;
-    }
 }
 .image_preview_container {
     /* display: none; */
@@ -29,7 +115,7 @@ label {
 }
 .image_clear_btn {
     position: absolute;
-    transform: translateX(-50%) translateY(-35%);
+    transform: translate(30%, -30%);
     background: black;
     color: white;
     border: 2pt solid #ccc;
@@ -41,6 +127,8 @@ label {
     height: 16pt;
     font-family: Verdana;
     font-size: 8pt;
+    top: 0px;
+    right: 0px;
 }
 .settings-box ul {
     font-size: 9pt;
@@ -71,7 +159,7 @@ label {
 }
 .imgSeedLabel {
     font-size: 0.8em;
-    background-color: rgb(44, 45, 48);
+    background-color: var(--background-color2);
     border-radius: 3px;
     padding: 5px;
 }
@@ -121,6 +209,7 @@ label {
 }
 .settings-box label small {
     color: rgb(153, 153, 153);
+    margin-right: 10px;
 }
 #preview {
     padding: 5px;
@@ -143,14 +232,14 @@ label {
 }
 #makeImage {
     flex: 0 0 70px;
-    background: rgb(80, 0, 185);
+    background: var(--accent-color);
-    border: 2px solid rgb(40, 0, 78);
+    border: var(--make-image-border);
     color: rgb(255, 221, 255);
     width: 100%;
     height: 30pt;
 }
 #makeImage:hover {
-    background: rgb(93, 0, 214);
+    background: hsl(var(--accent-hue), 100%, calc(var(--accent-lightness) + 6%));
 }
 #stopImage {
     flex: 0 0 70px;
@@ -167,6 +256,7 @@ label {
 }
 .flex-container {
     display: flex;
+    width: 100%;
 }
 .col-50 {
     flex: 50%;
@@ -194,8 +284,8 @@ label {
     padding-right: 5px;
 }
 .panel-box {
-    background: rgb(44, 45, 48);
+    background: var(--background-color2);
-    border: 1px solid rgb(47, 49, 53);
+    border: 1px solid var(--background-color3);
     border-radius: 7px;
     padding: 5px;
     margin-bottom: 15px;
@@ -346,7 +436,7 @@ img {
     padding-right: 2pt;
 }
 #community-links li a {
-    color: white;
+    color: var(--text-color);
     text-decoration: none;
 }
 .dropdown {
@@ -357,8 +447,8 @@ img {
     position: absolute;
     z-index: 2;
 
-    background: rgb(18, 18, 19);
+    background: var(--background-color4);
-    border: 2px solid rgb(37, 38, 41);
+    border: 2px solid var(--background-color2);
     border-radius: 7px;
     padding: 5px;
     margin-bottom: 15px;
@@ -369,7 +459,7 @@ img {
 }
 
 .imageTaskContainer {
-    border: 1px solid #333;
+    border: 1px solid var(--background-color2);
     margin-bottom: 10pt;
     padding: 5pt;
     border-radius: 5pt;
@@ -378,7 +468,7 @@ img {
 .taskStatusLabel {
     float: left;
     font-size: 8pt;
-    background:rgb(44, 45, 48);
+    background:var(--background-color2);
     border: 1px solid rgb(61, 62, 66);
     padding: 2pt 4pt;
     border-radius: 2pt;
@@ -417,3 +507,157 @@ img {
 #prompt_from_file {
     display: none;
 }
+#init_image_preview {
+    max-width: 150px;
+    max-height: 150px;
+	object-fit: contain;
+    border-radius: 6px;
+    transition: all 1s ease-in-out;
+}
+
+#init_image_preview:hover {
+    max-width: 500px;
+    max-height: 1000px;
+    transition: all 1s 0.5s ease-in-out;
+}
+
+#init_image_wrapper {
+    position: relative;
+    width: fit-content;
+}
+
+#init_image_size_box {
+    position: absolute;
+    right: 0px;
+    bottom: 3px;
+    padding: 3px;
+    background: black;
+    color: white;
+    text-shadow: 0px 0px 4px black;
+    opacity: 60%;
+    font-size: 12px;
+    border-radius: 6px 0px;
+}
+
+#editor-settings-entries table td {
+    padding: 0px;
+    line-height: 28px;
+}
+
+#editor-settings-entries table td:first-child {
+    float: right;
+    padding-right: 4px;
+    white-space: nowrap;
+}
+
+#negative_prompt {
+    width: 100%;
+}
+
+button,
+input[type="file"],
+input[type="checkbox"],
+select {
+    cursor: pointer;
+}
+
+input,
+select,
+textarea {
+    border-radius: var(--input-border-radius);
+    padding: 4px;
+    accent-color: var(--accent-color);
+    background: var(--input-background-color);
+    border: var(--input-border-size) solid var(--input-border-color); 
+    color: var(--input-text-color);
+}
+
+input { 
+    padding: 4px 6px;
+}
+
+input:focus,
+select:focus,
+textarea:focus {
+    outline: 2px solid var(--accent-color);
+}
+
+input[disabled],
+select[disabled],
+textarea[disabled] {
+    opacity: 0.5;
+}
+
+input[type="file"] {
+    width: 100%;
+    padding: 2px;
+}
+
+button,
+input::file-selector-button { 
+    padding: 2px 4px;
+    border-radius: 4px;
+    background: var(--button-color);
+    color: var(--button-text-color);
+    border: var(--button-border);
+}
+
+input::file-selector-button {
+    padding: 0px 4px;
+    height: 19px;
+}
+
+/* input[type="range"] {
+    -webkit-appearance: none;
+    appearance: none;
+    margin: 0px;
+    padding: 0px;
+    cursor: pointer;
+    line-height: 29px;
+}
+
+input[type="range"]::-webkit-slider-thumb,
+input[type="range"]::-moz-range-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 24px;
+    height: 24px;
+    border-radius: 12px;
+} */
+
+@media screen and (max-width: 700px) {
+    body {
+        margin: 0px;
+    }
+    #container {
+        margin: 0px;
+        padding: 10px
+    }
+    .flex-container {
+        flex-direction: column;
+    }
+    #preview {
+        margin: 0px;
+        padding: 0px;
+    }
+    #preview .collapsible-content {
+        padding: 0px;
+    }
+    #preview .collapsible-content {
+        padding: 0px;
+    }
+    .imgItem {
+        margin-right: 0px;
+    }
+    .imgItem img {
+        height: 100%;
+        width: 100%;
+        object-fit: contain;
+    }
+    .dropdown-content {
+        width: auto !important;
+        transform: none !important;
+        left: 0px;
+        right: 0px;
+    }
+}

ui/media/main.js

@@ -35,6 +35,7 @@ let widthField = document.querySelector('#width')
 let heightField = document.querySelector('#height')
 let initImageSelector = document.querySelector("#init_image")
 let initImagePreview = document.querySelector("#init_image_preview")
+let initImageSizeBox = document.querySelector("#init_image_size_box")
 let maskImageSelector = document.querySelector("#mask")
 let maskImagePreview = document.querySelector("#mask_preview")
 let turboField = document.querySelector('#turbo')
@@ -254,7 +255,12 @@ function logError(msg, res, outputMsg) {
 function playSound() {
     const audio = new Audio('/media/ding.mp3')
     audio.volume = 0.2
-    audio.play()
+    var promise = audio.play();
+    if (promise !== undefined) {
+        promise.then(_ => {}).catch(error => {
+            console.warn("browser blocked autoplay");
+        });
+    }
 }
 
 async function healthCheck() {
@@ -383,7 +389,7 @@ function getUseAsInputHandler(imageItemElem) {
 
         initImagePreviewContainer.style.display = 'block'
         inpaintingEditorContainer.style.display = 'none'
-        promptStrengthContainer.style.display = 'block'
+        promptStrengthContainer.style.display = 'table-row'
         maskSetting.checked = false
         samplerSelectionContainer.style.display = 'none'
 
@@ -1187,12 +1193,12 @@ function showInitImagePreview() {
     let reader = new FileReader()
     let file = initImageSelector.files[0]
 
-    reader.addEventListener('load', function() {
+    reader.addEventListener('load', function(event) {
         // console.log(file.name, reader.result)
         initImagePreview.src = reader.result
         initImagePreviewContainer.style.display = 'block'
         inpaintingEditorContainer.style.display = 'none'
-        promptStrengthContainer.style.display = 'block'
+        promptStrengthContainer.style.display = 'table-row'
         samplerSelectionContainer.style.display = 'none'
         // maskSetting.checked = false
     })
@@ -1208,6 +1214,8 @@ initImagePreview.addEventListener('load', function() {
     inpaintingEditorCanvasBackground.style.backgroundImage = "url('" + this.src + "')"
     // maskSetting.style.display = 'block'
     // inpaintingEditorContainer.style.display = 'block'
+    initImageSizeBox.textContent = initImagePreview.naturalWidth + " x " + initImagePreview.naturalHeight
+    initImageSizeBox.style.display = 'block'
 })
 
 initImageClearBtn.addEventListener('click', function() {
@@ -1225,7 +1233,8 @@ initImageClearBtn.addEventListener('click', function() {
     // maskSetting.style.display = 'none'
 
     promptStrengthContainer.style.display = 'none'
-    samplerSelectionContainer.style.display = 'block'
+    samplerSelectionContainer.style.display = 'table-row'
+    initImageSizeBox.style.display = 'none'
 })
 
 maskSetting.addEventListener('click', function() {