Update index.html

Author: tin2tin

index.html

@@ -3592,7 +3592,7 @@ <h2 id="about-title"></h2>
             }
 
             const randomSeed = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
-            const url = "https://image.pollinations.ai/prompt/" + encodeURIComponent(promptText) + `?seed=${randomSeed}&token=fxj5LLKJi8hIjZbK&safe=true&nologo=true&enhance=true&model=flux` + urlSuffix;
+            const url = "https://image.pollinations.ai/prompt/" + encodeURIComponent(promptText) + `?seed=${randomSeed}&safe=true&nologo=true&enhance=true&model=flux` + urlSuffix;
 
             const tempImg = new Image();
             tempImg.onload = () => {
@@ -3945,37 +3945,44 @@ <h2 id="about-title"></h2>
             });
             App.modals.show('style-editor-modal'); 
         },
-        handleUpdate(event) {
-            const target = event.target;
-            const id = target.id.replace('style-', '');
-            let value = target.value;
-
-            const hexToRgba = (h, o) => {
-                const r = parseInt(h.slice(1, 3), 16), g = parseInt(h.slice(3, 5), 16), b = parseInt(h.slice(5, 7), 16);
-                return `rgba(${r}, ${g}, ${b}, ${o})`;
-            };
-
-            if (target.id === 'style-container-bg-color' || target.id === 'style-container-bg-opacity') {
-                const hex = document.getElementById('style-container-bg-color').value;
-                const opacity = document.getElementById('style-container-bg-opacity').value;
-                App.state.storyData.meta.styles['--container-bg-color'] = hexToRgba(hex, opacity);
-            } else if (['btn-color', 'btn-hover-color', 'btn-opacity'].includes(id)) {
-                const hex = document.getElementById('style-btn-color').value;
-                const hoverHex = document.getElementById('style-btn-hover-color').value;
-                const opacity = document.getElementById('style-btn-opacity').value;
-                App.state.storyData.meta.styles['--btn-color'] = hexToRgba(hex, opacity);
-                App.state.storyData.meta.styles['--btn-hover-color'] = hexToRgba(hoverHex, opacity);
-            }
-            else if (id === 'layout') { App.state.storyData.meta.layout = value; } 
-            else {
-                if (target.type === 'number') value += 'px';
-                App.state.storyData.meta.styles[`--${id}`] = value;
-            }
-            
-            App.setDirty(true);
-            if (App.elements['player-container'].style.display === 'flex') App.player.renderScene(App.state.currentSceneId);
-            if (App.elements['editor-fieldset'].disabled === false) App.editor.renderPreview();
-        },
+		handleUpdate(event) {
+			const target = event.target;
+			const id = target.id.replace('style-', '');
+			let value = target.value;
+
+			const hexToRgba = (h, o) => {
+				const r = parseInt(h.slice(1, 3), 16), g = parseInt(h.slice(3, 5), 16), b = parseInt(h.slice(5, 7), 16);
+				return `rgba(${r}, ${g}, ${b}, ${o})`;
+			};
+
+			if (target.id === 'style-container-bg-color' || target.id === 'style-container-bg-opacity') {
+				const hex = document.getElementById('style-container-bg-color').value;
+				const opacity = document.getElementById('style-container-bg-opacity').value;
+				App.state.storyData.meta.styles['--container-bg-color'] = hexToRgba(hex, opacity);
+			} else if (['btn-color', 'btn-hover-color', 'btn-opacity'].includes(id)) {
+				const hex = document.getElementById('style-btn-color').value;
+				const hoverHex = document.getElementById('style-btn-hover-color').value;
+				const opacity = document.getElementById('style-btn-opacity').value;
+				App.state.storyData.meta.styles['--btn-color'] = hexToRgba(hex, opacity);
+				App.state.storyData.meta.styles['--btn-hover-color'] = hexToRgba(hoverHex, opacity);
+			}
+			else if (id === 'layout') { App.state.storyData.meta.layout = value; } 
+			else {
+				if (target.type === 'number') value += 'px';
+				App.state.storyData.meta.styles[`--${id}`] = value;
+			}
+			
+			// Live-update the editor's audio players' volume
+			if (id === 'music-volume') {
+				App.elements['music-player'].volume = parseFloat(target.value);
+			} else if (id === 'ambience-volume') {
+				App.elements['ambience-player'].volume = parseFloat(target.value);
+			}
+			
+			App.setDirty(true);
+			if (App.elements['player-container'].style.display === 'flex') App.player.renderScene(App.state.currentSceneId);
+			if (App.elements['editor-fieldset'].disabled === false) App.editor.renderPreview();
+		},
         applyToContainer(container) {
             const meta = App.state.storyData.meta;
             const styles = meta.styles;
@@ -4294,7 +4301,7 @@ <h2 id="about-title"></h2>
                 urlSuffix = '&width=1280&height=720';
             }
             const randomSeed = Math.floor(Math.random() * Number.MAX_SAFE_INTEGER);
-            const url = "https://image.pollinations.ai/prompt/" + encodeURIComponent(fullPrompt) + `?seed=${randomSeed}&token=fxj5LLKJi8hIjZbK&safe=true&nologo=true&enhance=true&model=flux` + urlSuffix;
+            const url = "https://image.pollinations.ai/prompt/" + encodeURIComponent(fullPrompt) + `?seed=${randomSeed}&safe=true&nologo=true&enhance=true&model=flux` + urlSuffix;
 
             try {
                 const response = await fetch(url);