Update app.py

app.py

@@ -749,6 +749,40 @@ function drawLine(x, y) {
 window.drawLine = drawLine;
 
 
+window.screenshot = false;
+
+function snapshot() {
+if (BABYLON) {
+  screenshot = true;
+  BABYLON.Engine.LastCreatedScene.getEngine().onEndFrameObservable.add(function() {
+    if (screenshot === true) {
+    screenshot = false;
+    try {
+    BABYLON.Tools.CreateScreenshotUsingRenderTarget(BABYLON.Engine.LastCreatedScene.getEngine(), BABYLON.Engine.LastCreatedScene.activeCamera, 
+        { precision: 1.0 }, (durl) => { 
+             var cnvs = document.getElementById("model3D").getElementsByTagName("canvas")[0]; //.getContext("webgl2");
+             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="1" />
+                            </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); }
+                  // https://forum.babylonjs.com/t/best-way-to-save-to-jpeg-snapshots-of-scene/17663/11
+                }
+          });
+}
+}
+window.snapshot = snapshot;
+
+
 var intv_ = setInterval(function(){
 if (document.getElementById("image_edit") && document.getElementById("image_edit").getElementsByTagName("canvas")) {
   document.getElementById("image_edit").getElementsByTagName("canvas")[0].oncontextmenu = function(e){e.preventDefault();}
@@ -968,6 +1002,11 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
               BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure = this.value;
               this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure;
             '/><span>1.0</span>""")
+            snapshot = gr.HTML(value="""
+              <a onclick='snapshot();'>Screenshot</a><br/>
+              <img src='' id='img_out' onload='var ctxt = document.getElementById(\"cnv_out\").getContext(\"2d\");ctxt.drawImage(this, 0, 0);'/><br/>
+              <canvas id='cnv_out'></canvas>
+            """)
             render = gr.Button("Render")
             input_json.input(show_json, inputs=[input_json], outputs=[processed_video, processed_zip, output_frame, output_mask, output_depth, coords])