!DOCTYPE htmlhtmlhead titleTraining and Testing Platformtitle style body font-family Arial sans-serif; background-color #f3f3f3; margin 0; pad
<!DOCTYPE html>
<html>
<head>
<title>Training and Testing Platform</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f3f3f3;
margin: 0;
padding: 20px;
}
<pre><code> h2 {
margin-top: 30px;
}
form {
margin-bottom: 20px;
}
input[type="file"] {
margin-top: 10px;
}
input[type="submit"] {
margin-top: 10px;
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
a {
display: inline-block;
margin-top: 10px;
padding: 10px 20px;
background-color: #337ab7;
color: white;
text-decoration: none;
}
#train {
margin-top: 20px;
padding: 10px;
background-color: #fff;
}
#test {
margin-top: 20px;
padding: 10px;
background-color: #fff;
}
#results {
margin-top: 20px;
padding: 10px;
background-color: #fff;
}
#model {
margin-top: 20px;
padding: 10px;
background-color: #fff;
}
#progress-bar {
width: 300px;
height: 20px;
background-color: #f2f2f2;
border-radius: 10px;
margin: 20px 0;
}
#progress {
width: 0%;
height: 100%;
background-color: #4caf50;
border-radius: 10px;
}
</style>
</code></pre>
</head>
<body>
<h1 style="text-align:center ;">模型评测平台</h1>
<div style="height:900px;width:800px;margin:0 auto;">
<h2>上传训练数据</h2>
<form action="/upload" method="post" enctype="multipart/form-data">
<input type="file" name="training_data" accept=".csv">
<input type="submit" value="上传并训练">
<div id="train">
<ul id="fileList" style="list-style:none;"></ul>
<div id="progress-bar">
<div id="progress"></div>
</div>
</div>
</form>
<pre><code><h2>上传测试样本</h2>
<form action="/test" method="post" enctype="multipart/form-data">
<input type="file" name="test_samples" accept=".csv">
<input type="submit" value="上传并测试">
<div id="test">
<ul id="fileList1" style="list-style:none;"></ul>
<div id="progress-bar">
<div id="progress"></div>
</div>
</div>
</form>
<h2>下载训练模型</h2>
<div id="model">
<ul id="fileList3" style="list-style:none;"></ul>
</div>
<a href="/download_model">下载模型</a>
<h2>下载分类结果</h2>
<div id="results">
<ul id="fileList2" style="list-style:none;"></ul>
</div>
<a href="/download_results">下载结果</a>
</code></pre>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: "/get_files",
type: "GET",
success: function(response) {
var files = response.files;
files.forEach(function(file) {
$("#fileList").append("<li>" + file + "</li>");
});
}
});
});
$(document).ready(function() {
$.ajax({
url: "/get_files1",
type: "GET",
success: function(response) {
var files = response.files;
files.forEach(function(file) {
$("#fileList1").append("<li>" + file + "</li>");
});
}
});
});
$(document).ready(function() {
$.ajax({
url: "/get_files2",
type: "GET",
success: function(response) {
var files = response.files;
files.forEach(function(file) {
$("#fileList2").append("<li>" + file + "</li>");
});
}
});
});
$(document).ready(function() {
$.ajax({
url: "/get_files3",
type: "GET",
success: function(response) {
var files = response.files;
files.forEach(function(file) {
$("#fileList3").append("<li>" + file + "</li>");
});
}
});
});
// Update progress bar
$("form").submit(function(e) {
e.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: $(this).attr("action"),
type: $(this).attr("method"),
data: formData,
async: false,
cache: false,
contentType: false,
processData: false,
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = (evt.loaded / evt.total) * 100;
$("#progress").width(percentComplete + "%");
}
}, false);
return xhr;
},
success: function(response) {
// Update file list
var fileListId = $(this).find("ul").attr("id");
$("#" + fileListId).empty();
response.files.forEach(function(file) {
$("#" + fileListId).append("<li>" + file + "</li>");
});
// Reset progress bar
$("#progress").width("0%");
}
});
});
</script>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/hYhE 著作权归作者所有。请勿转载和采集!