Spaces:

KalbeDigitalLab
/

phbreast-bilateral-view-mammography-classifier

Build error

App Files Files Community

haritsahm

russellotniel commited on May 25, 2023

Commit

1f4f53e

1 Parent(s): 4ae0e32

Reformat Overview (#1)

Browse files

- Created html and css file (47597c7a7692ca3cd91790b5199f82f87dcaa895)
- Updated main.py file and added page_utils.py file to store color schema (ac08f0e02a4adddcee1dbc1ece060ae600749a97)

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

Files changed (4) hide show

index.html +46 -0
main.py +11 -21
style.css +79 -0
utils/page_utils.py +51 -0

index.html ADDED Viewed

	@@ -0,0 +1,46 @@

+<!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>Bilateral View Hypercomplex Breast Classification</title>
+	</head>
+	<body>
+		<div class="container">
+			<h1 class="title">Bilateral View Hypercomplex Breast 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>
+					<p class="overview-content">
+						Breast cancer classification using 2-views (bilateral) that compose a mammography exam, owing to the correlations contained in mammography views, which present crucial information for identifying tumors.
+						<br />
+						Reference: <a href="https://arxiv.org/abs/2204.05798" target="_blank">https://arxiv.org/abs/2204.05798</a>
+					</p>
+				</div>
+				<div class="grid-container">
+					<h3 class="overview-heading"><span class="vl">Dataset</span></h3>
+					<div>
+						<p class="overview-content">The model is trained using CBIS <a href="https://pubmed.ncbi.nlm.nih.gov/22078258/" target="_blank">INBReast Dataset</a></p>
+						<ul>
+							<li>Target: Lesions (masses, calcifications, asymmetries, and distortions)</li>
+							<li>Task: Classification</li>
+							<li>Modality: Grayscale</li>
+						</ul>
+					</div>
+				</div>
+				<div class="grid-container">
+					<h3 class="overview-heading"><span class="vl">Model Architecture</span></h3>
+					<div>
+						<p class="overview-content">Parameterized Hypercomplex ResNets-18 Variants (PHYResNet).</p>
+						<img class="content-image" src="file/figures/phresnet18.png" alt="model-architecture" />
+					</div>
+				</div>
+			</section>
+			<h3 class="overview-heading"><span class="vl">Demo</span></h3>
+			<p class="overview-content">Please select the example below or upload 2 pairs of mammography exam result.</p>
+		</div>
+	</body>
+</html>

main.py CHANGED Viewed

@@ -8,7 +8,7 @@ import torch
 from PIL import Image
 from models import phc_models
-from utils import utils
 device = torch.device('cpu')
 if torch.cuda.is_available():
@@ -193,26 +193,16 @@ def predict_bilateral(cc_file, mlo_file):
 def run():
     """Run Gradio App."""
-    with open('DESCRIPTION.md', encoding='utf-8') as f:
-        description = f.read()
-    with gr.Blocks() as demo:
         with gr.Column():
-            gr.Markdown(
-                """
-                <h1 style="text-align: center;">Bilateral View Hypercomplex Breast Classification</h1>
-                """
-            )
-            with gr.Row():
-                gr.Markdown(description)
-                gr.Markdown(
-                    """
-                    ## Model Architecture
-                    <img src="file/figures/phresnet18.png" width=auto>
-                    Parameterized Hypercomplex ResNets-18 Variants (PHYResNet).
-                    """
-                )
         with gr.Row():
             with gr.Column():
                 cc_file = gr.File(file_count='single',
@@ -220,8 +210,8 @@ def run():
                 mlo_file = gr.File(file_count='single',
                                    file_types=SUPPORTED_IMG_EXT, label='MLO View')
                 with gr.Row():
-                    process_btn = gr.Button('Process')
                     clear_btn = gr.Button('Clear')
             with gr.Column():
                 output_gallery = gr.Gallery(
                     label='Highlighted Area').style(grid=[2], height='auto')

 from PIL import Image
 from models import phc_models
+from utils import utils, page_utils
 device = torch.device('cpu')
 if torch.cuda.is_available():
 def run():
     """Run Gradio App."""
+    with open('index.html', encoding='utf-8') as f:
+        html_content = f.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 demo:
         with gr.Column():
+            gr.HTML(html_content)
         with gr.Row():
             with gr.Column():
                 cc_file = gr.File(file_count='single',
                 mlo_file = gr.File(file_count='single',
                                    file_types=SUPPORTED_IMG_EXT, label='MLO View')
                 with gr.Row():
                     clear_btn = gr.Button('Clear')
+                    process_btn = gr.Button('Process', variant="primary")
             with gr.Column():
                 output_gallery = gr.Gallery(
                     label='Highlighted Area').style(grid=[2], height='auto')

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: 30px !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: 0.7em;
+}
+@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',
+)