Easier random seed control; Show the seed number used for a random image, incase it is good and can be refined further

index.html

@@ -47,7 +47,7 @@
 
     <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"> <small>(use -1 for random seed)</small><br/>
+        <label for="seed">Seed:</label> <input id="seed" name="seed" value="30000"> <input id="random_seed" name="random_seed" type="checkbox"> <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="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/>
@@ -118,6 +118,7 @@ async function makeImage() {
     btn.disabled = true;
 
     let outputMsg = document.querySelector('#outputMsg')
+    outputMsg.innerHTML = 'Fetching..'
 
     function logError(msg, res) {
         outputMsg.innerHTML = '<span style="color: red">Error: ' + msg + '</span>'
@@ -125,6 +126,9 @@ async function makeImage() {
         setStatus('request', 'error', 'error')
     }
 
+    let random_seed = document.querySelector("#random_seed")
+    let seed = (random_seed.checked ? Math.floor(Math.random() * 10000) : document.querySelector('#seed').value)
+
     let reqBody = {
         prompt: document.querySelector('#prompt').value,
         num_outputs: document.querySelector('#num_outputs').value,
@@ -132,7 +136,7 @@ async function makeImage() {
         guidance_scale: document.querySelector('#guidance_scale').value / 10,
         width: document.querySelector('#width').value,
         height: document.querySelector('#height').value,
-        seed: document.querySelector('#seed').value,
+        seed: seed,
     }
     let res = ''
     let time = new Date().getTime()
@@ -180,7 +184,7 @@ async function makeImage() {
     time = new Date().getTime() - time
     time /= 1000
 
-    outputMsg.innerHTML = 'Processed in ' + time + ' seconds'
+    outputMsg.innerHTML = 'Processed in ' + time + ' seconds. Seed: ' + seed
 
     let images = document.querySelector('#images')
     images.innerHTML = ''
@@ -205,6 +209,11 @@ async function makeImage() {
     }
 
     setStatus('request', 'done', 'success')
+
+    if (random_seed.checked) {
+        let seedEl = document.querySelector("#seed")
+        seedEl.value = seed
+    }
 }
 
 document.querySelector('#makeImage').addEventListener('click', makeImage)
@@ -227,6 +236,19 @@ function updateGuidanceScale() {
 guidanceScale.addEventListener('input', updateGuidanceScale)
 updateGuidanceScale()
 
+let random_seed = document.querySelector("#random_seed")
+function checkRandomSeed() {
+    let seed = document.querySelector("#seed")
+    if (random_seed.checked) {
+        seed.disabled = true
+        seed.value = "random"
+    } else {
+        seed.disabled = false
+    }
+}
+random_seed.addEventListener('input', checkRandomSeed)
+checkRandomSeed()
+
 setInterval(healthCheck, HEALTH_PING_INTERVAL * 1000)
 </script>