Spaces:
Sleeping
Sleeping
| <html lang="zh-CN"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>肌少症风险评估与个性化建议系统</title> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"> | |
| <link href="{{ url_for('static', path='style.css') }}" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <!-- 导航栏 --> | |
| <nav class="navbar navbar-expand-lg navbar-dark bg-danger mb-4"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="/"> | |
| <i class="fas fa-heartbeat me-2"></i>SarcoAdvisor | |
| </a> | |
| <!-- 移除导航栏中的语言切换按钮 --> | |
| </div> | |
| </nav> | |
| <div class="container"> | |
| <!-- 标题区域 --> | |
| <div class="text-center mb-5"> | |
| <h1 class="display-5 fw-bold text-danger lang-zh">肌少症风险评估与个性化建议</h1> | |
| <h1 class="display-5 fw-bold text-danger lang-en">Sarcopenia Risk Assessment & Personalized Recommendations</h1> | |
| <p class="lead text-muted lang-zh">基于AI的双模型评估系统，提供精确的风险预测和个性化改善建议</p> | |
| <p class="lead text-muted lang-en">AI-powered dual-model assessment system for precise risk prediction and personalized improvement recommendations</p> | |
| </div> | |
| <!-- 评估表单 --> | |
| <div id="assessmentSection"> | |
| <div class="card shadow-lg"> | |
| <div class="card-header bg-danger text-white"> | |
| <h4 class="mb-0"> | |
| <i class="fas fa-clipboard-list me-2"></i> | |
| <span class="lang-zh">完整评估问卷</span> | |
| <span class="lang-en">Complete Assessment Questionnaire</span> | |
| </h4> | |
| </div> | |
| <div class="card-body"> | |
| <div class="alert alert-info"> | |
| <h6 class="alert-heading"> | |
| <i class="fas fa-info-circle me-2"></i> | |
| <span class="lang-zh">评估说明</span> | |
| <span class="lang-en">Assessment Information</span> | |
| </h6> | |
| <p class="mb-0 lang-zh"> | |
| 本系统将同时运行SarcoI和SarcoII两个建议模型，为您提供全面的肌少症风险评估和个性化改善建议。 | |
| 请如实填写以下信息，评估过程需要1-3分钟。 | |
| </p> | |
| <p class="mb-0 lang-en"> | |
| This system will run both SarcoI and SarcoII advisory models simultaneously to provide comprehensive sarcopenia risk assessment and personalized improvement recommendations. | |
| Please fill out the following information truthfully. The assessment process takes 1-3 minutes. | |
| </p> | |
| </div> | |
| <form id="unifiedForm"> | |
| <!-- 基本信息 --> | |
| <div class="section-header mb-4"> | |
| <h5 class="text-danger"> | |
| <i class="fas fa-user me-2"></i> | |
| <span class="lang-zh">基本信息</span> | |
| <span class="lang-en">Basic Information</span> | |
| </h5> | |
| <hr> | |
| </div> | |
| <div class="row mb-3"> | |
| <div class="col-md-6"> | |
| <label for="age_years" class="form-label"> | |
| <span class="lang-zh">年龄 (岁)</span> | |
| <span class="lang-en">Age (years)</span> | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="number" class="form-control" id="age_years" name="age_years" | |
| min="18" max="120" step="1" required> | |
| </div> | |
| <div class="col-md-6"> | |
| <label for="race_ethnicity" class="form-label"> | |
| <span class="lang-zh">种族/民族</span> | |
| <span class="lang-en">Race/Ethnicity</span> | |
| <span class="text-danger">*</span> | |
| </label> | |
| <select class="form-select" id="race_ethnicity" name="race_ethnicity" required> | |
| <option value="">请选择 / Please select</option> | |
| <option value="1">墨西哥裔美国人 / Mexican American</option> | |
| <option value="2">其他西班牙裔 / Other Hispanic</option> | |
| <option value="3">非西班牙裔白人 / Non-Hispanic White</option> | |
| <option value="4">非西班牙裔黑人 / Non-Hispanic Black</option> | |
| <option value="5">其他种族 / Other Race</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- 身体测量 --> | |
| <div class="section-header mb-4"> | |
| <h5 class="text-danger"> | |
| <i class="fas fa-ruler me-2"></i> | |
| <span class="lang-zh">身体测量</span> | |
| <span class="lang-en">Body Measurements</span> | |
| </h5> | |
| <hr> | |
| </div> | |
| <div class="row mb-3"> | |
| <div class="col-md-4"> | |
| <label for="height" class="form-label"> | |
| <span class="lang-zh">身高 (cm)</span> | |
| <span class="lang-en">Height (cm)</span> | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="number" class="form-control" id="height" name="height" | |
| min="100" max="250" step="0.1" required> | |
| </div> | |
| <div class="col-md-4"> | |
| <label for="weight" class="form-label"> | |
| <span class="lang-zh">体重 (kg)</span> | |
| <span class="lang-en">Weight (kg)</span> | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="number" class="form-control" id="weight" name="weight" | |
| min="30" max="300" step="0.1" required> | |
| </div> | |
| <div class="col-md-4"> | |
| <label for="waist" class="form-label"> | |
| <span class="lang-zh">腰围 (cm)</span> | |
| <span class="lang-en">Waist (cm)</span> | |
| <span class="text-danger">*</span> | |
| </label> | |
| <input type="number" class="form-control" id="waist" name="waist" | |
| min="50" max="200" step="0.1" required> | |
| </div> | |
| </div> | |
| <!-- 计算指标显示 --> | |
| <div class="row mb-4"> | |
| <div class="col-md-6"> | |
| <div class="card bg-light"> | |
| <div class="card-body text-center"> | |
| <h6 class="card-title">BMI</h6> | |
| <h4 class="text-primary" id="bmiDisplay">--</h4> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="card bg-light"> | |
| <div class="card-body text-center"> | |
| <h6 class="card-title">WWI</h6> | |
| <h4 class="text-primary" id="wwiDisplay">--</h4> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- NHANES体力活动问卷 --> | |
| <div id="physicalActivitySection"> | |
| <!-- 这里会通过JavaScript动态插入体力活动问卷内容 --> | |
| </div> | |
| <!-- 医疗史 --> | |
| <div class="section-header mb-4"> | |
| <h5 class="text-danger"> | |
| <i class="fas fa-notes-medical me-2"></i> | |
| <span class="lang-zh">医疗史</span> | |
| <span class="lang-en">Medical History</span> | |
| </h5> | |
| <hr> | |
| </div> | |
| <div class="row mb-4"> | |
| <div class="col-md-6"> | |
| <label for="arthritis" class="form-label"> | |
| <span class="lang-zh">是否患有关节炎？</span> | |
| <span class="lang-en">Do you have arthritis?</span> | |
| <span class="text-danger">*</span> | |
| </label> | |
| <select class="form-select" id="arthritis" name="arthritis" required> | |
| <option value="">请选择 / Please select</option> | |
| <option value="0">否 / No</option> | |
| <option value="1">是 / Yes</option> | |
| </select> | |
| </div> | |
| <div class="col-md-6"> | |
| <label for="diabetes" class="form-label"> | |
| <span class="lang-zh">是否患有糖尿病？</span> | |
| <span class="lang-en">Do you have diabetes?</span> | |
| <span class="text-danger">*</span> | |
| </label> | |
| <select class="form-select" id="diabetes" name="diabetes" required> | |
| <option value="">请选择 / Please select</option> | |
| <option value="0">否 / No</option> | |
| <option value="1">是 / Yes</option> | |
| </select> | |
| </div> | |
| </div> | |
| <!-- 提交按钮 --> | |
| <div class="text-center"> | |
| <button type="submit" class="btn btn-danger btn-lg px-5" id="submitBtn"> | |
| <i class="fas fa-chart-line me-2"></i> | |
| <span class="lang-zh">开始双模型评估</span> | |
| <span class="lang-en">Start Dual-Model Assessment</span> | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 加载状态 --> | |
| <div id="loadingSection"> | |
| <div class="text-center py-5"> | |
| <div class="spinner-border text-danger" style="width: 3rem; height: 3rem;" role="status"> | |
| <span class="visually-hidden">评估中...</span> | |
| </div> | |
| <h4 class="mt-3 text-danger">正在进行双模型AI分析...</h4> | |
| <div class="mt-3"> | |
| <div class="progress mb-2" style="max-width: 500px; margin: 0 auto;"> | |
| <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" | |
| style="width: 30%" id="progressBar"></div> | |
| </div> | |
| <p class="text-muted mb-1" id="statusText">🧠 AI正在分析您的特征数据...</p> | |
| <small class="text-info" id="timeText">预计需要1-3分钟</small> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- 结果显示区域 --> | |
| <div id="resultsSection"> | |
| <div id="resultsContent"> | |
| <!-- 结果内容将通过JavaScript动态插入 --> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Bootstrap JS --> | |
| <!-- 语言切换按钮 - 固定在页面底部 --> | |
| <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> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- 自定义JS --> | |
| <script src="{{ url_for('static', path='unified_assessment.js') }}"></script> | |
| </body> | |
| </html> | |