Update app.py

app.py

@@ -46,9 +46,6 @@ backups = []
 depths = []
 masks = []
 locations = []
-mesh = []
-mesh_n = []
-scene = None
 
 def zip_files(files_in, files_out):
     with ZipFile("depth_result.zip", "w") as zipObj:
@@ -285,118 +282,9 @@ def depth_edges_mask(depth):
     mask = depth_grad > 0.05
     return mask
 
-def pano_depth_to_world_points(depth):
-    """
-    360 depth to world points
-    given 2D depth is an equirectangular projection of a spherical image
-    Treat depth as radius
-    longitude : -pi to pi
-    latitude : -pi/2 to pi/2
-    """
-
-    # Convert depth to radius
-    radius = (255 - depth.flatten())
-
-    lon = np.linspace(0, np.pi*2, depth.shape[1])
-    lat = np.linspace(0, np.pi, depth.shape[0])
-    lon, lat = np.meshgrid(lon, lat)
-    lon = lon.flatten()
-    lat = lat.flatten()
-
-    pts3d = [[0,0,0]]
-    uv = [[0,0]]
-    nl = [[0,0,0]]
-    for i in range(0, 1): #(0,2)
-        for j in range(0, 1): #(0,2)
-            #rnd_lon = (np.random.rand(depth.shape[0]*depth.shape[1]) - 0.5) / 8
-            #rnd_lat = (np.random.rand(depth.shape[0]*depth.shape[1]) - 0.5) / 8
-            d_lon = lon + i/2 * np.pi*2 / depth.shape[1]
-            d_lat = lat + j/2 * np.pi / depth.shape[0]
-
-            nx = np.cos(d_lon) * np.sin(d_lat)
-            ny = np.cos(d_lat)
-            nz = np.sin(d_lon) * np.sin(d_lat)
-            
-            # Convert to cartesian coordinates
-            x = radius * nx
-            y = radius * ny
-            z = radius * nz
-
-            pts = np.stack([x, y, z], axis=1)
-            uvs = np.stack([lon/np.pi/2, lat/np.pi], axis=1)
-            nls = np.stack([-nx, -ny, -nz], axis=1)
-            
-            pts3d = np.concatenate((pts3d, pts), axis=0)
-            uv = np.concatenate((uv, uvs), axis=0)
-            nl = np.concatenate((nl, nls), axis=0)
-            #print(f'i: {i}, j: {j}')
-            j = j+1
-        i = i+1
-        
-    return [pts3d, uv, nl]
-
 def rgb2gray(rgb):
     return np.dot(rgb[...,:3], [0.333, 0.333, 0.333])
 
-def get_mesh(image, depth, blur_data, loadall):
-    global depths
-    global pcolors
-    global frame_selected
-    global mesh
-    global mesh_n
-    global scene
-    if loadall == False:
-        mesh = []
-        mesh_n = []
-    fnum = frame_selected
-
-    #print(image[fnum][0])
-    #print(depth["composite"])
-
-    depthc = cv2.imread(depths[frame_selected], cv2.IMREAD_UNCHANGED).astype(np.uint8)
-    blur_img = blur_image(cv2.imread(image[fnum][0], cv2.IMREAD_UNCHANGED).astype(np.uint8), depthc, blur_data)
-    gdepth = cv2.cvtColor(depthc, cv2.COLOR_RGB2GRAY) #rgb2gray(depthc)
-    
-    print('depth to gray - ok')
-    points = pano_depth_to_world_points(gdepth)
-    pts3d = points[0]
-    uv = points[1]
-    nl = points[2]
-    print('radius from depth - ok')
-
-    # Create a trimesh mesh from the points
-    # Each pixel is connected to its 4 neighbors
-    # colors are the RGB values of the image
-    uvs = uv.reshape(-1, 2)
-    #print(uvs)
-    #verts = pts3d.reshape(-1, 3)
-    verts = [[0,0,0]]
-    normals = nl.reshape(-1, 3)
-    rgba = cv2.cvtColor(blur_img, cv2.COLOR_RGB2RGBA)
-    colors = rgba.reshape(-1, 4)
-    clrs = [[128,128,128,0]]
-
-    #for i in range(0,1): #(0,4)
-    #clrs = np.concatenate((clrs, colors), axis=0)
-        #i = i+1
-    #verts, clrs
-
-    #pcd = o3d.geometry.TriangleMesh.create_tetrahedron()
-    #pcd.compute_vertex_normals()
-    #pcd.paint_uniform_color((1.0, 1.0, 1.0))
-    #mesh.append(pcd)
-    #print(mesh[len(mesh)-1])
-    if not str(fnum) in mesh_n:
-        mesh_n.append(str(fnum))
-    print('mesh - ok')
-
-    # Save as glb
-    #glb_file = tempfile.NamedTemporaryFile(suffix='.glb', delete=False)
-    #o3d.io.write_triangle_mesh(glb_file.name, pcd)
-    #print('file - ok')
-    return "./TriangleWithoutIndices.gltf", ",".join(mesh_n)
-    
-
 def blur_image(image, depth, blur_data):
     blur_a = blur_data.split()
     #print(f'blur data {blur_data}')
@@ -565,254 +453,11 @@ def draw_mask(o, b, v, d, evt: gr.EventData):
 
 
 load_model="""
-async(c, o, p, d, n, m, s)=>{
+async()=>{
   var intv = setInterval(function(){
-    if (document.getElementById("model3D").getElementsByTagName("canvas")[0]) {
-      try {
-      if (typeof BABYLON !== "undefined" && BABYLON.Engine && BABYLON.Engine.LastCreatedScene) {
-        BABYLON.Engine.LastCreatedScene.onAfterRenderObservable.add(function() { //onDataLoadedObservable
-
-          var then = new Date().getTime();
-          var now, delta;
-          const interval = 1000 / 25;
-          const tolerance = 0.1;
-          
-          BABYLON.Engine.LastCreatedScene.getEngine().stopRenderLoop();
-          BABYLON.Engine.LastCreatedScene.getEngine().runRenderLoop(function () {
-            now = new Date().getTime();
-            delta = now - then;
-            then = now - (delta % interval);
-            if (delta >= interval - tolerance) {
-                BABYLON.Engine.LastCreatedScene.render();
-            }
-          });
-        
-          BABYLON.Engine.LastCreatedScene.getEngine().setHardwareScalingLevel(1.0);
-          BABYLON.Engine.LastCreatedScene.clearColor = new BABYLON.Color4(255,255,255,255);
-          BABYLON.Engine.LastCreatedScene.ambientColor = new BABYLON.Color4(255,255,255,255);
-          //BABYLON.Engine.LastCreatedScene.autoClear = false;
-          //BABYLON.Engine.LastCreatedScene.autoClearDepthAndStencil = false;
-          /*for (var i=0; i<BABYLON.Engine.LastCreatedScene.getNodes().length; i++) {
-            if (BABYLON.Engine.LastCreatedScene.getNodes()[i].material) {
-              BABYLON.Engine.LastCreatedScene.getNodes()[i].material.pointSize = Math.ceil(Math.log2(Math.PI/document.getElementById("zoom").value));
-            }
-          }*/
-          BABYLON.Engine.LastCreatedScene.getAnimationRatio();
-        });
-        
-        if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-          BABYLON.Engine.LastCreatedScene.activeCamera.metadata = {
-            pipeline: new BABYLON.DefaultRenderingPipeline("default", true, BABYLON.Engine.LastCreatedScene, [BABYLON.Engine.LastCreatedScene.activeCamera]) 
-          }
-        }
-        BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.samples = 4;
-        BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast = 1.0;
-        BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure = 1.0;
-
-        //BABYLON.Engine.LastCreatedScene.activeCamera.detachControl(document.getElementById("model3D").getElementsByTagName("canvas")[0]);
-        BABYLON.Engine.LastCreatedScene.activeCamera.inertia = 0.0;
-        //pan
-        BABYLON.Engine.LastCreatedScene.activeCamera.panningInertia = 0.0;
-        BABYLON.Engine.LastCreatedScene.activeCamera.panningDistanceLimit = 16;
-        BABYLON.Engine.LastCreatedScene.activeCamera.panningSensibility = 16;
-        //zoom
-        BABYLON.Engine.LastCreatedScene.activeCamera.pinchDeltaPercentage = 1/256;
-        BABYLON.Engine.LastCreatedScene.activeCamera.wheelDeltaPercentage = 1/256;
-        BABYLON.Engine.LastCreatedScene.activeCamera.upperRadiusLimit = (1.57-0.157)*16;
-        BABYLON.Engine.LastCreatedScene.activeCamera.lowerRadiusLimit = 0.0;
-        //BABYLON.Engine.LastCreatedScene.activeCamera.attachControl(document.getElementById("model3D").getElementsByTagName("canvas")[0], false);
-        
-        BABYLON.Engine.LastCreatedScene.activeCamera.fov = document.getElementById("zoom").value;
-
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].style.filter = "blur(" + Math.ceil(Math.log2(Math.PI/document.getElementById("zoom").value))/2.0*Math.sqrt(2.0) + "px)";
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].oncontextmenu = function(e){e.preventDefault();}
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].ondrag = function(e){e.preventDefault();}
-
-        document.getElementById("model3D").appendChild(document.getElementById("compass_box"));
-        window.coords = JSON.parse(document.getElementById("coords").getElementsByTagName("textarea")[0].value);
-        window.counter = 0;
-
-        if (o.indexOf(""+n) < 0) {
-          if (o != "") { o += ","; }
-          o += n;
-        }
-        //alert(o);
-        var o_ = o.split(",");
-        var q = BABYLON.Engine.LastCreatedScene.meshes;
-        for(i = 0; i < q.length; i++) {
-          let mesh = q[i];
-          mesh.dispose(false, true);
-        }
-        var dome = [];
-        /*for (var j=0; j<o_.length; j++) {
-          o_[j] = parseInt(o_[j]);
-          dome[j] = new BABYLON.PhotoDome("dome"+j, p[o_[j]].image.url, 
-          {
-            resolution: 16,
-            size: 512
-          }, BABYLON.Engine.LastCreatedScene);
-          var q = BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-2]._children;
-          for(i = 0; i < q.length; i++) {
-            let mesh = q[i];
-            mesh.dispose(false, true);
-          }
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].name = "dome"+j;
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].scaling.z = -1;
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].alphaIndex = o_.length-j;
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].visibility = 0.9999;
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].material.diffuseTexture.hasAlpha = true;
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].material.useAlphaFromDiffuseTexture = true;
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].applyDisplacementMap(m[o_[j]].url, 0, 255, function(m){try{alert(BABYLON.Engine.Version);}catch(e){alert(e);}}, null, null, true, function(e){alert(e);});
-          
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].rotationQuaternion = null;
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].position.z = coords[o_[j]].lat;
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].position.x = coords[o_[j]].lng;
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].rotation.y = coords[o_[j]].heading / 180 * Math.PI;
-          BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].rotation.z = -coords[o_[j]].pitch / 180 * Math.PI;
-        }*/
-
-        if (s == false) {
-          v_url = document.getElementById("output_video").getElementsByTagName("video")[0].src;
-        } else {
-          v_url = document.getElementById("depth_video").getElementsByTagName("video")[0].src;
-        }
-        window.videoDome = new BABYLON.VideoDome(
-            "videoDome", [v_url],
-            {
-                resolution: 16,
-                size: 512,
-                clickToPlay: false,
-            }, BABYLON.Engine.LastCreatedScene
-        );
-        var q = BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-2]._children;
-        for (i = 0; i < q.length; i++) {
-            let mesh = q[i];
-            mesh.dispose(false, true);
-        }
-        BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].rotationQuaternion = null;
-        //BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].position.z = coords[counter].lat;
-        //BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].position.x = coords[counter].lng;
-        BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].rotation.y = coords[counter].heading / 180 * Math.PI;
-        BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].rotation.z = -coords[counter].pitch / 180 * Math.PI;
-        
-        BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].scaling.z = -1;
-        BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].material.diffuseTexture.hasAlpha = true;
-        BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].material.useAlphaFromDiffuseTexture = true;
-        //BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].material.emissiveTexture = videoDome.videoTexture;
-        //BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].material.emissiveTexture.hasAlpha = true;
-        //BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].material.useAlphaFromEmissiveTexture = true;
-        BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].alphaIndex = 1;
-        BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1].visibility = 0.9999;
-
-        window.md = false;
-        window.rd = false;
-        window.compass = document.getElementById("compass");
-        window.x = 0;
-        window.y = 0;
-        window.xold = 0;
-        window.yold = 0;
-        window.buffer = null;
-        window.bufferCanvas = document.createElement("canvas");
-        window.ctx = bufferCanvas.getContext("2d", { willReadFrequently: true });
-        window.video = document.getElementById("depth_video").getElementsByTagName("video")[0];
-        window.parallax = 0;
-        window.xdir = new BABYLON.Vector3(1, 0, 0);
-        window.rdir = new BABYLON.Vector3(0, 0, 0);
-        window.videoDomeMesh = BABYLON.Engine.LastCreatedScene.meshes[BABYLON.Engine.LastCreatedScene.meshes.length-1];
-
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointermove', function(evt) {
-        if (md === true) {
-          rdir = BABYLON.Engine.LastCreatedScene.activeCamera.getDirection(xdir);
-          videoDomeMesh.position.x = parallax * rdir.x;
-          videoDomeMesh.position.z = parallax * rdir.z;
-          
-          try {
-            compass.style.transform = "rotateX(" + (BABYLON.Engine.LastCreatedScene.activeCamera.beta-Math.PI/2) + "rad) rotateZ(" + BABYLON.Engine.LastCreatedScene.activeCamera.alpha + "rad)";
-          } catch(e) {alert(e);}
-        }
-        if (rd === true) {
-          x = parseInt(evt.clientX - evt.target.getBoundingClientRect().x);
-          y = parseInt(evt.clientY - evt.target.getBoundingClientRect().y);
-          
-          if (Math.abs(BABYLON.Engine.LastCreatedScene.activeCamera.radius) > (1.57-0.157)*16) {
-            BABYLON.Engine.LastCreatedScene.activeCamera.radius = (1.57-0.157)*16;
-          } else {
-            BABYLON.Engine.LastCreatedScene.activeCamera.fov = BABYLON.Engine.LastCreatedScene.activeCamera.radius/16 + 0.157;
-          }
-          document.getElementById('zoom').value = BABYLON.Engine.LastCreatedScene.activeCamera.fov;
-          document.getElementById('zoom').parentNode.childNodes[2].innerText = document.getElementById('zoom').value;
-          
-          xold=x;
-          yold=y;
-        }
-        });
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointerdown', function() {
-          md = true;
-        });
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointerup', function() {
-          md = false;
-          rd = false;
-        });
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointercancel', function() {
-          md = false;
-          rd = false;
-        });
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointerleave', function() {
-          md = false;
-          rd = false;
-        });
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('pointerout', function() {
-          md = false;
-          rd = false;
-        });
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('contextmenu', function() {
-          rd = true;
-        });
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('gesturestart', function() {
-          rd = true;
-        });
-        document.getElementById("model3D").getElementsByTagName("canvas")[0].addEventListener('gestureend', function() {
-          rd = false;
-        });
-        
-
-        function requestMap() {
-        try {
-          ctx.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
-          videoDome.videoTexture.video.pause();
-          video.pause();
-          if (buffer) {
-            counter = parseInt(video.currentTime);
-            if (!coords[counter]) {counter = coords.length-1;}
-            applyDisplacementMapFromBuffer(videoDomeMesh, buffer, video.videoWidth, video.videoHeight, 0, -1, null, null, true);
-          }
-          buffer = ctx.getImageData(0, 0, video.videoWidth, video.videoHeight).data;
-          applyDisplacementMapFromBuffer(videoDomeMesh, buffer, video.videoWidth, video.videoHeight, 0, 1, null, null, true);
-        } catch(e) {alert(e)}
-        }
-        window.requestMap = requestMap;
-
-        videoDome.videoTexture.video.oncanplaythrough = function () {
-          document.getElementById('seek').innerHTML = '';
-          for (var i=0; i<videoDome.videoTexture.video.duration; i++) {
-            document.getElementById('seek').innerHTML += '<a href="#" style="position:absolute;left:'+(56+coords[i].lng/2)+'px;top:'+(56-coords[i].lat/2)+'px;" onclick="seek('+i+');">-'+i+'-</a> ';
-          }
-          bufferCanvas.width = video.videoWidth;
-          bufferCanvas.height = video.videoHeight;
-          
-          videoPlay();
-        };
-
-        //var debugLayer = BABYLON.Engine.LastCreatedScene.debugLayer.show();
-        
-        if (document.getElementById("model")) {
-          document.getElementById("model").appendChild(document.getElementById("model3D"));
-          toggleDisplay("model");
-        }
-        
-        clearInterval(intv);
-      }
-      } catch(e) {alert(e);}
+    if (document.getElementById("output_video").getElementsByTagName("video")) {
+      alert(document.getElementById("output_video").getElementsByTagName("video")[0].src);
+      clearInterval(intv);
     }
   }, 40);
 }
@@ -914,152 +559,6 @@ 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;
-
-
-window.recorder = null;
-
-function record_video() {
-  try {
-  if (BABYLON.VideoRecorder.IsSupported(BABYLON.Engine.LastCreatedScene.getEngine()) && (recorder == null || !recorder.isRecording) ) {
-    if (recorder == null) {
-        recorder = new BABYLON.VideoRecorder(BABYLON.Engine.LastCreatedScene.getEngine(), { mimeType:'video/mp4', fps:25, /*audioTracks: mediaStreamDestination.stream.getAudioTracks()*/ });
-    }
-    recorder.startRecording('video.mp4', 60*60);
-  }
-  } catch(e) {alert(e);}
-}
-window.record_video = record_video;
-
-function stop_recording() {
-  if (recorder.isRecording) {
-    recorder.stopRecording();
-  }
-}
-window.stop_recording = stop_recording;
-
-function seek(t) {
-  videoDome.videoTexture.video.currentTime = t;
-  if (videoDome.videoTexture.video.currentTime > videoDome.videoTexture.video.duration) {
-    videoDome.videoTexture.video.currentTime = videoDome.videoTexture.video.duration;
-  } else if (videoDome.videoTexture.video.currentTime < 0) {
-    videoDome.videoTexture.video.currentTime = 0;
-  }
-  video.currentTime = t;
-  if (video.currentTime > video.duration) {
-    video.currentTime = video.duration;
-  } else if (video.currentTime < 0) {
-    video.currentTime = 0;
-  }
-  requestMap();
-}
-window.seek = seek;
-
-function videoPlay() {
-  videoDome.videoTexture.video.oncanplaythrough = null;
-  video.oncanplaythrough = null;
-
-  videoDome.videoTexture.video.loop = true;
-  video.loop = true;
-  videoDome.videoTexture.video.play();
-  video.play();
-}
-window.videoPlay = videoPlay;
-
-
-    function applyDisplacementMapFromBuffer(
-        mesh,
-        buffer,
-        heightMapWidth,
-        heightMapHeight,
-        minHeight,
-        maxHeight,
-        uvOffset,
-        uvScale,
-        forceUpdate
-    ) {
-      try {
-        if (!mesh.isVerticesDataPresent(BABYLON.VertexBuffer.NormalKind)) {
-            let positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
-            let normals = [];
-            BABYLON.VertexData.ComputeNormals(positions, mesh.getIndices(), normals, {useRightHandedSystem: true});
-            mesh.setVerticesData(BABYLON.VertexBuffer.NormalKind, normals);
-        }
-        const positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind, true, true);
-        const normals = mesh.getVerticesData(BABYLON.VertexBuffer.NormalKind);
-        const uvs = mesh.getVerticesData(BABYLON.VertexBuffer.UVKind);
-
-        let position = BABYLON.Vector3.Zero();
-        const normal = BABYLON.Vector3.Zero();
-        const uv = BABYLON.Vector2.Zero();
-
-        uvOffset = uvOffset || BABYLON.Vector2.Zero();
-        uvScale = uvScale || new BABYLON.Vector2(1, 1);
-
-        for (let index = 0; index < positions.length; index += 3) {
-            BABYLON.Vector3.FromArrayToRef(positions, index, position);
-            BABYLON.Vector3.FromArrayToRef(normals, index, normal);
-            BABYLON.Vector2.FromArrayToRef(uvs, (index / 3) * 2, uv);
-
-            // Compute height
-            const u = (Math.abs(uv.x * uvScale.x + (uvOffset.x % 1)) * (heightMapWidth - 1)) % heightMapWidth | 0;
-            const v = (Math.abs(uv.y * uvScale.y + (uvOffset.y % 1)) * (heightMapHeight - 1)) % heightMapHeight | 0;
-
-            const pos = (u + v * heightMapWidth) * 4;
-            const r = buffer[pos] / 255.0;
-            const g = buffer[pos + 1] / 255.0;
-            const b = buffer[pos + 2] / 255.0;
-            const a = buffer[pos + 3] / 255.0;
-
-            const gradient = r * 0.33 + g * 0.33 + b * 0.33;
-            //const gradient = a;
-
-            normal.normalize();
-            normal.scaleInPlace(minHeight + (maxHeight - minHeight) * gradient);
-            position = position.add(normal);
-
-            position.toArray(positions, index);
-        }
-        mesh.setVerticesData(BABYLON.VertexBuffer.PositionKind, positions);
-
-        return mesh;
-    } catch(e) {alert(e)}
-    }
-    window.applyDisplacementMapFromBuffer = applyDisplacementMapFromBuffer;
-
-
 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();}
@@ -1164,11 +663,6 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
           processed_video = gr.Video(label="Output Video", format="mp4", elem_id="output_video", interactive=False)
           processed_zip = gr.File(label="Output Archive", interactive=False)
           depth_video = gr.Video(label="Depth Video", format="mp4", elem_id="depth_video", interactive=False, visible=True)
-          result = gr.Model3D(label="3D Mesh", clear_color=[0.5, 0.5, 0.5, 0.0], camera_position=[0, 90, 512], zoom_speed=2.0, pan_speed=2.0, interactive=True, elem_id="model3D")
-          with gr.Accordion(label="Embed in website", open=False):
-            embed_model = gr.Textbox(elem_id="embed_model", label="Include this wherever the model is to appear on the page", interactive=False, value="""
-              
-            """)
             
           with gr.Tab("Blur"):
             chart_c = gr.HTML(elem_id="chart_c", value="""<div id='chart' onpointermove='window.drawLine(event.clientX, event.clientY);' onpointerdown='window.pointerDown(event.clientX, event.clientY);' onpointerup='window.pointerUp();' onpointerleave='window.pointerUp();' onpointercancel='window.pointerUp();' onclick='window.resetLine();'></div>
@@ -1179,9 +673,6 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
   html, body {
     user-select: none;
   }
-  #model3D canvas {
-    user-select: none;
-  }
   #chart hr {
     width: 1px;
     height: 1px;
@@ -1201,32 +692,6 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
     background-color:#808080;
     touch-action: none;
   }
-    #compass_box {
-      position:absolute;
-	  top:2em;
-	  right:3px;
-	  border:1px dashed gray;
-	  border-radius: 50%;
-	  width:1.5em;
-	  height:1.5em;
-	  padding:0;
-	  margin:0;
-	}
-	#compass {
-	  position:absolute;
-	  transform:rotate(0deg);
-	  border:1px solid black;
-	  border-radius: 50%;
-	  width:100%;
-	  height:100%;
-	  padding:0;
-	  margin:0;
-	  line-height:1em;
-	  letter-spacing:0;
-	}
-    #compass b {
-      margin-top:-1px;
-    }
             </style>
             """)
             average = gr.HTML(value="""<label for='average'>Average</label><input id='average' type='range' style='width:256px;height:1em;' value='1' min='1' max='15' step='2' onclick='
@@ -1267,100 +732,6 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
                   {"lat": 50.073823157821664, "lng": 14.437124189538856, "heading": 152.95769, "pitch": 4.233024999999998}
                 ]"""
               coords = gr.Textbox(elem_id="coords", value=example_coords, label="Coordinates", interactive=False)
-              mesh_order = gr.Textbox(elem_id="order", value="", label="Order", interactive=False)
-            load_all = gr.Checkbox(label="Load all")
-
-          with gr.Group():
-            camera = gr.HTML(value="""<div style='width:128px;height:128px;border:1px dotted gray;padding:0;margin:0;float:left;clear:none;' id='seek'></div>
-            <span style='max-width:50%;float:right;clear:none;text-align:right;'>
-            <a href='#' id='reset_cam' style='float:right;clear:none;color:white' onclick='
-              if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-                BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
-                  screenshot: true,
-                  pipeline: new BABYLON.DefaultRenderingPipeline(\"default\", true, BABYLON.Engine.LastCreatedScene, [BABYLON.Engine.LastCreatedScene.activeCamera]) 
-                }
-              } 
-              BABYLON.Engine.LastCreatedScene.activeCamera.radius = 0;
-              BABYLON.Engine.LastCreatedScene.activeCamera.alpha = 0;
-              BABYLON.Engine.LastCreatedScene.activeCamera.beta = Math.PI / 2;
-    
-              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.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].style.filter = \"blur(\" + Math.ceil(Math.log2(Math.PI/document.getElementById(\"zoom\").value))/2.0*Math.sqrt(2.0) + \"px)\";
-              document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].oncontextmenu = function(e){e.preventDefault();}
-              document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].ondrag = function(e){e.preventDefault();}
-            '>Reset camera</a><br/>
-            <span><label for='zoom' style='width:8em'>Zoom</label><input id='zoom' type='range' style='width:128px;height:1em;' value='0.8' min='0.157' max='1.57' step='0.001' oninput='
-              if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-                var evt = document.createEvent(\"Event\");
-                evt.initEvent(\"click\", true, false);
-                document.getElementById(\"reset_cam\").dispatchEvent(evt);
-              } 
-              BABYLON.Engine.LastCreatedScene.activeCamera.fov = this.value;
-              this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.fov;
-
-              document.getElementById(\"model3D\").getElementsByTagName(\"canvas\")[0].style.filter = \"blur(\" + BABYLON.Engine.LastCreatedScene.getNodes()[parseInt(document.getElementById(\"fnum\").getElementsByTagName(\"input\")[0].value)+1].material.pointSize/2.0*Math.sqrt(2.0) + \"px)\";
-            '/><span>0.8</span></span><br/>
-            <span><label for='pan' style='width:8em'>Pan</label><input id='pan' type='range' style='width:128px;height:1em;' value='0' min='-16' max='16' step='0.001' oninput='
-              if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-                var evt = document.createEvent(\"Event\");
-                evt.initEvent(\"click\", true, false);
-                document.getElementById(\"reset_cam\").dispatchEvent(evt);
-              }
-              parallax = this.value;
-              rdir = BABYLON.Engine.LastCreatedScene.activeCamera.getDirection(xdir);
-              videoDomeMesh.position.x = parallax * rdir.x;
-              videoDomeMesh.position.z = parallax * rdir.z;
-              this.parentNode.childNodes[2].innerText = parallax;
-            '/><span>0.0</span></span><br/>
-            <span><label for='contrast' style='width:8em'>Contrast</label><input id='contrast' type='range' style='width:128px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
-              if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-                var evt = document.createEvent(\"Event\");
-                evt.initEvent(\"click\", true, false);
-                document.getElementById(\"reset_cam\").dispatchEvent(evt);
-              } 
-              BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast = this.value;
-              this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast;
-            '/><span>1.0</span></span><br/>
-            <span><label for='exposure' style='width:8em'>Exposure</label><input id='exposure' type='range' style='width:128px;height:1em;' value='1.0' min='0' max='2' step='0.001' oninput='
-              if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
-                var evt = document.createEvent(\"Event\");
-                evt.initEvent(\"click\", true, false);
-                document.getElementById(\"reset_cam\").dispatchEvent(evt);
-              } 
-              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></span><br/>
-              <a href='#' onclick='snapshot();'>Screenshot</a>
-              <a href='#' onclick='record_video();'>Record</a>
-              <a href='#' onclick='stop_recording();'>Stop rec.</a>
-              <a href='#' onclick='videoPlay();'>Play</a></span>""")
-            snapshot = gr.HTML(value="""<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>
-              <div id='compass_box'><div id='compass'><a id='fullscreen' onclick='
-                const model3D = document.getElementById(\"model3D\");
-                if (model3D.parentNode.tagName != \"BODY\") {
-                  window.modelContainer = model3D.parentNode.id;
-                  document.body.appendChild(model3D);
-                  model3D.style.position = \"fixed\";
-                  model3D.style.left = \"0\";
-                  model3D.style.top = \"0\";
-                  model3D.style.zIndex = \"100\";
-                  document.getElementById(\"compass_box\").style.zIndex = \"101\";
-                } else {
-                  document.getElementById(window.modelContainer).appendChild(model3D);
-                  model3D.style.position = \"relative\";
-                  model3D.style.left = \"0\";
-                  model3D.style.top = \"0\";
-                  model3D.style.zIndex = \"initial\";
-                  document.getElementById(\"compass_box\").style.zIndex = \"initial\";
-                }'><b style='color:blue;'>◅</b>𝍠<b style='color:red;'>▻</b></a></div>
-              </div>
-            """)
-            render = gr.Button("Render")
             input_json.input(show_json, inputs=[input_json], outputs=[processed_video, processed_zip, output_frame, output_mask, output_depth, coords])
 
     
@@ -1405,9 +776,7 @@ with gr.Blocks(css=css, js=js, head=head) as demo:
 
         return output_video_path + (json.dumps(locations),)
 
-    submit.click(on_submit, inputs=[input_video, model_type, blur_in, boffset, bsize, coords], outputs=[processed_video, processed_zip, output_frame, output_mask, output_depth, depth_video, coords])
-    render.click(None, inputs=[coords, mesh_order, output_frame, output_mask, selected, output_depth, output_switch], outputs=None, js=load_model)
-    render.click(partial(get_mesh), inputs=[output_frame, output_mask, blur_in, load_all], outputs=[result, mesh_order])
+    submit.click(on_submit, inputs=[input_video, model_type, blur_in, boffset, bsize, coords], outputs=[processed_video, processed_zip, output_frame, output_mask, output_depth, depth_video, coords], js=load_model)
 
     example_files = [["./examples/streetview.mp4", "vits", blurin, 1, 32, example_coords]]
     examples = gr.Examples(examples=example_files, fn=on_submit, cache_examples=True, inputs=[input_video, model_type, blur_in, boffset, bsize, coords], outputs=[processed_video, processed_zip, output_frame, output_mask, output_depth, depth_video, coords])