Update app.py

app.py

@@ -397,6 +397,33 @@ with gr.Blocks(css=css) as demo:
                 <polyline id='pl' points='-3,0 0,127 255,127 258,0' stroke='url(#lg)' fill='none' stroke-width='3'/>
               </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='255' step='2' onclick='
+              var pts_a = document.getElementsByTagName(\"textarea\")[1].value.split(\" \");
+              for (var i=0; i<pts_a.length; i++) {
+                var avg = 0;
+                for (var j = i-parseInt(this.value/2); j <= i+parseInt(this.value/2); j++) {
+                  if (pts_a[j]) {
+                    avg += pts_a[j];
+                  } else if (j < 0) {
+                    avg += pts_a[0];
+                  } else if (j >= pts_a.length) {
+                    avg += pts_a[pts_a.length - 1];
+                  }
+                }
+                pts_a[i] = parseInt(avg / this.value);
+              }
+              document.getElementsByTagName(\"textarea\")[1].value = pts_a.join(\" \");
+              for (var i=0; i<pts_a.length; i++) {
+                pts_a[i] = i+\",\"+pts_a[i];
+              }
+              document.getElementById(\"pl\").setAttribute(\"points\", pts_a.join(\" \"));
+
+              var evt = document.createEvent(\"Event\");
+              evt.initEvent(\"input\", true, false);
+              document.getElementsByTagName(\"textarea\")[1].dispatchEvent(evt);
+            ' oninput='
+              this.parentNode.childNodes[2].innerText = this.value;
+            '/><span>1</span>""")
             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));