| <!DOCTYPE html>
|
| <html lang="en">
|
| <head>
|
| <meta charset="UTF-8">
|
| <title>Lung Cancer Prediction</title>
|
|
|
|
|
| <link href="https://fonts.googleapis.com/css2?family=Lora:wght@500;700&family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
|
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
|
| <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
|
|
|
|
|
| <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=20052025">
|
| </head>
|
| <body>
|
|
|
| <div class="animated-bg"></div>
|
|
|
|
|
| <div id="loader-overlay">
|
| <svg class="loader-spinner" viewBox="0 0 50 50">
|
| <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
|
| </svg>
|
| <p class="loader-text">Analyzing 3 Models: Tabular, OCR, and X-ray...</p>
|
| </div>
|
|
|
|
|
| <div class="container main-box" style="opacity:0;">
|
| <h1 class="title">🩺 Lung Cancer Risk Predictor</h1>
|
| <p class="subtitle">Enter your health information and upload reports for AI-based analysis.</p>
|
|
|
| <form action="/predict" method="post" enctype="multipart/form-data" id="predictionForm">
|
|
|
| <h3>👤 Patient Profile</h3>
|
| <div class="form-section">
|
| <label>Age:</label>
|
| <input type="number" name="age" required class="form-control">
|
| <label>Gender:</label>
|
| <select name="gender" required class="form-select">
|
| <option value="1">Male</option>
|
| <option value="2">Female</option>
|
| </select>
|
| </div>
|
|
|
| <h3>🌍 Environmental & Lifestyle Factors</h3>
|
| <div class="form-section grid">
|
| {% for f in ['Air Pollution','Alcohol use','Dust Allergy','OccuPational Hazards','Genetic Risk','chronic Lung Disease','Balanced Diet','Obesity','Smoking','Passive Smoker'] %}
|
| <div>
|
| <label>{{ f }} (1-10):</label>
|
| <input type="number" name="{{ f|lower|replace(' ', '_') }}" min="1" max="10" required class="form-control">
|
| </div>
|
| {% endfor %}
|
| </div>
|
|
|
| <h3>⚕️ Symptoms (1–10 scale)</h3>
|
| <div class="form-section grid">
|
| {% for f in ['Chest Pain','Coughing of Blood','Fatigue','Weight Loss','Shortness of Breath','Wheezing','Swallowing Difficulty','Clubbing of Finger Nails','Frequent Cold','Dry Cough','Snoring'] %}
|
| <div>
|
| <label>{{ f }}:</label>
|
| <input type="number" name="{{ f|lower|replace(' ', '_') }}" min="1" max="10" required class="form-control">
|
| </div>
|
| {% endfor %}
|
| </div>
|
|
|
| <h3>📄 Upload Medical Data</h3>
|
| <div class="form-section">
|
| <label>Medical Report (PDF/Image):</label>
|
| <input type="file" name="report" accept=".pdf, image/*" class="form-control">
|
| <label>Chest X-ray Image:</label>
|
| <input type="file" name="xray" accept="image/*" class="form-control">
|
| </div>
|
|
|
| <button type="submit" class="btn btn-primary glow-btn">🚀 Predict Risk</button>
|
| </form>
|
|
|
| <div id="result-box" class="hidden result-card"></div>
|
| </div>
|
|
|
|
|
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
| <script>
|
|
|
| window.onload = function() {
|
| const container = document.querySelector('.main-box');
|
| const loader = document.getElementById('loader-overlay');
|
|
|
|
|
| loader.style.opacity = '0';
|
| setTimeout(() => {
|
| loader.style.display = 'none';
|
| gsap.to(container, { opacity: 1, y: 0, duration: 1, ease: "power3.out" });
|
| }, 800);
|
| };
|
|
|
|
|
| const form = document.getElementById('predictionForm');
|
|
|
| form.addEventListener('submit', (e) => {
|
|
|
|
|
|
|
| const loader = document.getElementById('loader-overlay');
|
| const button = form.querySelector('button[type="submit"]');
|
|
|
|
|
| loader.style.display = 'flex';
|
| loader.style.opacity = '1';
|
|
|
|
|
| button.disabled = true;
|
| button.innerHTML = 'Analyzing...';
|
| });
|
| </script>
|
| </body>
|
| </html>
|
| </body>
|
| </html>
|
|
|
