automatization of the page

ai_models.html

@@ -35,89 +35,25 @@
             <h1 class="mb-4 mt-4">AI models</h1>
 
             <section class="mt-4">
-                <div style="display: flex;">    
-                    <table class="mt-4 ml-5" >
+                <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>Location</th>
+                            <th>Locations</th>
                             <th>Architectures</th>
                         </tr>
-                        <tr class="clickable" data-href="#">
-                            <td>H&N nodes</td>
-                            <td>nnUNetv2</td>
-                        </tr>
-                        <tr class="clickable" data-href="#">
-                            <td>H&N OAR</td>
-                            <td>nnUNetv2</td>
-                        </tr>
-                        <tr>
-                            <td>Prostate OAR</td>
-                            <td>nnUNetv2</td>
-                        </tr class="clickable" data-href="#">
-                        <tr class="clickable" data-href="#">
-                            <td>Breast OAR</td>
-                            <td>nnUNetv2</td>
-                        </tr>
-                        <tr class="clickable" data-href="#">
-                            <td>Brain OAR</td>
-                            <td>nnUNetv2</td>
-                        </tr>
-                        <tr class="clickable" data-href="#">
-                            <td>Brain Tumor</td>
-                            <td>SwinUNETR</td>
-                        </tr>
-                        <tr class="clickable" data-href="#">
-                            <td>Esophagus OAR</td>
-                            <td>nnUNetv2</td>
-                        </tr>
-                        <tr class="clickable" data-href="#swinBs">
-                            <td>Body</td>
-                            <td>SwinUNETR</td>
-                            <td class="invisible">link</td>
-                        </tr>
                     </table>
-                    <table class="mt-4 ml-5">
+                    <table class="mt-4 ml-5" id="doseTable">
                         <tr class="header">
                             <th colspan="2">Dose prediction models</th>
                         </tr>
                         <tr class="header">
-                            <th>Location</th>
+                            <th>Locations</th>
                             <th>Architectures</th>
                         </tr>
-                        <tr class="clickable" data-href="#hanPBS">
-                            <td>H&N PBS</td>
-                            <td>HDUNet</td>
-                        </tr>
-                        <tr class="clickable" data-href="#hanVMAT">
-                            <td>H&N VMAT</td>
-                            <td>HDUNet</td>
-                        </tr>
-                        <tr class="clickable" data-href="#h">
-                            <td>Prostate IMRT</td>
-                            <td>HDUNet</td>
-                        </tr>
-                        <tr class="clickable" data-href="#">
-                            <td>Breast PT</td>
-                            <td>HDUNet</td>
-                        </tr>
-                        <tr class="clickable" data-href="#">
-                            <td>Esophagus PT</td>
-                            <td>HDUNet</td>
-                        </tr>
-                        <tr class="clickable" data-href="#">
-                            <td>Esophagus IMRT</td>
-                            <td>HDUNet</td>
-                        </tr>
-                        <tr>
-                            <td> ‎ </td>
-                            <td> ‎ </td>
-                        </tr>
-                        <tr>
-                            <td> ‎ </td>
-                            <td> ‎ </td>
-                        </tr>
                     </table>
                 </div>
             </section>
@@ -125,17 +61,12 @@
             <section>
                 <h2>Details</h2>
                 <section class="mt-4" id="dose-prediction">
-                    <h3>Segmentation models</h3>
-                    <div class="row" style="border: 5px solid rgb(189, 190, 191)">
-                        <div id="swinBs" style="padding:50px"></div>
-                    </div>  
+                    <h3>Segmentation models</h3> 
+                    <section id="segCards"></section>
+
                     <h3>Dose prediction models</h3>
-                    <div class="row" style="border: 5px solid rgb(189, 190, 191)">
-                        <div id="hanPBS" style="padding:50px"></div>
-                    </div>  
-                    <div class="row" style="border: 5px solid rgb(189, 190, 191)">
-                        <div id="hanVMAT" style="padding:50px"></div>
-                    </div>  
+                    <section id="doseCards"></section>
+                    
                 </section>
             </section>
 
@@ -147,50 +78,90 @@
 </div>
 
 <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
-
+<script src="modelData.js"></script>
 <script>
-    $(".clickable").click(function(){
-        window.location = $(this).data("href");
-    });
+    function scrollFunction() {
+        console.log(mybutton.id);
+        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { mybutton.style.display = "block";} 
+        else { mybutton.style.display = "none";}
+    }
+
+    function topFunction() {
+        document.body.scrollTop = 0;
+        document.documentElement.scrollTop = 0;
+    }
+
+    function AI_ModelTableCreate(dataSection,id) {
+        tbl = document.getElementById(id.concat("Table"));
+        N_iterations = Math.max(dataModel.seg.length,dataModel.dose.length);
+
+        for (let i = 0; i < N_iterations; i++) {
+            const tr = tbl.insertRow();
+            if (i < dataSection.length) {
+                tr.setAttribute("class", "clickable");
+                tr.setAttribute('data-href','#'.concat(id.concat(i.toString())))
+                for (let j = 0; j < 2; j++) {
+                    const td = tr.insertCell();
 
-    $(document).ready(function () {
-        var models = [
-            ['https://huggingface.co/AI4MIRO/SwinUNETR_body_segmentation/raw/main/README.md','#swinBs'],
-            ['https://huggingface.co/AI4MIRO/Dose_prediction_han_vmat/raw/main/README.md','#hanVMAT'],
-            ['https://huggingface.co/AI4MIRO/Dose_prediction_han_PBS/raw/main/README.md',"#hanPBS"]  
-        ]
+                    if (j === 0) {td.appendChild(document.createTextNode(dataSection[i].location));}
+                    else {td.appendChild(document.createTextNode(dataSection[i].architecture));}
+                }
+            }
+            else {
+                const td = tr.insertCell();       
+                td.appendChild(document.createTextNode("‎"))
+            }
+        }
+    }
 
-        for(let i = 0; i < models.length; i++) {
-            var apiUrl = models[i][0]
-            console.log(apiUrl)
+    function AI_ModelCardsCreate(dataSection,id) {
+        renderSection = document.getElementById(id.concat("Cards"));
+        
+        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";
+
+            canvas.appendChild(div)
+            renderSection.appendChild(canvas)
+        }
+    }
+
+    function getModelCard(dataSection,id) {
+        for(let i = 0; i < dataSection.length; i++) {
+            var apiUrl = dataSection[i].url
             
             $.ajax({
                 url: apiUrl,
                 method: 'GET',
                 success: function (data) {
-                    console.log("models",models[i][1]);
-                    $(models[i][1]).html(marked(data))
+                    $('#'.concat(id.concat(i.toString()))).html(marked(data))
                 },
                 error: function (error) {
                     console.error('Error fetching release information:', error);
                 }
             });
         }
-    });
-
+    }
     let mybutton = document.getElementById("topBtn");
     window.onscroll = function() {scrollFunction()};
 
-    function scrollFunction() {
-        console.log(mybutton.id);
-        if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { mybutton.style.display = "block";} 
-        else                                                                           { mybutton.style.display = "none";}
-    }
+    getModelCard(dataModel.seg,'seg');
+    getModelCard(dataModel.dose,'dose');
 
-    function topFunction() {
-    document.body.scrollTop = 0;
-    document.documentElement.scrollTop = 0;
-    }
+    AI_ModelTableCreate(dataModel.seg,'seg');
+    AI_ModelTableCreate(dataModel.dose,'dose');
+
+    AI_ModelCardsCreate(dataModel.seg,'seg');
+    AI_ModelCardsCreate(dataModel.dose,'dose');
+
+    $(".clickable").click(function(){
+        window.location = $(this).data("href");
+    });
 </script>
 </body>
-</html>
+</html>

modelData.js

@@ -0,0 +1,22 @@
+var dataModel = {
+    "seg": [
+        {
+            "location":"Body",
+            "architecture":"SwinUNETR",
+            "url":"https://huggingface.co/AI4MIRO/SwinUNETR_body_segmentation/raw/main/README.md"
+        }
+    ],
+
+    "dose": [
+        {
+            "location":"H&N PBS",
+            "architecture":"HDUNet",
+            "url":"https://huggingface.co/AI4MIRO/Dose_prediction_han_PBS/raw/main/README.md"
+        },
+        {
+            "location":"H&N VMAT",
+            "architecture":"HDUNet",
+            "url":"https://huggingface.co/AI4MIRO/Dose_prediction_han_vmat/raw/main/README.md"
+        }
+    ]
+}

style.css

@@ -33,6 +33,7 @@ tr {
 
 tr.clickable:hover {
 	background-color: rgb(180, 180, 180);	
+	cursor: pointer;
 }
 
 table {
@@ -65,8 +66,4 @@ table {
 
 #SwinBs {
 	scroll-behavior: smooth;
-  }
-
-.invisible {
-	display: none;
-}
+  }