Update app.py

app.py

@@ -47,6 +47,7 @@ state_dict = torch.load(filepath, map_location="cpu")
 model.load_state_dict(state_dict)
 model = model.to(DEVICE).eval()
 
+
 def findNormals(gray_depth, format):
 
     d_im = cv2.cvtColor(cv2.imread(gray_depth).astype(np.uint8), cv2.COLOR_BGR2GRAY)
@@ -72,6 +73,26 @@ def findNormals(gray_depth, format):
 
     return (normal[:, :, ::-1]).astype(np.uint8)
 
+
+load_svg="""
+async(img, dpt)=>{
+  document.getElementById('inimage').outerHTML = '<image id="inimage" crossorigin="anonymous" href="' + img + '" x="0" y="0" height="100%" width="100%" style="filter: url(#displacementFilter)"/>';
+  document.getElementById('feimage').outerHTML = '<feImage id="feimage" crossorigin="anonymous" width="100%" height="100%" x="0" y="0" result="10_MAP" href="' + dpt + '"/>';
+}
+"""
+
+
+js="""
+async()=>{
+  document.getElementById('scale').getElementsByTagName('input')[0].addEventListener('input', displace);
+
+  function displace(e) {
+    document.getElementById('dmap').setAttributeNS(null, 'scale', ''+e.target.value);
+  }
+}
+"""
+
+
 title = "# Depth Anything V2"
 description = """Unofficial demo for **Depth Anything V2**.
 Please refer to their [paper](https://arxiv.org/abs/2406.09414), [project page](https://depth-anything-v2.github.io), and [github](https://github.com/DepthAnything/Depth-Anything-V2) for more details."""
@@ -80,7 +101,7 @@ Please refer to their [paper](https://arxiv.org/abs/2406.09414), [project page](
 def predict_depth(image):
     return model.infer_image(image)
 
-with gr.Blocks(css=css) as demo:
+with gr.Blocks(js=js, css=css) as demo:
     gr.Markdown(title)
     gr.Markdown(description)
     gr.Markdown("### Depth Prediction demo")
@@ -117,6 +138,23 @@ with gr.Blocks(css=css) as demo:
         colored_depth = (cmap(depth)[:, :, :3] * 255).astype(np.uint8)
 
         gray_depth = Image.fromarray(depth)
+        svg = gr.HTML("""
+        <svg id='svg'
+          width='1024'
+          height='512'
+          viewBox='0 0 1024 512' 
+          xmlns='http://www.w3.org/2000/svg'>
+          <style></style>
+          <filter id='displacementFilter' color-interpolation-filters='sRGB'>
+            <feImage id='feimage' crossorigin='anonymous' width='100%' height='100%' x='0' y='0' result='10_MAP' href='https://freeali.se/panoramera/examples/basic/f0_dmap_.png'/>
+            <feGaussianBlur result='blurred' in='10_MAP' stdDeviation='15,15' />
+            <feDisplacementMap id='dmap' result='fedm' in2='blurred' in='SourceGraphic' scale='2' xChannelSelector='G' yChannelSelector='A' />
+          </filter>
+          <image id='inimage' crossorigin='anonymous' href='https://freeali.se/panoramera/examples/basic/f0.jpg' x='0' y='0' height='100%' width='100%' style='filter: url(#displacementFilter)'/>
+        </svg>
+        """)
+        scale = gr.Slider(label='Scale', minimum="-128" maximum="128" value="0" step="1" elem_id="scale")
+        gray_depth.change(fn=None, inputs=[original_image, gray_depth], outputs=None, js=load_svg)
         tmp_gray_depth = tempfile.NamedTemporaryFile(suffix='.png', delete=False)
         gray_depth.save(tmp_gray_depth.name)