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