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>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 ; | |
| 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 ; | |
| 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); | |
| }); | |
| } | |
| } | |
| // 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") : ""; | |
| } | |
| </script> | |
| </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> | |
| </body> | |
| </html> |