Spaces:
Sleeping
Sleeping
| <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> |