Hugging Face's logo

Spaces:
ml6team
/
ML6-UniKP
Runtime error

App Files Community
1
Topallaj Denis commited on
Commit
52a9235
·
1 Parent(s): 184c542

modified endpoint

Browse files
Files changed (4) hide show
  1. main.py +1 -1
  2. static/index.html +14 -84
  3. static/script.js +19 -0
  4. static/styles.css +76 -0
main.py CHANGED
@@ -38,7 +38,7 @@ app.mount("/", StaticFiles(directory="static", html=True), name="static")
38
  def home() -> FileResponse:
39
  return FileResponse(path="/app/static/index.html", media_type="text/html")
40
 
41
- @app.post("/predict")
42
  def predict_UniKP_values(
43
  sequence: str,
44
  smiles: str
 
38
  def home() -> FileResponse:
39
  return FileResponse(path="/app/static/index.html", media_type="text/html")
40
 
41
+ @app.get("/predict")
42
  def predict_UniKP_values(
43
  sequence: str,
44
  smiles: str
static/index.html CHANGED
@@ -3,51 +3,10 @@
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 
 
6
  <title>UniKP App</title>
7
- <style>
8
- body {
9
- font-family: Arial, sans-serif;
10
- margin: 0;
11
- padding: 0;
12
- background-color: #f4f4f4;
13
- }
14
- .container {
15
- max-width: 600px;
16
- margin: 50px auto;
17
- padding: 20px;
18
- background-color: #fff;
19
- border-radius: 8px;
20
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
21
- }
22
- h1 {
23
- text-align: center;
24
- margin-bottom: 20px;
25
- }
26
- label {
27
- display: block;
28
- margin-bottom: 10px;
29
- }
30
- input[type="text"] {
31
- width: 100%;
32
- padding: 10px;
33
- margin-bottom: 20px;
34
- border: 1px solid #ccc;
35
- border-radius: 5px;
36
- }
37
- input[type="submit"] {
38
- width: 100%;
39
- padding: 10px;
40
- background-color: #007bff;
41
- color: #fff;
42
- border: none;
43
- border-radius: 5px;
44
- cursor: pointer;
45
- transition: background-color 0.3s ease;
46
- }
47
- input[type="submit"]:hover {
48
- background-color: #0056b3;
49
- }
50
- </style>
51
  </head>
52
  <body>
53
  <div class="container">
@@ -56,7 +15,7 @@
56
  This HF app uses the UniKP framework. Be sure to check it out on
57
  <a href="https://github.com/Luo-SynBioLab/UniKP"> GitHub</a>
58
  </p>
59
- <form action="/predict" method="post">
60
  <label for="sequence">Sequence:</label>
61
  <input
62
  type="text"
@@ -76,44 +35,15 @@
76
  <input type="submit" value="Predict" />
77
  </form>
78
  </div>
79
- <div id="result-container"></div>
80
-
81
- <script>
82
- // JavaScript code to handle form submission and result display
83
- document.getElementById("predict-form").addEventListener("submit", function(event) {
84
- event.preventDefault(); // Prevent default form submission
85
-
86
- // Get form data
87
- var sequence = document.getElementById("sequence").value;
88
- var smiles = document.getElementById("substrate").value;
89
-
90
- // Create request body
91
- var requestBody = {
92
- sequence: sequence,
93
- smiles: smiles
94
- };
95
-
96
- // Send POST request to /predict endpoint
97
- fetch("/predict", {
98
- method: "POST",
99
- headers: {
100
- "Content-Type": "application/json"
101
- },
102
- body: JSON.stringify(requestBody)
103
- })
104
- .then(response => response.json())
105
- .then(data => {
106
- // Display result in result-container
107
- var resultHtml = "<h2>Prediction Result:</h2>";
108
- resultHtml += "<p>Km: " + data.Km + "</p>";
109
- resultHtml += "<p>Kcat: " + data.Kcat + "</p>";
110
- resultHtml += "<p>Vmax: " + data.Vmax + "</p>";
111
- document.getElementById("result-container").innerHTML = resultHtml;
112
- })
113
- .catch(error => {
114
- console.error("Error:", error);
115
- });
116
- });
117
- </script>
118
  </body>
119
  </html>
 
3
  <head>
4
  <meta charset="UTF-8" />
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <script src="./script.js" defer></script>
7
+ <link rel="stylesheet" href="./style.css" />
8
+
9
  <title>UniKP App</title>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
10
  </head>
11
  <body>
12
  <div class="container">
 
15
  This HF app uses the UniKP framework. Be sure to check it out on
16
  <a href="https://github.com/Luo-SynBioLab/UniKP"> GitHub</a>
17
  </p>
18
+ <form>
19
  <label for="sequence">Sequence:</label>
20
  <input
21
  type="text"
 
35
  <input type="submit" value="Predict" />
36
  </form>
37
  </div>
38
+ <div id="result-container">
39
+ <div id="result" class="container">
40
+ <h3>Km</h3>
41
+ <p id="km-result"></p>
42
+ <h3>Kcat</h3>
43
+ <p id="kcat-result"></p>
44
+ <h3>Vmax</h3>
45
+ <p id="vmax-result"></p>
46
+ </div>
47
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
48
  </body>
49
  </html>
static/script.js ADDED
@@ -0,0 +1,19 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ "use strict";
2
+
3
+ document.getElementById("predict-form").addEventListener("submit", async (e) => {
4
+ e.preventDefault();
5
+ const sequence = document.getElementById("sequence").value;
6
+ const smiles = document.getElementById("substrate").value;
7
+
8
+ const requestBody = {
9
+ sequence: sequence,
10
+ smiles: smiles
11
+ };
12
+
13
+ const response = await fetch(`predict?sequence=${sequence}&smiles=${smiles}`);
14
+
15
+ const data = await response.json();
16
+ document.getElementById("km-result").innerText = data.km;
17
+ document.getElementById("kcat-result").innerText = data.kcat;
18
+ document.getElementById("vmax-result").innerText = data.vmax;
19
+ });
static/styles.css ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* style.css */
2
+
3
+ body {
4
+ font-family: Arial, sans-serif;
5
+ margin: 0;
6
+ padding: 0;
7
+ background-color: #f4f4f4;
8
+ }
9
+
10
+ .container {
11
+ max-width: 600px;
12
+ margin: 20px auto;
13
+ padding: 20px;
14
+ background-color: #fff;
15
+ border-radius: 8px;
16
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
17
+ }
18
+
19
+ h1 {
20
+ text-align: center;
21
+ margin-bottom: 20px;
22
+ }
23
+
24
+ p {
25
+ margin-bottom: 20px;
26
+ }
27
+
28
+ form {
29
+ margin-bottom: 20px;
30
+ }
31
+
32
+ label {
33
+ display: block;
34
+ margin-bottom: 5px;
35
+ }
36
+
37
+ input[type="text"] {
38
+ width: 100%;
39
+ padding: 10px;
40
+ margin-bottom: 10px;
41
+ border: 1px solid #ccc;
42
+ border-radius: 5px;
43
+ }
44
+
45
+ input[type="submit"] {
46
+ width: 100%;
47
+ padding: 10px;
48
+ background-color: #007bff;
49
+ color: #fff;
50
+ border: none;
51
+ border-radius: 5px;
52
+ cursor: pointer;
53
+ transition: background-color 0.3s ease;
54
+ }
55
+
56
+ input[type="submit"]:hover {
57
+ background-color: #0056b3;
58
+ }
59
+
60
+ #result-container {
61
+ display: none; /* Hide result container initially */
62
+ }
63
+
64
+ #result {
65
+ background-color: #f9f9f9;
66
+ padding: 20px;
67
+ border-radius: 8px;
68
+ }
69
+
70
+ #result h3 {
71
+ margin-bottom: 10px;
72
+ }
73
+
74
+ #result p {
75
+ margin-bottom: 15px;
76
+ }