<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>嵌入式存储芯片质量评估系统</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f7fa;
color: #333;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
header {
background: linear-gradient(135deg, #2c3e50, #4a6491);
color: white;
padding: 20px 0;
text-align: center;
border-radius: 8px;
margin-bottom: 30px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.card {
background: white;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: 600;
}
input, select {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
button {
background: #3498db;
color: white;
border: none;
padding: 12px 20px;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s;
}
button:hover {
background: #2980b9;
}
.results {
display: none;
margin-top: 30px;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.chart-container {
position: relative;
height: 300px;
margin-bottom: 20px;
}
.quality-score {
text-align: center;
padding: 20px;
border-radius: 8px;
margin: 20px 0;
font-size: 24px;
font-weight: bold;
}
.score-excellent {
background: #d4edda;
color: #155724;
}
.score-good {
background: #d1ecf1;
color: #0c5460;
}
.score-fair {
background: #fff3cd;
color: #856404;
}
.score-poor {
background: #f8d7da;
color: #721c24;
}
.performance-metrics {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.metric {
padding: 10px;
background: #f8f9fa;
border-radius: 4px;
text-align: center;
}
.metric-value {
font-size: 18px;
font-weight: bold;
}
.metric-label {
font-size: 14px;
color: #6c757d;
}
footer {
text-align: center;
margin-top: 40px;
color: #6c757d;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>嵌入式存储芯片质量评估系统</h1>
<p>基于动态负载、存储行为分析和热特性分析的芯片质量评估</p>
</header>
<div class="card">
<h2>芯片测试参数</h2>
<form id="assessmentForm">
<div class="form-group">
<label for="chipId">芯片标识符</label>
<input type="text" id="chipId" placeholder="输入芯片ID或留空自动生成">
</div>
<div class="form-group">
<label for="scenario">目标应用场景</label>
<select id="scenario">
<option value="工业控制">工业控制</option>
<option value="数据中心" selected>数据中心</option>
<option value="移动设备">移动设备</option>
<option value="汽车电子">汽车电子</option>
</select>
</div>
<button type="button" id="assessBtn">开始质量评估</button>
</form>
</div>
<div id="results" class="results">
<div class="card">
<h2>质量评估结果</h2>
<div id="qualityScore" class="quality-score"></div>
<h3>性能指标</h3>
<div class="performance-metrics" id="performanceMetrics">
<!-- 性能指标将通过JavaScript动态生成 -->
</div>
<h3>电气特性曲线</h3>
<div class="grid">
<div class="card">
<h4>电压-电流特性</h4>
<div class="chart-container">
<canvas id="voltageCurrentChart"></canvas>
</div>
</div>
<div class="card">
<h4>性能-负载特性</h4>
<div class="chart-container">
<canvas id="performanceLoadChart"></canvas>
</div>
</div>
</div>
<h3>测试参数调整</h3>
<div id="adjustedParams" class="card">
<!-- 调整后的参数将通过JavaScript动态生成 -->
</div>
</div>
</div>
<footer>
<p>嵌入式存储芯片质量评估系统 © 2023 | 基于专利技术的模拟实现</p>
</footer>
</div>
<script>
document.getElementById('assessBtn').addEventListener('click', function() {
const chipId = document.getElementById('chipId').value || '';
const scenario = document.getElementById('scenario').value;
// 显示加载状态
const button = document.getElementById('assessBtn');
button.disabled = true;
button.textContent = '评估中...';
// 发送评估请求
fetch('/assess', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
chip_id: chipId,
scenario: scenario
})
})
.then(response => response.json())
.then(data => {
// 恢复按钮状态
button.disabled = false;
button.textContent = '开始质量评估';
// 显示结果区域
document.getElementById('results').style.display = 'block';
// 更新质量评分
updateQualityScore(data.characteristic_curves.quality_score);
// 更新性能指标
updatePerformanceMetrics(data.performance_vector);
// 更新图表
updateCharts(data.characteristic_curves);
// 更新调整参数
updateAdjustedParams(data.adjusted_params);
})
.catch(error => {
console.error('Error:', error);
button.disabled = false;
button.textContent = '开始质量评估';
alert('评估过程中发生错误，请重试。');
});
});
function updateQualityScore(score) {
const scoreElement = document.getElementById('qualityScore');
scoreElement.textContent = `质量评分: ${score}/100`;
// 根据评分设置不同的样式
scoreElement.className = 'quality-score';
if (score >= 90) {
scoreElement.classList.add('score-excellent');
} else if (score >= 75) {
scoreElement.classList.add('score-good');
} else if (score >= 60) {
scoreElement.classList.add('score-fair');
} else {
scoreElement.classList.add('score-poor');
}
}
function updatePerformanceMetrics(performance) {
const metricsContainer = document.getElementById('performanceMetrics');
metricsContainer.innerHTML = '';
const metrics = [
{ label: '电压稳定性', value: (performance.voltage_stability * 100).toFixed(1) + '%', std: performance.voltage_stability_std },
{ label: '电流消耗', value: performance.current_consumption.toFixed(3) + 'A', std: performance.current_consumption_std },
{ label: '响应时间', value: performance.response_time.toFixed(1) + 'ms', std: performance.response_time_std },
{ label: '错误率', value: (performance.error_rate * 100).toFixed(3) + '%', std: performance.error_rate_std }
];
metrics.forEach(metric => {
const metricElement = document.createElement('div');
metricElement.className = 'metric';
metricElement.innerHTML = `
<div class="metric-value">${metric.value}</div>
<div class="metric-label">${metric.label}</div>
<div class="metric-std">标准差: ${metric.std.toFixed(4)}</div>
`;
metricsContainer.appendChild(metricElement);
});
}
function updateCharts(curves) {
// 电压-电流特性图表
const voltageCurrentCtx = document.getElementById('voltageCurrentChart').getContext('2d');
const voltageCurrentChart = new Chart(voltageCurrentCtx, {
type: 'line',
data: {
datasets: [{
label: '电压-电流特性',
data: curves.voltage_current_curve.map(point => ({
x: point.current,
y: point.voltage
})),
borderColor: 'rgb(75, 192, 192)',
backgroundColor: 'rgba(75, 192, 192, 0.1)',
tension: 0.1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
title: {
display: true,
text: '电流 (A)'
}
},
y: {
title: {
display: true,
text: '电压 (V)'
}
}
}
}
});
// 性能-负载特性图表
const performanceLoadCtx = document.getElementById('performanceLoadChart').getContext('2d');
const performanceLoadChart = new Chart(performanceLoadCtx, {
type: 'line',
data: {
labels: curves.performance_load_curve.map(point => (point.load * 100).toFixed(0) + '%'),
datasets: [
{
label: '响应时间 (ms)',
data: curves.performance_load_curve.map(point => point.response_time),
borderColor: 'rgb(255, 99, 132)',
backgroundColor: 'rgba(255, 99, 132, 0.1)',
yAxisID: 'y'
},
{
label: '错误率 (%)',
data: curves.performance_load_curve.map(point => point.error_rate * 100),
borderColor: 'rgb(54, 162, 235)',
backgroundColor: 'rgba(54, 162, 235, 0.1)',
yAxisID: 'y1'
}
]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
x: {
title: {
display: true,
text: '负载'
}
},
y: {
type: 'linear',
display: true,
position: 'left',
title: {
display: true,
text: '响应时间 (ms)'
}
},
y1: {
type: 'linear',
display: true,
position: 'right',
title: {
display: true,
text: '错误率 (%)'
},
grid: {
drawOnChartArea: false
}
}
}
}
});
}
function updateAdjustedParams(params) {
const paramsContainer = document.getElementById('adjustedParams');
paramsContainer.innerHTML = '<h4>自适应调整后的测试参数</h4>';
const paramList = document.createElement('ul');
for (const [key, value] of Object.entries(params)) {
const listItem = document.createElement('li');
listItem.textContent = `{key}: {value}`;
paramList.appendChild(listItem);
}
paramsContainer.appendChild(paramList);
}
</script>
</body>
</html>