Spaces:
Running
Running
| <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> | |
| <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 { | |
| 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> |