Spaces:

KalbeDigitalLab
/

pathology_nuclei_segmentation_classification

Running

App Files Files Community

haritsahm

russellotniel commited on May 17, 2023

Commit

15c4bc8

•

1 Parent(s): bcf4644

Reformat Overview (#3)

Browse files

- reformat overview by adding html and css file, updated app.py file and added utils folder for color schema (9acc5c121244f4bf98b81393e8fb6a45c210ab71)

Co-authored-by: Russell Otniel <russellotniel@users.noreply.huggingface.co>

Files changed (4) hide show

app.py +10 -4
index.html +47 -0
style.css +71 -0
utils/page_utils.py +51 -0

app.py CHANGED Viewed

@@ -7,6 +7,8 @@ import numpy as np
 import torch
 from monai.bundle import ConfigParser
 with open("configs/inference.json") as f:
     inference_config = json.load(f)
@@ -85,15 +87,19 @@ def query_image(img):
     return result
 # load Markdown file
-with open('Description.md','r') as file:
-   markdown_content = file.read()
 demo = gr.Interface(
     query_image,
     inputs=[gr.Image(type="filepath")],
     outputs="image",
-    title="Medical Image Classification with MONAI - Pathology Nuclei Segmentation Classification",
-    description = markdown_content,
     examples=example_files,
 )

 import torch
 from monai.bundle import ConfigParser
+from utils import page_utils
 with open("configs/inference.json") as f:
     inference_config = json.load(f)
     return result
 # load Markdown file
+with open('index.html', encoding='utf-8') as f:
+    html_content = f.read()
 demo = gr.Interface(
     query_image,
     inputs=[gr.Image(type="filepath")],
     outputs="image",
+    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",
+    ),
+    description = html_content,
     examples=example_files,
 )

index.html ADDED Viewed

	@@ -0,0 +1,47 @@

+<!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>Medical Image Classification with MONAI - Pathology Nuclei Segmentation Classification</title>
+	</head>
+	<body>
+		<div class="container">
+			<h1 class="title">Medical Image Classification with MONAI - Pathology Nuclei Segmentation 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 class="overview-content">
+						<p>
+							A simultaneous segmentation of nuclei within multitissue histology images. <br />
+							References: <a href="https://arxiv.org/abs/1812.06499" target="_blank">https://arxiv.org/abs/1812.06499</a>
+						</p>
+					</div>
+				</div>
+				<div class="grid-container">
+					<h3 class="overview-heading"><span class="vl">Dataset</span></h3>
+					<div class="overview-content">
+						<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>
+						<ul>
+							<li>Target: Nuclei</li>
+							<li>Task: Instance Segmentation</li>
+							<li>Modality: RGB images</li>
+						</ul>
+					</div>
+				</div>
+				<div class="grid-container">
+					<h3 class="overview-heading"><span class="vl">Model Architecture</span></h3>
+					<div class="overview-content">
+						<p>Overview approach for simultaneous nuclear instance segmentation.</p>
+						<img class="content-image" src="file/figures/OverviewNucleiSegmentationClassification.jpg" 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 histology image to see nuclei segmentation capabilities of this model</p>
+		</div>
+	</body>
+</html>

style.css ADDED Viewed

	@@ -0,0 +1,71 @@

+* {
+	box-sizing: border-box;
+}
+body {
+	font-family: 'Source Sans Pro', sans-serif;
+	font-size: 16px;
+}
+.container {
+	width: 80%;
+	margin: 0 auto;
+}
+.title {
+	font-size: 40px !important;
+	font-weight: 600 !important;
+	line-height: 50px !important;
+	letter-spacing: 0em;
+	text-align: center;
+	color: #374159 !important;
+}
+.subtitle {
+	font-size: 2em !important;
+	font-style: italic;
+	font-weight: 400 !important;
+	line-height: 40px !important;
+	letter-spacing: 0em;
+	text-align: center;
+	color: #1d652a !important;
+}
+.overview-heading {
+	font-size: 2em !important;
+	font-weight: 600 !important;
+	line-height: 40px !important;
+	letter-spacing: 0em;
+	text-align: left;
+}
+.overview-content {
+	font-size: 22px !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;
+}
+@media screen and (max-width: 768px) {
+	.grid-container {
+		display: block;
+	}
+}

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',
+)