master

分支 (1)

管理

管理

master

powerline
/
index.html

<html>
   <head>
      <title> 3D点云分类算法测试 </title>
      <!--meta http-equiv="refresh" content="3"-->
   </head>
   <body>
        <script>
            setInterval(function(){
               const url='http://123.207.77.163:6408/get_progress';
                const Http = new XMLHttpRequest();

                Http.open("get", url);
                Http.send();
                Http.onreadystatechange = (e) => {
                    if(Http.responseText == ""){return;}
                    var retStr = Http.responseText;

                    var ret = retStr.split(";")
                    document.getElementById("progress").value = ret[0];
                    document.getElementById("IoU").innerHTML  = ret[1];
                    document.getElementById("Acc").innerHTML  = ret[2];
                }
            }, 3000);

            function startTest() {
                var input1Text = document.getElementById("datalist1_input").value;
                if(input1Text == ""){
                    alert("测试集目录（未标注）为空");
                    return
                }

                var input2Text = document.getElementById("datalist2_input").value;
                if(input2Text == ""){
                    alert("测试集目录（已标注）为空");
                    return
                }

                var input3Text = document.getElementById("datalist3_input").value;
                if(input3Text == ""){
                    alert("输出目录为空");
                    return
                }
                const Http = new XMLHttpRequest();
                const url='http://123.207.77.163:6408/setdata?data1=' + input1Text + '&data2=' + input2Text + '&data3=' + input3Text;
                Http.open("get", url);
                Http.send();
                Http.onreadystatechange = (e) => {
                    console.log(Http.responseText)
                }
                const Http2 = new XMLHttpRequest();
                const url2='http://123.207.77.163:6408/exePython';
                Http2.open("get", url2);
                Http2.send();
            }

            function addDataDirectory1(){

                    fetch('/get_files1')  // 发送GET请求到后端API接口获取文件列表
                                .then(response => response.json())  // 将响应解析为JSON格式
                           .then(files => {

                    const datalist = document.getElementById('datalist1');  // 获取<datalist>元素
                    const datainput=document.getElementById('datalist1_input');  // 获取<datainput>元素
                    datainput.addEventListener('mousedown', function(event) {
                     // 在这里可以添加您想要的逻辑，例如清除输入框的内容

                    datainput.value = ''; // 清除输入框内容

                   });
                    datalist.innerHTML = '';  // 清空之前的选项
                    files.forEach(file => {
                        const option = document.createElement('option');  // 创建<option>元素
                        option.setAttribute("label",file);
                        option.setAttribute("value",file);
                        datalist.appendChild(option);  // 将<option>添加到<datalist>中

                    });
                })
                 .catch(error => {
                    console.error('Error:', error);  // 处理错误情况
                 });
            }


            function addDataDirectory2(){
                //var ss = document.getElementById("datalist2");
                //let sign = prompt("请输入目录（测试集，已标注）:");
                //    document.getElementById("datalist2_input").value  =  sign;

                //var op=document.createElement("option");
                //op.setAttribute("label",sign);
                //op.setAttribute("value",sign);

                //ss.appendChild(op)
                fetch('/get_files2')  // 发送GET请求到后端API接口获取文件列表
                                .then(response => response.json())  // 将响应解析为JSON格式
                           .then(files => {

                    const datalist = document.getElementById('datalist2');  // 获取<datalist>元素
                    const datainput=document.getElementById('datalist2_input');  // 获取<datainput>元素
                    datainput.addEventListener('mousedown', function(event) {
                     // 在这里可以添加您想要的逻辑，例如清除输入框的内容

                    datainput.value = ''; // 清除输入框内容

                   });
                    datalist.innerHTML = '';  // 清空之前的选项
                    files.forEach(file => {
                        const option = document.createElement('option');  // 创建<option>元素
                        option.setAttribute("label",file);
                        option.setAttribute("value",file);
                        datalist.appendChild(option);  // 将<option>添加到<datalist>中

                    });
                })
                 .catch(error => {
                    console.error('Error:', error);  // 处理错误情况
                 });
            }
            function addDataDirectory3(){
                fetch('/get_files3')  // 发送GET请求到后端API接口获取文件列表
                                .then(response => response.json())  // 将响应解析为JSON格式
                           .then(files => {

                    const datalist = document.getElementById('datalist3');  // 获取<datalist>元素
                    const datainput=document.getElementById('datalist3_input');  // 获取<datainput>元素
                    datainput.addEventListener('mousedown', function(event) {
                     // 在这里可以添加您想要的逻辑，例如清除输入框的内容

                    datainput.value = ''; // 清除输入框内容

                   });
                    datalist.innerHTML = '';  // 清空之前的选项
                    files.forEach(file => {
                        const option = document.createElement('option');  // 创建<option>元素
                        option.setAttribute("label",file);
                        option.setAttribute("value",file);
                        datalist.appendChild(option);  // 将<option>添加到<datalist>中

                    });
                })
                 .catch(error => {
                    console.error('Error:', error);  // 处理错误情况
                 });
            }
            addDataDirectory1();  // 初始加载时更新文件列表
            addDataDirectory2();  // 初始加载时更新文件列表
            addDataDirectory3();  // 初始加载时更新文件列表
        </script>

        <div style="width: 100%; line-height: 100px; border: 1px solid green; text-align:center;">
            <div>
                <label for="myBrowser">测试集， 请选择测试集目录:</label>
                <input list="datalist1" id="datalist1_input" name="myBrowser" value={{test_data_dir}} type="text" onkeydown="return false;" onpaste="return false;"/>
                <datalist id="datalist1">
                </datalist>

<!--                <button onclick="addDataDirectory1()">添加目录 </button>-->
                <label>(未标注)</label>
            </div>

            <div>
                <label for="myBrowser">测试集， 请选择测试集目录:</label>
                <input list="datalist2" id="datalist2_input" name="myBrowser"  value={{test_data_dir_marked}}  type="text" onkeydown="return false;" onpaste="return false;"/>
                <datalist id="datalist2">
                </datalist>
<!--                <button onclick="addDataDirectory2()">添加目录 </button>-->
                <label>(已标注)</label>
            </div>

            <div>
                <label for="myBrowser">推理输出：， 请选择目录:</label>
                <input list="datalist3" id="datalist3_input" name="myBrowser"  value={{output_data_dir}}  type="text" onkeydown="return false;" onpaste="return false;"/>
                <datalist id="datalist3">
                </datalist>
<!--                <button onclick="addDataDirectory3()">添加目录</button>-->
                <label>(带标注)</label>
            </div>

            <div>
                <button onclick="startTest()">开始测试 </button> <progress id="progress" max="100" value="{{rate}}"> {{rate}} </progress> <label>(进度条)</label>
            </div>

            <div>
                <label>本次报告： </label>
                <div>
                    <div>
                        <label>IoU：  </label> <label id="IoU" style="color: red;">{{IoU}} </label>
                    </div>
                    <div>
                        <label>Acc：  </label> <label id="Acc" style="color: red;">{{Acc}} </label>
                    </div>
                </div>
            </div>
        </div>
   </body>

 </html>