static/index.js

"use strict";

const form = document.getElementById("predictionForm");
const predictionResults = document.getElementById("predictionResults");

form.addEventListener("submit", async (e) => {
	e.preventDefault();

	const sequence = document.getElementById("sequence").value;
	const smiles = document.getElementById("smiles").value;

	if (!sequence || !smiles) {
		alert("Please enter both sequence and SMILES");
		return;
	}

	if (predictionResults.classList.contains("hidden")) {
		// unhide the results div by removing the class hidden
		predictionResults.classList.remove("hidden");
		predictionResults.classList.add("box");
	}
	
	// loader until the results are fetched
	predictionResults.innerHTML = `
			<div class="loader"></div>
			`

	const response = await fetch("/api/predict", {
		method: "POST",
		headers: {
			"Content-Type": "application/json",
			"Accept": "application/json",
		},
		body: JSON.stringify({ sequence, smiles }),
	});

	const data = await response.json();

	// display the results
	predictionResults.innerHTML = `
		<h2>Prediction Results</h2>
		<p><strong>Km:</strong> ${data.Km}</p>
		<p><strong>Kcat:</strong> ${data.Kcat}</p>
		<p><strong>Vmax:</strong> ${data.Vmax}</p>`;
});