Spaces:

Sunday01
/

testapi

Running

File size: 9,533 Bytes

9dce458

<!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">&#8801;</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>