Hugging Face's logo

Spaces:
dmsaylor
/
CHRIS
Running

App Files Community
CHRIS / efficiency_module /templates /efficiency_index.html
3v324v23's picture
3v324v23
extending new template to all tools
570b086
Raw History Blame Contribute Delete
17.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CHRIS</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.min.js" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script> -->
<script src="{{ url_for('static',filename='jquery.slim.min.js') }}" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="{{ url_for('static',filename='popper.min.js') }}" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="{{ url_for('static',filename='bootstrap.min.js') }}" integrity="sha384-VHvPCCyXqtD5DqJeNxl2dtTyhF78xXNXdkwX1CZeRusQfRKp+tA7hAShOK/B/fQ2" crossorigin="anonymous"></script>
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles.css') }}">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
{% extends "base.html" %}
{% block content %}
</header>
<script>
function addColumn(){
var i = document.getElementById('theTable').rows[0].cells.length-1;
$("#theTable tr:eq( 0 )").append("<td> <input type='number' step='any' value='1.0' min='0.00001' required name='mass" + i + "'> </td>");
$("#theTable tr:eq( 1 )").append("<td> <input type='number' step='any' value='1.0' min='0.00001' required name='density" + i + "'> </td>");
$("#theTable tr:eq( 2 )").append("<td> <input type='number' step='any' value='6.0' min='0.00001' required name='area" + i + "'> </td>");
$("#theTable tr:eq( 3 )").append("<td> <input type='number' step='any' value='1.0' min='0.00001' required name='svol" + i + "'> </td>");
$("#theTable tr:eq( 4 )").append("<td> <input type='number' step='1' value='1' min='1' onchange='this.value = parseInt(this.value);' required name='iterations" + i + "'> </td>");
$("#theTable tr:eq( 5 )").append("<td> <input type='number' step='any' value='24.0' min='0.00001' required name='time" + i + "'> </td>");
$("#theTable tr:eq( 6 )").append("<td> <input type='number' step='any' value='1e-08' min='1e-20' required name='D" + i + "'> </td>");
$("#theTable tr:eq( 7 )").append("<td> <input type='number' step='any' value='1.0' min='0.00001' required name='K" + i + "'> </td>");
$("#theTable tr:eq( 8 )").append("<td> <input readonly id='release'" + i + "> </td>");
$("#theTable tr:eq( 9 )").append("<td> <input readonly id='conc'" + i + "> </td>");
//alert(i)
document.getElementById("sysnum").value = i+1
};
function removeColumn(){
var i = document.getElementById('theTable').rows[0].cells.length-1;
if (i == 1){
alert("At least one entry is required");
} else {
$('#theTable tr').find('td:last').remove();
document.getElementById("sysnum").value = i-1
}
}
</script>
<body>
<form method="POST" id="theForm" align="center">
<input type = "button" onclick = "javascript:addColumn()" value = "Add column" />
<input type = "button" onclick = "javascript:removeColumn()" value = "Remove column" />
<table id="theTable" align="center">
<tr>
<th> Test article mass (g) <button type=button class="Info_btn" data-toggle="modal" data-target="#MassModal">&#9432;</button> </th>
{% for i in range(sysnum) %}
<td> <input name="mass{{i}}" id="mass{{i}}" step="any" value="{{mass[i]}}" min="0.000001" type="number" required> </td>
{% endfor %}
</tr>
<tr>
<th> Test article density (g/cm<sup>3</sup>) <button type=button class="Info_btn" data-toggle="modal" data-target="#DensityModal">&#9432;</button> </th>
{% for i in range(sysnum) %}
<td> <input name="density{{i}}" id="density{{i}}" step="any" value="{{density[i]}}" min="0.01" type="number" required> </td>
{% endfor %}
</tr>
<tr>
<th> Test article surface area (cm<sup>2</sup>) <button type=button class="Info_btn" data-toggle="modal" data-target="#SurfaceModal">&#9432;</button> </th>
{% for i in range(sysnum) %}
<td> <input name="area{{i}}" id="area{{i}}" step="any" value="{{area[i]}}" min="0.001" type="number" required> </td>
{% endfor %}
</tr>
<tr>
<th> Solvent volume (ml) <button type=button class="Info_btn" data-toggle="modal" data-target="#SolventModal">&#9432;</button> </th>
{% for i in range(sysnum) %}
<td> <input name="svol{{i}}" id="svol{{i}}" step="any" value="{{svol[i]}}" min="0.000001" type="number" required> </td>
{% endfor %}
</tr>
<tr>
<th> # of iterations <button type=button class="Info_btn" data-toggle="modal" data-target="#IterationModal">&#9432;</button> </th>
{% for i in range(sysnum) %}
<td> <input name="iterations{{i}}" id="iterations{{i}}" value="{{iterations[i]}}" min="1" type="number" step="1" onchange="this.value = parseInt(this.value);" required> </td>
{% endfor %}
</tr>
<tr>
<th> Time per iteration (h) <button type=button class="Info_btn" data-toggle="modal" data-target="#TimeModal">&#9432;</button> </th>
{% for i in range(sysnum) %}
<td> <input name="time{{i}}" id="time{{i}}" step="any" value="{{time[i]}}" min="0.001" type="number" required> </td>
{% endfor %}
</tr>
<tr>
<th> Diffusion coefficient (cm<sup>2</sup>/s) <button type=button class="Info_btn" data-toggle="modal" data-target="#DiffusionModal">&#9432;</button> </th>
{% for i in range(sysnum) %}
<td> <input name="D{{i}}" id="D{{i}}" step="any" value="{{D[i]}}" min="1e-20" type="number" required> </td>
{% endfor %}
</tr>
<tr>
<th> Partition coefficient <button type=button class="Info_btn" data-toggle="modal" data-target="#PartitionModal">&#9432;</button> </th>
{% for i in range(sysnum) %}
<td> <input name="K{{i}}" id="K{{i}}" step="any" value="{{K[i]}}" min="1e-6" type="number" required> </td>
{% endfor %}
</tr>
<tr>
<th> M/M<sub>0</sub> <button type=button class="Info_btn" data-toggle="modal" data-target="#ReleaseModal">&#9432;</button> </th>
{% if release[0] == 0 %}
{% for i in range(sysnum) %}
<td> <input name="release{{i}}" id="release{{i}}" readonly> </td>
{% endfor %}
{% else %}
{% for i in range(sysnum) %}
<td> <input name="release{{i}}" id="release{{i}}" value="{{'%0.4f'%release[i]|float}}" readonly> </td>
{% endfor %}
{% endif %}
</tr>
<tr>
<th> C/C<sub>0</sub> <button type=button class="Info_btn" data-toggle="modal" data-target="#ConcModal">&#9432;</button> </th>
{% if conc[0] == 0 %}
{% for i in range(sysnum) %}
<td> <input name="conc{{i}}" id="conc{{i}}" readonly> </td>
{% endfor %}
{% else %}
{% for i in range(sysnum) %}
<td> <input name="conc{{i}}" id="conc{{i}}" value="{{'%0.4f'%conc[i]|float}}" readonly> </td>
{% endfor %}
{% endif %}
</tr>
</table>
<br> <button type="submit">Calculate</button>
<input name="sysnum" id="sysnum" step="any" value={{sysnum}} type="number" required style="display: none;">
</form>
<!-- Modals -->
<div id="MassModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extraction efficiency</h4>
</div>
<div class="modal-body">
<p><em>Test article mass (g)</em> - Please enter the total mass of the test article being evaluated expressed in grams.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="DensityModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extraction efficiency</h4>
</div>
<div class="modal-body">
<p><em>Test article density (g/cm<sup>3</sup>)</em> - Please enter the (approximate) density of the test article
in grams per cubic centimeter.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="SurfaceModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extraction efficiency</h4>
</div>
<div class="modal-body">
<p><em>Test article surface area (cm<sup>2</sup>)</em> - Please enter the surface area of the test article
in square centimeters.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="SolventModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extraction efficiency</h4>
</div>
<div class="modal-body">
<p><em>Solvent volume (ml)</em> - Please enter the volume of solvent used for each extraction iteration in milliliters.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="IterationModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extraction efficiency</h4>
</div>
<div class="modal-body">
<p><em># of iterations</em> - Please enter the number of iterations used in the extraction study. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="TimeModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extraction efficiency</h4>
</div>
<div class="modal-body">
<p><em>Time per iteration (h)</em> - Please enter the extraction time for each iteration in hours. </p>
<p><em>Note:</em> The extraction efficiency module makes the default assumption that all extraction iterations are equivalent
in duration. However, if this is not the case, the module can still be used, although the input must be modified. Because of
approximate scaling relationships, a single step extraction will be equivalent to an iterative extraction provided the
the total solvent used and total time duration are also equivalent. For example, a three step iterative extraction using 10 ml
for each iteration with time
points of 24, 72, and 168 hours can be modeled using a single step extraction (# of iterations = 1) with 30 ml of solvent
(3 x 10 ml) for 168 hours. This same approach can be used if the solvent volumes are different for each extraction
iteration, however unlikely this scenario may be.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="DiffusionModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extraction efficiency</h4>
</div>
<div class="modal-body">
<p><em>Diffusion coefficient (cm<sup>2</sup>/s)</em> - Please enter a diffusion coefficient in square centimeters per
second. </p>
<p><em>Note:</em> The diffusion coefficient (D) is a material property that reflects the rate at which a compound
can migrate through the matrix - formally it is a proportionality constant relating concentration gradient to flux.
The value of D can vary dramatically depending on the polymer matrix and extractable compound, and even extraction solvent,
for systems that exhibit significant swelling. If you are interested in comparing the extraction efficiency for a specific
compound, we recommend estimating D for the system of interest based on available data. For comparing experimental conditions
for extractable compounds in general, we recommend probing an appropriate range of D for the systems of interest. For example,
compounds in the Mw range of 200 to 1200 g/mol extracted from HDPE have been found to lie in the range of 1e-9 to 1e-13 cm2/s for IPA
and 1e-7 to 1e-9 cm2/s in hexane [1].</p>
<p>[1] P. Turner, et al., Toxicological Sciences 178 (1) (2020) 201–211.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="PartitionModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extraction efficiency</h4>
</div>
<div class="modal-body">
<p><em>Partition coefficient</em> - Please enter a partition coefficient of interest for your system.</p>
<p><em>Note:</em> The partition coefficient (K) is a material property that reflects the ratio of the
concentrations of extractable compound in the polymer matrix and extraction solvent in equilibrium. As such, the value of K can vary
dramatically depending on the extraction materials. If you are interested in comparing the extraction efficiency for a specific
compound, we recommend estimating K for the system of interest based on available data. A number of empirical approaches
have been developed for this purpose, e.g. [1,2]. However, these approaches do not necessarily capture the potential impact
of temperature and matrix swelling, which can both dramatically impact this quantity [3-5]. For comparing experimental conditions
for extractable compounds in general, we recommend probing an appropriate range of K for the systems of interest. We note
that the range of interest will be restricted because large values of K will not permit substantive quantities of a compound to
be extracted over relevant timeframes and for systems with small values of K extraction efficiency will be dictated solely
by kinetic limitations. </p>
<p>[1] M. H. Abraham, et al., Journal of Chromatography A 1037 (1-2) (2004) 29–47. <br>
[2] D. R. Jenke, B. E. Rabinow, PDA Journal of Pharmaceutical Science and Technology 71 (3) (2017) 225–233. <br>
[3] T. P. Gandek, et al., Industrial & Engineering Chemistry Research 28 (7) (1989) 1036–1045. <br>
[4] A. Hauk, et al., European Journal of Pharmaceutical Sciences 163 (2021) 105841. <br>
[5] P. Turner, et al., Toxicological Sciences 178 (1) (2020) 201–211.
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="ReleaseModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extraction efficiency</h4>
</div>
<div class="modal-body">
<p><em>M / M<sub>0</sub> </em> - Predicted extraction efficiency expressed as a ratio of total mass released over the
initial mass (total pool) in the polymer matrix </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="ConcModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Extraction efficiency</h4>
</div>
<div class="modal-body">
<p><em>C / C<sub>0</sub> </em> - Predicted relative solvent concentration expressed as a ratio of extraction solvent concentration
and the initial concentration of the extractable compound in the polymer matrix </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
{% endblock %}
</html>