File size: 4,137 Bytes
a895f51 ce868ad a895f51 |
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 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>cAItomorph - Interactive Visualizations</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
max-width: 900px;
width: 100%;
background: white;
border-radius: 16px;
padding: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.3);
}
h1 {
font-size: 36px;
color: #1a1a1a;
margin-bottom: 8px;
font-weight: 700;
}
.subtitle {
color: #666;
font-size: 18px;
margin-bottom: 40px;
}
.dataset-grid {
display: grid;
gap: 20px;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.dataset-card {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
border-radius: 12px;
padding: 24px;
text-decoration: none;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
gap: 12px;
border: 2px solid transparent;
}
.dataset-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0,0,0,0.15);
border-color: #667eea;
}
.dataset-icon {
font-size: 48px;
line-height: 1;
}
.dataset-name {
font-size: 22px;
font-weight: 600;
color: #1a1a1a;
}
.dataset-info {
color: #555;
font-size: 14px;
}
.dataset-stats {
display: flex;
gap: 16px;
font-size: 13px;
color: #666;
margin-top: 4px;
}
.stat {
display: flex;
align-items: center;
gap: 4px;
}
.footer {
margin-top: 40px;
text-align: center;
color: #999;
font-size: 14px;
}
.footer a {
color: #667eea;
text-decoration: none;
}
.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="container">
<h1>🩸 cAItomorph</h1>
<p class="subtitle">Interactive Visualizations for Blood Smear Analysis</p>
<div class="dataset-grid">
<!-- cAItomorph test data -->
<a href="/beluga/0000.html" class="dataset-card">
<div class="dataset-name">cAItomorph test data</div>
<div class="dataset-info">Primary training dataset with 8 hematological classes</div>
<div class="dataset-stats">
<div class="stat">
<span>409 patients</span>
</div>
<div class="stat">
<span>8 classes</span>
</div>
</div>
</a>
<!-- AML-Hehr Dataset -->
<a href="/aml-hehr/0000.html" class="dataset-card">
<div class="dataset-name">AML-Hehr</div>
<div class="dataset-info">AML subtype classification with molecular markers</div>
<div class="dataset-stats">
<div class="stat">
<span>189 patients</span>
</div>
<div class="stat">
<span>5 subtypes</span>
</div>
</div>
</a>
<!-- AML-APL Dataset -->
<a href="/aml-apl/0000.html" class="dataset-card">
<div class="dataset-name">AML-APL</div>
<div class="dataset-info">APL vs AML binary classification</div>
<div class="dataset-stats">
<div class="stat">
<span>106 patients</span>
</div>
<div class="stat">
<span>2 classes</span>
</div>
</div>
</a>
</div>
<div class="footer">
<p>Developed at the Institute of AI for Health</p>
<p>For more information, see our <a href="https://arxiv.org/abs/2509.20402" target="_blank">paper</a> and <a href="https://github.com/marrlab/cAItomorph" target="_blank">code</a></p>
</div>
</div>
</body>
</html>
```
|