Hugging Face's logo

Spaces:
ml6team
/
ML6-UniKP
Runtime error

App Files Community
1
Topallaj Denis commited on
Commit
184c542
•
1 Parent(s): f3d848c

add index html file

Browse files
Files changed (2) hide show
  1. main.py +11 -1
  2. static/index.html +119 -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
@@ -28,7 +30,15 @@ tokenizer = T5Tokenizer.from_pretrained(
28
  model = T5EncoderModel.from_pretrained(
29
  "Rostlab/prot_t5_xl_half_uniref50-enc")
30
 
31
- @app.get("/predict")
 
 
 
 
 
 
 
 
32
  def predict_UniKP_values(
33
  sequence: str,
34
  smiles: str
 
1
  from fastapi import FastAPI
2
  from fastapi.middleware.cors import CORSMiddleware
3
+ from fastapi.staticfiles import StaticFiles
4
+ from fastapi.responses import FileResponse
5
  from typing import Dict, List, Any, Tuple
6
  import pickle
7
  import math
 
30
  model = T5EncoderModel.from_pretrained(
31
  "Rostlab/prot_t5_xl_half_uniref50-enc")
32
 
33
+
34
+ app.mount("/", StaticFiles(directory="static", html=True), name="static")
35
+
36
+
37
+ @app.get("/")
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
static/index.html ADDED
@@ -0,0 +1,119 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
+ <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">
54
+ <h1>UniKP App</h1>
55
+ <p>
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"
63
+ id="sequence"
64
+ name="sequence"
65
+ placeholder="Enter sequence here"
66
+ required
67
+ />
68
+ <label for="substrate">Substrate (SMILES):</label>
69
+ <input
70
+ type="text"
71
+ id="substrate"
72
+ name="smiles"
73
+ placeholder="Enter substrate SMILES here"
74
+ required
75
+ />
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>