console
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能医学影像分析系统</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.18.0/dist/tf.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #2a7cc7;
--secondary: #3498db;
--accent: #1abc9c;
--light: #f8f9fa;
--dark: #2c3e50;
--success: #27ae60;
--warning: #f39c12;
--danger: #e74c3c;
--gray: #95a5a6;
--card-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
color: var(--dark);
min-height: 100vh;
padding: 20px;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
��:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能医学影像分析系统</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@3.18.0/dist/tf.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
:root {
--primary: #2a7cc7;
--secondary: #3498db;
--accent: #1abc9c;
--light: #f8f9fa;
--dark: #2c3e50;
--success: #27ae60;
--warning: #f39c12;
--danger: #e74c3c;
--gray: #95a5a6;
--card-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
body {
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
color: var(--dark);
min-height: 100vh;
padding: 20px;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0;
margin-bottom: 30px;
border-bottom: 2px solid rgba(42, 124, 199, 0.2);
}
.logo {
display: flex;
align-items: center;
gap: 15px;
}
.logo-icon {
background: var(--primary);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 24px;
}
.logo-text h1 {
font-size: 28px;
font-weight: 700;
color: var(--primary);
}
.logo-text p {
font-size: 14px;
color: var(--gray);
}
nav ul {
display: flex;
list-style: none;
gap: 25px;
}
nav a {
text-decoration: none;
color: var(--dark);
font-weight: 600;
padding: 8px 15px;
border-radius: 30px;
transition: all 0.3s ease;
font-size: 16px;
}
nav a:hover, nav a.active {
background: var(--primary);
color: white;
}
.main-content {
display: grid;
grid-template-columns: 1fr 350px;
gap: 25px;
}
.card {
background: white;
border-radius: 15px;
box-shadow: var(--card-shadow);
padding: 25px;
margin-bottom: 25px;
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-5px);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.card-title {
font-size: 20px;
font-weight: 700;
color: var(--primary);
display: flex;
align-items: center;
gap: 10px;
}
.upload-area {
border: 2px dashed var(--secondary);
border-radius: 10px;
padding: 40px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: rgba(52, 152, 219, 0.05);
margin-bottom: 20px;
}
.upload-area:hover {
background: rgba(52, 152, 219, 0.1);
}
.upload-icon {
font-size: 48px;
color: var(--secondary);
margin-bottom: 15px;
}
.btn {
background: var(--primary);
color: white;
border: none;
padding: 12px 25px;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 16px;
}
.btn:hover {
background: #1d6db0;
transform: translateY(-2px);
}
.btn-accent {
background: var(--accent);
}
.btn-accent:hover {
background: #16a085;
}
.btn-warning {
background: var(--warning);
}
.btn-warning:hover {
background: #e67e22;
}
.image-preview {
display: flex;
justify-content: center;
margin:
��:
25px 0;
}
.image-preview img {
max-width: 100%;
max-height: 400px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.analysis-controls {
display: flex;
gap: 15px;
justify-content: center;
margin: 20px 0;
}
.results-container {
margin-top: 30px;
}
.result-item {
display: flex;
justify-content: space-between;
padding: 15px;
background: rgba(26, 188, 156, 0.08);
border-radius: 10px;
margin-bottom: 12px;
border-left: 4px solid var(--accent);
}
.result-item.critical {
background: rgba(231, 76, 60, 0.08);
border-left: 4px solid var(--danger);
}
.result-label {
font-weight: 600;
}
.result-value {
font-weight: 700;
}
.history-list {
max-height: 400px;
overflow-y: auto;
}
.history-item {
padding: 15px;
border-radius: 10px;
background: white;
margin-bottom: 15px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
border-left: 3px solid var(--accent);
}
.history-item-header {
display: flex;
justify-content: space-between;
margin-bottom: 10px;
}
.history-date {
font-size: 14px;
color: var(--gray);
}
.history-type {
background: var(--primary);
color: white;
padding: 3px 10px;
border-radius: 20px;
font-size: 12px;
}
.history-diagnosis {
font-weight: 600;
color: var(--dark);
}
.status-indicator {
display: inline-block;
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 8px;
}
.status-normal {
background: var(--success);
}
.status-warning {
background: var(--warning);
}
.status-critical {
background: var(--danger);
}
.progress-container {
height: 8px;
background: #e0e0e0;
border-radius: 4px;
overflow: hidden;
margin-top: 5px;
}
.progress-bar {
height: 100%;
background: var(--accent);
width: 0%;
transition: width 0.5s ease;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 20px;
}
.stat-card {
background: white;
border-radius: 10px;
padding: 20px;
text-align: center;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.stat-value {
font-size: 32px;
font-weight: 700;
color: var(--primary);
margin: 10px 0;
}
.stat-label {
color: var(--gray);
font-size: 14px;
}
footer {
text-align: center;
margin-top: 40px;
padding: 20px;
��:
color: var(--gray);
font-size: 14px;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
.main-content {
grid-template-columns: 1fr;
}
header {
flex-direction: column;
gap: 20px;
}
nav ul {
flex-wrap: wrap;
justify-content: center;
}
.stats-grid {
grid-template-columns: 1fr;
}
}
.loading {
display: none;
text-align: center;
padding: 30px;
}
.spinner {
width: 50px;
height: 50px;
border: 5px solid rgba(26, 188, 156, 0.2);
border-top: 5px solid var(--accent);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">
<div class="logo-icon">
<i class="fas fa-heartbeat"></i>
</div>
<div class="logo-text">
<h1>智能医学影像分析系统</h1>
<p>AI驱动的医学影像诊断解决方案</p >
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i> 首页</li>
<li><i class="fas fa-history"></i> 历史记录</li>
<li><i class="fas fa-chart-line"></i> 数据分析</li>
<li><i class="fas fa-cog"></i> 设置</li>
</ul>
</nav>
</header>
<div class="main-content">
<div class="left-column">
<div class="card">
<div class="card-header">
<h2 class="card-title"><i class="fas fa-upload"></i> 上传医学影像</h2>
</div>
<div class="upload-area" id="uploadArea">
<div class="upload-icon">
<i class="fas fa-file-medical"></i>
</div>
<h3>拖放或点击上传医学影像</h3>
<p>支持格式: JPG, PNG, DICOM | 最大文件大小: 10MB</p >
<input type="file" id="fileInput" accept="image/*" style="display: none;">
<button class="btn" id="uploadBtn" style="margin-top: 20px;">
<i class="fas fa-cloud-upload-alt"></i> 选择文件
</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title"><i class="fas fa-search"></i> 影像预览</h2>
</div>
<div class="image-preview" id="imagePreview">
<p>上传医学影像后将在此处显示预览</p >
</div>
<div class="analysis-controls">
<button class="btn btn-accent" id="analyzeBtn">
<i class="fas fa-brain"></i> 开始智能分析
</button>
<button class="btn btn-warning" id="resetBtn">
��:
<i class="fas fa-redo"></i> 重置
</button>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title"><i class="fas fa-diagnoses"></i> 分析结果</h2>
</div>
<div class="loading" id="loading">
<div class="spinner"></div>
<p>AI正在分析影像，请稍候...</p >
<div class="progress-container">
<div class="progress-bar" id="progressBar"></div>
</div>
</div>
<div class="results-container" id="resultsContainer">
<p>分析结果将显示在此处</p >
</div>
</div>
</div>
<div class="right-column">
<div class="card">
<div class="card-header">
<h2 class="card-title"><i class="fas fa-chart-bar"></i> 统计概览</h2>
</div>
<div class="stats-grid">
<div class="stat-card">
<i class="fas fa-procedures" style="font-size: 30px; color: var(--secondary);"></i>
<div class="stat-value">1,248</div>
<div class="stat-label">已分析影像</div>
</div>
<div class="stat-card">
<i class="fas fa-check-circle" style="font-size: 30px; color: var(--success);"></i>
<div class="stat-value">92.3%</div>
<div class="stat-label">诊断准确率</div>
</div>
<div class="stat-card">
<i class="fas fa-bolt" style="font-size: 30px; color: var(--accent);"></i>
<div class="stat-value">3.2s</div>
<div class="stat-label">平均分析时间</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title"><i class="fas fa-history"></i> 最近分析</h2>
</div>
<div class="history-list">
<div class="history-item">
<div class="history-item-header">
<div class="history-date">2023-10-15 14:30</div>
<div class="history-type">CT扫描</div>
</div>
<div class="history-diagnosis">
<span class="status-indicator status-normal"></span>
正常结果
</div>
</div>
<div class="history-item">
<div class="history-item-header">
<div class="history-date">2023-10-14 10:15</div>
<div class="history-type">X光片</div>
</div>
<div class="history-diagnosis">
<span class="status-indicator status-warning"></span>
轻度异常发现
</div>
</div>
<div class="history-item">
<div class="history-item-header">
<div class="history-date">2023-10-12 09:45</div>
<div class="history-type">MRI</div>
</div>
<div class="history-diagnosis">
<span class="status-indicator status-critical"></span>
需要进一步检查
</div>
</div>
<div class="history-item">
<div class="history-item-header">
<div class="history-date">2023-10-10 16:20</div>
<div class="history-type">X光片</div>
</div>
<div class="history-diagnosis">
<span class="status-indicator status-normal"></span>
正常结果
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<h2 class="card-title"><i class="fas fa-info-circle"></i> 系统信息</h2>
</div>
<div class="result-item">
<div class="result-label">AI模型版本</div>
<div class="result-value">MedScanNet v3.2</div>
��:
</div>
<div class="result-item">
<div class="result-label">最后更新</div>
<div class="result-value">2023-10-01</div>
</div>
<div class="result-item">
<div class="result-label">支持类型</div>
<div class="result-value">X光, CT, MRI</div>
</div>
<div class="result-item">
<div class="result-label">系统状态</div>
<div class="result-value"><span style="color: var(--success);">●</span> 在线</div>
</div>
</div>
</div>
</div>
<footer>
<p>© 2023 智能医学影像分析系统 | 基于TensorFlow.js的AI医学诊断解决方案 | 本系统仅用于演示目的</p >
<p>隐私政策 | 使用条款 | 联系我们</p >
</footer>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const uploadArea = document.getElementById('uploadArea');
const fileInput = document.getElementById('fileInput');
const uploadBtn = document.getElementById('uploadBtn');
const imagePreview = document.getElementById('imagePreview');
const analyzeBtn = document.getElementById('analyzeBtn');
const resetBtn = document.getElementById('resetBtn');
const resultsContainer = document.getElementById('resultsContainer');
const loading = document.getElementById('loading');
const progressBar = document.getElementById('progressBar');
uploadBtn.addEventListener('click', () => {
fileInput.click();
});
uploadArea.addEventListener('dragover', (e) => {
e.preventDefault();
uploadArea.style.background = 'rgba(52, 152, 219, 0.1)';
});
uploadArea.addEventListener('dragleave', () => {
uploadArea.style.background = 'rgba(52, 152, 219, 0.05)';
});
uploadArea.addEventListener('drop', (e) => {
e.preventDefault();
uploadArea.style.background = 'rgba(52, 152, 219, 0.05)';
��:
if (e.dataTransfer.files.length) {
handleFile(e.dataTransfer.files[0]);
}
});
fileInput.addEventListener('change', () => {
if (fileInput.files.length) {
handleFile(fileInput.files[0]);
}
});
function handleFile(file) {
if (!file.type.match('image.*')) {
alert('请上传图像文件 (JPG, PNG)');
return;
}
if (file.size > 10 * 1024 * 1024) {
alert('文件大小不能超过10MB');
return;
}
const reader = new FileReader();
reader.onload = function(e) {
imagePreview.innerHTML = `< img src="${e.target.result}" alt="Medical Image Preview">`;
analyzeBtn.disabled = false;
};
reader.readAsDataURL(file);
}
analyzeBtn.addEventListener('click', async () => {
if (imagePreview.querySelector('img')) {
loading.style.display = 'block';
resultsContainer.innerHTML = '';
let progress = 0;
const interval = setInterval(() => {
progress += Math.random() * 10;
if (progress >= 100) {
progress = 100;
clearInterval(interval);
setTimeout(showResults, 500);
}
progressBar.style.width = `${progress}%`;
}, 200);
} else {
alert('请先上传医学影像');
}
});
resetBtn.addEventListener('click', () => {
fileInput.value = '';
imagePreview.innerHTML = '<p>上传医学影像后将在此处显示预览</p >';
resultsContainer.innerHTML = '<p>分析结果将显示在此处</p >';
analyzeBtn.disabled = true;
loading.style.display = 'none';
});
function showResults() {
loading.style.display = 'none';
const findings = [ { label: '肺部异常检测', value: '中度异常', confidence: '86%', critical: true },
{ label: '结节识别', value: '检测到2个结节', confidence: '92%', critical: true },
{ label: '心血管异常', value: '轻度异常', confidence: '78%', critical: false },
{ label: '骨骼结构', value: '正常', confidence: '95%', critical: false },
{ label: '组织密度分析', value: '部分区域异常', confidence: '83%', critical: false }
];
��:
const diagnosisSummary = findings.some(f => f.critical)
? '检测到重要异常，建议立即咨询专科医生'
: '未发现严重异常，建议定期复查';
const diagnosisClass = findings.some(f => f.critical) ? 'critical' : '';
resultsContainer.innerHTML = `
<div class="result-item ${diagnosisClass}">
<div class="result-label">诊断摘要</div>
<div class="result-value">${diagnosisSummary}</div>
</div>
<h3 style="margin: 25px 0 15px; color: var(--primary);">详细分析结果</h3>
`;
findings.forEach(finding => {
const item = document.createElement('div');
item.className = `result-item ${finding.critical ? 'critical' : ''}`;
item.innerHTML = `
<div class="result-label">${finding.label}</div>
<div class="result-value">${finding.value} (置信度: ${finding.confidence})</div>
`;
resultsContainer.appendChild(item);
});
const suggestion = document.createElement('div');
suggestion.className = 'result-item';
suggestion.innerHTML = `
<div class="result-label">建议</div>
<div class="result-value">${findings.some(f => f.critical)
? '立即预约胸外科专家进行进一步诊断'
: '6个月后复查，保持健康生活方式'}</div>
`;
resultsContainer.appendChild(suggestion);
}
async function initModel() {
console.log("初始化医学影像分析模型...");
await new Promise(resolve => setTimeout(resolve, 1000));
console.log("模型准备就绪");
}
initModel();
});
</script>
</body>
</html>