Spaces:
Sleeping
Sleeping
Update templates/index.html
Browse files- templates/index.html +72 -88
templates/index.html
CHANGED
|
@@ -14,7 +14,7 @@
|
|
| 14 |
|
| 15 |
body {
|
| 16 |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
| 17 |
-
background: linear-gradient(135deg, #
|
| 18 |
min-height: 100vh;
|
| 19 |
padding: 20px;
|
| 20 |
}
|
|
@@ -30,7 +30,7 @@
|
|
| 30 |
}
|
| 31 |
|
| 32 |
.header {
|
| 33 |
-
background: linear-gradient(135deg, #
|
| 34 |
color: white;
|
| 35 |
padding: 30px;
|
| 36 |
text-align: center;
|
|
@@ -65,6 +65,7 @@
|
|
| 65 |
margin-bottom: 10px;
|
| 66 |
position: relative;
|
| 67 |
z-index: 1;
|
|
|
|
| 68 |
}
|
| 69 |
|
| 70 |
.header p {
|
|
@@ -72,6 +73,7 @@
|
|
| 72 |
opacity: 0.9;
|
| 73 |
position: relative;
|
| 74 |
z-index: 1;
|
|
|
|
| 75 |
}
|
| 76 |
|
| 77 |
.main-content {
|
|
@@ -94,7 +96,7 @@
|
|
| 94 |
.upload-section:hover {
|
| 95 |
transform: translateY(-5px);
|
| 96 |
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
| 97 |
-
border-color: #
|
| 98 |
}
|
| 99 |
|
| 100 |
.upload-area {
|
|
@@ -109,19 +111,19 @@
|
|
| 109 |
}
|
| 110 |
|
| 111 |
.upload-area:hover {
|
| 112 |
-
border-color: #
|
| 113 |
-
background: linear-gradient(45deg, rgba(
|
| 114 |
}
|
| 115 |
|
| 116 |
.upload-area.dragover {
|
| 117 |
-
border-color: #
|
| 118 |
-
background: rgba(
|
| 119 |
transform: scale(1.02);
|
| 120 |
}
|
| 121 |
|
| 122 |
.upload-icon {
|
| 123 |
font-size: 3rem;
|
| 124 |
-
color: #
|
| 125 |
margin-bottom: 15px;
|
| 126 |
transition: transform 0.3s ease;
|
| 127 |
}
|
|
@@ -143,12 +145,12 @@
|
|
| 143 |
|
| 144 |
.text-input:focus {
|
| 145 |
outline: none;
|
| 146 |
-
border-color: #
|
| 147 |
-
box-shadow: 0 0 0 3px rgba(
|
| 148 |
}
|
| 149 |
|
| 150 |
.submit-btn {
|
| 151 |
-
background: linear-gradient(135deg, #
|
| 152 |
color: white;
|
| 153 |
border: none;
|
| 154 |
padding: 15px 40px;
|
|
@@ -180,7 +182,7 @@
|
|
| 180 |
|
| 181 |
.submit-btn:hover {
|
| 182 |
transform: translateY(-2px);
|
| 183 |
-
box-shadow: 0 10px 25px rgba(
|
| 184 |
}
|
| 185 |
|
| 186 |
.submit-btn:disabled {
|
|
@@ -217,7 +219,7 @@
|
|
| 217 |
width: 40px;
|
| 218 |
height: 40px;
|
| 219 |
border: 4px solid #f3f3f3;
|
| 220 |
-
border-top: 4px solid #
|
| 221 |
border-radius: 50%;
|
| 222 |
animation: spin 1s linear infinite;
|
| 223 |
}
|
|
@@ -254,16 +256,16 @@
|
|
| 254 |
border-radius: 10px;
|
| 255 |
padding: 20px;
|
| 256 |
margin: 15px 0;
|
| 257 |
-
border-left: 4px solid #
|
| 258 |
}
|
| 259 |
|
| 260 |
.error-message {
|
| 261 |
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
| 262 |
-
color: #
|
| 263 |
padding: 15px;
|
| 264 |
border-radius: 8px;
|
| 265 |
margin: 10px 0;
|
| 266 |
-
border-left: 4px solid #
|
| 267 |
}
|
| 268 |
|
| 269 |
.success-message {
|
|
@@ -302,44 +304,47 @@
|
|
| 302 |
<body>
|
| 303 |
<div class="container">
|
| 304 |
<header class="header">
|
| 305 |
-
<h1>🏥
|
| 306 |
<p>AI驱动的智能皮肤疾病诊断与分析平台</p>
|
| 307 |
</header>
|
| 308 |
|
| 309 |
<main class="main-content">
|
| 310 |
<section class="upload-section">
|
| 311 |
<h2 class="section-title">
|
| 312 |
-
<i data-lucide="upload"
|
| 313 |
输入诊疗信息
|
| 314 |
</h2>
|
| 315 |
|
| 316 |
-
<
|
| 317 |
-
<
|
| 318 |
-
|
| 319 |
-
|
| 320 |
-
|
| 321 |
-
|
| 322 |
-
|
| 323 |
-
|
| 324 |
-
|
| 325 |
-
|
| 326 |
-
|
| 327 |
-
|
| 328 |
-
|
| 329 |
-
<
|
| 330 |
-
<
|
| 331 |
-
|
| 332 |
-
|
| 333 |
-
|
| 334 |
-
|
| 335 |
-
|
| 336 |
-
|
| 337 |
-
|
| 338 |
-
|
| 339 |
-
|
| 340 |
-
|
| 341 |
-
|
| 342 |
-
|
|
|
|
|
|
|
|
|
|
| 343 |
</section>
|
| 344 |
|
| 345 |
<section class="results-section">
|
|
@@ -354,7 +359,7 @@
|
|
| 354 |
<ul style="margin-left: 20px; margin-top: 10px;">
|
| 355 |
<li>📸 支持皮肤图像上传与分析</li>
|
| 356 |
<li>💬 结合文字症状描述</li>
|
| 357 |
-
|
| 358 |
<li>⚡ 快速准确的诊断建议</li>
|
| 359 |
<li>📋 详细的治疗方案推荐</li>
|
| 360 |
</ul>
|
|
@@ -378,7 +383,6 @@
|
|
| 378 |
</div>
|
| 379 |
|
| 380 |
<script>
|
| 381 |
-
// Initialize Lucide icons
|
| 382 |
lucide.createIcons();
|
| 383 |
|
| 384 |
const uploadArea = document.getElementById('uploadArea');
|
|
@@ -387,32 +391,13 @@
|
|
| 387 |
const submitBtn = document.getElementById('submitBtn');
|
| 388 |
const results = document.getElementById('results');
|
| 389 |
const imagePreview = document.getElementById('imagePreview');
|
|
|
|
| 390 |
|
| 391 |
-
|
| 392 |
-
|
| 393 |
-
|
| 394 |
-
uploadArea.addEventListener('
|
| 395 |
-
|
| 396 |
-
});
|
| 397 |
-
|
| 398 |
-
// File input change handler
|
| 399 |
-
imageInput.addEventListener('change', (e) => {
|
| 400 |
-
const file = e.target.files[0];
|
| 401 |
-
if (file) {
|
| 402 |
-
handleFile(file);
|
| 403 |
-
}
|
| 404 |
-
});
|
| 405 |
-
|
| 406 |
-
// Drag and drop handlers
|
| 407 |
-
uploadArea.addEventListener('dragover', (e) => {
|
| 408 |
-
e.preventDefault();
|
| 409 |
-
uploadArea.classList.add('dragover');
|
| 410 |
-
});
|
| 411 |
-
|
| 412 |
-
uploadArea.addEventListener('dragleave', () => {
|
| 413 |
-
uploadArea.classList.remove('dragover');
|
| 414 |
-
});
|
| 415 |
-
|
| 416 |
uploadArea.addEventListener('drop', (e) => {
|
| 417 |
e.preventDefault();
|
| 418 |
uploadArea.classList.remove('dragover');
|
|
@@ -422,8 +407,8 @@
|
|
| 422 |
}
|
| 423 |
});
|
| 424 |
|
|
|
|
| 425 |
function handleFile(file) {
|
| 426 |
-
selectedFile = file;
|
| 427 |
const reader = new FileReader();
|
| 428 |
reader.onload = (e) => {
|
| 429 |
imagePreview.innerHTML = `
|
|
@@ -437,15 +422,18 @@
|
|
| 437 |
reader.readAsDataURL(file);
|
| 438 |
}
|
| 439 |
|
| 440 |
-
//
|
| 441 |
-
|
|
|
|
|
|
|
| 442 |
const text = textInput.value.trim();
|
| 443 |
-
|
| 444 |
-
|
|
|
|
| 445 |
showError('请至少上传一张图片或输入症状描述');
|
| 446 |
return;
|
| 447 |
}
|
| 448 |
-
|
| 449 |
submitBtn.disabled = true;
|
| 450 |
submitBtn.innerHTML = '<i data-lucide="loader"></i> 正在分析中...';
|
| 451 |
lucide.createIcons();
|
|
@@ -453,24 +441,20 @@
|
|
| 453 |
showLoading();
|
| 454 |
|
| 455 |
try {
|
| 456 |
-
|
| 457 |
-
|
| 458 |
-
formData.append('image', selectedFile);
|
| 459 |
-
}
|
| 460 |
-
if (text) {
|
| 461 |
-
formData.append('text', text);
|
| 462 |
-
}
|
| 463 |
|
| 464 |
const response = await fetch('/analyze', {
|
| 465 |
method: 'POST',
|
| 466 |
body: formData
|
| 467 |
});
|
| 468 |
|
|
|
|
|
|
|
| 469 |
if (!response.ok) {
|
| 470 |
-
throw new Error(`服务器错误: ${response.status}`);
|
| 471 |
}
|
| 472 |
-
|
| 473 |
-
const result = await response.json();
|
| 474 |
showResults(result);
|
| 475 |
|
| 476 |
} catch (error) {
|
|
|
|
| 14 |
|
| 15 |
body {
|
| 16 |
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
| 17 |
+
background: linear-gradient(135deg, #e0f7fa 0%, #b3e5fc 100%);
|
| 18 |
min-height: 100vh;
|
| 19 |
padding: 20px;
|
| 20 |
}
|
|
|
|
| 30 |
}
|
| 31 |
|
| 32 |
.header {
|
| 33 |
+
background: linear-gradient(135deg, #1d976c 0%, #93f9b9 100%);
|
| 34 |
color: white;
|
| 35 |
padding: 30px;
|
| 36 |
text-align: center;
|
|
|
|
| 65 |
margin-bottom: 10px;
|
| 66 |
position: relative;
|
| 67 |
z-index: 1;
|
| 68 |
+
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
|
| 69 |
}
|
| 70 |
|
| 71 |
.header p {
|
|
|
|
| 73 |
opacity: 0.9;
|
| 74 |
position: relative;
|
| 75 |
z-index: 1;
|
| 76 |
+
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
|
| 77 |
}
|
| 78 |
|
| 79 |
.main-content {
|
|
|
|
| 96 |
.upload-section:hover {
|
| 97 |
transform: translateY(-5px);
|
| 98 |
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
|
| 99 |
+
border-color: #1d976c;
|
| 100 |
}
|
| 101 |
|
| 102 |
.upload-area {
|
|
|
|
| 111 |
}
|
| 112 |
|
| 113 |
.upload-area:hover {
|
| 114 |
+
border-color: #1d976c;
|
| 115 |
+
background: linear-gradient(45deg, rgba(29, 151, 108, 0.05), rgba(147, 249, 185, 0.05));
|
| 116 |
}
|
| 117 |
|
| 118 |
.upload-area.dragover {
|
| 119 |
+
border-color: #1d976c;
|
| 120 |
+
background: rgba(29, 151, 108, 0.1);
|
| 121 |
transform: scale(1.02);
|
| 122 |
}
|
| 123 |
|
| 124 |
.upload-icon {
|
| 125 |
font-size: 3rem;
|
| 126 |
+
color: #1d976c;
|
| 127 |
margin-bottom: 15px;
|
| 128 |
transition: transform 0.3s ease;
|
| 129 |
}
|
|
|
|
| 145 |
|
| 146 |
.text-input:focus {
|
| 147 |
outline: none;
|
| 148 |
+
border-color: #1d976c;
|
| 149 |
+
box-shadow: 0 0 0 3px rgba(29, 151, 108, 0.1);
|
| 150 |
}
|
| 151 |
|
| 152 |
.submit-btn {
|
| 153 |
+
background: linear-gradient(135deg, #1d976c 0%, #93f9b9 100%);
|
| 154 |
color: white;
|
| 155 |
border: none;
|
| 156 |
padding: 15px 40px;
|
|
|
|
| 182 |
|
| 183 |
.submit-btn:hover {
|
| 184 |
transform: translateY(-2px);
|
| 185 |
+
box-shadow: 0 10px 25px rgba(29, 151, 108, 0.3);
|
| 186 |
}
|
| 187 |
|
| 188 |
.submit-btn:disabled {
|
|
|
|
| 219 |
width: 40px;
|
| 220 |
height: 40px;
|
| 221 |
border: 4px solid #f3f3f3;
|
| 222 |
+
border-top: 4px solid #1d976c;
|
| 223 |
border-radius: 50%;
|
| 224 |
animation: spin 1s linear infinite;
|
| 225 |
}
|
|
|
|
| 256 |
border-radius: 10px;
|
| 257 |
padding: 20px;
|
| 258 |
margin: 15px 0;
|
| 259 |
+
border-left: 4px solid #1d976c;
|
| 260 |
}
|
| 261 |
|
| 262 |
.error-message {
|
| 263 |
background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
|
| 264 |
+
color: #c0392b;
|
| 265 |
padding: 15px;
|
| 266 |
border-radius: 8px;
|
| 267 |
margin: 10px 0;
|
| 268 |
+
border-left: 4px solid #c0392b;
|
| 269 |
}
|
| 270 |
|
| 271 |
.success-message {
|
|
|
|
| 304 |
<body>
|
| 305 |
<div class="container">
|
| 306 |
<header class="header">
|
| 307 |
+
<h1>🏥 皮镜 (SkinLens)</h1>
|
| 308 |
<p>AI驱动的智能皮肤疾病诊断与分析平台</p>
|
| 309 |
</header>
|
| 310 |
|
| 311 |
<main class="main-content">
|
| 312 |
<section class="upload-section">
|
| 313 |
<h2 class="section-title">
|
| 314 |
+
<i data-lucide="upload"></i>
|
| 315 |
输入诊疗信息
|
| 316 |
</h2>
|
| 317 |
|
| 318 |
+
<form id="analysisForm" enctype="multipart/form-data">
|
| 319 |
+
<div class="upload-area" id="uploadArea">
|
| 320 |
+
<i data-lucide="camera"></i>
|
| 321 |
+
<h3>上传皮肤图像</h3>
|
| 322 |
+
<p>拖拽图片到此处或点击选择文件</p>
|
| 323 |
+
<p style="font-size: 14px; color: #666; margin-top: 10px;">
|
| 324 |
+
支持 JPG, PNG, GIF 格式，最大10MB
|
| 325 |
+
</p>
|
| 326 |
+
<input type="file" id="imageInput" name="image" accept="image/*" style="display: none;">
|
| 327 |
+
</div>
|
| 328 |
+
|
| 329 |
+
<div id="imagePreview"></div>
|
| 330 |
+
|
| 331 |
+
<div style="margin: 25px 0;">
|
| 332 |
+
<label for="textInput" style="display: block; margin-bottom: 10px; font-weight: 600;">
|
| 333 |
+
<i data-lucide="file-text"></i> 症状描述或问题咨询：
|
| 334 |
+
</label>
|
| 335 |
+
<textarea
|
| 336 |
+
id="textInput"
|
| 337 |
+
name="text"
|
| 338 |
+
class="text-input"
|
| 339 |
+
placeholder="请描述患者的症状、病史、用药情况或其他相关信息... 例如：患者皮肤出现红疹，伴有瘙痒，持续一周..."
|
| 340 |
+
></textarea>
|
| 341 |
+
</div>
|
| 342 |
+
|
| 343 |
+
<button type="submit" id="submitBtn" class="submit-btn">
|
| 344 |
+
<i data-lucide="brain"></i>
|
| 345 |
+
开始AI诊断分析
|
| 346 |
+
</button>
|
| 347 |
+
</form>
|
| 348 |
</section>
|
| 349 |
|
| 350 |
<section class="results-section">
|
|
|
|
| 359 |
<ul style="margin-left: 20px; margin-top: 10px;">
|
| 360 |
<li>📸 支持皮肤图像上传与分析</li>
|
| 361 |
<li>💬 结合文字症状描述</li>
|
| 362 |
+
|
| 363 |
<li>⚡ 快速准确的诊断建议</li>
|
| 364 |
<li>📋 详细的治疗方案推荐</li>
|
| 365 |
</ul>
|
|
|
|
| 383 |
</div>
|
| 384 |
|
| 385 |
<script>
|
|
|
|
| 386 |
lucide.createIcons();
|
| 387 |
|
| 388 |
const uploadArea = document.getElementById('uploadArea');
|
|
|
|
| 391 |
const submitBtn = document.getElementById('submitBtn');
|
| 392 |
const results = document.getElementById('results');
|
| 393 |
const imagePreview = document.getElementById('imagePreview');
|
| 394 |
+
const form = document.getElementById('analysisForm');
|
| 395 |
|
| 396 |
+
// 上传区域的点击和拖放逻辑
|
| 397 |
+
uploadArea.addEventListener('click', () => imageInput.click());
|
| 398 |
+
imageInput.addEventListener('change', (e) => handleFile(e.target.files[0]));
|
| 399 |
+
uploadArea.addEventListener('dragover', (e) => { e.preventDefault(); uploadArea.classList.add('dragover'); });
|
| 400 |
+
uploadArea.addEventListener('dragleave', () => uploadArea.classList.remove('dragover'));
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 401 |
uploadArea.addEventListener('drop', (e) => {
|
| 402 |
e.preventDefault();
|
| 403 |
uploadArea.classList.remove('dragover');
|
|
|
|
| 407 |
}
|
| 408 |
});
|
| 409 |
|
| 410 |
+
// 处理文件预览
|
| 411 |
function handleFile(file) {
|
|
|
|
| 412 |
const reader = new FileReader();
|
| 413 |
reader.onload = (e) => {
|
| 414 |
imagePreview.innerHTML = `
|
|
|
|
| 422 |
reader.readAsDataURL(file);
|
| 423 |
}
|
| 424 |
|
| 425 |
+
// 表单提交事件处理
|
| 426 |
+
form.addEventListener('submit', async (e) => {
|
| 427 |
+
e.preventDefault();
|
| 428 |
+
|
| 429 |
const text = textInput.value.trim();
|
| 430 |
+
const imageFile = imageInput.files[0];
|
| 431 |
+
|
| 432 |
+
if (!imageFile && !text) {
|
| 433 |
showError('请至少上传一张图片或输入症状描述');
|
| 434 |
return;
|
| 435 |
}
|
| 436 |
+
|
| 437 |
submitBtn.disabled = true;
|
| 438 |
submitBtn.innerHTML = '<i data-lucide="loader"></i> 正在分析中...';
|
| 439 |
lucide.createIcons();
|
|
|
|
| 441 |
showLoading();
|
| 442 |
|
| 443 |
try {
|
| 444 |
+
// 使用FormData自动收集表单数据
|
| 445 |
+
const formData = new FormData(form);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 446 |
|
| 447 |
const response = await fetch('/analyze', {
|
| 448 |
method: 'POST',
|
| 449 |
body: formData
|
| 450 |
});
|
| 451 |
|
| 452 |
+
const result = await response.json();
|
| 453 |
+
|
| 454 |
if (!response.ok) {
|
| 455 |
+
throw new Error(result.error || `服务器错误: ${response.status}`);
|
| 456 |
}
|
| 457 |
+
|
|
|
|
| 458 |
showResults(result);
|
| 459 |
|
| 460 |
} catch (error) {
|