ISBI2023_PfirrmannGrading/index.html at main · imedslab/ISBI2023_PfirrmannGrading · GitHub

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
<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Narasimharao Kowlagi">
    <meta name="generator" content="Hugo 0.104.2">
    <title>Lumbar Spine Pfirrmann Grading</title>
    <link rel="canonical" href="https://getbootstrap.com/docs/5.2/examples/offcanvas-navbar/">


    <!-- Latest compiled and minified CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

    <!-- Favicons -->
    <meta name="theme-color" content="#712cf9">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .b-example-divider {
            height: 3rem;
            background-color: rgba(0, 0, 0, .1);
            border: solid rgba(0, 0, 0, .15);
            border-width: 1px 0;
            box-shadow: inset 0 .5em 1.5em rgba(0, 0, 0, .1), inset 0 .125em .5em rgba(0, 0, 0, .15);
        }

        .b-example-vr {
            flex-shrink: 0;
            width: 1.5rem;
            height: 100vh;
        }

        .bi {
            vertical-align: -.125em;
            fill: currentColor;
        }

        .nav-scroller {
            position: relative;
            z-index: 2;
            height: 2.75rem;
            overflow-y: hidden;
        }

        .nav-scroller .nav {
            display: flex;
            flex-wrap: nowrap;
            padding-bottom: 1rem;
            margin-top: -1px;
            overflow-x: auto;
            text-align: center;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
        }
    </style>


    <!-- Custom styles for this template -->
    <link href="offcanvas.css" rel="stylesheet">
</head>
<body class="bg-light">

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
    <div class="container-fluid">
        <a class="navbar-brand" href="#"></a>
        <button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse"
                aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="navbar-collapse offcanvas-collapse" id="navbarsExampleDefault">
            <ul class="navbar-nav mx-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link" aria-current="page" href="#">Paper</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://github.com/Oulu-IMEDS/PfirrmannGrading">Code</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="mailto: narasimharao.kowlagi@oulu.fi?subject=Query: Lumbar Spine Grading with Pfirrmann scale">Contact</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

<main class="container">
    <div class="d-flex align-items-center p-3 my-3 text-white-50 bg-primary rounded box-shadow">
        <div class="lh-100">
            <h3 style="text-align:center" class="mb-0 text-white lh-100">A STRONGER BASELINE FOR AUTOMATIC PFIRRMANN
                GRADING OF LUMBAR SPINE MRI<br>USING DEEP LEARNING</h3>
            <strong style="text-align:center" class="d-block text-gray-dark">Narasimharao Kowlagi, Huy Hoang Nguyen,
                Terence McSweeney, Simo Saarakkala, Juhani Määttä, Jaro Karppinen, Aleksei Tiulpin</strong>
        </div>
    </div>

    <div class="my-3 p-3 bg-body rounded shadow-sm">
        <h4 class="border-bottom pb-2 mb-0">Abstract</h4>
        <div class="d-flex text-muted pt-3">
            <p class="pb-3 mb-0 medium lh-sm border-bottom">
                This paper addresses the challenge of grading visual features in lumbar spine MRI using Deep Learning.
                Such a method is essential for automatic quantification of structural changes in the spine, which is
                valuable for understanding low back pain. Multiple recent studies investigated different architecture
                designs, and the most recent success has been attributed to the use of transformer architectures. In
                this work, we argue that with a well-tuned three-stage pipeline comprising semantic segmentation,
                localization, and classification, convolutional networks outperform the state-of-the-art approaches. We
                conducted an ablation study of the existing methods in a population cohort, and report performance
                generalization across various subgroups. Our codes is publicly available to advance research on disc
                degeneration and low back pain.
            </p>
        </div>
    </div>

    <div class="my-3 p-3 bg-body rounded shadow-sm">
        <div class="text-center">
        <img src="images/Pipeline_1.png" class="img-fluid" alt="Pipeline" style="width:90%">
        </div>
    </div>

     <div class="my-3 p-3 bg-body rounded shadow-sm">
        <h4 class="pb-2 mb-0">Results</h4>
        <div class="row">
           <div class="row">
            <div class="column">
                <div class="row">
                    <img src="images/Settings.png" style="width:50%">
                    <img src="images/Benchmarks.png" style="width:50%">
                </div>
            </div>
            </div>
            <div class="column">
                <img src="images/Radars.png" style="width:100%">
            </div>
        </div>
    </div>

    <div class="my-3 p-3 bg-body rounded shadow-sm">
        <h4 class="pb-2 mb-0">Demo</h4>
        <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item spinedemo" src="media/Demo.mp4" allowfullscreen=""></iframe>
        </div>
    </div>


</main>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<script src="offcanvas.js"></script>
</body>
</html>