模型评测平台 - 上传训练数据和测试样本，下载模型和结果

<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>&lt;h2&gt;上传测试样本&lt;/h2&gt;
&lt;form action=&quot;/test&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt;
    &lt;input type=&quot;file&quot; name=&quot;test_samples&quot; accept=&quot;.csv&quot;&gt;
    &lt;input type=&quot;submit&quot; value=&quot;上传并测试&quot;&gt;
    &lt;div id=&quot;test&quot;&gt;
        &lt;ul id=&quot;fileList1&quot; style=&quot;list-style:none;&quot;&gt;&lt;/ul&gt;
        &lt;div id=&quot;progress-bar1&quot;&gt;
            &lt;div id=&quot;progress1&quot;&gt;&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
&lt;/form&gt;

&lt;h2&gt;下载训练模型&lt;/h2&gt;
&lt;div id=&quot;model&quot;&gt;
    &lt;ul id=&quot;fileList3&quot; style=&quot;list-style:none;&quot;&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;a href=&quot;/download_model&quot;&gt;下载模型&lt;/a&gt;

&lt;h2&gt;下载分类结果&lt;/h2&gt;
&lt;div id=&quot;results&quot;&gt;
    &lt;ul id=&quot;fileList2&quot; style=&quot;list-style:none;&quot;&gt;&lt;/ul&gt;
&lt;/div&gt;
&lt;a href=&quot;/download_results&quot;&gt;下载结果&lt;/a&gt;
</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>");
                });
            }
        });
    });

    // Track upload progress for training data
    $('form[action="/upload"]').submit(function(e){
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: formData,
            beforeSend: function() {
                $('#progress').width('0%');
            },
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(e){
                    if (e.lengthComputable) {
                        var percent = Math.round((e.loaded / e.total) * 100);
                        $('#progress').width(percent + '%');
                    }
                });
                return xhr;
            },
            success: function(response) {
                alert('上传成功');
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });

    // Track upload progress for test samples
    $('form[action="/test"]').submit(function(e){
        e.preventDefault();
        var formData = new FormData($(this)[0]);
        $.ajax({
            url: $(this).attr('action'),
            type: $(this).attr('method'),
            data: formData,
            beforeSend: function() {
                $('#progress1').width('0%');
            },
            xhr: function() {
                var xhr = new window.XMLHttpRequest();
                xhr.upload.addEventListener('progress', function(e){
                    if (e.lengthComputable) {
                        var percent = Math.round((e.loaded / e.total) * 100);
                        $('#progress1').width(percent + '%');
                    }
                });
                return xhr;
            },
            success: function(response) {
                alert('上传成功');
            },
            cache: false,
            contentType: false,
            processData: false
        });
    });
</script>
</body>
</html>