Spaces:
Runtime error
Runtime error
<html lang="en"> | |
<head> | |
<meta charset="UTF-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
<title>SkinAI - Upload</title> | |
<style> | |
/* Reset */ | |
* { | |
margin: 0; | |
padding: 0; | |
box-sizing: border-box; | |
} | |
body { | |
font-family: Arial, sans-serif; | |
background-color: #f5f8fa; | |
color: #000; | |
} | |
/* Top Navigation with Enhanced Hover Effects */ | |
header { | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
padding: 15px 5%; | |
background-color: #fff; | |
border-bottom: 1px solid #ccc; | |
position: relative; | |
z-index: 10; | |
} | |
.logo { | |
font-size: 1.5rem; | |
font-weight: bold; | |
color: #333; | |
} | |
nav a { | |
text-decoration: none; | |
color: #333; | |
margin-left: 20px; | |
font-weight: 500; | |
padding: 5px 0; | |
position: relative; | |
transition: color 0.3s ease; | |
} | |
/* Underline hover effect for nav links */ | |
nav a:after { | |
content: ''; | |
position: absolute; | |
width: 0; | |
height: 2px; | |
bottom: 0; | |
left: 0; | |
background-color: #007BFF; | |
transition: width 0.3s ease; | |
} | |
nav a:hover { | |
color: #007BFF; | |
text-decoration: none; | |
} | |
nav a:hover:after { | |
width: 100%; | |
} | |
.help-btn { | |
background-color: #007BFF; | |
color: #fff; | |
border: none; | |
padding: 8px 16px; | |
border-radius: 4px; | |
cursor: pointer; | |
margin-left: 20px; | |
transition: all 0.3s ease; | |
} | |
.help-btn:hover { | |
background-color: #0056b3; | |
transform: translateY(-2px); | |
box-shadow: 0 4px 8px rgba(0,123,255,0.3); | |
} | |
/* Main Content Area */ | |
.container { | |
max-width: 1200px; | |
margin: 40px auto; | |
padding: 0 20px; | |
} | |
/* Upload Section */ | |
.upload-section { | |
background-color: #fff; | |
border-radius: 10px; | |
box-shadow: 0 5px 15px rgba(0,0,0,0.08); | |
padding: 40px; | |
margin-bottom: 40px; | |
text-align: center; | |
} | |
.upload-section h1 { | |
font-size: 2rem; | |
color: #333; | |
margin-bottom: 20px; | |
} | |
.upload-section p { | |
font-size: 1.1rem; | |
color: #666; | |
margin-bottom: 30px; | |
max-width: 700px; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
/* Upload Area */ | |
.upload-area { | |
border: 2px dashed #aac; | |
border-radius: 10px; | |
padding: 50px 20px; | |
background-color: #f8faff; | |
cursor: pointer; | |
transition: all 0.3s ease; | |
margin-bottom: 30px; | |
} | |
.upload-area:hover { | |
border-color: #007BFF; | |
background-color: #f0f8ff; | |
} | |
.upload-area.active { | |
border-color: #007BFF; | |
background-color: #e6f4ff; | |
} | |
.upload-icon { | |
font-size: 3rem; | |
color: #007BFF; | |
margin-bottom: 15px; | |
} | |
.upload-text { | |
font-size: 1.2rem; | |
color: #666; | |
margin-bottom: 10px; | |
} | |
.upload-subtext { | |
font-size: 0.9rem; | |
color: #888; | |
} | |
/* File Input */ | |
#file-input { | |
display: none; | |
} | |
/* Preview Area */ | |
.preview-area { | |
display: none; | |
margin: 30px auto; | |
max-width: 500px; | |
} | |
.preview-area img { | |
max-width: 100%; | |
max-height: 400px; | |
border-radius: 8px; | |
box-shadow: 0 4px 12px rgba(0,0,0,0.15); | |
} | |
.preview-info { | |
margin-top: 15px; | |
font-size: 0.9rem; | |
color: #666; | |
} | |
/* Button Styles */ | |
.btn { | |
background-color: #007BFF; | |
color: #fff; | |
border: none; | |
padding: 12px 24px; | |
font-size: 1rem; | |
border-radius: 4px; | |
cursor: pointer; | |
transition: all 0.3s ease; | |
display: inline-block; | |
} | |
.btn:hover { | |
background-color: #0056b3; | |
transform: translateY(-2px); | |
box-shadow: 0 4px 12px rgba(0,123,255,0.4); | |
} | |
.btn-secondary { | |
background-color: #6c757d; | |
margin-right: 10px; | |
} | |
.btn-secondary:hover { | |
background-color: #5a6268; | |
} | |
/* Instructions Section */ | |
.instructions { | |
background-color: #fff; | |
border-radius: 10px; | |
box-shadow: 0 5px 15px rgba(0,0,0,0.08); | |
padding: 30px; | |
} | |
.instructions h2 { | |
font-size: 1.5rem; | |
color: #333; | |
margin-bottom: 20px; | |
} | |
.instruction-cards { | |
display: flex; | |
flex-wrap: wrap; | |
gap: 20px; | |
} | |
.instruction-card { | |
flex: 1 1 300px; | |
background-color: #f9f9f9; | |
border-radius: 8px; | |
padding: 20px; | |
box-shadow: 0 2px 5px rgba(0,0,0,0.1); | |
transition: all 0.3s ease; | |
border-left: 3px solid transparent; | |
} | |
.instruction-card:hover { | |
transform: translateY(-5px); | |
box-shadow: 0 8px 15px rgba(0,0,0,0.1); | |
border-left: 3px solid #007BFF; | |
} | |
.instruction-card h3 { | |
font-size: 1.1rem; | |
color: #333; | |
margin-bottom: 10px; | |
} | |
.instruction-card p { | |
font-size: 0.95rem; | |
color: #666; | |
line-height: 1.5; | |
} | |
/* Footer */ | |
footer { | |
text-align: center; | |
padding: 20px; | |
margin-top: 40px; | |
color: #777; | |
font-size: 0.9rem; | |
} | |
/* Responsive */ | |
@media (max-width: 768px) { | |
.container { | |
padding: 0 15px; | |
margin: 20px auto; | |
} | |
.upload-section { | |
padding: 30px 15px; | |
} | |
.upload-section h1 { | |
font-size: 1.7rem; | |
} | |
.upload-area { | |
padding: 30px 15px; | |
} | |
.instructions { | |
padding: 20px 15px; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<!-- Top Navigation --> | |
<header> | |
<div class="logo">SkinAI</div> | |
<nav> | |
<a href="/">Home</a> | |
<a href="/upload" style="color: #007BFF;">Upload</a> | |
<a href="/result">Results</a> | |
<a href="#">Contact</a> | |
<button class="help-btn">Help</button> | |
</nav> | |
</header> | |
<div class="container"> | |
<!-- Upload Section --> | |
<section class="upload-section"> | |
<h1>Upload Your Skin Image</h1> | |
<p>Our AI will analyze your image and provide insights about potential skin conditions. Please upload a clear, well-lit photo of the affected area.</p> | |
<!-- Upload Area --> | |
<div class="upload-area" id="drop-area"> | |
<div class="upload-icon">📤</div> | |
<div class="upload-text">Drag & Drop your image here</div> | |
<div class="upload-subtext">or click to browse files</div> | |
<input type="file" id="file-input" accept="image/*"> | |
</div> | |
<!-- Preview Area (initially hidden) --> | |
<div class="preview-area" id="preview-area"> | |
<img id="preview-image" src="#" alt="Preview"> | |
<div class="preview-info" id="file-info">File information will appear here</div> | |
<div style="margin-top: 20px;"> | |
<button class="btn btn-secondary" id="cancel-btn">Cancel</button> | |
<button class="btn" id="analyze-btn">Analyze Image</button> | |
</div> | |
</div> | |
</section> | |
<!-- Instructions Section --> | |
<section class="instructions"> | |
<h2>Best Practices for Accurate Results</h2> | |
<div class="instruction-cards"> | |
<!-- Instruction 1 --> | |
<div class="instruction-card"> | |
<h3>Good Lighting</h3> | |
<p>Ensure your photo is taken in bright, natural light. Avoid shadows or harsh lighting that might distort colors or details.</p> | |
</div> | |
<!-- Instruction 2 --> | |
<div class="instruction-card"> | |
<h3>Clear Focus</h3> | |
<p>Take a clear, in-focus image of the affected area. Blurry images may lead to inaccurate results.</p> | |
</div> | |
<!-- Instruction 3 --> | |
<div class="instruction-card"> | |
<h3>Proper Distance</h3> | |
<p>Capture the image from about 6-12 inches away to show sufficient detail while maintaining context of the affected area.</p> | |
</div> | |
</div> | |
</section> | |
</div> | |
<footer> | |
<p>© 2025 SkinAI. All rights reserved. For educational purposes only. Not a substitute for professional medical advice.</p> | |
</footer> | |
<script> | |
// JavaScript for handling file uploads and preview | |
// JavaScript for handling file uploads, preview, and analysis | |
document.addEventListener('DOMContentLoaded', function() { | |
const dropArea = document.getElementById('drop-area'); | |
const fileInput = document.getElementById('file-input'); | |
const previewArea = document.getElementById('preview-area'); | |
const previewImage = document.getElementById('preview-image'); | |
const fileInfo = document.getElementById('file-info'); | |
const cancelBtn = document.getElementById('cancel-btn'); | |
const analyzeBtn = document.getElementById('analyze-btn'); | |
// Open file browser when clicking the upload area | |
dropArea.addEventListener('click', () => { | |
fileInput.click(); | |
}); | |
// Handle file selection | |
fileInput.addEventListener('change', handleFiles); | |
// Prevent default drag behaviors | |
['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
dropArea.addEventListener(eventName, preventDefaults, false); | |
document.body.addEventListener(eventName, preventDefaults, false); | |
}); | |
// Highlight drop area when dragging over it | |
['dragenter', 'dragover'].forEach(eventName => { | |
dropArea.addEventListener(eventName, highlight, false); | |
}); | |
['dragleave', 'drop'].forEach(eventName => { | |
dropArea.addEventListener(eventName, unhighlight, false); | |
}); | |
// Handle dropped files | |
dropArea.addEventListener('drop', handleDrop, false); | |
// Cancel button functionality | |
cancelBtn.addEventListener('click', () => { | |
resetUpload(); | |
}); | |
// Analyze button functionality - send to backend | |
analyzeBtn.addEventListener('click', () => { | |
sendImageForAnalysis(); | |
}); | |
// Functions | |
function preventDefaults(e) { | |
e.preventDefault(); | |
e.stopPropagation(); | |
} | |
function highlight() { | |
dropArea.classList.add('active'); | |
} | |
function unhighlight() { | |
dropArea.classList.remove('active'); | |
} | |
function handleDrop(e) { | |
const dt = e.dataTransfer; | |
const files = dt.files; | |
handleFiles(files); | |
} | |
function handleFiles(e) { | |
const files = this.files || e; | |
if (files && files[0]) { | |
const file = files[0]; | |
// Check if it's an image | |
if (!file.type.match('image.*')) { | |
alert('Please upload an image file'); | |
return; | |
} | |
// Display file info | |
const size = (file.size / 1024).toFixed(2); | |
fileInfo.textContent = `${file.name} (${size} KB)`; | |
// Show preview | |
const reader = new FileReader(); | |
reader.onload = function(e) { | |
previewImage.src = e.target.result; | |
dropArea.style.display = 'none'; | |
previewArea.style.display = 'block'; | |
// Store image data for results page | |
sessionStorage.setItem('analyzedImage', e.target.result); | |
} | |
reader.readAsDataURL(file); | |
} | |
} | |
function resetUpload() { | |
fileInput.value = ''; | |
previewImage.src = '#'; | |
previewArea.style.display = 'none'; | |
dropArea.style.display = 'block'; | |
// Clear session storage data | |
sessionStorage.removeItem('analyzedImage'); | |
sessionStorage.removeItem('analysisResult'); | |
sessionStorage.removeItem('detectedCondition'); | |
} | |
function sendImageForAnalysis() { | |
// Show loading state | |
analyzeBtn.disabled = true; | |
analyzeBtn.textContent = 'Analyzing...'; | |
// Get the file | |
const file = fileInput.files[0]; | |
if (!file) { | |
alert('Please select an image first'); | |
analyzeBtn.disabled = false; | |
analyzeBtn.textContent = 'Analyze Image'; | |
return; | |
} | |
// Create FormData object | |
const formData = new FormData(); | |
formData.append('image', file); | |
// Send to backend | |
fetch('/analyze', { | |
method: 'POST', | |
body: formData | |
}) | |
.then(response => { | |
if (!response.ok) { | |
throw new Error('Network response was not ok'); | |
} | |
return response.json(); | |
}) | |
.then(result => { | |
// Store result in session storage | |
sessionStorage.setItem('analysisResult', JSON.stringify(result)); | |
sessionStorage.setItem('detectedCondition', result.prediction || ''); | |
// Redirect to results page | |
window.location.href = 'result'; | |
}) | |
.catch(error => { | |
console.error('Error:', error); | |
alert('There was an error analyzing your image. Please try again.'); | |
// Reset button state | |
analyzeBtn.disabled = false; | |
analyzeBtn.textContent = 'Analyze Image'; | |
}); | |
} | |
}); | |
</script> | |
</body> | |
</html> |