From e53a5bf0c32ef916228ef3bb727e55979a00ff22 Mon Sep 17 00:00:00 2001
From: Maxim Zakharov <maxeozakh@gmail.com>
Date: Wed, 11 Dec 2024 21:05:24 +0300
Subject: [PATCH] StableDdiffusion UI - convenient send via Enter (#8160)

---
 examples/webgpu/stable_diffusion/index.html | 48 ++++++++++++++-------
 1 file changed, 32 insertions(+), 16 deletions(-)

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 @@
     </a>
     
     <div id="mybox">
-        <input id="promptText" type="text" placeholder="Enter your prompt here" value="a human standing on the surface of mars">
+        <form id="promptForm">
+            <input id="promptText" type="text" placeholder="Enter your prompt here" value="a human standing on the surface of mars">
 
-        <label>
-            Steps: <span id="stepValue">9</span>
-            <input id="stepRange" type="range" min="5" max="20" value="9" step="1">
-        </label>
+            <label>
+                Steps: <span id="stepValue">9</span>
+                <input id="stepRange" type="range" min="5" max="20" value="9" step="1">
+            </label>
 
-        <label>
-            Guidance: <span id="guidanceValue">8.0</span>
-            <input id="guidanceRange" type="range" min="3" max="15" value="8.0" step="0.1">
-        </label>
+            <label>
+                Guidance: <span id="guidanceValue">8.0</span>
+                <input id="guidanceRange" type="range" min="3" max="15" value="8.0" step="0.1">
+            </label>
 
-        <input id="btnRunNet" type="button" value="Run" disabled>
+            <input id="btnRunNet" type="button" value="Run" disabled>
+        </form>
 
         <div id="divModelDl" style="display: flex; align-items: center; width: 100%; gap: 10px;">
             <span id="modelDlTitle">Downloading model</span>
@@ -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');