File size: 6,360 Bytes
b7a676b bd8199f f2f2e38 bd8199f b7a676b 8f0df94 bd8199f f2f2e38 bd8199f 8f0df94 f2f2e38 8f0df94 f2f2e38 bd8199f f2f2e38 8f0df94 bd8199f f2f2e38 bd8199f b67d3fa bd8199f b67d3fa 6ce4f94 dbd8e30 b67d3fa f2f2e38 bd8199f b7a676b 08c384e | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SnapSkin - Skin Lesion Diagnosis</title>
<link rel="stylesheet" href="{{ url_for('static', filename='form-styles.css') }}">
<link rel="icon" type="image/png" href="{{ url_for('static', filename='logo.png') }}">
</head>
<body>
<div class="container">
<header>
<h1>SnapSkin</h1>
<p>AI-Powered Skin Lesion Diagnosis</p>
</header>
<form id="diagnosis-form" action="{{ url_for('predict') }}" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your full name" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email address" required>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<option value="" disabled selected>Select your gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Other">Other</option>
</select>
</div>
<div class="form-group">
<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="150" placeholder="e.g., 35" required>
</div>
<div class="form-group">
<label for="image">Upload Skin Image:</label>
<input type="file" id="image" name="image" accept="image/*" required>
<label for="image" class="file-upload-label" id="file-upload-text">Click to choose an image</label>
</div>
<button type="submit" class="submit-button" id="submit-btn">Diagnose</button>
</form>
{% if result %}
<div class="result">
<h2>Diagnosis Result</h2>
<div class="alert {% if result.prediction == 'Error' %}alert-error{% elif result.confidence and result.confidence.replace('%','')|float < 70 %}alert-warning{% else %}alert-success{% endif %}">
<p><strong>Condition:</strong> {{ result.prediction }}</p>
{% if result.confidence %}
<p><strong>Confidence:</strong> {{ result.confidence }}</p>
{% endif %}
{% if result.message %}
<p><strong>Message:</strong> {{ result.message }}</p>
{% endif %}
</div>
{% if result.email_status %}
<p id="email-status">{{ result.email_status }}</p>
{% endif %}
</div>
{% endif %}
<div id="history-section">
</div>
<div id="history-results">
</div>
</div>
</div>
<script src="{{ url_for('static', filename='preloader.js') }}"></script>
<script src="{{ url_for('static', filename='cursor-effect.js') }}"></script>
<script>
const fileInput = document.getElementById('image');
const fileUploadText = document.getElementById('file-upload-text');
const diagnosisForm = document.getElementById('diagnosis-form');
const submitBtn = document.getElementById('submit-btn');
if (fileInput) {
fileInput.addEventListener('change', () => {
if (fileInput.files.length > 0) {
fileUploadText.textContent = `File selected: ${fileInput.files[0].name}`;
fileUploadText.classList.add('file-selected');
} else {
fileUploadText.textContent = 'Click to choose an image';
fileUploadText.classList.remove('file-selected');
}
});
}
if (diagnosisForm) {
diagnosisForm.addEventListener('submit', () => {
if(submitBtn) {
submitBtn.disabled = true;
submitBtn.textContent = 'Processing...';
}
});
}
document.getElementById('fetch-history-btn').addEventListener('click', () => {
const email = document.getElementById('history-email').value;
if (!email) {
alert('Please enter an email address.');
return;
}
const historyDiv = document.getElementById('history-results');
historyDiv.innerHTML = '<p>Loading history...</p>';
fetch(`/api/history?email=${encodeURIComponent(email)}`)
.then(response => response.json())
.then(data => {
historyDiv.innerHTML = '';
if (data.error || data.length === 0) {
historyDiv.innerHTML = '<p>No scan history found for this email.</p>';
return;
}
const ul = document.createElement('ul');
data.forEach(scan => {
const li = document.createElement('li');
li.classList.add('history-item');
li.innerHTML = `
<img src="${scan.image_url}" alt="Scan Image">
<div class="history-details">
<p><strong>Prediction:</strong> ${scan.prediction} (${scan.confidence})</p>
<p><strong>Patient:</strong> ${scan.patient_name}</p>
<p><strong>Date:</strong> ${scan.timestamp}</p>
</div>
`;
ul.appendChild(li);
});
historyDiv.appendChild(ul);
})
.catch(error => {
console.error('Error fetching history:', error);
historyDiv.innerHTML = '<p>Error loading history. Please try again.</p>';
});
});
</script>
</body>
</html> |