|
|
<!DOCTYPE html>
|
|
|
<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 !important;
|
|
|
|
|
|
|
|
|
color: white;
|
|
|
}
|
|
|
|
|
|
.btn-primary {
|
|
|
background-color: #3498db;
|
|
|
border-color: #3498db;
|
|
|
border: 1px solid #3498db;
|
|
|
}
|
|
|
.btn-primary:hover {
|
|
|
background-color: transparent !important;
|
|
|
color: #3498db;
|
|
|
border: 1px solid #3498db;
|
|
|
}
|
|
|
|
|
|
.btn-success {
|
|
|
background-color: #28a745;
|
|
|
border-color: #28a745;
|
|
|
border: 1px solid #28a745;
|
|
|
}
|
|
|
.btn-success:hover {
|
|
|
background-color: transparent !important;
|
|
|
color: #28a745;
|
|
|
border: 1px solid #28a745;
|
|
|
}
|
|
|
|
|
|
.btn-danger {
|
|
|
background-color: #ff4d4d !important;
|
|
|
border-color: #ff4d4d !important;
|
|
|
border: 1px solid #ff4d4d;
|
|
|
}
|
|
|
.btn-danger:hover {
|
|
|
background-color: transparent !important;
|
|
|
color: #ff4d4d !important;
|
|
|
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>
|
|
|
|
|
|
<div class="guide-button">
|
|
|
<a href="{{ url_for('guide') }}" class="btn">
|
|
|
<i class="fas fa-info-circle"></i> Guide
|
|
|
</a>
|
|
|
</div>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<div class="container mt-5">
|
|
|
<h1>Train Your Model</h1>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
{% with messages = get_flashed_messages() %}
|
|
|
{% if messages %}
|
|
|
<div class="alert alert-success mt-4" id="flash-message">
|
|
|
{{ messages[0] }}
|
|
|
</div>
|
|
|
{% endif %}
|
|
|
{% endwith %}
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
<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>
|
|
|
|
