| <html lang="en">
|
| <head>
|
| <meta charset="utf-8" />
|
| <meta content="width=device-width, initial-scale=1.0" name="viewport" />
|
| <title>PneumonAI</title>
|
| <script src="https://cdn.tailwindcss.com"></script>
|
| <link
|
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
|
| rel="stylesheet"
|
| />
|
| <link
|
| href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap"
|
| rel="stylesheet"
|
| />
|
| <link
|
| rel="icon"
|
| href="{{ url_for('static', filename='logo.png') }}"
|
| type="image/x-icon"
|
| />
|
| <style>
|
| body {
|
| font-family: "Nunito", sans-serif;
|
| }
|
|
|
| .blue {
|
| background-color: #0099ff;
|
| }
|
|
|
| .dongker {
|
| color: #01095e;
|
| }
|
|
|
| .bg {
|
| background-color: rgba(0, 153, 255, 0.65);
|
| }
|
|
|
| .bdr {
|
| border: 2px solid #0099ff;
|
| }
|
| </style>
|
| </head>
|
| <body class="bg-gray-50 text-gray-1000">
|
| <header class="bg-white shadow-lg sticky top-0 z-50">
|
| <div
|
| class="container mx-auto px-12 py-4 flex justify-between items-center"
|
| >
|
| <div class="flex items-center">
|
| <img
|
| alt="PneumonAI logo"
|
| class="h-10 w-10 rounded-md"
|
| height="40"
|
| src="{{ url_for('static', filename='logo.png') }}"
|
| width="40"
|
| />
|
| <span class="ml-2 text-2xl font-bold dongker"> PneumonAI </span>
|
| </div>
|
| <nav class="flex space-x-4 items-center">
|
| <a class="hover:text-blue-500" href="{{ url_for('home') }}"> Home </a>
|
| <a class="hover:text-blue-500" href="{{ url_for('about') }}">
|
| About Us
|
| </a>
|
| <a
|
| class="blue text-white px-4 py-2 rounded-full hover:bg-blue-500"
|
| href="#detect"
|
| >
|
| Start Detecting
|
| </a>
|
| </nav>
|
| </div>
|
| </header>
|
|
|
| <main>
|
| <section class="bg-white py-12">
|
| <div
|
| class="container mx-auto px-12 flex flex-col md:flex-row items-center"
|
| >
|
| <div class="md:w-2/3 text-center md:text-left">
|
| <h1 class="text-5xl font-bold dongker">
|
| Detect Pneumonia with AI. <br />Fast, Accurate, and Easy!
|
| </h1>
|
| <p class="mt-4 pt-4 text-lg">
|
| Welcome to the future of pneumonia detection! With just one click,
|
| you can analyze your chest X-ray and get fast, reliable results.
|
| Start now and experience the power of cutting-edge technology.
|
| </p>
|
| <div class="mt-8 flex justify-center md:justify-start space-x-4">
|
| <a
|
| class="blue text-white px-6 py-3 rounded-full hover:bg-blue-500"
|
| href="#detect"
|
| >
|
| Start Detecting
|
| </a>
|
| </div>
|
| </div>
|
| <div class="md:w-1/3 mt-8 md:mt-0 flex justify-center md:justify-end">
|
| <img
|
| alt="Doctor analyzing X-ray"
|
| class="mx-auto"
|
| height="400"
|
| src="{{ url_for('static', filename='header.png') }}"
|
| width="400"
|
| />
|
| </div>
|
| </div>
|
| </section>
|
| <section class="bg py-16">
|
| <div class="container mx-auto px-4 py-8">
|
| <h2 class="text-5xl font-bold text-center dongker">
|
| What You Need to Know About Pneumonia
|
| </h2>
|
| <div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8 pt-12 px-8">
|
| <div class="bg-white p-6 rounded-2xl shadow">
|
| <h3 class="text-2xl font-bold text-gray-800">
|
| What is Pneumonia?
|
| </h3>
|
| <p class="mt-2">
|
| Pneumonia is a lung infection that makes it hard to breathe. It
|
| fills the air sacs in your lungs with fluid or pus, leading to
|
| coughing, fever, and chills. While anyone can get pneumonia,
|
| it's more dangerous for young kids, older people, and those with
|
| weak immune systems.
|
| </p>
|
| </div>
|
| <div class="bg-white p-6 rounded-2xl shadow">
|
| <h3 class="text-2xl font-bold text-gray-800">What Causes It?</h3>
|
| <p class="mt-2">
|
| Pneumonia is caused by germs like bacteria, viruses (like the
|
| flu or COVID-19), and fungi. The most common type comes from
|
| bacteria called Streptococcus pneumoniae.
|
| </p>
|
| </div>
|
| <div class="bg-white p-6 rounded-2xl shadow">
|
| <h3 class="text-2xl font-bold text-gray-800">
|
| What Happens if It's Left Untreated?
|
| </h3>
|
| <p class="mt-2">
|
| Without treatment, pneumonia can cause serious problems like
|
| breathing failure or blood infections. It's important to treat
|
| it early to prevent these dangers.
|
| </p>
|
| </div>
|
| <div class="bg-white p-6 rounded-2xl shadow">
|
| <h3 class="text-2xl font-bold text-gray-800">
|
| How Do You Detect It?
|
| </h3>
|
| <p class="mt-2">
|
| Pneumonia symptoms can feel like a bad cold, so doctors use
|
| chest X-rays to find it. With our AI, you can upload your X-ray,
|
| and we'll help check for pneumonia quickly.
|
| </p>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
| <section class="bg-white py-16 pb-24">
|
| <div class="container mx-auto px-12 pt-8">
|
| <h2 class="text-5xl font-bold text-center dongker">
|
| How Does Our AI Detect Pneumonia?
|
| </h2>
|
| <p class="mt-4 text-center py-8 text-lg">
|
| Behind the scenes, our AI is like a detective, scanning your X-ray
|
| for clues and patterns that could signal pneumonia. It's fast,
|
| reliable, and gives you answers without the wait. Want to know how
|
| it all works? We've got you covered.
|
| </p>
|
|
|
| <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
|
| <div class="bg-white p-6 bdr rounded-3xl shadow-xl">
|
| <div class="flex items-start">
|
| <div>
|
| <img
|
| src="{{ url_for('static', filename='machine-learning.png') }}"
|
| alt="icon"
|
| class="w-9 h-9 mr-4 mb-2"
|
| />
|
| <h3 class="text-xl font-bold">Powered by Deep Learning</h3>
|
| <p class="mt-2">
|
| Our AI uses deep learning, mimicking the human brain.
|
| Trained on thousands of X-rays, it recognizes subtle
|
| patterns that even experts might miss, like having a
|
| super-experienced radiologist 24/7.
|
| </p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div
|
| class="bg-white p-6 bdr rounded-3xl shadow-xl row-span-2 flex items-center justify-center"
|
| >
|
| <img
|
| alt="AI analyzing X-ray"
|
| class="mx-auto"
|
| height="500"
|
| src="{{ url_for('static', filename='robot.png') }}"
|
| width="500"
|
| />
|
| </div>
|
|
|
|
|
| <div class="bg-white p-6 bdr rounded-3xl shadow-xl">
|
| <div class="flex items-start">
|
| <div>
|
| <img
|
| src="{{ url_for('static', filename='clock.png') }}"
|
| alt="icon"
|
| class="w-9 h-9 mr-4 mb-2"
|
| />
|
| <h3 class="text-xl font-bold">Super Quick Results</h3>
|
| <p class="mt-2">
|
| Get results in seconds after uploading your image. The AI
|
| processes it instantly, delivering a detailed report without
|
| delay.
|
| </p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="bg-white p-6 bdr rounded-3xl shadow-xl">
|
| <div class="flex items-start">
|
| <div>
|
| <img
|
| src="{{ url_for('static', filename='eye.png') }}"
|
| alt="icon"
|
| class="w-9 h-9 mr-4 mb-2"
|
| />
|
| <h3 class="text-xl font-bold">What Does It Look For?</h3>
|
| <p class="mt-2">
|
| Upload your chest X-ray, and the AI scans for pneumonia
|
| signs such as lung opacity, fluid buildup, and inflammation,
|
| providing a detailed analysis.
|
| </p>
|
| </div>
|
| </div>
|
| </div>
|
|
|
|
|
| <div class="bg-white p-6 bdr rounded-3xl shadow-xl">
|
| <div class="flex items-start">
|
| <div>
|
| <img
|
| src="{{ url_for('static', filename='accuracy.png') }}"
|
| alt="icon"
|
| class="w-9 h-9 mr-4 mb-2"
|
| />
|
| <h3 class="text-xl font-bold">Accuracy You Can Trust</h3>
|
| <p class="mt-2">
|
| Trained on 10,000 images, our model delivers 95.83% of
|
| accuracy, complementing doctors' expertise for the best
|
| care.
|
| </p>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
| <section class="bg py-16 px-8 pb-24" id="detect">
|
| <div class="container mx-auto px-4 text-center">
|
| <h2 class="text-5xl font-bold dongker mt-8">
|
| Upload Your X-ray - Get Instant Results!
|
| </h2>
|
| <p class="mt-4 text-lg py-8">
|
| Got a chest X-ray? Great! Upload it here, and in just a few moments,
|
| our AI will give you a detailed report. <br />It's quick, it's easy,
|
| and it's secure. Let's get started!
|
| </p>
|
| <div
|
| class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8 bg-white rounded-3xl p-8 mx-36"
|
| style="min-height: 450px"
|
| >
|
| <div
|
| class="bg-white p-6 rounded-xl shadow flex flex-col items-center justify-center border-2 border-dashed border-gray-500 relative"
|
| >
|
| <img
|
| src="{{ url_for('static', filename='x-ray.png') }}"
|
| alt="icon"
|
| class="w-20 h-20 opacity-40"
|
| id="uploadLogo"
|
| />
|
| <button
|
| class="mt-4 blue text-white px-6 py-3 mt-8 rounded-full hover:bg-blue-500"
|
| id="uploadButton"
|
| >
|
| Upload Image
|
| </button>
|
| <input
|
| class="hidden"
|
| id="fileInput"
|
| type="file"
|
| accept="image/*"
|
| />
|
| <img
|
| alt="Image Preview"
|
| class="mt-4 hidden"
|
| id="imagePreview"
|
| style="display: none; max-width: 100%"
|
| />
|
| <i
|
| class="fas fa-times text-3xl absolute dongker mt-4 hidden top-0 right-6"
|
| id="removeImage"
|
| style="cursor: pointer"
|
| >
|
| </i>
|
| </div>
|
| <div
|
| class="bg-white p-6 rounded-xl shadow flex flex-col items-center justify-center border-2 border-gray-300"
|
| >
|
| <img
|
| src="{{ url_for('static', filename='loupe.png') }}"
|
| alt="icon"
|
| class="w-20 h-20 opacity-40"
|
| id="check-icon"
|
| />
|
| <button
|
| class="mt-4 bg-gray-200 px-6 py-3 mt-8 rounded-full hover:bg-gray-300"
|
| id="check-button"
|
| disabled
|
| >
|
| Check My X-Ray
|
| </button>
|
| <div class="w-full" id="prediction-result" style="display: none">
|
| <div>
|
| <p class="text-left pb-2 text-lg">Prediction</p>
|
| <div
|
| id="prediction"
|
| class="bg-gray-100 py-9 rounded-lg text-center text-2xl font-bold"
|
| >
|
| Pneumonia
|
| </div>
|
| </div>
|
| <div class="pt-12">
|
| <p class="text-left pb-2 text-lg">Confidence</p>
|
| <div
|
| id="confidence"
|
| class="bg-gray-100 py-9 rounded-lg text-center text-2xl font-bold"
|
| >
|
| 98.57%
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </div>
|
| </section>
|
| <section class="bg-white py-16 px-8">
|
| <div class="container mx-auto px-4">
|
| <h2 class="text-5xl font-bold dongker">Frequently Ask Question</h2>
|
| <hr class="my-4 border-t-2 border-gray-300" />
|
| <ul class="mt-8 space-y-4 text-lg">
|
| <li class="accordion-item">
|
| <div class="accordion-header cursor-pointer text-xl font-bold">
|
| <span class="icon font-normal">></span>
|
| <span>How quickly can I start the detection process?</span>
|
| </div>
|
| <div
|
| class="accordion-content max-h-0 overflow-hidden transition-all duration-300"
|
| >
|
| <p class="mt-2 text-justify">
|
| No complicated forms here. Just drag and drop your chest X-ray
|
| image or select it from your device, and our AI will start
|
| analyzing right away. The process only takes a few seconds,
|
| and you'll have your results in no time.
|
| </p>
|
| </div>
|
| </li>
|
| <li class="accordion-item">
|
| <div class="accordion-header cursor-pointer text-xl font-bold">
|
| <span class="icon font-normal">></span>
|
| <span>What information will I receive after the scan?</span>
|
| </div>
|
| <div
|
| class="accordion-content max-h-0 overflow-hidden transition-all duration-300"
|
| >
|
| <p class="mt-2 text-justify">
|
| Once the scan is complete, you’ll receive two key pieces of
|
| information:
|
| <br /><br />
|
| Prediction: Whether the scan indicates ‘Normal’ or shows signs
|
| of ‘Pneumonia’.
|
| <br />
|
| Confidence Level: A percentage that tells you how confident
|
| the AI is in its prediction.
|
| <br /><br />
|
| For example, a 95% confidence means the AI is highly certain
|
| about its result.
|
| </p>
|
| </div>
|
| </li>
|
| <li class="accordion-item">
|
| <div class="accordion-header cursor-pointer text-xl font-bold">
|
| <span class="icon font-normal">></span>
|
| <span>Is my privacy protected when using this tool?</span>
|
| </div>
|
| <div
|
| class="accordion-content max-h-0 overflow-hidden transition-all duration-300"
|
| >
|
| <p class="mt-2 text-justify">
|
| We take your privacy seriously. Your X-rays are processed
|
| securely, and we don’t store any images after generating your
|
| results. It’s all about keeping your data safe while giving
|
| you the answers you need.
|
| </p>
|
| </div>
|
| </li>
|
| <li class="accordion-item">
|
| <div class="accordion-header cursor-pointer text-xl font-bold">
|
| <span class="icon font-normal">></span>
|
| <span>How fast will I get the results?</span>
|
| </div>
|
| <div
|
| class="accordion-content max-h-0 overflow-hidden transition-all duration-300"
|
| >
|
| <p class="mt-2 text-justify">
|
| No need to wait around. As soon as the image is uploaded, our
|
| AI works its magic and provides you with a detailed prediction
|
| in seconds. The confidence score helps you understand how
|
| reliable the result is, giving you peace of mind.
|
| </p>
|
| </div>
|
| </li>
|
| <li class="accordion-item">
|
| <div class="accordion-header cursor-pointer text-xl font-bold">
|
| <span class="icon font-normal">></span>
|
| <span>What should I do if the result indicates pneumonia?</span>
|
| </div>
|
| <div
|
| class="accordion-content max-h-0 overflow-hidden transition-all duration-300"
|
| >
|
| <p class="mt-2 text-justify">
|
| If the result suggests pneumonia, we recommend you follow up
|
| with a healthcare professional. The AI is designed to support
|
| early detection, but a doctor’s opinion is always the next
|
| step in your care journey.
|
| </p>
|
| </div>
|
| </li>
|
| </ul>
|
| </div>
|
| </section>
|
| </main>
|
| <footer class="bg-white py-4 pb-4">
|
| <div class="container mx-auto px-4 text-center">
|
| <p>Copyright © 2024 PneumonAI</p>
|
| </div>
|
| </footer>
|
| <script>
|
| document.addEventListener("DOMContentLoaded", function () {
|
| const items = document.querySelectorAll(".accordion-item");
|
| items.forEach((item) => {
|
| item
|
| .querySelector(".accordion-header")
|
| .addEventListener("click", () => {
|
| const openItem = document.querySelector(".accordion-item.open");
|
| toggleItem(item);
|
| if (openItem && openItem !== item) {
|
| toggleItem(openItem);
|
| }
|
| });
|
| });
|
|
|
| const toggleItem = (item) => {
|
| const content = item.querySelector(".accordion-content");
|
| if (item.classList.contains("open")) {
|
| content.style.maxHeight = null;
|
| item.classList.remove("open");
|
| } else {
|
| content.style.maxHeight = content.scrollHeight + "px";
|
| item.classList.add("open");
|
| }
|
| };
|
|
|
| document
|
| .getElementById("uploadButton")
|
| .addEventListener("click", function () {
|
| document.getElementById("fileInput").click();
|
| });
|
|
|
| document
|
| .getElementById("fileInput")
|
| .addEventListener("change", function (event) {
|
| const file = event.target.files[0];
|
| if (file) {
|
| const reader = new FileReader();
|
| reader.onload = function (e) {
|
| document.getElementById("imagePreview").src = e.target.result;
|
| document.getElementById("imagePreview").style.display = "block";
|
| document.getElementById("uploadLogo").style.display = "none";
|
| document.getElementById("uploadButton").style.display = "none";
|
| document.getElementById("removeImage").style.display = "block";
|
| };
|
| reader.readAsDataURL(file);
|
| }
|
| });
|
|
|
| document
|
| .getElementById("removeImage")
|
| .addEventListener("click", function () {
|
| document.getElementById("fileInput").value = "";
|
| document.getElementById("imagePreview").style.display = "none";
|
| document.getElementById("uploadLogo").style.display = "block";
|
| document.getElementById("uploadButton").style.display = "block";
|
| document.getElementById("removeImage").style.display = "none";
|
|
|
|
|
| window.location.reload();
|
| });
|
| });
|
|
|
| document.querySelectorAll(".accordion-item").forEach((item) => {
|
| const header = item.querySelector(".accordion-header");
|
| const content = item.querySelector(".accordion-content");
|
| const icon = header.querySelector(".icon");
|
|
|
| header.addEventListener("click", () => {
|
| const isActive = content.style.maxHeight;
|
| document
|
| .querySelectorAll(".accordion-content")
|
| .forEach((c) => (c.style.maxHeight = null));
|
| document
|
| .querySelectorAll(".icon")
|
| .forEach((i) => (i.textContent = ">"));
|
|
|
| if (!isActive) {
|
| content.style.maxHeight = content.scrollHeight + "px";
|
| icon.textContent = "v";
|
| } else {
|
| content.style.maxHeight = null;
|
| }
|
| });
|
| });
|
|
|
| const fileInput = document.getElementById("fileInput");
|
| const checkButton = document.getElementById("check-button");
|
|
|
| const removeImage = document.getElementById("removeImage");
|
| const uploadLogo = document.getElementById("uploadLogo");
|
| const imagePreview = document.getElementById("imagePreview");
|
|
|
| const predictionResult = document.getElementById("prediction-result");
|
| const predictionText = document.getElementById("prediction");
|
| const confidenceText = document.getElementById("confidence");
|
|
|
|
|
| fileInput.addEventListener("change", function () {
|
| if (fileInput.files.length > 0) {
|
| checkButton.disabled = false;
|
| uploadLogo.classList.add("hidden");
|
| imagePreview.src = URL.createObjectURL(fileInput.files[0]);
|
| imagePreview.classList.remove("hidden");
|
| removeImage.classList.remove("hidden");
|
| } else {
|
| checkButton.disabled = true;
|
| }
|
| });
|
|
|
|
|
| checkButton.addEventListener("click", function () {
|
| const formData = new FormData();
|
| formData.append("file", fileInput.files[0]);
|
| console.log(formData);
|
| fetch("/predict", {
|
|
|
| method: "POST",
|
| body: formData,
|
| })
|
| .then((response) => response.json())
|
| .then((data) => {
|
| predictionText.innerText = data.prediction;
|
| confidenceText.innerText = data.confidence.toFixed(2) + "%";
|
| predictionResult.style.display = "block";
|
| document.getElementById("check-icon").style.display = "none";
|
| document.getElementById("check-button").style.display = "none";
|
| })
|
| .catch((error) => {
|
| console.error("Error:", error);
|
| });
|
| });
|
|
|
| removeImage.addEventListener("click", function () {
|
| fileInput.value = "";
|
| checkButton.disabled = true;
|
| uploadLogo.classList.remove("hidden");
|
| imagePreview.classList.add("hidden");
|
| removeImage.classList.add("hidden");
|
| predictionResult.style.display = "none";
|
| });
|
| </script>
|
| </body>
|
| </html>
|
|
|
