Spaces:
Sleeping
Sleeping
File size: 3,906 Bytes
e24c25f 3a28273 e24c25f 3a28273 e24c25f 3a28273 e24c25f 3a28273 e24c25f 3a28273 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
<!DOCTYPE html>
<html lang="en">
<head>
<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>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;
}
textarea:focus, select:focus, .form-control:focus, button:focus, input[type="text"]:focus {
border: 1px solid #007bff;
}
.error-message {
color: red;
font-size: 14px;
}
</style>
</head>
<body>
<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>
|