Spaces:

CineDev
/

backend

Sleeping

App Files Files Community

Yash goyal commited on Sep 22, 2025

Commit

539f115

verified ·

1 Parent(s): 6ce4f94

Update templates/form.html

Browse files

Files changed (1) hide show

templates/form.html +108 -65

templates/form.html CHANGED Viewed

@@ -3,89 +3,132 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>New Scan | SnapSkin</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>
-    <header>
-        <nav>
-            <div class="logo">SNAP<span>SKIN</span></div>
-            <ul>
-                {% if current_user.is_authenticated %}
-                    <li><a href="{{ url_for('history') }}">My History</a></li>
-                    <li><a href="{{ url_for('logout') }}">Logout</a></li>
-                {% else %}
-                    <li><a href="{{ url_for('login') }}">Login</a></li>
-                {% endif %}
-            </ul>
-        </nav>
-    </header>
     <div class="container">
         <header>
-            <h1>Start a New Diagnosis</h1>
-            <p>Upload a skin lesion image to get an AI-powered analysis.</p>
         </header>
-        {% if current_user.is_authenticated %}
-            <form id="diagnosis-form" action="{{ url_for('predict') }}" method="POST" enctype="multipart/form-data">
-                <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>
-        {% else %}
-            <div class="alert alert-warning" style="text-align: center; margin-top: 2rem;">
-                <p>Please <a href="{{ url_for('login') }}" style="color: var(--primary-glow); text-decoration: underline;">log in</a> to start a new diagnosis.</p>
             </div>
         {% endif %}
     </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 = 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...';
-                }
-            });
-        }
     </script>
 </body>
 </html>

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