Hugging Face's logo

Spaces:
KalbeDigitalLab
/
IDEFICS2-8B-MedicalVQA
Runtime error

App Files Community
dafajudin commited on
Commit
47ad331
·
1 Parent(s): 7995d71

first commit

Browse files
Files changed (2) hide show
  1. index.html +133 -0
  2. style.css +79 -0
index.html ADDED
@@ -0,0 +1,133 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Visual Question Answering (VQA) for Medical Imaging</title>
9
+ <style>
10
+ * {
11
+ box-sizing: border-box;
12
+ }
13
+
14
+ body {
15
+ font-family: 'Source Sans Pro', sans-serif;
16
+ font-size: 16px;
17
+ }
18
+
19
+ .container {
20
+ width: 100%;
21
+ margin: 0 auto;
22
+ }
23
+
24
+ .title {
25
+ font-size: 24px !important;
26
+ font-weight: 600 !important;
27
+ letter-spacing: 0em;
28
+ text-align: center;
29
+ color: #374159 !important;
30
+ }
31
+
32
+ .subtitle {
33
+ font-size: 24px !important;
34
+ font-style: italic;
35
+ font-weight: 400 !important;
36
+ letter-spacing: 0em;
37
+ text-align: center;
38
+ color: #1d652a !important;
39
+ padding-bottom: 0.5em;
40
+ }
41
+
42
+ .overview-heading {
43
+ font-size: 24px !important;
44
+ font-weight: 600 !important;
45
+ letter-spacing: 0em;
46
+ text-align: left;
47
+ }
48
+
49
+ .overview-content {
50
+ font-size: 14px !important;
51
+ font-weight: 400 !important;
52
+ line-height: 33px !important;
53
+ letter-spacing: 0em;
54
+ text-align: left;
55
+ }
56
+
57
+ .content-image {
58
+ width: 100% !important;
59
+ height: auto !important;
60
+ }
61
+
62
+ .vl {
63
+ border-left: 5px solid #1d652a;
64
+ padding-left: 20px;
65
+ color: #1d652a !important;
66
+ }
67
+
68
+ .grid-container {
69
+ display: grid;
70
+ grid-template-columns: 1fr 2fr;
71
+ gap: 20px;
72
+ align-items: flex-start;
73
+ margin-bottom: 1em;
74
+ }
75
+
76
+ @media screen and (max-width: 768px) {
77
+ .container {
78
+ width: 90%;
79
+ }
80
+
81
+ .grid-container {
82
+ display: block;
83
+ }
84
+
85
+ .overview-heading {
86
+ font-size: 18px !important;
87
+ }
88
+ }
89
+ </style>
90
+ </head>
91
+ <body>
92
+ <div class="container">
93
+ <h1 class="title">Visual Question Answering (VQA) for Medical Imaging</h1>
94
+ <h2 class="subtitle">Kalbe Digital Lab</h2>
95
+ <section class="overview">
96
+ <div class="grid-container">
97
+ <h3 class="overview-heading"><span class="vl">Overview</span></h3>
98
+ <div>
99
+ <p class="overview-content">
100
+ The project addresses the challenge of accurate and efficient medical imaging analysis in healthcare, aiming to reduce human error and workload for radiologists.
101
+ The proposed solution involves developing advanced AI models for Visual Question Answering (VQA) to assist healthcare professionals in analyzing medical images quickly and accurately.
102
+ These models will be integrated into a user-friendly web application, providing a practical tool for real-world healthcare settings.
103
+ </p>
104
+ <p class="overview-content">References: <a href="https://www.sciencedirect.com/science/article/abs/pii/S0933365723001252" target="_blank">https://www.sciencedirect.com/science/article/abs/pii/S0933365723001252</a></p>
105
+ </div>
106
+ </div>
107
+ <div class="grid-container">
108
+ <h3 class="overview-heading"><span class="vl">Dataset</span></h3>
109
+ <div>
110
+ <p class="overview-content">
111
+ The model is trained with Colorectal Nuclear Segmentation and Phenotypes (CoNSeP) dataset
112
+ <a href="https://warwick.ac.uk/fac/cross_fac/tia/data/hovernet" target="_blank">https://warwick.ac.uk/fac/cross_fac/tia/data/hovernet</a>. Images were extracted from 16 colorectal adenocarcinoma (CRA) WSIs.
113
+ </p>
114
+ <ul>
115
+ <li>Target: Nuclei</li>
116
+ <li>Task: Classification</li>
117
+ <li>Modality: Images (Histology and Label) </li>
118
+ </ul>
119
+ </div>
120
+ </div>
121
+ <div class="grid-container">
122
+ <h3 class="overview-heading"><span class="vl">Model Architecture</span></h3>
123
+ <div>
124
+ <p class="overview-content">The model is trained using DenseNet121 over CoNSep dataset.</p>
125
+ <img class="content-image" src="img/Model-Architecture.png" alt="model-architecture" />
126
+ </div>
127
+ </div>
128
+ </section>
129
+ <h3 class="overview-heading"><span class="vl">Demo</span></h3>
130
+ <p class="overview-content">Please select or upload a nuclei histology image and label image to see Nuclei Cells Classification capabilities of this model</p>
131
+ </div>
132
+ </body>
133
+ </html>
style.css ADDED
@@ -0,0 +1,79 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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: 33px !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: 1em;
65
+ }
66
+
67
+ @media screen and (max-width: 768px) {
68
+ .container {
69
+ width: 90%;
70
+ }
71
+
72
+ .grid-container {
73
+ display: block;
74
+ }
75
+
76
+ .overview-heading {
77
+ font-size: 18px !important;
78
+ }
79
+ }