Update app.py

app.py

@@ -352,30 +352,30 @@ 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' onpointermove='try{chart(event.clientX-this.getBoundingClientRect().x, event.clientY-this.getBoundingClientRect().y);}catch(e){alert(e);}' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='touch-action:none;'>
+              <svg id='svg_in' height='128' width='256' viewBox='0 0 256 128' onpointerup='document.getElementsByTagName(\"input[type=text]\")[1].value=document.getElementById(\"pl\").getAttribute(\"points\")' onpointermove='try{chartPoints(event.clientX-this.getBoundingClientRect().x, event.clientY-this.getBoundingClientRect().y);}catch(e){alert(e);}' 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,64 255,64 255,0' stroke='url(#lg)' fill='none' stroke-width='3'/>
+                <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');
                 var pts = '';
                 for (var i=0; i<256; i++) {
-                  pts += i+','+Math.sin(i/256*Math.PI/2)*64+' ';
+                  pts += i+','+Math.sin(i/256*Math.PI/2)*127+' ';
                 }
                 pl.setAttribute('points', pts); 
                 }catch(e){alert(e);}
-                function chart(x,y) {
+                window.chartPoints = function(x,y) {
                   var pl_a = pl.getAttribute('points').split(' ');
                   pl_a[x] = x+','+y;
                   pl.setAttribute('points', pl_a.join(' '));
                 }
               </script>""")
-            input_json = gr.JSON(value="{}", visible=False)
+            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));
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast = 2.0;