<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>cv_image_suit</title>
	<!-- Mobile Specific Metas -->
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- Font-->
	<link rel="stylesheet" type="text/css" href="static/css2/nunito-font.css">
	<!-- Main Style Css -->
    <link rel="stylesheet" href="static/css2/style.css"/>
    <style>

 #loading {
			position: fixed;
			left: 0px;
			top: 0px;
			width: 100%;
			height: 100%;
			z-index: 9999999999;
			overflow: hidden;
			background: rgba(255, 255, 255, 0.7);
		}
		.loader {
			border: 8px solid #f3f3f3;
			border-top: 8px solid #363e75;
			border-radius: 50%;
			width: 60px;
			height: 60px;
			left: 50%;
			margin-left: -4em;
			display: block;
			animation: spin 2s linear infinite;
		}
		.loader,
		.loader:after {display: block;position: absolute;top: 50%;margin-top: -4.05em;}
		@keyframes spin {
			0% {
				transform: rotate(0deg);
			}
			100% {
				transform: rotate(360deg);
			}
		}
    </style>
</head>
<body class="form-v9">
	<div class="page-content">
		<div class="form-v9-content" style="background-image: url('static/assets/img/form-v9.jpg')">

			<form class="form-detail" action="/experiment" method="post" onsubmit="loading();">
                <!--<h2>Already Available Model</h2>
                <center>
                    {% for e in model_list %}
                        {{e}}
                    {% endfor %}
                </center>-->
                <center>
                    <h3 style="color:red;">
                        {% for e in error %}
                            {{e}}
                        {% endfor %}
                    </h3>
                </center>

				<h2>Configure Below Parameters</h2>
				<div class="form-row-total">
					<div class="form-row">
						<h2>Configure Your Data</h2>
                        <label for="TRAIN_DATA_DIR"> Your training data directory:</label>
						<input type="text" name="TRAIN_DATA_DIR" id="TRAIN_DATA_DIR" class="input-text" placeholder="TRAIN_DATA_DIR" required>
					</div>


                     <div class="form-row">
						 <h2>Configure Your Model</h2>
                        <label for="MODEL_OBJ"> Choose multiple Models:</label>
                         <select class="form-control custom_select input-text" name="MODEL_OBJ" id="MODEL_OBJ" multiple>
                          <option value="Xception">Xception</option>
                          <option value="VGG16">VGG16</option>
                          <option value="VGG19">VGG19</option>
                          <option value="ResNet50">ResNet50</option>
                          <option value="ResNet101">ResNet101</option>
                          <option value="ResNet152">ResNet152</option>
                          <option value="ResNet50V2">ResNet50V2</option>
                          <option value="ResNet101V2">ResNet101V2</option>
                          <option value="ResNet152V2">ResNet152V2</option>
                          <option value="InceptionV3">InceptionV3</option>
                          <option value="InceptionResnetV2">InceptionResNetV2</option>
                          <option value="MobileNet">MobileNet</option>
                          <option value="MobileNetV2">MobileNetV2</option>
                          <option value="DenseNet121">DenseNet121</option>
                          <option value="DenseNet169">DenseNet169</option>
                          <option value="DenseNet201">DenseNet201</option>
                          <option value="NASNetMobile">NASNetMobile</option>
                          <option value="NASNetLarge">NASNetLarge</option>
                          <option value="EfficientNetB0">EfficientNetB0</option>
                          <option value="EfficientNetB1">EfficientNetB1</option>
                          <option value="EfficientNetB2">EfficientNetB2</option>
                          <option value="EfficientNetB3">EfficientNetB3</option>
                          <option value="EfficientNetB4">EfficientNetB4</option>
                          <option value="EfficientNetB5">EfficientNetB5</option>
                          <option value="EfficientNetB6">EfficientNetB6</option>
                          <option value="EfficientNetB7">EfficientNetB7</option>
                        </select>
					</div>

				</div>


				<div class="form-row-total">

                    <div class="form-row">
                        <label for="VALID_DATA_DIR"> Your validation data directory:</label>
						<input type="text" name="VALID_DATA_DIR" id="VALID_DATA_DIR" class="input-text" placeholder="VALID_DATA_DIR" required>
					</div>


                   <div class="form-row">
                        <label for="EXP_NAME"> Write experiment name:</label>
						<input type="text" name="EXP_NAME" id="EXP_NAME" class="input-text" placeholder="EXPERIMENT_NAME" required pattern="[A-Za-z0-9]+">
					</div>


				</div>


                <div class="form-row-total">

                    <div class="form-row">
                        <label for="FREEZE_ALL"> Freezing layers:</label>
                         <select class="form-control custom_select" name="FREEZE_ALL" id="FREEZE_ALL">
                          <option value="True">True</option>
                          <option value="None">None</option>
                        </select>
					</div>

                    <div class="form-row">
                        <label for="FREEZE_TILL"> Freezing layers:</label>
                        <label for="FREEZE_TILL"> Number of layer till which to freeze:</label>
						<input type="text" name="FREEZE_TILL" id="FREEZE_TILL" class="input-text" placeholder="FREEZE_TILL" required pattern="[0-9]{1,3}">
					</div>

				</div>


                <div class="form-row-total">

                    <div class="form-row">
                        <label for="IMAGE_SIZE"> Put image size with respect to your model:</label>
						<input type="text" name="IMAGE_SIZE" id="IMAGE_SIZE" class="input-text" placeholder="IMAGE_SIZE = h,w,ch" required pattern="[0-9 _,]*">
					</div>


                    <div class="form-row">
                        <label for="OPTIMIZER"> Select Optimizer:</label>
                         <select class="form-control custom_select" name="OPTIMIZER" id="OPTIMIZER" multiple size="1" style="color:white;overflow-y:hidden;">
                          <option value="Adam">Adam</option>
                          <option value="SGD">SGD</option>
                        </select>
					</div>

				</div>


                <div class="form-row-total">

                      <div class="form-row">
                        <label for="AUGMENTATION"> Do you want to apply data Augmentation:</label>
                         <select class="form-control custom_select" name="AUGMENTATION" id="AUGMENTATION">
                          <option value="True">True</option>
                          <option value="None">None</option>
                        </select>
					</div>


                    <div class="form-row">
                        <label for="EPOCHS"> Number of Epochs you want to train:</label>
						<input type="text" name="EPOCHS" id="EPOCHS" class="input-text" placeholder="EPOCHS" required pattern="[0-9 _,]*">
					</div>

				</div>


                <div class="form-row-total">

                    <div class="form-row">
                        <label for="BATCH_SIZE"> Define the batch sizes:</label>
						<input type="text" name="BATCH_SIZE" id="BATCH_SIZE" class="input-text" placeholder="BATCH_SIZES" required pattern="[0-9 _,]*">
					</div>
                    <div class="form-row">
                        <label for="CLASSES"> Number of classes of your data:</label>
						<input type="text" name="CLASSES" id="CLASSES" class="input-text" placeholder="CLASSES" required pattern="[0-9]{1,4}*">
					</div>

				</div>

                <div class="form-row-total">
                    <div class="form-row">
                        <label for="PERCENTAGE_DATA"> Define the percentage of data to be used for experimenting:</label>
						<input type="text" name="PERCENTAGE_DATA" id="PERCENTAGE_DATA" class="input-text" placeholder="PERCENTAGE_DATA" required pattern="[0-9]{1,3}">
					</div>
				</div>
                <br>

				<div class="form-row-last">
					<input type="submit" name="register" class="register" value="Start Experiment">
				</div>
			</form>
            <center>
                <div id="loading"><div class="loader"></div>
                </div>
            </center>

        <!--    <form class="form-detail" action="/logs" method="get">
			<div class="form-row-last">
					<h1>See Training Logs Here!</h1>
                <h4> <a style="color:white;" href="{{url}}">Click Here</a> </h4>
					<input type="submit" name="log" class="register" value="Logs">
				</div>
			</form>

            <form class="form-detail" action="/mid" method="get">
			<div class="form-row-last">
					<h1>Click Here To Predict !</h1>
					<input type="submit" name="register" class="register" value="Predict">

				</div>


			</form>
			-->

		</div>


	</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
	$("#loading").hide();
	});
function loading(){
    $("#loading").show();
}

</script>

</body><!-- This templates was made by Colorlib (https://colorlib.com) -->
</html>


