Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Chest Cancer Detection AI</title> | |
| <!-- Bootstrap 5 CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Font Awesome for Icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"> | |
| <!-- Google Fonts (Poppins) --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <!-- Your Custom CSS --> | |
| <link rel="stylesheet" href="{{ url_for('static', path='style.css') }}"> | |
| </head> | |
| <body> | |
| <header class="text-center py-4 shadow-sm"> | |
| <div class="container"> | |
| <h1><i class="fas fa-lungs-virus"></i> Chest Cancer Detection AI</h1> | |
| <p class="lead text-muted">Upload a Chest CT Scan to classify it as Normal or Cancerous</p> | |
| </div> | |
| </header> | |
| <main class="container my-5"> | |
| <div class="row g-4"> | |
| <!-- Left Column: Uploader --> | |
| <div class="col-lg-6"> | |
| <div class="card h-100 shadow-lg border-0"> | |
| <div class="card-body text-center d-flex flex-column justify-content-center"> | |
| <div class="image-upload-wrapper"> | |
| <input type="file" id="fileInput" accept="image/png, image/jpeg" style="display: none;"> | |
| <label for="fileInput" class="upload-label"> | |
| <div class="upload-icon"> | |
| <i class="fas fa-cloud-upload-alt fa-3x"></i> | |
| </div> | |
| <p class="upload-text"><strong>Click to browse</strong> or drag and drop an image here.</p> | |
| </label> | |
| <div class="image-preview-container"> | |
| <img id="imagePreview" src="#" alt="Image Preview" class="img-fluid rounded"/> | |
| <button id="removeImageBtn" class="btn btn-sm btn-danger remove-btn">×</button> | |
| </div> | |
| </div> | |
| <button id="predictBtn" class="btn btn-primary btn-lg mt-4 w-100" disabled> | |
| <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="display: none;"></span> | |
| <span class="btn-text"><i class="fas fa-microscope"></i> Predict</span> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Column: Results --> | |
| <div class="col-lg-6"> | |
| <div class="card h-100 shadow-lg border-0"> | |
| <div class="card-header bg-primary text-white"> | |
| <h5 class="mb-0"><i class="fas fa-poll"></i> Prediction Results</h5> | |
| </div> | |
| <div class="card-body"> | |
| <div id="result-container" class="text-center"> | |
| <p class="text-muted">Results will be displayed here after prediction.</p> | |
| </div> | |
| <hr> | |
| <div class="accordion" id="jsonAccordion"> | |
| <div class="accordion-item"> | |
| <h2 class="accordion-header" id="headingOne"> | |
| <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne"> | |
| Raw JSON Response | |
| </button> | |
| </h2> | |
| <div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#jsonAccordion"> | |
| <div class="accordion-body"> | |
| <pre id="jsonResponse" class="bg-light p-3 rounded"><code>Waiting for response...</code></pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="text-center text-muted py-3 mt-4"> | |
| <p>© 2024 Your Name. Powered by AI.</p> | |
| </footer> | |
| <!-- Bootstrap 5 JS --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script> | |
| <!-- Your Custom JS --> | |
| <script src="{{ url_for('static', path='script.js') }}"></script> | |
| </body> | |
| </html> |