Spaces:

ml6team
/

ML6-UniKP

Runtime error

App Files Files Community

Topallaj Denis commited on Mar 30, 2024

Commit

b83473a

1 Parent(s): 6aadb65

refactored UniKP page

Browse files

Files changed (4) hide show

main.py +28 -9
static/index.html +73 -0
static/index.js +30 -0
static/styles.css +94 -0

main.py CHANGED Viewed

@@ -1,4 +1,7 @@
 from fastapi import FastAPI
 from typing import Dict, List, Any, Tuple
 import pickle
 import math
@@ -14,29 +17,45 @@ import pydantic
 app = FastAPI()
-tokenizer = T5Tokenizer.from_pretrained(
-			"Rostlab/prot_t5_xl_half_uniref50-enc", do_lower_case=False, torch_dtype=torch.float16)
-model = T5EncoderModel.from_pretrained(
-			"Rostlab/prot_t5_xl_half_uniref50-enc")
-class Item(pydantic.BaseModel):
 	sequence: str
 	smiles: str
-@app.post("/predict")
-def predict(item: Item):
 	endpointHandler = EndpointHandler()
 	result = endpointHandler.predict({
 		"inputs": {
-			"sequence": item.sequence,
-			"smiles": item.smiles
 		}
 	})
 	return result
 class EndpointHandler():
 	def __init__(self, path=""):

 from fastapi import FastAPI
+from fastapi.responses import HTMLResponse, FileResponse
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
 from typing import Dict, List, Any, Tuple
 import pickle
 import math
 app = FastAPI()
+app.mount("/static", StaticFiles(directory="static"), name="static")
+app.add_middleware(
+	CORSMiddleware,
+	allow_origins=["*"],
+	allow_credentials=True,
+	allow_methods=["*"],
+	allow_headers=["*"],
+)
+@app.get("/", response_class=HTMLResponse)
+async def read_root():
+	return FileResponse("static/index.html")
+class PredictData(pydantic.BaseModel):
 	sequence: str
 	smiles: str
+@app.post("/api/predict")
+async def predict(data: PredictData):
 	endpointHandler = EndpointHandler()
 	result = endpointHandler.predict({
 		"inputs": {
+			"sequence": data.sequence,
+			"smiles": data.smiles
 		}
 	})
 	return result
+tokenizer = T5Tokenizer.from_pretrained(
+			"Rostlab/prot_t5_xl_half_uniref50-enc", do_lower_case=False, torch_dtype=torch.float16)
+model = T5EncoderModel.from_pretrained(
+			"Rostlab/prot_t5_xl_half_uniref50-enc")
 class EndpointHandler():
 	def __init__(self, path=""):

static/index.html ADDED Viewed

	@@ -0,0 +1,73 @@

+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>UniKP Kinetic Values Prediction</title>
+		<script src="/static/index.js" defer></script>
+		<link rel="stylesheet" type="text/css" href="/static/styles.css" />
+	</head>
+	<body>
+		<h1>UniKP Kinetic Values Prediction</h1>
+		<p> <a href="/docs" target="_blank">API Usage</a></p>
+		<div class="box">
+			<form id="predictionForm">
+				<label for="sequence">Sequence:</label>
+				<textarea id="sequence" name="sequence"></textarea>
+				<label for="smiles">SMILES:</label><br />
+				<textarea id="smiles" name="smiles"></textarea>
+				<input type="submit" value="Submit" />
+			</form>
+		</div>
+		<div id="predictionResults" class="box"></div>
+		<div class="box">
+			<h2>UniKP</h2>
+			<h3>What is UniKP?</h3>
+			<p>
+				UniKP is a unified framework for the prediction of enzyme
+				kinetic parameters. It is a machine learning model that predicts
+				the kinetic parameters of enzymes based on their amino acid
+				sequences and SMILES representations of a substrate.
+			</p>
+			<h3>Why is this interesting?</h3>
+			<p>
+				UniKP can be used to predict the kinetic parameters of enzymes,
+				which can be used for feature extraction in enzyme engineering.
+				Knowing the kinetic parameters of an enzyme can help to
+				understand its function and can be used to optimize its
+				performance.
+			</p>
+		</div>
+		<div class="box">
+			<h2>References</h2>
+			<ul>
+				<li>
+					<a
+						href="https://github.com/Luo-SynBioLab/UniKP"
+						target="_blank"
+						><img
+							class="devicon"
+							src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original-wordmark.svg"
+							alt="UniKP"
+					/></a>
+				</li>
+				<li>
+					<a
+						href="https://www.nature.com/articles/s41467-023-44113-1"
+						target="_blank"
+						>Yu, H., Deng, H., He, J. et al. UniKP: a unified
+						framework for the prediction of enzyme kinetic
+						parameters. Nat Commun 14, 8211 (2023)</a
+					>
+				</li>
+				<li><a href="https://www.ml6.eu/" target="_blank">ML6</a></li>
+				<li>
+					<a href="https://www.decypher.bio/" target="_blank"
+						>deCYPher</a
+					>
+				</li>
+			</ul>
+		</div>
+	</body>
+</html>

static/index.js ADDED Viewed

	@@ -0,0 +1,30 @@

+"use strict";
+const form = document.getElementById("predictionForm");
+form.addEventListener("submit", async (e) => {
+	e.preventDefault();
+	const sequence = document.getElementById("sequence").value;
+	const smiles = document.getElementById("smiles").value;
+	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();
+	const predictionResults = document.getElementById("predictionResults");
+	// unhide the results
+	predictionResults.style.display = "block";
+	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>`;
+});

static/styles.css ADDED Viewed

	@@ -0,0 +1,94 @@

+body {
+	font-family: Arial, sans-serif;
+	background-color: #f8f8f8;
+	margin: 0;
+	padding: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	flex-direction: column;
+}
+h1 {
+	color: #333;
+	text-align: center;
+}
+form {
+	margin: 20px auto;
+	width: 50%;
+	text-align: center;
+}
+label {
+	display: block;
+	margin-bottom: 5px;
+}
+textarea {
+	width: 80%;
+	padding: 8px;
+	margin-bottom: 10px;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+}
+input[type="submit"] {
+	background-color: #4caf50;
+	color: white;
+	padding: 10px 20px;
+	border: none;
+	border-radius: 5px;
+	cursor: pointer;
+}
+input[type="submit"]:hover {
+	background-color: #45a049;
+}
+#predictionResults {
+	margin: 20px auto;
+	width: 50%;
+	padding: 10px;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+	display: none;
+}
+.box {
+	margin: 20px auto;
+	width: 50%;
+	background-color: #f9f9f9;
+	padding: 10px;
+	border: 1px solid #ccc;
+	border-radius: 5px;
+}
+.box h2 {
+	color: #333;
+	margin-bottom: 10px;
+}
+.box ul {
+	list-style-type: none;
+	padding: 0;
+}
+.box li {
+	margin-bottom: 5px;
+}
+a {
+	color: #ff6600;
+	text-decoration: none;
+}
+a:hover {
+	text-decoration: underline;
+}
+.devicon {
+	width: 50px;
+	height: 50px;
+	margin-right: 5px;
+}