Spaces:

CineDev
/

backend

Sleeping

App Files Files Community

Yash goyal commited on Sep 22, 2025

Commit

b67d3fa

verified ·

1 Parent(s): 539f115

Update templates/form.html

Browse files

Files changed (1) hide show

templates/form.html +65 -108

templates/form.html CHANGED Viewed

@@ -3,132 +3,89 @@
 <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>

 <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 class="main-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 = `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...';
+                }
+            });
+        }
     </script>
 </body>
 </html>