fix origin image render block & add time diff

index.js

@@ -16,9 +16,10 @@ status.textContent = 'Ready';
 const url = 'https://images.pexels.com/photos/5965592/pexels-photo-5965592.jpeg?auto=compress&cs=tinysrgb&w=1024';
 function useRemoteImage(url) {
   const image = document.createElement('img');
+  image.crossOrigin = "anonymous";
   image.src = url;
   imageContainer.appendChild(image);
-  start(url);
+  setTimeout(() => start(url), 0)
 }
 useRemoteImage(url)
 
@@ -39,7 +40,7 @@ fileSelect.addEventListener('change', function (e) {
     const image = document.createElement('img');
     image.src = e2.target.result;
     imageContainer.appendChild(image);
-    start(image.src);
+    setTimeout(() => start(image.src), 0)
   };
   reader.readAsDataURL(file);
 });
@@ -47,6 +48,7 @@ fileSelect.addEventListener('change', function (e) {
 async function start(source) {
   status.textContent = 'processing';
   console.log('start process')
+  const startTime = new Date();
 
   const image = await RawImage.read(source);
   // Process image
@@ -60,7 +62,9 @@ async function start(source) {
   const matteImage = await RawImage.fromTensor(output[0].mul(255).to('uint8')).resize(image.width, image.height);
 
   console.log('matteImage', matteImage, output)
-  status.textContent = 'Finish';
+  const endTime = new Date();
+  const diff = (endTime - startTime) / 1000
+  setTimeout(() => status.textContent = 'Finish: ' + diff + 's', 100)
 
   async function renderRawImage(image) {
     let rawCanvas = await image.toCanvas();