Spaces:
Sleeping
Sleeping
| <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> | |