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');