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

<!DOCTYPE html>
<html>
<head>
    <title>模型评测平台 - 上传训练数据、测试样本，下载模型和结果</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=&quot;file&quot;] {
        margin-top: 10px;
    }

    input[type=&quot;submit&quot;] {
        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;
    }
&lt;/style&gt;
</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>&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-bar&quot;&gt;
            &lt;div id=&quot;progress&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>");
                });
            }
        });
    });

    // Progress Bar
    function updateProgress(progress) {
        $("#progress").css("width", progress + "%");
    }

    $(document).ready(function() {
        $("form").submit(function(e) {
            e.preventDefault();
            var form = this;
            var progressBar = $(form).find("#progress");

            var progress = 0;
            var interval = setInterval(function() {
                if (progress >= 100) {
                    clearInterval(interval);
                    // Show success message
                    $(form).find("#train").append("<p>上传成功</p>");
                    return;
                }
                updateProgress(progress);
                progress += 10;
            }, 300);
        });
    });
</script>
</body>
</html>