257 lines
9.5 KiB
HTML
257 lines
9.5 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CardioAI - 心血管疾病预测</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f5f5f5;
|
|
margin: 0;
|
|
padding: 20px;
|
|
}
|
|
.container {
|
|
max-width: 800px;
|
|
margin: 0 auto;
|
|
background-color: white;
|
|
padding: 30px;
|
|
border-radius: 10px;
|
|
box-shadow: 0 0 10px rgba(0,0,0,0.1);
|
|
}
|
|
h1 {
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
.form-group {
|
|
margin-bottom: 20px;
|
|
}
|
|
label {
|
|
display: block;
|
|
margin-bottom: 5px;
|
|
font-weight: bold;
|
|
color: #555;
|
|
}
|
|
input[type="number"] {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
}
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
border: 1px solid #ddd;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
}
|
|
button {
|
|
background-color: #4CAF50;
|
|
color: white;
|
|
padding: 15px 30px;
|
|
border: none;
|
|
border-radius: 5px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
margin-top: 20px;
|
|
}
|
|
button:hover {
|
|
background-color: #45a049;
|
|
}
|
|
.result {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
background-color: #f9f9f9;
|
|
border-radius: 5px;
|
|
border-left: 4px solid #4CAF50;
|
|
}
|
|
.error {
|
|
margin-top: 30px;
|
|
padding: 20px;
|
|
background-color: #ffebee;
|
|
border-radius: 5px;
|
|
border-left: 4px solid #f44336;
|
|
color: #c62828;
|
|
}
|
|
.form-row {
|
|
display: flex;
|
|
gap: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.form-row .form-group {
|
|
flex: 1;
|
|
}
|
|
@media (max-width: 768px) {
|
|
.form-row {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<h1>CardioAI - 心血管疾病预测</h1>
|
|
|
|
<form id="predictionForm">
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="age">年龄 (天)</label>
|
|
<input type="number" id="age" name="age" min="10000" max="25000" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="gender">性别</label>
|
|
<select id="gender" name="gender" required>
|
|
<option value="1">女</option>
|
|
<option value="2">男</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="height">身高 (cm)</label>
|
|
<input type="number" id="height" name="height" min="100" max="250" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="weight">体重 (kg)</label>
|
|
<input type="number" id="weight" name="weight" min="30" max="200" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="ap_hi">收缩压</label>
|
|
<input type="number" id="ap_hi" name="ap_hi" min="90" max="250" required>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="ap_lo">舒张压</label>
|
|
<input type="number" id="ap_lo" name="ap_lo" min="60" max="150" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="cholesterol">胆固醇</label>
|
|
<select id="cholesterol" name="cholesterol" required>
|
|
<option value="1">正常</option>
|
|
<option value="2">偏高</option>
|
|
<option value="3">很高</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="gluc">血糖</label>
|
|
<select id="gluc" name="gluc" required>
|
|
<option value="1">正常</option>
|
|
<option value="2">偏高</option>
|
|
<option value="3">很高</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<div class="form-group">
|
|
<label for="smoke">吸烟</label>
|
|
<select id="smoke" name="smoke" required>
|
|
<option value="0">否</option>
|
|
<option value="1">是</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="alco">饮酒</label>
|
|
<select id="alco" name="alco" required>
|
|
<option value="0">否</option>
|
|
<option value="1">是</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="active">运动</label>
|
|
<select id="active" name="active" required>
|
|
<option value="0">否</option>
|
|
<option value="1">是</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<button type="submit">预测心血管疾病风险</button>
|
|
</form>
|
|
|
|
<div id="result" class="result" style="display: none;">
|
|
<h2>预测结果</h2>
|
|
<p><strong>预测结果:</strong> <span id="predictionValue"></span></p>
|
|
<p><strong>患病概率:</strong> <span id="probabilityValue"></span>%</p>
|
|
<p><strong>风险评估:</strong> <span id="riskAssessment"></span></p>
|
|
</div>
|
|
|
|
<div id="error" class="error" style="display: none;">
|
|
<h2>错误</h2>
|
|
<p id="errorMessage"></p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.getElementById('predictionForm').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
|
|
// 隐藏之前的结果和错误
|
|
document.getElementById('result').style.display = 'none';
|
|
document.getElementById('error').style.display = 'none';
|
|
|
|
// 收集表单数据
|
|
const formData = {
|
|
age: parseInt(document.getElementById('age').value),
|
|
gender: parseInt(document.getElementById('gender').value),
|
|
height: parseInt(document.getElementById('height').value),
|
|
weight: parseInt(document.getElementById('weight').value),
|
|
ap_hi: parseInt(document.getElementById('ap_hi').value),
|
|
ap_lo: parseInt(document.getElementById('ap_lo').value),
|
|
cholesterol: parseInt(document.getElementById('cholesterol').value),
|
|
gluc: parseInt(document.getElementById('gluc').value),
|
|
smoke: parseInt(document.getElementById('smoke').value),
|
|
alco: parseInt(document.getElementById('alco').value),
|
|
active: parseInt(document.getElementById('active').value)
|
|
};
|
|
|
|
// 发送POST请求
|
|
fetch('/predict_cardio', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(formData)
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.error) {
|
|
// 显示错误
|
|
document.getElementById('errorMessage').textContent = data.error;
|
|
document.getElementById('error').style.display = 'block';
|
|
} else {
|
|
// 显示结果
|
|
document.getElementById('predictionValue').textContent = data.prediction === 1 ? '有心血管疾病风险' : '无心血管疾病风险';
|
|
document.getElementById('probabilityValue').textContent = (data.probability * 100).toFixed(2);
|
|
|
|
// 风险评估
|
|
let riskAssessment = '';
|
|
if (data.probability < 0.3) {
|
|
riskAssessment = '低风险';
|
|
} else if (data.probability < 0.6) {
|
|
riskAssessment = '中等风险';
|
|
} else {
|
|
riskAssessment = '高风险';
|
|
}
|
|
document.getElementById('riskAssessment').textContent = riskAssessment;
|
|
|
|
document.getElementById('result').style.display = 'block';
|
|
}
|
|
})
|
|
.catch(error => {
|
|
document.getElementById('errorMessage').textContent = '预测过程中发生错误，请稍后重试';
|
|
document.getElementById('error').style.display = 'block';
|
|
console.error('Error:', error);
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |