refactor client problems

server.py

@@ -9,8 +9,10 @@ from typing import Dict
 
 import numpy as np
 from fastapi import FastAPI
+from fastapi import status
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
+from fastapi.responses import JSONResponse
 from fastapi.templating import Jinja2Templates
 from starlette.requests import Request
 from PIL import Image
@@ -50,44 +52,53 @@ def home(request: Request):
 
 @app.post("/predict")
 def predict(request: Dict):
-	image = request["image"]
-
-	# Decode base64-encoded image
-	image = base64.b64decode(image)
-	image = Image.open(io.BytesIO(image))
-	image_path = "image.png"
-	translated_image_path = "translated_image.png"
-
-	# Save the image locally
-	image.save(image_path)
-
-	results = predict_bounding_boxes(object_detection_model, image_path)
-	image = np.array(image)
-
-	for result in results:
-			x1, y1, x2, y2, _, _ = result
-			detected_image = image[int(y1):int(y2), int(x1):int(x2)]
-			im = Image.fromarray(np.uint8((detected_image)*255))
-			text = get_text_from_image(im)
-			detected_image, cont = process_contour(detected_image)
-			text_translated = translate_manga(text)
-			add_text(detected_image, text_translated, cont)
-
-	# Display the translated image
-	result_image = Image.fromarray(image, 'RGB')
-	result_image.save(translated_image_path)
-
-	# Convert the image to base64
-	buff = io.BytesIO()
-	result_image.save(buff, format="PNG")
-	img_str = base64.b64encode(buff.getvalue()).decode("utf-8")
-
-	# Clean up
-	os.remove(image_path)
-	os.remove(translated_image_path)
-
-	return {"image": img_str}
-
+	try:
+
+		image = request["image"]
+
+		# Decode base64-encoded image
+		image = base64.b64decode(image)
+		image = Image.open(io.BytesIO(image))
+		image_path = "image.png"
+		translated_image_path = "translated_image.png"
+
+		# Save the image locally
+		image.save(image_path)
+
+		results = predict_bounding_boxes(object_detection_model, image_path)
+		image = np.array(image)
+
+		for result in results:
+				x1, y1, x2, y2, _, _ = result
+				detected_image = image[int(y1):int(y2), int(x1):int(x2)]
+				im = Image.fromarray(np.uint8((detected_image)*255))
+				text = get_text_from_image(im)
+				detected_image, cont = process_contour(detected_image)
+				text_translated = translate_manga(text)
+				add_text(detected_image, text_translated, cont)
+
+		# Display the translated image
+		result_image = Image.fromarray(image, 'RGB')
+		result_image.save(translated_image_path)
+
+		# Convert the image to base64
+		buff = io.BytesIO()
+		result_image.save(buff, format="PNG")
+		img_str = base64.b64encode(buff.getvalue()).decode("utf-8")
+
+		# Clean up
+		os.remove(image_path)
+		os.remove(translated_image_path)
+
+		return {"image": img_str}
+	except Exception as e:
+		# Return with status code 500 (Internal Server Error) if an error occurs
+		return JSONResponse(
+                status_code=500,
+                content={
+                         "code": status.HTTP_500_INTERNAL_SERVER_ERROR,
+                         "message": "Internal Server Error"}
+            )
 
 if __name__ == '__main__':
 	uvicorn.run('app:app', host='localhost', port=8000, reload=True)

static/index.js

@@ -1,20 +1,24 @@
 "use strict";
 
-async function predict() {
-	const fileInput = document.getElementById('fileInput');
-	const translateButton = document.getElementById('translateButton');
-	const spinner = document.getElementById('spinner');
-	const inputImage = document.getElementById('inputImage');
-	const outputImage = document.getElementById('outputImage');
-	const downloadButton = document.getElementById('downloadButton');
+const fileInput = document.getElementById('fileInput');
+const translateButton = document.getElementById('translateButton');
+const spinner = document.getElementById('spinner');
+const inputImage = document.getElementById('inputImage');
+const outputImage = document.getElementById('outputImage');
+const downloadButton = document.getElementById('downloadButton');
 
-	downloadButton.style.display = 'none';
+downloadButton.style.display = 'none';
 
+fileInput.addEventListener('change', () => {
 	if (fileInput.files.length === 0) {
 		alert('Please select an image file.');
 		return;
 	}
 
+	// Clear the previous images
+	inputImage.src = '';
+	outputImage.src = '';
+
 	const file = fileInput.files[0];
 	const reader = new FileReader();
 
@@ -25,9 +29,16 @@ async function predict() {
 	};
 
 	reader.readAsDataURL(file);
+});
 
-	translateButton.style.display = 'none';
-	spinner.style.display = 'block';
+async function predict() {
+	if (fileInput.files.length === 0) {
+		alert('Please select an image file.');
+		return;
+	}
+
+	const file = fileInput.files[0];
+	const reader = new FileReader();
 
 	reader.onloadend = async function () {
 		const base64Image = reader.result.split(',')[1];
@@ -42,16 +53,29 @@ async function predict() {
 
 		const result = await response.json();
 		if (response.status !== 200) {
-			alert(result.error);
+			alert(result.message);
+
+			// Reset the input
+			fileInput.value = '';
+			inputImage.style.display = 'none';
+			outputImage.style.display = 'none';
+			spinner.style.display = 'none';
+			downloadButton.style.display = 'none';
+			translateButton.style.display = 'block';
 			return;
 		}
+
 		outputImage.src = `data:image/jpeg;base64,${result.image}`;
 		outputImage.style.display = 'block';
-		downloadButton.href = outputImage.src;
+		downloadButton.querySelector('a').href = outputImage.src;
 		downloadButton.style.display = 'block';
 
 		translateButton.style.display = 'inline-block';
 		spinner.style.display = 'none';
-
 	};
+
+	reader.readAsDataURL(file);
+
+	translateButton.style.display = 'none';
+	spinner.style.display = 'block';
 }

static/styles.css

@@ -26,6 +26,14 @@ a {
     padding: 20px;
 }
 
+.actions {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-flow: column wrap;
+    gap: 1rem;
+}
+
 input[type="file"] {
     margin: 20px 0;
     padding: 10px;

templates/index.html

@@ -9,20 +9,32 @@
 	<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">
-			<input type="file" id="fileInput" accept="image/*" />
-			<br />
-			<button id="translateButton" onclick="predict()">Translate</button>
+			<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"
-						alt="Selected Manga"
-						style="max-width: 100%"
-					/>
+					<img id="inputImage" style="max-width: 100%" />
 				</div>
 				<div class="image-wrapper">
 					<h3>Translated Image</h3>
@@ -31,15 +43,6 @@
 						alt="Translated Manga"
 						style="max-width: 100%; display: none"
 					/>
-					<button>
-						<a
-							id="downloadButton"
-							href="#"
-							download="translated_manga.jpg"
-							style="display: none"
-							>Download Translated Image</a
-						>
-					</button>
 				</div>
 			</div>
 		</div>