Revert to using docker-compose commands, since ./server wasn't working reliably on some platforms

Reduce opacity of the labels over the image until the mouse moves over it
Update screenshot for the new num_outputs config
2025-08-14 02:05:21 +02:00 · 2022-08-27 14:14:24 +05:30 · 2022-08-27 11:21:10 +05:30 · 2022-08-27 10:55:59 +05:30 · 2022-08-27 10:53:46 +05:30
6 changed files with 113 additions and 89 deletions
--- a/README.md
+++ b/README.md
@ -27,15 +27,15 @@ All the processing will happen on your computer locally, it does not transmit yo

 # Installation
 1. Clone this repository: `git clone https://github.com/cmdr2/stable-diffusion-ui.git` or [download the zip file](https://github.com/cmdr2/stable-diffusion-ui/archive/refs/heads/main.zip) and unzip.
-2. Open your terminal, and in the project directory run: `./server` (warning: this will take some time during the first run, since it'll download Stable Diffusion's [docker image](https://replicate.com/stability-ai/stable-diffusion), nearly 17 GiB)
+2. Open your terminal, and in the project directory run: `docker-compose up &` (warning: this will take some time during the first run, since it'll download Stable Diffusion's [docker image](https://replicate.com/stability-ai/stable-diffusion), nearly 17 GiB)
 3. Open http://localhost:9000 in your browser. That's it!

 If you're getting errors, please check the [Troubleshooting](https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting) page.

-To stop the server, please run `./server stop`
+To stop the server, please run `docker-compose down`

 # Usage
-Open http://localhost:9000 in your browser (after running `./server` from step 2 previously).
+Open http://localhost:9000 in your browser (after running `docker-compose up &` from step 2 previously).

 ## With a text description
 1. Enter a text prompt, like `a photograph of an astronaut riding a horse` in the textbox.
@ -61,7 +61,7 @@ You can also set the configuration like `seed`, `width`, `height`, `num_outputs`

 Use the same `seed` number to get the same image for a certain prompt. This is useful for refining a prompt without losing the basic image design. Enable the `random images` checkbox to get random images.

-![Screenshot of advanced settings](media/config-v2.jpg?raw=true)
+![Screenshot of advanced settings](media/config-v3.jpg?raw=true)

 # Troubleshooting
 The [Troubleshooting wiki page](https://github.com/cmdr2/stable-diffusion-ui/wiki/Troubleshooting) contains some common errors and their solutions. Please check that, and if it doesn't work, feel free to [file an issue](https://github.com/cmdr2/stable-diffusion-ui/issues).
--- a/index.html
+++ b/index.html
@ -66,22 +66,38 @@
        padding-top: 10px;
        font-size: small;
    }
-    .imgUseBtn {
+    .imgSeedLabel {
        position: absolute;
        transform: translateX(-100%);
        margin-top: 5pt;
        margin-left: -5pt;
+        font-size: 10pt;
+
+        background-color: #333;
+        opacity: 0.8;
+        color: #ddd;
+        border-radius: 3pt;
+        padding: 1pt 3pt;
    }
-    .imgSaveBtn {
+    .imgUseBtn {
        position: absolute;
        transform: translateX(-100%);
        margin-top: 30pt;
        margin-left: -5pt;
    }
+    .imgSaveBtn {
+        position: absolute;
+        transform: translateX(-100%);
+        margin-top: 55pt;
+        margin-left: -5pt;
+    }
    .imgItem {
        display: inline;
        padding-right: 10px;
    }
+    .imgItemInfo {
+        opacity: 0.5;
+    }
    </style>
 </html>
 <body>
@ -108,11 +124,11 @@

    <div id="configHeader"><b>Advanced settings:</b> [<a id="configToggleBtn" href="#">show</a>]</div>
    <div id="config">
-        <label for="seed">Seed:</label> <input id="seed" name="seed" value="30000"> <input id="random_seed" name="random_seed" type="checkbox" checked> <label for="random_seed">Random Image</label> <br/>
-        <label for="num_outputs">Number of outputs:</label> <select id="num_outputs" name="num_outputs" value="1"><option value="1" selected>1</option><option value="4">4</option></select><br/>
+        <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> <br/>
+        <label for="num_outputs_total">Number of outputs:</label> <input id="num_outputs_total" name="num_outputs_total" value="1" size="4"> <label for="num_outputs_parallel">Generate in parallel:</label> <select id="num_outputs_parallel" name="num_outputs_parallel" value="1"><option value="1" selected>1 image at a time</option><option value="4">4 images at a time</option></select><br/>
        <label for="width">Width:</label> <select id="width" name="width" value="512"><option value="128">128</option><option value="256">256</option><option value="512" selected>512</option><option value="768">768</option><option value="1024">1024</option></select><br/>
        <label for="height">Height:</label> <select id="height" name="height" value="512"><option value="128">128</option><option value="256">256</option><option value="512" selected>512</option><option value="768">768</option></select><br/>
-        <label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" value="50"><br/>
+        <label for="num_inference_steps">Number of inference steps:</label> <input id="num_inference_steps" name="num_inference_steps" size="4" value="50"><br/>
        <label for="guidance_scale">Guidance Scale:</label> <input id="guidance_scale" name="guidance_scale" value="75" type="range" min="10" max="200"> <span id="guidance_scale_value"></span><br/>
        <span id="prompt_strength_container"><label for="prompt_strength">Prompt Strength:</label> <input id="prompt_strength" name="prompt_strength" value="8" type="range" min="0" max="10"> <span id="prompt_strength_value"></span><br/></span><br/>
        <input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Play sound on task completion</label><br/>
@ -137,7 +153,8 @@ const SOUND_ENABLED_KEY = "soundEnabled"
 const HEALTH_PING_INTERVAL = 5 // seconds

 let promptField = document.querySelector('#prompt')
-let numOutputsField = document.querySelector('#num_outputs')
+let numOutputsTotalField = document.querySelector('#num_outputs_total')
+let numOutputsParallelField = document.querySelector('#num_outputs_parallel')
 let numInferenceStepsField = document.querySelector('#num_inference_steps')
 let guidanceScaleField = document.querySelector('#guidance_scale')
 let guidanceScaleValueLabel = document.querySelector('#guidance_scale_value')
@ -199,6 +216,12 @@ function setStatus(statusType, msg, msgType) {
    }
 }

+function logError(msg, res) {
+    outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>'
+    console.log('request error', res)
+    setStatus('request', 'error', 'error')
+}
+
 function playSound() {
    const audio = new Audio('/media/ding.mp3')
    audio.volume = 0.2
@ -220,43 +243,10 @@ async function healthCheck() {
    }
 }

-async function makeImage() {
-    setStatus('request', 'fetching..')
-
-    makeImageBtn.innerHTML = 'Processing..'
-    makeImageBtn.disabled = true
-
-    outputMsg.innerHTML = 'Fetching..'
-
-    function logError(msg, res) {
-        outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>'
-        console.log('request error', res)
-        setStatus('request', 'error', 'error')
-    }
-
-    let seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000) : seedField.value)
-
-    let reqBody = {
-        prompt: promptField.value,
-        num_outputs: numOutputsField.value,
-        num_inference_steps: numInferenceStepsField.value,
-        guidance_scale: guidanceScaleField.value / 10,
-        width: widthField.value,
-        height: heightField.value,
-        seed: seed,
-    }
-
-    if (initImagePreview.src.indexOf('data:image/png;base64') !== -1) {
-        reqBody['init_image'] = initImagePreview.src
-        reqBody['prompt_strength'] = promptStrengthField.value / 10
-
-        if (maskImagePreview.src.indexOf('data:image/png;base64') !== -1) {
-            reqBody['mask'] = maskImagePreview.src
-        }
-    }
-
+// makes a single image. don't call this directly, use makeImage() instead
+async function doMakeImage(reqBody) {
    let res = ''
-    let time = new Date().getTime()
+    let seed = reqBody['seed']

    try {
        res = await fetch('/image', {
@ -293,24 +283,10 @@ async function makeImage() {
        setStatus('request', 'error', 'error')
    }

-    makeImageBtn.innerHTML = 'Make Image'
-    makeImageBtn.disabled = false
-
-    if (isSoundEnabled()) {
-        playSound()
-    }
-
    if (!res) {
        return
    }

-    time = new Date().getTime() - time
-    time /= 1000
-
-    outputMsg.innerHTML = 'Processed in ' + time + ' seconds. Seed: ' + seed
-
-    imagesContainer.innerHTML = ''
-
    for (let idx in res.output) {
        let imgBody = ''

@ -319,7 +295,7 @@ async function makeImage() {
        } catch (e) {
            console.log(imgBody)
            setStatus('request', 'invalid image', 'error')
-            return
+            continue
        }

        let imgItem = document.createElement('div')
@ -330,6 +306,13 @@ async function makeImage() {
        img.height = parseInt(reqBody.height)
        img.src = imgBody

+        let imgItemInfo = document.createElement('span')
+        imgItemInfo.className = 'imgItemInfo'
+
+        let imgSeedLabel = document.createElement('span')
+        imgSeedLabel.className = 'imgSeedLabel'
+        imgSeedLabel.innerHTML = 'Seed: ' + seed
+
        let imgUseBtn = document.createElement('button')
        imgUseBtn.className = 'imgUseBtn'
        imgUseBtn.innerHTML = 'Use as Input'
@ -339,8 +322,10 @@ async function makeImage() {
        imgSaveBtn.innerHTML = 'Download'

        imgItem.appendChild(img)
-        imgItem.appendChild(imgUseBtn)
-        imgItem.appendChild(imgSaveBtn)
+        imgItem.appendChild(imgItemInfo)
+        imgItemInfo.appendChild(imgSeedLabel)
+        imgItemInfo.appendChild(imgUseBtn)
+        imgItemInfo.appendChild(imgSaveBtn)
        imagesContainer.appendChild(imgItem)

        imgUseBtn.addEventListener('click', function() {
@ -363,7 +348,71 @@ async function makeImage() {
            imgDownload.href = imgBody
            imgDownload.click()
        })
+
+        imgItem.addEventListener('mouseenter', function() {
+            imgItemInfo.style.opacity = 1
+        })
+
+        imgItem.addEventListener('mouseleave', function() {
+            imgItemInfo.style.opacity = 0.5
+        })
    }
+}
+
+async function makeImage() {
+    setStatus('request', 'fetching..')
+
+    makeImageBtn.innerHTML = 'Processing..'
+    makeImageBtn.disabled = true
+
+    outputMsg.innerHTML = 'Fetching..'
+
+    let seed = (randomSeedField.checked ? Math.floor(Math.random() * 10000) : parseInt(seedField.value))
+    let numOutputsTotal = parseInt(numOutputsTotalField.value)
+    let numOutputsParallel = parseInt(numOutputsParallelField.value)
+    let batchCount = Math.ceil(numOutputsTotal / numOutputsParallel)
+    let batchSize = numOutputsParallel
+
+    let reqBody = {
+        prompt: promptField.value,
+        num_outputs: batchSize,
+        num_inference_steps: numInferenceStepsField.value,
+        guidance_scale: parseInt(guidanceScaleField.value) / 10,
+        width: widthField.value,
+        height: heightField.value,
+    }
+
+    if (initImagePreview.src.indexOf('data:image/png;base64') !== -1) {
+        reqBody['init_image'] = initImagePreview.src
+        reqBody['prompt_strength'] = parseInt(promptStrengthField.value) / 10
+
+        if (maskImagePreview.src.indexOf('data:image/png;base64') !== -1) {
+            reqBody['mask'] = maskImagePreview.src
+        }
+    }
+
+    let time = new Date().getTime()
+    imagesContainer.innerHTML = ''
+
+    for (let i = 0; i < batchCount; i++) {
+        reqBody['seed'] = seed + i
+
+        await doMakeImage(reqBody)
+
+        outputMsg.innerHTML = 'Processed batch ' + (i+1) + '/' + batchCount
+    }
+
+    makeImageBtn.innerHTML = 'Make Image'
+    makeImageBtn.disabled = false
+
+    if (isSoundEnabled()) {
+        playSound()
+    }
+
+    time = new Date().getTime() - time
+    time /= 1000
+
+    outputMsg.innerHTML = 'Processed ' + numOutputsTotal + ' images in ' + time + ' seconds'

    setStatus('request', 'done', 'success')

--- a/media/config-v2.jpg
+++ b/media/config-v2.jpg
--- a/media/config-v3.jpg
+++ b/media/config-v3.jpg
--- a/old_port_main.py
+++ b/old_port_main.py
@ -30,8 +30,6 @@ def read_root():
    </style>
    <h4>The UI has moved to <a href="http://localhost:9000">http://localhost:9000</a>. The current address that you used (ending with :8000) will be removed in the future, so please use <a href="http://localhost:9000">http://localhost:9000</a> going ahead (and in any bookmarks you've saved).</h4>

-    <h4>Also, please use <pre>./server</pre> instead of <pre>docker-compose up &amp;</pre>. To stop, please use <pre>./server stop</pre>. This will help the project better manage the startup process in the future.</h4>
-
    <h3>Why has the address changed?</h3>
    <p>The previously used port (8000) is often used by other servers, which results in port conflicts. So the project's port number has been changed, while the project is still young. Otherwise port-conflicts with 8000 will be a common source of new-user issues in the future.</p>
    <p>Sorry about this, and apologies for the inconvenience :)</p>
--- a/25
+++ b/25
@ -1,26 +1,3 @@
 #!/bin/bash

-CMD="$1"
-if [ -z "$1" ]; then
-  CMD="start"
-fi
-
-start_server() {
-  docker-compose up -d stable-diffusion-old-port-redirect # old port 8000 server, show redirect notice
-  docker-compose up stability-ai stable-diffusion-ui
-}
-
-stop_server() {
-  docker-compose down
-}
-
-if [ "$CMD" == "start" ]; then
-  start_server
-elif [ "$CMD" == "stop" ]; then
-  stop_server
-elif [ "$CMD" == "restart" ]; then
-  stop_server
-  start_server
-else
-  echo "Unknown option: $1 (Expected start or stop)"
-fi
+echo "Please use 'docker-compose up &' to start the server, and 'docker-compose down' to stop the server"
Author	SHA1	Message	Date
cmdr2	b860dbd9a6	Revert to using docker-compose commands, since ./server wasn't working reliably on some platforms	2022-08-27 14:14:24 +05:30
cmdr2	7c60189f29	Reduce opacity of the labels over the image until the mouse moves over it	2022-08-27 11:21:10 +05:30
cmdr2	35dc13ffcf	Update screenshot for the new num_outputs config	2022-08-27 10:55:59 +05:30
cmdr2	6b55f385c7	Allow generating an arbitrary number of output images, with parallel batches of 1 or 4 depending on the GPU's capabilities	2022-08-27 10:53:46 +05:30