Update app.py

app.py

@@ -333,16 +333,38 @@ with gr.Blocks(css=css) as demo:
             result = gr.Model3D(label="3D Mesh", clear_color=[0.5, 0.5, 0.5, 0.0], camera_position=[0, 90, 0])
             html = gr.HTML(value="<label for='zoom'>Zoom</label><input id='zoom' type='range' style='width:256px;height:1em;' min='0.157' max='1.57' step='0.001' oninput='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;'/><span>0.8</span>")
             camera = gr.HTML(value="<a href='#' onclick=\"BABYLON.Engine.LastCreatedScene.activeCamera.radius=0;\">reset camera</a>")
-            contrast = gr.HTML(value="<label for='contrast'>Contrast</label><input id='contrast' type='range' style='width:256px;height:1em;' min='0' max='2' step='0.001' oninput='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=this.value;this.parentNode.childNodes[2].innerText=BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.contrast;'/><span>1.0</span>")
-            exposure = gr.HTML(value="<label for='exposure'>Exposure</label><input id='exposure' type='range' style='width:256px;height:1em;' min='0' max='2' step='0.001' oninput='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.exposure=this.value;this.parentNode.childNodes[2].innerText=BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure;'/><span>1.0</span>")
-            blur = gr.HTML(value="""<label for='blur'>Blur</label><input id='blur' type='range' style='width:256px;height:1em;' min='1' max='256000' step='1000' oninput='
+            contrast = gr.HTML(value="""<label for='contrast'>Contrast</label><input id='contrast' type='range' style='width:256px;height:1em;' min='0' max='2' step='0.001' oninput='
               if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
                 BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
+                  hb: null, vb: null,
                   pipeline: new BABYLON.DefaultRenderingPipeline(\"default\", true, BABYLON.Engine.LastCreatedScene, [BABYLON.Engine.LastCreatedScene.activeCamera]) 
                 }
               } 
-              BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.focusDistance = 128000;
-              this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.focusDistance;
+              BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.samples = 4; 
+              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>""")
+            exposure = gr.HTML(value="""<label for='exposure'>Exposure</label><input id='exposure' type='range' style='width:256px;height:1em;' min='0' max='2' step='0.001' oninput='
+              if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
+                BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
+                  hb: null, vb: null,
+                  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.exposure = this.value;
+              this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.imageProcessing.exposure;
+            '/><span>1.0</span>""")
+            blur = gr.HTML(value="""<label for='blur'>Blur</label><input id='blur' type='range' style='width:256px;height:1em;' min='0' max='256' step='1' oninput='
+              if (!BABYLON.Engine.LastCreatedScene.activeCamera.metadata) {
+                BABYLON.Engine.LastCreatedScene.activeCamera.metadata = { 
+                  hb: null, vb: null,
+                  pipeline: new BABYLON.DefaultRenderingPipeline(\"default\", true, BABYLON.Engine.LastCreatedScene, [BABYLON.Engine.LastCreatedScene.activeCamera]) 
+                }
+              } 
+              BABYLON.Engine.LastCreatedScene.activeCamera.metadata.hb = new BABYLON.BlurPostProcess("Horizontal blur", new BABYLON.Vector2(1.0, 0), this.value, 1.0, BABYLON.Engine.LastCreatedScene.activeCamera);
+              BABYLON.Engine.LastCreatedScene.activeCamera.metadata.vb = new BABYLON.BlurPostProcess("Vertical blur", new BABYLON.Vector2(0, 1.0), this.value, 1.0, BABYLON.Engine.LastCreatedScene.activeCamera);
+              this.parentNode.childNodes[2].innerText = this.value;
             '/><span>1.0</span>""")
             canvas = gr.HTML(value="<a href='#' onclick=\"var cntxt=document.getElementsByClassName('model3D')[0].getElementsByTagName('canvas')[0].getContext('2d');cntxt.filter = 'blur(10px)';this.innerText=cntxt.filter\">webgl2</a>")
             render = gr.Button("Render")