automated

Running

File size: 18,101 Bytes

9aba585

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
        integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css2?family=Rowdies:wght@700&display=swap" rel="stylesheet">
    <!---<link rel="stylesheet" href="styles.css">!-->
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

    <title>STRAWBERRY PLANT DISEASE PREDICTION</title>

    <style>
       
        form {
            display: flex;
            height: 85vh;
            justify-content: center;
            align-items: center;
            margin-top: 50px;
            width: 60%;
            text-align: center;
            margin: auto;
        }


        .details h2 {
            
            position: relative;
            top: 100px;
            margin: auto;
            color: rgb(18, 231, 231);
            font-size: 3rem;
        }

        label:hover {
            transform: scale(1.03);
        }

        .details h2 {
            /* margin-bottom: 300px; */
            position: relative;
            top: 100px;
            margin: auto;
            color: rgb(18, 231, 231);
            font-size: 3rem;

        }

        .gallery-h1 h1 {

            background-color: rgb(44, 43, 43);
            color: white;
            padding: 20px;
            border-radius: 15px;

        }

        .details h1 {
            color: white;
            padding: 20px;
            border-radius: 15px;
            background-color: rgb(45, 47, 49);
        }


        .upload {

            font-size: 20px;
            background-color: rgb(255, 252, 252);
            border-radius: 20px;
            outline: none;
            width: 315px;
            color: rgb(0, 0, 0);
            border: 3px solid rgb(45, 47, 49);



        }

        ::-webkit-file-upload-button {
            color: white;
            padding: 20px;
            border: 2px solid rgb(129, 129, 129);
            background-color: rgb(129, 129, 129);
            border-radius: 15px;

        }

        ::-webkit-file-upload-button:hover {
            border-radius: 20px;
            border: 2px solid rgb(177, 174, 174);


        }



        input[type="submit"] {
            position: absolute;
            margin-top: 190px;
            padding: 15px 35px;
            background-color: white;
            border-radius: 15px;
            color: black;
            font-size: 1.5rem;
            border: 4px solid rgb(31, 185, 190);
        }

        .carousel-caption {
            background: rgba(24, 25, 26, 0.5);
            border-radius: 10px;
        }


        .carousel-caption h3 {


            font-family: 'Rowdies', cursive;
            color: yellow;
            text-transform: uppercase;
            margin-bottom: 10px;

        }

        .carousel-caption p {
            padding: 7px;


        }

        .img-thumbnail {
            height: 300px;
        }

        .Content-h5 {

            padding: 15px;
            background-color: rgb(153, 156, 150);
            color: white;
            border-radius: 15px;
            margin-bottom: 25px;
        }


        @media only screen and (max-width: 325px) {
            body {
                font-size: x-small;
         
            }
        }
        * {
            box-sizing: border-box;
          }
          
          body {
            margin: 0;
            font-family: Arial;
          }
          
          /* The grid: Four equal columns that floats next to each other */
          .column {
            float: left;
            width: 25%;
            padding: 10px;
          }
          
          /* Style the images inside the grid */
          .column img {
            opacity: 0.8; 
            cursor: pointer; 
          }
          
          .column img:hover {
            opacity: 1;
          }
          
          /* Clear floats after the columns */
          .row:after {
            content: "";
            display: table;
            clear: both;
          }
          
          /* The expanding image container */
          .container {
            position: relative;
            display: none;
          }
          
          /* Expanding image text */
          #imgtext {
            position: absolute;
            bottom: 15px;
            left: 15px;
            color: white;
            font-size: 20px;
          }
          
          /* Closable button inside the expanded image */
          .closebtn {
            position: absolute;
            top: 10px;
            right: 15px;
            color: white;
            font-size: 35px;
            cursor: pointer;
          }
          .animate-charcter {
            text-transform: uppercase;
            background-image: linear-gradient(-225deg,
                #231557 0%,
                #44107a 29%,
                #ff1361 67%,
                #fff800 100%);
            background-size: auto auto;
            background-clip: border-box;
            background-size: 200% auto;
            color: #fff;
            content: center;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: textclip 3s linear infinite;
            display: inline-block;
            font-size: 24px;
          }
          @keyframes textclip {
            to {
              background-position: 200% center;
            }
          }
          * {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1500px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #000000;
  font-size: 24px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.2s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}
    </style>


</head>

<body>


   <!---<header>
        <div class="container-fluid">
            <div id="myCarousel" class="carousel slide" data-ride="carousel">
                <ol class="carousel-indicators">
                    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                    <li data-target="#myCarousel" data-slide-to="1" class=""></li>
                    <li data-target="#myCarousel" data-slide-to="2" class=""></li>
                </ol>
                <div class="carousel-inner">
                    <div class="carousel-item active ">
                        <img src="/static/images/image1.jpg" class="d-block w-100" alt="...">

                        <div class="container">
                            <div class="container background-img3">
                                <div class="carousel-caption">

                                    <h3>Strawberry
                                        Plant Disease Prediction AI App</h3>
                                    <p>
                                        Many veterans said that Deep Learning and AI is a threat to our world, but if we
                                        use it properly, we can do many good things today, we will see a small example
                                        of this in which we will be in Strawberry farming
                                        Find out about the disease
                                    </p>

                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="carousel-item">
                        <img src="/static/images/img2.jpg" class="d-block w-100" alt="...">
                        <div class="container">
                            <div class="carousel-caption">
                                <h3>स्ट्रॉबेरी पेड़ का रोग का अंदाज और उपाय 
                                </h3>
                                <p>
                                    कई दिग्गजों ने कहा कि Deep Learning and AI यह हमारी दुनिया के लिए खतरा है लेकिन अगर
                                    हम इसका सही यूज़ करें तो हम कई अच्छे काम भी कर सकते हैं आज इसी का छोटा सा example
                                    देखेंगे जिसमें हम स्ट्रॉबेरी की खेती में होने वाले
                                    रोग के बारे मे पता करेगें</p>

                            </div>
                        </div>
                    </div>


                    <div class="carousel-item">
                        <img src="/static/images/img3.jpg" class="d-block w-100" alt="...">
                        <div class="container">
                            <div class="container ">
                                <div class="carousel-caption">
                                    <h3>
                                        स्ट्रॉबेरीच्या झाडाच्या रोगाचा अंदाज आणि उपाय </h3>
                                    <p>गेल्या काही वर्षांपासून
								 सखोल अभ्यास (Deep Learning) आणि कृत्रिम बुद्धिमत्ता (Artificial Intelligence) हा सर्वात चर्चेचा विषय राहिला आहे, 
								बरेच दिग्गज लोक म्हणतात की हा आपल्या जगासाठी धोका आहे, परंतु जर आपण त्याचा योग्य वापर केला तर आपण आज बर्‍याच चांगल्या गोष्टी करू शकतो. 
								त्याचेच एक उदाहरण हे  की  आपण स्ट्रॉबेरीचे रोग जाणून त्यावर त्यावर उपाय काढतो.
                                    </p>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="sr-only">Previous</span>
                </a>
                <a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="sr-only">Next</span>
                </a>
            </div>
        </div>
    </header>-->
    <div class="slideshow-container">
        <center style="border: 5px solid black; padding:20px;">
        <div class="mySlides fade">
          <div class="numbertext">1 / 3</div>
          <img src="static/images/image1.jpg" style="width:100%">
          <div class="carousel-caption">
            <h3>Strawberry
                Plant Disease Prediction AI App</h3></div>
        </div>
        
        <div class="mySlides fade">
          <div class="numbertext">2 / 3</div>
          <img src="static/images/image2.JPG" style="width:100%">
          <div class="carousel-caption">
            <h3>स्ट्रॉबेरी पेड़ का रोग का अंदाज और उपाय 
            </h3> </div>
        </div>
        
        <div class="mySlides fade">
          <div class="numbertext">3 / 3</div>
          <img src="static/images/image3.jpg" style="width:100%">
          <div class="carousel-caption">
            <h3>
                स्ट्रॉबेरीच्या झाडाच्या रोगाचा अंदाज आणि उपाय </h3></div>
        </div>
        
        </div>
        <br>
        
        <div style="text-align:center">
          <span class="dot"></span> 
          <span class="dot"></span> 
          <span class="dot"></span> 
        </div>




    <section>
        <div class="container-fluid details"><br><br>
            <center style="border: 5px solid black; padding: 1px;">
            <h1 class="text-center mt-4 mb-4 animate-charcter" style="font-size:30px" >Predict strawberry Crop Disease & Get Cure</h1>
        </center>
            <h2 class="text-center mt-4 mb-4" style="font-size: 2rem;">स्ट्रॉबेरी के पेड कि तस्वीर डालिये</h2>
            <form action="/predict" method="post" enctype="multipart/form-data" onsubmit="showloading()">

                <input type="file" name="image" class="upload"><br>
                <input type="submit" value="Predict">

            </form>
        </div>
    </section>


    <section>
        <center style="border: 5px solid black; padding: 3px;">
            <div class="text-center mt-4 mb-4 animate-charcter">
            <h1>Photo Gallery</h1>
            </div>
           </center>
           <div class="row">
            <div class="column">
              <img src="/static/images/gal1.jpg" alt="" style="width:100%" onclick="myFunction(this);">
            </div>
            <div class="column">
              <img src="/static/images/gal2.jpg" alt="" style="width:100%" onclick="myFunction(this);">
            </div>
            <div class="column">
              <img src="/static/images/gal3.jpg" alt="" style="width:100%" onclick="myFunction(this);">
            </div>
            <div class="column">
              <img src="/static/images/gall (3).jpeg" alt="" style="width:100%" onclick="myFunction(this);">
            </div>
            <div class="column">
               <img src="/static/images/gal5.jpeg" alt="" style="width:100%" onclick="myFunction(this);">
              </div>
              <div class="column">
                <img src="/static/images/mob4.JPG" alt="" style="width:100%" onclick="myFunction(this);">
              </div>
              <div class="column">
                <img src="/static/images/gall (1).jpeg" alt="" style="width:100%" onclick="myFunction(this);">
              </div>
              <div class="column">
                <img src="/static/images/gall (2).jpeg" alt="" style="width:100%" onclick="myFunction(this);">
              </div>
          </div>
          
          <center><div class="container">
            <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
            <img id="expandedImg" style="width:50%">
            <div id="imgtext"></div>
          </div></center>
          
    </section>

    <section>
        <div class="container Content-h5">

            <h5 style="font-size: 1rem;" class="text-center my-3 contents">
                Delivery Contact:
                IndianAIProduction.business@gmail.com</h5>

        </div>
    </section>








    <script>
        function myFunction(imgs) {
          var expandImg = document.getElementById("expandedImg");
          var imgText = document.getElementById("imgtext");
          expandImg.src = imgs.src;
          imgText.innerHTML = imgs.alt;
          expandImg.parentElement.style.display = "block";
        }
        </script>
        


    <!-- <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>-->
     <!--<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>!-->
    <!--<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
        integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
        crossorigin="anonymous"></script>!-->
        <script>
            let slideIndex = 0;
            showSlides();
            
            function showSlides() {
              let i;
              let slides = document.getElementsByClassName("mySlides");
              let dots = document.getElementsByClassName("dot");
              for (i = 0; i < slides.length; i++) {
                slides[i].style.display = "none";  
              }
              slideIndex++;
              if (slideIndex > slides.length) {slideIndex = 1}    
              for (i = 0; i < dots.length; i++) {
                dots[i].className = dots[i].className.replace(" active", "");
              }
              slides[slideIndex-1].style.display = "block";  
              dots[slideIndex-1].className += " active";
              setTimeout(showSlides, 2000); // Change image every 2 seconds
            }
            </script>


</body>

</html>