Spaces:

CineDev
/

backend

Sleeping

App Files Files Community

Yash goyal commited on Sep 21, 2025

Commit

bd8199f

verified ·

1 Parent(s): 457ff7b

Update templates/form.html

Browse files

Files changed (1) hide show

templates/form.html +109 -170

templates/form.html CHANGED Viewed

@@ -1,195 +1,134 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>SnapSkin</title>
-  <link rel="stylesheet" href="/static/form-styles.css" />
-  <link rel="shortcut icon" href="/static/logo.png" />
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"/>
-  <script src="/static/preloader.js"></script>
-  <script src="/static/cursor-effect.js"></script>
-  <script defer>
-    document.addEventListener("DOMContentLoaded", () => {
-      const fileInput = document.getElementById("image");
-      const fileMessage = document.getElementById("upload-message");
-      const submitBtn = document.getElementById("submit-btn");
-      const emailBtn = document.getElementById("email-report-btn");
-      fileInput.addEventListener("change", () => {
-        const file = fileInput.files[0];
-        fileMessage.style.display = "block";
-        if (!file) {
-          fileMessage.textContent = "No file selected.";
-          fileMessage.style.color = "orange";
-          submitBtn.disabled = true;
-          return;
-        }
-        const allowedTypes = ["image/jpeg", "image/png"];
-        const maxSize = 20 * 1024 * 1024; // 20MB
-        if (!allowedTypes.includes(file.type)) {
-          fileMessage.textContent = "Invalid file format. Use JPG or PNG.";
-          fileMessage.style.color = "red";
-          submitBtn.disabled = true;
-        } else if (file.size > maxSize) {
-          fileMessage.textContent = "File too large. Max 20MB allowed.";
-          fileMessage.style.color = "red";
-          submitBtn.disabled = true;
-        } else {
-          fileMessage.textContent = "✅ File ready for upload.";
-          fileMessage.style.color = "limegreen";
-          submitBtn.disabled = false;
-        }
-      });
-      if (emailBtn) {
-        emailBtn.addEventListener("click", async () => {
-          const scanId = emailBtn.dataset.scanId;
-          const emailStatus = document.getElementById("email-status");
-          try {
-            const response = await fetch(`/api/email-report/${scanId}`);
-            const data = await response.json();
-            emailStatus.textContent = data.message;
-            emailStatus.style.color = data.success ? "limegreen" : "red";
-          } catch (error) {
-            emailStatus.textContent = "Error sending email.";
-            emailStatus.style.color = "red";
-          }
-        });
-      }
-    });
-  </script>
 </head>
 <body>
-  <div class="preloader">
-    <div class="preloader-particles"></div>
-    <div class="dna-loader">
-      <div class="dna-loader-strand"></div>
-      <div class="dna-loader-strand"></div>
-      <div class="dna-loader-rung"></div>
-      <div class="dna-loader-rung"></div>
-      <div class="dna-loader-rung"></div>
-      <div class="dna-loader-rung"></div>
-      <div class="dna-loader-rung"></div>
-      <div class="dna-loader-rung"></div>
-      <div class="dna-loader-rung"></div>
-      <div class="dna-loader-rung"></div>
-      <div class="loader-text">LOADING...</div>
-    </div>
-  </div>
-  <header>
-    <nav>
-      <div class="logo" style="color: beige;">SNAP<span style="color: #00ffff;">SKIN</span></div>
-      <ul>
-        <li><a href="https://snapskin.vercel.app/">Home</a></li>
-      </ul>
-    </nav>
-  </header>
-  <section class="form-section">
     <div class="container">
-      <div class="form-container">
-        <h1 style="color: white;">ENTER PATIENT DETAILS</h1>
-        <p class="intro-text">
-          Fill out the form below for the diagnosis of your skin disease.
-          Our AI will process your image and generate a predicted report for you.
-        </p>
-        <div class="form-wrapper">
-          <form id="patient-form" action="/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 name" required />
             </div>
             <div class="form-group">
-              <label for="email">Email Address</label>
-              <input type="email" id="email" name="email" placeholder="Enter your email address" required />
             </div>
-            <div class="form-row">
-              <div class="form-group half">
-                <label for="gender">Gender</label>
                 <select id="gender" name="gender" required>
-                  <option value="" disabled selected>Select gender</option>
-                  <option value="male">Male</option>
-                  <option value="female">Female</option>
-                  <option value="other">Other</option>
                 </select>
-              </div>
-              <div class="form-group half">
-                <label for="age">Age</label>
-                <input type="number" id="age" name="age" placeholder="Enter your age" min="1" max="120" required />
-              </div>
             </div>
-            <div class="form-group file-upload-group">
-              <label for="image">Upload Image</label>
-              <div class="file-upload-wrapper">
-                <input type="file" id="image" name="image" accept=".jpg,.jpeg,.png" required />
-                <span class="file-upload-text">Choose Image</span>
-              </div>
-              <small class="warning">Allowed: JPG, PNG | Max size: 20MB</small>
-              <div class="upload-message" id="upload-message" style="display: none;"></div>
-            </div>
-            <div class="form-group consent-group">
-              <input type="checkbox" id="consent" name="consent" required />
-              <label for="consent">I agree to the <a href="#">Terms</a> and <a href="#">Privacy Policy</a></label>
             </div>
-            <div class="form-actions">
-              <button type="submit" class="submit-button" id="submit-btn">Submit Details</button>
             </div>
-          </form>
-          <!-- Result Section -->
-          <div class="result-section" id="result-section" style="margin-top: 30px; {% if result %}display: block;{% else %}display: none;{% endif %}">
             <h2>Diagnosis Result</h2>
-            <div id="result-content">
-              {% if result %}
-                <p><strong>Prediction:</strong> {{ result.prediction }}</p>
-                <p><strong>Confidence:</strong> {{ result.confidence }}</p>
-                {% if result.message %}
-                  <p class="warning-message">{{ result.message }}</p>
-                {% endif %}
-                <p id="email-status" style="color: {% if result.email_status contains 'Failed' %}red{% else %}limegreen{% endif %}">{{ result.email_status }}</p>
-                <button id="email-report-btn" class="submit-button" data-scan-id="{{ result.scan_id }}">Resend Report to Email</button>
-              {% endif %}
-            </div>
-          </div>
         </div>
-      </div>
-    </div>
-  </section>
-  <footer>
-    <div class="container">
-      <div class="footer-content">
-        <div class="footer-logo">SNAP<span>SKIN</span></div>
-        <div class="footer-links">
-          <h3>Quick Links</h3>
-          <ul>
-            <li><a href="/form">Home</a></li>
-            <li><a href="#">About</a></li>
-            <li><a href="#">Features</a></li>
-          </ul>
         </div>
-        <div class="footer-contact">
-          <h3>Support</h3>
-          <p>Email: info.snapskin@gmail.com</p>
-          <p>Phone: 7817833974 / 7983595318</p>
         </div>
-      </div>
-      <div class="copyright">
-        <p>© 2025 SnapSkin. All rights reserved.</p>
-      </div>
     </div>
-  </footer>
 </body>
 </html>

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