Spaces:
Running
Running
/** | |
* 两阶段肌少症评估系统 | |
* 阶段1:快速评估(4个基本特征,所有模型) | |
* 阶段2:详细评估(选择模型,完整特征) | |
*/ | |
let currentLanguage = 'zh'; | |
let quickAssessmentResult = null; | |
// DOM加载完成后初始化 | |
document.addEventListener('DOMContentLoaded', function() { | |
console.log('两阶段评估系统已加载'); | |
// 初始化语言 | |
initializeLanguage(); | |
// 初始化表单 | |
initializeQuickForm(); | |
// 添加自动计算功能 | |
initializeAutoCalculation(); | |
}); | |
/** | |
* 初始化语言功能 | |
*/ | |
function initializeLanguage() { | |
const savedLanguage = localStorage.getItem('language') || 'zh'; | |
currentLanguage = savedLanguage; | |
updateLanguageDisplay(); | |
} | |
function toggleLanguage() { | |
currentLanguage = currentLanguage === 'zh' ? 'en' : 'zh'; | |
localStorage.setItem('language', currentLanguage); | |
updateLanguageDisplay(); | |
} | |
function updateLanguageDisplay() { | |
const zhElements = document.querySelectorAll('.lang-zh'); | |
const enElements = document.querySelectorAll('.lang-en'); | |
const toggleText = document.getElementById('langToggleText'); | |
console.log('切换语言到:', currentLanguage); | |
console.log('找到中文元素:', zhElements.length); | |
console.log('找到英文元素:', enElements.length); | |
if (currentLanguage === 'zh') { | |
// 显示中文,隐藏英文 | |
zhElements.forEach(el => { | |
el.style.display = 'inline'; | |
el.style.visibility = 'visible'; | |
}); | |
enElements.forEach(el => { | |
el.style.display = 'none'; | |
el.style.visibility = 'hidden'; | |
}); | |
if (toggleText) toggleText.textContent = 'English'; | |
} else { | |
// 隐藏中文,显示英文 | |
zhElements.forEach(el => { | |
el.style.display = 'none'; | |
el.style.visibility = 'hidden'; | |
}); | |
enElements.forEach(el => { | |
el.style.display = 'inline'; | |
el.style.visibility = 'visible'; | |
}); | |
if (toggleText) toggleText.textContent = '中文'; | |
} | |
// 更新select选项的文本 | |
updateSelectOptions(); | |
} | |
/** | |
* 更新select选项的文本 | |
*/ | |
function updateSelectOptions() { | |
const selects = document.querySelectorAll('select'); | |
selects.forEach(select => { | |
const options = select.querySelectorAll('option[data-zh][data-en]'); | |
options.forEach(option => { | |
if (currentLanguage === 'zh') { | |
option.textContent = option.getAttribute('data-zh'); | |
} else { | |
option.textContent = option.getAttribute('data-en'); | |
} | |
}); | |
// 处理第一个选项(请选择) | |
const firstOption = select.querySelector('option[value=""]'); | |
if (firstOption && firstOption.innerHTML.includes('lang-')) { | |
if (currentLanguage === 'zh') { | |
firstOption.textContent = '请选择'; | |
} else { | |
firstOption.textContent = 'Please select'; | |
} | |
} | |
}); | |
} | |
/** | |
* 初始化快速评估表单 | |
*/ | |
function initializeQuickForm() { | |
const form = document.getElementById('quickForm'); | |
form.addEventListener('submit', handleQuickSubmit); | |
// 添加输入验证 | |
const inputs = form.querySelectorAll('input[required], select[required]'); | |
inputs.forEach(input => { | |
input.addEventListener('input', updateQuickSubmitButton); | |
}); | |
console.log('快速评估表单初始化完成'); | |
} | |
/** | |
* 初始化自动计算功能 | |
*/ | |
function initializeAutoCalculation() { | |
const heightInput = document.getElementById('height'); | |
const weightInput = document.getElementById('weight'); | |
const waistInput = document.getElementById('waist'); | |
function updateCalculations() { | |
const height = parseFloat(heightInput.value); | |
const weight = parseFloat(weightInput.value); | |
const waist = parseFloat(waistInput.value); | |
// 计算BMI | |
if (height && weight) { | |
const heightInMeters = height / 100; | |
const bmi = weight / (heightInMeters * heightInMeters); | |
document.getElementById('bmiDisplay').textContent = bmi.toFixed(1); | |
} else { | |
document.getElementById('bmiDisplay').textContent = '--'; | |
} | |
// 计算WWI | |
if (waist && weight) { | |
const wwi = waist / Math.sqrt(weight); | |
document.getElementById('wwiDisplay').textContent = wwi.toFixed(2); | |
} else { | |
document.getElementById('wwiDisplay').textContent = '--'; | |
} | |
} | |
heightInput.addEventListener('input', updateCalculations); | |
weightInput.addEventListener('input', updateCalculations); | |
waistInput.addEventListener('input', updateCalculations); | |
console.log('自动计算功能已初始化'); | |
} | |
/** | |
* 处理快速评估提交 | |
*/ | |
async function handleQuickSubmit(event) { | |
event.preventDefault(); | |
console.log('开始快速评估...'); | |
// 收集基本数据 | |
const formData = collectQuickFormData(); | |
// 显示加载状态 | |
showLoading(); | |
try { | |
// 调用快速评估API | |
const result = await performQuickAssessment(formData); | |
// 保存结果 | |
quickAssessmentResult = result; | |
// 显示快速结果 | |
displayQuickResults(result); | |
} catch (error) { | |
console.error('快速评估失败:', error); | |
hideLoading(); | |
showAlert('评估过程中出现错误:' + error.message, 'danger'); | |
} | |
} | |
/** | |
* 收集快速表单数据 | |
*/ | |
function collectQuickFormData() { | |
const height = parseFloat(document.getElementById('height').value); | |
const weight = parseFloat(document.getElementById('weight').value); | |
const waist = parseFloat(document.getElementById('waist').value); | |
// 计算BMI和WWI | |
const heightInMeters = height / 100; | |
const bmi = weight / (heightInMeters * heightInMeters); | |
const wwi = waist / Math.sqrt(weight); | |
const formData = { | |
// 筛查模型的核心特征 | |
age_years: parseFloat(document.getElementById('age_years').value), | |
race_ethnicity: parseInt(document.getElementById('race_ethnicity').value), | |
body_mass_index: parseFloat(bmi.toFixed(1)), | |
WWI: parseFloat(wwi.toFixed(2)), | |
// 基础测量值(用于计算) | |
height: height, | |
weight: weight, | |
waist: waist, | |
// 为满足后端验证要求的最小字段集 | |
// 注意:这些默认值会让建议模型跳过运行(insufficient features) | |
PAQ605: 2, PAQ620: 2, PAQ635: 2, PAQ650: 2, PAQ665: 2, | |
PAQ610: 0, PAQ625: 0, PAQ640: 0, PAQ655: 0, PAQ670: 0, | |
PAD615: 0, PAD630: 0, PAD645: 0, PAD660: 0, PAD675: 0, | |
PAD680: 480, | |
arthritis: 0, | |
diabetes: 0 | |
}; | |
console.log('收集的快速评估数据:', formData); | |
return formData; | |
} | |
/** | |
* 执行快速评估 | |
*/ | |
async function performQuickAssessment(userData) { | |
console.log('调用快速评估API...'); | |
const response = await fetch('/api/quick_assessment', { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json', | |
}, | |
body: JSON.stringify(userData) | |
}); | |
if (!response.ok) { | |
let errorMessage = `HTTP ${response.status}: `; | |
try { | |
const errorData = await response.json(); | |
console.error('服务器错误详情:', errorData); | |
if (response.status === 422 && errorData.detail) { | |
if (Array.isArray(errorData.detail)) { | |
const validationErrors = errorData.detail.map(err => | |
`字段"${err.loc.join('.')}"错误: ${err.msg}` | |
).join('; '); | |
errorMessage += validationErrors; | |
} else { | |
errorMessage += JSON.stringify(errorData.detail); | |
} | |
} else { | |
errorMessage += errorData.detail || JSON.stringify(errorData); | |
} | |
} catch (parseError) { | |
errorMessage += response.statusText || '服务器错误'; | |
} | |
throw new Error(errorMessage); | |
} | |
const result = await response.json(); | |
console.log('快速评估结果:', result); | |
return result; | |
} | |
/** | |
* 显示快速评估结果 | |
*/ | |
function displayQuickResults(assessment) { | |
hideLoading(); | |
const screening = assessment.screening; | |
// 计算误诊/漏诊人数 | |
const sarcoI_misdiagnosis = Math.round((100 - 91.14) * 100) / 100; // 漏诊率 | |
const sarcoI_false_positive = Math.round((100 - 43.05) * 100) / 100; // 误诊率 | |
const sarcoII_misdiagnosis = Math.round((100 - 89.83) * 100) / 100; // 漏诊率 | |
const sarcoII_false_positive = Math.round((100 - 25.48) * 100) / 100; // 误诊率 | |
const html = ` | |
<div class="alert alert-success"> | |
<h5 class="alert-heading"> | |
<i class="fas fa-check-circle me-2"></i> | |
<span class="lang-zh">快速筛查完成</span> | |
<span class="lang-en">Quick Screening Completed</span> | |
</h5> | |
<p class="mb-0"> | |
<span class="lang-zh">基于4个基本特征的筛查评估结果(高召回率模型,适合初步风险筛查)</span> | |
<span class="lang-en">Screening assessment results based on 4 basic features (high recall model, suitable for preliminary risk screening)</span> | |
</p> | |
</div> | |
<!-- 筛查模型结果 --> | |
<div class="row mb-4"> | |
<!-- SarcoI筛查 --> | |
<div class="col-md-6 mb-3"> | |
<div class="card border-primary model-card-bg"> | |
<div class="card-body text-center"> | |
<div class="risk-level risk-${screening.sarcoI_risk} mb-3"> | |
<i class="fas fa-search fa-lg mb-1"></i> | |
<div><strong> | |
<span class="lang-zh">I类肌少症筛查模型</span> | |
<span class="lang-en">Type I Sarcopenia Screening Model</span> | |
</strong></div> | |
<div class="small"> | |
<span class="lang-zh">RandomForest · 高召回率</span> | |
<span class="lang-en">RandomForest · High Recall</span> | |
</div> | |
</div> | |
<div class="mb-3"> | |
<div class="fw-bold text-${screening.sarcoI_risk === 'high' ? 'danger' : 'success'} fs-5"> | |
<span class="lang-zh">风险等级: ${screening.sarcoI_risk === 'high' ? '高风险' : screening.sarcoI_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">Risk Level: ${screening.sarcoI_risk === 'high' ? 'High Risk' : screening.sarcoI_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</div> | |
<div class="text-muted small"> | |
<span class="lang-zh">肌少症特征相似度: ${(screening.sarcoI_probability * 100).toFixed(1)}%</span> | |
<span class="lang-en">Sarcopenia Feature Similarity: ${(screening.sarcoI_probability * 100).toFixed(1)}%</span> | |
</div> | |
</div> | |
<div class="mb-3 p-2 bg-light rounded"> | |
<div class="fw-bold text-primary mb-1"> | |
<span class="lang-zh">模型诊断您${screening.sarcoI_risk === 'high' ? '患有' : '未患有'}I类肌少症</span> | |
<span class="lang-en">Model diagnosis: You ${screening.sarcoI_risk === 'high' ? 'have' : 'do not have'} Type I Sarcopenia</span> | |
</div> | |
</div> | |
<div class="mb-3"> | |
<div class="fw-bold text-info mb-1"> | |
<span class="lang-zh">模型性能指标</span> | |
<span class="lang-en">Model Performance Metrics</span> | |
</div> | |
<div class="text-dark"> | |
<span class="lang-zh">召回率: <strong>91.14%</strong> | 精确率: <strong>43.05%</strong></span> | |
<span class="lang-en">Recall: <strong>91.14%</strong> | Precision: <strong>43.05%</strong></span> | |
</div> | |
</div> | |
<div class="small text-muted"> | |
<div class="mb-1"><strong> | |
<span class="lang-zh">指标解释(以100人为例):</span> | |
<span class="lang-en">Metric Explanation (Example with 100 people):</span> | |
</strong></div> | |
<div> | |
<span class="lang-zh">• Recall 91.14%:100个真正患病者中,能正确识别91人</span> | |
<span class="lang-en">• Recall 91.14%: Among 100 truly affected patients, 91 can be correctly identified</span> | |
</div> | |
<div> | |
<span class="lang-zh">• 漏诊率:约${sarcoI_misdiagnosis}人会被漏诊</span> | |
<span class="lang-en">• Missed diagnosis rate: About ${sarcoI_misdiagnosis} people will be missed</span> | |
</div> | |
<div> | |
<span class="lang-zh">• Precision 43.05%:100个被诊断为患病者中,43人真正患病</span> | |
<span class="lang-en">• Precision 43.05%: Among 100 diagnosed patients, 43 truly have the condition</span> | |
</div> | |
<div> | |
<span class="lang-zh">• 误诊率:约${sarcoI_false_positive}人会被误诊</span> | |
<span class="lang-en">• False positive rate: About ${sarcoI_false_positive} people will be misdiagnosed</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- SarcoII筛查 --> | |
<div class="col-md-6 mb-3"> | |
<div class="card border-primary model-card-bg"> | |
<div class="card-body text-center"> | |
<div class="risk-level risk-${screening.sarcoII_risk} mb-3"> | |
<i class="fas fa-search fa-lg mb-1"></i> | |
<div><strong> | |
<span class="lang-zh">II类肌少症筛查模型</span> | |
<span class="lang-en">Type II Sarcopenia Screening Model</span> | |
</strong></div> | |
<div class="small"> | |
<span class="lang-zh">CatBoost · 高召回率</span> | |
<span class="lang-en">CatBoost · High Recall</span> | |
</div> | |
</div> | |
<div class="mb-3"> | |
<div class="fw-bold text-${screening.sarcoII_risk === 'high' ? 'danger' : 'success'} fs-5"> | |
<span class="lang-zh">风险等级: ${screening.sarcoII_risk === 'high' ? '高风险' : screening.sarcoII_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">Risk Level: ${screening.sarcoII_risk === 'high' ? 'High Risk' : screening.sarcoII_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</div> | |
<div class="text-muted small"> | |
<span class="lang-zh">肌少症特征相似度: ${(screening.sarcoII_probability * 100).toFixed(1)}%</span> | |
<span class="lang-en">Sarcopenia Feature Similarity: ${(screening.sarcoII_probability * 100).toFixed(1)}%</span> | |
</div> | |
</div> | |
<div class="mb-3 p-2 bg-light rounded"> | |
<div class="fw-bold text-primary mb-1"> | |
<span class="lang-zh">模型诊断您${screening.sarcoII_risk === 'high' ? '患有' : '未患有'}II类肌少症</span> | |
<span class="lang-en">Model diagnosis: You ${screening.sarcoII_risk === 'high' ? 'have' : 'do not have'} Type II Sarcopenia</span> | |
</div> | |
</div> | |
<div class="mb-3"> | |
<div class="fw-bold text-info mb-1"> | |
<span class="lang-zh">模型性能指标</span> | |
<span class="lang-en">Model Performance Metrics</span> | |
</div> | |
<div class="text-dark"> | |
<span class="lang-zh">召回率: <strong>89.83%</strong> | 精确率: <strong>25.48%</strong></span> | |
<span class="lang-en">Recall: <strong>89.83%</strong> | Precision: <strong>25.48%</strong></span> | |
</div> | |
</div> | |
<div class="small text-muted"> | |
<div class="mb-1"><strong> | |
<span class="lang-zh">指标解释(以100人为例):</span> | |
<span class="lang-en">Metric Explanation (Example with 100 people):</span> | |
</strong></div> | |
<div> | |
<span class="lang-zh">• Recall 89.83%:100个真正患病者中,能正确识别90人</span> | |
<span class="lang-en">• Recall 89.83%: Among 100 truly affected patients, 90 can be correctly identified</span> | |
</div> | |
<div> | |
<span class="lang-zh">• 漏诊率:约${sarcoII_misdiagnosis}人会被漏诊</span> | |
<span class="lang-en">• Missed diagnosis rate: About ${sarcoII_misdiagnosis} people will be missed</span> | |
</div> | |
<div> | |
<span class="lang-zh">• Precision 25.48%:100个被诊断为患病者中,25人真正患病</span> | |
<span class="lang-en">• Precision 25.48%: Among 100 diagnosed patients, 25 truly have the condition</span> | |
</div> | |
<div> | |
<span class="lang-zh">• 误诊率:约${sarcoII_false_positive}人会被误诊</span> | |
<span class="lang-en">• False positive rate: About ${sarcoII_false_positive} people will be misdiagnosed</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- 评估标准说明 --> | |
<div class="alert alert-warning mb-3"> | |
<h6 class="mb-2"> | |
<i class="fas fa-info-circle me-2"></i> | |
<span class="lang-zh">评估标准说明</span> | |
<span class="lang-en">Assessment Criteria</span> | |
</h6> | |
<p class="mb-2"> | |
<span class="lang-zh"> | |
本系统采用肌肉质量指数(MQI,Muscle Quality Index)作为评估指标,依据"健康的年轻群体"以均值和标准差进行分层: | |
</span> | |
<span class="lang-en"> | |
This system uses Muscle Quality Index (MQI) as the evaluation metric, stratified based on mean and standard deviation from "healthy young population": | |
</span> | |
</p> | |
<ul class="mb-2"> | |
<li> | |
<span class="lang-zh">MQI < Mean − 2SD 定义为 <strong>II类肌少症(严重)</strong></span> | |
<span class="lang-en">MQI < Mean − 2SD defined as <strong>Type II Sarcopenia (Severe)</strong></span> | |
</li> | |
<li> | |
<span class="lang-zh">Mean − 2SD ≤ MQI < Mean − 1SD 定义为 <strong>I类肌少症(轻度)</strong></span> | |
<span class="lang-en">Mean − 2SD ≤ MQI < Mean − 1SD defined as <strong>Type I Sarcopenia (Mild)</strong></span> | |
</li> | |
</ul> | |
<div class="text-center mt-2"> | |
<small class="text-muted"> | |
<span class="lang-zh"> | |
$$MQI = \\frac{\\text{握力 (kg)}}{\\text{四肢骨骼肌质量 (kg)}}$$ | |
</span> | |
<span class="lang-en"> | |
$$MQI = \\frac{\\text{Grip Strength (kg)}}{\\text{Appendicular Skeletal Muscle Mass (kg)}}$$ | |
</span> | |
</small> | |
</div> | |
</div> | |
<!-- 建议模型预览和统一问卷入口 --> | |
<div class="alert alert-warning"> | |
<h6 class="mb-2"> | |
<i class="fas fa-lightbulb me-2"></i> | |
<span class="lang-zh">获得更精确的评估和个性化建议</span> | |
<span class="lang-en">Get More Accurate Assessment and Personalized Recommendations</span> | |
</h6> | |
<p class="mb-2"> | |
<span class="lang-zh">完成详细问卷可获得:</span> | |
<span class="lang-en">Complete the detailed questionnaire to get:</span> | |
</p> | |
<ul class="mb-3"> | |
<li><strong> | |
<span class="lang-zh">高精确率评估</span> | |
<span class="lang-en">High Precision Assessment</span> | |
</strong>: | |
<span class="lang-zh">基于更多特征的精确风险预测</span> | |
<span class="lang-en">Precise risk prediction based on more features</span> | |
</li> | |
<li><strong> | |
<span class="lang-zh">DiCE个性化建议</span> | |
<span class="lang-en">DiCE Personalized Recommendations</span> | |
</strong>: | |
<span class="lang-zh">AI生成的反事实分析和改善方案</span> | |
<span class="lang-en">AI-generated counterfactual analysis and improvement plans</span> | |
</li> | |
<li><strong> | |
<span class="lang-zh">具体改善目标</span> | |
<span class="lang-en">Specific Improvement Goals</span> | |
</strong>: | |
<span class="lang-zh">量化的健康改善指标</span> | |
<span class="lang-en">Quantified health improvement metrics</span> | |
</li> | |
</ul> | |
<div class="text-center"> | |
<button class="btn btn-success btn-lg" onclick="showUnifiedForm()"> | |
<i class="fas fa-magic me-2"></i> | |
<span class="lang-zh">完成详细问卷,获得个性化建议</span> | |
<span class="lang-en">Complete Detailed Questionnaire for Personalized Recommendations</span> | |
</button> | |
</div> | |
</div> | |
`; | |
document.getElementById('quickResultsContent').innerHTML = html; | |
document.getElementById('quickResultsSection').style.display = 'block'; | |
// 重新渲染MathJax公式 | |
if (window.MathJax) { | |
MathJax.typesetPromise([document.getElementById('quickResultsContent')]).then(() => { | |
console.log('MathJax渲染完成'); | |
}).catch((err) => console.log('MathJax渲染错误:', err)); | |
} | |
// 更新语言显示 | |
updateLanguageDisplay(); | |
// 滚动到结果区域 | |
document.getElementById('quickResultsSection').scrollIntoView({ | |
behavior: 'smooth' | |
}); | |
console.log('快速结果显示完成'); | |
} | |
/** | |
* 显示详细评估表单 | |
*/ | |
function showDetailedForm(modelType) { | |
console.log('显示详细评估表单:', modelType); | |
// 隐藏快速结果 | |
document.getElementById('quickResultsSection').style.display = 'none'; | |
// 生成详细表单 | |
const formContent = generateDetailedForm(modelType); | |
document.getElementById('detailedFormContent').innerHTML = formContent; | |
// 更新标题 (只支持建议模型) | |
const titles = { | |
'sarcoI_advisory': 'SarcoI 建议模型详细评估', | |
'sarcoII_advisory': 'SarcoII 建议模型详细评估' | |
}; | |
// 检查是否为有效的模型类型 | |
if (!titles[modelType]) { | |
console.error('不支持的模型类型:', modelType); | |
showAlert('此功能暂时不可用,请选择建议模型评估', 'warning'); | |
return; | |
} | |
document.getElementById('detailedTitle').textContent = titles[modelType]; | |
// 显示详细评估区域 | |
document.getElementById('detailedAssessmentSection').classList.add('show'); | |
// 应用当前语言设置到新生成的内容 | |
updateLanguageDisplay(); | |
// 滚动到详细评估区域 | |
document.getElementById('detailedAssessmentSection').scrollIntoView({ | |
behavior: 'smooth' | |
}); | |
// 初始化详细表单事件 | |
initializeDetailedForm(modelType); | |
} | |
/** | |
* 生成特定模型的详细表单 | |
*/ | |
function generateDetailedForm(modelType) { | |
// 只支持建议模型 | |
if (!modelType.includes('advisory')) { | |
return ` | |
<div class="alert alert-warning"> | |
<h6 class="alert-heading">功能说明</h6> | |
<p class="mb-0">筛查模型已使用完整问卷数据进行评估。此处仅支持建议模型的详细评估。</p> | |
</div> | |
`; | |
} | |
let formHTML = ` | |
<div class="alert alert-success"> | |
<h6 class="alert-heading">建议模型详细评估</h6> | |
<p class="mb-0"> | |
<span class="lang-zh">请完善详细的NHANES体力活动问卷,我们将基于DiCE分析为您提供个性化改善建议。</span> | |
<span class="lang-en">Please complete the detailed NHANES physical activity questionnaire, and we will provide personalized improvement recommendations based on DiCE analysis.</span> | |
</p> | |
</div> | |
<form id="detailedForm" data-model-type="${modelType}"> | |
`; | |
// 建议模型都需要完整的体力活动问卷 | |
formHTML += generatePhysicalActivityHTML(); | |
// 添加久坐行为 | |
formHTML += generateSedentarySection(); | |
formHTML += ` | |
<div class="mt-4"> | |
<div class="row"> | |
<div class="col-md-6"> | |
<button type="button" class="btn btn-secondary w-100" onclick="backToQuickResults()"> | |
<i class="fas fa-arrow-left me-2"></i>返回快速结果 | |
</button> | |
</div> | |
<div class="col-md-6"> | |
<button type="submit" class="btn btn-success w-100"> | |
<i class="fas fa-chart-line me-2"></i>精确评估 | |
</button> | |
</div> | |
</div> | |
</div> | |
</form> | |
`; | |
return formHTML; | |
} | |
/** | |
* 生成医疗史部分 | |
*/ | |
function generateMedicalHistorySection() { | |
return ` | |
<div class="section-header mb-3"> | |
<h5 class="text-success"> | |
<i class="fas fa-notes-medical me-2"></i>医疗史 | |
</h5> | |
<hr> | |
</div> | |
<div class="row mb-3"> | |
<div class="col-md-6"> | |
<label for="arthritis" class="form-label">是否患有关节炎? <span class="text-success">*</span></label> | |
<select class="form-select" id="arthritis" name="arthritis" required> | |
<option value="">请选择</option> | |
<option value="0">否</option> | |
<option value="1">是</option> | |
</select> | |
</div> | |
<div class="col-md-6"> | |
<label for="diabetes" class="form-label">是否患有糖尿病? <span class="text-success">*</span></label> | |
<select class="form-select" id="diabetes" name="diabetes" required> | |
<option value="">请选择</option> | |
<option value="0">否</option> | |
<option value="1">是</option> | |
</select> | |
</div> | |
</div> | |
`; | |
} | |
/** | |
* 生成久坐行为部分 | |
*/ | |
function generateSedentarySection() { | |
return ` | |
<div class="section-header mb-3"> | |
<h5 class="text-success"> | |
<i class="fas fa-chair me-2"></i>久坐行为 | |
</h5> | |
<hr> | |
</div> | |
<div class="mb-3"> | |
<label for="PAD680" class="form-label">您每天通常坐着多长时间?(分钟) <span class="text-success">*</span></label> | |
<input type="number" class="form-control" id="PAD680" name="PAD680" min="0" max="1440" step="1" required value="480"> | |
<div class="form-text">包括在学校、家中、通勤、与朋友相处时的坐着时间,如办公、乘车、读书、看电视、使用电脑等(不包括睡觉时间)</div> | |
</div> | |
`; | |
} | |
/** | |
* 切换活动详细信息显示/隐藏 | |
*/ | |
function toggleActivityDetails(selectId, detailsId) { | |
const select = document.getElementById(selectId); | |
const details = document.getElementById(detailsId); | |
if (select && details) { | |
if (select.value === '1') { | |
details.style.display = 'block'; | |
} else { | |
details.style.display = 'none'; | |
// 🚫 不再自动清零用户输入,保留用户数据 | |
// details.querySelectorAll('input').forEach(input => input.value = '0'); | |
} | |
} | |
} | |
/** | |
* 初始化所有活动详细信息框的显示状态 | |
*/ | |
function initializeActivityDetailsDisplay() { | |
const detailsIds = ['vigorous_work_details', 'moderate_work_details', 'transport_details', 'vigorous_rec_details', 'moderate_rec_details']; | |
detailsIds.forEach(detailsId => { | |
const details = document.getElementById(detailsId); | |
if (details) { | |
details.style.display = 'none'; | |
} | |
}); | |
} | |
/** | |
* 根据NHANES PAQ数据计算衍生特征 (复制主app.js的逻辑) | |
*/ | |
function calculateDerivedFeatures(data) { | |
const derived = {}; | |
// ===================================================== | |
// A. 活动总量/剂量特征 (Activity Volume/Dose) | |
// ===================================================== | |
// A1. 每周总MET-分钟 (Total MET-minutes/week) | |
const vigorousWorkMETs = 8.0 * (data.PAD615 || 0) * (data.PAQ610 || 0); | |
const moderateWorkMETs = 4.0 * (data.PAD630 || 0) * (data.PAQ625 || 0); | |
const transportationMETs = 4.0 * (data.PAD645 || 0) * (data.PAQ640 || 0); | |
const vigorousRecMETs = 8.0 * (data.PAD660 || 0) * (data.PAQ655 || 0); | |
const moderateRecMETs = 4.0 * (data.PAD675 || 0) * (data.PAQ670 || 0); | |
const totalMETMinutesWeek = vigorousWorkMETs + moderateWorkMETs + transportationMETs + vigorousRecMETs + moderateRecMETs; | |
// A2. 每周高强度活动总分钟数 (Total Vigorous Minutes/week) | |
const vigorousWorkMins = (data.PAD615 || 0) * (data.PAQ610 || 0); | |
const vigorousRecMins = (data.PAD660 || 0) * (data.PAQ655 || 0); | |
const totalVigorousMinutesWeek = vigorousWorkMins + vigorousRecMins; | |
// A3. 每周中等强度活动总分钟数 (Total Moderate Minutes/week) | |
const moderateWorkMins = (data.PAD630 || 0) * (data.PAQ625 || 0); | |
const transportationMins = (data.PAD645 || 0) * (data.PAQ640 || 0); | |
const moderateRecMins = (data.PAD675 || 0) * (data.PAQ670 || 0); | |
const totalModerateMinutesWeek = moderateWorkMins + transportationMins + moderateRecMins; | |
// ===================================================== | |
// B. 活动模式/行为特征 (Activity Pattern/Behavior) | |
// ===================================================== | |
// B1. 平均每次高强度活动时长 | |
const totalVigorousDays = (data.PAQ610 || 0) + (data.PAQ655 || 0); | |
const avgVigorousDurationPerBout = totalVigorousDays > 0 ? totalVigorousMinutesWeek / totalVigorousDays : 0; | |
// B2. 平均每次中等强度活动时长 | |
const totalModerateDays = (data.PAQ625 || 0) + (data.PAQ640 || 0) + (data.PAQ670 || 0); | |
const avgModerateDurationPerBout = totalModerateDays > 0 ? totalModerateMinutesWeek / totalModerateDays : 0; | |
// B3. 活动多样性指数 | |
let activityDiversityIndex = 0; | |
if ((data.PAQ605 || 0) > 0) activityDiversityIndex++; // 工作高强度 | |
if ((data.PAQ620 || 0) > 0) activityDiversityIndex++; // 工作中等强度 | |
if ((data.PAQ635 || 0) > 0) activityDiversityIndex++; // 交通活动 | |
if ((data.PAQ650 || 0) > 0) activityDiversityIndex++; // 休闲高强度 | |
if ((data.PAQ665 || 0) > 0) activityDiversityIndex++; // 休闲中等强度 | |
// ===================================================== | |
// C. 活动比例/构成特征 (Activity Ratio/Composition) | |
// ===================================================== | |
// C1. 高强度活动MET-分钟占比 | |
const vigorousMETTotal = vigorousWorkMETs + vigorousRecMETs; | |
const vigorousMETRatio = totalMETMinutesWeek > 0 ? vigorousMETTotal / totalMETMinutesWeek : 0; | |
// C2. 活动/久坐比 | |
const totalActiveMinutesWeek = totalVigorousMinutesWeek + totalModerateMinutesWeek; | |
const totalSedentaryMinutesWeek = (data.sedentary_minutes || data.PAD680 || 480) * 7; // 每日久坐 × 7天 | |
const activitySedentaryRatio = totalSedentaryMinutesWeek > 0 ? totalActiveMinutesWeek / totalSedentaryMinutesWeek : 0; | |
// ===================================================== | |
// D. 指南达标特征 (Guideline Adherence) | |
// ===================================================== | |
// D1. 每周中等强度等效总分钟数 | |
const totalModerateEquivalentMinutes = totalModerateMinutesWeek + (2 * totalVigorousMinutesWeek); | |
// D2. 是否达到WHO体力活动推荐量 | |
const guidelineAdherenceBinary = totalModerateEquivalentMinutes >= 150 ? 1 : 0; | |
// D3. 体力活动水平分级 | |
let activityLevelCategorical; | |
if (totalModerateEquivalentMinutes >= 300) { | |
activityLevelCategorical = 3; // 非常活跃 | |
} else if (totalModerateEquivalentMinutes >= 150) { | |
activityLevelCategorical = 2; // 活跃 | |
} else if (totalModerateEquivalentMinutes > 0) { | |
activityLevelCategorical = 1; // 低度活跃 | |
} else { | |
activityLevelCategorical = 0; // 不活跃 | |
} | |
// ===================================================== | |
// 整理最终衍生特征 | |
// ===================================================== | |
// A. 活动总量/剂量特征 | |
derived.Total_MET_minutes_week = parseFloat(totalMETMinutesWeek.toFixed(2)); | |
derived.Total_Vigorous_Minutes_week = parseFloat(totalVigorousMinutesWeek.toFixed(2)); | |
derived.Total_Moderate_Minutes_week = parseFloat(totalModerateMinutesWeek.toFixed(2)); | |
// B. 活动模式/行为特征 | |
derived.Avg_Vigorous_Duration_Per_Bout = parseFloat(avgVigorousDurationPerBout.toFixed(2)); | |
derived.Avg_Moderate_Duration_Per_Bout = parseFloat(avgModerateDurationPerBout.toFixed(2)); | |
derived.Activity_Diversity_Index = activityDiversityIndex; | |
// C. 活动比例/构成特征 | |
derived.Vigorous_MET_Ratio = parseFloat(vigorousMETRatio.toFixed(3)); | |
derived.Activity_Sedentary_Ratio = parseFloat(activitySedentaryRatio.toFixed(3)); | |
// D. 指南达标特征 | |
derived.Total_Moderate_Equivalent_Minutes = parseFloat(totalModerateEquivalentMinutes.toFixed(2)); | |
derived.Guideline_Adherence_Binary = guidelineAdherenceBinary; | |
derived.Activity_Level_Categorical = activityLevelCategorical; | |
console.log('详细评估NHANES PAQ原始数据:', { | |
PAQ610: data.PAQ610, PAD615: data.PAD615, | |
PAQ625: data.PAQ625, PAD630: data.PAD630, | |
PAQ640: data.PAQ640, PAD645: data.PAD645, | |
PAQ655: data.PAQ655, PAD660: data.PAD660, | |
PAQ670: data.PAQ670, PAD675: data.PAD675, | |
PAD680: data.PAD680 | |
}); | |
console.log('详细评估计算的衍生特征:', derived); | |
return derived; | |
} | |
/** | |
* 返回快速结果 | |
*/ | |
function backToQuickResults() { | |
document.getElementById('detailedAssessmentSection').classList.remove('show'); | |
document.getElementById('quickResultsSection').style.display = 'block'; | |
document.getElementById('quickResultsSection').scrollIntoView({ | |
behavior: 'smooth' | |
}); | |
} | |
/** | |
* 工具函数 | |
*/ | |
function showLoading() { | |
// 加载状态已移除,保留函数以避免错误 | |
} | |
function hideLoading() { | |
// 加载状态已移除,保留函数以避免错误 | |
} | |
/** | |
* 显示详细评估加载状态 | |
*/ | |
function showDetailedLoading() { | |
// 隐藏详细表单,显示加载状态 | |
document.getElementById('detailedAssessmentSection').classList.remove('show'); | |
// 在快速结果区域显示加载信息 | |
const loadingHTML = ` | |
<div class="text-center py-5"> | |
<div class="spinner-border text-success" style="width: 3rem; height: 3rem;" role="status"> | |
<span class="visually-hidden">评估中...</span> | |
</div> | |
<h4 class="mt-3 text-success"> | |
<span class="lang-zh">正在进行DiCE个性化建议分析...</span> | |
<span class="lang-en" style="display: none;">Performing DiCE personalized recommendation analysis...</span> | |
</h4> | |
<div class="mt-3"> | |
<div class="progress mb-2" style="max-width: 400px; margin: 0 auto;"> | |
<div class="progress-bar progress-bar-striped progress-bar-animated bg-success" | |
style="width: 30%" id="diceProgress"></div> | |
</div> | |
<p class="text-muted mb-1" id="diceStatusText"> | |
<span class="lang-zh">🧠 AI正在分析您的特征数据...</span> | |
<span class="lang-en" style="display: none;">🧠 AI is analyzing your feature data...</span> | |
</p> | |
<small class="text-info" id="diceTimeText"> | |
<span class="lang-zh">预计需要1-3分钟</span> | |
<span class="lang-en" style="display: none;">Estimated 1-3 minutes</span> | |
</small> | |
</div> | |
<div class="alert alert-info mt-4" style="max-width: 500px; margin: 0 auto;"> | |
<i class="fas fa-info-circle me-2"></i> | |
<strong> | |
<span class="lang-zh">DiCE分析说明:</span> | |
<span class="lang-en">DiCE Analysis Description:</span> | |
</strong><br> | |
<span class="lang-zh">系统正在使用DiCE (Diverse Counterfactual Explanations) 算法为您生成个性化的改善建议。此过程需要深度分析您的数据特征,确保建议的精确性和可执行性。</span> | |
<span class="lang-en">The system is using DiCE (Diverse Counterfactual Explanations) algorithm to generate personalized improvement recommendations for you. This process requires deep analysis of your data features to ensure the accuracy and feasibility of recommendations.</span> | |
</div> | |
</div> | |
`; | |
document.getElementById('quickResultsContent').innerHTML = loadingHTML; | |
document.getElementById('quickResultsSection').style.display = 'block'; | |
// 滚动到加载区域 | |
document.getElementById('quickResultsSection').scrollIntoView({ | |
behavior: 'smooth' | |
}); | |
// 启动进度条动画 | |
startDiceProgressAnimation(); | |
} | |
/** | |
* 启动DiCE进度条动画 | |
*/ | |
function startDiceProgressAnimation() { | |
let progress = 30; | |
const progressBar = document.getElementById('diceProgress'); | |
const statusText = document.getElementById('diceStatusText'); | |
const timeText = document.getElementById('diceTimeText'); | |
const messages = { | |
zh: [ | |
"🧠 AI正在分析您的特征数据...", | |
"🔍 正在搜索最优反事实解释...", | |
"⚙️ DiCE算法深度分析中...", | |
"📊 生成个性化改善建议...", | |
"✨ 即将完成,请稍候..." | |
], | |
en: [ | |
"🧠 AI is analyzing your feature data...", | |
"🔍 Searching for optimal counterfactual explanations...", | |
"⚙️ DiCE algorithm deep analysis in progress...", | |
"📊 Generating personalized improvement recommendations...", | |
"✨ Almost complete, please wait..." | |
] | |
}; | |
let messageIndex = 0; | |
let startTime = Date.now(); | |
// 设置初始状态文本为双语 | |
if (statusText) { | |
statusText.innerHTML = ` | |
<span class="lang-zh">${messages.zh[0]}</span> | |
<span class="lang-en">${messages.en[0]}</span> | |
`; | |
updateLanguageDisplay(); | |
} | |
const interval = setInterval(() => { | |
const elapsed = (Date.now() - startTime) / 1000; | |
// 更新进度条(前2分钟慢速增长到90%) | |
if (elapsed < 120) { | |
progress = 30 + (elapsed / 120) * 60; // 30% -> 90% | |
} else { | |
progress = Math.min(95, 90 + (elapsed - 120) / 60 * 5); // 90% -> 95% | |
} | |
progressBar.style.width = progress + '%'; | |
// 更新消息 | |
const currentLang = currentLanguage || 'zh'; | |
const currentMessages = messages[currentLang]; | |
if (Math.floor(elapsed / 25) > messageIndex && messageIndex < currentMessages.length - 1) { | |
messageIndex++; | |
statusText.innerHTML = ` | |
<span class="lang-zh">${messages.zh[messageIndex]}</span> | |
<span class="lang-en" style="display: none;">${messages.en[messageIndex]}</span> | |
`; | |
updateLanguageDisplay(); | |
} | |
// 更新时间提示 | |
if (elapsed < 60) { | |
timeText.innerHTML = ` | |
<span class="lang-zh">已运行 ${Math.floor(elapsed)} 秒</span> | |
<span class="lang-en" style="display: none;">Running for ${Math.floor(elapsed)} seconds</span> | |
`; | |
} else { | |
const minutes = Math.floor(elapsed / 60); | |
const seconds = Math.floor(elapsed % 60); | |
timeText.innerHTML = ` | |
<span class="lang-zh">已运行 ${minutes}分${seconds}秒</span> | |
<span class="lang-en" style="display: none;">Running for ${minutes}m ${seconds}s</span> | |
`; | |
} | |
updateLanguageDisplay(); | |
// 移除超时限制,让DiCE运行到完成 | |
}, 1000); | |
// 保存interval引用以便可以清除 | |
window.diceProgressInterval = interval; | |
} | |
/** | |
* 隐藏详细评估加载状态 | |
*/ | |
function hideDetailedLoading() { | |
// 清除进度条动画 | |
if (window.diceProgressInterval) { | |
clearInterval(window.diceProgressInterval); | |
window.diceProgressInterval = null; | |
} | |
} | |
function updateQuickSubmitButton() { | |
const form = document.getElementById('quickForm'); | |
const submitBtn = document.getElementById('quickSubmitBtn'); | |
const inputs = form.querySelectorAll('input[required], select[required]'); | |
let allValid = true; | |
inputs.forEach(input => { | |
if (!input.value || !input.checkValidity()) { | |
allValid = false; | |
} | |
}); | |
submitBtn.disabled = !allValid; | |
} | |
function getRiskLevelText(level) { | |
const levelTexts = { | |
zh: { | |
'low': '低风险', | |
'medium': '中风险', | |
'high': '高风险' | |
}, | |
en: { | |
'low': 'Low Risk', | |
'medium': 'Medium Risk', | |
'high': 'High Risk' | |
} | |
}; | |
return levelTexts[currentLanguage][level] || level; | |
} | |
function showAlert(message) { | |
// 简单的警告显示 | |
alert(message); | |
} | |
/** | |
* 显示统一问卷表单 | |
*/ | |
function showUnifiedForm() { | |
// 隐藏快速评估结果 | |
const resultsSection = document.getElementById('resultsSection'); | |
if (resultsSection) { | |
resultsSection.style.display = 'none'; | |
} | |
// 显示统一问卷 | |
const unifiedSection = document.getElementById('unifiedFormSection'); | |
if (!unifiedSection) { | |
// 创建统一问卷区域 | |
createUnifiedFormSection(); | |
} else { | |
unifiedSection.style.display = 'block'; | |
// 滚动到问卷区域 | |
unifiedSection.scrollIntoView({ | |
behavior: 'smooth' | |
}); | |
} | |
} | |
/** | |
* 创建统一问卷区域 | |
*/ | |
function createUnifiedFormSection() { | |
// 插入到body中,避免与主容器冲突 | |
const body = document.body; | |
const unifiedHTML = ` | |
<div id="unifiedFormSection" class="mt-5"> | |
<div class="container"> | |
<div class="row justify-content-center"> | |
<div class="col-12 col-lg-10 col-xl-8"> | |
<div class="card shadow-lg"> | |
<div class="card-header bg-success 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 - Get Personalized Recommendations</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 Instructions</span> | |
</h6> | |
<p class="mb-0"> | |
<span class="lang-zh">基于您的快速评估结果,完成以下详细问卷可获得: | |
<strong>SarcoI和SarcoII建议模型的精确评估</strong> + <strong>DiCE个性化改善建议</strong></span> | |
<span class="lang-en">Based on your quick assessment results, completing the detailed questionnaire will provide: | |
<strong>Precise assessment from SarcoI and SarcoII advisory models</strong> + <strong>DiCE personalized improvement recommendations</strong></span> | |
</p> | |
</div> | |
<form id="unifiedDetailForm"> | |
<!-- 体力活动问卷 --> | |
${generatePhysicalActivityHTML()} | |
<!-- 提交按钮 --> | |
<div class="text-center mt-4"> | |
<button type="submit" class="btn btn-success btn-lg px-5" id="unifiedSubmitBtn"> | |
<i class="fas fa-chart-line me-2"></i> | |
<span class="lang-zh">生成个性化建议</span> | |
<span class="lang-en">Generate Personalized Recommendations</span> | |
</button> | |
<button type="button" class="btn btn-outline-secondary ms-3" onclick="hideUnifiedForm()"> | |
<i class="fas fa-times me-2"></i> | |
取消 | |
</button> | |
</div> | |
</form> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
`; | |
body.insertAdjacentHTML('beforeend', unifiedHTML); | |
// 初始化表单事件 | |
initializeUnifiedForm(); | |
// 更新语言显示 | |
updateLanguageDisplay(); | |
// 滚动到问卷区域 | |
setTimeout(() => { | |
const unifiedSection = document.getElementById('unifiedFormSection'); | |
if (unifiedSection) { | |
unifiedSection.scrollIntoView({ | |
behavior: 'smooth' | |
}); | |
} | |
}, 100); | |
} | |
/** | |
* 生成体力活动问卷HTML | |
*/ | |
function generatePhysicalActivityHTML() { | |
return ` | |
<div class="section-header mb-4"> | |
<h5 class="text-success"> | |
<i class="fas fa-running me-2"></i> | |
<span class="lang-zh">NHANES 体力活动问卷</span> | |
<span class="lang-en">NHANES Physical Activity Questionnaire</span> | |
</h5> | |
<hr> | |
</div> | |
<!-- 工作相关活动 --> | |
<div class="mb-4"> | |
<h6 class="text-primary"> | |
<span class="lang-zh">工作相关体力活动</span> | |
<span class="lang-en">Work-related Physical Activity</span> | |
</h6> | |
<div class="mb-3"> | |
<label for="PAQ605" class="form-label"> | |
<span class="lang-zh">您的工作是否涉及高强度体力活动?</span> | |
<span class="lang-en">Does your work involve vigorous-intensity activity?</span> | |
<span class="text-success">*</span> | |
</label> | |
<select class="form-select" id="PAQ605" name="PAQ605" required onchange="toggleActivityDetails('PAQ605', 'vigorous_work_details')"> | |
<option value="">请选择 / Please select</option> | |
<option value="1">是 / Yes</option> | |
<option value="2">否 / No</option> | |
</select> | |
<div class="form-text"> | |
<span class="lang-zh">如搬运重物、挖掘或建筑工作等,持续至少10分钟</span> | |
<span class="lang-en">Such as carrying heavy loads, digging, or construction work for at least 10 minutes</span> | |
</div> | |
</div> | |
<div id="vigorous_work_details"> | |
<div class="row mb-3"> | |
<div class="col-md-6"> | |
<label for="PAQ610" class="form-label"> | |
<span class="lang-zh">一周内有几天进行高强度工作活动?</span> | |
<span class="lang-en">How many days per week?</span> | |
</label> | |
<input type="number" class="form-control" id="PAQ610" name="PAQ610" min="0" max="7" step="1" value="0"> | |
</div> | |
<div class="col-md-6"> | |
<label for="PAD615" class="form-label"> | |
<span class="lang-zh">每次活动多长时间?(分钟)</span> | |
<span class="lang-en">Duration per day? (minutes)</span> | |
</label> | |
<input type="number" class="form-control" id="PAD615" name="PAD615" min="0" max="1440" step="1" value="0"> | |
</div> | |
</div> | |
</div> | |
<div class="mb-3"> | |
<label for="PAQ620" class="form-label"> | |
<span class="lang-zh">您的工作是否涉及中等强度体力活动?</span> | |
<span class="lang-en">Does your work involve moderate-intensity activity?</span> | |
<span class="text-success">*</span> | |
</label> | |
<select class="form-select" id="PAQ620" name="PAQ620" required onchange="toggleActivityDetails('PAQ620', 'moderate_work_details')"> | |
<option value="">请选择 / Please select</option> | |
<option value="1">是 / Yes</option> | |
<option value="2">否 / No</option> | |
</select> | |
<div class="form-text"> | |
<span class="lang-zh">如快步走或搬运轻物等,持续至少10分钟</span> | |
<span class="lang-en">Such as brisk walking or carrying light loads for at least 10 minutes</span> | |
</div> | |
</div> | |
<div id="moderate_work_details"> | |
<div class="row mb-3"> | |
<div class="col-md-6"> | |
<label for="PAQ625" class="form-label"> | |
<span class="lang-zh">一周内有几天进行中等强度工作活动?</span> | |
<span class="lang-en">How many days per week?</span> | |
</label> | |
<input type="number" class="form-control" id="PAQ625" name="PAQ625" min="0" max="7" step="1" value="0"> | |
</div> | |
<div class="col-md-6"> | |
<label for="PAD630" class="form-label"> | |
<span class="lang-zh">每次活动多长时间?(分钟)</span> | |
<span class="lang-en">Duration per day? (minutes)</span> | |
</label> | |
<input type="number" class="form-control" id="PAD630" name="PAD630" min="0" max="1440" step="1" value="0"> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- 交通相关活动 --> | |
<div class="mb-4"> | |
<h6 class="text-primary"> | |
<span class="lang-zh">交通相关活动</span> | |
<span class="lang-en">Transportation Activity</span> | |
</h6> | |
<div class="mb-3"> | |
<label for="PAQ635" class="form-label"> | |
<span class="lang-zh">您是否步行或骑自行车出行?</span> | |
<span class="lang-en">Do you walk or bicycle for transportation?</span> | |
<span class="text-success">*</span> | |
</label> | |
<select class="form-select" id="PAQ635" name="PAQ635" required onchange="toggleActivityDetails('PAQ635', 'transport_details')"> | |
<option value="">请选择 / Please select</option> | |
<option value="1">是 / Yes</option> | |
<option value="2">否 / No</option> | |
</select> | |
<div class="form-text"> | |
<span class="lang-zh">如上学、购物、上班等出行方式,持续至少10分钟</span> | |
<span class="lang-en">Such as to school, shopping, work, etc. for at least 10 minutes</span> | |
</div> | |
</div> | |
<div id="transport_details"> | |
<div class="row mb-3"> | |
<div class="col-md-6"> | |
<label for="PAQ640" class="form-label"> | |
<span class="lang-zh">一周内有几天步行或骑车出行?</span> | |
<span class="lang-en">How many days per week?</span> | |
</label> | |
<input type="number" class="form-control" id="PAQ640" name="PAQ640" min="0" max="7" step="1" value="0"> | |
</div> | |
<div class="col-md-6"> | |
<label for="PAD645" class="form-label"> | |
<span class="lang-zh">每次出行多长时间?(分钟)</span> | |
<span class="lang-en">Duration per day? (minutes)</span> | |
</label> | |
<input type="number" class="form-control" id="PAD645" name="PAD645" min="0" max="1440" step="1" value="0"> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- 休闲运动活动 --> | |
<div class="mb-4"> | |
<h6 class="text-primary"> | |
<span class="lang-zh">休闲运动活动</span> | |
<span class="lang-en">Recreational Physical Activity</span> | |
</h6> | |
<div class="mb-3"> | |
<label for="PAQ650" class="form-label"> | |
<span class="lang-zh">您是否参与高强度休闲运动?</span> | |
<span class="lang-en">Do you do vigorous-intensity sports or activities?</span> | |
<span class="text-success">*</span> | |
</label> | |
<select class="form-select" id="PAQ650" name="PAQ650" required onchange="toggleActivityDetails('PAQ650', 'vigorous_rec_details')"> | |
<option value="">请选择 / Please select</option> | |
<option value="1">是 / Yes</option> | |
<option value="2">否 / No</option> | |
</select> | |
<div class="form-text"> | |
<span class="lang-zh">如跑步、篮球等引起大量喘息或心率增加的运动,持续至少10分钟</span> | |
<span class="lang-en">Such as running, basketball that cause large increases in breathing or heart rate for at least 10 minutes</span> | |
</div> | |
</div> | |
<div id="vigorous_rec_details"> | |
<div class="row mb-3"> | |
<div class="col-md-6"> | |
<label for="PAQ655" class="form-label"> | |
<span class="lang-zh">一周内有几天进行高强度休闲运动?</span> | |
<span class="lang-en">How many days per week?</span> | |
</label> | |
<input type="number" class="form-control" id="PAQ655" name="PAQ655" min="0" max="7" step="1" value="0"> | |
</div> | |
<div class="col-md-6"> | |
<label for="PAD660" class="form-label"> | |
<span class="lang-zh">每次运动多长时间?(分钟)</span> | |
<span class="lang-en">Duration per day? (minutes)</span> | |
</label> | |
<input type="number" class="form-control" id="PAD660" name="PAD660" min="0" max="1440" step="1" value="0"> | |
</div> | |
</div> | |
</div> | |
<div class="mb-3"> | |
<label for="PAQ665" class="form-label"> | |
<span class="lang-zh">您是否参与中等强度休闲运动?</span> | |
<span class="lang-en">Do you do moderate-intensity sports or activities?</span> | |
<span class="text-success">*</span> | |
</label> | |
<select class="form-select" id="PAQ665" name="PAQ665" required onchange="toggleActivityDetails('PAQ665', 'moderate_rec_details')"> | |
<option value="">请选择 / Please select</option> | |
<option value="1">是 / Yes</option> | |
<option value="2">否 / No</option> | |
</select> | |
<div class="form-text"> | |
<span class="lang-zh">如快步走、骑车、游泳或排球等,持续至少10分钟</span> | |
<span class="lang-en">Such as brisk walking, bicycling, swimming, or volleyball for at least 10 minutes</span> | |
</div> | |
</div> | |
<div id="moderate_rec_details"> | |
<div class="row mb-3"> | |
<div class="col-md-6"> | |
<label for="PAQ670" class="form-label"> | |
<span class="lang-zh">一周内有几天进行中等强度休闲运动?</span> | |
<span class="lang-en">How many days per week?</span> | |
</label> | |
<input type="number" class="form-control" id="PAQ670" name="PAQ670" min="0" max="7" step="1" value="0"> | |
</div> | |
<div class="col-md-6"> | |
<label for="PAD675" class="form-label"> | |
<span class="lang-zh">每次运动多长时间?(分钟)</span> | |
<span class="lang-en">Duration per day? (minutes)</span> | |
</label> | |
<input type="number" class="form-control" id="PAD675" name="PAD675" min="0" max="1440" step="1" value="0"> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- 久坐行为 --> | |
<div class="section-header mb-4"> | |
<h5 class="text-success"> | |
<i class="fas fa-chair me-2"></i> | |
<span class="lang-zh">久坐行为</span> | |
<span class="lang-en">Sedentary Behavior</span> | |
</h5> | |
<hr> | |
</div> | |
<div class="mb-4"> | |
<label for="PAD680" class="form-label"> | |
<span class="lang-zh">您每天通常坐着多长时间?(分钟)</span> | |
<span class="lang-en">How much time do you usually spend sitting on a typical day? (minutes)</span> | |
<span class="text-success">*</span> | |
</label> | |
<input type="number" class="form-control" id="PAD680" name="PAD680" min="0" max="1440" step="1" required value="480"> | |
<div class="form-text"> | |
<span class="lang-zh">包括在学校、家中、通勤、与朋友相处时的坐着时间,如办公、乘车、读书、看电视、使用电脑等(不包括睡觉时间)</span> | |
<span class="lang-en">Include time spent at school, home, commuting, and with friends. Include time spent sitting at a desk, traveling in a car or bus, reading, playing cards, watching television, or using a computer. Do not include time spent sleeping.</span> | |
</div> | |
</div> | |
`; | |
} | |
/** | |
* 初始化统一表单 | |
*/ | |
function initializeUnifiedForm() { | |
const form = document.getElementById('unifiedDetailForm'); | |
form.addEventListener('submit', handleUnifiedSubmit); | |
// 初始化活动详情显示状态 | |
initializeActivityDetailsDisplay(); | |
// 初始化活动详情切换 | |
const activitySelects = ['PAQ605', 'PAQ620', 'PAQ635', 'PAQ650', 'PAQ665']; | |
activitySelects.forEach(selectId => { | |
const select = document.getElementById(selectId); | |
if (select) { | |
select.addEventListener('change', function() { | |
const detailsMap = { | |
'PAQ605': 'vigorous_work_details', | |
'PAQ620': 'moderate_work_details', | |
'PAQ635': 'transport_details', | |
'PAQ650': 'vigorous_rec_details', | |
'PAQ665': 'moderate_rec_details' | |
}; | |
toggleActivityDetails(selectId, detailsMap[selectId]); | |
}); | |
} | |
}); | |
} | |
/** | |
* 处理统一表单提交 | |
*/ | |
async function handleUnifiedSubmit(event) { | |
event.preventDefault(); | |
console.log('开始统一评估...'); | |
// 收集快速评估的基本数据 | |
const basicData = collectQuickFormData(); | |
// 收集详细问卷数据 | |
const detailData = collectUnifiedFormData(); | |
// 合并数据 | |
const fullData = { ...basicData, ...detailData }; | |
// 显示加载状态 | |
showUnifiedLoading(); | |
try { | |
// 添加语言参数 | |
fullData.language = currentLanguage; | |
// 调用完整评估API | |
const result = await performFullAssessment(fullData); | |
// 显示结果 | |
displayUnifiedResults(result); | |
} catch (error) { | |
console.error('统一评估失败:', error); | |
hideUnifiedLoading(); | |
showAlert('评估过程中出现错误:' + error.message); | |
} | |
} | |
/** | |
* 收集统一表单数据 | |
*/ | |
function collectUnifiedFormData() { | |
const form = document.getElementById('unifiedDetailForm'); | |
const formData = new FormData(form); | |
const data = {}; | |
// 收集所有表单数据 | |
for (let [key, value] of formData.entries()) { | |
if (value !== '' && value !== null && value !== undefined) { | |
// 转换数字类型 | |
if (['number'].includes(form.querySelector(`[name="${key}"]`).type)) { | |
data[key] = parseFloat(value); | |
} else { | |
data[key] = parseInt(value); | |
} | |
} | |
} | |
// 设置sedentary_minutes等同于PAD680 | |
data.sedentary_minutes = data.PAD680 || 480; | |
// 计算衍生特征 | |
const derivedFeatures = calculateDerivedFeatures(data); | |
const finalData = { ...data, ...derivedFeatures }; | |
console.log('收集的详细数据:', finalData); | |
return finalData; | |
} | |
/** | |
* 根据NHANES PAQ数据计算衍生特征 | |
*/ | |
function calculateDerivedFeatures(data) { | |
const derived = {}; | |
// 计算各类活动的MET-分钟 | |
const vigorousWorkMETs = 8.0 * (data.PAD615 || 0) * (data.PAQ610 || 0); | |
const moderateWorkMETs = 4.0 * (data.PAD630 || 0) * (data.PAQ625 || 0); | |
const transportationMETs = 4.0 * (data.PAD645 || 0) * (data.PAQ640 || 0); | |
const vigorousRecMETs = 8.0 * (data.PAD660 || 0) * (data.PAQ655 || 0); | |
const moderateRecMETs = 4.0 * (data.PAD675 || 0) * (data.PAQ670 || 0); | |
const totalMETMinutesWeek = vigorousWorkMETs + moderateWorkMETs + transportationMETs + vigorousRecMETs + moderateRecMETs; | |
// 计算活动分钟数 | |
const vigorousWorkMins = (data.PAD615 || 0) * (data.PAQ610 || 0); | |
const vigorousRecMins = (data.PAD660 || 0) * (data.PAQ655 || 0); | |
const totalVigorousMinutesWeek = vigorousWorkMins + vigorousRecMins; | |
const moderateWorkMins = (data.PAD630 || 0) * (data.PAQ625 || 0); | |
const transportationMins = (data.PAD645 || 0) * (data.PAQ640 || 0); | |
const moderateRecMins = (data.PAD675 || 0) * (data.PAQ670 || 0); | |
const totalModerateMinutesWeek = moderateWorkMins + transportationMins + moderateRecMins; | |
// 计算活动多样性指数 | |
let activityDiversityIndex = 0; | |
if ((data.PAQ605 || 0) == 1) activityDiversityIndex++; | |
if ((data.PAQ620 || 0) == 1) activityDiversityIndex++; | |
if ((data.PAQ635 || 0) == 1) activityDiversityIndex++; | |
if ((data.PAQ650 || 0) == 1) activityDiversityIndex++; | |
if ((data.PAQ665 || 0) == 1) activityDiversityIndex++; | |
// 计算比例特征 | |
const vigorousMETTotal = vigorousWorkMETs + vigorousRecMETs; | |
const vigorousMETRatio = totalMETMinutesWeek > 0 ? vigorousMETTotal / totalMETMinutesWeek : 0; | |
const totalActiveMinutesWeek = totalVigorousMinutesWeek + totalModerateMinutesWeek; | |
const totalSedentaryMinutesWeek = (data.PAD680 || 480) * 7; | |
const activitySedentaryRatio = totalSedentaryMinutesWeek > 0 ? totalActiveMinutesWeek / totalSedentaryMinutesWeek : 0; | |
// 设置衍生特征 | |
derived.Total_MET_minutes_week = parseFloat(totalMETMinutesWeek.toFixed(2)); | |
derived.Total_Vigorous_Minutes_week = parseFloat(totalVigorousMinutesWeek.toFixed(2)); | |
derived.Total_Moderate_Minutes_week = parseFloat(totalModerateMinutesWeek.toFixed(2)); | |
derived.Activity_Diversity_Index = activityDiversityIndex; | |
derived.Vigorous_MET_Ratio = parseFloat(vigorousMETRatio.toFixed(3)); | |
derived.Activity_Sedentary_Ratio = parseFloat(activitySedentaryRatio.toFixed(3)); | |
return derived; | |
} | |
/** | |
* 执行完整评估 | |
*/ | |
async function performFullAssessment(userData) { | |
console.log('调用完整评估API...'); | |
// 移除超时限制,让DiCE运行到完成 | |
const controller = new AbortController(); | |
try { | |
const response = await fetch('/api/full_assessment', { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json', | |
}, | |
body: JSON.stringify(userData), | |
signal: controller.signal | |
}); | |
// 移除超时清理 | |
if (!response.ok) { | |
let errorMessage = `HTTP ${response.status}: `; | |
try { | |
const errorData = await response.json(); | |
errorMessage += errorData.detail || JSON.stringify(errorData); | |
} catch { | |
errorMessage += response.statusText || '服务器错误'; | |
} | |
throw new Error(errorMessage); | |
} | |
const result = await response.json(); | |
console.log('完整评估结果:', result); | |
return result; | |
} catch (error) { | |
// 移除超时处理 | |
throw error; | |
} | |
} | |
/** | |
* 显示统一加载状态 | |
*/ | |
function showUnifiedLoading() { | |
const unifiedSection = document.getElementById('unifiedFormSection'); | |
unifiedSection.style.display = 'none'; | |
// 创建加载区域 | |
const loadingHTML = ` | |
<div id="unifiedLoadingSection" class="text-center py-5"> | |
<div class="spinner-border text-success" style="width: 3rem; height: 3rem;" role="status"> | |
<span class="visually-hidden">评估中...</span> | |
</div> | |
<h4 class="mt-3 text-success"> | |
<span class="lang-zh">正在进行完整AI分析...</span> | |
<span class="lang-en" style="display: none;">AI is analyzing your complete feature data...</span> | |
</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-success" | |
style="width: 30%" id="unifiedProgressBar"></div> | |
</div> | |
<p class="text-muted mb-1" id="unifiedStatusText"> | |
<span class="lang-zh">🧠 AI正在分析您的完整特征数据...</span> | |
<span class="lang-en" style="display: none;">🧠 AI is analyzing your complete feature data...</span> | |
</p> | |
<small class="text-info" id="unifiedTimeText"> | |
<span class="lang-zh">预计需要1-3分钟</span> | |
<span class="lang-en" style="display: none;">Estimated 1-3 minutes</span> | |
</small> | |
</div> | |
</div> | |
`; | |
const container = document.querySelector('.container'); | |
container.insertAdjacentHTML('beforeend', loadingHTML); | |
// 启动进度条动画 | |
startUnifiedProgressAnimation(); | |
document.getElementById('unifiedLoadingSection').scrollIntoView({ | |
behavior: 'smooth' | |
}); | |
} | |
/** | |
* 隐藏统一加载状态 | |
*/ | |
function hideUnifiedLoading() { | |
const loadingSection = document.getElementById('unifiedLoadingSection'); | |
if (loadingSection) { | |
loadingSection.remove(); | |
} | |
// 清除进度条动画 | |
if (window.unifiedProgressInterval) { | |
clearInterval(window.unifiedProgressInterval); | |
window.unifiedProgressInterval = null; | |
} | |
} | |
/** | |
* 启动统一进度条动画 | |
*/ | |
function startUnifiedProgressAnimation() { | |
let progress = 30; | |
const progressBar = document.getElementById('unifiedProgressBar'); | |
const statusText = document.getElementById('unifiedStatusText'); | |
const timeText = document.getElementById('unifiedTimeText'); | |
const messages = { | |
zh: [ | |
"🧠 AI正在分析您的完整特征数据...", | |
"🔍 SarcoI建议模型分析中...", | |
"⚙️ SarcoII建议模型分析中...", | |
"📊 DiCE生成个性化建议...", | |
"✨ 即将完成,请稍候..." | |
], | |
en: [ | |
"🧠 AI is analyzing your complete feature data...", | |
"🔍 SarcoI advisory model analysis in progress...", | |
"⚙️ SarcoII advisory model analysis in progress...", | |
"📊 DiCE generating personalized recommendations...", | |
"✨ Almost complete, please wait..." | |
] | |
}; | |
let messageIndex = 0; | |
let startTime = Date.now(); | |
// 设置初始状态文本为双语 | |
if (statusText) { | |
statusText.innerHTML = ` | |
<span class="lang-zh">${messages.zh[0]}</span> | |
<span class="lang-en">${messages.en[0]}</span> | |
`; | |
updateLanguageDisplay(); | |
} | |
const interval = setInterval(() => { | |
const elapsed = (Date.now() - startTime) / 1000; | |
// 更新进度条 | |
if (elapsed < 120) { | |
progress = 30 + (elapsed / 120) * 60; | |
} else { | |
progress = Math.min(95, 90 + (elapsed - 120) / 60 * 5); | |
} | |
if (progressBar) progressBar.style.width = progress + '%'; | |
// 更新消息 | |
const currentLang = currentLanguage || 'zh'; | |
const currentMessages = messages[currentLang]; | |
if (Math.floor(elapsed / 30) > messageIndex && messageIndex < currentMessages.length - 1) { | |
messageIndex++; | |
if (statusText) { | |
statusText.innerHTML = ` | |
<span class="lang-zh">${messages.zh[messageIndex]}</span> | |
<span class="lang-en" style="display: none;">${messages.en[messageIndex]}</span> | |
`; | |
updateLanguageDisplay(); | |
} | |
} | |
// 更新时间 | |
if (timeText) { | |
if (elapsed < 60) { | |
timeText.innerHTML = ` | |
<span class="lang-zh">已运行 ${Math.floor(elapsed)} 秒</span> | |
<span class="lang-en" style="display: none;">Running for ${Math.floor(elapsed)} seconds</span> | |
`; | |
} else { | |
const minutes = Math.floor(elapsed / 60); | |
const seconds = Math.floor(elapsed % 60); | |
timeText.innerHTML = ` | |
<span class="lang-zh">已运行 ${minutes}分${seconds}秒</span> | |
<span class="lang-en" style="display: none;">Running for ${minutes}m ${seconds}s</span> | |
`; | |
} | |
updateLanguageDisplay(); | |
} | |
// 移除超时限制 | |
}, 1000); | |
window.unifiedProgressInterval = interval; | |
} | |
/** | |
* 显示统一结果 | |
*/ | |
function displayUnifiedResults(assessment) { | |
hideUnifiedLoading(); | |
const html = buildUnifiedResultsHTML(assessment); | |
// 隐藏问卷表单 | |
hideUnifiedForm(); | |
// 创建结果区域,确保在问卷下方显示 | |
const resultsHTML = ` | |
<div id="unifiedResultsSection" class="mt-5"> | |
<div class="container"> | |
${html} | |
</div> | |
</div> | |
`; | |
// 找到问卷表单的位置,在其后插入结果 | |
const unifiedFormSection = document.getElementById('unifiedFormSection'); | |
if (unifiedFormSection) { | |
unifiedFormSection.insertAdjacentHTML('afterend', resultsHTML); | |
} else { | |
// 如果找不到问卷表单,则添加到容器末尾 | |
const container = document.querySelector('.container'); | |
container.insertAdjacentHTML('beforeend', resultsHTML); | |
} | |
// 应用当前语言设置到新生成的内容 | |
updateLanguageDisplay(); | |
document.getElementById('unifiedResultsSection').scrollIntoView({ | |
behavior: 'smooth' | |
}); | |
} | |
/** | |
* 获取风险原因的双语文本 | |
*/ | |
function getRiskReasonText(reason, lang) { | |
const reasonTexts = { | |
'advisory_model_high_risk': { | |
'zh': '建议模型判定高风险', | |
'en': 'Advisory model indicates high risk' | |
}, | |
'screening_model_risk': { | |
'zh': '筛查模型判定风险', | |
'en': 'Screening model indicates risk' | |
}, | |
'both_models_low_risk': { | |
'zh': '双模型均为低风险', | |
'en': 'Both models indicate low risk' | |
} | |
}; | |
return reasonTexts[reason] ? reasonTexts[reason][lang] : reason; | |
} | |
/** | |
* 构建统一结果HTML | |
*/ | |
function buildUnifiedResultsHTML(assessment) { | |
const screening = assessment.screening; | |
const advisory = assessment.advisory; | |
const comprehensiveRisk = assessment.comprehensive_risk; | |
return ` | |
<div class="alert alert-success"> | |
<h5 class="alert-heading"> | |
<i class="fas fa-check-circle me-2"></i> | |
<span class="lang-zh">完整评估完成</span> | |
<span class="lang-en">Complete Assessment Finished</span> | |
</h5> | |
<p class="mb-0"> | |
<span class="lang-zh">基于I类和II类肌少症筛查和建议模型的综合评估结果</span> | |
<span class="lang-en">Comprehensive assessment results based on Type I and Type II sarcopenia screening and advisory models</span> | |
</p> | |
</div> | |
<!-- 建议模型结果 --> | |
<div class="mb-4"> | |
<div class="alert alert-success"> | |
<h6 class="mb-0"> | |
<i class="fas fa-lightbulb me-2"></i> | |
<span class="lang-zh">建议模型结果</span> | |
<span class="lang-en">Advisory Model Results</span> | |
</h6> | |
</div> | |
<div class="row"> | |
<!-- I类肌少症建议 --> | |
<div class="col-md-6 mb-3"> | |
<div class="card border-primary model-card-bg"> | |
<div class="card-body text-center"> | |
${screening.sarcoI_advisory_risk ? ` | |
<div class="risk-level risk-${screening.sarcoI_advisory_risk} mb-3"> | |
<i class="fas fa-lightbulb fa-lg mb-1"></i> | |
<div><strong> | |
<span class="lang-zh">I类肌少症建议模型</span> | |
<span class="lang-en">Type I Sarcopenia Advisory Model</span> | |
</strong></div> | |
<div class="small"> | |
<span class="lang-zh">高精确率 · 个性化建议</span> | |
<span class="lang-en">High Precision · Personalized Recommendations</span> | |
</div> | |
</div> | |
<div class="mb-3"> | |
<div class="fw-bold text-${screening.sarcoI_advisory_risk === 'high' ? 'danger' : 'success'} fs-5"> | |
<span class="lang-zh">风险等级: ${screening.sarcoI_advisory_risk === 'high' ? '高风险' : screening.sarcoI_advisory_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">Risk Level: ${screening.sarcoI_advisory_risk === 'high' ? 'High Risk' : screening.sarcoI_advisory_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</div> | |
<div class="text-muted small"> | |
<span class="lang-zh">肌少症特征相似度: ${(screening.sarcoI_advisory_probability * 100).toFixed(1)}%</span> | |
<span class="lang-en">Sarcopenia Feature Similarity: ${(screening.sarcoI_advisory_probability * 100).toFixed(1)}%</span> | |
</div> | |
</div> | |
<div class="mb-3 p-2 bg-light rounded"> | |
<div class="fw-bold text-primary mb-1"> | |
<span class="lang-zh">建议模型诊断您${screening.sarcoI_advisory_risk === 'high' ? '患有' : '未患有'}I类肌少症</span> | |
<span class="lang-en">Advisory model diagnosis: You ${screening.sarcoI_advisory_risk === 'high' ? 'have' : 'do not have'} Type I Sarcopenia</span> | |
</div> | |
</div> | |
<div class="mb-3"> | |
<div class="fw-bold text-info mb-1"> | |
<span class="lang-zh">模型性能指标</span> | |
<span class="lang-en">Model Performance Metrics</span> | |
</div> | |
<div class="text-dark"> | |
<span class="lang-zh">精确率: <strong>60.23%</strong> | 召回率: <strong>66.14%</strong></span> | |
<span class="lang-en">Precision: <strong>60.23%</strong> | Recall: <strong>66.14%</strong></span> | |
</div> | |
</div> | |
` : ` | |
<div class="text-muted"> | |
<i class="fas fa-exclamation-triangle fa-lg mb-2"></i> | |
<div><strong> | |
<span class="lang-zh">I类肌少症建议模型</span> | |
<span class="lang-en">Type I Sarcopenia Advisory Model</span> | |
</strong></div> | |
<div class="small mb-3"> | |
<span class="lang-zh">高精确率 · 个性化建议</span> | |
<span class="lang-en">High Precision · Personalized Recommendations</span> | |
</div> | |
<div class="alert alert-warning"> | |
<strong> | |
<span class="lang-zh">特征数据不足</span> | |
<span class="lang-en">Insufficient Feature Data</span> | |
</strong><br> | |
<small> | |
<span class="lang-zh">需要完整的体力活动数据才能进行精确评估</span> | |
<span class="lang-en">Complete physical activity data required for precise assessment</span> | |
</small> | |
</div> | |
<div class="mb-3"> | |
<div class="fw-bold text-info mb-1"> | |
<span class="lang-zh">模型性能指标</span> | |
<span class="lang-en">Model Performance Metrics</span> | |
</div> | |
<div class="text-dark"> | |
<span class="lang-zh">精确率: <strong>60.23%</strong> | 召回率: <strong>66.14%</strong></span> | |
<span class="lang-en">Precision: <strong>60.23%</strong> | Recall: <strong>66.14%</strong></span> | |
</div> | |
</div> | |
</div> | |
`} | |
</div> | |
</div> | |
</div> | |
<!-- II类肌少症建议 --> | |
<div class="col-md-6 mb-3"> | |
<div class="card border-primary model-card-bg"> | |
<div class="card-body text-center"> | |
${screening.sarcoII_advisory_risk ? ` | |
<div class="risk-level risk-${screening.sarcoII_advisory_risk} mb-3"> | |
<i class="fas fa-lightbulb fa-lg mb-1"></i> | |
<div><strong> | |
<span class="lang-zh">II类肌少症建议模型</span> | |
<span class="lang-en">Type II Sarcopenia Advisory Model</span> | |
</strong></div> | |
<div class="small"> | |
<span class="lang-zh">高精确率 · 个性化建议</span> | |
<span class="lang-en">High Precision · Personalized Recommendations</span> | |
</div> | |
</div> | |
<div class="mb-3"> | |
<div class="fw-bold text-${screening.sarcoII_advisory_risk === 'high' ? 'danger' : 'success'} fs-5"> | |
<span class="lang-zh">风险等级: ${screening.sarcoII_advisory_risk === 'high' ? '高风险' : screening.sarcoII_advisory_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">Risk Level: ${screening.sarcoII_advisory_risk === 'high' ? 'High Risk' : screening.sarcoII_advisory_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</div> | |
<div class="text-muted small"> | |
<span class="lang-zh">肌少症特征相似度: ${(screening.sarcoII_advisory_probability * 100).toFixed(1)}%</span> | |
<span class="lang-en">Sarcopenia Feature Similarity: ${(screening.sarcoII_advisory_probability * 100).toFixed(1)}%</span> | |
</div> | |
</div> | |
<div class="mb-3 p-2 bg-light rounded"> | |
<div class="fw-bold text-primary mb-1"> | |
<span class="lang-zh">建议模型诊断您${screening.sarcoII_advisory_risk === 'high' ? '患有' : '未患有'}II类肌少症</span> | |
<span class="lang-en">Advisory model diagnosis: You ${screening.sarcoII_advisory_risk === 'high' ? 'have' : 'do not have'} Type II Sarcopenia</span> | |
</div> | |
</div> | |
<div class="mb-3"> | |
<div class="fw-bold text-info mb-1"> | |
<span class="lang-zh">模型性能指标</span> | |
<span class="lang-en">Model Performance Metrics</span> | |
</div> | |
<div class="text-dark"> | |
<span class="lang-zh">精确率: <strong>68.42%</strong> | 召回率: <strong>33.05%</strong></span> | |
<span class="lang-en">Precision: <strong>68.42%</strong> | Recall: <strong>33.05%</strong></span> | |
</div> | |
</div> | |
` : ` | |
<div class="text-muted"> | |
<i class="fas fa-exclamation-triangle fa-lg mb-2"></i> | |
<div><strong> | |
<span class="lang-zh">II类肌少症建议模型</span> | |
<span class="lang-en">Type II Sarcopenia Advisory Model</span> | |
</strong></div> | |
<div class="small mb-3"> | |
<span class="lang-zh">高精确率 · 个性化建议</span> | |
<span class="lang-en">High Precision · Personalized Recommendations</span> | |
</div> | |
<div class="alert alert-warning"> | |
<strong> | |
<span class="lang-zh">特征数据不足</span> | |
<span class="lang-en">Insufficient Feature Data</span> | |
</strong><br> | |
<small> | |
<span class="lang-zh">需要完整的体力活动数据才能进行精确评估</span> | |
<span class="lang-en">Complete physical activity data required for precise assessment</span> | |
</small> | |
</div> | |
<div class="mb-3"> | |
<div class="fw-bold text-info mb-1"> | |
<span class="lang-zh">模型性能指标</span> | |
<span class="lang-en">Model Performance Metrics</span> | |
</div> | |
<div class="text-dark"> | |
<span class="lang-zh">精确率: <strong>68.42%</strong> | 召回率: <strong>33.05%</strong></span> | |
<span class="lang-en">Precision: <strong>68.42%</strong> | Recall: <strong>33.05%</strong></span> | |
</div> | |
</div> | |
</div> | |
`} | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- 个性化建议 - 居中显示 --> | |
${advisory && advisory.recommendations && advisory.recommendations.length > 0 ? ` | |
<div class="row justify-content-center mt-4"> | |
<div class="col-12 col-lg-10 col-xl-8"> | |
<div class="card border-warning shadow-lg"> | |
<div class="card-header bg-warning text-dark text-center"> | |
<h5 class="mb-0"> | |
<i class="fas fa-lightbulb me-2"></i> | |
<span class="lang-zh">DiCE个性化建议</span> | |
<span class="lang-en">DiCE Personalized Recommendations</span> | |
</h5> | |
</div> | |
<div class="card-body"> | |
${advisory.recommendations.map((rec, index) => { | |
// 处理不同格式的建议数据 | |
let title, description, priority, target_change, expected_impact; | |
if (typeof rec === 'string') { | |
// 如果是字符串,尝试解析JSON | |
try { | |
const parsed = JSON.parse(rec); | |
title = parsed.title || `建议 ${index + 1}`; | |
description = parsed.description || rec; | |
priority = parsed.priority || '中'; | |
target_change = parsed.target_change; | |
expected_impact = parsed.expected_impact; | |
} catch { | |
title = `建议 ${index + 1}`; | |
description = rec; | |
priority = '中'; | |
} | |
} else if (typeof rec === 'object' && rec !== null) { | |
// 如果是对象 | |
title = rec.title || `建议 ${index + 1}`; | |
description = rec.description || JSON.stringify(rec); | |
priority = rec.priority || '中'; | |
target_change = rec.target_change; | |
expected_impact = rec.expected_impact; | |
} else { | |
title = `建议 ${index + 1}`; | |
description = String(rec); | |
priority = '中'; | |
} | |
return ` | |
<div class="recommendation-item mb-3 p-3 border rounded"> | |
<h6 class="text-primary"> | |
<span class="badge bg-${(priority === '高' || priority === 'High') ? 'danger' : (priority === '中' || priority === 'Medium') ? 'warning' : 'info'} me-2">${priority}</span> | |
${title} | |
</h6> | |
<p class="mb-2">${description}</p> | |
${target_change ? `<div class="text-muted small mb-1"><strong><span class="lang-zh">目标:</span><span class="lang-en">Target:</span></strong> ${target_change}</div>` : ''} | |
${expected_impact ? `<div class="text-success small"><strong><span class="lang-zh">预期效果:</span><span class="lang-en">Expected Impact:</span></strong> ${expected_impact}</div>` : ''} | |
</div> | |
`; | |
}).join('')} | |
${advisory.fallback_used ? ` | |
<div class="alert alert-info mt-3"> | |
<small><i class="fas fa-info-circle me-1"></i> | |
<span class="lang-zh">由于DiCE分析复杂度较高,以上建议基于规则生成。如需更精确的个性化建议,建议咨询专业医生。</span> | |
<span class="lang-en">Due to the high complexity of DiCE analysis, the above recommendations are rule-based. For more precise personalized recommendations, please consult a professional doctor.</span> | |
</small> | |
</div> | |
` : ''} | |
</div> | |
</div> | |
</div> | |
` : ` | |
<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">Personalized Recommendations</span> | |
</h6> | |
<p class="mb-0"> | |
<span class="lang-zh">当前风险水平较低,暂无特殊建议。请继续保持健康的生活方式。</span> | |
<span class="lang-en">Current risk level is low, no special recommendations needed. Please continue maintaining a healthy lifestyle.</span> | |
</p> | |
</div> | |
`} | |
<!-- 综合风险评估卡片 --> | |
${comprehensiveRisk ? ` | |
<div class="mb-4"> | |
<div class="card border-warning bg-light"> | |
<div class="card-header bg-warning text-dark"> | |
<h5 class="mb-0"> | |
<i class="fas fa-balance-scale me-2"></i> | |
<span class="lang-zh">综合风险评估</span> | |
<span class="lang-en">Comprehensive Risk Assessment</span> | |
</h5> | |
</div> | |
<div class="card-body"> | |
<div class="row"> | |
${comprehensiveRisk.sarcoI ? ` | |
<div class="col-md-6 mb-3"> | |
<div class="card border-primary"> | |
<div class="card-body text-center"> | |
<h6 class="card-title text-primary"> | |
<span class="lang-zh">I类肌少症综合风险</span> | |
<span class="lang-en">Type I Sarcopenia Comprehensive Risk</span> | |
</h6> | |
<div class="risk-level risk-${comprehensiveRisk.sarcoI.comprehensive_risk} mb-3"> | |
<div class="fs-4 fw-bold"> | |
<span class="lang-zh">${comprehensiveRisk.sarcoI.comprehensive_risk === 'high' ? '高风险' : comprehensiveRisk.sarcoI.comprehensive_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">${comprehensiveRisk.sarcoI.comprehensive_risk === 'high' ? 'High Risk' : comprehensiveRisk.sarcoI.comprehensive_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</div> | |
</div> | |
<div class="small text-muted mb-2"> | |
<div><strong> | |
<span class="lang-zh">判定依据:</span> | |
<span class="lang-en">Assessment Basis:</span> | |
</strong></div> | |
<div> | |
<span class="lang-zh">${getRiskReasonText(comprehensiveRisk.sarcoI.risk_reason, 'zh')}</span> | |
<span class="lang-en">${getRiskReasonText(comprehensiveRisk.sarcoI.risk_reason, 'en')}</span> | |
</div> | |
</div> | |
<div class="small"> | |
<div class="mb-1"> | |
<span class="lang-zh">筛查模型概率: ${(comprehensiveRisk.sarcoI.screening_probability * 100).toFixed(1)}%</span> | |
<span class="lang-en">Screening Probability: ${(comprehensiveRisk.sarcoI.screening_probability * 100).toFixed(1)}%</span> | |
</div> | |
<div> | |
<span class="lang-zh">建议模型概率: ${(comprehensiveRisk.sarcoI.advisory_probability * 100).toFixed(1)}%</span> | |
<span class="lang-en">Advisory Probability: ${(comprehensiveRisk.sarcoI.advisory_probability * 100).toFixed(1)}%</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
` : ''} | |
${comprehensiveRisk.sarcoII ? ` | |
<div class="col-md-6 mb-3"> | |
<div class="card border-success"> | |
<div class="card-body text-center"> | |
<h6 class="card-title text-success"> | |
<span class="lang-zh">II类肌少症综合风险</span> | |
<span class="lang-en">Type II Sarcopenia Comprehensive Risk</span> | |
</h6> | |
<div class="risk-level risk-${comprehensiveRisk.sarcoII.comprehensive_risk} mb-3"> | |
<div class="fs-4 fw-bold"> | |
<span class="lang-zh">${comprehensiveRisk.sarcoII.comprehensive_risk === 'high' ? '高风险' : comprehensiveRisk.sarcoII.comprehensive_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">${comprehensiveRisk.sarcoII.comprehensive_risk === 'high' ? 'High Risk' : comprehensiveRisk.sarcoII.comprehensive_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</div> | |
</div> | |
<div class="small text-muted mb-2"> | |
<div><strong> | |
<span class="lang-zh">判定依据:</span> | |
<span class="lang-en">Assessment Basis:</span> | |
</strong></div> | |
<div> | |
<span class="lang-zh">${getRiskReasonText(comprehensiveRisk.sarcoII.risk_reason, 'zh')}</span> | |
<span class="lang-en">${getRiskReasonText(comprehensiveRisk.sarcoII.risk_reason, 'en')}</span> | |
</div> | |
</div> | |
<div class="small"> | |
<div class="mb-1"> | |
<span class="lang-zh">筛查模型概率: ${(comprehensiveRisk.sarcoII.screening_probability * 100).toFixed(1)}%</span> | |
<span class="lang-en">Screening Probability: ${(comprehensiveRisk.sarcoII.screening_probability * 100).toFixed(1)}%</span> | |
</div> | |
<div> | |
<span class="lang-zh">建议模型概率: ${(comprehensiveRisk.sarcoII.advisory_probability * 100).toFixed(1)}%</span> | |
<span class="lang-en">Advisory Probability: ${(comprehensiveRisk.sarcoII.advisory_probability * 100).toFixed(1)}%</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
` : ''} | |
</div> | |
<div class="mt-3 p-3 bg-info bg-opacity-10 rounded"> | |
<h6 class="text-info mb-2"> | |
<i class="fas fa-info-circle me-2"></i> | |
<span class="lang-zh">综合风险评估说明</span> | |
<span class="lang-en">Comprehensive Risk Assessment Explanation</span> | |
</h6> | |
<div class="small"> | |
<div class="mb-1"> | |
<span class="lang-zh"><strong>高风险:</strong> 建议模型(高精确率)判定为高风险</span> | |
<span class="lang-en"><strong>High Risk:</strong> Advisory model (high precision) indicates high risk</span> | |
</div> | |
<div class="mb-1"> | |
<span class="lang-zh"><strong>中风险:</strong> 筛查模型(高召回率)判定为风险,但建议模型为低风险</span> | |
<span class="lang-en"><strong>Medium Risk:</strong> Screening model (high recall) indicates risk, but advisory model shows low risk</span> | |
</div> | |
<div> | |
<span class="lang-zh"><strong>低风险:</strong> 双模型均判定为低风险</span> | |
<span class="lang-en"><strong>Low Risk:</strong> Both models indicate low risk</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
` : ''} | |
<div class="mt-4 text-center"> | |
<button class="btn btn-outline-primary" onclick="location.reload()"> | |
<i class="fas fa-redo me-2"></i> | |
<span class="lang-zh">重新评估</span> | |
<span class="lang-en">Reassess</span> | |
</button> | |
</div> | |
`; | |
} | |
/** | |
* 隐藏统一表单 | |
*/ | |
function hideUnifiedForm() { | |
const unifiedSection = document.getElementById('unifiedFormSection'); | |
if (unifiedSection) { | |
unifiedSection.style.display = 'none'; | |
} | |
// 显示原始结果 | |
const resultsSection = document.getElementById('resultsSection'); | |
if (resultsSection) { | |
resultsSection.style.display = 'block'; | |
resultsSection.scrollIntoView({ | |
behavior: 'smooth' | |
}); | |
} | |
} | |
function initializeDetailedForm(modelType) { | |
const form = document.getElementById('detailedForm'); | |
if (form) { | |
form.addEventListener('submit', async function(event) { | |
event.preventDefault(); | |
console.log('详细评估提交...', modelType); | |
try { | |
// 收集详细表单数据 | |
const detailedData = collectDetailedFormData(); | |
// 合并快速评估的基本数据和详细数据 | |
const combinedData = mergeQuickAndDetailedData(detailedData); | |
// 显示专门的详细评估加载状态 | |
showDetailedLoading(); | |
// 添加语言参数 | |
combinedData.language = currentLanguage; | |
// 调用完整评估API | |
const result = await performDetailedAssessment(combinedData); | |
// 显示详细结果 | |
displayDetailedResults(result, modelType); | |
} catch (error) { | |
console.error('详细评估失败:', error); | |
hideDetailedLoading(); | |
showAlert('详细评估过程中出现错误:' + error.message, 'danger'); | |
} | |
}); | |
} | |
} | |
/** | |
* 收集详细表单数据 | |
*/ | |
function collectDetailedFormData() { | |
const form = document.getElementById('detailedForm'); | |
const formData = new FormData(form); | |
const data = {}; | |
// 收集所有表单数据 | |
for (let [key, value] of formData.entries()) { | |
if (value !== '' && value !== null && value !== undefined) { | |
// 转换数字类型 | |
if (['number'].includes(form.querySelector(`[name="${key}"]`).type)) { | |
data[key] = parseFloat(value); | |
} else { | |
data[key] = parseInt(value); | |
} | |
} | |
} | |
// 确保所有PAQ字段都有默认值(避免Pydantic验证错误) | |
const requiredPAQFields = { | |
// 必需的选择字段 | |
'PAQ605': 2, 'PAQ620': 2, 'PAQ635': 2, 'PAQ650': 2, 'PAQ665': 2, | |
// 可选的天数字段(默认0) | |
'PAQ610': 0, 'PAQ625': 0, 'PAQ640': 0, 'PAQ655': 0, 'PAQ670': 0, | |
// 可选的时长字段(默认0) | |
'PAD615': 0, 'PAD630': 0, 'PAD645': 0, 'PAD660': 0, 'PAD675': 0, | |
// 久坐时间(默认8小时) | |
'PAD680': 480, | |
// 医疗史字段(默认否) | |
'arthritis': 0, 'diabetes': 0 | |
}; | |
// 为缺失的字段设置默认值 | |
for (const [field, defaultValue] of Object.entries(requiredPAQFields)) { | |
if (!(field in data)) { | |
data[field] = defaultValue; | |
} | |
} | |
// 设置sedentary_minutes等同于PAD680 | |
data.sedentary_minutes = data.PAD680 || 480; | |
console.log('收集的详细表单数据(含默认值):', data); | |
return data; | |
} | |
/** | |
* 合并快速评估和详细评估数据 | |
*/ | |
function mergeQuickAndDetailedData(detailedData) { | |
// 获取快速评估的基础数据 (人口统计学数据) | |
const quickData = { | |
age_years: parseFloat(document.getElementById('age_years').value), | |
race_ethnicity: parseInt(document.getElementById('race_ethnicity').value), | |
height: parseFloat(document.getElementById('height').value), | |
weight: parseFloat(document.getElementById('weight').value), | |
waist: parseFloat(document.getElementById('waist').value) | |
}; | |
// 计算BMI和WWI | |
const heightInMeters = quickData.height / 100; | |
quickData.body_mass_index = parseFloat((quickData.weight / (heightInMeters * heightInMeters)).toFixed(1)); | |
quickData.WWI = parseFloat((quickData.waist / Math.sqrt(quickData.weight)).toFixed(2)); | |
// 合并数据 | |
const combinedData = { ...quickData, ...detailedData }; | |
// 计算衍生特征 | |
const derivedFeatures = calculateDerivedFeatures(combinedData); | |
// 最终合并所有数据 | |
const finalData = { ...combinedData, ...derivedFeatures }; | |
console.log('合并后的完整数据:', finalData); | |
return finalData; | |
} | |
/** | |
* 执行详细评估 | |
*/ | |
async function performDetailedAssessment(userData) { | |
console.log('调用详细评估API...'); | |
// 移除超时限制,让DiCE运行到完成 | |
const controller = new AbortController(); | |
try { | |
const response = await fetch('/api/full_assessment', { | |
method: 'POST', | |
headers: { | |
'Content-Type': 'application/json', | |
}, | |
body: JSON.stringify(userData), | |
signal: controller.signal | |
}); | |
return await handleDetailedResponse(response); | |
} catch (error) { | |
// 移除超时处理 | |
throw error; | |
} | |
} | |
/** | |
* 处理详细评估响应 | |
*/ | |
async function handleDetailedResponse(response) { | |
if (!response.ok) { | |
let errorMessage = `HTTP ${response.status}: `; | |
try { | |
const errorData = await response.json(); | |
console.error('服务器错误详情:', errorData); | |
if (response.status === 422 && errorData.detail) { | |
if (Array.isArray(errorData.detail)) { | |
const validationErrors = errorData.detail.map(err => | |
`字段"${err.loc.join('.')}"错误: ${err.msg}` | |
).join('; '); | |
errorMessage += validationErrors; | |
} else { | |
errorMessage += JSON.stringify(errorData.detail); | |
} | |
} else if (response.status === 500) { | |
errorMessage += currentLanguage === 'en' ? | |
'Internal server error, possibly due to issues during DiCE analysis' : | |
'服务器内部错误,可能是DiCE分析过程中出现问题'; | |
} else { | |
errorMessage += errorData.detail || JSON.stringify(errorData); | |
} | |
} catch (parseError) { | |
errorMessage += response.statusText || '服务器错误'; | |
} | |
throw new Error(errorMessage); | |
} | |
try { | |
const result = await response.json(); | |
console.log('详细评估结果:', result); | |
return result; | |
} catch (parseError) { | |
console.error('解析响应JSON失败:', parseError); | |
throw new Error('服务器响应格式错误,请稍后重试'); | |
} | |
} | |
/** | |
* 显示详细评估结果 | |
*/ | |
function displayDetailedResults(assessment, modelType) { | |
// 清除加载状态和进度条动画 | |
hideDetailedLoading(); | |
// 隐藏详细表单 | |
document.getElementById('detailedAssessmentSection').classList.remove('show'); | |
// 生成详细结果HTML | |
const html = buildDetailedResultsHTML(assessment, modelType); | |
// 显示在快速结果区域 | |
document.getElementById('quickResultsContent').innerHTML = html; | |
document.getElementById('quickResultsSection').style.display = 'block'; | |
// 应用当前语言设置到新生成的内容 | |
updateLanguageDisplay(); | |
// 滚动到结果区域 | |
document.getElementById('quickResultsSection').scrollIntoView({ | |
behavior: 'smooth' | |
}); | |
console.log('详细评估结果显示完成'); | |
} | |
/** | |
* 构建详细结果HTML | |
*/ | |
function buildDetailedResultsHTML(assessment, modelType) { | |
const screening = assessment.screening; | |
const advisory = assessment.advisory; | |
const modelTitles = { | |
zh: { | |
'sarcoI_advisory': 'SarcoI 建议模型', | |
'sarcoII_advisory': 'SarcoII 建议模型' | |
}, | |
en: { | |
'sarcoI_advisory': 'SarcoI Advisory Model', | |
'sarcoII_advisory': 'SarcoII Advisory Model' | |
} | |
}; | |
return ` | |
<div class="alert alert-success"> | |
<h5 class="alert-heading"> | |
<i class="fas fa-magic me-2"></i> | |
<span class="lang-zh">${modelTitles.zh[modelType]} 个性化建议评估完成</span> | |
<span class="lang-en">${modelTitles.en[modelType]} Personalized Recommendation Assessment Completed</span> | |
</h5> | |
<p class="mb-0"> | |
<span class="lang-zh">基于DiCE反事实分析的个性化改善建议</span> | |
<span class="lang-en">Personalized improvement recommendations based on DiCE counterfactual analysis</span> | |
</p> | |
</div> | |
<!-- 综合风险评估卡片 --> | |
${assessment.comprehensive_risk ? ` | |
<div class="mb-4"> | |
<div class="card border-warning bg-light"> | |
<div class="card-header bg-warning text-dark"> | |
<h5 class="mb-0"> | |
<i class="fas fa-balance-scale me-2"></i> | |
<span class="lang-zh">综合风险评估</span> | |
<span class="lang-en">Comprehensive Risk Assessment</span> | |
</h5> | |
</div> | |
<div class="card-body"> | |
<div class="row"> | |
${assessment.comprehensive_risk.sarcoI ? ` | |
<div class="col-md-6 mb-3"> | |
<div class="card border-primary"> | |
<div class="card-body text-center"> | |
<h6 class="card-title text-primary"> | |
<span class="lang-zh">I类肌少症综合风险</span> | |
<span class="lang-en">Type I Sarcopenia Comprehensive Risk</span> | |
</h6> | |
<div class="risk-level risk-${assessment.comprehensive_risk.sarcoI.comprehensive_risk} mb-3"> | |
<div class="fs-4 fw-bold"> | |
<span class="lang-zh">${assessment.comprehensive_risk.sarcoI.comprehensive_risk === 'high' ? '高风险' : assessment.comprehensive_risk.sarcoI.comprehensive_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">${assessment.comprehensive_risk.sarcoI.comprehensive_risk === 'high' ? 'High Risk' : assessment.comprehensive_risk.sarcoI.comprehensive_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</div> | |
</div> | |
<div class="small text-muted mb-2"> | |
<div><strong> | |
<span class="lang-zh">判定依据:</span> | |
<span class="lang-en">Assessment Basis:</span> | |
</strong></div> | |
<div> | |
<span class="lang-zh">${assessment.comprehensive_risk.sarcoI.risk_reason}</span> | |
<span class="lang-en">${assessment.comprehensive_risk.sarcoI.risk_reason}</span> | |
</div> | |
</div> | |
<div class="small"> | |
<div class="mb-1"> | |
<span class="lang-zh">筛查模型概率: ${(assessment.comprehensive_risk.sarcoI.screening_probability * 100).toFixed(1)}% (阈值: 15%)</span> | |
<span class="lang-en">Screening Probability: ${(assessment.comprehensive_risk.sarcoI.screening_probability * 100).toFixed(1)}% (Threshold: 15%)</span> | |
</div> | |
<div> | |
<span class="lang-zh">建议模型概率: ${(assessment.comprehensive_risk.sarcoI.advisory_probability * 100).toFixed(1)}% (阈值: 36%)</span> | |
<span class="lang-en">Advisory Probability: ${(assessment.comprehensive_risk.sarcoI.advisory_probability * 100).toFixed(1)}% (Threshold: 36%)</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
` : ''} | |
${assessment.comprehensive_risk.sarcoII ? ` | |
<div class="col-md-6 mb-3"> | |
<div class="card border-success"> | |
<div class="card-body text-center"> | |
<h6 class="card-title text-success"> | |
<span class="lang-zh">II类肌少症综合风险</span> | |
<span class="lang-en">Type II Sarcopenia Comprehensive Risk</span> | |
</h6> | |
<div class="risk-level risk-${assessment.comprehensive_risk.sarcoII.comprehensive_risk} mb-3"> | |
<div class="fs-4 fw-bold"> | |
<span class="lang-zh">${assessment.comprehensive_risk.sarcoII.comprehensive_risk === 'high' ? '高风险' : assessment.comprehensive_risk.sarcoII.comprehensive_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">${assessment.comprehensive_risk.sarcoII.comprehensive_risk === 'high' ? 'High Risk' : assessment.comprehensive_risk.sarcoII.comprehensive_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</div> | |
</div> | |
<div class="small text-muted mb-2"> | |
<div><strong> | |
<span class="lang-zh">判定依据:</span> | |
<span class="lang-en">Assessment Basis:</span> | |
</strong></div> | |
<div> | |
<span class="lang-zh">${assessment.comprehensive_risk.sarcoII.risk_reason}</span> | |
<span class="lang-en">${assessment.comprehensive_risk.sarcoII.risk_reason}</span> | |
</div> | |
</div> | |
<div class="small"> | |
<div class="mb-1"> | |
<span class="lang-zh">筛查模型概率: ${(assessment.comprehensive_risk.sarcoII.screening_probability * 100).toFixed(1)}% (阈值: 9%)</span> | |
<span class="lang-en">Screening Probability: ${(assessment.comprehensive_risk.sarcoII.screening_probability * 100).toFixed(1)}% (Threshold: 9%)</span> | |
</div> | |
<div> | |
<span class="lang-zh">建议模型概率: ${(assessment.comprehensive_risk.sarcoII.advisory_probability * 100).toFixed(1)}% (阈值: 52%)</span> | |
<span class="lang-en">Advisory Probability: ${(assessment.comprehensive_risk.sarcoII.advisory_probability * 100).toFixed(1)}% (Threshold: 52%)</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
` : ''} | |
</div> | |
<div class="mt-3 p-3 bg-info bg-opacity-10 rounded"> | |
<h6 class="text-info mb-2"> | |
<i class="fas fa-info-circle me-2"></i> | |
<span class="lang-zh">综合风险评估说明</span> | |
<span class="lang-en">Comprehensive Risk Assessment Explanation</span> | |
</h6> | |
<div class="small"> | |
<div class="mb-1"> | |
<span class="lang-zh"><strong>高风险:</strong> 建议模型(高精确率)判定为高风险</span> | |
<span class="lang-en"><strong>High Risk:</strong> Advisory model (high precision) indicates high risk</span> | |
</div> | |
<div class="mb-1"> | |
<span class="lang-zh"><strong>中风险:</strong> 筛查模型(高召回率)判定为风险,但建议模型为低风险</span> | |
<span class="lang-en"><strong>Medium Risk:</strong> Screening model (high recall) indicates risk, but advisory model shows low risk</span> | |
</div> | |
<div> | |
<span class="lang-zh"><strong>低风险:</strong> 双模型均判定为低风险</span> | |
<span class="lang-en"><strong>Low Risk:</strong> Both models indicate low risk</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
` : ''} | |
<div class="row"> | |
<!-- 筛查结果 --> | |
<div class="col-md-6 mb-3"> | |
<div class="card border-primary model-card-bg"> | |
<div class="card-body"> | |
<h6 class="card-title text-primary"> | |
<span class="lang-zh">筛查评估 (高召回率)</span> | |
<span class="lang-en">Screening Assessment (High Recall)</span> | |
</h6> | |
<div class="text-center mb-3"> | |
<div class="risk-level risk-${screening.sarcoI_risk} mb-2"> | |
<i class="fas fa-search fa-lg mb-1"></i> | |
<div><strong> | |
<span class="lang-zh">SarcoI: ${screening.sarcoI_risk === 'high' ? '高风险' : screening.sarcoI_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">SarcoI: ${screening.sarcoI_risk === 'high' ? 'High Risk' : screening.sarcoI_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</strong></div> | |
<div class="small"> | |
<span class="lang-zh">相似度: ${(screening.sarcoI_probability * 100).toFixed(1)}% (阈值: ${(screening.sarcoI_threshold * 100).toFixed(0)}%)</span> | |
<span class="lang-en">Similarity: ${(screening.sarcoI_probability * 100).toFixed(1)}% (Threshold: ${(screening.sarcoI_threshold * 100).toFixed(0)}%)</span> | |
</div> | |
</div> | |
<div class="risk-level risk-${screening.sarcoII_risk} mb-2"> | |
<i class="fas fa-search fa-lg mb-1"></i> | |
<div><strong> | |
<span class="lang-zh">SarcoII: ${screening.sarcoII_risk === 'high' ? '高风险' : screening.sarcoII_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">SarcoII: ${screening.sarcoII_risk === 'high' ? 'High Risk' : screening.sarcoII_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</strong></div> | |
<div class="small"> | |
<span class="lang-zh">相似度: ${(screening.sarcoII_probability * 100).toFixed(1)}% (阈值: ${(screening.sarcoII_threshold * 100).toFixed(0)}%)</span> | |
<span class="lang-en">Similarity: ${(screening.sarcoII_probability * 100).toFixed(1)}% (Threshold: ${(screening.sarcoII_threshold * 100).toFixed(0)}%)</span> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- 建议结果 --> | |
<div class="col-md-6 mb-3"> | |
<div class="card border-primary model-card-bg"> | |
<div class="card-body"> | |
<h6 class="card-title text-primary"> | |
<span class="lang-zh">建议评估 (高精确率)</span> | |
<span class="lang-en">Advisory Assessment (High Precision)</span> | |
</h6> | |
<div class="text-center mb-3"> | |
${screening.sarcoI_advisory_risk ? ` | |
<div class="risk-level risk-${screening.sarcoI_advisory_risk} mb-2"> | |
<i class="fas fa-lightbulb fa-lg mb-1"></i> | |
<div><strong> | |
<span class="lang-zh">SarcoI: ${screening.sarcoI_advisory_risk === 'high' ? '高风险' : screening.sarcoI_advisory_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">SarcoI: ${screening.sarcoI_advisory_risk === 'high' ? 'High Risk' : screening.sarcoI_advisory_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</strong></div> | |
<div class="small"> | |
<span class="lang-zh">相似度: ${(screening.sarcoI_advisory_probability * 100).toFixed(1)}% (建议阈值: ${(screening.sarcoI_advisory_threshold * 100).toFixed(0)}%)</span> | |
<span class="lang-en">Similarity: ${(screening.sarcoI_advisory_probability * 100).toFixed(1)}% (Advisory Threshold: ${(screening.sarcoI_advisory_threshold * 100).toFixed(0)}%)</span> | |
</div> | |
</div> | |
` : `<div class="text-muted"> | |
<span class="lang-zh">SarcoI: 需要更多特征</span> | |
<span class="lang-en">SarcoI: More features required</span> | |
</div>`} | |
${screening.sarcoII_advisory_risk ? ` | |
<div class="risk-level risk-${screening.sarcoII_advisory_risk} mb-2"> | |
<i class="fas fa-lightbulb fa-lg mb-1"></i> | |
<div><strong> | |
<span class="lang-zh">SarcoII: ${screening.sarcoII_advisory_risk === 'high' ? '高风险' : screening.sarcoII_advisory_risk === 'medium' ? '中风险' : '低风险'}</span> | |
<span class="lang-en">SarcoII: ${screening.sarcoII_advisory_risk === 'high' ? 'High Risk' : screening.sarcoII_advisory_risk === 'medium' ? 'Medium Risk' : 'Low Risk'}</span> | |
</strong></div> | |
<div class="small"> | |
<span class="lang-zh">相似度: ${(screening.sarcoII_advisory_probability * 100).toFixed(1)}% (建议阈值: ${(screening.sarcoII_advisory_threshold * 100).toFixed(0)}%)</span> | |
<span class="lang-en">Similarity: ${(screening.sarcoII_advisory_probability * 100).toFixed(1)}% (Advisory Threshold: ${(screening.sarcoII_advisory_threshold * 100).toFixed(0)}%)</span> | |
</div> | |
</div> | |
` : `<div class="text-muted"> | |
<span class="lang-zh">SarcoII: 需要更多特征</span> | |
<span class="lang-en">SarcoII: More features required</span> | |
</div>`} | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- DiCE建议 --> | |
${advisory && advisory.recommendations ? ` | |
<div class="mt-4"> | |
<h6 class="text-primary"> | |
<i class="fas fa-magic me-2"></i> | |
<span class="lang-zh">个性化改善建议 (DiCE分析)</span> | |
<span class="lang-en">Personalized Improvement Recommendations (DiCE Analysis)</span> | |
</h6> | |
<div class="card"> | |
<div class="card-body"> | |
<div class="recommendations-content"> | |
${JSON.stringify(advisory.recommendations, null, 2)} | |
</div> | |
</div> | |
</div> | |
</div> | |
` : ''} | |
<div class="mt-4 text-center"> | |
<button class="btn btn-outline-primary" onclick="location.reload()"> | |
<i class="fas fa-redo me-2"></i> | |
<span class="lang-zh">重新评估</span> | |
<span class="lang-en">Reassess</span> | |
</button> | |
</div> | |
`; | |
} |