Hugging Face's logo

Spaces:
KalbeDigitalLab
/
pathology_nuclei_segmentation_classification
Runtime error

App Files Community
4
russellotniel commited on
Commit
9acc5c1
·
1 Parent(s): bcf4644

reformat overview by adding html and css file, updated app.py file and added utils folder for color schema

Browse files
Files changed (4) hide show
  1. app.py +10 -4
  2. index.html +47 -0
  3. style.css +71 -0
  4. utils/page_utils.py +51 -0
app.py CHANGED
@@ -7,6 +7,8 @@ import numpy as np
7
  import torch
8
  from monai.bundle import ConfigParser
9
 
 
 
10
  with open("configs/inference.json") as f:
11
  inference_config = json.load(f)
12
 
@@ -85,15 +87,19 @@ def query_image(img):
85
  return result
86
 
87
  # load Markdown file
88
- with open('Description.md','r') as file:
89
- markdown_content = file.read()
90
 
91
  demo = gr.Interface(
92
  query_image,
93
  inputs=[gr.Image(type="filepath")],
94
  outputs="image",
95
- title="Medical Image Classification with MONAI - Pathology Nuclei Segmentation Classification",
96
- description = markdown_content,
 
 
 
 
97
  examples=example_files,
98
  )
99
 
 
7
  import torch
8
  from monai.bundle import ConfigParser
9
 
10
+ from utils import page_utils
11
+
12
  with open("configs/inference.json") as f:
13
  inference_config = json.load(f)
14
 
 
87
  return result
88
 
89
  # load Markdown file
90
+ with open('index.html', encoding='utf-8') as f:
91
+ html_content = f.read()
92
 
93
  demo = gr.Interface(
94
  query_image,
95
  inputs=[gr.Image(type="filepath")],
96
  outputs="image",
97
+ theme=gr.themes.Default(primary_hue=page_utils.KALBE_THEME_COLOR, secondary_hue=page_utils.KALBE_THEME_COLOR).set(
98
+ button_primary_background_fill="*primary_600",
99
+ button_primary_background_fill_hover="*primary_500",
100
+ button_primary_text_color="white",
101
+ ),
102
+ description = html_content,
103
  examples=example_files,
104
  )
105
 
index.html ADDED
@@ -0,0 +1,47 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Medical Image Classification with MONAI - Pathology Nuclei Segmentation Classification</title>
9
+ </head>
10
+ <body>
11
+ <div class="container">
12
+ <h1 class="title">Medical Image Classification with MONAI - Pathology Nuclei Segmentation Classification</h1>
13
+ <h2 class="subtitle">Kalbe Digital Lab</h2>
14
+ <section class="overview">
15
+ <div class="grid-container">
16
+ <h3 class="overview-heading"><span class="vl">Overview</span></h3>
17
+ <div class="overview-content">
18
+ <p>
19
+ A simultaneous segmentation of nuclei within multitissue histology images. <br />
20
+ References: <a href="https://arxiv.org/abs/1812.06499" target="_blank">https://arxiv.org/abs/1812.06499</a>
21
+ </p>
22
+ </div>
23
+ </div>
24
+ <div class="grid-container">
25
+ <h3 class="overview-heading"><span class="vl">Dataset</span></h3>
26
+ <div class="overview-content">
27
+ <p>The model is trained with multi-tissue histology images based on <a href="https://warwick.ac.uk/fac/cross_fac/tia/data/hovernet/" target="_blank">CoNSeP dataset.</a></p>
28
+ <ul>
29
+ <li>Target: Nuclei</li>
30
+ <li>Task: Instance Segmentation</li>
31
+ <li>Modality: RGB images</li>
32
+ </ul>
33
+ </div>
34
+ </div>
35
+ <div class="grid-container">
36
+ <h3 class="overview-heading"><span class="vl">Model Architecture</span></h3>
37
+ <div class="overview-content">
38
+ <p>Overview approach for simultaneous nuclear instance segmentation.</p>
39
+ <img class="content-image" src="file/figures/OverviewNucleiSegmentationClassification.jpg" alt="model-architecture" />
40
+ </div>
41
+ </div>
42
+ </section>
43
+ <h3 class="overview-heading"><span class="vl">Demo</span></h3>
44
+ <p class="overview-content">Please select or upload a histology image to see nuclei segmentation capabilities of this model</p>
45
+ </div>
46
+ </body>
47
+ </html>
style.css ADDED
@@ -0,0 +1,71 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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: 80%;
12
+ margin: 0 auto;
13
+ }
14
+
15
+ .title {
16
+ font-size: 40px !important;
17
+ font-weight: 600 !important;
18
+ line-height: 50px !important;
19
+ letter-spacing: 0em;
20
+ text-align: center;
21
+ color: #374159 !important;
22
+ }
23
+
24
+ .subtitle {
25
+ font-size: 2em !important;
26
+ font-style: italic;
27
+ font-weight: 400 !important;
28
+ line-height: 40px !important;
29
+ letter-spacing: 0em;
30
+ text-align: center;
31
+ color: #1d652a !important;
32
+ }
33
+
34
+ .overview-heading {
35
+ font-size: 2em !important;
36
+ font-weight: 600 !important;
37
+ line-height: 40px !important;
38
+ letter-spacing: 0em;
39
+ text-align: left;
40
+ }
41
+
42
+ .overview-content {
43
+ font-size: 22px !important;
44
+ font-weight: 400 !important;
45
+ line-height: 33px !important;
46
+ letter-spacing: 0em;
47
+ text-align: left;
48
+ }
49
+
50
+ .content-image {
51
+ width: 100% !important;
52
+ height: auto !important;
53
+ }
54
+
55
+ .vl {
56
+ border-left: 5px solid #1d652a;
57
+ padding-left: 20px;
58
+ color: #1d652a !important;
59
+ }
60
+
61
+ .grid-container {
62
+ display: grid;
63
+ grid-template-columns: 1fr 2fr;
64
+ gap: 20px;
65
+ }
66
+
67
+ @media screen and (max-width: 768px) {
68
+ .grid-container {
69
+ display: block;
70
+ }
71
+ }
utils/page_utils.py ADDED
@@ -0,0 +1,51 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ from typing import Optional
2
+
3
+
4
+ class ColorPalette:
5
+ """Color Palette Container."""
6
+ all = []
7
+
8
+ def __init__(
9
+ self,
10
+ c50: str,
11
+ c100: str,
12
+ c200: str,
13
+ c300: str,
14
+ c400: str,
15
+ c500: str,
16
+ c600: str,
17
+ c700: str,
18
+ c800: str,
19
+ c900: str,
20
+ c950: str,
21
+ name: Optional[str] = None,
22
+ ):
23
+ self.c50 = c50
24
+ self.c100 = c100
25
+ self.c200 = c200
26
+ self.c300 = c300
27
+ self.c400 = c400
28
+ self.c500 = c500
29
+ self.c600 = c600
30
+ self.c700 = c700
31
+ self.c800 = c800
32
+ self.c900 = c900
33
+ self.c950 = c950
34
+ self.name = name
35
+ ColorPalette.all.append(self)
36
+
37
+
38
+ KALBE_THEME_COLOR = ColorPalette(
39
+ name='kalbe',
40
+ c50='#f2f9e8',
41
+ c100='#dff3c4',
42
+ c200='#c2e78d',
43
+ c300='#9fd862',
44
+ c400='#7fc93f',
45
+ c500='#3F831C',
46
+ c600='#31661a',
47
+ c700='#244c13',
48
+ c800='#18340c',
49
+ c900='#0c1b06',
50
+ c950='#050a02',
51
+ )