Update app.py

app.py

@@ -333,9 +333,17 @@ 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='0' max='4' 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.depthOfFieldEnabled=true;BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.depthOfFieldBlurLevel=this.value;this.parentNode.childNodes[2].innerText=BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.depthOfFieldBlurLevel;'/><span>1.0</span>")
+            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.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.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><select onchange='BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.depthOfFieldEnabled=true;BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.depthOfFieldBlurLevel=this.value;'><option value='0'>low</option><option value='1'>mid</option><option value='2'>high</option></select><input id='blur' type='range' style='width:256px;height:1em;' min='1' max='256000' step='1000' 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.focusDistance = 128000;
+              this.parentNode.childNodes[2].innerText = BABYLON.Engine.LastCreatedScene.activeCamera.metadata.pipeline.focusDistance;
+            '/><span>1.0</span>""")
             canvas = gr.HTML(value="<a href='#' onclick=\"this.innerText=document.getElementsByClassName('model3D')[0].getElementsByTagName('canvas')[0].getContext('webgl2');\">webgl2</a>")
             render = gr.Button("Render")