Hugging Face's logo

Spaces:
vasdevaman6
/
Multi-Input-Lung-Predictor
Sleeping

App Files Community
Multi-Input-Lung-Predictor
File size: 5,199 Bytes
b398c5e
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Lung Cancer Prediction</title>

    <!-- Google Fonts & Bootstrap -->
    <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">

    <!-- GSAP Animation -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>

    <!-- Custom CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}?v=20052025">
</head>
<body>
    <!-- 🌈 Animated Gradient Background -->
    <div class="animated-bg"></div>

    <!-- 🔄 Preloader -->
    <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>

    <!-- 💡 Main Form -->
    <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>

    <!-- JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>

        // --- PRELOADER FADE ---

        window.onload = function() {

            const container = document.querySelector('.main-box');

            const loader = document.getElementById('loader-overlay');

            

            // Fade out loader and smoothly animate the container into view using GSAP

            loader.style.opacity = '0';

            setTimeout(() => {

                loader.style.display = 'none';

                gsap.to(container, { opacity: 1, y: 0, duration: 1, ease: "power3.out" });

            }, 800);

        };



        // --- FORM SUBMISSION (Standard POST) ---

        const form = document.getElementById('predictionForm');



        form.addEventListener('submit', (e) => {

            // NOTE: We DO NOT use e.preventDefault()

            // We let the form submit normally, which Flask will intercept and send result.html

            

            const loader = document.getElementById('loader-overlay');

            const button = form.querySelector('button[type="submit"]');



            // Show the loader immediately upon submission

            loader.style.display = 'flex';

            loader.style.opacity = '1';



            // Disable button during processing

            button.disabled = true;

            button.innerHTML = 'Analyzing...';

        });

    </script>
</body>
</html>
</body>
</html>