Hugging Face's logo

Spaces:
CineDev
/
backend
Sleeping

App Files Community
Yash goyal commited on
Commit
8f0df94
·
verified ·
1 Parent(s): 450d893

Update templates/form.html

Browse files
Files changed (1) hide show
  1. templates/form.html +164 -179
templates/form.html CHANGED
@@ -1,191 +1,176 @@
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Skin-Lesion-Diagnosis</title>
7
- <link rel="stylesheet" href="/static/form-styles.css">
8
- <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
9
- <script src="/static/preloader.js"></script>
10
- <script src="/static/cursor-effect.js"></script>
11
- <script src="/static/form-handler.js" defer></script>
12
- <link href="/static/logo.jpg" rel="shortcut icon">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
13
  </head>
14
  <body>
15
- <div class="preloader">
16
- <div class="preloader-particles"></div>
17
- <div class="dna-loader">
18
- <div class="dna-loader-strand"></div>
19
- <div class="dna-loader-strand"></div>
20
- <div class="dna-loader-rung"></div>
21
- <div class="dna-loader-rung"></div>
22
- <div class="dna-loader-rung"></div>
23
- <div class="dna-loader-rung"></div>
24
- <div class="dna-loader-rung"></div>
25
- <div class="dna-loader-rung"></div>
26
- <div class="dna-loader-rung"></div>
27
- <div class="dna-loader-rung"></div>
28
- <div class="dna-loader-rung"></div>
29
- <div class="loader-text">LOADING...</div>
30
- </div>
31
  </div>
32
- <header>
33
- <nav>
34
- <div class="logo" style="color: beige;">SKIN <span style="color: #00ffff;">ALGNOSIS</span></div>
35
- <ul>
36
- <li><a href="/templates/form.html">Home</a></li>
37
- <li><a href="/templates/about.html">About</a></li>
38
- <li><a href="/templates/features.html">Features</a></li>
39
- </ul>
40
- </nav>
41
- </header>
42
-
43
- <section class="form-section">
44
- <div class="container">
45
- <div class="form-container">
46
- <h1 style="color: white;">ENTER PATIENT DETAILS</h1>
47
- <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>
48
-
49
- <div class="form-wrapper">
50
- <form id="patient-form" action="/predict" method="POST" enctype="multipart/form-data">
51
- <div class="form-group">
52
- <label for="name">Full Name</label>
53
- <input type="text" id="name" name="name" placeholder="Enter your name" required>
54
- </div>
55
-
56
- <div class="form-group">
57
- <label for="email">Email Address</label>
58
- <input type="email" id="email" name="email" placeholder="Enter your email address" required>
59
- </div>
60
-
61
- <div class="form-row">
62
- <div class="form-group half">
63
- <label for="gender">Gender</label>
64
- <select id="gender" name="gender" required>
65
- <option value="" disabled selected>Select gender</option>
66
- <option value="male">Male</option>
67
- <option value="female">Female</option>
68
- <option value="other">Other</option>
69
- </select>
70
- </div>
71
-
72
- <div class="form-group half">
73
- <label for="age">Age</label>
74
- <input type="number" id="age" name="age" placeholder="Enter your age" min="1" max="120" required>
75
- </div>
76
- </div>
77
-
78
- <div class="form-group file-upload-group">
79
- <label for="image">Upload Image</label>
80
- <div class="file-upload-wrapper">
81
- <input type="file" id="image" name="image" accept=".jpg,.jpeg,.png" required>
82
- <span class="file-upload-text">Choose Image</span>
83
- <span class="file-upload-icon">
84
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="17 8 12 3 7 8"></polyline><line x1="12" y1="3" x2="12" y2="15"></line></svg>
85
- </span>
86
- </div>
87
- <small class="warning">Warning: Please upload images in JPG, JPEG, or PNG format only. Maximum file size: 20MB.</small>
88
- <div class="upload-message" id="upload-message" style="display: none;"></div>
89
- </div>
90
-
91
- <div class="form-group consent-group">
92
- <input type="checkbox" id="consent" name="consent" required>
93
- <label for="consent">I agree to the <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a></label>
94
- </div>
95
-
96
- <div class="form-actions">
97
- <button type="submit" class="submit-button" id="submit-btn">Submit Details</button>
98
- </div>
99
- </form>
100
-
101
- <!-- Result Display Section -->
102
- <div class="result-section" id="result-section" style="display: none; margin-top: 30px;">
103
- <h2>Diagnosis Result</h2>
104
- <div id="result-content"></div>
105
- </div>
106
-
107
- <!-- Training History Plot -->
108
- {% if history_plot %}
109
- <div class="history-plot" style="margin-top: 30px; text-align: center;">
110
- <h2>Model Training History</h2>
111
- <img src="{{ history_plot }}" alt="Training History Plot" style="max-width: 100%; border-radius: 10px;">
112
- </div>
113
- {% endif %}
114
- </div>
115
  </div>
116
-
117
- <div class="side-info">
118
- <div class="info-card">
119
- <h2>How It Works</h2>
120
- <div class="steps">
121
- <div class="step">
122
- <div class="step-icon">1</div>
123
- <div class="step-content">
124
- <h3>Submit Your Data</h3>
125
- <p>Fill out the form with your details and image.</p>
126
- </div>
127
- </div>
128
-
129
- <div class="step">
130
- <div class="step-icon">2</div>
131
- <div class="step-content">
132
- <h3>AI Processing</h3>
133
- <p>Our AI model analyzes your image.</p>
134
- </div>
135
- </div>
136
-
137
- <div class="step">
138
- <div class="step-icon">3</div>
139
- <div class="step-content">
140
- <h3>Receive Your Report</h3>
141
- <p>Get your diagnosis report on the website.</p>
142
- </div>
143
- </div>
144
- </div>
145
- </div>
146
-
147
- <div class="info-card">
148
- <h2>Need Help?</h2>
149
- <p>If you have any questions or need assistance, our support team is here to help.</p>
150
- <div class="contact-info">
151
- <div class="contact-item">
152
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path><polyline points="22,6 12,13 2,6"></polyline></svg>
153
- <span>info.skinalgnosiss@gmail.com</span>
154
- </div>
155
- <div class="contact-item">
156
- <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg>
157
- <span>7817833974</span>
158
- <span>7983595318</span>
159
- </div>
160
- </div>
161
- </div>
162
  </div>
163
- </div>
164
- </section>
165
-
166
- <footer>
167
- <div class="container">
168
- <div class="footer-content">
169
- <div class="footer-logo">CODE<span>CATALYST</span></div>
170
- <div class="footer-links">
171
- <h3>Quick Links</h3>
172
- <ul>
173
- <li><a href="/templates/form.html">Home</a></li>
174
- <li><a href="/templates/about.html">About</a></li>
175
- <li><a href="/templates/features.html">Features</a></li>
176
- </ul>
177
- </div>
178
- <div class="footer-contact">
179
- <h3>Support</h3>
180
- <p>Email: info.skinalgnosiss@gmail.com</p>
181
- <p>Phone: 7817833974</p>
182
- <p>7983595318</p>
183
- </div>
184
  </div>
185
- <div class="copyright">
186
- <p>© 2025 Skin Lesion Diagnosis. All rights reserved.</p>
 
 
 
 
 
 
 
 
 
 
 
 
187
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
188
  </div>
189
- </footer>
 
 
 
 
 
190
  </body>
191
- </html>
 
1
  <!DOCTYPE html>
2
  <html lang="en">
3
  <head>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
6
+ <title>Skin-Lesion-Diagnosis</title>
7
+ <link rel="stylesheet" href="/static/form-styles.css" />
8
+ <link rel="shortcut icon" href="/static/logo.jpg" />
9
+ <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"/>
10
+ <script src="/static/preloader.js"></script>
11
+ <script src="/static/cursor-effect.js"></script>
12
+ <script defer>
13
+ document.addEventListener("DOMContentLoaded", () => {
14
+ const fileInput = document.getElementById("image");
15
+ const fileMessage = document.getElementById("upload-message");
16
+ const submitBtn = document.getElementById("submit-btn");
17
+
18
+ fileInput.addEventListener("change", () => {
19
+ const file = fileInput.files[0];
20
+ fileMessage.style.display = "block";
21
+
22
+ if (!file) {
23
+ fileMessage.textContent = "No file selected.";
24
+ fileMessage.style.color = "orange";
25
+ submitBtn.disabled = true;
26
+ return;
27
+ }
28
+
29
+ const allowedTypes = ["image/jpeg", "image/png"];
30
+ const maxSize = 20 * 1024 * 1024; // 20MB
31
+
32
+ if (!allowedTypes.includes(file.type)) {
33
+ fileMessage.textContent = "Invalid file format. Use JPG or PNG.";
34
+ fileMessage.style.color = "red";
35
+ submitBtn.disabled = true;
36
+ } else if (file.size > maxSize) {
37
+ fileMessage.textContent = "File too large. Max 20MB allowed.";
38
+ fileMessage.style.color = "red";
39
+ submitBtn.disabled = true;
40
+ } else {
41
+ fileMessage.textContent = "✅ File ready for upload.";
42
+ fileMessage.style.color = "limegreen";
43
+ submitBtn.disabled = false;
44
+ }
45
+ });
46
+ });
47
+ </script>
48
  </head>
49
  <body>
50
+ <div class="preloader">
51
+ <div class="preloader-particles"></div>
52
+ <div class="dna-loader">
53
+ <div class="dna-loader-strand"></div>
54
+ <div class="dna-loader-strand"></div>
55
+ <div class="dna-loader-rung"></div>
56
+ <div class="dna-loader-rung"></div>
57
+ <div class="dna-loader-rung"></div>
58
+ <div class="dna-loader-rung"></div>
59
+ <div class="dna-loader-rung"></div>
60
+ <div class="dna-loader-rung"></div>
61
+ <div class="dna-loader-rung"></div>
62
+ <div class="dna-loader-rung"></div>
63
+ <div class="loader-text">LOADING...</div>
 
 
64
  </div>
65
+ </div>
66
+
67
+ <header>
68
+ <nav>
69
+ <div class="logo" style="color: beige;">SKIN <span style="color: #00ffff;">ALGNOSIS</span></div>
70
+ <ul>
71
+ <li><a href="/form">Home</a></li>
72
+ <li><a href="#">About</a></li>
73
+ <li><a href="#">Features</a></li>
74
+ </ul>
75
+ </nav>
76
+ </header>
77
+
78
+ <section class="form-section">
79
+ <div class="container">
80
+ <div class="form-container">
81
+ <h1 style="color: white;">ENTER PATIENT DETAILS</h1>
82
+ <p class="intro-text">
83
+ Fill out the form below for the diagnosis of your skin disease.
84
+ Our AI will process your image and generate a predicted report for you.
85
+ </p>
86
+
87
+ <div class="form-wrapper">
88
+ <form id="patient-form" action="/predict" method="POST" enctype="multipart/form-data">
89
+ <div class="form-group">
90
+ <label for="name">Full Name</label>
91
+ <input type="text" id="name" name="name" placeholder="Enter your name" required />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
92
  </div>
93
+
94
+ <div class="form-group">
95
+ <label for="email">Email Address</label>
96
+ <input type="email" id="email" name="email" placeholder="Enter your email address" required />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
97
  </div>
98
+
99
+ <div class="form-row">
100
+ <div class="form-group half">
101
+ <label for="gender">Gender</label>
102
+ <select id="gender" name="gender" required>
103
+ <option value="" disabled selected>Select gender</option>
104
+ <option value="male">Male</option>
105
+ <option value="female">Female</option>
106
+ <option value="other">Other</option>
107
+ </select>
108
+ </div>
109
+
110
+ <div class="form-group half">
111
+ <label for="age">Age</label>
112
+ <input type="number" id="age" name="age" placeholder="Enter your age" min="1" max="120" required />
113
+ </div>
 
 
 
 
 
114
  </div>
115
+
116
+ <div class="form-group file-upload-group">
117
+ <label for="image">Upload Image</label>
118
+ <div class="file-upload-wrapper">
119
+ <input type="file" id="image" name="image" accept=".jpg,.jpeg,.png" required />
120
+ <span class="file-upload-text">Choose Image</span>
121
+ </div>
122
+ <small class="warning">Allowed: JPG, PNG | Max size: 20MB</small>
123
+ <div class="upload-message" id="upload-message" style="display: none;"></div>
124
+ </div>
125
+
126
+ <div class="form-group consent-group">
127
+ <input type="checkbox" id="consent" name="consent" required />
128
+ <label for="consent">I agree to the <a href="#">Terms</a> and <a href="#">Privacy Policy</a></label>
129
  </div>
130
+
131
+ <div class="form-actions">
132
+ <button type="submit" class="submit-button" id="submit-btn">Submit Details</button>
133
+ </div>
134
+ </form>
135
+
136
+ <!-- Result Section -->
137
+ <div class="result-section" id="result-section" style="display: none; margin-top: 30px;">
138
+ <h2>Diagnosis Result</h2>
139
+ <div id="result-content"></div>
140
+ </div>
141
+
142
+ <!-- Training History Plot -->
143
+ <div class="history-plot" style="margin-top: 30px; text-align: center;">
144
+ <h2>Model Training History</h2>
145
+ <img src="/training_plot.png" alt="Training History Plot" style="max-width: 100%; border-radius: 10px;" />
146
+ </div>
147
+ </div>
148
+ </div>
149
+ </div>
150
+ </section>
151
+
152
+ <footer>
153
+ <div class="container">
154
+ <div class="footer-content">
155
+ <div class="footer-logo">CODE<span>CATALYST</span></div>
156
+ <div class="footer-links">
157
+ <h3>Quick Links</h3>
158
+ <ul>
159
+ <li><a href="/form">Home</a></li>
160
+ <li><a href="#">About</a></li>
161
+ <li><a href="#">Features</a></li>
162
+ </ul>
163
+ </div>
164
+ <div class="footer-contact">
165
+ <h3>Support</h3>
166
+ <p>Email: info.skinalgnosiss@gmail.com</p>
167
+ <p>Phone: 7817833974 / 7983595318</p>
168
  </div>
169
+ </div>
170
+ <div class="copyright">
171
+ <p>© 2025 Skin Lesion Diagnosis. All rights reserved.</p>
172
+ </div>
173
+ </div>
174
+ </footer>
175
  </body>
176
+ </html>