Hugging Face's logo

Spaces:
AI4MIRO
/
parrot.ai
Running

App Files Community
5
Barnabiii commited on
Commit
2139cb3
•
1 Parent(s): 13c2158

changed site layout

Browse files
Files changed (5) hide show
  1. ai_models.html +146 -119
  2. contact.html +7 -15
  3. documentation.html +21 -17
  4. index.html +6 -14
  5. style.css +34 -10
ai_models.html CHANGED
@@ -18,152 +18,179 @@
18
  <span class="navbar-toggler-icon"></span>
19
  </button>
20
  <div class="collapse navbar-collapse" id="navbarNav">
21
- <ul class="navbar-nav">
22
- <li class="nav-item">
23
- <a class="nav-link" href="index.html">Home</a>
24
- </li>
25
- <li class="nav-item">
26
- <a class="nav-link" href="documentation.html">Documentation</a>
27
- </li>
28
- <li class="nav-item active">
29
- <a class="nav-link" href="#">AI models</a>
30
- </li>
31
- <li class="nav-item">
32
- <a class="nav-link" href="contact.html">Contact</a>
33
- </li>
34
- </ul>
35
  </div>
36
  </nav>
37
 
 
 
38
  <div class="container mt-5">
39
  <div class="row">
40
- <div class="col-lg-8">
41
  <h1 class="mb-4 mt-4">AI models</h1>
42
 
43
- <section class="mt-4" id="segmentation-models">
44
- <h2>Segmentation models</h2>
45
- <table class="mt-4 ml-5">
46
- <tr class="header">
47
- <th colspan="2">Segmentation models</th>
48
- </tr>
49
- <tr class="header">
50
- <th>Location</th>
51
- <th>Architectures</th>
52
- </tr>
53
- <tr>
54
- <td>H&N nodes</td>
55
- <td>nnUNetv2</td>
56
- </tr>
57
- <tr>
58
- <td>H&N OAR</td>
59
- <td>nnUNetv2</td>
60
- </tr>
61
- <tr>
62
- <td>Prostate OAR</td>
63
- <td>nnUNetv2</td>
64
- </tr>
65
- <tr>
66
- <td>Breast OAR</td>
67
- <td>nnUNetv2</td>
68
- </tr>
69
- <tr>
70
- <td>Brain OAR</td>
71
- <td>nnUNetv2</td>
72
- </tr>
73
- <tr>
74
- <td>Brain Tumor</td>
75
- <td>SwinUNETR</td>
76
- </tr>
77
- <tr>
78
- <td>Esophagus OAR</td>
79
- <td>nnUNetv2</td>
80
- </tr>
81
- <tr class="clickable" data-href="#SwinBs">
82
- <td>Body</td>
83
- <td>SwinUNETR</td>
84
- </tr>
85
- </table>
86
- <div id="SwinBs" class="row" style="border: 5px solid rgb(189, 190, 191)">
87
- <div id="model" style="padding:50px"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
88
  </div>
89
  </section>
90
 
91
- <section class="mt-4" id="dose-prediction">
92
- <h2>Dose prediction models</h2>
93
- <table class="mt-4 ml-5">
94
- <tr>
95
- <th>Location</th>
96
- <th>Architectures</th>
97
- </tr>
98
- <tr>
99
- <td>H&N PT</td>
100
- <td>HDUNet</td>
101
- </tr>
102
- <tr>
103
- <td>H&N VMAT</td>
104
- <td>HDUNet</td>
105
- </tr>
106
- <tr>
107
- <td>Prostate IMRT</td>
108
- <td>HDUNet</td>
109
- </tr>
110
- <tr>
111
- <td>Breast PT</td>
112
- <td>HDUNet</td>
113
- </tr>
114
- <tr>
115
- <td>Esophagus PT</td>
116
- <td>HDUNet</td>
117
- </tr>
118
- <tr>
119
- <td>Esophagus IMRT</td>
120
- <td>HDUNet</td>
121
- </tr>
122
- </table>
123
  </section>
124
 
125
  <section class="mt-4" id="add-your-models">
126
  <h2>Add your models</h2>
127
  </section>
128
  </div>
129
-
130
-
131
- <div class="col-lg-4">
132
- <nav id="right-menu" class="navbar navbar-light bg-light">
133
- <nav class="nav flex-column">
134
- <a class="nav-link" href="#segmentation-models">Segmentation models</a>
135
- <a class="nav-link" href="#dose-prediction">Dose prediction</a>
136
- <a class="nav-link" href="#add-your-models">Add your models</a>
137
- </nav>
138
- </nav>
139
- </div>
140
  </div>
141
  </div>
142
 
143
- <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
144
- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
145
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
146
 
147
  <script>
148
  $(".clickable").click(function(){
149
- window.location = $(this).data("href");
150
  });
151
 
152
  $(document).ready(function () {
153
- var apiUrl = 'https://huggingface.co/AI4MIRO/SwinUNETR_body_segmentation/raw/main/README.md'
154
-
155
- $.ajax({
156
- url: apiUrl,
157
- method: 'GET',
158
- success: function (data) {
159
- console.log("data",data);
160
- $("#model").html(marked(data))
161
- },
162
- error: function (error) {
163
- console.error('Error fetching release information:', error);
164
- }
165
- });
 
 
 
 
 
 
 
 
 
166
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
167
  </script>
168
  </body>
169
  </html>
 
18
  <span class="navbar-toggler-icon"></span>
19
  </button>
20
  <div class="collapse navbar-collapse" id="navbarNav">
21
+ <div class="navbar-nav">
22
+ <a class="nav-link" href="index.html">Home</a>
23
+ <a class="nav-link" href="documentation.html">Documentation</a>
24
+ <a class="nav-link active" href="#">AI models</a>
25
+ <a class="nav-link" href="contact.html">Contact</a>
26
+ </div>
 
 
 
 
 
 
 
 
27
  </div>
28
  </nav>
29
 
30
+ <button id="topBtn" onclick="topFunction()">↑</button>
31
+
32
  <div class="container mt-5">
33
  <div class="row">
34
+ <div class="col-lg-11">
35
  <h1 class="mb-4 mt-4">AI models</h1>
36
 
37
+ <section class="mt-4">
38
+ <div style="display: flex;">
39
+ <table class="mt-4 ml-5" >
40
+ <tr class="header">
41
+ <th colspan="2">Segmentation models</th>
42
+ </tr>
43
+ <tr class="header">
44
+ <th>Location</th>
45
+ <th>Architectures</th>
46
+ </tr>
47
+ <tr class="clickable" data-href="#">
48
+ <td>H&N nodes</td>
49
+ <td>nnUNetv2</td>
50
+ </tr>
51
+ <tr class="clickable" data-href="#">
52
+ <td>H&N OAR</td>
53
+ <td>nnUNetv2</td>
54
+ </tr>
55
+ <tr>
56
+ <td>Prostate OAR</td>
57
+ <td>nnUNetv2</td>
58
+ </tr class="clickable" data-href="#">
59
+ <tr class="clickable" data-href="#">
60
+ <td>Breast OAR</td>
61
+ <td>nnUNetv2</td>
62
+ </tr>
63
+ <tr class="clickable" data-href="#">
64
+ <td>Brain OAR</td>
65
+ <td>nnUNetv2</td>
66
+ </tr>
67
+ <tr class="clickable" data-href="#">
68
+ <td>Brain Tumor</td>
69
+ <td>SwinUNETR</td>
70
+ </tr>
71
+ <tr class="clickable" data-href="#">
72
+ <td>Esophagus OAR</td>
73
+ <td>nnUNetv2</td>
74
+ </tr>
75
+ <tr class="clickable" data-href="#swinBs">
76
+ <td>Body</td>
77
+ <td>SwinUNETR</td>
78
+ <td class="invisible">link</td>
79
+ </tr>
80
+ </table>
81
+ <table class="mt-4 ml-5">
82
+ <tr class="header">
83
+ <th colspan="2">Dose prediction models</th>
84
+ </tr>
85
+ <tr class="header">
86
+ <th>Location</th>
87
+ <th>Architectures</th>
88
+ </tr>
89
+ <tr class="clickable" data-href="#hanPBS">
90
+ <td>H&N PBS</td>
91
+ <td>HDUNet</td>
92
+ </tr>
93
+ <tr class="clickable" data-href="#hanVMAT">
94
+ <td>H&N VMAT</td>
95
+ <td>HDUNet</td>
96
+ </tr>
97
+ <tr class="clickable" data-href="#h">
98
+ <td>Prostate IMRT</td>
99
+ <td>HDUNet</td>
100
+ </tr>
101
+ <tr class="clickable" data-href="#">
102
+ <td>Breast PT</td>
103
+ <td>HDUNet</td>
104
+ </tr>
105
+ <tr class="clickable" data-href="#">
106
+ <td>Esophagus PT</td>
107
+ <td>HDUNet</td>
108
+ </tr>
109
+ <tr class="clickable" data-href="#">
110
+ <td>Esophagus IMRT</td>
111
+ <td>HDUNet</td>
112
+ </tr>
113
+ <tr>
114
+ <td> ‎ </td>
115
+ <td> ‎ </td>
116
+ </tr>
117
+ <tr>
118
+ <td> ‎ </td>
119
+ <td> ‎ </td>
120
+ </tr>
121
+ </table>
122
  </div>
123
  </section>
124
 
125
+ <section>
126
+ <h2>Details</h2>
127
+ <section class="mt-4" id="dose-prediction">
128
+ <h3>Segmentation models</h3>
129
+ <div class="row" style="border: 5px solid rgb(189, 190, 191)">
130
+ <div id="swinBs" style="padding:50px"></div>
131
+ </div>
132
+ <h3>Dose prediction models</h3>
133
+ <div class="row" style="border: 5px solid rgb(189, 190, 191)">
134
+ <div id="hanPBS" style="padding:50px"></div>
135
+ </div>
136
+ <div class="row" style="border: 5px solid rgb(189, 190, 191)">
137
+ <div id="hanVMAT" style="padding:50px"></div>
138
+ </div>
139
+ </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  </section>
141
 
142
  <section class="mt-4" id="add-your-models">
143
  <h2>Add your models</h2>
144
  </section>
145
  </div>
 
 
 
 
 
 
 
 
 
 
 
146
  </div>
147
  </div>
148
 
 
 
149
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
150
 
151
  <script>
152
  $(".clickable").click(function(){
153
+ window.location = $(this).data("href");
154
  });
155
 
156
  $(document).ready(function () {
157
+ var models = [
158
+ ['https://huggingface.co/AI4MIRO/SwinUNETR_body_segmentation/raw/main/README.md','#swinBs'],
159
+ ['https://huggingface.co/AI4MIRO/Dose_prediction_han_vmat/raw/main/README.md','#hanVMAT'],
160
+ ['https://huggingface.co/AI4MIRO/Dose_prediction_han_PBS/raw/main/README.md',"#hanPBS"]
161
+ ]
162
+
163
+ for(let i = 0; i < models.length; i++) {
164
+ var apiUrl = models[i][0]
165
+ console.log(apiUrl)
166
+
167
+ $.ajax({
168
+ url: apiUrl,
169
+ method: 'GET',
170
+ success: function (data) {
171
+ console.log("models",models[i][1]);
172
+ $(models[i][1]).html(marked(data))
173
+ },
174
+ error: function (error) {
175
+ console.error('Error fetching release information:', error);
176
+ }
177
+ });
178
+ }
179
  });
180
+
181
+ let mybutton = document.getElementById("topBtn");
182
+ window.onscroll = function() {scrollFunction()};
183
+
184
+ function scrollFunction() {
185
+ console.log(mybutton.id);
186
+ if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { mybutton.style.display = "block";}
187
+ else { mybutton.style.display = "none";}
188
+ }
189
+
190
+ function topFunction() {
191
+ document.body.scrollTop = 0;
192
+ document.documentElement.scrollTop = 0;
193
+ }
194
  </script>
195
  </body>
196
  </html>
contact.html CHANGED
@@ -16,26 +16,18 @@
16
  <span class="navbar-toggler-icon"></span>
17
  </button>
18
  <div class="collapse navbar-collapse" id="navbarNav">
19
- <ul class="navbar-nav">
20
- <li class="nav-item">
21
- <a class="nav-link" href="index.html">Home</a>
22
- </li>
23
- <li class="nav-item">
24
- <a class="nav-link" href="documentation.html">Documentation</a>
25
- </li>
26
- <li class="nav-item">
27
- <a class="nav-link" href="ai_models.html">AI models</a>
28
- </li>
29
- <li class="nav-item active">
30
- <a class="nav-link" href="#">Contact</a>
31
- </li>
32
- </ul>
33
  </div>
34
  </nav>
35
 
36
  <div class="container mt-5">
37
  <div class="row">
38
- <div class="col-lg-8">
39
  <h1 class="mb-4 mt-4">Contact Us</h1>
40
  <p>If you have any questions or want to share information about your AI model, please use the form below.</p>
41
 
 
16
  <span class="navbar-toggler-icon"></span>
17
  </button>
18
  <div class="collapse navbar-collapse" id="navbarNav">
19
+ <div class="navbar-nav">
20
+ <a class="nav-link" href="index.html">Home</a>
21
+ <a class="nav-link" href="documentation.html">Documentation</a>
22
+ <a class="nav-link" href="ai_models.html">AI models</a>
23
+ <a class="nav-link active" href="#">Contact</a>
24
+ </div>
 
 
 
 
 
 
 
 
25
  </div>
26
  </nav>
27
 
28
  <div class="container mt-5">
29
  <div class="row">
30
+ <div class="col-lg-11">
31
  <h1 class="mb-4 mt-4">Contact Us</h1>
32
  <p>If you have any questions or want to share information about your AI model, please use the form below.</p>
33
 
documentation.html CHANGED
@@ -16,26 +16,20 @@
16
  <span class="navbar-toggler-icon"></span>
17
  </button>
18
  <div class="collapse navbar-collapse" id="navbarNav">
19
- <ul class="navbar-nav">
20
- <li class="nav-item">
21
  <a class="nav-link" href="index.html">Home</a>
22
- </li>
23
- <li class="nav-item active">
24
- <a class="nav-link" href="#">Documentation</a>
25
- </li>
26
- <li class="nav-item">
27
  <a class="nav-link" href="ai_models.html">AI models</a>
28
- </li>
29
- <li class="nav-item">
30
  <a class="nav-link" href="contact.html">Contact</a>
31
- </li>
32
- </ul>
33
  </div>
34
  </nav>
35
 
 
 
36
  <div class="container mt-5">
37
  <div class="row">
38
- <div class="col-lg-8">
39
  <h1 class="mb-4 mt-4">Documentation</h1>
40
 
41
  <section id="installation">
@@ -92,11 +86,6 @@
92
  <div class="col-lg-4">
93
  <nav id="right-menu" class="navbar navbar-light bg-light">
94
  <nav class="nav flex-column">
95
- <a class="nav-link" href="#installation">Installation</a>
96
- <a class="nav-link" href="#study-management">Study Management</a>
97
- <a class="nav-link" href="#ai-models-management">AI Models Management</a>
98
- <a class="nav-link" href="#patient-modeling">Patient Modeling</a>
99
- <a class="nav-link" href="#plan-evaluation">Plan Evaluation</a>
100
  </nav>
101
  </nav>
102
  </div>
@@ -106,6 +95,21 @@
106
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
107
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
108
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
109
 
110
  </body>
111
  </html>
 
16
  <span class="navbar-toggler-icon"></span>
17
  </button>
18
  <div class="collapse navbar-collapse" id="navbarNav">
19
+ <div class="navbar-nav">
 
20
  <a class="nav-link" href="index.html">Home</a>
21
+ <a class="nav-link active" href="#">Documentation</a>
 
 
 
 
22
  <a class="nav-link" href="ai_models.html">AI models</a>
 
 
23
  <a class="nav-link" href="contact.html">Contact</a>
24
+ </div>
 
25
  </div>
26
  </nav>
27
 
28
+ <button id="topBtn" onclick="topFunction()">↑</button>
29
+
30
  <div class="container mt-5">
31
  <div class="row">
32
+ <div class="col-lg-11">
33
  <h1 class="mb-4 mt-4">Documentation</h1>
34
 
35
  <section id="installation">
 
86
  <div class="col-lg-4">
87
  <nav id="right-menu" class="navbar navbar-light bg-light">
88
  <nav class="nav flex-column">
 
 
 
 
 
89
  </nav>
90
  </nav>
91
  </div>
 
95
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
96
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
97
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
98
+ <script>
99
+ let mybutton = document.getElementById("topBtn");
100
+ window.onscroll = function() {scrollFunction()};
101
+
102
+ function scrollFunction() {
103
+ console.log(mybutton.id);
104
+ if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) { mybutton.style.display = "block";}
105
+ else { mybutton.style.display = "none";}
106
+ }
107
+
108
+ function topFunction() {
109
+ document.body.scrollTop = 0;
110
+ document.documentElement.scrollTop = 0;
111
+ }
112
+ </script>
113
 
114
  </body>
115
  </html>
index.html CHANGED
@@ -17,20 +17,12 @@
17
  <span class="navbar-toggler-icon"></span>
18
  </button>
19
  <div class="collapse navbar-collapse" id="navbarNav">
20
- <ul class="navbar-nav">
21
- <li class="nav-item active">
22
- <a class="nav-link" href="#">Home</a>
23
- </li>
24
- <li class="nav-item">
25
- <a class="nav-link" href="documentation.html">Documentation</a>
26
- </li>
27
- <li class="nav-item">
28
- <a class="nav-link" href="ai_models.html">AI models</a>
29
- </li>
30
- <li class="nav-item">
31
- <a class="nav-link" href="contact.html">Contact</a>
32
- </li>
33
- </ul>
34
  </div>
35
  </nav>
36
 
 
17
  <span class="navbar-toggler-icon"></span>
18
  </button>
19
  <div class="collapse navbar-collapse" id="navbarNav">
20
+ <div class="navbar-nav">
21
+ <a class="nav-link active" href="#">Home</a>
22
+ <a class="nav-link" href="documentation.html">Documentation</a>
23
+ <a class="nav-link" href="ai_models.html">AI models</a>
24
+ <a class="nav-link" href="contact.html">Contact</a>
25
+ </div>
 
 
 
 
 
 
 
 
26
  </div>
27
  </nav>
28
 
style.css CHANGED
@@ -1,3 +1,7 @@
 
 
 
 
1
  body {
2
  padding: 2rem;
3
  font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
@@ -19,7 +23,7 @@ td, th {
19
  border-bottom: 1px solid rgb(107, 114, 128);
20
  border-right: 1px solid rgb(107, 114, 128);
21
  font-size: large;
22
- padding: 10px 50px;
23
  }
24
 
25
  tr {
@@ -27,22 +31,42 @@ tr {
27
  transition: 0.2s;
28
  }
29
 
30
- tr:hover:not(.header) {
31
  background-color: rgb(180, 180, 180);
32
  }
33
 
34
  table {
35
  border: 3px solid rgb(250, 250, 251);
 
36
  }
37
 
38
- .card {
39
- max-width: 620px;
40
- margin: 0 auto;
41
- padding: 16px;
42
- border: 1px solid lightgray;
43
- border-radius: 16px;
 
 
 
 
 
 
 
 
 
 
44
  }
45
 
46
- .card p:last-child {
47
- margin-bottom: 0;
 
48
  }
 
 
 
 
 
 
 
 
 
1
+ html{
2
+ scroll-behavior:smooth
3
+ }
4
+
5
  body {
6
  padding: 2rem;
7
  font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
23
  border-bottom: 1px solid rgb(107, 114, 128);
24
  border-right: 1px solid rgb(107, 114, 128);
25
  font-size: large;
26
+ padding: 10px 10px;
27
  }
28
 
29
  tr {
 
31
  transition: 0.2s;
32
  }
33
 
34
+ tr.clickable:hover {
35
  background-color: rgb(180, 180, 180);
36
  }
37
 
38
  table {
39
  border: 3px solid rgb(250, 250, 251);
40
+ width: 500px;
41
  }
42
 
43
+ #topBtn {
44
+ display: none;
45
+ position: fixed;
46
+ bottom: 20px;
47
+ right: 30px;
48
+ z-index: 99;
49
+ font-size: 24px;
50
+ border: none;
51
+ outline: none;
52
+ background-color: rgb(44, 46, 74);
53
+ color: rgb(180, 180, 180);
54
+ cursor: pointer;
55
+ padding: 15px;
56
+ border-radius: 4px;
57
+ box-shadow: 2px 2px 5px black;
58
+ transition: 0.2s;
59
  }
60
 
61
+ #topBtn:hover {
62
+ background-color: rgb(34, 36, 64);
63
+ color: rgb(170, 170, 170);
64
  }
65
+
66
+ #SwinBs {
67
+ scroll-behavior: smooth;
68
+ }
69
+
70
+ .invisible {
71
+ display: none;
72
+ }