Merge pull request #254 from cmdr2/beta

Show latest images on top; Avoid jumping when new images are created; Reddit link

scripts/Start Stable Diffusion UI.cmd

@@ -16,4 +16,4 @@ if exist "installer\etc\conda\activate.d\post_activate.bat" (
 
 @call ..\scripts\on_env_start.bat
 
-@pause
+@pause

scripts/on_sd_start.bat

@@ -165,13 +165,13 @@ call WHERE uvicorn > .tmp
 
 @if exist "sd-v1-4.ckpt" (
     for %%I in ("sd-v1-4.ckpt") do if "%%~zI" EQU "4265380512" (
-        echo "Data files (weights) necessary for Stable Diffusion were already downloaded"
+        echo "Data files (weights) necessary for Stable Diffusion were already downloaded. Using the HuggingFace 4 GB Model."
     ) else (
         for %%J in ("sd-v1-4.ckpt") do if "%%~zJ" EQU "7703807346" (
-            echo "Data files (weights) necessary for Stable Diffusion were already downloaded"
+            echo "Data files (weights) necessary for Stable Diffusion were already downloaded. Using the HuggingFace 7 GB Model."
         ) else (
             for %%K in ("sd-v1-4.ckpt") do if "%%~zK" EQU "7703810927" (
-                echo "Data files (weights) necessary for Stable Diffusion were already downloaded"
+                echo "Data files (weights) necessary for Stable Diffusion were already downloaded. Using the Waifu Model."
             ) else (
                 echo. & echo "The model file present at %cd%\sd-v1-4.ckpt is invalid. It is only %%~zK bytes in size. Re-downloading.." & echo.
                 del "sd-v1-4.ckpt"

ui/index.html

@@ -4,7 +4,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="icon" type="image/png" href="/media/favicon-16x16.png" sizes="16x16">
     <link rel="icon" type="image/png" href="/media/favicon-32x32.png" sizes="32x32">
-    <link rel="stylesheet" href="/media/main.css?v=3">
+    <link rel="stylesheet" href="/media/main.css?v=4">
     <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">
@@ -23,6 +23,7 @@
                 <ul id="community-links" class="dropdown-content">
                     <li><a href="https://github.com/cmdr2/stable-diffusion-ui/blob/main/Troubleshooting.md" target="_blank"><i class="fa-solid fa-circle-question fa-fw"></i> Usual problems and solutions</a></li>
                     <li><a href="https://discord.com/invite/u9yhsFmEkB" target="_blank"><i class="fa-brands fa-discord fa-fw"></i> Discord user community</a></li>
+                    <li><a href="https://www.reddit.com/r/StableDiffusionUI/" target="_blank"><i class="fa-brands fa-reddit fa-fw"></i> Reddit community</a></li>
                     <li><a href="https://github.com/cmdr2/stable-diffusion-ui" target="_blank"><i class="fa-brands fa-github fa-fw"></i> Source code on GitHub</a></li>
                 </ul>
             </li>
@@ -121,7 +122,8 @@
                             <option value="1536">1536</option>
                             <option value="1792">1792</option>
                             <option value="2048">2048</option>
-                        </select> <label for="width"><small>(width)</small></label> 
+                        </select>
+                        <label for="width"><small>(width)</small></label>
                         <select id="height" name="height" value="512">
                             <option value="128">128 (*)</option>
                             <option value="192">192</option>
@@ -170,7 +172,7 @@
             <div id="editor-modifiers" class="panel-box">
                 <h4 class="collapsible">Image Modifiers (art styles, tags etc)</h4>
                 <div id="editor-modifiers-entries" class="collapsible-content">
-                    <label for="preview-image">Image Style:</label> 
+                    <label for="preview-image">Image Style:</label>
                     <select id="preview-image" name="preview-image" value="portrait">
                         <option value="portrait" selected="">Face</option>
                         <option value="landscape">Landscape</option>
@@ -210,7 +212,7 @@
 </div>
 </body>
 
-<script src="media/main.js?v=4"></script>
+<script src="media/main.js?v=5"></script>
 <script>
 async function init() {
     await loadModifiers()

ui/media/main.css

@@ -56,6 +56,7 @@ label {
 }
 #outputMsg {
     font-size: small;
+    padding-bottom: 3pt;
 }
 #progressBar {
     font-size: small;

ui/media/main.js

@@ -260,7 +260,7 @@ function makeImageElement(width, height) {
     img.height = parseInt(height)
 
     imgItem.appendChild(img)
-    imagesContainer.appendChild(imgItem)
+    imagesContainer.insertBefore(imgItem, imagesContainer.firstChild)
 
     return imgItem
 }
@@ -327,12 +327,12 @@ async function doMakeImage(reqBody, batchCount) {
                         timeRemaining = (timeTaken === -1 ? '' : stepsRemaining * timeTaken) // ms
 
                         outputMsg.innerHTML = `Batch ${batchesDone+1} of ${batchCount}`
-                        progressBar.innerHTML = `Generating image(s): ${percent}%`
+                        outputMsg.innerHTML += `. Generating image(s): ${percent}%`
 
-                        if (timeTaken !== -1) {
-                            progressBar.innerHTML += `<br>Time remaining (approx): ${millisecondsToStr(timeRemaining)}`
-                        }
-                        progressBar.style.display = 'block'
+                        timeRemaining = (timeTaken !== -1 ? millisecondsToStr(timeRemaining) : '')
+
+                        outputMsg.innerHTML += `. Time remaining (approx): ${timeRemaining}`
+                        outputMsg.style.display = 'block'
 
                         if (stepUpdate.output !== undefined) {
                             makeImageContainers(numOutputs)
@@ -381,7 +381,6 @@ async function doMakeImage(reqBody, batchCount) {
             }
 
             res = JSON.parse(finalJSON)
-            progressBar.style.display = 'none'
 
             if (res.status !== 'succeeded') {
                 let msg = ''
@@ -609,11 +608,12 @@ async function makeImage() {
         batchesDone++
 
         if (success) {
-            outputMsg.innerText = 'Processed batch ' + (i+1) + '/' + batchCount
             successCount++
         }
     }
 
+    progressBar.style.display = 'none'
+
     makeImageBtn.innerText = 'Make Image'
     makeImageBtn.disabled = false
     makeImageBtn.style.display = 'block'

ui/sd_internal/env_yaml.patch

@@ -1,16 +1,7 @@
 diff --git a/environment.yaml b/environment.yaml
-index 7f25da8..19ddcd8 100644
+index 7f25da8..306750f 100644
 --- a/environment.yaml
 +++ b/environment.yaml
-@@ -3,7 +3,7 @@ channels:
-   - pytorch
-   - defaults
- dependencies:
--  - python=3.8.5
-+  - python=3.8.13
-   - pip=20.3
-   - cudatoolkit=11.3
-   - pytorch=1.11.0
 @@ -23,6 +23,8 @@ dependencies:
      - torch-fidelity==0.3.0
      - transformers==4.19.2