Update app.py

app.py

@@ -353,7 +353,7 @@ with gr.Blocks(css=css) as demo:
             result = gr.Model3D(label="3D Mesh", clear_color=[0.5, 0.5, 0.5, 0.0], camera_position=[0, 90, 0])
             svg_in = gr.HTML(value="""<svg id='svg_in' height='128' width='256' viewBox='0 0 256 128' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='touch-action:none;' onpointerdown='
               try{
-                if (document.getElementById(\"pl\").getAttribute(\"points\") == \"0,0 0,127 255,127 255,0\") {
+                if (document.getElementById(\"pl\").getAttribute(\"points\").length < 256) {
                   var pts = \"\";
                   for (var i=0; i<256; i++) {
                     pts += i+\",\"+Math.sin(i/256*Math.PI/2)*127+\" \";
@@ -361,17 +361,24 @@ with gr.Blocks(css=css) as demo:
                   document.getElementById(\"pl\").setAttribute(\"points\", pts); 
                   this.onpointermove = function(event) {
                     if (this.style.borderBottom == \"1px dotted white\") {
-                      var x = event.clientX - event.target.getBoundingClientRect().x;
-                      var y = event.clientY - event.target.getBoundingClientRect().y;
+                      var x = parseInt(event.clientX - event.target.getBoundingClientRect().x);
+                      var y = parseInt(event.clientY - event.target.getBoundingClientRect().y);
+                      if (x < 0) { x = 0; } else if (x > 255) { x = 255; }
+                      if (y < 0) { y = 0; } else if (y > 127) { x = 127; }
                       var pl_a = document.getElementById(\"pl\").getAttribute(\"points\").split(\" \");
                       pl_a[x] = x+\",\"+y;
                       document.getElementById(\"pl\").setAttribute(\"points\", pl_a.join(\" \"));
                     }
                   }
                   this.onpointerup = function(event) {
-                    document.getElementsByTagName(\"textarea\")[1].value = document.getElementById(\"pl\").getAttribute(\"points\").replace(/\d+,/g, \"\");
+                    var pl_a = document.getElementById(\"pl\").getAttribute(\"points\").replace(/\d+,/g, \"\").split(\" \"); 
+                    for (var i=0; i<pl_a.length; i++) {
+                      pl_a[i] = pl_a[i] * 2 + 1;
+                    }
+                    document.getElementsByTagName(\"textarea\")[1].value = pl_a.join(\" \");
                     this.style.borderBottom = \"1px dotted black\";
                   }
+                  this.onpointerleave = this.onpointerup;
                 }
                 this.style.borderBottom = \"1px dotted white\";
               }catch(e){alert(e);}
@@ -382,9 +389,9 @@ with gr.Blocks(css=css) as demo:
                     <stop offset='100%' stop-color='black'/>
                   </linearGradient>
                 </defs>
-                <polyline id='pl' points='0,0 0,127 255,127 255,0' stroke='url(#lg)' fill='none' stroke-width='3'/>
+                <polyline id='pl' points='-3,0 0,127 255,127 258,0' stroke='url(#lg)' fill='none' stroke-width='3'/>
               </svg>""")
-            txt_in = gr.Textbox(value="")
+            txt_in = gr.Textbox(value="", label="Blur kernel size")
             html = gr.HTML(value="""<label for='zoom'>Zoom</label><input id='zoom' type='range' style='width:256px;height:1em;' min='0.157' max='1.57' step='0.001' oninput='
               BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize = Math.ceil(Math.log2(Math.PI/this.value));
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast = 2.0;