模型训练与测试平台 - 上传数据、下载结果 - 常规

<html>
<head>
    <title>模型训练与测试平台</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f3f3f3;
            margin: 0;
            padding: 20px;
        }
<pre><code>    h1 {
        text-align: center;
    }

    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;
    }

    #progress-bar-test {
        width: 300px;
        height: 20px;
        background-color: #f2f2f2;
        border-radius: 10px;
        margin: 20px 0;
    }

    #progress-test {
        width: 0%;
        height: 100%;
        background-color: #4caf50;
        border-radius: 10px;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <h1>模型评测平台</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='/test' method='post' enctype='multipart/form-data'&gt;
        &lt;input type='file' name='test_samples' accept='.csv'&gt;
        &lt;input type='submit' value='上传并测试'&gt;
        &lt;div id='test'&gt;
            &lt;ul id='fileList1' style='list-style:none;'&gt;&lt;/ul&gt;
            &lt;div id='progress-bar-test'&gt;
                &lt;div id='progress-test'&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;

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

    &lt;h2&gt;下载分类结果&lt;/h2&gt;
    &lt;div id='results'&gt;
        &lt;ul id='fileList2' style='list-style:none;'&gt;&lt;/ul&gt;
    &lt;/div&gt;
    &lt;a href='/download_results'&gt;下载结果&lt;/a&gt;
&lt;/div&gt;

&lt;script src='https://code.jquery.com/jquery-3.4.1.min.js'&gt;&lt;/script&gt;
&lt;script&gt;
    $(document).ready(function () {
        $.ajax({
            url: '/get_files',
            type: 'GET',
            success: function (response) {
                var files = response.files;
                files.forEach(function (file) {
                    $(&quot;#fileList&quot;).append('&lt;li&gt;' + file + '&lt;/li&gt;');
                });
            }
        });
    });

    $(document).ready(function () {
        $.ajax({
            url: '/get_files1',
            type: 'GET',
            success: function (response) {
                var files = response.files;
                files.forEach(function (file) {
                    $(&quot;#fileList1&quot;).append('&lt;li&gt;' + file + '&lt;/li&gt;');
                });
            }
        });
    });

    $(document).ready(function () {
        $.ajax({
            url: '/get_files2',
            type: 'GET',
            success: function (response) {
                var files = response.files;
                files.forEach(function (file) {
                    $(&quot;#fileList2&quot;).append('&lt;li&gt;' + file + '&lt;/li&gt;');
                });
            }
        });
    });

    $(document).ready(function () {
        $.ajax({
            url: '/get_files3',
            type: 'GET',
            success: function (response) {
                var files = response.files;
                files.forEach(function (file) {
                    $(&quot;#fileList3&quot;).append('&lt;li&gt;' + file + '&lt;/li&gt;');
                });
            }
        });
    });

    $(&quot;form&quot;).on('submit', function () {
        var progressBar = $(this).find('#progress');
        var progressBarTest = $(this).find('#progress-test');

        $(this).ajaxSubmit({
            beforeSend: function () {
                progressBar.width('0%');
                progressBarTest.width('0%');
            },
            uploadProgress: function (event, position, total, percentComplete) {
                progressBar.width(percentComplete + '%');
                progressBarTest.width(percentComplete + '%');
            },
            success: function () {
                progressBar.width('100%');
                progressBarTest.width('100%');
            },
            complete: function (xhr) {
                if (xhr.status === 200) {
                    progressBar.width('100%');
                    progressBarTest.width('100%');
                    alert('上传成功');
                } else {
                    alert('上传失败');
                }
            }
        });

        return false;
    });
&lt;/script&gt;
</code></pre>
</body>
</html>