Spaces:
Running
Running
| <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">×</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> |