| <!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> |
