<!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><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>Streptococcus pneumoniae</h1>
								<p class="mb-4">Streptococcus pneumoniae is a gram-positive cocci bacterium which is the main cause of bacterial pneumonia. Streptococcus pneumoniae is alpha-hemolytic, which means it can break down red blood cells through the production of hydrogen peroxide.</p>
							</div>
						</div>
						<div class="col-lg-6">
							<div class="hero-img-wrap">
								<img src="images/streptococcus1.png" class="img-fluid">
							</div>
						</div>
					</div>
				</div>
			</div>
		<!-- End Hero Section -->

		

		<div class="untree_co-section before-footer-section">
            <div class="container">
              <div class="row mb-5">
				<div class="row">
					<div class="col-md-12">
						<label class="text-black h4" for="coupon">Image Preprocessing Results</label>
						<p>The image preprocessing process is very important in image analysis and classification. The following is an explanation of each preprocessing stage carried out on the image:</p>
					</div>
				</div>
                <form class="col-md-12" method="post">
                  <div class="site-blocks-table">
                    <table class="table">
                      <thead>
                        <tr>
                          <th class="product-thumbnail">Original Image</th>
                          <th class="product-name">Green Image</th>
                          <th class="product-price">Thresholding</th>
                          <th class="product-quantity">Invers</th>
                          <th class="product-total">Morphology Opening</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td class="product-thumbnail">
                            <img src="images/sp/sp_1.jpg" alt="Image" class="img-fluid">
                          </td>
                          <td class="product-thumbnail">
                            <img src="images/sp/green.png" alt="Image" class="img-fluid">
                          </td>
                          <td class="product-thumbnail">
                            <img src="images/sp/thresh.png" alt="Image" class="img-fluid">
                          </td>
                          <td class="product-thumbnail">
                            <img src="images/sp/inv.png" alt="Image" class="img-fluid">
                          </td>
                          <td class="product-thumbnail">
                            <img src="images/sp/clear.png" alt="Image" class="img-fluid">
                          </td>
                        </tr>

                        <tr>
                          <td class="product-thumbnail">
                            <img src="images/sp/sp_22.jpg" alt="Image" class="img-fluid">
                          </td>
                          <td class="product-thumbnail">
                            <img src="images/sp/green1.png" alt="Image" class="img-fluid">
                          </td>
                          <td class="product-thumbnail">
                            <img src="images/sp/thresh1.png" alt="Image" class="img-fluid">
                          </td>
                          <td class="product-thumbnail">
                            <img src="images/sp/inv1.png" alt="Image" class="img-fluid">
                          </td>
                          <td class="product-thumbnail">
                            <img src="images/sp/clear1.png" alt="Image" class="img-fluid">
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </form>
              </div>
        
				<div class="col-md-12">
					<div class="row">
						<div class="col-lg-6">
							<label class="text-black h4" for="coupon">1. Original Image</label>
							<p>This is the original image that has not undergone any processing. This image is a raw image that will be analyzed and processed further.</p>\
						</div>
						<div class="col-lg-6">
							<label class="text-black h4" for="coupon">2. Green Image</label>
							<p>At this stage, the original image is processed to extract the green color component. This is often done to increase the contrast of certain features that stand out more in the green color channel.</p>\
						</div>
						<div class="col-lg-4">
							<label class="text-black h4" for="coupon">3. Thresholding</label>
							<p>The thresholding stage converts the image into a binary image by separating the object from the background based on pixel intensity values. Pixels whose intensity is above or below a certain threshold will be converted to white or black.</p>\
						</div>
						<div class="col-lg-4">
							<label class="text-black h4" for="coupon">4. Invers</label>
							<p>The inverse process inverts the colors of a binary image, where white pixels become black and vice versa. This helps in some cases to more clearly visualize the desired object.</p>\
						</div>
						<div class="col-lg-4">
							<label class="text-black h4" for="coupon">5. Morphology Opening</label>
							<p>This process involves a morphological operation called "opening", which combines erosion followed by dilation. The goal is to remove small objects from the image background, smooth the contours of the main object, and separate adjacent objects.</p>
						</div>
					</div>
				</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 src="js/bootstrap.bundle.min.js"></script>
		<script src="js/tiny-slider.js"></script>
		<script src="js/custom.js"></script>
	</body>

</html>
