Spaces:

KalbeDigitalLab
/

PathologyNucleiClassification

Build error

App Files Files Community

haritsahm

russellotniel commited on May 23, 2023

Commit

2cf7aba

1 Parent(s): d9d6b8b

Reformat Overview (#1)

Browse files

- Added html and css file (7506fcb8a161b8387eac08fae7732472280d51b4)
- Update app.py and made utils folder for color schema (befdaa80f885d2760243028c622d00a3077d8c17)

Co-authored-by: Russell Otniel <[email protected]>

Files changed (4) hide show

app.py +12 -6
index.html +54 -0
style.css +79 -0
utils/page_utils.py +51 -0

app.py CHANGED Viewed

@@ -2,6 +2,8 @@ import torch
 from monai.bundle import ConfigParser
 import gradio as gr
 parser = ConfigParser() #  load configuration files that specify various parameters for running the MONAI workflow.
 parser.read_config(f="configs/inference.json") # read the config from specified JSON file
 parser.read_meta(f="configs/metadata.json") # read the metadata from specified JSON file
@@ -52,19 +54,23 @@ example_files2 = [
     'sample_data/Labels/train_1_3_0020.png'],
 ]
-with open('Description.md','r') as file:
-   markdown_content = file.read()
-with gr.Blocks() as app:
-    gr.Markdown("# Pathology Nuclei Classification")
-    gr.Markdown(markdown_content)
     with gr.Row():
         with gr.Column():
             with gr.Row():
                 inp_img = gr.Image(type="filepath", image_mode="RGB")
                 label_img = gr.Image(type="filepath", image_mode="L")
             with gr.Row():
-                process_btn = gr.Button(value="Process")
                 clear_btn = gr.Button(value="Clear")
         out_txt = gr.Label(label="Probabilities", num_top_classes=4)
     process_btn.click(fn=classify_image, inputs=[inp_img, label_img], outputs=out_txt)

 from monai.bundle import ConfigParser
 import gradio as gr
+from utils import page_utils
 parser = ConfigParser() #  load configuration files that specify various parameters for running the MONAI workflow.
 parser.read_config(f="configs/inference.json") # read the config from specified JSON file
 parser.read_meta(f="configs/metadata.json") # read the metadata from specified JSON file
     'sample_data/Labels/train_1_3_0020.png'],
 ]
+with open('index.html', encoding='utf-8') as file:
+   html_content = file.read()
+with gr.Blocks(theme=gr.themes.Default(primary_hue=page_utils.KALBE_THEME_COLOR, secondary_hue=page_utils.KALBE_THEME_COLOR).set(
+        button_primary_background_fill='*primary_600',
+        button_primary_background_fill_hover='*primary_500',
+        button_primary_text_color='white',
+    )) as app:
+    gr.HTML(html_content)
     with gr.Row():
         with gr.Column():
             with gr.Row():
                 inp_img = gr.Image(type="filepath", image_mode="RGB")
                 label_img = gr.Image(type="filepath", image_mode="L")
             with gr.Row():
                 clear_btn = gr.Button(value="Clear")
+                process_btn = gr.Button(value="Process", variant="primary")
         out_txt = gr.Label(label="Probabilities", num_top_classes=4)
     process_btn.click(fn=classify_image, inputs=[inp_img, label_img], outputs=out_txt)

index.html ADDED Viewed

	@@ -0,0 +1,54 @@

+<!DOCTYPE html>
+<html>
+	<head>
+		<link rel="stylesheet" href="file/style.css" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap" rel="stylesheet" />
+		<title>Pathology Nuclei Classification</title>
+	</head>
+	<body>
+		<div class="container">
+			<h1 class="title">Pathology Nuclei Classification</h1>
+			<h2 class="subtitle">Kalbe Digital Lab</h2>
+			<section class="overview">
+				<div class="grid-container">
+					<h3 class="overview-heading"><span class="vl">Overview</span></h3>
+					<div>
+						<p class="overview-content">Nuclei classification within Haematoxylin & Eosi stained histology images. Classifying nuclei cells as the following types:</p>
+						<ul>
+							<li>Other</li>
+							<li>Inflammatory</li>
+							<li>Epithelial</li>
+							<li>Spindle-Shaped</li>
+						</ul>
+						<p class="overview-content">References: <a href="https://doi.org/10.1016/j.media.2019.101563" target="_blank">https://doi.org/10.1016/j.media.2019.101563</a></p>
+					</div>
+				</div>
+				<div class="grid-container">
+					<h3 class="overview-heading"><span class="vl">Dataset</span></h3>
+					<div>
+						<p class="overview-content">
+							The model is trained with Colorectal Nuclear Segmentation and Phenotypes (CoNSeP) dataset
+							<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.
+						</p>
+						<ul>
+							<li>Target: Nuclei</li>
+							<li>Task: Nuclei Cells Class Classification</li>
+							<li>Modality: Image (RGB)</li>
+						</ul>
+					</div>
+				</div>
+				<div class="grid-container">
+					<h3 class="overview-heading"><span class="vl">Model Architecture</span></h3>
+					<div>
+						<p class="overview-content">The model is trained using DenseNet121 over CoNSep dataset.</p>
+						<img class="content-image" src="file/figures/architecture.png" alt="model-architecture" />
+					</div>
+				</div>
+			</section>
+			<h3 class="overview-heading"><span class="vl">Demo</span></h3>
+			<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>
+		</div>
+	</body>
+</html>

style.css ADDED Viewed

	@@ -0,0 +1,79 @@

+* {
+	box-sizing: border-box;
+}
+body {
+	font-family: 'Source Sans Pro', sans-serif;
+	font-size: 16px;
+}
+.container {
+	width: 100%;
+	margin: 0 auto;
+}
+.title {
+	font-size: 24px !important;
+	font-weight: 600 !important;
+	letter-spacing: 0em;
+	text-align: center;
+	color: #374159 !important;
+}
+.subtitle {
+	font-size: 24px !important;
+	font-style: italic;
+	font-weight: 400 !important;
+	letter-spacing: 0em;
+	text-align: center;
+	color: #1d652a !important;
+	padding-bottom: 0.5em;
+}
+.overview-heading {
+	font-size: 24px !important;
+	font-weight: 600 !important;
+	letter-spacing: 0em;
+	text-align: left;
+}
+.overview-content {
+	font-size: 14px !important;
+	font-weight: 400 !important;
+	line-height: 33px !important;
+	letter-spacing: 0em;
+	text-align: left;
+}
+.content-image {
+	width: 100% !important;
+	height: auto !important;
+}
+.vl {
+	border-left: 5px solid #1d652a;
+	padding-left: 20px;
+	color: #1d652a !important;
+}
+.grid-container {
+	display: grid;
+	grid-template-columns: 1fr 2fr;
+	gap: 20px;
+	align-items: flex-start;
+  margin-bottom: 1em;
+}
+@media screen and (max-width: 768px) {
+	.container {
+		width: 90%;
+	}
+	.grid-container {
+		display: block;
+	}
+	.overview-heading {
+		font-size: 18px !important;
+	}
+}

utils/page_utils.py ADDED Viewed

	@@ -0,0 +1,51 @@

+from typing import Optional
+class ColorPalette:
+    """Color Palette Container."""
+    all = []
+    def __init__(
+        self,
+        c50: str,
+        c100: str,
+        c200: str,
+        c300: str,
+        c400: str,
+        c500: str,
+        c600: str,
+        c700: str,
+        c800: str,
+        c900: str,
+        c950: str,
+        name: Optional[str] = None,
+    ):
+        self.c50 = c50
+        self.c100 = c100
+        self.c200 = c200
+        self.c300 = c300
+        self.c400 = c400
+        self.c500 = c500
+        self.c600 = c600
+        self.c700 = c700
+        self.c800 = c800
+        self.c900 = c900
+        self.c950 = c950
+        self.name = name
+        ColorPalette.all.append(self)
+KALBE_THEME_COLOR = ColorPalette(
+    name='kalbe',
+    c50='#f2f9e8',
+    c100='#dff3c4',
+    c200='#c2e78d',
+    c300='#9fd862',
+    c400='#7fc93f',
+    c500='#3F831C',
+    c600='#31661a',
+    c700='#244c13',
+    c800='#18340c',
+    c900='#0c1b06',
+    c950='#050a02',
+)