<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>PARROT - Documentation</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<!--navbar-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">PARROT</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<div class="navbar-nav">
<a class="nav-link" href="index.html">Home</a>
<a class="nav-link" href="documentation.html">Documentation</a>
<a class="nav-link active" href="#">AI models</a>
<a class="nav-link" href="contact.html">Contact</a>
</div>
</div>
</nav>
<button id="topBtn" onclick="topFunction()">↑</button>
<!--main-->
<div class="container mt-5">
<div class="row">
<div class="col-lg-11">
<h1 class="mb-4 mt-4">AI models</h1>
<p>AI models are hosted on HugginFace and can be downloaded directly from the PARROT application. We provide trained segmentation and dose prediction models. See below for model details.</p>
<section class="mt-4">
<div style="display: flex;">
<table class="mt-4 ml-5" id="segTable">
<tr class="header">
<th colspan="2">Segmentation models</th>
</tr>
<tr class="header">
<th>Locations</th>
<th>Architectures</th>
</tr>
</table>
<table class="mt-4 ml-5" id="doseTable">
<tr class="header">
<th colspan="2">Dose prediction models</th>
</tr>
<tr class="header">
<th>Locations</th>
<th>Architectures</th>
</tr>
</table>
</div>
</section>
<section>
<h2>Details</h2>
<section class="mt-4" id="dose-prediction">
<h3>Segmentation models</h3>
<section id="segCards"></section>
<h3>Dose prediction models</h3>
<section id="doseCards"></section>
</section>
</section>
<!-- <section class="mt-4" id="add-your-models">
<h2>Add your models</h2>
</section> -->
</div>
</div>
</div>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="modelData.js"></script>
<script>
function init() {
getModelCard(dataModel.seg,'seg');
getModelCard(dataModel.dose,'dose');
AI_ModelTableCreate(dataModel.seg,'seg');
AI_ModelTableCreate(dataModel.dose,'dose');
AI_ModelCardsCreate(dataModel.seg,'seg');
AI_ModelCardsCreate(dataModel.dose,'dose');
}
//displays the button if the user scrolls 50px at least
function scrollFunction() {
if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { mybutton.style.display = "block";}
else { mybutton.style.display = 'none';}
}
//reset users position on the page
function topFunction() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
function AI_ModelTableCreate(dataSection,id) {
tbl = document.getElementById(id.concat('Table'));
// equalizes both table's length
N_row = Math.max(dataModel.seg.length,dataModel.dose.length);
for (let i = 0; i < N_row; i++) {
const tr = tbl.insertRow();
// creates a filled row
if (i < dataSection.length) {
// data-href contains the id of the model which is linked to it (eg: data-href="#x" will transfer the user to the component with id="x")
tr.setAttribute('class', 'clickable');
tr.setAttribute('data-href','#'.concat(id.concat(i.toString())))
for (let j = 0; j < 2; j++) {
const td = tr.insertCell();
// fills in the cells the data assiociated to it
if (j === 0) {td.appendChild(document.createTextNode(dataSection[i].location));}
else {td.appendChild(document.createTextNode(dataSection[i].architecture));}
}
}
// creates an empty row
else {
for (let j = 0; j < 2; j++) {
const td = tr.insertCell();
td.appendChild(document.createTextNode(""))
}
}
}
}
function AI_ModelCardsCreate(dataSection,id) {
renderSection = document.getElementById(id.concat('Cards'));
// defines et sets attribute for each divs containing the modelcard
for (let i = 0; i < dataSection.length; i++) {
canvas = document.createElement('div');
canvas.setAttribute('class','row')
canvas.style.border = "5px solid rgb(189, 190, 191)";
div = document.createElement('div');
div.setAttribute('id',id.concat(i.toString()))
div.style.padding = "50px";
// adds the structure to the section
canvas.appendChild(div)
renderSection.appendChild(canvas)
}
}
function getModelCard(dataSection,id) {
// gets the url of each model card, that are stocked in "modelData.js"
for(let i = 0; i < dataSection.length; i++) {
var apiUrl = dataSection[i].url
// download the model card and upload it in the created divs in AI_ModelCardsCreate() function
$.ajax({
url: apiUrl,
method: 'GET',
success: function (data) {
$('#'.concat(id.concat(i.toString()))).html(marked(data))
},
error: function (error) {
console.error('Error fetching release information:', error);
}
});
}
}
init()
// triggers
let mybutton = document.getElementById('topBtn');
window.onscroll = function() {scrollFunction()};
$('.clickable').click(function(){
window.location = $(this).data('href');
});
</script>
</body>
</html>