From 5542b5e9a618fe6ddbc79ca5e06f07f2c0f4c767 Mon Sep 17 00:00:00 2001
From: Laurence Juden <laurencejuden@gmail.com>
Date: Wed, 24 Aug 2022 20:55:40 +0200
Subject: [PATCH 1/4] Allow user to disable audio

---
 index.html | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index cbdecff9..077819e4 100644
--- a/index.html
+++ b/index.html
@@ -45,6 +45,7 @@
 
     <div id="configHeader"><b>Advanced settings:</b> [<a id="configToggleBtn" href="#">show</a>]</div>
     <div id="config">
+        <input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Enable Sound</label><br/>
         <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="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/>
@@ -183,7 +184,12 @@ async function makeImage() {
     btn.innerHTML = 'Make Image'
     btn.disabled = false;
 
-    playSound()
+
+    const shouldPlaySound = document.querySelector('#sound_toggle').checked
+
+    if (shouldPlaySound) {
+        playSound()
+    }
 
     if (!res) {
         return

From 8e2074d29d77692ebfd8648b25a3ca7afce1565e Mon Sep 17 00:00:00 2001
From: Laurence Juden <laurencejuden@gmail.com>
Date: Thu, 25 Aug 2022 16:52:17 +0200
Subject: [PATCH 2/4] Persist audio toggle setting

---
 index.html | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/index.html b/index.html
index 077819e4..d100b25e 100644
--- a/index.html
+++ b/index.html
@@ -69,10 +69,20 @@
 </body>
 
 <script>
+const SOUND_ENABLED_KEY = "soundEnabled"
+document.querySelector('#sound_toggle').checked = isSoundEnabled();
+
 const HEALTH_PING_INTERVAL = 5 // seconds
 
 let serverStatus = 'offline'
 
+function isSoundEnabled() {
+    if (localStorage.getItem(SOUND_ENABLED_KEY) === 'false') {
+        return false
+    }
+    return true
+}
+
 function setStatus(statusType, msg, msgType) {
     let el = ''
 
@@ -230,6 +240,12 @@ async function makeImage() {
     }
 }
 
+function handleAudioEnabledChange(e) {
+    localStorage.setItem(SOUND_ENABLED_KEY, e.target.checked.toString())
+}
+
+document.querySelector('#sound_toggle').addEventListener('click', handleAudioEnabledChange)
+
 document.querySelector('#makeImage').addEventListener('click', makeImage)
 
 let config = document.querySelector('#config')

From c191a67dc640095343592258f324c8a249617be8 Mon Sep 17 00:00:00 2001
From: Laurence Juden <laurencejuden@gmail.com>
Date: Thu, 25 Aug 2022 16:54:01 +0200
Subject: [PATCH 3/4] Tidy up

---
 index.html | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/index.html b/index.html
index d100b25e..7466faff 100644
--- a/index.html
+++ b/index.html
@@ -194,10 +194,7 @@ async function makeImage() {
     btn.innerHTML = 'Make Image'
     btn.disabled = false;
 
-
-    const shouldPlaySound = document.querySelector('#sound_toggle').checked
-
-    if (shouldPlaySound) {
+    if (isSoundEnabled()) {
         playSound()
     }
 

From 56a1fff0390013f5d8ca572d2cb70696ec3541c1 Mon Sep 17 00:00:00 2001
From: Ralph Juden <ralphjuden@gmail.com>
Date: Thu, 25 Aug 2022 18:51:16 +0200
Subject: [PATCH 4/4] Tidy up 2

---
 index.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 7466faff..ffe5da1a 100644
--- a/index.html
+++ b/index.html
@@ -45,13 +45,13 @@
 
     <div id="configHeader"><b>Advanced settings:</b> [<a id="configToggleBtn" href="#">show</a>]</div>
     <div id="config">
-        <input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Enable Sound</label><br/>
         <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="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="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></span><br/>
+        <input id="sound_toggle" name="sound_toggle" type="checkbox" checked> <label for="sound_toggle">Play sound on task completion</label><br/>
     </div>
 
     <button id="makeImage">Make Image</button> <br/><br/>
@@ -70,8 +70,6 @@
 
 <script>
 const SOUND_ENABLED_KEY = "soundEnabled"
-document.querySelector('#sound_toggle').checked = isSoundEnabled();
-
 const HEALTH_PING_INTERVAL = 5 // seconds
 
 let serverStatus = 'offline'
@@ -245,6 +243,8 @@ document.querySelector('#sound_toggle').addEventListener('click', handleAudioEna
 
 document.querySelector('#makeImage').addEventListener('click', makeImage)
 
+document.querySelector('#sound_toggle').checked = isSoundEnabled();
+
 let config = document.querySelector('#config')
 config.style.display = 'none'