fix(diff): make example image local

hmr.html

@@ -56,13 +56,16 @@
       <input id="threshold" type="range" min="0" max="120" value="85">
       <span id="thresholdText">85</span>
     </label>
+    <label>
+      time: <span id="timingText">Loading...</span><span style="color: gray;">(image load complete in browser)</span>
+    </label>
   </div>
 
   <canvas id="canvas" width="1870" height="778"></canvas>
 
   <script>
     const MINE = "/v1/card/genshin/775956514/ororon";
-    const ORIG = "https://media.discordapp.net/attachments/1234762106558218332/1500814127566684202/81a07207-4f8e-4adb-a3c3-dea113477246.png?ex=69f9cd93&is=69f87c13&hm=7708cde2a1161a7d0b26655902d29f93b297e54293725912e981e3e0701b37eb&=&format=webp&quality=lossless&width=1870&height=778";
+    const ORIG = "/v1/card/genshin/diff/ororo.png";
 
     const W = 1870, H = 778;
     /**
@@ -74,6 +77,7 @@
     const mode = document.getElementById("mode");
     const threshold = document.getElementById("threshold");
     const thresholdText = document.getElementById("thresholdText");
+    const timingText = document.getElementById("timingText");
 
     let mineData, origData, refreshing = false;
 
@@ -102,18 +106,24 @@
       ctx.fillStyle = "#00000088";
       ctx.fillRect(0, 0, W, H);
       ctx.fillStyle = "white";
-      ctx.fillText("fetching...", 20, 30);
+      let line = 30;
+      function log(text) {
+        ctx.fillText(text, 20, line);
+        line += 16;
+      }
+      log("fetching...");
 
+      const start = Date.now();
       const [mineImg, origImg] = await Promise.all([
-        loadImage(MINE),
+        loadImage(MINE).finally(() => timingText.innerText = `${Date.now() - start}ms`),
         loadImage(ORIG),
       ]);
 
-      ctx.fillText("loading...", 20, 46);
+      log("loading...");
       mineData = drawToData(mineImg);
       if (!origData) origData = drawToData(origImg);
 
-      ctx.fillText("rendering...", 20, 62);
+      log("rendering...");
       render();
       refreshing = false;
     }