diff --git a/examples/webgpu/stable_diffusion/index.html b/examples/webgpu/stable_diffusion/index.html index 08488f8a84..27d75ea6db 100644 --- a/examples/webgpu/stable_diffusion/index.html +++ b/examples/webgpu/stable_diffusion/index.html @@ -177,19 +177,21 @@
- +
+ - + - + - + +
Downloading model @@ -559,7 +561,7 @@ }); } - function renderImage(e, image) { + function renderImage(image) { let pixels = [] let pixelCounter = 0 @@ -574,14 +576,16 @@ } ctx.putImageData(new ImageData(new Uint8ClampedArray(pixels), 512, 512), 0, 0); - e.target.disabled = false; } - document.getElementById("btnRunNet").addEventListener("click", function(e) { - e.target.disabled = true; + const handleRunNetAndRenderResult = () => { + document.getElementById("btnRunNet").disabled = true; const canvas = document.getElementById("canvas"); ctx.clearRect(0, 0, canvas.width, canvas.height); + const prevTitleValue = document.getElementById("modelDlTitle").innerHTML; + document.getElementById("modelDlTitle").innerHTML = "Running model"; + runStableDiffusion( document.getElementById("promptText").value, document.getElementById("stepRange").value, @@ -589,9 +593,21 @@ // Decode at each step null ).then((image) => { - renderImage(e, image); + renderImage(image); + }).finally(() => { + document.getElementById("modelDlTitle").innerHTML = prevTitleValue; + document.getElementById("btnRunNet").disabled = false; }); - }, false); + }; + + document.getElementById("btnRunNet").addEventListener("click", handleRunNetAndRenderResult, false); + + document.getElementById("promptForm").addEventListener("submit", function (event) { + event.preventDefault(); + if (document.getElementById("btnRunNet").disabled) return; + + handleRunNetAndRenderResult(); + }) const stepSlider = document.getElementById('stepRange'); const stepValue = document.getElementById('stepValue');