Update app.py

app.py

@@ -344,7 +344,7 @@ with gr.Blocks(css=css) as demo:
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.fov;
               document.getElementsByClassName(\"model3D\")[0].getElementsByTagName(\"canvas\")[0].style.filter = \"blur(\" + BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize/Math.sqrt(2.0) + \"px)\";
             '/><span>0.8</span>""")
-            parallax = gr.HTML(value="""<label for='parallax'>Parallax</label><input id='parallax' type='range' style='width:256px;height:1em;' min='-8' max='8' step='0.001' oninput='
+            parallax = gr.HTML(value="""<label for='parallax'>Parallax</label><input id='parallax' type='range' style='width:256px;height:1em;' min='-16' max='16' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
                   screenshot: true,
@@ -352,15 +352,15 @@ with gr.Blocks(css=css) as demo:
                 }
               } 
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.samples = 4; 
-              try {
-                var camera = BABYLON.Engine.LastCreatedScene.activeCamera;
-                
-                BABYLON.Engine.LastCreatedScene.getNodes()[1].position.z = this.value * Math.cos(camera.alpha) * Math.sin(camera.beta);
+              document.getElementsByClassName(\"model3D\")[0].getElementsByTagName(\"canvas\")[0].onfocus = function() {
+                BABYLON.Engine.LastCreatedScene.getNodes()[1].position.z = 0;
                 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;
-              } catch(e) {alert(e);}
+                BABYLON.Engine.LastCreatedScene.getNodes()[1].position.x = 0;
+              }
+              BABYLON.Engine.LastCreatedScene.getNodes()[1].position.z = this.value * Math.cos(BABYLON.Engine.LastCreatedScene.activeCamera.alpha) * Math.sin(BABYLON.Engine.LastCreatedScene.activeCamera.beta);
+              BABYLON.Engine.LastCreatedScene.getNodes()[1].position.y = 0;
+              BABYLON.Engine.LastCreatedScene.getNodes()[1].position.x = this.value * Math.sin(BABYLON.Engine.LastCreatedScene.activeCamera.alpha) * Math.sin(BABYLON.Engine.LastCreatedScene.activeCamera.beta);
+              this.parentNode.childNodes[2].innerText = this.value;
             '/><span>0.0</span>""")
             camera = gr.HTML(value="<a href='#' onclick=\"BABYLON.Engine.LastCreatedScene.activeCamera.radius=0;\">reset camera</a>")
             contrast = gr.HTML(value="""<label for='contrast'>Contrast</label><input id='contrast' type='range' style='width:256px;height:1em;' min='0' max='2' step='0.001' oninput='
@@ -394,7 +394,6 @@ with gr.Blocks(css=css) as demo:
               } 
               var cntxt = document.getElementsByClassName(\"model3D\")[0].getElementsByTagName(\"canvas\")[0].getContext(\"webgl2\");
               this.innerText = cntxt;
-              var ctx = document.getElementById(\"cnv_out\").getContext(\"2d\");
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.screenshot = true;
 
               BABYLON.Engine.LastCreatedScene.getEngine().onEndFrameObservable.add(function() {
@@ -404,26 +403,29 @@ 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(\"cnv_out\").width = document.getElementById(\"img_out\").width;
-                          document.getElementById(\"cnv_out\").height = document.getElementById(\"img_out\").height;
-                          ctx.drawImage(img_out, 0, 0); 
+                          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\").onload = function() {
+                            document.getElementById(\"cnv_out\").width = document.getElementById(\"img_out\").width;
+                            document.getElementById(\"cnv_out\").height = document.getElementById(\"img_out\").height;
+                            document.getElementById(\"cnv_out\").getContext(\"2d\").drawImage(img_out, 0, 0); 
+                          }
+                          document.getElementById(\"img_out\").src = \"data:image/svg+xml;base64,\" + btoa(svgd); 
                         }
-                        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); 
-                      });
+                        document.getElementById(\"img_out\").src = durl;
+                      }
+                    );
                   } catch(e) { alert(e); }
                   // https://forum.babylonjs.com/t/best-way-to-save-to-jpeg-snapshots-of-scene/17663/11
                 }
               });
-            '/>webgl2</a><br/><img src='' id='img_out'/>
-            <div id='svg_div'></div>
+            '/>webgl2</a><br/><img src='' id='img_out'/><br/>
             <canvas id='cnv_out'/>""")
             render = gr.Button("Render")