Hugging Face's logo

Spaces:
ml6team
/
ML6-UniKP
Runtime error

App Files Community
1
Topallaj Denis commited on
Commit
365c9e4
·
1 Parent(s): ec996aa

add static files

Browse files
Files changed (4) hide show
  1. main.py +9 -0
  2. static/index.html +49 -0
  3. static/script.js +28 -0
  4. static/styles.css +80 -0
main.py CHANGED
@@ -1,5 +1,7 @@
1
  from fastapi import FastAPI
2
  from fastapi.middleware.cors import CORSMiddleware
 
 
3
  from typing import Dict, List, Any, Tuple
4
  import pickle
5
  import math
@@ -33,6 +35,13 @@ class Item(pydantic.BaseModel):
33
  sequence: str
34
  smiles: str
35
 
 
 
 
 
 
 
 
36
  @app.post("/predict")
37
  def predict(item: Item):
38
  endpointHandler = EndpointHandler()
 
1
  from fastapi import FastAPI
2
  from fastapi.middleware.cors import CORSMiddleware
3
+ from fastapi.responses import FileResponse
4
+ from fastapi.staticfiles import StaticFiles
5
  from typing import Dict, List, Any, Tuple
6
  import pickle
7
  import math
 
35
  sequence: str
36
  smiles: str
37
 
38
+
39
+ app.mount("/", StaticFiles(directory="static"), name="static")
40
+
41
+ @app.get("/")
42
+ def home():
43
+ return FileResponse("index.html")
44
+
45
  @app.post("/predict")
46
  def predict(item: Item):
47
  endpointHandler = EndpointHandler()
static/index.html ADDED
@@ -0,0 +1,49 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
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="./styles.css" />
8
+
9
+ <title>UniKP App</title>
10
+ </head>
11
+ <body>
12
+ <div class="container">
13
+ <h1>UniKP App</h1>
14
+ <p>
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 id="predict-form">
19
+ <label for="sequence">Sequence:</label>
20
+ <input
21
+ type="text"
22
+ id="sequence"
23
+ name="sequence"
24
+ placeholder="Enter sequence here"
25
+ required
26
+ />
27
+ <label for="substrate">Substrate (SMILES):</label>
28
+ <input
29
+ type="text"
30
+ id="substrate"
31
+ name="smiles"
32
+ placeholder="Enter substrate SMILES here"
33
+ required
34
+ />
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,28 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ "use strict";
2
+
3
+ document.querySelector("#predict-form").addEventListener("submit", async (e) => {
4
+ e.preventDefault();
5
+ const sequence = document.querySelector("#sequence").value;
6
+ const smiles = document.querySelector("#substrate").value;
7
+
8
+ console.log(sequence);
9
+
10
+ const data = await prediction(sequence, smiles);
11
+
12
+ document.querySelector("#km-result").innerText = data.km;
13
+ document.querySelector("#kcat-result").innerText = data.kcat;
14
+ document.querySelector("#vmax-result").innerText = data.vmax;
15
+ });
16
+
17
+ const prediction = async (sequence, smiles) => {
18
+
19
+ const response = await fetch("/predict", {
20
+ method: "POST",
21
+ body: {
22
+ sequence: sequence,
23
+ smiles: smiles,
24
+ }
25
+ });
26
+ const data = await response.json();
27
+ return data;
28
+ };
static/styles.css ADDED
@@ -0,0 +1,80 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* styles.css */
2
+
3
+ /* Resetting default margin and padding */
4
+ * {
5
+ margin: 0;
6
+ padding: 0;
7
+ box-sizing: border-box;
8
+ }
9
+
10
+ /* Global styles */
11
+ body {
12
+ font-family: Arial, sans-serif;
13
+ background-color: #f0f0f0;
14
+ color: #333;
15
+ }
16
+
17
+ .container {
18
+ max-width: 600px;
19
+ margin: 20px auto;
20
+ padding: 20px;
21
+ background-color: #fff;
22
+ border-radius: 8px;
23
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
24
+ }
25
+
26
+ h1 {
27
+ font-size: 24px;
28
+ margin-bottom: 20px;
29
+ }
30
+
31
+ p {
32
+ margin-bottom: 20px;
33
+ }
34
+
35
+ form {
36
+ margin-bottom: 20px;
37
+ }
38
+
39
+ label {
40
+ display: block;
41
+ margin-bottom: 5px;
42
+ }
43
+
44
+ input[type="text"] {
45
+ width: 100%;
46
+ padding: 10px;
47
+ margin-bottom: 10px;
48
+ border: 1px solid #ccc;
49
+ border-radius: 4px;
50
+ }
51
+
52
+ input[type="submit"] {
53
+ background-color: #007bff;
54
+ color: #fff;
55
+ border: none;
56
+ padding: 10px 20px;
57
+ border-radius: 4px;
58
+ cursor: pointer;
59
+ }
60
+
61
+ input[type="submit"]:hover {
62
+ background-color: #0056b3;
63
+ }
64
+
65
+ /* Result container styles */
66
+ #result-container #result {
67
+ background-color: #f9f9f9;
68
+ padding: 20px;
69
+ border-radius: 8px;
70
+ box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
71
+ }
72
+
73
+ #result h3 {
74
+ font-size: 18px;
75
+ margin-bottom: 10px;
76
+ }
77
+
78
+ #result p {
79
+ margin-bottom: 10px;
80
+ }