Hugging Face's logo

Spaces:
KalbeDigitalLab
/
medsam-segment-anything
Running

App Files Community
haritsahm commited on
Commit
9db4a7b
·
1 Parent(s): 48bf1ef

Fix display info with html

Browse files
Files changed (3) hide show
  1. app.py +8 -4
  2. index.html +123 -49
  3. style.css +0 -79
app.py CHANGED
@@ -2,6 +2,7 @@ import streamlit as st
2
 
3
  st.set_page_config(layout="wide")
4
 
 
5
  import random
6
 
7
  import numpy as np
@@ -10,6 +11,11 @@ from PIL import Image
10
  from streamlit_drawable_canvas import st_canvas
11
  from utils import utils
12
 
 
 
 
 
 
13
  PREDICTOR_MODEL, AUTOMASK_MODEL = utils.get_model(checkpoint='checkpoint/medsam_vit_b.pth')
14
 
15
 
@@ -252,11 +258,9 @@ def image_preprocess_callback(predictor_model, option):
252
  def main():
253
  with open('index.html', encoding='utf-8') as f:
254
  html_content = f.read()
 
255
 
256
- st.markdown(html_content, unsafe_allow_html=True)
257
- st.markdown('### Model Architecture')
258
- st.image('figures/medsam.png', caption="Segment Anything - MedSAM", width=600)
259
- st.markdown('### Demo')
260
 
261
  with st.container():
262
  col1, col2, col3, col4 = st.columns(4)
 
2
 
3
  st.set_page_config(layout="wide")
4
 
5
+ import base64
6
  import random
7
 
8
  import numpy as np
 
11
  from streamlit_drawable_canvas import st_canvas
12
  from utils import utils
13
 
14
+ DEFAULT_IMG_TAG = '<img class="content-image" src="" alt="model-architecture">'
15
+ with open("figures/medsam.png", "rb") as image_file:
16
+ encoded_string = base64.b64encode(image_file.read()).decode('utf-8')
17
+ IMAGE_TAG_BASE64 = f'<img class="content-image" src="data:image/png;base64,{encoded_string}" alt="model-architecture">'
18
+
19
  PREDICTOR_MODEL, AUTOMASK_MODEL = utils.get_model(checkpoint='checkpoint/medsam_vit_b.pth')
20
 
21
 
 
258
  def main():
259
  with open('index.html', encoding='utf-8') as f:
260
  html_content = f.read()
261
+ html_content = html_content.replace(DEFAULT_IMG_TAG, IMAGE_TAG_BASE64)
262
 
263
+ st.components.v1.html(html_content, width=None, height=925, scrolling=False)
 
 
 
264
 
265
  with st.container():
266
  col1, col2, col3, col4 = st.columns(4)
index.html CHANGED
@@ -1,54 +1,128 @@
1
  <!DOCTYPE html>
2
  <html>
 
 
 
 
 
3
 
4
- <head>
5
- <link rel="stylesheet" href="file/style.css" />
6
- <link rel="preconnect" href="https://fonts.googleapis.com" />
7
- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
8
- <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
9
- rel="stylesheet" />
10
- <title>Bilateral View Hypercomplex Breast Classification</title>
11
- </head>
12
-
13
- <body>
14
- <div class="container">
15
- <h1 class="title">MedSAM: Segment Anything in Medical Images</h1>
16
- <h2 class="subtitle">Kalbe Digital Lab</h2>
17
- <section class="overview">
18
- <div class="grid-container">
19
- <h3 class="overview-heading"><span class="vl">Overview</span></h3>
20
- <p class="overview-content">
21
- MedSAM, a foundation model for universal medical image segmentation. MedSAM is adapted from the SAM
22
- model on an unprecedented scale, with more than one million medical image-mask pairs.
23
- <br />
24
- Reference: <a href="https://arxiv.org/abs/2304.12306"
25
- target="_blank">https://arxiv.org/abs/2204.05798</a>
26
- </p>
27
- </div>
28
- <div class="grid-container">
29
- <h3 class="overview-heading"><span class="vl">Dataset</span></h3>
30
- <div>
31
- <p class="overview-content">The model is trained using a diverse and large-scale medical image
32
- segmentation dataset with 1,090,486 medical image-mask pairs, covering 15 imaging modalities,
33
- over 30 cancer types, and a multitude of imaging protocols.</p>
34
- <ul>
35
- <li>Target: Capturing a broad spectrum of anatomies and lesions across different modalities.
36
- </li>
37
- <li>Task: Segmentation</li>
38
- <li>Modality: Computed Tomography (CT), Magnetic Resonance Imaging (MRI), Endoscopy, Ultrasound,
39
- Pathology, Fundus, Dermoscopy, Mammography, and Optical Coherence Tomography (OCT).</li>
40
- </ul>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
41
  </div>
42
- </div>
43
- <!-- <div class="grid-container">
44
- <h3 class="overview-heading"><span class="vl">Model Architecture</span></h3>
45
- <div>
46
- <p class="overview-content">Segment Anything (MedSAM).</p>
47
- <img class="content-image" src="./figures/medsam.png" alt="model-architecture" />
 
 
 
 
48
  </div>
49
- </div>
50
- </section>
51
- </div>
52
- </body>
53
-
54
- </html>
 
 
 
 
 
 
 
1
  <!DOCTYPE html>
2
  <html>
3
+ <head>
4
+ <style type="text/css">
5
+ * {
6
+ box-sizing: border-box;
7
+ }
8
 
9
+ .body {
10
+ font-family: 'Source Sans Pro', sans-serif;
11
+ font-size: 16px;
12
+ }
13
+
14
+ .container {
15
+ width: 100%;
16
+ margin: 0 auto;
17
+ }
18
+
19
+ .title {
20
+ font-size: 24px !important;
21
+ font-weight: 600 !important;
22
+ font-family: 'Source Sans Pro', sans-serif;
23
+ letter-spacing: 0em;
24
+ text-align: center;
25
+ color: #374159 !important;
26
+ }
27
+
28
+ .subtitle {
29
+ font-size: 24px !important;
30
+ font-style: italic;
31
+ font-weight: 400 !important;
32
+ font-family: 'Source Sans Pro', sans-serif;
33
+ letter-spacing: 0em;
34
+ text-align: center;
35
+ color: #1d652a !important;
36
+ padding-bottom: 0.5em;
37
+ }
38
+
39
+ .overview-heading {
40
+ font-size: 24px !important;
41
+ font-weight: 600 !important;
42
+ font-family: 'Source Sans Pro', sans-serif;
43
+ letter-spacing: 0em;
44
+ text-align: left;
45
+ }
46
+
47
+ .overview-content {
48
+ font-size: 14px !important;
49
+ font-weight: 400 !important;
50
+ font-family: 'Source Sans Pro', sans-serif;
51
+ line-height: 30px !important;
52
+ letter-spacing: 0em;
53
+ text-align: left;
54
+ }
55
+
56
+ .content-image {
57
+ width: 100% !important;
58
+ height: auto !important;
59
+ }
60
+
61
+ .vl {
62
+ border-left: 5px solid #1d652a;
63
+ padding-left: 20px;
64
+ color: #1d652a !important;
65
+ }
66
+
67
+ .grid-container {
68
+ display: grid;
69
+ grid-template-columns: 1fr 2fr;
70
+ gap: 20px;
71
+ align-items: flex-start;
72
+ margin-bottom: 0.7em;
73
+ }
74
+
75
+ @media screen and (max-width: 768px) {
76
+ .container {
77
+ width: 90%;
78
+ }
79
+
80
+ .grid-container {
81
+ display: block;
82
+ }
83
+
84
+ .overview-heading {
85
+ font-size: 18px !important;
86
+ }
87
+ }
88
+ </style>
89
+ <link rel="preconnect" href="https://fonts.googleapis.com" />
90
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
91
+ <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet" />
92
+ </head>
93
+ <body>
94
+ <div class="container">
95
+ <h1 class="title">MedSAM: Segment Anything in Medical Images</h1>
96
+ <h2 class="subtitle">Kalbe Digital Lab</h2>
97
+ <section class="overview">
98
+ <div class="grid-container">
99
+ <h3 class="overview-heading"><span class="vl">Overview</span></h3>
100
+ <p class="overview-content">
101
+ MedSAM, a foundation model for universal medical image segmentation. MedSAM is adapted from the SAM model on an unprecedented scale, with more than one million medical image-mask pairs.
102
+ <br />
103
+ Reference: <a href="https://arxiv.org/abs/2304.12306" target="_blank">https://arxiv.org/abs/2204.05798</a>
104
+ </p>
105
  </div>
106
+ <div class="grid-container">
107
+ <h3 class="overview-heading"><span class="vl">Dataset</span></h3>
108
+ <div>
109
+ <p class="overview-content">The model is trained using a diverse and large-scale medical image segmentation dataset with 1,090,486 medical image-mask pairs, covering 15 imaging modalities, over 30 cancer types, and a multitude of imaging protocols.</p>
110
+ <ul class="overview-content">
111
+ <li>Target: Capturing a broad spectrum of anatomies and lesions across different modalities.</li>
112
+ <li>Task: Segmentation</li>
113
+ <li>Modality: Computed Tomography (CT), Magnetic Resonance Imaging (MRI), Endoscopy, Ultrasound, Pathology, Fundus, Dermoscopy, Mammography, and Optical Coherence Tomography (OCT).</li>
114
+ </ul>
115
+ </div>
116
  </div>
117
+ <div class="grid-container">
118
+ <h3 class="overview-heading"><span class="vl">Model Architecture</span></h3>
119
+ <div>
120
+ <p class="overview-content">Segment Anything - MedSAM</p>
121
+ <img class="content-image" src="" alt="model-architecture">
122
+ </div>
123
+ </div>
124
+ </section>
125
+ <h3 class="overview-heading"><span class="vl">Demo</span></h3>
126
+ </div>
127
+ </body>
128
+ </html>
style.css DELETED
@@ -1,79 +0,0 @@
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
- @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
- }