Hugging Face's logo

Spaces:
RaniyaK
/
Pneumonia-XRay-Classifier
Running

App Files Community
RaniyaK commited on
Commit
cd2ed74
·
verified ·
1 Parent(s): 612c03b

Upload 2 files

Browse files
Files changed (2) hide show
  1. index.html +188 -0
  2. result.html +80 -0
index.html ADDED
@@ -0,0 +1,188 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Pneumonia Detection</title>
7
+ <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet">
8
+ <style>
9
+ /* Reset */
10
+ * {
11
+ margin: 0;
12
+ padding: 0;
13
+ box-sizing: border-box;
14
+ }
15
+ body {
16
+ font-family: 'Lato', sans-serif;
17
+ display: flex;
18
+ justify-content: center;
19
+ align-items: center;
20
+ min-height: 100vh;
21
+ background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)),
22
+ url('https://www.kateandlaurel.com/cdn/shop/products/qnecvkpyteyiqd0qfvat.jpg?v=1663828398') no-repeat center center / cover;
23
+ color: #fff;
24
+ }
25
+ .container {
26
+ background-color: rgba(255, 255, 255, 0.9);
27
+ border-radius: 12px;
28
+ padding: 40px;
29
+ box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
30
+ width: 100%;
31
+ max-width: 450px;
32
+ text-align: center;
33
+ color: #333;
34
+ }
35
+ h1 {
36
+
37
+ margin-bottom: 20px;
38
+ }
39
+ form {
40
+ display: flex;
41
+ flex-direction: column;
42
+ align-items: center;
43
+ }
44
+ input[type="file"] {
45
+ padding: 12px;
46
+ font-size: 16px;
47
+ margin-bottom: 20px;
48
+ border: 1px solid #ddd;
49
+ border-radius: 8px;
50
+ width: 100%;
51
+ max-width: 300px;
52
+ transition: border-color 0.3s;
53
+ }
54
+ input[type="file"]:hover {
55
+ border-color: #4a90e2;
56
+ }
57
+ button {
58
+ padding: 12px 24px;
59
+ font-size: 18px;
60
+ color: #fff;
61
+ background-color: #4a90e2;
62
+ border: none;
63
+ border-radius: 8px;
64
+ cursor: pointer;
65
+ transition: background-color 0.3s, transform 0.2s;
66
+ }
67
+ button:hover {
68
+ background-color: #357ABD;
69
+ transform: scale(1.05);
70
+ }
71
+ .loading {
72
+ display: none;
73
+ margin-top: 20px;
74
+ font-size: 16px;
75
+ color: #4a90e2;
76
+ }
77
+ .loading.show {
78
+ display: block;
79
+ }
80
+ /* Result Card */
81
+ .result-card {
82
+ background: #fff;
83
+ padding: 40px;
84
+ border-radius: 12px;
85
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
86
+ text-align: center;
87
+ max-width: 400px;
88
+ width: 90%;
89
+ display: none; /* Hidden by default */
90
+ }
91
+ .result-card h1 {
92
+ font-size: 2em;
93
+ color: #333;
94
+ margin-bottom: 10px;
95
+ }
96
+ .result-card p {
97
+ font-size: 1.2em;
98
+ margin: 15px 0;
99
+ color: #555;
100
+ }
101
+ .diagnosis {
102
+ font-weight: bold;
103
+ font-size: 1.5em;
104
+ color: #ff5252;
105
+ }
106
+ .back-btn {
107
+ margin-top: 20px;
108
+ display: inline-block;
109
+ padding: 10px 20px;
110
+ border: none;
111
+ border-radius: 5px;
112
+ background: #007bff;
113
+ color: white;
114
+ text-decoration: none;
115
+ font-size: 1em;
116
+ }
117
+ .back-btn:hover {
118
+ background: #0056b3;
119
+ }
120
+ </style>
121
+ </head>
122
+ <body>
123
+ <div class="container">
124
+ <h1>Pneumonia Detection</h1>
125
+
126
+ <!-- Form Section -->
127
+ <form id="uploadForm" action="/predict" method="post" enctype="multipart/form-data" onsubmit="showLoading();">
128
+ <input type="file" name="file" accept="image/*" required>
129
+ <button type="submit">Upload and Predict</button>
130
+ <div class="loading" id="loadingText">Analyzing... Please wait.</div>
131
+ </form>
132
+
133
+ <!-- Result Section -->
134
+ <div class="result-card" id="resultCard">
135
+ <h1>Prediction Result</h1>
136
+ <p>The X-ray analysis indicates:</p>
137
+ <p class="diagnosis" id="resultText"></p>
138
+ <p>Confidence Level: <strong id="probabilityText"></strong>%</p>
139
+ <a href="/" class="back-btn" onclick="resetForm()">Try another image</a>
140
+ </div>
141
+ </div>
142
+
143
+ <script>
144
+ const formData = new FormData();
145
+ formData.append('file', fileInput.files[0]);
146
+
147
+ try {
148
+ // Replace 'YOUR_HUGGING_FACE_SPACE_URL' with your actual Hugging Face Space endpoint
149
+ const response = await fetch('https://huggingface.co/spaces/RaniyaK/Pneumonia-XRay-Classifier', {
150
+ method: 'POST',
151
+ body: formData
152
+ });
153
+
154
+ const result = await response.json();
155
+
156
+ // Display the prediction result
157
+ showResult(result.prediction, result.confidence);
158
+ } catch (error) {
159
+ console.error('Error:', error);
160
+ } finally {
161
+ document.getElementById('loadingText').classList.remove('show');
162
+ }
163
+
164
+ // Show loading text on form submission
165
+ function showLoading() {
166
+ document.getElementById('loadingText').classList.add('show');
167
+ }
168
+
169
+ // Function to reset the form and hide result card
170
+ function resetForm() {
171
+ document.getElementById('uploadForm').reset();
172
+ document.getElementById('loadingText').classList.remove('show');
173
+ document.getElementById('resultCard').style.display = 'none';
174
+ }
175
+
176
+ // Function to show results
177
+ function showResult(result, probability) {
178
+ document.getElementById('resultText').textContent = result;
179
+ document.getElementById('probabilityText').textContent = probability;
180
+ document.getElementById('resultCard').style.display = 'block';
181
+ }
182
+
183
+ // Add this part to your backend to update the result
184
+ // Example: After receiving the prediction, you could use the following JavaScript code to show the result:
185
+ // showResult('Pneumonia', '85'); // Call this with your actual prediction and probability
186
+ </script>
187
+ </body>
188
+ </html>
result.html ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Prediction Result</title>
7
+ <style>
8
+ /* Set up font and body background */
9
+ body {
10
+ font-family: 'Lato', sans-serif;
11
+ display: flex;
12
+ justify-content: center;
13
+ align-items: center;
14
+ background: linear-gradient(135deg, #e0eafc, #cfdef3);
15
+ height: 100vh;
16
+ margin: 0;
17
+ background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)),
18
+ url('https://www.kateandlaurel.com/cdn/shop/products/qnecvkpyteyiqd0qfvat.jpg?v=1663828398') no-repeat center center / cover;
19
+ color: #fff;
20
+ }
21
+
22
+ /* Card style for result */
23
+ .result-card {
24
+ background: #fff;
25
+ padding: 40px;
26
+ border-radius: 12px;
27
+ box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
28
+ text-align: center;
29
+ max-width: 400px;
30
+ width: 90%;
31
+ }
32
+
33
+ /* Title and text styling */
34
+ .result-card h1 {
35
+ font-size: 2em;
36
+ color: #333;
37
+ margin-bottom: 10px;
38
+ }
39
+
40
+ .result-card p {
41
+ font-size: 1.2em;
42
+ margin: 15px 0;
43
+ color: #555;
44
+ }
45
+
46
+ /* Highlight the diagnosis result */
47
+ .diagnosis {
48
+ font-weight: bold;
49
+ font-size: 1.5em;
50
+ color: #ff5252;
51
+ }
52
+
53
+ /* Button to go back */
54
+ .back-btn {
55
+ margin-top: 20px;
56
+ display: inline-block;
57
+ padding: 10px 20px;
58
+ border: none;
59
+ border-radius: 5px;
60
+ background: #007bff;
61
+ color: white;
62
+ text-decoration: none;
63
+ font-size: 1em;
64
+ }
65
+
66
+ .back-btn:hover {
67
+ background: #0056b3;
68
+ }
69
+ </style>
70
+ </head>
71
+ <body>
72
+ <div class="result-card">
73
+ <h1>Prediction Result</h1>
74
+ <p>The X-ray analysis indicates:</p>
75
+ <p class="diagnosis">{{ result }}</p>
76
+ <p>Confidence Level: <strong>{{ probability }}%</strong></p>
77
+ <a href="/" class="back-btn">Try another image</a>
78
+ </div>
79
+ </body>
80
+ </html>