readme and page updated

README.md

@@ -1,7 +1,17 @@
-**Spiegel** image filter project (Work In Progress)
+**Spiegel** image filter project
 
-- rust
+- rust/webassembly for image processing
-- wasm
+- vanilla javascript for the user interface
+- no server (just static pages)
+
+Live demo at https://shautvast.github.io/spiegel-demo/
+
+* Sorry for the poor performance, especially on larger images.
+* It uses the median image filter from image.rs. That in itself can be pretty slow.
+(Although the implementation uses a _sliding window histogram_, which I think is pretty nifty).
+* And on top of that, I created this custom flood fill algorithm, 
+that instead of filling it with with a single color, looks up a sample from the 
+Spiegel book (that has a corresponding color) and takes the pixels from that. 
 
 sample output
 ![sample](https://github.com/shautvast/spiegel-web/blob/main/unsplash.png)

index.html

@@ -19,7 +19,7 @@
 <div class="main">
 
     <label>
-        <h4>Upload or drag&drop a picture and move the slider, for a quick preview</h4>
+        <h4>Upload or drag&drop a (jpeg) picture and move the slider, for a quick preview</h4>
         <h4>Then press Apply</h4>
 
     </label>
@@ -37,7 +37,9 @@
         </div>
     </div>
     <h4>(Painting can take long, be patient</h4>
-    <h4>all image processing is done in your browser)</h4>
+    <h4>all image processing is done in your browser).</h4>
+    <h5>And ignore all the warnings! It will be all right.</h5>
+    <img id="browserwarning" src="">
 </div>
 <script>
     function allowDrop(event) {

src/js/index.js

@@ -1,5 +1,6 @@
 import "../css/styles.css";
 import spiegel from '../img/spieghel.jpg';
+import browserwarning from '../img/browserwarning.png';
 
 let canvas, ctx, originalWidth, originalHeight, canvasTop, strokeSize=1;
 
@@ -32,6 +33,8 @@ import("../../image-processor/pkg").then((module) => {
 
 });
 document.querySelector("#spieghel").src = spiegel;
+document.querySelector("#browserwarning").src = browserwarning;
+
 const sourceImage = new Image();
 sourceImage.id = "source-image";
 let element = document.querySelector("#image-container");