freemandealer/data_annotate_util.html

## data_annotate_util.html
<!DOCTYPE html>
<html>
<body>

<h1>对话生成评估</h1>

<p>选择TSV文件:</p>
<input type="file" id="inputTSV" onchange="loadFiles()"/>

<p>选择Model1预测:</p>
<input type="file" id="inputModel1" onchange="loadFiles()"/>

<p>选择Model2预测:</p>
<input type="file" id="inputModel2" onchange="loadFiles()"/>

<p>选择Model3预测:</p>
<input type="file" id="inputModel3" onchange="loadFiles()"/>

<h2>参考文档</h2>
<p id="doc"></p>

<h2>历史</h2>
<p id="his"></p>

<h2>标准回复</h2>
<p id="gold"></p>

<h2>Model1预测</h2>
<p id="model1"></p>
<input type="text" id="model1_fluency" placeholder="Fluency">
<input type="text" id="model1_refrel" placeholder="Ref-Rel">
<input type="text" id="model1_docrel" placeholder="Doc-Rel">

<h2>Model2预测</h2>
<p id="model2"></p>
<input type="text" id="model2_fluency" placeholder="Fluency">
<input type="text" id="model2_refrel" placeholder="Ref-Rel">
<input type="text" id="model2_docrel" placeholder="Doc-Rel">

<h2>Model3预测</h2>
<p id="model3"></p>
<input type="text" id="model3_fluency" placeholder="Fluency">
<input type="text" id="model3_refrel" placeholder="Ref-Rel">
<input type="text" id="model3_docrel" placeholder="Doc-Rel">

<br>
<br>
<br>

<button onclick="loadNext()">暂存并加载下一条</button>
<button onclick="saveResult()">导出结果</button>
<button onclick="clearCheckpoint()">清除暂存结果并重新开始</button>

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

<script>
var data = [];  // 存放数据
var index = 0;  // 当前数据的索引
var results = [];  // 存放结果

loadCheckpoint();

function loadFiles() {
    var fileTSV = document.getElementById("inputTSV").files[0];
    var fileModel1 = document.getElementById("inputModel1").files[0];
    var fileModel2 = document.getElementById("inputModel2").files[0];
    var fileModel3 = document.getElementById("inputModel3").files[0];

    if (fileTSV && fileModel1 && fileModel2 && fileModel3) {
        Promise.all([
            readFileAsText(fileTSV),
            readFileAsText(fileModel1),
            readFileAsText(fileModel2),
            readFileAsText(fileModel3),
        ]).then(function(values) {
            var linesTSV = values[0].split('\n');
            var linesModel1 = values[1].split('\n');
            var linesModel2 = values[2].split('\n');
            var linesModel3 = values[3].split('\n');

            for (var i = 0; i < linesTSV.length; i++) {
                var parts = linesTSV[i].split('\t');
                data.push({
                    "index": parts[0],
                    "his": parts[1],
                    "gold": parts[2],
                    "doc": parts[3],
                    "model1": linesModel1[i],
                    "model2": linesModel2[i],
                    "model3": linesModel3[i]
                });
            }
            loadNext();
        });
    }
}

function readFileAsText(file) {
    return new Promise(function(resolve, reject) {
        var reader = new FileReader();
        reader.onload = function(e) {
            resolve(e.target.result);
        };
        reader.onerror = function(e) {
            reject(e);
        };
        reader.readAsText(file);
    });
}

function loadNext() {
    saveCurrentResult();
    saveCheckpoint();
    if (index < data.length) {
        document.getElementById("his").innerText = data[index].his;
        document.getElementById("gold").innerText = data[index].gold;
        document.getElementById("doc").innerText = data[index].doc;
        document.getElementById("model1").innerText = data[index].model1;
        document.getElementById("model2").innerText = data[index].model2;
        document.getElementById("model3").innerText = data[index].model3;

        // 清空输入框
        document.getElementById("model1_fluency").value = "";
        document.getElementById("model1_refrel").value = "";
        document.getElementById("model1_docrel").value = "";
        document.getElementById("model2_fluency").value = "";
        document.getElementById("model2_refrel").value = "";
        document.getElementById("model2_docrel").value = "";
        document.getElementById("model3_fluency").value = "";
        document.getElementById("model3_refrel").value = "";
        document.getElementById("model3_docrel").value = "";

        index++;
    } else {
        alert("所有数据已加载完毕！");
    }
}

function saveCheckpoint() {
    localStorage.setItem('checkpointData', JSON.stringify(results));
    localStorage.setItem('checkpointIndex', JSON.stringify(index));
}


function loadCheckpoint() {
    const tmp_results = localStorage.getItem('checkpointData');
    const tmp_index = localStorage.getItem('checkpointIndex');
    if (tmp_results !== null && tmp_index !== null) {
        results = JSON.parse(tmp_results);
        index = JSON.parse(tmp_index);
    }
}

function clearCheckpoint() {
    const userChoice = confirm('Are you sure you want to clear data?');

    // Check the user's choice
    if (userChoice) {
        localStorage.removeItem('checkpointData');
        localStorage.removeItem('checkpointIndex');
        location.reload();
    }
}

function saveCurrentResult() {
    if (index > 0) {
        results.push([
            data[index - 1].index,
            document.getElementById("model1_fluency").value,
            document.getElementById("model1_refrel").value,
            document.getElementById("model1_docrel").value,
            document.getElementById("model2_fluency").value,
            document.getElementById("model2_refrel").value,
            document.getElementById("model2_docrel").value,
            document.getElementById("model3_fluency").value,
            document.getElementById("model3_refrel").value,
            document.getElementById("model3_docrel").value
        ].join("\t"));
    }
}

function saveResult() {
    // 当所有数据都已经加载完毕，手动调用 saveCurrentResult() 来保存最后一条数据的评分
    if (index == data.length) {
        saveCurrentResult();
    }
    var blob = new Blob([results.join("\n")], {type: "text/plain;charset=utf-8"});
    saveAs(blob, "result.tsv");
}

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<h1>对话生成评估</h1>

	<p>选择TSV文件:</p>
	<input type="file" id="inputTSV" onchange="loadFiles()"/>

	<p>选择Model1预测:</p>
	<input type="file" id="inputModel1" onchange="loadFiles()"/>

	<p>选择Model2预测:</p>
	<input type="file" id="inputModel2" onchange="loadFiles()"/>

	<p>选择Model3预测:</p>
	<input type="file" id="inputModel3" onchange="loadFiles()"/>

	<h2>参考文档</h2>
	<p id="doc"></p>

	<h2>历史</h2>
	<p id="his"></p>

	<h2>标准回复</h2>
	<p id="gold"></p>

	<h2>Model1预测</h2>
	<p id="model1"></p>
	<input type="text" id="model1_fluency" placeholder="Fluency">
	<input type="text" id="model1_refrel" placeholder="Ref-Rel">
	<input type="text" id="model1_docrel" placeholder="Doc-Rel">

	<h2>Model2预测</h2>
	<p id="model2"></p>
	<input type="text" id="model2_fluency" placeholder="Fluency">
	<input type="text" id="model2_refrel" placeholder="Ref-Rel">
	<input type="text" id="model2_docrel" placeholder="Doc-Rel">

	<h2>Model3预测</h2>
	<p id="model3"></p>
	<input type="text" id="model3_fluency" placeholder="Fluency">
	<input type="text" id="model3_refrel" placeholder="Ref-Rel">
	<input type="text" id="model3_docrel" placeholder="Doc-Rel">

	<br>
	<br>
	<br>

	<button onclick="loadNext()">暂存并加载下一条</button>
	<button onclick="saveResult()">导出结果</button>
	<button onclick="clearCheckpoint()">清除暂存结果并重新开始</button>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

	<script>
	var data = []; // 存放数据
	var index = 0; // 当前数据的索引
	var results = []; // 存放结果

	loadCheckpoint();

	function loadFiles() {
	var fileTSV = document.getElementById("inputTSV").files[0];
	var fileModel1 = document.getElementById("inputModel1").files[0];
	var fileModel2 = document.getElementById("inputModel2").files[0];
	var fileModel3 = document.getElementById("inputModel3").files[0];

	if (fileTSV && fileModel1 && fileModel2 && fileModel3) {
	Promise.all([
	readFileAsText(fileTSV),
	readFileAsText(fileModel1),
	readFileAsText(fileModel2),
	readFileAsText(fileModel3),
	]).then(function(values) {
	var linesTSV = values[0].split('\n');
	var linesModel1 = values[1].split('\n');
	var linesModel2 = values[2].split('\n');
	var linesModel3 = values[3].split('\n');

	for (var i = 0; i < linesTSV.length; i++) {
	var parts = linesTSV[i].split('\t');
	data.push({
	"index": parts[0],
	"his": parts[1],
	"gold": parts[2],
	"doc": parts[3],
	"model1": linesModel1[i],
	"model2": linesModel2[i],
	"model3": linesModel3[i]
	});
	}
	loadNext();
	});
	}
	}

	function readFileAsText(file) {
	return new Promise(function(resolve, reject) {
	var reader = new FileReader();
	reader.onload = function(e) {
	resolve(e.target.result);
	};
	reader.onerror = function(e) {
	reject(e);
	};
	reader.readAsText(file);
	});
	}

	function loadNext() {
	saveCurrentResult();
	saveCheckpoint();
	if (index < data.length) {
	document.getElementById("his").innerText = data[index].his;
	document.getElementById("gold").innerText = data[index].gold;
	document.getElementById("doc").innerText = data[index].doc;
	document.getElementById("model1").innerText = data[index].model1;
	document.getElementById("model2").innerText = data[index].model2;
	document.getElementById("model3").innerText = data[index].model3;

	// 清空输入框
	document.getElementById("model1_fluency").value = "";
	document.getElementById("model1_refrel").value = "";
	document.getElementById("model1_docrel").value = "";
	document.getElementById("model2_fluency").value = "";
	document.getElementById("model2_refrel").value = "";
	document.getElementById("model2_docrel").value = "";
	document.getElementById("model3_fluency").value = "";
	document.getElementById("model3_refrel").value = "";
	document.getElementById("model3_docrel").value = "";

	index++;
	} else {
	alert("所有数据已加载完毕！");
	}
	}

	function saveCheckpoint() {
	localStorage.setItem('checkpointData', JSON.stringify(results));
	localStorage.setItem('checkpointIndex', JSON.stringify(index));
	}


	function loadCheckpoint() {
	const tmp_results = localStorage.getItem('checkpointData');
	const tmp_index = localStorage.getItem('checkpointIndex');
	if (tmp_results !== null && tmp_index !== null) {
	results = JSON.parse(tmp_results);
	index = JSON.parse(tmp_index);
	}
	}

	function clearCheckpoint() {
	const userChoice = confirm('Are you sure you want to clear data?');

	// Check the user's choice
	if (userChoice) {
	localStorage.removeItem('checkpointData');
	localStorage.removeItem('checkpointIndex');
	location.reload();
	}
	}

	function saveCurrentResult() {
	if (index > 0) {
	results.push([
	data[index - 1].index,
	document.getElementById("model1_fluency").value,
	document.getElementById("model1_refrel").value,
	document.getElementById("model1_docrel").value,
	document.getElementById("model2_fluency").value,
	document.getElementById("model2_refrel").value,
	document.getElementById("model2_docrel").value,
	document.getElementById("model3_fluency").value,
	document.getElementById("model3_refrel").value,
	document.getElementById("model3_docrel").value
	].join("\t"));
	}
	}

	function saveResult() {
	// 当所有数据都已经加载完毕，手动调用 saveCurrentResult() 来保存最后一条数据的评分
	if (index == data.length) {
	saveCurrentResult();
	}
	var blob = new Blob([results.join("\n")], {type: "text/plain;charset=utf-8"});
	saveAs(blob, "result.tsv");
	}

	</script>

	</body>
	</html>