MonumentDetection/ContinualLearningFastAPI
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Welcome to Monuments Prediction</title>7 <!-- Bootstrap CSS -->8 <link rel="stylesheet" type="text/css" href="/static/assets/plugins/bootstrap/css/bootstrap.min.css">9 <link rel="stylesheet" type="text/css" href="/static/assets/font-awesome/css/font-awesome.min.css">10 <link rel="stylesheet" type="text/css" href="/static/assets/plugins/animatecss/css/animate.min.css">11 <link rel="stylesheet" type="text/css" href="/static/assets/css/styles.css">12 <style>13 #hoverList {14 display: none;15 position: absolute;16 background-color: white;17 border: 1px solid #ccc;18 padding: 5px;19 margin: 0;20 }21 22 #hoverList li {23 list-style-type: none;24 padding: 5px;25 cursor: pointer;26 }27 28 .hidden {29 display: none;30 }31 </style>32</head>33<body>34 <nav class="navbar navbar-expand-md navbar-dark bg-dark navbar-style-6 font-title py-3" style="background-image: url('{{ url_for("static", path="assets/img/backgrounds/monuments2.jpg") }}');">35 <div class="container">36 <a class="navbar-brand" href="{{ url_for('monuments') }}"><b>Monument Detection</b></a>37 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent6" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">38 <span class="navbar-toggler-icon"></span>39 </button>40 41 <div class="collapse navbar-collapse" id="navbarSupportedContent6">42 <ul class="navbar-nav ml-auto">43 <li class="nav-item active mx-2">44 <a class="nav-link" href="{{ url_for('monuments') }}">Home <span class="sr-only">(current)</span></a>45 </li>46 <li class="nav-item mx-2">47 <a class="nav-link" href="#">Contact</a>48 </li>49 </ul>50 </div>51 </div>52 </nav>53 <br><br>54 <section class="bg-light">55 <div class="container">56 57 <div class="row">58 59 {% if image_content %}60 <div class="row justify-content-center mt-4">61 <div class="col-md-8">62 <img src="data:image/png;base64,{{ image_content }}" class="img-fluid rounded" alt="Uploaded Image">63 </div>64 <div class="">65 </div>66 </div>67 {% endif %}68 69 <div class="col-12 col-lg-6 p-5">70 71 <div class="row mt-3">72 <div class="col-md-12 text-center">73 <form action="/predict/" method="POST" enctype="multipart/form-data">74 <h5>Choose the Monument-sub-Set</h5>75 <input type="radio" id="subset1" name="subset" value="subset1" checked><label for="subset1">Subset1</label>76 <input type="radio" id="subset2" name="subset" value="subset2"><label for="subset2">Subset2</label>77 <input type="radio" id="subset3" name="subset" value="subset3"><label for="subset3">Subset3</label>78 <input type="radio" id="subset4" name="subset" value="subset4"><label for="subset3">Subset4</label>79 <ul id="hoverList" class="hidden">80 <li>Item 1</li>81 <li>Item 2</li>82 <li>Item 3</li>83 </ul>84 85 <br>86 <input type="hidden" name="image_path" value="{{ img_name }}">87 <h5>Choose the Model</h5>88 <input type="radio" name="model" value="joint_model" checked> Base Model89 <input type="radio" name="model" value="meta_model"> Meta learning90 <input type="radio" name="model" value="MNAD_model"> MNAD91 <br><br>92 <div> 93 <button type="submit" class="btn btn-primary">Predict Monument</button>94 </div>95 </form>96 </div>97 </div>98 99 <div class="row mt-3">100 <div class="col-md-12 text-center">101 <a href="{{url_for('index')}}" class="btn btn-primary">Upload Another Image</a>102 </div>103 </div>104 </div>105 </div>106 </div>107 </div>108 </section>109<br><br>110 <!-- Component Footer 10 start -->111 <footer class="footer-style-6 p-3 bg-hue-dark cwhite background-cover" style="background-image: url('{{ url_for("static", path="assets/img/backgrounds/monuments2.jpg") }}');">112 <div class="row">113 <div class="col-12 col-lg-3 my-1 text-center py-2">114 <span class="font-title h5"><b>Monument </b>Detection</span><br>115 <small class="lighter my-3 op-7 inline">Major Project</small>116 <ul class="py-2 px-0">117 <li class="inline"><a href="#" class=" circle btn-outline-primary btn m-1 inline"><i class="fa fa-google"></i></a></li>118 <li class="inline"><a href="#" class=" circle btn-outline-primary btn m-1 inline"><i class="fa fa-twitter"></i></a></li>119 <li class="inline"><a href="#" class=" circle btn-outline-primary btn m-1 inline"><i class="fa fa-instagram"></i></a></li>120 </ul>121 </div>122 <div class="col-12 col-lg-6 my-1 text-left py-2 font-title">123 <div class="row">124 <div class="col-4">125 <h6 class="uppercase py-1">Categories</h6>126 <ul class="py-1 px-0">127 <li><a href="#">Stupas</a></li>128 <li><a href="#">shikhar</a></li>129 <li><a href="#">mosque</a></li>130 <li><a href="#">Monastery</a></li>131 </ul>132 </div>133 <div class="col-4">134 <h6 class="uppercase py-1">Features</h6>135 <ul class="py-1 px-0">136 <li><a href="#">Monument Detection</a></li>137 <li><a href="#">ML</a></li>138 </ul>139 </div>140 <div class="col-4">141 <h6 class="uppercase py-1">Technologies</h6>142 <ul class="py-1 px-0">143 <li><a href="#">Django</a></li>144 <li><a href="#">pytorch</a></li>145 <li><a href="#">Machine Learning</a></li>146 </ul>147 </div>148 </div>149 </div>150 <div class="col-12 col-lg-3 my-1 text-left py-2">151 <h6 class="uppercase py-1">About</h6>152 <small class="lighter my-3 op-7 inline font-body">This is a responsive website that detects monuments from the given image provided by the user.</small>153 </div>154 <div class="col-12 ">155 <div class="mline bg-light"></div>156 </div>157 <div class="col-6 py-2">158 <small class="lighter op-7"></small>159 </div>160 </div>161 </footer>162 163 <!-- Bootstrap JS and Popper.js -->164 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>165 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>166 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>167 <script>168 document.addEventListener('DOMContentLoaded', function () {169 const subsets = document.querySelectorAll('input[name="subset"]');170 const hoverList = document.getElementById('hoverList');171 172 subsets.forEach(subset => {173 subset.addEventListener('mouseenter', function () {174 hoverList.classList.remove('hidden');175 });176 subset.addEventListener('mouseleave', function () {177 hoverList.classList.add('hidden');178 });179 });180 181 hoverList.addEventListener('mouseleave', function () {182 hoverList.classList.add('hidden');183 });184 });185 </script>186</body>187</html>188