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;background-color:#808080;' onpointerdown='
+            svg_in = gr.HTML(value="""<svg id='svg_in' height='32' width='256' viewBox='0 0 256 32' 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 = \"\";
@@ -366,7 +366,7 @@ with gr.Blocks(css=css) as demo:
                       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; }
+                      if (y < 0) { y = 0; } else if (y > 31) { y = 31; }
                       var pl_a = document.getElementById(\"pl\").getAttribute(\"points\").split(\" \");
                       pl_a[x] = x+\",\"+y;
                       document.getElementById(\"pl\").setAttribute(\"points\", pl_a.join(\" \"));
@@ -381,11 +381,9 @@ with gr.Blocks(css=css) as demo:
                     var evt = document.createEvent(\"Event\");
                     evt.initEvent(\"input\", true, false);
                     document.getElementsByTagName(\"textarea\")[1].dispatchEvent(evt);
-                    this.style.borderBottom = \"1px dotted black\";
                   }
                   this.onpointerleave = this.onpointerup;
                 }
-                this.style.borderBottom = \"1px dotted white\";
               }catch(e){alert(e);}
               '>
                 <defs>
@@ -394,10 +392,9 @@ with gr.Blocks(css=css) as demo:
                     <stop offset='100%' stop-color='black'/>
                   </linearGradient>
                 </defs>
-                <polyline id='pl' points='-3,0 0,127 255,127 258,0' stroke='url(#lg)' fill='none' stroke-width='3' stroke-linejoin='round'/>
+                <polyline id='pl' points='-3,0 0,15 255,15 258,0' stroke='url(#lg)' fill='none' stroke-width='3' stroke-linejoin='round'/>
               </svg>""")
             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(\" \");
               for (var i=0; i<256; i++) {
                 var avg = 0;
@@ -420,7 +417,6 @@ with gr.Blocks(css=css) as demo:
               var evt = document.createEvent(\"Event\");
               evt.initEvent(\"input\", true, false);
               document.getElementsByTagName(\"textarea\")[1].dispatchEvent(evt);
-              this.style.borderBottom = \"1px dotted black\";
             ' oninput='
               this.parentNode.childNodes[2].innerText = this.value;
             '/><span>1</span>""")