File size: 5,526 Bytes
e1c192a | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 | import dash
from dash import html, dcc
from dash import dash_table
import pandas as pd
dash.register_page(__name__, path="/", name="Introduction")
# -------------------------------------------------------------
# Summary text of original paper
# -------------------------------------------------------------
paper_summary = """
The Breast Cancer Wisconsin Diagnostic dataset originates from the work of
W. Nick Street, William H. Wolberg, and O. L. Mangasarian (1992). Their study
introduced an automated system for classifying breast tumors using
fine-needle aspirated (FNA) cytology images.
The system extracted quantitative characteristics of cell nuclei — such as radius,
texture, smoothness, concavity, and symmetry — using active contour models
(“snakes”) to trace boundaries of nuclei precisely. With these features, the authors
used linear-programming-based classifiers and achieved cross-validation accuracy
reaching **97%**, marking one of the earliest strong uses of machine learning in
medical diagnosis.
"""
# -------------------------------------------------------------
# Feature table
# -------------------------------------------------------------
feature_table = pd.DataFrame({
"Feature Group": [
"Radius", "Texture", "Perimeter", "Area", "Smoothness",
"Compactness", "Concavity", "Concave Points",
"Symmetry", "Fractal Dimension"
],
"Description": [
"Mean distance from center to perimeter",
"Variation in pixel intensity",
"Boundary length of the nucleus",
"Size of the cell nucleus",
"Local variation in radius",
"Perimeter² / area",
"Severity of concave regions",
"Number of concave contour portions",
"Nuclear symmetry",
"Irregularity of contour"
]
})
# -------------------------------------------------------------
# Component style helpers (consistent with your app theme)
# -------------------------------------------------------------
CARD_STYLE = {
"background": "white",
"padding": "25px",
"borderRadius": "12px",
"boxShadow": "0 4px 12px rgba(0,0,0,0.1)",
"marginBottom": "25px"
}
TITLE_STYLE = {
"fontSize": "26px",
"fontWeight": "600",
"marginBottom": "15px",
"color": "#333"
}
TEXT_STYLE = {
"fontSize": "17px",
"lineHeight": "1.6",
"textAlign": "justify",
"color": "#444"
}
# -------------------------------------------------------------
# Introduction Page Layout
# -------------------------------------------------------------
layout = html.Div(
style={
"maxWidth": "950px",
"margin": "auto",
"padding": "30px"
},
children=[
# -----------------------
# Title card
# -----------------------
html.Div(
style=CARD_STYLE,
children=[
html.H2("Introduction", style=TITLE_STYLE),
html.P(paper_summary, style=TEXT_STYLE)
]
),
# -----------------------
# Image Card
# -----------------------
html.Div(
style=CARD_STYLE,
children=[
html.Img(
src="/assets/celltumor.PNG",
style={
"width": "100%",
"borderRadius": "10px",
"boxShadow": "0 2px 10px rgba(0,0,0,0.15)"
}
),
html.P(
"Figure: Example of cell nuclei boundaries from the original study.",
style={"textAlign": "center", "fontStyle": "italic", "marginTop": "10px"}
)
]
),
# -----------------------
# Dataset info card
# -----------------------
html.Div(
style=CARD_STYLE,
children=[
html.H3("Dataset Overview", style=TITLE_STYLE),
html.P(
"""
The Breast Cancer Wisconsin Diagnostic dataset contains 569 samples
describing malignant and benign tumors. Each sample includes 30 numerical
features derived from nuclear characteristics. The values are computed as:
mean, standard error, and “worst case” (largest) measures.
""",
style=TEXT_STYLE
),
dash_table.DataTable(
data=feature_table.to_dict('records'),
columns=[{"name": col, "id": col} for col in feature_table.columns],
style_cell={
"fontSize": "16px",
"padding": "8px",
"textAlign": "left"
},
style_header={
"backgroundColor": "#fafafa",
"fontWeight": "600",
"fontSize": "17px",
"borderBottom": "1px solid #ddd"
},
style_table={
"marginTop": "20px",
"boxShadow": "0 2px 8px rgba(0,0,0,0.1)",
"borderRadius": "8px",
"overflow": "hidden"
}
)
]
)
]
)
|