Update app.py

app.py

@@ -112,6 +112,23 @@ with gr.Blocks(js=js, css=css) as demo:
             depth_image_slider = ImageSlider(label="Depth Map with Slider View", elem_id='img-display-output', position=0.5)
             gray_depth_file = gr.File(label="Grayscale depth map", elem_id="download",)
             submit = gr.Button(value="Compute 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_file.change(fn=None, inputs=[input_image, gray_depth_file], outputs=None, js=load_svg)
         with gr.Tab("Normals"):
             normals_out = gr.Image(label="Normal map", interactive=False)
             format_normals = gr.Radio(choices=["directx", "opengl"])
@@ -138,23 +155,6 @@ with gr.Blocks(js=js, 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_file.change(fn=None, inputs=[input_image, gray_depth_file], outputs=None, js=load_svg)
         tmp_gray_depth = tempfile.NamedTemporaryFile(suffix='.png', delete=False)
         gray_depth.save(tmp_gray_depth.name)