File size: 1,343 Bytes
b902873
 
 
 
 
 
 
 
 
 
 
56d3e2f
 
 
 
 
 
 
 
b902873
 
56d3e2f
 
 
 
 
 
 
 
 
 
 
b902873
 
 
 
56d3e2f
b902873
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Manga Translator</title>
		<link rel="stylesheet" href="/static/styles.css" />
	</head>
	<body>
		<header>
			<h1>Manga Translator</h1>
			<p>
				Translate your manga panels from <b>Japanese</b> to
				<b>English</b>!
			</p>
			<p>
				Make sure the image is clear, black and white, and has text in
				Japanese.
			</p>
		</header>
		<div class="container">
			<div class="actions">
				<input type="file" id="fileInput" accept="image/*" />
				<button id="translateButton" onclick="predict()">
					Translate
				</button>
				<button id="downloadButton" style="display: none">
					<a href="#" download="translated_manga.jpg">
						Download Translated Image
					</a>
				</button>
			</div>
			<div id="spinner" class="spinner" style="display: none"></div>
			<div class="images-container">
				<div class="image-wrapper">
					<h3>Original Image</h3>
					<img id="inputImage" style="max-width: 100%" />
				</div>
				<div class="image-wrapper">
					<h3>Translated Image</h3>
					<img
						id="outputImage"
						alt="Translated Manga"
						style="max-width: 100%; display: none"
					/>
				</div>
			</div>
		</div>
		<script src="/static/index.js"></script>
	</body>
</html>