File size: 7,207 Bytes
83098c2
 
 
 
 
 
756bbfb
 
41bc27a
83098c2
 
 
 
f7d1e0c
83098c2
 
 
 
 
 
 
2139cb3
 
 
 
 
 
83098c2
 
 
2139cb3
 
f7d1e0c
83098c2
 
2139cb3
83098c2
24d75fd
2139cb3
69b0464
 
 
2139cb3
 
 
 
69b0464
2139cb3
 
 
69b0464
2139cb3
 
 
 
69b0464
2139cb3
 
 
756bbfb
83098c2
 
2139cb3
 
 
69b0464
 
 
2139cb3
69b0464
 
2139cb3
83098c2
 
24d75fd
83098c2
24d75fd
83098c2
 
 
 
 
69b0464
756bbfb
f7d1e0c
 
 
 
 
 
 
 
 
 
 
 
69b0464
 
a6eb861
69b0464
 
f7d1e0c
69b0464
 
 
 
 
 
a6eb861
69b0464
f7d1e0c
 
 
 
69b0464
f7d1e0c
 
69b0464
f7d1e0c
a6eb861
69b0464
f7d1e0c
69b0464
 
f7d1e0c
 
69b0464
 
 
 
f7d1e0c
 
69b0464
0948115
69b0464
 
0948115
69b0464
 
 
2139cb3
69b0464
a6eb861
69b0464
f7d1e0c
69b0464
 
 
 
 
 
 
 
f7d1e0c
 
69b0464
 
 
 
 
 
f7d1e0c
69b0464
 
2139cb3
f7d1e0c
2139cb3
 
 
 
69b0464
2139cb3
 
 
 
 
 
69b0464
7800104
 
f7d1e0c
 
a6eb861
2139cb3
 
a6eb861
 
69b0464
756bbfb
83098c2
69b0464
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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!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>