Spaces:
Running
Running
File size: 22,156 Bytes
ad05511 |
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 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SarcoMonitor - 智能肌少症识别系统</title>
<link rel="icon" type="image/png" href="/static/muscle_icon.png">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<!-- VT323 字体 -->
<link href="https://fonts.googleapis.com/css2?family=VT323&display=swap" rel="stylesheet">
<!-- MathJax -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script>
window.MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']],
displayMath: [['$$', '$$'], ['\\[', '\\]']]
}
};
</script>
<!-- 自定义CSS -->
<link href="/static/style.css" rel="stylesheet">
</head>
<body style="background-color: #E4F4F4;">
<!-- 导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark" style="background-color: #E4F4F4; padding: 10px 0 0 0; margin-bottom: 0;">
<div class="container">
<!-- 居中的图标和标题 -->
<div class="w-100 d-flex flex-column align-items-center">
<img src="/static/pixel_handshake.png" width="200" style="vertical-align: middle; margin-bottom: -10px; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;" alt="SarcoMonitor">
<div class="pixel-game-title">SarcoMonitor</div>
</div>
<!-- 移除右上角语言切换按钮 -->
</div>
</nav>
<!-- 主容器 -->
<div class="container" style="margin-top: 10px; margin-bottom: 3rem;">
<!-- 阶段1：快速评估 -->
<div id="quickAssessmentSection">
<div class="row mb-4">
<div class="col-12">
<div class="card shadow-sm">
<div class="card-body text-center">
<h2 class="card-title text-success mb-3">
<span class="lang-zh">SarcoMonitor：智能肌少症识别系统</span>
<span class="lang-en">SarcoMonitor: Intelligent Sarcopenia Detection System</span>
</h2>
<p class="card-text lead">
<span class="lang-zh">基于机器学习技术检测I类及II类肌少症患者</span>
<span class="lang-en">Machine Learning-Based Detection of Type I and Type II Sarcopenia Patients</span>
</p>
<div class="alert alert-warning mb-3">
<i class="fas fa-exclamation-triangle me-2"></i>
<strong>
<span class="lang-zh">适用人群：18-55岁成年人群</span>
<span class="lang-en">Target Population: Adults aged 18-55 years</span>
</strong>
</div>
<!-- 模型类型展示 -->
<div class="row text-center mb-4">
<div class="col-md-6">
<div class="card border-primary h-100 model-card-bg">
<div class="card-body">
<h6 class="text-primary">
<i class="fas fa-search me-2"></i>
<span class="lang-zh">肌少症筛查模型</span>
<span class="lang-en">Sarcopenia Screening Models</span>
</h6>
<small class="text-muted">
<span class="lang-zh">高召回率<br>仅需5个指标即可完成快速筛查</span>
<span class="lang-en">High Recall<br>Only 5 indicators needed for rapid screening</span>
</small>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card border-primary h-100 model-card-bg">
<div class="card-body">
<h6 class="text-primary">
<i class="fas fa-lightbulb me-2"></i>
<span class="lang-zh">肌少症建议模型</span>
<span class="lang-en">Sarcopenia Advisory Models</span>
</h6>
<small class="text-muted">
<span class="lang-zh">高精确率<br>基于DiCE技术提供建议</span>
<span class="lang-en">High Precision<br>DiCE-based Recommendations</span>
</small>
</div>
</div>
</div>
</div>
<!-- 模型性能指标 -->
<div class="alert alert-info" style="background-color: #EAFBF8 !important; border-color: #EAFBF8 !important; color: #2d5a3d !important;">
<h6 class="alert-heading">
<i class="fas fa-chart-bar me-2"></i>
<span class="lang-zh">模型性能指标</span>
<span class="lang-en">Model Performance Metrics</span>
</h6>
<div class="row small">
<div class="col-md-6">
<strong class="text-primary">
<span class="lang-zh">筛查模型 (高召回率)</span>
<span class="lang-en">Screening Models (High Recall)</span>
</strong>
<ul class="list-unstyled mt-2 mb-3">
<li><strong>SarcoI:</strong> Recall: 91.1% | Precision: 43.1%</li>
<li><strong>SarcoII:</strong> Recall: 89.8% | Precision: 25.5%</li>
</ul>
</div>
<div class="col-md-6">
<strong class="text-success">
<span class="lang-zh">建议模型 (高精确率)</span>
<span class="lang-en">Advisory Models (High Precision)</span>
</strong>
<ul class="list-unstyled mt-2 mb-3">
<li><strong>SarcoI:</strong> Precision: 60.2% | Recall: 66.1%</li>
<li><strong>SarcoII:</strong> Precision: 68.4% | Recall: 33.1%</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 快速评估表单 -->
<div class="row mb-4">
<div class="col-lg-6 mx-auto">
<div class="card shadow">
<div class="card-header bg-success text-white">
<h4 class="card-title mb-0">
<i class="fas fa-user-check me-2"></i>
<span class="lang-zh">筛查模型问卷</span>
<span class="lang-en">Screening Model Questionnaire</span>
</h4>
</div>
<div class="card-body">
<form id="quickForm">
<!-- 年龄 -->
<div class="mb-3">
<label for="age_years" class="form-label">
<span class="lang-zh">年龄 (岁) <span class="text-success">*</span></span>
<span class="lang-en">Age (years) <span class="text-success">*</span></span>
</label>
<input type="number" class="form-control" id="age_years" name="age_years"
min="16" max="120" step="any" required>
</div>
<!-- 种族 -->
<div class="mb-3">
<label for="race_ethnicity" class="form-label">
<span class="lang-zh">种族/民族 <span class="text-success">*</span></span>
<span class="lang-en">Race/Ethnicity <span class="text-success">*</span></span>
</label>
<select class="form-select" id="race_ethnicity" name="race_ethnicity" required>
<option value="">
<span class="lang-zh">请选择</span>
<span class="lang-en">Please select</span>
</option>
<option value="0" data-zh="墨西哥裔美国人" data-en="Mexican American">墨西哥裔美国人</option>
<option value="1" data-zh="其他西班牙裔" data-en="Other Hispanic">其他西班牙裔</option>
<option value="2" data-zh="非西班牙裔白人" data-en="Non-Hispanic White">非西班牙裔白人</option>
<option value="3" data-zh="非西班牙裔黑人" data-en="Non-Hispanic Black">非西班牙裔黑人</option>
<option value="4" data-zh="其他种族-包括多种族" data-en="Other Race - Including Multi-Racial">其他种族-包括多种族</option>
</select>
</div>
<!-- 身高体重 -->
<div class="row mb-3">
<div class="col-md-6">
<label for="height" class="form-label">
<span class="lang-zh">身高 (cm) <span class="text-success">*</span></span>
<span class="lang-en">Height (cm) <span class="text-success">*</span></span>
</label>
<input type="number" class="form-control" id="height" name="height"
min="80" max="300" step="any" required>
</div>
<div class="col-md-6">
<label for="weight" class="form-label">
<span class="lang-zh">体重 (kg) <span class="text-success">*</span></span>
<span class="lang-en">Weight (kg) <span class="text-success">*</span></span>
</label>
<input type="number" class="form-control" id="weight" name="weight"
min="20" max="300" step="any" required>
</div>
</div>
<!-- 腰围 -->
<div class="mb-3">
<label for="waist" class="form-label">
<span class="lang-zh">腰围 (cm) <span class="text-success">*</span></span>
<span class="lang-en">Waist Circumference (cm) <span class="text-success">*</span></span>
</label>
<input type="number" class="form-control" id="waist" name="waist"
min="40" max="250" step="any" required>
</div>
<!-- 自动计算显示 -->
<div class="row mb-3">
<div class="col-md-6">
<label class="form-label">
<span class="lang-zh">BMI (自动计算)</span>
<span class="lang-en">BMI (Auto-calculated)</span>
</label>
<div id="bmiDisplay" class="form-control-plaintext text-info fw-bold">--</div>
</div>
<div class="col-md-6">
<label class="form-label">
<span class="lang-zh">WWI (自动计算)</span>
<span class="lang-en">WWI (Auto-calculated)</span>
</label>
<div id="wwiDisplay" class="form-control-plaintext text-info fw-bold">--</div>
</div>
</div>
<!-- 提交按钮 -->
<div class="d-grid">
<button type="submit" class="btn btn-success btn-lg" id="quickSubmitBtn">
<i class="fas fa-search me-2"></i>
<span class="lang-zh">快速筛查 (2个筛查模型)</span>
<span class="lang-en">Quick Screening (2 Screening Models)</span>
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- 快速结果 -->
<div id="quickResultsSection" class="mb-4">
<div class="card shadow">
<div class="card-header bg-success text-white">
<h4 class="mb-0">
<i class="fas fa-chart-bar me-2"></i>
<span class="lang-zh">快速评估结果</span>
<span class="lang-en">Quick Assessment Results</span>
</h4>
</div>
<div class="card-body">
<div id="quickResultsContent">
<!-- 结果将通过JavaScript动态生成 -->
</div>
<!-- 选择详细评估 -->
<div class="mt-4 pt-4 border-top">
<h5 class="text-success mb-3">
<i class="fas fa-lightbulb me-2"></i>
<span class="lang-zh">获得个性化改善建议</span>
<span class="lang-en">Get Personalized Improvement Recommendations</span>
</h5>
<p class="text-muted mb-3">
<span class="lang-zh">建议模型性能指标展示</span>
<span class="lang-en">Advisory Model Performance Metrics</span>
</p>
<div class="row justify-content-center">
<div class="col-md-6 mb-3">
<div class="card border-primary model-card-bg">
<div class="card-body text-center">
<div class="text-primary mb-2">
<i class="fas fa-lightbulb fa-lg"></i>
</div>
<h6 class="card-title text-primary">
<span class="lang-zh">I类肌少症建议模型</span>
<span class="lang-en">Type I Sarcopenia Advisory Model</span>
</h6>
<div class="small text-muted mb-2">
<span class="lang-zh">高精确率 + DiCE分析</span>
<span class="lang-en">High Precision + DiCE Analysis</span>
</div>
<div class="small">
<div class="text-muted">
<span class="lang-zh">Precision: 60.2% | Recall: 66.1%</span>
<span class="lang-en">Precision: 60.2% | Recall: 66.1%</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-6 mb-3">
<div class="card border-primary model-card-bg">
<div class="card-body text-center">
<div class="text-primary mb-2">
<i class="fas fa-lightbulb fa-lg"></i>
</div>
<h6 class="card-title text-primary">
<span class="lang-zh">II类肌少症建议模型</span>
<span class="lang-en">Type II Sarcopenia Advisory Model</span>
</h6>
<div class="small text-muted mb-2">
<span class="lang-zh">高精确率 + DiCE分析</span>
<span class="lang-en">High Precision + DiCE Analysis</span>
</div>
<div class="small">
<div class="text-muted">
<span class="lang-zh">Precision: 68.4% | Recall: 33.1%</span>
<span class="lang-en">Precision: 68.4% | Recall: 33.1%</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="alert alert-info mt-3">
<i class="fas fa-info-circle me-2"></i>
<small>
<span class="lang-zh"><strong>说明：</strong>建议模型采用高精确率设计，专注于减少误诊。Precision表示预测为阳性的样本中真正为阳性的比例，Recall表示所有真正阳性样本中被正确识别的比例。</span>
<span class="lang-en"><strong>Note:</strong> Advisory models are designed with high precision to minimize false positives. Precision indicates the proportion of true positives among predicted positives, while Recall shows the proportion of actual positives correctly identified.</span>
</small>
</div>
</div>
</div>
</div>
</div>
<!-- 详细评估部分 -->
<div id="detailedAssessmentSection">
<div class="card shadow">
<div class="card-body">
<div id="detailedFormContent">
<!-- 详细表单将根据选择动态生成 -->
</div>
</div>
</div>
</div>
</div>
<!-- 语言切换按钮 - 固定在页面底部 -->
<div class="language-toggle-container" style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
<button class="btn btn-primary btn-sm shadow" onclick="toggleLanguage()"
style="border-radius: 25px; padding: 8px 16px;">
<i class="fas fa-globe me-1"></i>
<span id="langToggleText">English</span>
</button>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<!-- 自定义JS -->
<script src="/static/quick_assessment.js"></script>
</body>
</html> |