Update app.py

app.py

@@ -452,6 +452,8 @@ with gr.Blocks(css=css) as demo:
               BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize = Math.ceil(Math.log2(Math.PI/this.value));
               BABYLON.Engine.LastCreatedScene.activeCamera.fov = this.value;
               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>""")
             camera = gr.HTML(value="""<a href='#' id='reset_cam' onclick='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
@@ -463,10 +465,11 @@ with gr.Blocks(css=css) as demo:
               BABYLON.Engine.LastCreatedScene.activeCamera.radius = 0;
               BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize = Math.ceil(Math.log2(Math.PI/document.getElementById(\"zoom\").value));
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.samples = 4; 
+              BABYLON.Engine.LastCreatedScene.activeCamera.fov = document.getElementById(\"zoom\").value;
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast = document.getElementById(\"contrast\").value;
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure = document.getElementById(\"exposure\").value;
               
-              document.getElementsByClassName(\"model3D\")[0].getElementsByTagName(\"canvas\")[0].style.filter = \"blur(\" + BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize/Math.sqrt(2.0)/2.0 + \"px)\";
+              document.getElementsByClassName(\"model3D\")[0].getElementsByTagName(\"canvas\")[0].style.filter = \"blur(\" + BABYLON.Engine.LastCreatedScene.getNodes()[1].material.pointSize/Math.sqrt(2.0) + \"px)\";
             '>reset camera</a>""")
             contrast = gr.HTML(value="""<label for='contrast'>Contrast</label><input id='contrast' type='range' style='width:256px;height:1em;' value='2.0' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
@@ -492,8 +495,7 @@ with gr.Blocks(css=css) as demo:
                 evt.initEvent(\"click\", true, false);
                 document.getElementById(\"reset_cam\").dispatchEvent(evt);
               } 
-              //var cntxt = document.getElementsByClassName(\"model3D\")[0].getElementsByTagName(\"canvas\")[0].getContext(\"webgl2\");
-              //this.innerText = cntxt;
+              var cnvs = document.getElementsByClassName(\"model3D\")[0].getElementsByTagName(\"canvas\")[0]; //.getContext(\"webgl2\");
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.screenshot = true;
 
               BABYLON.Engine.LastCreatedScene.getEngine().onEndFrameObservable.add(function() {
@@ -503,22 +505,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() {
-                          var svgd = `<svg id=\"svg_out\" viewBox=\"0 0 ` + document.getElementById(\"img_out\").width + ` ` + document.getElementById(\"img_out\").height + `\" 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)/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); 
+                          document.getElementById(\"cnv_out\").getContext(\"2d\").drawImage(img_out, 0, 0); 
                         }
-                        document.getElementById(\"img_out\").src = durl;
+                        var svgd = `<svg id=\"svg_out\" viewBox=\"0 0 ` + cnvs.width + ` ` + cnvs.height + `\" 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=\"` + cnvs.width + `\" height=\"` + cnvs.height + `\" xlink:href=\"` + durl + `\"/>
+                        </svg>`;
+                        document.getElementById(\"cnv_out\").width = cnvs.width;
+                        document.getElementById(\"cnv_out\").height = cnvs.height;
+                        document.getElementById(\"img_out\").src = \"data:image/svg+xml;base64,\" + btoa(svgd); 
                       }
                     );
                   } catch(e) { alert(e); }