Spaces:
Runtime error
Runtime error
| <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"); | |
| 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; | |
| } | |
| }); | |
| }); | |
| </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/">DashBoard</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 %} | |
| {% endif %} | |
| </div> | |
| </div> | |
| </section> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-content"> | |
| <div class="footer-logo">GROUP-<span>2</span></div> | |
| <div class="footer-links"> | |
| <h3>Quick Links</h3> | |
| <ul> | |
| <li><a href="/form">Dash-Board</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-contact"> | |
| <h3>Support</h3> | |
| <p>Email: info.snapskin@gmail.com</p> | |
| <p>Phone: 7817833974</p> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2025 SnapSkin. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| </body> | |
| </html> | |