Spaces:
Runtime error
Runtime error
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <meta name="description" content="ODONET is the first of its kind Artificial Intelligence based Identification system from India to identify nearly 250 species of Indian Dragonflies and Damselflies with an accuracy of 90%."> | |
| <meta name="author" content="Theivaprakasham H"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Odonet — AI powered odonates identification tool</title> | |
| <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet"> | |
| <title>Identify your Odonates</title> | |
| <!-- Additional CSS Files --> | |
| <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"> | |
| <link rel="stylesheet" type="text/css" href="css/font-awesome.css"> | |
| <link rel="stylesheet" type="text/css" href="css/templatemo-art-factory.css"> | |
| <link rel="stylesheet" type="text/css" href="css/owl-carousel.css"> | |
| <link rel="stylesheet" href="css/cropper.css"> | |
| <link rel="shortcut icon" href="images/favicon.png"> | |
| <!-- Facebook and Twitter integration --> | |
| <meta property="og:title" content="Odonet - AI-powered odonates identification tool" /> | |
| <meta property="og:image" content="" /> | |
| <meta property="og:url" content="https://odonet.in/" /> | |
| <meta property="og:site_name" content="Odonet" /> | |
| <meta property="og:description" content="Odonet is an instant odonates identification tool with cutting-edge Artificial intelligence(AI) technology that helps to identify nearly 250+ odonates from the India with high accuracy." /> | |
| <meta name="twitter:title" content="Odonet - AI-powered odonates identification tool" /> | |
| <meta name="twitter:image" content="" /> | |
| <meta name="twitter:url" content="https://odonet.in/" /> | |
| <meta name="twitter:card" content="" /> | |
| <!-- Global site tag (gtag.js) - Google Analytics --> | |
| <script async src="https://www.googletagmanager.com/gtag/js?id=G-P7QNYFLLJE"></script> | |
| <script> | |
| window.dataLayer = window.dataLayer || []; | |
| function gtag() { | |
| dataLayer.push(arguments); | |
| } | |
| gtag('js', new Date()); | |
| gtag('config', 'G-P7QNYFLLJE'); | |
| </script> | |
| </head> | |
| <style> | |
| body, | |
| html { | |
| height: 100%; | |
| margin: 0; | |
| } | |
| .img-rees { | |
| display: inline-block; | |
| vertical-align: middle; | |
| max-width: 350px; | |
| height: auto; | |
| border-radius: 2px; | |
| } | |
| .label { | |
| cursor: pointer; | |
| } | |
| .progress { | |
| display: none; | |
| margin-bottom: 1rem; | |
| } | |
| .alert { | |
| display: none; | |
| } | |
| .img-container img { | |
| max-width: 100%; | |
| height: auto; | |
| } | |
| </style> | |
| <body> | |
| <!-- ***** Preloader Start ***** --> | |
| <div id="preloader"> | |
| <div class="jumper"> | |
| <div></div> | |
| <div></div> | |
| <div></div> | |
| </div> | |
| </div> | |
| <!-- ***** Preloader End ***** --> | |
| <!-- ***** Header Area Start ***** --> | |
| <header class="header-area header-sticky"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-12"> | |
| <nav class="main-nav"> | |
| <!-- ***** Logo Start ***** --> | |
| <a href="#" class="logo">ODONET</a> | |
| <!-- ***** Logo End ***** --> | |
| <!-- ***** Menu Start ***** --> | |
| <ul class="nav"> | |
| <li class="scroll-to-section"><a href="#welcome" class="active">Home</a></li> | |
| <li class="scroll-to-section"><a href="#about">Identify</a></li> | |
| <li class="scroll-to-section"><a href="#services">Photo Gallery</a></li> | |
| <li class="scroll-to-section"><a href="#frequently-question">Frequently Questions</a></li> | |
| <li class="scroll-to-section"><a href="#about2">Developers</a></li> | |
| <li class="scroll-to-section"><a href="#donate">Donate</a></li> | |
| <li class="scroll-to-section"><a href="#contact-us">Contact Us</a></li> | |
| </ul> | |
| <a class='menu-trigger'> | |
| <span>Menu</span> | |
| </a> | |
| <!-- ***** Menu End ***** --> | |
| </nav> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- ***** Header Area End ***** --> | |
| <!-- ***** Welcome Area Start ***** --> | |
| <div class="welcome-area" id="welcome"> | |
| <!-- ***** Header Text Start ***** --> | |
| <div class="header-text"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="left-text col-lg-6 col-md-6 col-sm-12 col-xs-12" data-scroll-reveal="enter left move 30px over 0.6s after 0.4s"> | |
| <h1><strong>ODONET</strong> - Know Your <strong>Odonates</strong></h1> | |
| <p><strong>Know your Odonates</strong> is the first of its kind Artificial Intelligence based Identification system from India to identify nearly 250 species of Indian Dragonflies and Damselflies with an accuracy of 90%.</p> | |
| <a href="#about" class="main-button-slider">Click here to identify</a> | |
| </div> | |
| <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12" data-scroll-reveal="enter right move 30px over 0.6s after 0.4s"> | |
| <img src="images/900px-Odonata_icon.svg - Copy.png" class="rounded img-fluid d-block mx-auto" alt="First Vector Graphic"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ***** Header Text End ***** --> | |
| </div> | |
| <!-- ***** Welcome Area End ***** --> | |
| <!-- ***** Features Big Item Start ***** --> | |
| <section class="section" id="about"> | |
| <div class="container"> | |
| <div class="row" style="margin: auto; text-align:center; width:100%; height:100%"> | |
| <div class="offset-lg-3 col-lg-6"> | |
| <div class="col-lg-12"> | |
| <div class="section-heading"> | |
| <h3 style="color:maroon;"><span>Upload your Odonate Image</span> </h3><br> | |
| </div> | |
| </div> | |
| <div class="section-heading"> | |
| <p>Please do crop the image such that entire odonate image is covered.</p> | |
| </div> | |
| <div> | |
| <label class="label" data-toggle="tooltip" title="" data-original-title=""> | |
| <img class="img-rees" id="avatar" | |
| style= "display: block; margin-left: auto; margin-right: auto;" | |
| src="images/odonata.png" alt="avatar"> | |
| <input type="file" class="sr-only" id="input" name="image" accept="image/*"> | |
| </div> | |
| <div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" style="display: none;" aria-hidden="true"> | |
| <div class="modal-dialog" role="document"> | |
| <div class="modal-content"> | |
| <div class="modal-header"> | |
| </div> | |
| <div class="modal-body"> | |
| <div class="container" style="width: 400px;height: 400px;"> | |
| <img id="image" style="width: 400px;height: 400px;"><br> | |
| </div> | |
| </div> | |
| <div class="modal-footer"> | |
| <br> | |
| <button type="button" class="btn btn-primary" id="close">Cancel</button> | |
| <button type="button" class="btn btn-primary" id="crop">Identify</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <br> | |
| <div class="column"> | |
| <div class="call-to-action"> | |
| <div class='img-rees'> | |
| <label style="text-align: center;" id='result-label'></label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ***** Features Big Item End ***** --> | |
| <!-- ***** Features Small Start ***** --> | |
| <section class="section" id="services"> | |
| <div class="section-heading"> | |
| <h2 style="color: aliceblue">Photo Gallery</h2> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="owl-carousel owl-theme"> | |
| <div class="item service-item"> | |
| <i><img src="images/Orthetrum glaucum.jpg" class="rounded img-fluid d-block mx-auto" alt="App"></i> | |
| <br> | |
| <h5 class="service-title"> <i>Orthetrum glaucum</i></h5> | |
| <p>Blue Marsh Hawk <i>Orthetrum glaucum</i>, (Skimmers - LIBELLULIDAE) is a medium sized dragonfly with bluish black thorax, blue tail, transparent wings with dark amber yellow tint at the extreme base. Commonly found in marshes associated | |
| with forest streams, plantations and canals.</p> | |
| <a href="https://indiabiodiversity.org/species/show/227925" target="_blank" class="main-button">Read More</a> | |
| </div> | |
| <div class="item service-item"> | |
| <i><img src="images/Brachythemis contaminata.jpg" class="rounded img-fluid d-block mx-auto" alt="App"></i> | |
| <br> | |
| <h5 class="service-title"><i>Brachythemis contaminata</i></h5> | |
| <p>Ditch Jewel <i>Brachythemis contaminata</i>, (Skimmers - LIBELLULIDAE) is a dragonfly of polluted waters. This species is widely distributed in India and commonly seen along sewage canals, tanks, ponds and ditches. They also flies | |
| very close to the ground and perches on aquatic weeds. </p> | |
| <a href="https://indiabiodiversity.org/species/show/234370" target="_blank" class="main-button">Read More</a> | |
| </div> | |
| <div class="item service-item"> | |
| <i><img src="images/Lestes elatus.jpg" class="rounded img-fluid d-block mx-auto" alt="App"></i> | |
| <br> | |
| <h5 class="service-title"><i>Lestes elatus</i></h5> | |
| <p>Emerald Spreadwing <i>Lestes elatus</i>, (Skimmers - LIBELLULIDAE) are widespread dragonfly and mostly seen near paddy fields, ponds, canals and lakes. Males readily seen perched among vegetation, occasionally ‘wagging’ their tail | |
| with weak flight. Females confined to shrubbery and rarely seen.</p> | |
| <a href="https://indiabiodiversity.org/species/show/227565" target="_blank" class="main-button">Read More</a> | |
| </div> | |
| <div class="item service-item"> | |
| <i><img src="images/Paracercion malayanum.jpg" class="rounded img-fluid d-block mx-auto" alt="App"></i> | |
| <br> | |
| <h5 class="service-title"><i>Paracercion malayanum</i></h5> | |
| <p>Malay lillysquatter <i>Paracercion malayanum</i>, (Narrow wings - COENAGRIONIDAE) is a small sized damselfly with deep blue eyes. It is known to occur in India, Sri Lanka, Nepal, Java, Philippines and Thailand. They breed in shallow | |
| lakes, ponds and paddy fields in the lowland, perches on the floating vegetation.</p> | |
| <a href="https://indiabiodiversity.org/species/show/275505" target="_blank" class="main-button">Read More</a> | |
| </div> | |
| <div class="item service-item"> | |
| <i><img src="images/Protosticta-gravelyi.jpg" class="rounded img-fluid d-block mx-auto" alt="App"></i> | |
| <br> | |
| <h5 class="service-title"><i>Protosticta gravelyi</i></h5> | |
| <p>Pied Reedtail <i>Protosticta gravelyi</i>, (Reedtail - PLATYSTICTIDAE) is a Western Ghats endemic damselfly widely distributed in hill streams of Western Ghats. It flies in short jerks holding the abdomen rigid and horizontal. | |
| In dark forest understorey, the species appears like a chain of darting white dots.</p> | |
| <a href="https://indiabiodiversity.org/species/show/228163" target="_blank" class="main-button">Read More</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ***** Features Small End ***** --> | |
| <!-- ***** Frequently Question Start ***** --> | |
| <section class="section" id="frequently-question"> | |
| <div class="container"> | |
| <!-- ***** Section Title Start ***** --> | |
| <div class="row"> | |
| <div class="col-lg-12"> | |
| <div class="section-heading"> | |
| <h2>Frequently Asked Questions</h2> | |
| </div> | |
| </div> | |
| <div class="offset-lg-3 col-lg-6"> | |
| <div class="section-heading"> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- ***** Section Title End ***** --> | |
| <div class="row"> | |
| <div class="left-text col-lg-6 col-md-6 col-sm-12"> | |
| <h5>ODONET - Know your Odonates</h5> | |
| <div class="accordion-text"> | |
| <p>ODONET - Know your Odonates is the first of its kind Artificial Intelligence based Identification system from India to identify nearly 250 species of Indian Dragonflies and Damselflies with an accuracy of 90%.</p> | |
| <p>We use cutting edge Neural Networks that was trained for several days on thousands of Dragonfly and Damselfly images collected from experts and also found over internet.</p> | |
| </div> | |
| </div> | |
| <div class="col-lg-6 col-md-6 col-sm-12"> | |
| <div class="accordions is-first-expanded"> | |
| <article class="accordion"> | |
| <div class="accordion-head"> | |
| <span>What's Odonata? </span> | |
| <span class="icon"> | |
| <i class="icon fa fa-chevron-right"></i> | |
| </span> | |
| </div> | |
| <div class="accordion-body"> | |
| <div class="content"> | |
| <p>Odonata is an order of flying insects that includes the <strong>dragonflies</strong> and <strong>damselflies</strong>. Like most other flying insects (flies, beetles, Lepidoptera and Hymenoptera), they evolved in the | |
| early Mesozoic era. Their prototypes, the giant dragonflies of the Carboniferous, 325 mya, are no longer placed in the Odonata but included in the Protodonata or Meganisoptera. | |
| <br> The two common groups are easily distinguished with Dragonflies, placed in the suborder Epiprocta, usually being larger, with eyes together & wings up or out at rest, while Damselflies, suborder Zygoptera, | |
| are usually smaller with eyes placed apart & wings along body at rest. | |
| <br> All Odonata have aquatic larvae called 'nymphs', and all of them, larvae and adults, are carnivorous. The adults can land, but rarely walk. Their legs are specialised for catching prey. They are almost entirely | |
| insectivorous. </p> | |
| </div> | |
| </div> | |
| </article> | |
| <article class="accordion"> | |
| <div class="accordion-head"> | |
| <span>How do we differentiate Dragonfiles and Damselflies?</span> | |
| <span class="icon"> | |
| <i class="icon fa fa-chevron-right"></i> | |
| </span> | |
| </div> | |
| <div class="accordion-body"> | |
| <div class="content"> | |
| <p> Dragonflies are predatory insects with long bodies and they have wings at the side of their bodies when they rest. Damselflies are smaller, slender, and delicate insects and they have wings at the rear of their body | |
| when they rest. | |
| <br> Dragonflies have a broader front set of wings and not an equal shape and size of fore and hind wings. Damselflies have a narrower and equal shape and size of both fore and hind wings. | |
| <br> The eyes of the dragonfly are broadly rounded eyes and their eyes touch the top of their head. The eyes of a damselfly are spherical and their eyes lie flat on their head. | |
| <br> The young dragonfly also known as larvae respire from the rectal tracheal gills because the bodies of the dragonfly are larger and thick. The immature damselfly known as larvae respire from the caudal gills | |
| because the bodies are slender and lean. | |
| <br> The dragonfly travels significant distances and can fly at a speed of 60 miles per hour and hence they are called fliers. The damselfly can travel only short distances and can fly at a speed of 10 miles per | |
| hour and hence they are called perchers. | |
| <br> The dragonfly has a broader thorax when contrasted to the abdomen. The damselfly has a slim or narrower thorax when contrasted to the abdomen.</p> | |
| <img src="images/DRAGONFLY-vs-DAMSELFLY-1.jpg" class="rounded img-fluid d-block mx-auto" alt="App"></div> | |
| </div> | |
| </article> | |
| <article class="accordion"> | |
| <div class="accordion-head"> | |
| <span>Ecological & human significance</span> | |
| <span class="icon"> | |
| <i class="icon fa fa-chevron-right"></i> | |
| </span> | |
| </div> | |
| <div class="accordion-body"> | |
| <div class="content"> | |
| <p>From a human point of view, odonates are harmless insects; that is, they do not have any direct or indirect detrimental effect whatsoever on human beings. However, from an ecological point of view, they are a highly | |
| significant group of organisms. Since odonates have well-known habitat requirements (fresh water ecosystems that vary from coastlines to tropical rain forests) and are easily identifiable, they are one of the best | |
| indicators of ecosystem quality and biodiversity. Scientists have even developed The Dragonfly Biotic Index – comprising data on geographical distribution, conservation status and ecological sensitivity – to monitor | |
| biological water quality of an ecosystem, which makes this task far more effective and simple. Population studies on odonates are widely used to monitor landscape changes also. | |
| <br> The capacity of odonates in controlling harmful insects such as mosquitoes, blackflies and other blood-sucking insects (both adults and their larvae) make them important bio-control agents. Many countries have | |
| successfully employed odonates to control mosquito population especially in urban areas. Needless to say, they are best friends of farmers, as they play a crucial role in controlling insect pests. | |
| <br> Studies have shown that globally about one in every ten species of odonates are threatened by extinction. The single most reason for this decline is the destruction of aquatic habitats. Other factors such as | |
| wetland reclamation, land filling, canalization of streams and rivers, deforestation, introduction of invasive species etc, are also posing major threat to the very existence of these magnificent insects.</p> | |
| </div> | |
| </div> | |
| </article> | |
| <article class="accordion"> | |
| <div class="accordion-head"> | |
| <span>Odonates Statistics</span> | |
| <span class="icon"> | |
| <i class="icon fa fa-chevron-right"></i> | |
| </span> | |
| </div> | |
| <div class="accordion-body"> | |
| <div class="content"> | |
| <p>* World - 6300+ species (World Odonata List 2020) <br> * India - 493 species (Subramanian & Babu 2020) <br> * Western Ghats - 196 species (Subramanian & Babu 2020) <br></p> | |
| </div> | |
| </div> | |
| </article> | |
| <article class="accordion"> | |
| <div class="accordion-head"> | |
| <span>Checklist of Indian Odonates</span> | |
| <span class="icon"> | |
| <i class="icon fa fa-chevron-right"></i> | |
| </span> | |
| </div> | |
| <div class="accordion-body"> | |
| <div class="content"> | |
| <p> 1. <a href="https://www.zsi.gov.in/WriteReadData/userfiles/file/Checklist/Odonata%20V3.pdf">A Checklist of Odonata (Insecta) of India Subramanian, K.A. & Babu, R.</a> </p> | |
| </div> | |
| </div> | |
| </article> | |
| <article class="accordion"> | |
| <div class="accordion-head"> | |
| <span>More information</span> | |
| <span class="icon"> | |
| <i class="icon fa fa-chevron-right"></i> | |
| </span> | |
| </div> | |
| <div class="accordion-body"> | |
| <div class="content"> | |
| <p> | |
| 1. <a href="https://archive.org/details/introduction-to-odonata-2">Introduction to Odonata</a><br> 2. <a href="https://www.indianodonata.org/">Indian Odonates - Biodiveristy Atlas India</a><br> 3. <a href="https://indiabiodiversity.org/species/show/276041">Odonates - India Biodiversity Portal</a> | |
| </p> | |
| </div> | |
| </div> | |
| </article> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- ***** Frequently Question End ***** --> | |
| <!-- ***** Features Big Item Start ***** --> | |
| <section class="section" id="about2"> | |
| <div class="section-heading"> | |
| <h2>Development Team</h2> | |
| </div> | |
| <div class="section-heading" style="text-align: center;"> | |
| <h6>Centre for Computational Engineering and Networking (CEN), Amrita Vishwa Vidyapeetham, Coimbatore, India.</h6><br> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="left-heading"> | |
| <br> | |
| <h5>Related Publication</h5> | |
| </div> | |
| 1) Theivaprakasham, H., Darshana, S., Ravi, V., Sowmya, V., Gopalakrishnan, E. A., & Soman, K. (2022). Odonata identification using Customized Convolutional Neural Networks. Expert Systems with Applications, 206, 117688. <a href="https://doi.org/10.1016/j.eswa.2022.117688">https://doi.org/10.1016/j.eswa.2022.117688</i></a> | |
| </div> | |
| </div> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="left-text col-lg-5 col-md-12 col-sm-12 mobile-bottom-fix"> | |
| <div class="left-heading"> | |
| <br> | |
| <h5>AI System Team</h5> | |
| </div> | |
| <ul> | |
| <li> | |
| <img src="images/user-1_thumb.png" alt=""> | |
| <div class="text"> | |
| <h6>Mr. Theivaprakasham H</h6> | |
| <p></p> | |
| </div> | |
| </li> | |
| <li> | |
| <img src="images/user-2_thumb.png" alt=""> | |
| <div class="text"> | |
| <h6>Ms. Darshana S</h6> | |
| <p></p> | |
| </div> | |
| </li> | |
| </ul> | |
| <br> | |
| <div class="left-heading"> | |
| <h5>Technical advisors</h5> | |
| </div> | |
| <ul> | |
| <li> | |
| <img src="images/vinay-1_thumb.png" alt=""> | |
| <div class="text"> | |
| <h6>Dr. Vinayakumar Ravi</h6> | |
| <p></p> | |
| </div> | |
| </li> | |
| <li> | |
| <img src="images/sowmya-1_thumb.png" alt=""> | |
| <div class="text"> | |
| <h6>Dr. Sowmya V</h6> | |
| <p></p> | |
| </div> | |
| </li> | |
| <li> | |
| <img src="images/gopalakrishnan_thumbs.png" alt=""> | |
| <div class="text"> | |
| <h6>Dr. Gopalakrishnan EA</h6> | |
| <p></p> | |
| </div> | |
| </li> | |
| <li> | |
| <img src="images/soman-1_thumb.png" alt=""> | |
| <div class="text"> | |
| <h6>Dr. Soman KP</h6> | |
| <p></p> | |
| </div> | |
| </li> | |
| </ul> | |
| <br> | |
| <div class="left-heading"> | |
| <h5>Supporting Organisation</h5> | |
| </div> | |
| <ul> | |
| <li> | |
| <img src="images/logo.png" alt=""> | |
| <div class="text"> | |
| <h6>The Nature and Butterfly Society (TNBS)</h6><br> | |
| <p></p> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <div class="right-image col-lg-7 col-md-12 col-sm-12 mobile-bottom-fix-big" data-scroll-reveal="enter right move 30px over 0.6s after 0.4s"> | |
| <img src="images/odonate template.png" class="rounded img-fluid d-block mx-auto" alt="App"> | |
| </div> | |
| <div class="left-heading"> | |
| <h5>Technical Support</h5> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="text"> | |
| <h6> | |
| Mr. Gopalakrishnan S (The Nature and Butterfly Society)<br> Dr. Kalesh Sadasivan (Travancore Nature History Society)<br> Dr. K.A. Subramanian (Zoological Survey of India)<br> Mr. Bala Chandran (Society for Odonate Studies | |
| of Kottayam)<br> Mr. David Raju (Society for Odonate Studies of Kottayam)<br> | |
| </h6> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section class="section" id="donate"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12 section-heading text-center"> | |
| <h2 class="animate-box fadeInUp animated-fast"><span>Donate</span></h2> | |
| </div> | |
| </div> | |
| <p class="block"></p> | |
| <p> You are welcome to support me with a small donation via PayPal or UPI that goes directly to the maintenance costs of the website. Even a small contribution can help me keep this service going and motivate me to develop more accurate predictive | |
| applications in the future. | |
| <br>Donation link: <a href="https://www.paypal.me/theivaprakasham">https://www.paypal.me/theivaprakasham</a><br> UPI donation link: theivaprakasham@okaxis<br><br></p> | |
| <p> | |
| <b>Bank Transfer Details</b><br> Name: Theivaprakasham Hari | |
| <br> Account No: 919489143632 <br> IFSC Code: PYTM0123456 </p><br><br> | |
| </div> | |
| </section> | |
| <section class="section" id="contact-us"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-12 section-heading text-center"> | |
| <h2 class="animate-box fadeInUp animated-fast"><span>Contact us</span></h2> | |
| </div> | |
| </div> | |
| <p class="block"> Odonet also provides business assistance in supporting individuals, companies and wildlife organizations with smart solutions not only to odonet but also other flora and faunal diversities. Odonet can provide our identification engine via | |
| API and also build custom species identification modules for your needs.<br></p> | |
| <br> </p> | |
| <ul class="contact-info"> | |
| <li><strong>For more information</strong>, please feel free to contact me at +91 9994679306</li> | |
| <li><strong>or mail me at </strong><a href="mailto:[email protected]">[email protected]</a></li> | |
| </ul> | |
| </div> | |
| </section> | |
| <!-- ***** Contact Us End ***** --> | |
| <!-- ***** Footer Start ***** --> | |
| <footer> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-lg-7 col-md-12 col-sm-12"> | |
| <p class="copy-right ">Designed by © Theivaprakasham Hari. All Rights Reserved 2022. | |
| </p> | |
| <p class="copy-right "><a href='../privacy'>Privacy Policy</a> <a href='../terms'> Terms of Use</a> </p> | |
| </div> | |
| <div class="col-lg-5 col-md-12 col-sm-12"> | |
| <ul class="social"> | |
| <li><a href="https://www.facebook.com/theivaprakasham"><i class="fa fa-facebook"></i></a></li> | |
| <li><a href="https://twitter.com/theivaprakasham"><i class="fa fa-twitter"></i></a></li> | |
| <li><a href="https://www.linkedin.com/in/theivaprakasham"><i class="fa fa-linkedin"></i></a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- jQuery --> | |
| <script src="js/jquery-2.1.0.min.js"></script> | |
| <!-- Bootstrap --> | |
| <script src="js/popper.js"></script> | |
| <script src="js/bootstrap.min.js"></script> | |
| <!-- Plugins --> | |
| <script src="js/owl-carousel.js"></script> | |
| <script src="js/scrollreveal.min.js"></script> | |
| <script src="js/waypoints.min.js"></script> | |
| <script src="js/jquery.counterup.min.js"></script> | |
| <script src="js/imgfix.min.js"></script> | |
| <!-- Global Init --> | |
| <script src="js/custom.js"></script> | |
| <!-- Scripts --> | |
| <script src="js/cropper.js "></script> | |
| <noscript><link rel="stylesheet" href="css/noscript.css" /></noscript> | |
| <script> | |
| window.addEventListener('DOMContentLoaded', function() { | |
| var avatar = document.getElementById('avatar'); | |
| var image = document.getElementById('image'); | |
| var input = document.getElementById('input'); | |
| var $progress = $('.progress'); | |
| var $progressBar = $('.progress-bar'); | |
| var $alert = $('.alert'); | |
| var $modal = $('#modal'); | |
| var cropper; | |
| var counter; | |
| $('[data-toggle="tooltip "]').tooltip(); | |
| input.addEventListener('change', function(e) { | |
| $("#avatar ").hide(); | |
| var files = e.target.files; | |
| var done = function(url) { | |
| input.value = ''; | |
| image.src = url; | |
| $alert.hide(); | |
| $modal.modal('show'); | |
| }; | |
| var reader; | |
| var file; | |
| var url; | |
| if (files && files.length > 0) { | |
| file = files[0]; | |
| if (URL) { | |
| done(URL.createObjectURL(file)); | |
| } else if (FileReader) { | |
| reader = new FileReader(); | |
| reader.onload = function(e) { | |
| done(reader.result); | |
| }; | |
| reader.readAsDataURL(file); | |
| } | |
| } | |
| }); | |
| $modal.on('shown.bs.modal', function() { | |
| cropper = new Cropper(image, { | |
| aspectRatio: 1, | |
| viewMode: NaN, | |
| }); | |
| }).on('hidden.bs.modal', function() { | |
| cropper.destroy(); | |
| cropper = null; | |
| }); | |
| document.getElementById('close').addEventListener('click', function() { | |
| $modal.modal('hide'); | |
| $("#avatar ").show(); | |
| }); | |
| document.getElementById('crop').addEventListener('click', function() { | |
| var initialAvatarURL; | |
| var canvas; | |
| $modal.modal('hide'); | |
| $("#avatar ").show(); | |
| if (cropper) { | |
| canvas = cropper.getCroppedCanvas({ | |
| width: 600, | |
| height: 600, | |
| }); | |
| initialAvatarURL = avatar.src; | |
| avatar.src = canvas.toDataURL(); | |
| $progress.show(); | |
| $alert.removeClass('alert-success alert-warning'); | |
| canvas.toBlob(function(blob) { | |
| var xhr = new XMLHttpRequest(); | |
| var loc = window.location | |
| xhr.open('POST', `${loc.protocol}//${loc.hostname}:${loc.port}/analyze`, true); | |
| document.getElementById('result-label').innerHTML = `Analyzing...`; | |
| xhr.onerror = function() { | |
| alert(xhr.responseText); | |
| } | |
| xhr.onload = function(e) { | |
| if (this.readyState === 4) { | |
| var response = JSON.parse(e.target.responseText); | |
| var con = response.predictions[0].prob; | |
| if (con < 20) { | |
| document.getElementById('result-label').innerHTML = `Sorry... Your image is quite challenging to identify and we weren't able to recognize your odonate.`; | |
| } else { | |
| document.getElementById('result-label').innerHTML = `Your Odonata can be <br><strong><i> ${response.predictions[0].class} </i> - ${response.predictions[0].prob}% confident</strong> <br><br> | |
| Few other visually similar odonates are <br> | |
| <i>${response.predictions[1].class} </i> - ${response.predictions[1].prob}% confident <br> | |
| <i> ${response.predictions[2].class} </i> - ${response.predictions[2].prob}% confident <br> | |
| <i>${response.predictions[3].class} </i> - ${response.predictions[3].prob}% confident <br> | |
| <i> ${response.predictions[4].class} </i> - ${response.predictions[4].prob}% confident <br>`; | |
| } | |
| } | |
| el('analyze-button').innerHTML = 'Analyze'; | |
| } | |
| var fileData = new FormData(); | |
| fileData.append('avatar', blob); | |
| xhr.send(fileData); | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |