Spaces:
Sleeping
Sleeping
| <html> | |
| <head> | |
| <script src="{{ url_for('static', filename='js/js.js')}}"></script> | |
| <link rel="icon" type="image/x-icon" href="{{ url_for('static', filename='images/logo.png')}}"> | |
| <meta charset="utf-8 " /> | |
| <title>Classifiers</title> | |
| <link rel="stylesheet" href="{{ url_for('static', filename='css/css.css')}}"> | |
| <link href="https://fonts.googleapis.com " rel="preconnect " /> | |
| <link href="https://fonts.gstatic.com " rel="preconnect " crossorigin="anonymous " /> | |
| </head> | |
| <body> | |
| <div class="video-bg"> | |
| <video width="320" height="240" autoplay loop muted> | |
| <source src="{{ url_for('static', filename='images/asset.mp4')}}" type="video/mp4"> | |
| </video> | |
| </div> | |
| <div class="app"> | |
| <div class="header"> | |
| <div class="menu-circle"></div> | |
| <div class="header-menu"> | |
| <a class="menu-link" href="{{ url_for('index')}}">Home</a> | |
| <a class="menu-link is-active" href="{{ url_for('classifier')}}">NLP Tools</a> | |
| </div> | |
| </div> | |
| <div class="wrapper"> | |
| <div class="main-container"> | |
| <div class="main-header"> | |
| <a class="menu-link-main">NaturalLanguageProcessing</a> | |
| <div class="header-menu"> | |
| <a class="main-header-link is-active" onclick="loadModel('classification')">Text Classification</a> | |
| <a class="main-header-link" onclick="loadModel('generation')">Text Generation</a> | |
| </div> | |
| </div> | |
| <div id="model-iframe" class="mlmenu"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| function loadModel(modelName) { | |
| var iframe = document.getElementById("model-iframe"); | |
| var url; | |
| // Define the URLs for each model | |
| if (modelName === 'classification') { | |
| url = "{{ url_for('classification')}}"; | |
| } else if (modelName === 'generation') { | |
| url = "{{ url_for('generation')}}"; | |
| } | |
| // Set the src attribute of the iframe | |
| iframe.innerHTML = '<iframe src="' + url + '" style="width: 100%; height:30em; scroll-behavior: smooth;" frameborder="0"></iframe>'; | |
| // Remove the "is-active" class from all main-header-link elements | |
| var headerLinks = document.getElementsByClassName("main-header-link"); | |
| for (var i = 0; i < headerLinks.length; i++) { | |
| headerLinks[i].classList.remove("is-active"); | |
| } | |
| // Add the "is-active" class to the clicked link | |
| var clickedLink = document.querySelector('.main-header-link[onclick="loadModel(\'' + modelName + '\')"]'); | |
| clickedLink.classList.add("is-active"); | |
| } | |
| // Call loadModel with the default model when the page is loaded | |
| window.onload = function() { | |
| loadModel('classification', 'classification'); // Replace 'linear' with the desired default model | |
| }; | |
| </script> | |
| </body> | |
| </html> |