Update app.py

app.py

@@ -356,7 +356,7 @@ with gr.Blocks(css=css) as demo:
                 var camera = BABYLON.Engine.LastCreatedScene.activeCamera;
                 
                 BABYLON.Engine.LastCreatedScene.getNodes()[1].position.z = this.value * Math.cos(camera.alpha) * Math.sin(camera.beta);
-                BABYLON.Engine.LastCreatedScene.getNodes()[1].position.y = this.value * Math.cos(camera.beta);
+                BABYLON.Engine.LastCreatedScene.getNodes()[1].position.y = 0;
                 BABYLON.Engine.LastCreatedScene.getNodes()[1].position.x = this.value * Math.sin(camera.alpha) * Math.sin(camera.beta);
                 
                 this.parentNode.childNodes[2].innerText = this.value;
@@ -404,21 +404,19 @@ with gr.Blocks(css=css) as demo:
                     BABYLON.Tools.CreateScreenshotUsingRenderTarget(BABYLON.Engine.LastCreatedScene.getEngine(), BABYLON.Engine.LastCreatedScene.activeCamera, 
                       { precision: 1.0 }, (durl) => { 
                         document.getElementById(\"img_out\").onload = function() {
-                          document.getElementById(\"svg_div\").innerHTML = `<svg id=\"svg_out\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">
-                            <defs>
-                              <filter id=\"blur\" x=\"0\" y=\"0\" xmlns=\"http://www.w3.org/2000/svg\">
-                                <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"` + BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize/Math.sqrt(2.0) + `\" />
-                              </filter>
-                            </defs>
-                            <image filter=\"url(#blur)\" id=\"svg_img\" x=\"0\" y=\"0\" width=\"` + document.getElementById(\"img_out\").width + `\" height=\"` + document.getElementById(\"img_out\").height + `\" xlink:href=\"` + durl + `\"/>
-                          </svg>`;
-                          alert(document.getElementById(\"svg_div\").innerHTML);
-                          
                           document.getElementById(\"cnv_out\").width = document.getElementById(\"img_out\").width;
                           document.getElementById(\"cnv_out\").height = document.getElementById(\"img_out\").height;
-                          ctx.drawImage(svg_out, 0, 0); 
+                          ctx.drawImage(img_out, 0, 0); 
                         }
-                        document.getElementById(\"img_out\").src = durl; 
+                        var svgd = `<svg id=\"svg_out\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">
+                          <defs>
+                            <filter id=\"blur\" x=\"0\" y=\"0\" xmlns=\"http://www.w3.org/2000/svg\">
+                              <feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"` + BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize/Math.sqrt(2.0) + `\" />
+                            </filter>
+                          </defs>
+                          <image filter=\"url(#blur)\" id=\"svg_img\" x=\"0\" y=\"0\" width=\"` + document.getElementById(\"img_out\").width + `\" height=\"` + document.getElementById(\"img_out\").height + `\" xlink:href=\"` + durl + `\"/>
+                        </svg>`;
+                        document.getElementById(\"img_out\").src = \"data:image/svg+xml;base64,\" + btoa(svgd); 
                       });
                   } catch(e) { alert(e); }
                   // https://forum.babylonjs.com/t/best-way-to-save-to-jpeg-snapshots-of-scene/17663/11