Spaces:
Sleeping
Sleeping
| <html lang="en" class="mdui-theme-auto"> | |
| <head> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css" | |
| integrity="sha512-2SwdPD6INVrV/lHTZbO2nodKhrnDdJK9/kg2XD1r9uGqPo1cUbujc+IYdlYdEErWNu69gVcYgdxlmVmzTWnetw==" | |
| crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet" /> | |
| <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css"> | |
| <link rel="stylesheet" href="./css/styles.css"> | |
| <script src="https://unpkg.com/mdui@2/mdui.global.js"></script> | |
| <script src="https://cdn.plot.ly/plotly-3.3.0.js" charset="utf-8"></script> | |
| <script src="./js/bspline.js"></script> | |
| <script src="./js/visualization.js"></script> | |
| </head> | |
| <body> | |
| <div id="baseContainer" style="position: relative; overflow: hidden"> | |
| <mdui-top-app-bar variant="center-aligned" scroll-target="myDiv"> | |
| <mdui-button-icon id="menuIcon" icon="menu--rounded"></mdui-button-icon> | |
| <mdui-top-app-bar-title>Porous object drawer</mdui-top-app-bar-title> | |
| <div style="flex-grow: 1"></div> | |
| <mdui-button-icon id="acceptIcon" icon="check--rounded"></mdui-button-icon> | |
| <mdui-button-icon id="infoIcon" icon="info--rounded"></mdui-button-icon> | |
| </mdui-top-app-bar> | |
| <mdui-navigation-drawer modal close-on-esc close-on-overlay-click contained> | |
| <div style="margin: 10%;"> | |
| <div class="mdui-prose"> | |
| <label>Model</label> | |
| </div> | |
| <mdui-radio-group id="modelSelector" value="pipn"> | |
| <mdui-radio value="pipn">PIPN</mdui-radio> | |
| <mdui-radio value="pipn_pp">PIPN++</mdui-radio> | |
| <mdui-radio value="pipn_pp_mrg">PIPN++ MRG</mdui-radio> | |
| <mdui-radio value="pi_gano">PI-GANO</mdui-radio> | |
| <mdui-radio value="pi_gano_pp">PI-GANO++</mdui-radio> | |
| </mdui-radio-group> | |
| <div class="mdui-prose" style="margin-top: 5%;"> | |
| <label>Spline degree</label> | |
| </div> | |
| <mdui-slider id="splineDegreeSlider" step="1" min="1" max="5" value="2" tickmarks | |
| style="margin-top: 1%;"></mdui-slider> | |
| <div class="mdui-prose" style="margin-top: 5%;"> | |
| <label>Object points</label> | |
| </div> | |
| <mdui-slider id="splinePointsSlider" tickmarks step="20" min="20" max="500" value="100" | |
| style="margin-top: 1%;"></mdui-slider> | |
| <div class="mdui-prose" style="margin-top: 5%;"> | |
| <label>Darcy coefficient</label> | |
| </div> | |
| <mdui-slider disabled id="darcySlider" tickmarks step="500" min="1000" max="16000" value="14000" | |
| style="margin-top: 1%;"></mdui-slider> | |
| <div class="mdui-prose" style="margin-top: 5%;"> | |
| <label>Inlet velocity m/s</label> | |
| </div> | |
| <mdui-slider disabled id="velocitySlider" step="0.005" min="0.095" max="0.25" value="0.2" | |
| style="margin-top: 1%;"></mdui-slider> | |
| <div class="mdui-prose" style="margin-top: 5%;"> | |
| <label>Inlet angle</label> | |
| </div> | |
| <mdui-slider disabled id="angleSlider" step="1" min="-45" max="45" value="0" | |
| style="margin-top: 1%;"></mdui-slider> | |
| </div> | |
| </mdui-navigation-drawer> | |
| <div style="display: flex; align-items: center; height: 100vh; width: 100vw; justify-content: center;"> | |
| <div id="myDiv" class="polygon-draw"></div> | |
| </div> | |
| <mdui-dialog id="loadingDialog"> | |
| <p style="text-align: center;">Simulating...</p> | |
| <mdui-linear-progress></mdui-linear-progress> | |
| </mdui-dialog> | |
| <mdui-dialog close-on-overlay-click id="errorDialog"> | |
| <span slot="headline">An error occurred!</span> | |
| <span slot="description">Please try again. <br>Reduce the sharpness of the porous | |
| object | |
| corners or increase the object size.</span> | |
| <div style="width: 100%;"> | |
| <mdui-button id="errorDialogAcceptButton" variant="text" style="float: right;">OK</mdui-button> | |
| </div> | |
| </mdui-dialog> | |
| <mdui-dialog id="infoDialog"> | |
| <span slot="headline">About</span> | |
| <span slot="description">This webapp allows to experiment with the 2D models presented in the paper | |
| <i>Modeling diffusion in complex media through Physically Informed Neural Networks</i>.<br> The goal of | |
| the | |
| paper was the simulation of variable mixed fluid-porous domains using Physics Informed Neural | |
| Networks.<br> | |
| The predictions are computed using the Physics Informed PointNet or the Physics Informed PointNet++.<br> | |
| Both the predictions obtained from the models and the ground truth simulations | |
| resulting from OpenFOAM are available, together with the Mean Absolute Error and the Navier-Stokes-Darcy | |
| equations | |
| residuals, calculated using autograd.<br> | |
| To draw a custom porous object: | |
| <ul> | |
| <li>Drag the control points to set the shape</li> | |
| <li>Right click to add a new control point</li> | |
| <li>CTRL-Right click to delete a control point</li> | |
| </ul> | |
| © 2025 Ciceri Luigi | |
| </span> | |
| <div style="display: flex; width: 100%; justify-content: center;"> | |
| <a href="https://github.com/Gallinator/porous-cfd" target="_blank" class="button-icon"> | |
| <i class="fa-brands fa-github fa-xl" style="float: center;"></i> | |
| </a> | |
| </div> | |
| <div style="width: 100%;"> | |
| <mdui-button id="infoDialogAcceptButton" variant="text" style="float: right;">Got it!</mdui-button> | |
| </div> | |
| </mdui-dialog> | |
| </div> | |
| <script src="./js/editor.js"></script> | |
| </body> | |
| </html> |