MonumentDetection/ContinualLearningFastAPI
0
1<!-- templates/upload_template.jinja2 -->2<!DOCTYPE html>3<html lang="en">4 5<head>6 <meta charset="UTF-8">7 <meta name="viewport" content="width=device-width, initial-scale=1.0">8 <title>Image Upload</title>9 <script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>10 <link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />11 12 <!-- Bootstrap CSS from CDN -->13 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">14 15 <link rel="stylesheet" type="text/css" href="/static/assets/plugins/bootstrap/css/bootstrap.min.css">16 <link rel="stylesheet" type="text/css" href="/static/assets/font-awesome/css/font-awesome.min.css">17 <link rel="stylesheet" type="text/css" href="/static/assets/plugins/animatecss/css/animate.min.css">18 <link rel="stylesheet" type="text/css" href="/static/assets/css/styles.css">19 <style>20 /* Your existing styles */21 .dropzone {22 border: 2px dashed #0087F7;23 border-radius: 8px;24 background: #f0f0f0;25 padding: 20px;26 margin: 20px 0;27 }28 29 /* Style for the "Select Image" label */30 .form-group label {31 font-weight: bold;32 }33 34 /* Style for the upload button */35 .form-group.text-center {36 margin-top: 20px;37 }38 39 .btn-primary {40 background-color: #0087F7;41 border-color: #0087F7;42 }43 44 .btn-primary:hover {45 background-color: #0066CC;46 border-color: #0066CC;47 }48 .form-control-file {49 display: block;50 margin: 0 auto; /* This centers the input field horizontally */51 }52 </style>53</head>54 55<body>56 <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") }}');">57 <div class="container">58 <a class="navbar-brand" href="{{ url_for('monuments') }}"><b>Monument Detection</b></a>59 <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent6" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">60 <span class="navbar-toggler-icon"></span>61 </button>62 63 <div class="collapse navbar-collapse" id="navbarSupportedContent6">64 <ul class="navbar-nav ml-auto">65 <li class="nav-item active mx-2">66 <a class="nav-link" href="{{ url_for('monuments') }}">Home <span class="sr-only">(current)</span></a>67 </li>68 <li class="nav-item mx-2">69 <a class="nav-link" href="#">Contact</a>70 </li>71 </ul>72 </div>73 </div>74 </nav>75 <!-- Your existing navigation code -->76 77 <br><br>78 79 <div class="container mt-5">80 <div class="row">81 <div class="col-md-12 text-center">82 <h1>Monument Detection</h1>83 <h2>Upload Image</h2>84 </div>85 </div>86 87 <div class="row justify-content-center">88 <div class="col-md-6">89 <form action="/upload/" method="POST" enctype="multipart/form-data" class="dropzone"90 id="my-awesome-dropzone">91 92 <div class="form-group text-center">93 <label for="image" class="font-weight-bold d-block">Select Image:</label>94 <div class="mx-auto" style="width: fit-content;">95 <input type="file" class="form-control-file" id="image" name="file" required style="width:70%;">96 97 </div>98 </div>99 100 <div class="form-group text-center">101 <button type="submit" class="btn btn-primary">Upload</button>102 </div>103 </form>104 </div>105 </div>106 </div>107 108 <br><br>109 <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") }}');">110 111 <div class="row">112 <div class="col-12 col-lg-3 my-1 text-center py-2">113 <span class="font-title h5"><b>Monument </b>Detection</span><br>114 <small class="lighter my-3 op-7 inline">Major Project</small>115 <ul class="py-2 px-0">116 <li class="inline"><a href="#" class=" circle btn-outline-primary btn m-1 inline"><i class="fa fa-google"></i></a></li>117 <li class="inline"><a href="#" class=" circle btn-outline-primary btn m-1 inline"><i class="fa fa-twitter"></i></a></li>118 <li class="inline"><a href="#" class=" circle btn-outline-primary btn m-1 inline"><i class="fa fa-instagram"></i></a></li>119 </ul>120 </div>121 <div class="col-12 col-lg-6 my-1 text-left py-2 font-title">122 <div class="row">123 <div class="col-4">124 <h6 class="uppercase py-1">Categories</h6>125 <ul class="py-1 px-0">126 <li><a href="#">Stupas</a></li>127 <li><a href="#">shikhar</a></li>128 <li><a href="#">mosque</a></li>129 <li><a href="#">Monastery</a></li>130 </ul>131 </div>132 <div class="col-4">133 <h6 class="uppercase py-1">Features</h6>134 <ul class="py-1 px-0">135 <li><a href="#">Monument Detection</a></li>136 <li><a href="#">ML</a></li>137 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 which aims to deliver Monement Detection of the given app</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 <!-- Your existing footer code -->163 164 <!-- Bootstrap JS and Popper.js from CDN -->165 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>166 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>167 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>168 169 <script src="/static/assets/plugins/jquery/jquery-3.2.0.min.js"></script>170 <script src="/static/assets/plugins/popper/popper.js"></script>171 <script src="/static/assets/plugins/bootstrap/js/bootstrap.min.js"></script>172 <script src="/static/assets/js/script.js"></script>173</body>174 175</html>176