File size: 6,029 Bytes
b7a676b bd8199f b7a676b 8f0df94 bd8199f 8f0df94 bd8199f 8f0df94 bd8199f b7a676b 8f0df94 bd8199f b7a676b bd8199f 8f0df94 bd8199f 8f0df94 b7a676b bd8199f b7a676b bd8199f 8f0df94 bd8199f 8f0df94 bd8199f 8f0df94 bd8199f 08c384e bd8199f 8f0df94 bd8199f 8f0df94 bd8199f b7a676b 8f0df94 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 | <!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" required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="gender">Gender:</label>
<select id="gender" name="gender" required>
<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" required>
</div>
<div class="form-group">
<label for="image">Upload Skin Image:</label>
<input type="file" id="image" name="image" accept="image/*" required>
</div>
<button type="submit" id="submit-btn">Diagnose</button>
</form>
{% if result %}
<div class="result">
<h2>Diagnosis Result</h2>
<p><strong>Condition:</strong> {{ result.prediction }}</p>
<p><strong>Confidence:</strong> {{ result.confidence }}</p>
{% if result.message %}
<p><strong>Message:</strong> {{ result.message }}</p>
{% endif %}
<p id="email-status" style="color: {% if 'Failed' in result.email_status %}red{% else %}limegreen{% endif %}">{{ result.email_status }}</p>
{% if result.scan_id %}
<button id="resend-email-btn" data-scan-id="{{ result.scan_id }}">Resend Report to Email</button>
{% endif %}
<a href="{{ url_for('download_report') }}" id="download-btn">Download Report</a>
</div>
{% endif %}
{% if history_plot %}
<div class="training-history">
<h2>Model Training History</h2>
<img src="{{ history_plot }}" alt="Training History Plot">
</div>
{% endif %}
<div id="history-section">
<h2>Previous Scans</h2>
<input type="email" id="history-email" placeholder="Enter email to view history">
<button id="fetch-history-btn">View History</button>
<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>
document.getElementById('fetch-history-btn').addEventListener('click', () => {
const email = document.getElementById('history-email').value;
if (!email) {
alert('Please enter an email address.');
return;
}
fetch(`/api/history?email=${encodeURIComponent(email)}`)
.then(response => response.json())
.then(data => {
const historyDiv = document.getElementById('history-results');
historyDiv.innerHTML = '';
if (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.innerHTML = `
<p><strong>Scan ID:</strong> ${scan.id}</p>
<p><strong>Patient:</strong> ${scan.patient_name}</p>
<p><strong>Prediction:</strong> ${scan.prediction}</p>
<p><strong>Confidence:</strong> ${scan.confidence}</p>
<p><strong>Timestamp:</strong> ${scan.timestamp}</p>
<img src="${scan.image_url}" alt="Scan Image" style="max-width: 200px;">
<button onclick="resendEmail(${scan.id})">Resend Report</button>
`;
ul.appendChild(li);
});
historyDiv.appendChild(ul);
})
.catch(error => {
console.error('Error fetching history:', error);
document.getElementById('history-results').innerHTML = '<p>Error loading history. Please try again.</p>';
});
});
function resendEmail(scanId) {
fetch(`/api/email-report/${scanId}`)
.then(response => response.json())
.then(data => {
alert(data.message);
})
.catch(error => {
console.error('Error resending email:', error);
alert('Failed to resend report. Please try again.');
});
}
document.getElementById('resend-email-btn')?.addEventListener('click', () => {
const scanId = document.getElementById('resend-email-btn').getAttribute('data-scan-id');
resendEmail(scanId);
});
</script>
</body>
</html> |