Update templates/index.html

templates/index.html

@@ -4,286 +4,81 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Fibrosis</title>
-	<link rel="shortcut icon"
-        href="" />
-	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
-	<style>
-		body{background-color: #eff2f9;}
-		.iupload h3{color: #1b2d6b;font-size: 30px;font-weight: 700;}
-		.img-part{height:300px;width:300px;margin:0px auto;}
-		.image-part{height:300px;width:300px;border:1px solid #1b2d6b;}
-		.image-part img{position:absolute;height: 300px;width:300px;display:none;padding:5px;}
-		.image-part #video{display:block;height: 300px;width:300px;padding:5px;}
-		.res-part{border:1px solid #dedede;margin-left:20px;height: 310px;width:100%;padding:5px;margin:0px auto;overflow:auto;}
-		.res-part2{border:1px solid #dedede;height: 310px;width:100%;padding:5px;margin:0px auto;}
-		.resp-img{height: 298px;width: 233px;margin:0px auto;}
-		.jsonRes{margin-left:30px;}
-		#send{cursor:pointer;}
-		.btn-part{width:325px;}
-		textarea,
-		select,
-		.form-control,
-		.custom-select,
-		button.btn,
-		.btn-primary,
-		input[type="text"],
-		input[type="url"],
-		.uneditable-input{
-			border: 1px solid #363e75;
-			outline: 0 !important;
-			border-radius:0px;
-			box-shadow: none;
-		   -webkit-box-shadow: none;
-		   -moz-box-shadow: none;
-		   -moz-transition: none;
-		   -webkit-transition: none;
-		}
-		textarea:focus,
-		select:focus,
-		.form-control:focus,
-		.btn:focus,
-		.btn-primary:focus,
-		.custom-select:focus,
-		input[type="text"]:focus,
-		.uneditable-input:focus{
-			border: 1px solid #007bff;
-			outline: 0 !important;
-			border-radius:0px;
-			box-shadow: none;
-		   -webkit-box-shadow: none;
-		   -moz-box-shadow: none;
-		   -moz-transition: none;
-		   -webkit-transition: none;
-		}
-		#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);
-			}
-		}
-		.right-part{border:1px solid #dedede;padding:5px;}
-		.logo{position:absolute;right:0px;bottom:0px;margin-right:30px;margin-bottom:30px;}
-	</style>
-	 <script>
-        let programs = {{ programs|tojson }};  // Passing programs from the backend as a JSON object
-
-        // Update the courses dropdown when a program is selected
-        function updateCourses() {
-            const programSelect = document.getElementById("program");
-            const courseSelect = document.getElementById("course");
-            const selectedProgram = programSelect.value;
-
-            // Clear existing options in the course dropdown
-            courseSelect.innerHTML = "<option value=''>--Select a course--</option>";
-            document.getElementById("course_outcomes").value = "";  // Clear the course outcomes
-
-            if (selectedProgram && programs[selectedProgram]) {
-                const courses = Object.keys(programs[selectedProgram]);
-                courses.forEach(course => {
-                    let option = document.createElement("option");
-                    option.value = course;
-                    option.text = course;
-                    courseSelect.appendChild(option);
-                });
-            }
+    <title>CLOs - PLOs Mapping</title>
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
+    <style>
+        /* Custom styles */
+        body { background-color: #eff2f9; }
+        h3 { color: #1b2d6b; font-size: 30px; font-weight: 700; }
+        textarea, select, .form-control, button.btn, input[type="text"] {
+            border: 1px solid #363e75; border-radius: 0px; box-shadow: none;
         }
-
-        // Update the course outcomes in the listbox when a course is selected
-        function updateCourseOutcomes() {
-            const programSelect = document.getElementById("program").value;
-            const courseSelect = document.getElementById("course").value;
-            const courseOutcomes = programs[programSelect] ? programs[programSelect][courseSelect] : [];
-
-            const courseOutcomesTextArea = document.getElementById("course_outcomes");
-            courseOutcomesTextArea.value = courseOutcomes ? courseOutcomes.join("\n") : "";
+        textarea:focus, select:focus, .form-control:focus, button:focus, input[type="text"]:focus {
+            border: 1px solid #007bff;
         }
-    </script>
+        .error-message {
+            color: red;
+            font-size: 14px;
+        }
+    </style>
 </head>
 <body>
-    <div class="main container">
-		<section class="iupload">
-			<h3 class="text-center py-4">CLOs - PLOs Mapping Using Large Language Models  </h3>
-			<div class="row">
-				<div class="img-part col-md-6">
-				  <h1> </h1>
-
-    <!-- Section for Model Selection -->
-    <h5>Select Model</h5>
-    <form action="/set_model" method="post">
-        <label for="model_name">Choose a Model:</label><br>
-        <select id="model_name" name="model_name">
-            <option value="sentence-transformers/all-mpnet-base-v2" selected>all-mpnet-base-v2</option>
-            <option value="sentence-transformers/bert-base-nli-mean-tokens">bert-base-nli-mean-tokens</option>
-            <option value="thuan9889/llama_embedding_model_v1">llama_embedding_model_v1</option>
-            <option value="sembeddings/model_gpt_trained">model_gpt_trained</option>
-        </select>
-        <button type="submit">Set Model</button>
-    </form>
-
-    <h5>Current Model: {{ model_name }}</h5>
-    {% if message %}
-        <p style="color: red;">{{ message }}</p>
-    {% endif %}
-
-    <hr>
-
-    <!-- Section for Course Outcome Matching -->
-    <h5>Select Program and Course</h5>
-    <form action="/match" method="post">
-        <label for="program">Select Program:</label><br>
-        <select id="program" name="program" onChange="updateCourses()">
-            <option value="">--Select a program--</option>
-            {% for program in programs %}
-                <option value="{{ program }}">{{ program }}</option>
-            {% endfor %}
-        </select><br><br>
-
-        <label for="course">Select Course:</label><br>
-        <select id="course" name="course" onChange="updateCourseOutcomes()">
-            <option value="">--Select a course--</option>
-        </select><br><br>
-
-        <label for="course_outcomes">Course Outcomes:</label><br>
-        <textarea id="course_outcomes" name="course_outcomes" rows="10" cols="50" readonly></textarea><br><br>
-
-        <input type="submit" value="Submit">
-    </form>
-			  </div>
-				<div class="col-md-6 col-xs-12 right-part">
-					<h5 class="mb-2"><center>Create a Program or Course</center></h5>
-					<div class="row">
-
-						<div class="res-part col-md-5 col-xs-12"><div class="jsonRes"><h2></h2>
-    <ul>
-        <li><a href="/addprogram">Create Program</a></li>
-        <li><a href="/addcourse">Create Course</a></li>
-    </ul></div></div>
-					</div>
-				</div>
-			</div>
-		</section>
-	</div>
-
-	<img class="logo" src="" />
-
-
-    <div id="loading"></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>
-var mybtn = document.getElementById('startbtn');
-var myvideo = document.getElementById('video');
-var mycanvas = document.getElementById('canvas');
-var myphoto = document.getElementById('photo');
-var base_data = "";
-
-function sendRequest(base64Data){
-	var type = "json";
-	if(base64Data != "" || base64Data != null){
-		if(type == "imgtobase"){
-			$(".res-part").html("");
-			$(".res-part").html(base64Data);
-		}
-		else if(type == "basetoimg"){
-			var imageData = $("#imgstring").val();
-			$(".res-part").html("");
-			$(".res-part").append("<img src='data:image/jpeg;base64," + imageData + "' alt='' />");
-		}
-		else{
-			var url = $("#url").val();
-			$("#loading").show();
-			$.ajax({
-				url : url,
-				type: "post",
-				cache: false,
-				async: true,
-				crossDomain: true,
-				headers: {
-					'Content-Type': 'application/json',
-					'Access-Control-Allow-Origin':'*'
-				},
-				data:JSON.stringify({image:base64Data}),
-				success: function(res){
-					$(".res-part").html("");
-					$(".res-part2").html("");
-					try{
-						var imageData = res[1].image;
-						if(imageData.length > 100){
-							if(imageData.length > 10){$(".res-part2").append("<img class='resp-img' src='data:image/jpeg;base64," + imageData + "' alt='' />");}
-						}
-					}catch(e){}
-					$(".res-part").html("<pre>" + JSON.stringify(res[0], undefined, 2) + "</pre>");
-					$("#loading").hide();
-				}
-			});
-		}
-	}
-}
-
-$(document).ready(function(){
-	$("#loading").hide();
-
-	$('#send').click(function(evt){
-		sendRequest(base_data);
-    });
-
-    $('#uload').click(function(evt) {
-        $('#fileinput').focus().trigger('click');
-    });
-	$("#fileinput").change(function(){
-		if (this.files && this.files[0]){
-			var reader = new FileReader();
-			reader.onload = function (e){
-				var url = e.target.result;
-				var img = new Image();
-				img.crossOrigin = 'Anonymous';
-				img.onload = function(){
-					var canvas = document.createElement('CANVAS');
-					var ctx = canvas.getContext('2d');
-					canvas.height = this.height;
-					canvas.width = this.width;
-					ctx.drawImage(this, 0, 0);
-					base_data = canvas.toDataURL('image/jpeg', 1.0).replace(/^data:image.+;base64,/, '');
-					canvas = null;
-				};
-				img.src = url;
-				$('#photo').attr('src', url);
-				$('#photo').show();
-				$('#video').hide();
-			}
-			reader.readAsDataURL(this.files[0]);
-		}
-	});
-});
-
-</script>
+    <div class="container">
+        <section class="mt-5">
+            <h3 class="text-center">CLOs - PLOs Mapping Using Large Language Models</h3>
+            <hr>
+
+            <!-- Model Selection -->
+            <form action="/set_model" method="post">
+                <label for="model_name">Choose a Model:</label>
+                <select id="model_name" name="model_name" class="custom-select mb-3">
+                    <option value="sentence-transformers/all-mpnet-base-v2" selected>all-mpnet-base-v2</option>
+                    <option value="sentence-transformers/bert-base-nli-mean-tokens">bert-base-nli-mean-tokens</option>
+                    <option value="thuan9889/llama_embedding_model_v1">llama_embedding_model_v1</option>
+                    <option value="sembeddings/model_gpt_trained">model_gpt_trained</option>
+                </select>
+                <button type="submit" class="btn btn-primary">Set Model</button>
+            </form>
+
+            <h5>Current Model: {{ model_name }}</h5>
+            {% if message %}
+                <p style="color: red;">{{ message }}</p>
+            {% endif %}
+            <hr>
+
+            <!-- CLOs and PLOs Entry Form -->
+            <form action="/match" method="post" onsubmit="return validatePLOs()">
+                <div class="form-group">
+                    <label for="course_outcomes">Course Learning Outcomes (CLOs):</label>
+                    <textarea id="course_outcomes" name="course_outcomes" rows="5" class="form-control" placeholder="Enter CLOs here"></textarea>
+                </div>
+
+                <div class="form-group">
+                    <label for="program_outcomes">Program Learning Outcomes (PLOs):</label>
+                    <textarea id="program_outcomes" name="program_outcomes" rows="5" class="form-control" placeholder="Enter up to 6 PLOs here"></textarea>
+                    <small class="text-muted">Enter only up to six PLOs, each on a new line.</small>
+                    <p id="plo-error" class="error-message"></p> <!-- Error message area -->
+                </div>
+
+                <button type="submit" class="btn btn-primary">Submit</button>
+            </form>
+        </section>
+    </div>
+
+    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
+    <script>
+        function validatePLOs() {
+            const ploTextarea = document.getElementById('program_outcomes');
+            const errorElement = document.getElementById('plo-error');
+            const plos = ploTextarea.value.trim().split('\n').filter(line => line.trim() !== '');
+
+            if (plos.length > 6) {
+                errorElement.textContent = "Please enter only up to six PLOs.";
+                return false;
+            }
+            errorElement.textContent = ""; // Clear the error message if valid
+            return true;
+        }
+    </script>
 </body>
-</html>
+</html>