Spaces:
Sleeping
Sleeping
File size: 6,329 Bytes
b41a8a4 11849d7 b41a8a4 4b7e40c b41a8a4 4b7e40c b41a8a4 4b7e40c b41a8a4 d9b7829 b41a8a4 d9b7829 b41a8a4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 | <!DOCTYPE html>
<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> |