Update app.py

app.py

@@ -353,7 +353,7 @@ with gr.Blocks(css=css) as demo:
             processed_video = gr.Video(label="Output Video", format="mp4")
             processed_zip = gr.File(label="Output Archive")
             result = gr.Model3D(label="3D Mesh", clear_color=[0.5, 0.5, 0.5, 0.0], camera_position=[0, 90, 0], interactive=True)
-            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='
+            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;background-color:#808080;' onpointerdown='
               try{
                 if (document.getElementById(\"pl\").getAttribute(\"points\").length < 256) {
                   var pts = \"\";
@@ -396,7 +396,6 @@ with gr.Blocks(css=css) as demo:
                 </defs>
                 <polyline id='pl' points='-3,0 0,127 255,127 258,0' stroke='url(#lg)' fill='none' stroke-width='3' stroke-linejoin='round'/>
               </svg>""")
-            blur_in = gr.Textbox(value="", label="Blur kernel size")
             average = gr.HTML(value="""<label for='average'>Average</label><input id='average' type='range' style='width:256px;height:1em;' value='1' min='1' max='15' step='2' onclick='
               this.style.borderBottom = \"1px dotted white\";
               var pts_a = document.getElementsByTagName(\"textarea\")[1].value.split(\" \");
@@ -410,11 +409,11 @@ with gr.Blocks(css=css) as demo:
                     div--;
                   }
                 }
-                pts_a[i] = parseInt(avg / div);
+                pts_a[i] = parseInt((avg / div - 1) / 2) * 2 + 1;
               }
               document.getElementsByTagName(\"textarea\")[1].value = pts_a.join(\" \");
               for (var i=0; i<pts_a.length; i++) {
-                pts_a[i] = i+\",\"+pts_a[i];
+                pts_a[i] = i+\",\"+parseInt((pts_a[i] - 1) / 2);
               }
               document.getElementById(\"pl\").setAttribute(\"points\", pts_a.join(\" \"));
 
@@ -425,6 +424,7 @@ with gr.Blocks(css=css) as demo:
             ' oninput='
               this.parentNode.childNodes[2].innerText = this.value;
             '/><span>1</span>""")
+            blur_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));