<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Manga Image Translator</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/picnic">
<style type="text/css">
#drop-area { border: 2px dashed #ccc; border-radius: 20px; width: 100%; margin: 50px auto; padding: 20px; } #drop-area.highlight { border-color: purple; } p { margin-top: 0; } .my-form { margin-bottom: 10px; } #gallery { text-align: center;} #gallery img { width: 95%; margin-bottom: 10px; vertical-align: middle; } .btn { display: inline-block; padding: 10px; background: #ccc; cursor: pointer; border-radius: 5px; border: 1px solid #ccc; } .btn:hover { background: #ddd; } #fileElem { display: none; }
.no-drag-select {
user-drag: none;
user-select: none;
}
</style>
</head>
<body>
<div>
<nav class="demo">
<a href="#" class="brand">Manga Image Translator</a>
<!-- responsive-->
<input id="bmenug" type="checkbox" class="show">
<label for="bmenug" class="burger pseudo button">≡</label>
<div class="menu">
<a href="https://github.com/zyddnys/manga-image-translator" target="_blank">About</a>
</div>
</nav>
<div class="flex one one-600 two-900" style="margin-top: 4em;">
<div style="margin:50px auto">
<div class="flex two" id="inputArea">
<div id="s-area"><h2>Raw Text</h2></div>
<div id="t-area"><h2>Translation</h2></div>
</div>
<div>
<button type="button" id="submit-button" class="button" disabled="disabled" name="submit" onclick="submit()">Waiting for Image</button>
<button type="button" id="reset-button" class="button" disabled="disabled" name="reset" onclick="fullReset()">Reset</button>
</div>
</div>
<div>
<div id="drop-area">
<form class="my-form" name="upload_images">
<p>Upload image by dragging and dropping images onto the dashed region</p>
<input type="file" id="fileElem" accept="image/*" onchange="handleFiles(this.files)">
<label class="btn" for="fileElem">Select some files</label>
</form>
<progress id="progress-bar" max=100 value=0 style="width:100%"></progress>
<div id="gallery"></div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var task_id = ""
var task_status = ""
// ************************ Drag and drop ***************** //
let dropArea = document.getElementById("drop-area")
// Prevent default drag behaviors
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, preventDefaults, false)
document.body.addEventListener(eventName, preventDefaults, false)
})
// Highlight drop area when item is dragged over it
;['dragenter', 'dragover'].forEach(eventName => {
dropArea.addEventListener(eventName, highlight, false)
})
;['dragleave', 'drop'].forEach(eventName => {
dropArea.addEventListener(eventName, unhighlight, false)
})
// Handle dropped files
dropArea.addEventListener('drop', handleDrop, false)
function preventDefaults (e) {
e.preventDefault()
e.stopPropagation()
}
function highlight(e) {
dropArea.classList.add('highlight')
}
function unhighlight(e) {
dropArea.classList.remove('active')
}
function handleDrop(e) {
var dt = e.dataTransfer
var files = dt.files
handleFiles(files)
}
let uploadProgress = []
let progressBar = document.getElementById('progress-bar')
function initializeProgress(numFiles) {
progressBar.value = 0
uploadProgress = []
for(let i = numFiles; i > 0; i--) {
uploadProgress.push(0)
}
}
function updateProgress(fileNumber, percent) {
uploadProgress[fileNumber] = percent
let total = uploadProgress.reduce((tot, curr) => tot + curr, 0) / uploadProgress.length
progressBar.value = total
}
function handleFiles(files) {
files = [...files]
initializeProgress(files.length)
files.forEach(uploadFile)
files.forEach(previewFile)
}
function previewFile(file) {
let reader = new FileReader()
reader.readAsDataURL(file)
reader.onloadend = function() {
let img = document.createElement('img')
img.src = reader.result
img.classList.add('no-drag-select')
document.getElementById('gallery').appendChild(img)
}
}
let submitButton = document.getElementById("submit-button")
let resetButton = document.getElementById("reset-button")
function fullReset() {
var url = '/cancel-manual-request'
var xhr = new XMLHttpRequest()
xhr.open('POST', url, true)
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
xhr.addEventListener('readystatechange', function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
reset()
}
})
xhr.send(JSON.stringify({
"task_id": task_id,
}))
}
function reset() {
var s_area = document.getElementById('s-area')
for (var i = s_area.children.length - 1; i >= 0; --i) {
var child = s_area.children[i]
if (child.tagName == "INPUT") {
child.remove()
}
}
var t_area = document.getElementById('t-area')
for (var i = t_area.children.length - 1; i >= 0; --i) {
var child = t_area.children[i]
if (child.tagName == "INPUT") {
child.remove()
}
}
progressBar.value = 0
submitButton.innerHTML = "Waiting for Image"
submitButton.onclick = null
submitButton.setAttribute("disabled", "disabled")
resetButton.innerHTML = "No Image"
resetButton.onclick = fullReset
resetButton.setAttribute("disabled", "disabled")
var img = document.getElementsByTagName("img")[0]
img.remove()
}
function downloadImageAndReset(path) {
const url = "/result-type"
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
xhr.addEventListener('readystatechange', function (e) {
if (xhr.readyState == 4 && xhr.status == 200) {
// I'm aware this looks stupid as hell but it seems like
// the only way to do this
const a = document.createElement('a')
a.href = path
a.download = "result."+xhr.responseText
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
reset()
}
})
xhr.send(null)
}
function uploadFile(file, i) {
// ch_images.value = ch_images.value + file.name
submitButton.setAttribute("disabled", "disabled")
submitButton.innerHTML = "Uploading"
resetButton.innerHTML = "Waiting"
resetButton.setAttribute("disabled", "disabled")
var url = '/manual-translate'
var xhr = new XMLHttpRequest()
var formData = new FormData()
xhr.open('POST', url, true)
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest')
// Update progress (can be used to show progress indicator)
xhr.upload.addEventListener("progress", function(e) {
updateProgress(i, (e.loaded * 100.0 / e.total) || 100)
if (e.loaded == e.total)
submitButton.innerHTML = "Processing"
})
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
updateProgress(i, 100)
const obj = JSON.parse(xhr.response)
console.log(obj)
task_id = obj.task_id
task_status = obj.status
var sArea = document.getElementById('s-area')
var tArea = document.getElementById('t-area')
for (var i = 0; obj.trans_result != null && i < obj.trans_result.length; i++) {
var input_s = document.createElement("input")
var input_t = document.createElement("input")
input_s.value = obj.trans_result[i].s
input_t.value = obj.trans_result[i].t
sArea.appendChild(input_s)
tArea.appendChild(input_t)
// console.log(obj.trans_result[i-1].s)
}
submitButton.removeAttribute("disabled")
submitButton.innerHTML = "Submit"
submitButton.onclick = submit
resetButton.removeAttribute("disabled")
resetButton.innerHTML = "Reset"
}
else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user
alert("upload failed for "+file.name)
}
})
formData.append('file', file)
xhr.send(formData)
}
function submit() {
submitButton.setAttribute("disabled", "disabled")
submitButton.innerHTML = "Running"
resetButton.setAttribute("disabled", "disabled")
resetButton.innerHTML = "Waiting"
var inputs = document.getElementsByTagName("input")
var trans_result = []
var j = ((inputs.length-2)/2)+1
var k = 0
for (var i = 1; i<=((inputs.length-2)/2); i++) {
trans_result[k] = {
's' : inputs[i].value,
't' : inputs[j].value
}
j++
k++
}
var postData = {
"task_id": task_id,
"status": task_status,
"trans_result": trans_result
}
postData = JSON.stringify(postData)
var url = '/post-manual-result'
var xhr = new XMLHttpRequest()
xhr.open('POST', url, true)
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8")
xhr.addEventListener('readystatechange', function(e) {
if (xhr.readyState == 4 && xhr.status == 200) {
var img = document.getElementsByTagName("img")[0]
img.src = "/result/" + task_id
img.onclick = (function (task_id) {
return function () {
downloadImageAndReset("/result/" + task_id)
};
})(task_id)
}
else if (xhr.readyState == 4 && xhr.status != 200) {
// Error. Inform the user
alert("Request failed!")
}
submitButton.removeAttribute("disabled")
submitButton.innerHTML = "Download Image"
submitButton.onclick = (function(task_id) { return function() {
downloadImageAndReset("/result/" + task_id)
};})(task_id)
resetButton.removeAttribute("disabled")
resetButton.innerHTML = "Reset"
resetButton.onclick = reset
})
xhr.send(postData)
}
</script>
</body>
</html>