Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Pneumonia Detection</title> | |
| <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap" rel="stylesheet"> | |
| <style> | |
| /* Reset */ | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Lato', sans-serif; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| min-height: 100vh; | |
| background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1)), | |
| url('https://www.kateandlaurel.com/cdn/shop/products/qnecvkpyteyiqd0qfvat.jpg?v=1663828398') no-repeat center center / cover; | |
| color: #fff; | |
| } | |
| .container { | |
| background-color: rgba(255, 255, 255, 0.9); | |
| border-radius: 12px; | |
| padding: 40px; | |
| box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); | |
| width: 100%; | |
| max-width: 450px; | |
| text-align: center; | |
| color: #333; | |
| } | |
| h1 { | |
| margin-bottom: 20px; | |
| } | |
| form { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| input[type="file"] { | |
| padding: 12px; | |
| font-size: 16px; | |
| margin-bottom: 20px; | |
| border: 1px solid #ddd; | |
| border-radius: 8px; | |
| width: 100%; | |
| max-width: 300px; | |
| transition: border-color 0.3s; | |
| } | |
| input[type="file"]:hover { | |
| border-color: #4a90e2; | |
| } | |
| button { | |
| padding: 12px 24px; | |
| font-size: 18px; | |
| color: #fff; | |
| background-color: #4a90e2; | |
| border: none; | |
| border-radius: 8px; | |
| cursor: pointer; | |
| transition: background-color 0.3s, transform 0.2s; | |
| } | |
| button:hover { | |
| background-color: #357ABD; | |
| transform: scale(1.05); | |
| } | |
| .loading { | |
| display: none; | |
| margin-top: 20px; | |
| font-size: 16px; | |
| color: #4a90e2; | |
| } | |
| .loading.show { | |
| display: block; | |
| } | |
| /* Result Card */ | |
| .result-card { | |
| background: #fff; | |
| padding: 40px; | |
| border-radius: 12px; | |
| box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15); | |
| text-align: center; | |
| max-width: 400px; | |
| width: 90%; | |
| display: none; /* Hidden by default */ | |
| } | |
| .result-card h1 { | |
| font-size: 2em; | |
| color: #333; | |
| margin-bottom: 10px; | |
| } | |
| .result-card p { | |
| font-size: 1.2em; | |
| margin: 15px 0; | |
| color: #555; | |
| } | |
| .diagnosis { | |
| font-weight: bold; | |
| font-size: 1.5em; | |
| color: #ff5252; | |
| } | |
| .back-btn { | |
| margin-top: 20px; | |
| display: inline-block; | |
| padding: 10px 20px; | |
| border: none; | |
| border-radius: 5px; | |
| background: #007bff; | |
| color: white; | |
| text-decoration: none; | |
| font-size: 1em; | |
| } | |
| .back-btn:hover { | |
| background: #0056b3; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Pneumonia Detection</h1> | |
| <!-- Form Section --> | |
| <form id="uploadForm" action="/predict" method="post" enctype="multipart/form-data" onsubmit="showLoading();"> | |
| <input type="file" name="file" accept="image/*" required> | |
| <button type="submit">Upload and Predict</button> | |
| <div class="loading" id="loadingText">Analyzing... Please wait.</div> | |
| </form> | |
| <!-- Result Section --> | |
| <div class="result-card" id="resultCard"> | |
| <h1>Prediction Result</h1> | |
| <p>The X-ray analysis indicates:</p> | |
| <p class="diagnosis" id="resultText"></p> | |
| <p>Confidence Level: <strong id="probabilityText"></strong>%</p> | |
| <a href="/" class="back-btn" onclick="resetForm()">Try another image</a> | |
| </div> | |
| </div> | |
| <script> | |
| const formData = new FormData(); | |
| formData.append('file', fileInput.files[0]); | |
| try { | |
| // Replace 'YOUR_HUGGING_FACE_SPACE_URL' with your actual Hugging Face Space endpoint | |
| const response = await fetch('https://huggingface.co/spaces/RaniyaK/Pneumonia-XRay-Classifier', { | |
| method: 'POST', | |
| body: formData | |
| }); | |
| const result = await response.json(); | |
| // Display the prediction result | |
| showResult(result.prediction, result.confidence); | |
| } catch (error) { | |
| console.error('Error:', error); | |
| } finally { | |
| document.getElementById('loadingText').classList.remove('show'); | |
| } | |
| // Show loading text on form submission | |
| function showLoading() { | |
| document.getElementById('loadingText').classList.add('show'); | |
| } | |
| // Function to reset the form and hide result card | |
| function resetForm() { | |
| document.getElementById('uploadForm').reset(); | |
| document.getElementById('loadingText').classList.remove('show'); | |
| document.getElementById('resultCard').style.display = 'none'; | |
| } | |
| // Function to show results | |
| function showResult(result, probability) { | |
| document.getElementById('resultText').textContent = result; | |
| document.getElementById('probabilityText').textContent = probability; | |
| document.getElementById('resultCard').style.display = 'block'; | |
| } | |
| // Add this part to your backend to update the result | |
| // Example: After receiving the prediction, you could use the following JavaScript code to show the result: | |
| // showResult('Pneumonia', '85'); // Call this with your actual prediction and probability | |
| </script> | |
| </body> | |
| </html> | |