<View>
|
<!-- Template sourced from awesome-label-studio-config repository: https://github.com/humanSignal/awesome-label-studio-config/tree/main/label-configs/breast-cancer-mammogram-classification -->
|
|
<Style>
|
.mammogram-container {
|
padding: var(--spacing-600);
|
box-shadow: 0 2px 8px rgba(var(--color-neutral-shadow-raw) / 0.15);
|
border-radius: var(--corner-radius-medium);
|
margin-bottom: var(--spacing-800);
|
}
|
|
.mammogram-grid {
|
display: grid;
|
grid-template-columns: 1fr 1fr;
|
grid-template-rows: 1fr 1fr;
|
grid-template-areas:
|
'left-cc right-cc'
|
'left-mlo right-mlo';
|
gap: var(--spacing-600);
|
margin: var(--spacing-600) 0;
|
max-width: 1000px;
|
margin-left: auto;
|
margin-right: auto;
|
}
|
|
.mammogram-view {
|
text-align: center;
|
border: 2px solid var(--color-neutral-border);
|
border-radius: var(--corner-radius-medium);
|
padding: var(--spacing-500);
|
background: var(--color-neutral-background);
|
transition: border-color 0.3s ease;
|
min-height: 480px;
|
display: flex;
|
flex-direction: column;
|
}
|
|
.mammogram-view:hover {
|
border-color: var(--color-primary-border-subtle);
|
}
|
|
.left-cc { grid-area: left-cc; }
|
.right-cc { grid-area: right-cc; }
|
.left-mlo { grid-area: left-mlo; }
|
.right-mlo { grid-area: right-mlo; }
|
|
.mammogram-image {
|
width: 100%;
|
height: 400px;
|
object-fit: contain;
|
border-radius: var(--corner-radius-small);
|
background: var(--color-neutral-background);
|
}
|
|
.view-header {
|
font-size: var(--font-size-16);
|
font-weight: var(--font-weight-semibold);
|
color: var(--color-neutral-content);
|
margin-bottom: var(--spacing-300);
|
padding: var(--spacing-200) var(--spacing-300);
|
background: var(--color-neutral-surface);
|
border: 1px solid var(--color-neutral-border-subtle);
|
border-radius: var(--corner-radius-small);
|
text-align: center;
|
}
|
|
.instructions {
|
background: var(--color-primary-background);
|
padding: var(--spacing-500);
|
border-radius: var(--corner-radius-medium);
|
border-left: 4px solid var(--color-primary-border);
|
margin-bottom: var(--spacing-600);
|
line-height: var(--line-height-body-medium);
|
}
|
|
.instructions-header {
|
font-size: var(--font-size-16);
|
margin-bottom: var(--spacing-400);
|
line-height: var(--line-height-body-medium);
|
color: var(--color-neutral-content);
|
}
|
|
.birads-legend {
|
background: var(--color-warning-background);
|
color: var(--color-warning-content);
|
padding: var(--spacing-400);
|
border-radius: var(--corner-radius-small);
|
border: 1px solid var(--color-warning-border-subtler);
|
margin-top: var(--spacing-400);
|
font-size: var(--font-size-14);
|
line-height: var(--line-height-body-small);
|
}
|
|
.classification-section {
|
background: var(--color-neutral-background);
|
color: var(--color-neutral-content);
|
padding: var(--spacing-600);
|
border-radius: var(--corner-radius-medium);
|
box-shadow: 0 2px 4px rgba(var(--color-neutral-shadow-raw) / 0.1);
|
margin: var(--spacing-500) 0;
|
border: 1px solid var(--color-neutral-border-subtle);
|
}
|
</Style>
|
|
<!-- Header for context -->
|
<Header value="Breast Cancer Mammogram Classification" style="text-align: center; font-size: var(--font-size-24); color: var(--color-neutral-content); margin-bottom: var(--spacing-500);" />
|
|
<!-- Instructions -->
|
<View className="instructions">
|
<Header value="Please review the standard mammographic views (CC and MLO) of both breasts. Compare corresponding views (e.g., L-CC with R-CC). Label each breast individually, and report any findings." style="font-size: 16px; margin-bottom: 10px; height:auto;" />
|
<View className="birads-legend">
|
<Text name="birads_legend" value="BI-RADS: 0 = Incomplete, 1 = Negative, 2 = Benign, 3 = Probably Benign, 4 = Suspicious, 5 = Highly Suggestive of Malignancy, 6 = Known Cancer" />
|
</View>
|
</View>
|
|
<!-- Mammogram Views Grid -->
|
<View className="mammogram-container">
|
<View className="mammogram-grid">
|
<!-- Left CC -->
|
<View className="mammogram-view left-cc">
|
<Header value="Left CC" className="view-header" />
|
<Image name="left_cc" value="$img1" className="mammogram-image" />
|
</View>
|
|
<!-- Right CC -->
|
<View className="mammogram-view right-cc">
|
<Header value="Right CC" className="view-header" />
|
<Image name="right_cc" value="$img3" className="mammogram-image" />
|
</View>
|
|
<!-- Left MLO -->
|
<View className="mammogram-view left-mlo">
|
<Header value="Left MLO" className="view-header" />
|
<Image name="left_mlo" value="$img2" className="mammogram-image" />
|
</View>
|
|
<!-- Right MLO -->
|
<View className="mammogram-view right-mlo">
|
<Header value="Right MLO" className="view-header" />
|
<Image name="right_mlo" value="$img4" className="mammogram-image" />
|
</View>
|
</View>
|
</View>
|
|
<!-- Left Breast Classification -->
|
<View className="classification-section">
|
<Header value="Left Breast: BI-RADS Classification" style="font-size: var(--font-size-20); color: var(--color-neutral-content); margin-bottom: var(--spacing-400);" />
|
<Choices name="birads_left" toName="left_cc,right_cc,left_mlo,right_mlo" choice="single" required="true">
|
<Choice value="0 - Incomplete" />
|
<Choice value="1 - Negative" />
|
<Choice value="2 - Benign" />
|
<Choice value="3 - Probably Benign" />
|
<Choice value="4 - Suspicious Abnormality" />
|
<Choice value="5 - Highly Suggestive of Malignancy" />
|
<Choice value="6 - Known Biopsy-Proven Malignancy" />
|
</Choices>
|
|
<Header value="Left Breast: Density" style="font-size: var(--font-size-16); color: var(--color-neutral-content-subtle); margin: var(--spacing-500) 0 var(--spacing-200) 0;" />
|
<Choices name="density_left" toName="left_cc,right_cc,left_mlo,right_mlo" choice="single">
|
<Choice value="A - Almost entirely fatty" />
|
<Choice value="B - Scattered fibroglandular densities" />
|
<Choice value="C - Heterogeneously dense" />
|
<Choice value="D - Extremely dense" />
|
</Choices>
|
|
<Header value="Left Breast: Findings (Optional)" style="font-size: var(--font-size-16); color: var(--color-neutral-content-subtle); margin: var(--spacing-500) 0 var(--spacing-200) 0;" />
|
<Choices name="findings_left" toName="left_cc,right_cc,left_mlo,right_mlo" choice="multiple">
|
<Choice value="Mass" />
|
<Choice value="Calcifications" />
|
<Choice value="Architectural Distortion" />
|
<Choice value="Asymmetry" />
|
<Choice value="Skin/Nipple Retraction" />
|
</Choices>
|
</View>
|
|
<!-- Right Breast Classification -->
|
<View className="classification-section">
|
<Header value="Right Breast: BI-RADS Classification" style="font-size: var(--font-size-20); color: var(--color-neutral-content); margin-bottom: var(--spacing-400);" />
|
<Choices name="birads_right" toName="left_cc,right_cc,left_mlo,right_mlo" choice="single" required="true">
|
<Choice value="0 - Incomplete" />
|
<Choice value="1 - Negative" />
|
<Choice value="2 - Benign" />
|
<Choice value="3 - Probably Benign" />
|
<Choice value="4 - Suspicious Abnormality" />
|
<Choice value="5 - Highly Suggestive of Malignancy" />
|
<Choice value="6 - Known Biopsy-Proven Malignancy" />
|
</Choices>
|
|
<Header value="Right Breast: Density" style="font-size: var(--font-size-16); color: var(--color-neutral-content-subtle); margin: var(--spacing-500) 0 var(--spacing-200) 0;" />
|
<Choices name="density_right" toName="left_cc,right_cc,left_mlo,right_mlo" choice="single">
|
<Choice value="A - Almost entirely fatty" />
|
<Choice value="B - Scattered fibroglandular densities" />
|
<Choice value="C - Heterogeneously dense" />
|
<Choice value="D - Extremely dense" />
|
</Choices>
|
|
<Header value="Right Breast: Findings (Optional)" style="font-size: var(--font-size-16); color: var(--color-neutral-content-subtle); margin: var(--spacing-500) 0 var(--spacing-200) 0;" />
|
<Choices name="findings_right" toName="left_cc,right_cc,left_mlo,right_mlo" choice="multiple">
|
<Choice value="Mass" />
|
<Choice value="Calcifications" />
|
<Choice value="Architectural Distortion" />
|
<Choice value="Asymmetry" />
|
<Choice value="Skin/Nipple Retraction" />
|
</Choices>
|
</View>
|
|
<!-- Additional Observations -->
|
<View className="classification-section">
|
<Header value="Additional Observations / Notes (Optional)" style="font-size: var(--font-size-20); color: var(--color-neutral-content); margin-bottom: var(--spacing-400);" />
|
<TextArea
|
name="notes"
|
toName="left_cc,right_cc,left_mlo,right_mlo"
|
rows="5"
|
placeholder="Describe any notable findings, technical issues, or comparison to prior exams."
|
style="width: 100%; padding: var(--spacing-300); border: 2px solid var(--color-neutral-border); border-radius: var(--corner-radius-small); font-size: var(--font-size-14); background: var(--color-neutral-background); color: var(--color-neutral-content);"
|
/>
|
</View>
|
</View>
|
|
<!-- {
|
"data": {
|
"img1": "https://raw.githubusercontent.com/HumanSignal/awesome-label-studio-configs/refs/heads/main/label-configs/breast-cancer-mammogram-classification/assets/l-cc.png",
|
"img2": "https://raw.githubusercontent.com/HumanSignal/awesome-label-studio-configs/refs/heads/main/label-configs/breast-cancer-mammogram-classification/assets/r-cc.png",
|
"img3": "https://raw.githubusercontent.com/HumanSignal/awesome-label-studio-configs/refs/heads/main/label-configs/breast-cancer-mammogram-classification/assets/l-mlo.png",
|
"img4": "https://raw.githubusercontent.com/HumanSignal/awesome-label-studio-configs/refs/heads/main/label-configs/breast-cancer-mammogram-classification/assets/r-mlo.png"
|
}
|
}
|
-->
|
