Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Train Model</title> | |
| <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" /> | |
| <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.10.5/font/bootstrap-icons.min.css" rel="stylesheet" /> | |
| <link | |
| rel="stylesheet" | |
| href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" | |
| /> | |
| <style> | |
| body { | |
| background-color: #121212; | |
| font-family: "Poppins", sans-serif; | |
| color: #e0e0e0; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: 0 auto; | |
| } | |
| h1, h2 { | |
| color: #ffffff; | |
| font-weight: 500; | |
| margin-bottom: 20px; | |
| text-align: center; | |
| } | |
| .btn-custom { | |
| background-color: #ff9800; | |
| color: white; | |
| border: none; | |
| padding: 10px 20px; | |
| border-radius: 5px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: background-color 0.3s ease, transform 0.3s ease; | |
| width: 100%; | |
| } | |
| .btn-custom:hover, | |
| .btn-custom:focus { | |
| background-color: transparent ; | |
| /* border: 1px solid #ff9800; */ | |
| /* transform: scale(1.05); */ | |
| color: white; | |
| } | |
| .btn-primary { | |
| background-color: #3498db; | |
| border-color: #3498db; | |
| border: 1px solid #3498db; | |
| } | |
| .btn-primary:hover { | |
| background-color: transparent ; | |
| color: #3498db; | |
| border: 1px solid #3498db; | |
| } | |
| .btn-success { | |
| background-color: #28a745; | |
| border-color: #28a745; | |
| border: 1px solid #28a745; | |
| } | |
| .btn-success:hover { | |
| background-color: transparent ; | |
| color: #28a745; | |
| border: 1px solid #28a745; | |
| } | |
| .btn-danger { | |
| background-color: #ff4d4d ; | |
| border-color: #ff4d4d ; | |
| border: 1px solid #ff4d4d; | |
| } | |
| .btn-danger:hover { | |
| background-color: transparent ; | |
| color: #ff4d4d ; | |
| border: 1px solid #ff4d4d; | |
| } | |
| .file-upload-section { | |
| max-width: 600px; | |
| margin-bottom: 20px ; | |
| background-color: #1e1e1e; | |
| padding: 20px; | |
| border-radius: 8px; | |
| box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); | |
| } | |
| .form-group label { | |
| color: #b3b3b3; | |
| } | |
| .form-control { | |
| background-color: #2c2c2c; | |
| color: #e0e0e0; | |
| border: 1px solid #444; | |
| } | |
| .form-control:focus { | |
| border-color: #ff9800; | |
| box-shadow: none; | |
| } | |
| .loader { | |
| border: 14px solid #f3f3f3; | |
| border-radius: 50%; | |
| border-top: 16px solid #ff9800; | |
| width: 100px; | |
| height: 100px; | |
| animation: spin 2s linear infinite; | |
| display: none; | |
| margin: 0 auto; | |
| } | |
| @keyframes spin { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| #msg { | |
| margin-top: 20px; | |
| font-size: 18px; | |
| color: #28a745; | |
| } | |
| .restart-button { | |
| margin-top: 20px; | |
| margin-left: 20px; | |
| display: flex; | |
| } | |
| .guide { | |
| background-color: #1e1e1e; | |
| padding: 20px; | |
| border-radius: 10px; | |
| margin-top: 20px; | |
| } | |
| .guide-button { | |
| position: fixed; | |
| top: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| } | |
| .guide-button a { | |
| font-size: 16px; | |
| color: #17a2b8; | |
| padding: 5px 10px; | |
| border-radius: 5px; | |
| text-decoration: none; | |
| } | |
| .guide-button a:hover { | |
| background-color: #138496b9; | |
| } | |
| .fas.fa-info-circle { | |
| margin-right: 5px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Guide Button --> | |
| <div class="guide-button"> | |
| <a href="{{ url_for('guide') }}" class="btn"> | |
| <i class="fas fa-info-circle"></i> Guide | |
| </a> | |
| </div> | |
| <!-- Restart Form --> | |
| <form action="{{ url_for('remove_files') }}" method="post"> | |
| <input type="hidden" name="folder_type" value="uploads"> | |
| <div class="restart-button"> | |
| <button type="submit" class="btn btn-danger"> | |
| <i class="bi bi-arrow-clockwise"></i> Restart | |
| </button> | |
| </div> | |
| </form> | |
| <!-- Main Content --> | |
| <div class="container mt-5"> | |
| <h1>Train Your Model</h1> | |
| <!-- File Upload Section --> | |
| <div class="progress"> | |
| <div class="progress-bar" role="progressbar" style="width: 100%;" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100">Step 5 of 5</div> | |
| </div> | |
| <div class="file-upload-section"> | |
| <h2>Convert JSON to SpaCy Format</h2> | |
| <form action="{{ url_for('to_sapcy') }}" method="POST"> | |
| <button type="submit" class="btn btn-primary btn-custom"> | |
| <i class="bi bi-arrow-repeat"></i> Convert JSON to SpaCy | |
| </button> | |
| </form> | |
| <!-- Model Training Section --> | |
| <h2 class="mt-5">Train Model</h2> | |
| <form id="train-form" action="{{ url_for('train_model_endpoint') }}" method="POST"> | |
| <div class="form-group"> | |
| <label for="epochs">Number of Epochs:</label> | |
| <input type="number" id="epochs" name="epochs" class="form-control" min="1" value="10" /> | |
| </div> | |
| <div class="form-group"> | |
| <label for="model_version">Model Version:</label> | |
| <input type="text" id="model_version" name="model_version" class="form-control" value="V1" /> | |
| </div> | |
| <button type="button" id="start-training" class="btn btn-danger btn-custom"> | |
| <i class="bi bi-gear"></i> Start Training | |
| </button> | |
| </form> | |
| <!-- Download Section --> | |
| <div id="download" style="display: none;"> | |
| <h2 class="mt-5">Download Latest Model</h2> | |
| <form action="{{ url_for('download_latest_model') }}" method="GET"> | |
| <button type="submit" class="btn btn-success btn-custom"> | |
| <i class="bi bi-download"></i> Download Model | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- Flash Message Handling --> | |
| {% with messages = get_flashed_messages() %} | |
| {% if messages %} | |
| <div class="alert alert-success mt-4" id="flash-message"> | |
| {{ messages[0] }} | |
| </div> | |
| {% endif %} | |
| {% endwith %} | |
| <!-- Loader --> | |
| <div class="loader" id="loader"></div> | |
| <div id="ld-txt" class="text-center" style="display: none"> | |
| Loading...<br><span class="text-danger">Please avoid refreshing the page while processing!</span> | |
| </div> | |
| <!-- Success/Error Message --> | |
| <div id="msg" class="alert alert-success mt-4" style="display: none"></div> | |
| <div class="guide"> | |
| <h5>Instructions:</h5> | |
| <ol> | |
| <li>Click 'Convert JSON to SpaCy' button to convet json file in to spacy file</li> | |
| <li>Select the number of epochs and provide a model version for training. The model will learn from the uploaded data, optimizing its parameters to better understand and categorize the information.</li> | |
| <li>The number of epochs represents how many times the model will pass through the training data. More epochs may improve the model's performance but may also lead to overfitting if set too high.</li> | |
| <li>Choosing a model version helps you manage different versions of the trained model for tracking and comparison.</li> | |
| </ol> | |
| </div> | |
| </div> | |
| <!-- JavaScript Logic --> | |
| <script> | |
| document.getElementById("start-training").addEventListener("click", function () { | |
| document.getElementById("loader").style.display = "block"; | |
| document.getElementById("ld-txt").style.display = "block"; | |
| axios.post('{{ url_for("train_model_endpoint") }}', new FormData(document.getElementById("train-form"))) | |
| .then(function (response) { | |
| document.getElementById("loader").style.display = "none"; | |
| document.getElementById("ld-txt").style.display = "none"; | |
| document.getElementById("msg").style.display = "block"; | |
| document.getElementById("msg").innerHTML = "Model training completed successfully."; | |
| document.getElementById("download").style.display = "block"; | |
| }) | |
| .catch(function (error) { | |
| document.getElementById("loader").style.display = "none"; | |
| document.getElementById("ld-txt").style.display = "none"; | |
| let msg = document.getElementById("msg"); | |
| msg.style.display = "block"; | |
| msg.innerHTML = "Error occurred during model training."; | |
| }); | |
| }); | |
| setTimeout(function () { | |
| let flashMessage = document.getElementById("flash-message"); | |
| if (flashMessage) { | |
| flashMessage.style.transition = "opacity 1s ease"; | |
| flashMessage.style.opacity = 0; | |
| setTimeout(() => flashMessage.remove(), 1000); | |
| } | |
| }, 3000); | |
| </script> | |
| </body> | |
| </html> | |