| <!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> |
|
|
| |
| <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 = "" |
| |
| |
| |
| |
| let dropArea = document.getElementById("drop-area") |
| |
| |
| ;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
| dropArea.addEventListener(eventName, preventDefaults, false) |
| document.body.addEventListener(eventName, preventDefaults, false) |
| }) |
| |
| |
| ;['dragenter', 'dragover'].forEach(eventName => { |
| dropArea.addEventListener(eventName, highlight, false) |
| }) |
| |
| ;['dragleave', 'drop'].forEach(eventName => { |
| dropArea.addEventListener(eventName, unhighlight, false) |
| }) |
| |
| |
| 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) { |
| |
| |
| 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) { |
| |
| |
| 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') |
| |
| |
| 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) |
| |
| |
| } |
| |
| submitButton.removeAttribute("disabled") |
| submitButton.innerHTML = "Submit" |
| submitButton.onclick = submit |
| |
| resetButton.removeAttribute("disabled") |
| resetButton.innerHTML = "Reset" |
| } |
| else if (xhr.readyState == 4 && xhr.status != 200) { |
| |
| 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) { |
| |
| 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> |
