fix endpoint query to form

main.py

@@ -1,4 +1,4 @@
-from fastapi import FastAPI
+from fastapi import FastAPI, Form
 from fastapi.middleware.cors import CORSMiddleware
 from fastapi.staticfiles import StaticFiles
 from fastapi.responses import FileResponse
@@ -39,11 +39,8 @@ def home() -> FileResponse:
 	return FileResponse(path="/app/static/index.html", media_type="text/html")
 
 @app.get("/predict")
-def predict_UniKP_values(
-	sequence: str,
-	smiles: str
-):
-	print(smiles)
+def predict_UniKP_values(sequence: str = Form(...), smiles: str = Form(...)) -> Dict[str, float]:
+	
 	endpointHandler = EndpointHandler()
 	result = endpointHandler.predict({
 		"inputs": {

static/script.js

@@ -1,17 +1,17 @@
 "use strict";
 
-document.getElementById("predict-form").addEventListener("submit", async (e) => {
+document.querySelector("#predict-form").addEventListener("submit", async (e) => {
 	e.preventDefault();
-	const sequence = document.getElementById("sequence").value;
-	const smiles = document.getElementById("substrate").value;
+	const sequence = document.querySelector("#sequence").value;
+	const smiles = document.querySelector("#substrate").value;
 
 	console.log(sequence);
 
 	const data = await prediction(sequence, smiles);
 
-	document.getElementById("km-result").innerText = data.km;
-	document.getElementById("kcat-result").innerText = data.kcat;
-	document.getElementById("vmax-result").innerText = data.vmax;
+	document.querySelector("#km-result").innerText = data.km;
+	document.querySelector("#kcat-result").innerText = data.kcat;
+	document.querySelector("#vmax-result").innerText = data.vmax;
 });
 
 const prediction = async (sequence, smiles) => {

static/styles.css

@@ -1,76 +1,80 @@
-/* style.css */
+/* styles.css */
 
+/* Resetting default margin and padding */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+/* Global styles */
 body {
-	font-family: Arial, sans-serif;
-	margin: 0;
-	padding: 0;
-	background-color: #f4f4f4;
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    color: #333;
 }
 
 .container {
-	max-width: 600px;
-	margin: 20px auto;
-	padding: 20px;
-	background-color: #fff;
-	border-radius: 8px;
-	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    max-width: 600px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: #fff;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 h1 {
-	text-align: center;
-	margin-bottom: 20px;
+    font-size: 24px;
+    margin-bottom: 20px;
 }
 
 p {
-	margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 form {
-	margin-bottom: 20px;
+    margin-bottom: 20px;
 }
 
 label {
-	display: block;
-	margin-bottom: 5px;
+    display: block;
+    margin-bottom: 5px;
 }
 
 input[type="text"] {
-	width: 100%;
-	padding: 10px;
-	margin-bottom: 10px;
-	border: 1px solid #ccc;
-	border-radius: 5px;
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
 }
 
 input[type="submit"] {
-	width: 100%;
-	padding: 10px;
-	background-color: #007bff;
-	color: #fff;
-	border: none;
-	border-radius: 5px;
-	cursor: pointer;
-	transition: background-color 0.3s ease;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    padding: 10px 20px;
+    border-radius: 4px;
+    cursor: pointer;
 }
 
 input[type="submit"]:hover {
-	background-color: #0056b3;
-}
-
-#result-container {
-	display: none; /* Hide result container initially */
+    background-color: #0056b3;
 }
 
-#result {
-	background-color: #f9f9f9;
-	padding: 20px;
-	border-radius: 8px;
+/* Result container styles */
+#result-container #result {
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
 }
 
 #result h3 {
-	margin-bottom: 10px;
+    font-size: 18px;
+    margin-bottom: 10px;
 }
 
 #result p {
-	margin-bottom: 15px;
+    margin-bottom: 10px;
 }