<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="author" content="Untree.co">
  <link rel="shortcut icon" href="favicon.png">

  <meta name="description" content="" />
  <meta name="keywords" content="bootstrap, bootstrap4" />

		<!-- Bootstrap CSS -->
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
		<link href="css/tiny-slider.css" rel="stylesheet">
		<link href="css/style.css" rel="stylesheet">
		<title>ARI.SCAN | Detection of Acute Respiratory Infections </title>
	</head>

	<body>

		<!-- Start Header/Navigation -->
		<nav class="custom-navbar navbar navbar navbar-expand-md navbar-dark bg-dark" arial-label="Furni navigation bar">

			<div class="container">
				<a class="navbar-brand" href="index.php">ARI.<span>SCAN</span></a>

				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsFurni" aria-controls="navbarsFurni" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon"></span>
				</button>

				<div class="collapse navbar-collapse" id="navbarsFurni">
					<ul class="custom-navbar-nav navbar-nav ms-auto mb-2 mb-md-0">
						<li><a class="nav-link" href="index.php">Home</a></li>
						<li class="nav-item active">
							<a class="nav-link" href="bacteria.php">Bacteria</a>
						</li>
						<li><a class="nav-link" href="blog.php">Blog</a></li>
						<li><a class="nav-link" href="about.php">About us</a></li>
					</ul>

					<!-- <ul class="custom-navbar-cta navbar-nav mb-2 mb-md-0 ms-5">
						<li><a class="nav-link" href="#"><img src="images/user.svg"></a></li>
						<li><a class="nav-link" href="cart.html"><img src="images/cart.svg"></a></li>
					</ul> -->
				</div>
			</div>
				
		</nav>
		<!-- End Header/Navigation -->

		<!-- Start Hero Section -->
			<div class="hero">
				<div class="container">
					<div class="row justify-content-between">
						<div class="col-lg-5">
							<div class="intro-excerpt">
								<h1> Bacteria </h1>
								<p class="mb-4">Bacteria are small microorganisms that can cause various types of diseases, including respiratory tract infections. Some bacteria that are generally involved in ARI include Streptococcus pneumoniae, Corynebacterium diphteriae, Mycobacterium Tuberculosis, Staphylococcus aureus and Neiseria gonorroea. Diseases such as pneumonia, bronchitis, and sinusitis are often caused by this bacteria.</p>
							</div>
						</div>
						<div class="col-lg-7">
							<div class="hero-img-wrap">
								<img src="images/bacteria.png" class="img-fluid">
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- End Hero Section -->

		<!-- Start Product Section -->
		<div class="product-section">
			<div class="container">
				
				<div class="row">

					<!-- Start Column 1 -->
					<div class="col-md-12 col-lg-2 mb-5 mb-lg-0">
						<h2 class="mb-1 section-title">Five Types of Bacteria.</h2>
						<p class="mb-3">Bacteria are small microorganisms that can cause various types of diseases, including respiratory tract infections. Several bacteria are generally involved in ARI. </p>
						<p><a href="#uji" class="btn">Uji Data</a></p>
					</div> 
					<!-- End Column 1 -->

					<!-- Start Column 2 -->
					<div class="col-12 col-md-4 col-lg-2 mb-5 mb-md-0 mt-5">
						<a class="product-item" href="streptococcus.php">
							<img src="images/streptococcus.png" class="img-fluid product-thumbnail">
							<strong class="product-price">Bacteria</strong>
							<h3 class="product-title">Streptococcus pneumoniae</h3>

							<span class="icon-cross">
								<img src="images/open.svg" class="img-fluid">
							</span>
						</a>
					</div> 
					<!-- End Column 2 -->

					<!-- Start Column 3 -->
					<div class="col-12 col-md-4 col-lg-2 mb-5 mb-md-0 mt-5">
						<a class="product-item" href="corynebacterium.php">
							<img src="images/Corynebacterium.png" class="img-fluid product-thumbnail">
							<strong class="product-price">Bacteria</strong>
							<h3 class="product-title">Corynebacterium diphteriae</h3>

							<span class="icon-cross">
								<img src="images/open.svg" class="img-fluid">
							</span>
						</a>
					</div>
					<!-- End Column 3 -->

					<!-- Start Column 4 -->
					<div class="col-12 col-md-4 col-lg-2 mb-5 mb-md-0 mt-5">
						<a class="product-item" href="mycobacterium.php">
							<img src="images/tubercolosis.png" class="img-fluid product-thumbnail">
							<strong class="product-price">Bacteria</strong>
							<h3 class="product-title">Mycobacterium Tuberculosis</h3>

							<span class="icon-cross">
								<img src="images/open.svg" class="img-fluid">
							</span>
						</a>
					</div>
					<!-- End Column 4 -->
					<!-- Start Column 4 --> 
					<div class="col-12 col-md-4 col-lg-2 mb-5 mb-md-0 mt-4">
						<a class="product-item" href="staphylococcus.php">
							<img src="images/Staphylococcus.png" class="img-fluid product-thumbnail">
							<strong class="product-price">Bacteria</strong>
							<h3 class="product-title">Staphylococcus aureus</h3>

							<span class="icon-cross">
								<img src="images/open.svg" class="img-fluid">
							</span>
						</a>
					</div>
					<!-- End Column 4 -->
					<!-- Start Column 4 -->
					<div class="col-12 col-md-4 col-lg-2 mb-5 mb-md-0">
						<a class="product-item" href="neiseria.php">
							<img src="images/neisseria.png" class="img-fluid product-thumbnail">
							<strong class="product-price">Bacteria</strong>
							<h3 class="product-title">Neiseria gonorroea</h3>

							<span class="icon-cross">
								<img src="images/open.svg" class="img-fluid">
							</span>
						</a>
					</div>
					<!-- End Column 4 -->

				</div>
			</div>
		</div>
		<!-- End Product Section -->
		<div class="container">
		<h1 class="mt-5" id="uji">Random Forest Classification of Bacteria</h1>
		<p> <b> Warning </b>: Before carrying out classification, it is hoped that you will first study the five bacteria above to adjust the bacterial image to the image preprocessing that will be carried out in Random Forest Classification.</p>
		
		<div class="card p-4">
		<form action="" method="post" enctype="multipart/form-data" id="uploadForm">
			<div class="row">
				<div class="col-6">
					<label for="file" class="form-label">Select image to upload:</label>
					<input type="file" class="form-control" name="file" id="file">
					<label for="label" class="form-label">Select bacteria according to their shape:</label>
					<select class="form-select" name="label" id="label">
						<option value="Corynebacterium Diphteriae">Pleomorphic Rods</option>
						<option value="Mycobacterium Tuberculosis">Acid-fast Rods</option>
						<option value="Neiseria Gonorroea">Diplococci</option>
						<option value="Staphylococcus Aureus">Cocci</option>
					</select>
				</div>
				<div class="col-6">
					<label for="img" class="form-label">Types of bacterial forms:</label>
					<img src="images/info bakteri.jpg" alt="bakteri" class="w-100">
				</div>
			</div>
			<button type="submit" class="mb-3 btn btn-primary">Process</button>
		</form>
		</div>
		<div id="outputSection" class="mt-5">
		<?php
		if ($_SERVER['REQUEST_METHOD'] == 'POST') {
			$file = $_FILES['file'];
			$label = $_POST['label'];

			if ($file['error'] == UPLOAD_ERR_OK) {
				$tmp_name = $file['tmp_name'];
				$name = basename($file['name']);
				$upload_dir = 'uploads/';
				
				// Check if upload directory exists, if not create it
				if (!is_dir($upload_dir)) {
					mkdir($upload_dir, 0777, true);
				}

				$upload_file = $upload_dir . $name;

				if (move_uploaded_file($tmp_name, $upload_file)) {
					$cfile = curl_file_create($upload_file, $file['type'], $name);
					$data = array('file' => $cfile, 'label' => $label);

					$ch = curl_init();
					curl_setopt($ch, CURLOPT_URL, "http://127.0.0.1:5000/predict");
					curl_setopt($ch, CURLOPT_POST, 1);
					curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
					curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

					$response = curl_exec($ch);
					if (curl_errno($ch)) {
						echo '<div class="alert alert-danger mt-3">cURL error: ' . curl_error($ch) . '</div>';
					}
					curl_close($ch);

					$result = json_decode($response, true);

					if (isset($result['error'])) {
						echo '<div class="alert alert-danger mt-3">Error: ' . htmlspecialchars($result['error']) . '</div>';
					} else if ($result === null) {
						echo '<div class="alert alert-danger mt-3">Error: Invalid JSON response</div>';
					} else {
						if (isset($result['prediction']) && isset($result['features'])) {
							echo '<div class="card mt-5">';
							echo '<div class="card-header text-white">';
							echo '<h2>Output</h2>';
							echo '</div>';
							echo '<div class="card-body">';
							echo '<div class="text-center">';
							echo '<img src="' . htmlspecialchars($upload_file) . '" class="img-fluid mt-3 mb-3 mx-auto d-block" alt="Uploaded Image">';
							echo '</div>';
							echo '<p><center><strong>Hasil Klasifikasi dari Citra diatas termasuk Kelas Bakteri:</strong> ' . htmlspecialchars($result['prediction']) .'</center></p>';
							echo '<h3>Extracted Features:</h3>';
							echo '<ul class="list-group">';
							echo '<li class="list-group-item"><strong>Number of Objects:</strong> ' . htmlspecialchars($result['features']['num_objects']) . '</li>';
							echo '<li class="list-group-item"><strong>Mean Eccentricity:</strong> ' . htmlspecialchars($result['features']['mean_eccentricity']) . '</li>';
							echo '<li class="list-group-item"><strong>Mean Metric:</strong> ' . htmlspecialchars($result['features']['mean_metric']) . '</li>';
							echo '<li class="list-group-item"><strong>Total Area:</strong> ' . htmlspecialchars($result['features']['total_area']) . '</li>';
							echo '<li class="list-group-item"><strong>Total Perimeter:</strong> ' . htmlspecialchars($result['features']['total_perimeter']) . '</li>';
							echo '</ul>';

							// Display binary image
							if(isset($result['features']['binary_image']) && is_string($result['features']['binary_image'])) {
								echo '<h3>Binary Image:</h3>';
								echo '<img src="data:image/jpg;base64,' . htmlspecialchars($result['features']['binary_image']) . '" class="img-fluid mt-3" alt="Binary Image">';
							}
							echo '</div>';
							echo '</div>';
						} else {
							echo '<div class="alert alert-danger mt-3">Error: Missing Output or features in response.</div>';
						}
					}
				} else {
					echo '<div class="alert alert-danger mt-3">Failed to move uploaded file.</div>';
				}
			} else {
				echo '<div class="alert alert-danger mt-3">File upload error.</div>';
			}
		}
		?>
		</div>
	</div>

	<!-- Start Footer Section -->
	<footer class="footer-section mt-5 custom-navbar text-white">
			<div class="container relative">
			<div class="sofa-img mt-5"> <br> <br>
				<img src="images/vision.png" alt="Image" class="img-fluid mt-5">
			</div>

			<div class="row g-5">
				<div class="col-lg-4">
					<div class="mb-4 footer-logo-wrap"><a href="index.php" class="footer-logo">ARI<span>.SCAN</span></a></div>
				</div>
			</div>
			<div class="row g-5">
				<div class="col-lg-4">
					<div class="mb-4 footer-logo-wrap">
						<img src="images/logo jti.svg" alt="logojti" class="footer-logo">
					</div>
					<span class="elementor-icon-list-text">Politeknik Negeri Jember - Kampus 2 Bondowoso</span>
					<span class="elementor-icon-list-text">Alamat: Jl. KH. Wahid Hasyim No 41, Bondowoso - Jawa Timur</span>
				</div>
			</div>
			<div class="border-top copyright">
				<div class="row pt-4">
				<div class="col-lg-6">
					<p class="mb-2 text-center text-lg-start">Copyright &copy;<script>document.write(new Date().getFullYear());</script>. All Rights Reserved. &mdash; Created by <a href="https://www.linkedin.com/in/dimas-fany-azzuzi-77793b1b6/">Dimas Fany Azzuzi.</a>
					</p>
				</div>
				</div>
			</div>
			</div>
		</footer>
		<!-- End Footer Section -->  
		<style>
			.footer-logo {
				max-width: 300px; /* Atur lebar maksimum gambar */
				height: auto; /* Biarkan tinggi menyesuaikan proporsi */
				}
		</style>
	<script>
		// JavaScript for scrolling to output section after form submission
		document.getElementById('uploadForm').addEventListener('submit', function(event) {
		event.preventDefault();
		
		var xhttp = new XMLHttpRequest();
		xhttp.onreadystatechange = function() {
			if (this.readyState == 4 && this.status == 200) {
			document.getElementById('outputSection').innerHTML = this.responseText;
			window.scrollTo({ top: document.getElementById('outputSection').offsetTop, behavior: 'smooth' });
			}
		};
		xhttp.open("POST", "upload.php", true);
		xhttp.send(new FormData(document.getElementById('uploadForm')));
		});
	</script>
		<script src="js/bootstrap.bundle.min.js"></script>
		<script src="js/tiny-slider.js"></script>
		<script src="js/custom.js"></script>
	</body>

</html>
