Hugging Face's logo

Spaces:
CineDev
/
backend
Sleeping

App Files Community
Yash goyal commited on
Commit
f2f2e38
·
verified ·
1 Parent(s): b483c32

Update templates/form.html

Browse files
Files changed (1) hide show
  1. templates/form.html +100 -43
templates/form.html CHANGED
@@ -3,63 +3,79 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>New Scan | SnapSkin</title>
7
  <link rel="stylesheet" href="{{ url_for('static', filename='form-styles.css') }}">
8
  <link rel="icon" type="image/png" href="{{ url_for('static', filename='logo.png') }}">
9
  </head>
10
  <body>
11
- <header class="main-header">
12
- <nav>
13
- <div class="logo">SNAP<span>SKIN</span></div>
14
- <ul>
15
- {% if current_user.is_authenticated %}
16
- <li><a href="{{ url_for('history') }}">My History</a></li>
17
- <li><a href="{{ url_for('logout') }}">Logout</a></li>
18
- {% else %}
19
- <li><a href="{{ url_for('login') }}">Login</a></li>
20
- {% endif %}
21
- </ul>
22
- </nav>
23
- </header>
24
-
25
  <div class="container">
26
  <header>
27
- <h1>Start a New Diagnosis</h1>
28
- <p>Upload a skin lesion image to get an AI-powered analysis.</p>
29
  </header>
30
 
31
- {% if current_user.is_authenticated %}
32
- <form id="diagnosis-form" action="{{ url_for('predict') }}" method="POST" enctype="multipart/form-data">
33
- <div class="form-group">
34
- <label for="gender">Gender:</label>
35
- <select id="gender" name="gender" required>
36
- <option value="" disabled selected>Select your gender</option>
37
- <option value="Male">Male</option>
38
- <option value="Female">Female</option>
39
- <option value="Other">Other</option>
40
- </select>
41
- </div>
42
- <div class="form-group">
43
- <label for="age">Age:</label>
44
- <input type="number" id="age" name="age" min="0" max="150" placeholder="e.g., 35" required>
45
- </div>
46
- <div class="form-group">
47
- <label for="image">Upload Skin Image:</label>
48
- <input type="file" id="image" name="image" accept="image/*" required>
49
- <label for="image" class="file-upload-label" id="file-upload-text">Click to choose an image</label>
50
- </div>
51
- <button type="submit" class="submit-button" id="submit-btn">Diagnose</button>
52
- </form>
53
- {% else %}
54
- <div class="alert alert-warning" style="text-align: center; margin-top: 2rem;">
55
- <p>Please <a href="{{ url_for('login') }}" style="color: var(--primary-glow); text-decoration: underline;">log in</a> to start a new diagnosis.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
56
  </div>
 
 
 
 
57
  {% endif %}
 
 
 
 
 
 
 
 
 
 
58
  </div>
59
 
60
  <script src="{{ url_for('static', filename='preloader.js') }}"></script>
61
  <script src="{{ url_for('static', filename='cursor-effect.js') }}"></script>
62
-
63
  <script>
64
  const fileInput = document.getElementById('image');
65
  const fileUploadText = document.getElementById('file-upload-text');
@@ -86,6 +102,47 @@
86
  }
87
  });
88
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
89
  </script>
90
  </body>
91
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SnapSkin - Skin Lesion Diagnosis</title>
7
  <link rel="stylesheet" href="{{ url_for('static', filename='form-styles.css') }}">
8
  <link rel="icon" type="image/png" href="{{ url_for('static', filename='logo.png') }}">
9
  </head>
10
  <body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
11
  <div class="container">
12
  <header>
13
+ <h1>SnapSkin</h1>
14
+ <p>AI-Powered Skin Lesion Diagnosis</p>
15
  </header>
16
 
17
+ <form id="diagnosis-form" action="{{ url_for('predict') }}" method="POST" enctype="multipart/form-data">
18
+ <div class="form-group">
19
+ <label for="name">Full Name:</label>
20
+ <input type="text" id="name" name="name" placeholder="Enter your full name" required>
21
+ </div>
22
+ <div class="form-group">
23
+ <label for="email">Email:</label>
24
+ <input type="email" id="email" name="email" placeholder="Enter your email address" required>
25
+ </div>
26
+ <div class="form-group">
27
+ <label for="gender">Gender:</label>
28
+ <select id="gender" name="gender" required>
29
+ <option value="" disabled selected>Select your gender</option>
30
+ <option value="Male">Male</option>
31
+ <option value="Female">Female</option>
32
+ <option value="Other">Other</option>
33
+ </select>
34
+ </div>
35
+ <div class="form-group">
36
+ <label for="age">Age:</label>
37
+ <input type="number" id="age" name="age" min="0" max="150" placeholder="e.g., 35" required>
38
+ </div>
39
+ <div class="form-group">
40
+ <label for="image">Upload Skin Image:</label>
41
+ <input type="file" id="image" name="image" accept="image/*" required>
42
+ <label for="image" class="file-upload-label" id="file-upload-text">Click to choose an image</label>
43
+ </div>
44
+ <button type="submit" class="submit-button" id="submit-btn">Diagnose</button>
45
+ </form>
46
+
47
+ {% if result %}
48
+ <div class="result">
49
+ <h2>Diagnosis Result</h2>
50
+ <div class="alert {% if result.prediction == 'Error' %}alert-error{% elif result.confidence and result.confidence.replace('%','')|float < 70 %}alert-warning{% else %}alert-success{% endif %}">
51
+ <p><strong>Condition:</strong> {{ result.prediction }}</p>
52
+ {% if result.confidence %}
53
+ <p><strong>Confidence:</strong> {{ result.confidence }}</p>
54
+ {% endif %}
55
+ {% if result.message %}
56
+ <p><strong>Message:</strong> {{ result.message }}</p>
57
+ {% endif %}
58
  </div>
59
+ {% if result.email_status %}
60
+ <p id="email-status">{{ result.email_status }}</p>
61
+ {% endif %}
62
+ </div>
63
  {% endif %}
64
+
65
+ <div id="history-section">
66
+ <h2>View Previous Scans</h2>
67
+ <div class="history-controls">
68
+ <input type="email" id="history-email" placeholder="Enter email to view history">
69
+ <button id="fetch-history-btn">View History</button>
70
+ </div>
71
+ <div id="history-results">
72
+ </div>
73
+ </div>
74
  </div>
75
 
76
  <script src="{{ url_for('static', filename='preloader.js') }}"></script>
77
  <script src="{{ url_for('static', filename='cursor-effect.js') }}"></script>
78
+
79
  <script>
80
  const fileInput = document.getElementById('image');
81
  const fileUploadText = document.getElementById('file-upload-text');
 
102
  }
103
  });
104
  }
105
+
106
+ document.getElementById('fetch-history-btn').addEventListener('click', () => {
107
+ const email = document.getElementById('history-email').value;
108
+ if (!email) {
109
+ alert('Please enter an email address.');
110
+ return;
111
+ }
112
+
113
+ const historyDiv = document.getElementById('history-results');
114
+ historyDiv.innerHTML = '<p>Loading history...</p>';
115
+
116
+ fetch(`/api/history?email=${encodeURIComponent(email)}`)
117
+ .then(response => response.json())
118
+ .then(data => {
119
+ historyDiv.innerHTML = '';
120
+ if (data.error || data.length === 0) {
121
+ historyDiv.innerHTML = '<p>No scan history found for this email.</p>';
122
+ return;
123
+ }
124
+
125
+ const ul = document.createElement('ul');
126
+ data.forEach(scan => {
127
+ const li = document.createElement('li');
128
+ li.classList.add('history-item');
129
+ li.innerHTML = `
130
+ <img src="${scan.image_url}" alt="Scan Image">
131
+ <div class="history-details">
132
+ <p><strong>Prediction:</strong> ${scan.prediction} (${scan.confidence})</p>
133
+ <p><strong>Patient:</strong> ${scan.patient_name}</p>
134
+ <p><strong>Date:</strong> ${scan.timestamp}</p>
135
+ </div>
136
+ `;
137
+ ul.appendChild(li);
138
+ });
139
+ historyDiv.appendChild(ul);
140
+ })
141
+ .catch(error => {
142
+ console.error('Error fetching history:', error);
143
+ historyDiv.innerHTML = '<p>Error loading history. Please try again.</p>';
144
+ });
145
+ });
146
  </script>
147
  </body>
148
  </html>