Jason Adrian commited on
Commit
70a8ae4
·
1 Parent(s): 727fc3c

add index.html and other resources

Browse files
figures/Original-ResNet-18-Architecture.png ADDED
figures/ResNet-18.png ADDED
figures/resnet-residual-block-for-resnet18-from-scratch-using-pytorch.png ADDED
figures/resnet18-basic-blocks-1.png ADDED
index.html ADDED
@@ -0,0 +1,50 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <link rel="stylesheet" href="file/style.css" />
5
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
6
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
7
+ <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet" />
8
+ <title><strong>Body Part Classification</strong></title>
9
+ </head>
10
+ <body>
11
+ <div class="container">
12
+ <h1 class="title"><strong> Body Part Classification</strong></h1>
13
+ <h2 class="subtitle"><strong>Kalbe Digital Lab</strong></h2>
14
+ <section class="overview">
15
+ <div class="grid-container">
16
+ <h3 class="overview-heading"><span class="vl">Overview</span></h3>
17
+ <p class="overview-content">
18
+ The Body Part Classification program serves the critical purpose of categorizing body parts from DICOM x-ray scans into five distinct classes: abdominal, adult chest, pediatric chest, spine, and others. This program trained using ResNet18 model.
19
+ </p>
20
+ </div>
21
+ <div class="grid-container">
22
+ <h3 class="overview-heading"><span class="vl">Dataset</span></h3>
23
+ <div>
24
+ <p class="overview-content">
25
+ The program has been meticulously trained on a robust and diverse dataset, specifically <a href="https://vindr.ai/datasets/bodypartxr" target="_blank">VinDrBodyPartXR Dataset.</a>.
26
+ <br/>
27
+ This dataset is introduced by Vingroup of Big Data Institute which include 16,093 x-ray images that are collected and manually annotated. It is a highly valuable resource that has been instrumental in the training of our model.
28
+ </p>
29
+ <ul>
30
+ <li>Objective: Body Part Identification</li>
31
+ <li>Task: Classification</li>
32
+ <li>Modality: Grayscale Images</li>
33
+ </ul>
34
+ </div>
35
+ </div>
36
+ <div class="grid-container">
37
+ <h3 class="overview-heading"><span class="vl">Model Architecture</span></h3>
38
+ <div>
39
+ <p class="overview-content">
40
+ The model architecture of ResNet18 to train x-ray images for classifying body part.
41
+ </p>
42
+ <img class="content-image" src="file/figures/ResNet-18.png" alt="model-architecture" width="425" height="115" style="vertical-align:middle" />
43
+ </div>
44
+ </div>
45
+ </section>
46
+ <h3 class="overview-heading"><span class="vl">Demo</span></h3>
47
+ <p class="overview-content">Please select or upload a body part x-ray scan image to see the capabilities of body part classification with this model</p>
48
+ </div>
49
+ </body>
50
+ </html>
style.css ADDED
@@ -0,0 +1,83 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ * {
2
+ box-sizing: border-box;
3
+ }
4
+
5
+ body {
6
+ font-family: 'Source Sans Pro', sans-serif;
7
+ font-size: 16px;
8
+ }
9
+
10
+ .container {
11
+ width: 100%;
12
+ margin: 0 auto;
13
+ }
14
+
15
+ .title {
16
+ font-size: 24px !important;
17
+ font-weight: 600 !important;
18
+ letter-spacing: 0em;
19
+ text-align: center;
20
+ color: #374159 !important;
21
+ }
22
+
23
+ .subtitle {
24
+ font-size: 24px !important;
25
+ font-style: italic;
26
+ font-weight: 400 !important;
27
+ letter-spacing: 0em;
28
+ text-align: center;
29
+ color: #1d652a !important;
30
+ padding-bottom: 0.5em;
31
+ }
32
+
33
+ .overview-heading {
34
+ font-size: 24px !important;
35
+ font-weight: 600 !important;
36
+ letter-spacing: 0em;
37
+ text-align: left;
38
+ }
39
+
40
+ .overview-content {
41
+ font-size: 14px !important;
42
+ font-weight: 400 !important;
43
+ line-height: 30px !important;
44
+ letter-spacing: 0em;
45
+ text-align: left;
46
+ }
47
+
48
+ .content-image {
49
+ width: 100% !important;
50
+ height: auto !important;
51
+ }
52
+
53
+ .vl {
54
+ border-left: 5px solid #1d652a;
55
+ padding-left: 20px;
56
+ color: #1d652a !important;
57
+ }
58
+
59
+ .grid-container {
60
+ display: grid;
61
+ grid-template-columns: 1fr 2fr;
62
+ gap: 20px;
63
+ align-items: flex-start;
64
+ margin-bottom: 0.7em;
65
+ }
66
+
67
+ .grid-container:nth-child(2) {
68
+ align-items: center;
69
+ }
70
+
71
+ @media screen and (max-width: 768px) {
72
+ .container {
73
+ width: 90%;
74
+ }
75
+
76
+ .grid-container {
77
+ display: block;
78
+ }
79
+
80
+ .overview-heading {
81
+ font-size: 18px !important;
82
+ }
83
+ }