Update app.py

app.py

@@ -352,34 +352,33 @@ with gr.Blocks(css=css) as demo:
             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])
             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;'>
-                <defs>
-                  <linearGradient id="lg" x1="0%" x2="100%" y1="0%" y2="0%">
-                    <stop offset="0%" stop-color="white"/>
-                    <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'/>
-              </svg>
-              <script>try{
-                var pl = document.getElementById('pl');
+              <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;' onload='
+              try{
                 var pts = '';
                 for (var i=0; i<256; i++) {
                   pts += i+','+Math.sin(i/256*Math.PI/2)*127+' ';
                 }
-                pl.setAttribute('points', pts); 
-                document.getElementById('svg_in').onpointermove = function(event) {
+                document.getElementById('pl').setAttribute('points', pts); 
+                this.onpointermove = function(event) {
                   var x = event.clientX - event.target.getBoundingClientRect().x;
                   var y = event.clientY - event.target.getBoundingClientRect().y;
-                  var pl_a = pl.getAttribute('points').split(' ');
+                  var pl_a = document.getElementById('pl').getAttribute('points').split(' ');
                   pl_a[x] = x+','+y;
-                  pl.setAttribute('points', pl_a.join(' '));
+                  document.getElementById('pl').setAttribute('points', pl_a.join(' '));
                 }
-                document.getElementById('svg_in').onpointerup = function(event) {
+                this.onpointerup = function(event) {
                   document.getElementsByTagName('input[type=text]')[1].value = document.getElementById('pl').getAttribute('points');
                 }
-                }catch(e){alert(e);}
-              </script>""")
+              }catch(e){alert(e);}
+              '>
+                <defs>
+                  <linearGradient id="lg" x1="0%" x2="100%" y1="0%" y2="0%">
+                    <stop offset="0%" stop-color="white"/>
+                    <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'/>
+              </svg>""")
             txt_in = gr.Textbox(value="")
             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));