Spaces:
Runtime error
Runtime error
Topallaj Denis
commited on
Commit
·
52c3d5f
1
Parent(s):
97030c2
modified css, docs link
Browse files- static/index.html +7 -11
- static/index.js +14 -4
- static/styles.css +14 -7
static/index.html
CHANGED
|
@@ -9,7 +9,7 @@
|
|
| 9 |
</head>
|
| 10 |
<body>
|
| 11 |
<h1>UniKP Kinetic Values Prediction</h1>
|
| 12 |
-
<p> <a href="/docs" target="_blank">API Usage</a></p>
|
| 13 |
<div class="box">
|
| 14 |
<form id="predictionForm">
|
| 15 |
<label for="sequence">Sequence:</label>
|
|
@@ -19,7 +19,7 @@
|
|
| 19 |
<input type="submit" value="Submit" />
|
| 20 |
</form>
|
| 21 |
</div>
|
| 22 |
-
<div id="predictionResults" class="
|
| 23 |
|
| 24 |
<div class="box">
|
| 25 |
<h2>UniKP</h2>
|
|
@@ -42,17 +42,13 @@
|
|
| 42 |
<div class="box">
|
| 43 |
<h2>References</h2>
|
| 44 |
<ul>
|
| 45 |
-
<li>
|
| 46 |
<a
|
| 47 |
href="https://github.com/Luo-SynBioLab/UniKP"
|
| 48 |
target="_blank"
|
| 49 |
-
|
| 50 |
-
class="devicon"
|
| 51 |
-
src="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/icons/github/github-original-wordmark.svg"
|
| 52 |
-
alt="UniKP"
|
| 53 |
-
/></a>
|
| 54 |
</li>
|
| 55 |
-
<li>
|
| 56 |
<a
|
| 57 |
href="https://www.nature.com/articles/s41467-023-44113-1"
|
| 58 |
target="_blank"
|
|
@@ -61,8 +57,8 @@
|
|
| 61 |
parameters. Nat Commun 14, 8211 (2023)</a
|
| 62 |
>
|
| 63 |
</li>
|
| 64 |
-
<li><a href="https://www.ml6.eu/" target="_blank">ML6</a></li>
|
| 65 |
-
<li>
|
| 66 |
<a href="https://www.decypher.bio/" target="_blank"
|
| 67 |
>deCYPher</a
|
| 68 |
>
|
|
|
|
| 9 |
</head>
|
| 10 |
<body>
|
| 11 |
<h1>UniKP Kinetic Values Prediction</h1>
|
| 12 |
+
<p> <a href="/docs#/default/predict_api_predict_post" target="_blank">API Usage</a></p>
|
| 13 |
<div class="box">
|
| 14 |
<form id="predictionForm">
|
| 15 |
<label for="sequence">Sequence:</label>
|
|
|
|
| 19 |
<input type="submit" value="Submit" />
|
| 20 |
</form>
|
| 21 |
</div>
|
| 22 |
+
<div id="predictionResults" class="hidden"></div>
|
| 23 |
|
| 24 |
<div class="box">
|
| 25 |
<h2>UniKP</h2>
|
|
|
|
| 42 |
<div class="box">
|
| 43 |
<h2>References</h2>
|
| 44 |
<ul>
|
| 45 |
+
<li data-emoji="💻">
|
| 46 |
<a
|
| 47 |
href="https://github.com/Luo-SynBioLab/UniKP"
|
| 48 |
target="_blank"
|
| 49 |
+
>UniKP(GitHub)</a>
|
|
|
|
|
|
|
|
|
|
|
|
|
| 50 |
</li>
|
| 51 |
+
<li data-emoji="📝">
|
| 52 |
<a
|
| 53 |
href="https://www.nature.com/articles/s41467-023-44113-1"
|
| 54 |
target="_blank"
|
|
|
|
| 57 |
parameters. Nat Commun 14, 8211 (2023)</a
|
| 58 |
>
|
| 59 |
</li>
|
| 60 |
+
<li data-emoji="🤝"><a href="https://www.ml6.eu/" target="_blank">ML6</a></li>
|
| 61 |
+
<li data-emoji="🧬">
|
| 62 |
<a href="https://www.decypher.bio/" target="_blank"
|
| 63 |
>deCYPher</a
|
| 64 |
>
|
static/index.js
CHANGED
|
@@ -9,12 +9,22 @@ form.addEventListener("submit", async (e) => {
|
|
| 9 |
const sequence = document.getElementById("sequence").value;
|
| 10 |
const smiles = document.getElementById("smiles").value;
|
| 11 |
|
| 12 |
-
|
| 13 |
-
|
|
|
|
|
|
|
| 14 |
|
| 15 |
-
|
| 16 |
-
|
|
|
|
|
|
|
|
|
|
| 17 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 18 |
const response = await fetch("/api/predict", {
|
| 19 |
method: "POST",
|
| 20 |
headers: {
|
|
|
|
| 9 |
const sequence = document.getElementById("sequence").value;
|
| 10 |
const smiles = document.getElementById("smiles").value;
|
| 11 |
|
| 12 |
+
if (!sequence || !smiles) {
|
| 13 |
+
alert("Please enter both sequence and SMILES");
|
| 14 |
+
return;
|
| 15 |
+
}
|
| 16 |
|
| 17 |
+
if (predictionResults.classList.contains("hidden")) {
|
| 18 |
+
// unhide the results div by removing the class hidden
|
| 19 |
+
predictionResults.classList.remove("hidden");
|
| 20 |
+
predictionResults.classList.add("box");
|
| 21 |
+
}
|
| 22 |
|
| 23 |
+
// loader until the results are fetched
|
| 24 |
+
predictionResults.innerHTML = `
|
| 25 |
+
<div class="loader"></div>
|
| 26 |
+
`
|
| 27 |
+
|
| 28 |
const response = await fetch("/api/predict", {
|
| 29 |
method: "POST",
|
| 30 |
headers: {
|
static/styles.css
CHANGED
|
@@ -52,6 +52,9 @@ input[type="submit"]:hover {
|
|
| 52 |
padding: 10px;
|
| 53 |
border: 1px solid #ccc;
|
| 54 |
border-radius: 5px;
|
|
|
|
|
|
|
|
|
|
| 55 |
display: none;
|
| 56 |
}
|
| 57 |
|
|
@@ -62,6 +65,10 @@ input[type="submit"]:hover {
|
|
| 62 |
padding: 10px;
|
| 63 |
border: 1px solid #ccc;
|
| 64 |
border-radius: 5px;
|
|
|
|
|
|
|
|
|
|
|
|
|
| 65 |
}
|
| 66 |
|
| 67 |
.box h2 {
|
|
@@ -69,22 +76,22 @@ input[type="submit"]:hover {
|
|
| 69 |
margin-bottom: 10px;
|
| 70 |
}
|
| 71 |
|
| 72 |
-
.box ul {
|
| 73 |
-
list-style-type: none;
|
| 74 |
-
padding: 0;
|
| 75 |
-
}
|
| 76 |
-
|
| 77 |
.box li {
|
| 78 |
margin-bottom: 5px;
|
| 79 |
}
|
| 80 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 81 |
a {
|
| 82 |
-
color: #
|
| 83 |
-
text-decoration: none;
|
| 84 |
}
|
| 85 |
|
| 86 |
a:hover {
|
| 87 |
text-decoration: underline;
|
|
|
|
| 88 |
}
|
| 89 |
|
| 90 |
.devicon {
|
|
|
|
| 52 |
padding: 10px;
|
| 53 |
border: 1px solid #ccc;
|
| 54 |
border-radius: 5px;
|
| 55 |
+
}
|
| 56 |
+
|
| 57 |
+
.hidden {
|
| 58 |
display: none;
|
| 59 |
}
|
| 60 |
|
|
|
|
| 65 |
padding: 10px;
|
| 66 |
border: 1px solid #ccc;
|
| 67 |
border-radius: 5px;
|
| 68 |
+
display: flex;
|
| 69 |
+
justify-content: center;
|
| 70 |
+
align-items: center;
|
| 71 |
+
flex-direction: column;
|
| 72 |
}
|
| 73 |
|
| 74 |
.box h2 {
|
|
|
|
| 76 |
margin-bottom: 10px;
|
| 77 |
}
|
| 78 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 79 |
.box li {
|
| 80 |
margin-bottom: 5px;
|
| 81 |
}
|
| 82 |
|
| 83 |
+
.box li::marker {
|
| 84 |
+
content: attr(data-emoji);
|
| 85 |
+
font-size: 1.5em;
|
| 86 |
+
}
|
| 87 |
+
|
| 88 |
a {
|
| 89 |
+
color: #333;
|
|
|
|
| 90 |
}
|
| 91 |
|
| 92 |
a:hover {
|
| 93 |
text-decoration: underline;
|
| 94 |
+
color: lightgray;
|
| 95 |
}
|
| 96 |
|
| 97 |
.devicon {
|